/* global React */

// ---------- Data Analysis ----------
function Data() {
  return (
    <section className="section" id="data">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="num">06 /</span> Data &amp; process improvements</span>
          <h2 className="h2">Your line generates thousands of data points every minute — <span className="it">most are ignored</span></h2>
          <p className="lead">PackGuru turns them into a daily briefing — exactly where to focus, what to fix first, and what the expected gain will be</p>
        </div>

        <div className="two-up">
          <div className="report">
            <div className="report-head">
              <Icon name="chart" size={14} />
              <div>
                <div style={{ fontSize: 14, fontWeight: 500 }}>Daily AI Report · L1 Cleanline</div>
                <div className="tiny" style={{ marginTop: 2 }}>Shift end · 17 May 2026 · Auto-generated</div>
              </div>
              <div className="stamp">4M Methodology</div>
            </div>

            <div className="report-section">
              <div className="label">Critical loss · top contributors</div>
              {[
              { name: 'Capper rotator', val: 38, num: '−2,140 b' },
              { name: 'Filler seal', val: 24, num: '−1,360 b' },
              { name: 'Cap sorter', val: 19, num: '−1,070 b' },
              { name: 'Conveyor jam', val: 11, num: '−620 b' }].
              map((r, idx) =>
              <div className="bar-row" key={idx}>
                  <div className="name">{r.name}</div>
                  <div className="bar"><i style={{ width: r.val + '%' }} /></div>
                  <div className="num">{r.num}</div>
                </div>
              )}
            </div>

            <div className="report-section">
              <div className="label">Root cause · 4M classification</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 8 }}>
                {[
                { l: 'Man', v: '12%' },
                { l: 'Machine', v: '54%' },
                { l: 'Method', v: '22%' },
                { l: 'Material', v: '12%' }].
                map((c) =>
                <div key={c.l} style={{ padding: '10px 12px', border: '1px solid var(--line)', borderRadius: 10 }}>
                    <div className="tiny">{c.l}</div>
                    <div style={{ fontSize: 18, fontFamily: 'var(--mono)', marginTop: 4 }}>{c.v}</div>
                  </div>
                )}
              </div>
            </div>

            <div className="report-section">
              <div className="label">Top 3 actions · 80/20 focus</div>
              <div className="recs">
                {[
                { n: '01', t: 'Schedule rotator camera lens cleaning every 4h on L1' },
                { n: '02', t: 'Replace filler seal cassette on station 3 within next 48h' },
                { n: '03', t: 'Recalibrate Delta robot KPR1 overpick to 32.0 (curved caps SKU)' }].
                map((r) =>
                <div className="rec" key={r.n}>
                    <span className="n">{r.n}</span>
                    <span>{r.t}</span>
                  </div>
                )}
              </div>
            </div>
          </div>

          <div className="col" style={{ gap: 18 }}>
            {[
            { t: 'Root Cause Analysis (4M)', d: 'Every issue categorised by Man, Machine, Method or Material. Critical losses quantified in units. Top three actions address 99% of losses' },
            { t: 'Golden Recipe Management', d: "If the line ran perfectly last Friday but is underperforming today, PackGuru highlights every parameter difference between now and the last known high-performance configuration" },
            { t: 'Speed Loss Analysis', d: 'Deep-dive into every module. Ramp-up assessment from changeover to stable production. Performance oscillation analysis to find downstream blockages' },
            { t: 'Ask Your Shift', d: '"Show me time spent in Execute and Aborted states for L1 on the 17th of May." PackGuru pulls data, charts it, breaks it down by hour. No SQL' }].
            map((i) =>
            <div className="feature" key={i.t} style={{ minHeight: 0, padding: 24 }}>
                <h3 style={{ fontSize: 17 }}>{i.t}</h3>
                <p>{i.d}</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ---------- Roberta ----------
function Roberta() {
  const modes = [
  { n: '01', t: 'Patrol Mode', d: 'Patrols autonomously. When a machine stops and no operator action is detected, navigates to the area, records the situation, documents fault and response', out: 'Output → root cause dataset' },
  { n: '02', t: 'Changeover Assistance', d: 'Records the full action sequence during changeovers. Compared against the standard procedure to create real-floor training material', out: 'Output → standardisation, shorter changeovers' },
  { n: '03', t: 'Troubleshooting', d: 'If no operator action 5 minutes after a stoppage, Roberta navigates to the problem area and displays the correct procedure at the machine', out: 'Output → right knowledge, right place, right time' },
  { n: '04', t: 'Weak-Point Monitoring', d: 'Stations herself at the highest-risk point of the process — defined by known jam areas and the SKU currently running', out: 'Output → earlier detection, contextual guidance' }];

  return (
    <section className="section" id="roberta">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="num">07 /</span> Roberta</span>
          <h2 className="h2">The right knowledge, at the right place, <span className="it">at the right time</span></h2>
          <p className="lead">Roberta is a mobile robot powered by the PackGuru AI Field Production Advisor. She patrols production lines autonomously, responds to "Hey PackGuru", and brings expert knowledge directly to the point of need</p>
        </div>

        <div className="roberta-grid">
          <div className="roberta-card">
            <div className="roberta-art" style={{ padding: 0, display: 'block', background: 'none', border: 'none' }}>
              <img
                src="/assets/roberta-photo.webp"
                alt="Roberta — PackGuru AI Field Production Advisor on the factory floor"
                loading="lazy"
                decoding="async"
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 10%', display: 'block', borderRadius: 18 }}
              />
              <div className="roberta-cap" style={{ position: 'absolute', bottom: 0, left: 0, right: 0, background: 'linear-gradient(transparent, rgba(0,0,0,0.75))', padding: '40px 16px 12px', borderRadius: '0 0 18px 18px', zIndex: 1 }}>[ photo · OrionStar GreetingBot Nova · Unilogo factory ]</div>
            </div>
            <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
              'Autonomous patrol with scheduled observation stops',
              'Voice activation via "Hey PackGuru" wake command',
              'On-screen SOPs, manuals, training videos',
              'Live video stream to remote technical experts',
              'NVIDIA edge compute for offline resilience'].
              map((t) =>
              <div key={t} style={{ display: 'flex', gap: 12, alignItems: 'center', fontSize: 13.5, color: 'var(--ink-2)' }}>
                  <div style={{ width: 18, height: 18, borderRadius: 999, background: 'rgba(167,139,250,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--accent)' }}>
                    <Icon name="check" size={11} />
                  </div>
                  {t}
                </div>
              )}
            </div>
          </div>

          <div className="col" style={{ gap: 24 }}>
            <div className="mode-list">
              {modes.map((m) =>
              <div className="mode" key={m.n}>
                  <div className="num">{m.n}</div>
                  <div>
                    <h4>{m.t}</h4>
                    <p>{m.d}</p>
                    <div className="out" style={{ color: "rgb(121, 225, 228)" }}>{m.out}</div>
                  </div>
                </div>
              )}
            </div>

            <div className="card">
              <div className="card-inner">
                <div className="tiny" style={{ marginBottom: 10 }}>Architecture · Three layers</div>
                <div className="col" style={{ gap: 10, fontSize: 13.5, color: 'var(--ink-2)' }}>
                  <div><b style={{ color: 'var(--ink)' }}>L1 Mobile platform</b> — Autonomous nav, 3D LiDAR, cameras, mics, touchscreen, safety sensors.</div>
                  <div><b style={{ color: 'var(--ink)' }}>L2 PackGuru AI engine</b> — NLP, SOP retrieval, video streaming, incident tagging, voice interaction.</div>
                  <div><b style={{ color: 'var(--ink)' }}>L3 NVIDIA edge module</b> — On-device inference, low-latency processing, offline fallback when WiFi fails.</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

window.Data = Data;window.Roberta = Roberta;