/* global React */

// ---------- Live Monitoring (WhatsApp) ----------
function Monitoring() {
  return (
    <section className="section" id="monitoring">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="num">04 /</span> Live monitoring</span>
          <h2 className="h2">At 4am, operators don't log into systems — <span className="it">they send a WhatsApp</span></h2>
          <p className="lead">If the answer isn't there, they wait — and the line stays down. PackGuru is already in the group, responding in seconds with video analysis, proactive alerts, and step-by-step guidance</p>
        </div>

        <div className="two-up">
          <div className="wa">
            <div className="wa-head">
              <div className="wa-avatar">L1</div>
              <div>
                <div className="wa-name">Cleanline L1 · Night shift</div>
                <div className="wa-sub">PackGuru · 4 operators · 1 supervisor</div>
              </div>
            </div>
            <div className="wa-body">
              <div className="wa-msg them">
                <div style={{ fontSize: 11, color: '#a78bfa', marginBottom: 4 }}>Tomáš · Operator</div>
                <div className="wa-video">▷ video_4847.mp4 · 00:08</div>
                <div>Not capping. Bottles passing without caps.</div>
                <div className="time">04:45</div>
              </div>
              <div className="wa-msg them" style={{ background: '#1f2c33', borderColor: 'rgba(167,139,250,0.3)' }}>
                <div style={{ fontSize: 11, color: '#67e8f9', marginBottom: 4, display: 'flex', gap: 6, alignItems: 'center' }}>
                  <Icon name="spark" size={10} /> PackGuru
                </div>
                <div className="wa-pill">ALARM STATE · CAPPER 2</div>
                <div style={{ marginBottom: 6 }}>Rotator camera issue identified. Capper 2 logged 4 errors in last 12 min.</div>
                <div style={{ fontSize: 12, color: '#cfd5dc', marginBottom: 4 }}>Steps:</div>
                <div style={{ fontSize: 12, color: '#cfd5dc', lineHeight: 1.5 }}>
                  1. Clean rotator lens (ISO panel L2)<br />
                  2. Check bottle spacing → guide rail<br />
                  3. Resume from HMI · F4
                </div>
                <div className="wa-confidence"><Icon name="check" size={10} /> Confidence HIGH · 96%</div>
                <div className="time" style={{ color: 'rgba(255,255,255,0.4)' }}>04:45</div>
              </div>
              <div className="wa-msg me">
                <div>Cleaned lens. Back up.</div>
                <div className="time">04:48</div>
              </div>
              <div className="wa-msg them" style={{ background: 'rgba(74,222,128,0.08)', border: '1px solid rgba(74,222,128,0.2)' }}>
                <div style={{ fontSize: 11, color: '#6ee7a8', marginBottom: 4 }}>PackGuru · resolved</div>
                <div>L1 back to EXECUTE. 3:12 stoppage logged. Incident saved to knowledge base.</div>
                <div className="time">04:48</div>
              </div>
            </div>
          </div>

          <div className="col" style={{ gap: 18 }}>
            {[
            { t: 'Communicator integration', d: 'No separate app, no login. Works on the phone operators already carry. Analyses video messages to diagnose faults instantly' },
            { t: 'Live troubleshooting', d: 'Voice, text, or photo via "Hey PackGuru". Specific contextual answers — not search results, actual steps. In 30+ languages, on HMI, tablet, phone, or via Roberta' },
            { t: 'Changeover tracking', d: 'Step-by-step digital guide for every A→B switch. Photo checks against reference. Machine signals log timing. Operator efficiency linked to training level' },
            { t: 'Living knowledge base', d: 'Every resolved OEM conversation automatically logged and made searchable. The system gets smarter every shift' }].
            map((i) =>
            <div className="feature" key={i.t} style={{ minHeight: 0, padding: 24 }}>
                <div className="row" style={{ gap: 10 }}>
                  <span className="live-dot" style={{ backgroundColor: "rgb(228, 121, 133)" }} />
                  <h3 style={{ fontSize: 17 }}>{i.t}</h3>
                </div>
                <p>{i.d}</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ---------- Maintenance + Case study ----------
function Maintenance() {
  const items = [
  { pill: 'Pump temp', t: 'AC Motor Overheat Protection', d: 'Foam from closure transport reaches the capper vacuum, gradually clogging it. PackGuru monitors pump temperature continuously and flags before failure', take: 'Not just detection — root cause. PackGuru suggests the specific correction action based on running format' },
  { pill: 'Vacuum', t: 'Vacuum Pipe Control', d: 'Tracks pick time across 8 robots, identifies degrading conditions suggesting a hose issue. Notifies maintenance and OEM via WhatsApp. DMS integration auto-creates work orders', take: 'Replace the hose before it affects productivity — not after' },
  { pill: 'O-rings', t: 'Filler O-Ring Wear Detection', d: 'Detects early indicators by monitoring pressure profiles — unexpected fluctuations, drops, increased fill times — and alerts before significant product loss', take: 'A failing seal caught early vs. mid-shift = thousands of units of product saved' },
  { pill: 'Vision', t: 'Vision System Training Data', d: 'When a 6-axis robot collides with a misplaced cap, the 10 preceding photos are auto-recorded and fed back into vision retraining', take: 'Fewer collisions = fewer stoppages = more bottles per shift' }];

  return (
    <section className="section" id="maintenance">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="num">05 /</span> Condition-based maintenance</span>
          <h2 className="h2">Reactive maintenance is the <span className="it">most expensive</span> kind</h2>
          <p className="lead">A worn spring. A clogged vacuum hose. A failing O-ring. None of these fail suddenly — they degrade gradually until the line stops. PackGuru watches the signals</p>
        </div>

        <div className="maint-grid" style={{ marginBottom: 40 }}>
          {items.map((i) =>
          <div className="maint" key={i.t}>
              <span className="pill">{i.pill}</span>
              <h4>{i.t}</h4>
              <p>{i.d}</p>
              <div className="takeaway" style={{ color: "rgb(121, 225, 228)" }}>{i.take}</div>
            </div>
          )}
        </div>

        <div className="case">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }} className="case-grid">
            <div>
              <span className="tag">Case study · Cap Sorter</span>
              <h3 className="h2" style={{ fontSize: 'clamp(28px, 3vw, 40px)', marginTop: 20 }}>
                Up to <span style={{ color: '#67e8f9' }}>960 bottles/hr</span> recovered through maintenance alone.
              </h3>
              <p className="lead" style={{ marginTop: 16, fontSize: 15 }}>
                Worst case: 70+ missed picks per robot, per hour. Root cause: burned LED stripes and belt dirt creating shadows that confused the vision system.
              </p>
            </div>
            <div className="col" style={{ gap: 12 }}>
              {[
              { n: '01', t: 'Weekly cleaning procedure', d: 'Sorter belt protocol scheduled and tracked' },
              { n: '02', t: 'Backlight inspection', d: 'LED stripe health monitored across shifts' },
              { n: '03', t: 'Automated filter check', d: 'Triggered when missed picks exceed threshold' }].
              map((i) =>
              <div key={i.n} style={{ padding: 20, borderRadius: 14, background: 'rgba(255,255,255,0.04)', border: '1px solid var(--line)', display: 'grid', gridTemplateColumns: '40px 1fr', gap: 16, alignItems: 'start' }}>
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--accent)', letterSpacing: '0.08em', marginTop: 3 }}>{i.n}</div>
                  <div>
                    <div style={{ fontWeight: 500, fontSize: 15, marginBottom: 4 }}>{i.t}</div>
                    <div style={{ fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.5 }}>{i.d}</div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

window.Monitoring = Monitoring;window.Maintenance = Maintenance;