/* Product page */

function ProductPage({ setRoute }) {
  return (
    <React.Fragment>
      <section className="subhero">
        <div className="container">
          <div className="crumb">PRODUCT</div>
          <h1>Two products. One platform.</h1>
          <p>The Edge runs the inspection. The Cloud runs the fleet. Use one, or both — same data model, same login.</p>
        </div>
      </section>

      <section className="section tight">
        <div className="container">
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16,
          }}>
            {/* Edge product card */}
            <div style={{
              background: 'var(--color-surface)', border: '1px solid var(--color-border-light)',
              borderRadius: 'var(--radius-lg)', padding: 32,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                <Icon name="memory" size={18} style={{ color: 'var(--color-primary)' }} />
                <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: 0.8,
                  textTransform: 'uppercase', color: 'var(--color-primary)' }}>
                  PRODUCT 01
                </span>
              </div>
              <h2 style={{ fontSize: 28, margin: '0 0 8px', fontWeight: 600, letterSpacing: -0.4 }}>
                VIAI Edge Inspector
              </h2>
              <p style={{ fontSize: 15, color: 'var(--color-on-surface-secondary)',
                  lineHeight: 1.55, margin: '0 0 24px' }}>
                Runs on the Jetson next to your camera. Operators run live inspections,
                review alerts, browse history. Engineers tune detectors in the lab.
              </p>
              <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 24px',
                display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
                  'Live View — verdict in 42ms with bbox overlay',
                  'Recipes — one-click switch between part programs',
                  'History — every inspected unit, replayable',
                  'Detector Lab — tune thresholds, export models',
                  'PLC integration — 24V GPIO + MQTT trigger',
                ].map(x => (
                  <li key={x} style={{ display: 'flex', gap: 10, fontSize: 14 }}>
                    <Icon name="check_circle" size={16} style={{ color: 'var(--color-pass)', marginTop: 1 }} />
                    {x}
                  </li>
                ))}
              </ul>
              <button className="btn btn-outline">
                <Icon name="open_in_new" size={14} />
                View live demo
              </button>
            </div>

            {/* Cloud product card */}
            <div style={{
              background: 'var(--color-surface)', border: '1px solid var(--color-border-light)',
              borderRadius: 'var(--radius-lg)', padding: 32,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                <Icon name="cloud" size={18} style={{ color: 'var(--color-primary)' }} />
                <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: 0.8,
                  textTransform: 'uppercase', color: 'var(--color-primary)' }}>
                  PRODUCT 02
                </span>
              </div>
              <h2 style={{ fontSize: 28, margin: '0 0 8px', fontWeight: 600, letterSpacing: -0.4 }}>
                VIAI Cloud Dashboard
              </h2>
              <p style={{ fontSize: 15, color: 'var(--color-on-surface-secondary)',
                  lineHeight: 1.55, margin: '0 0 24px' }}>
                Optional fleet management for multi-site operations. View KPIs across
                every device, push model updates, manage users and licenses.
              </p>
              <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 24px',
                display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
                  'Fleet overview — every device, every line',
                  'KPIs — defect rate, throughput, uptime',
                  'Remote model push — staged rollouts',
                  'Tenancy — separate by plant, line, role',
                  'API + webhook — bring data to your MES',
                ].map(x => (
                  <li key={x} style={{ display: 'flex', gap: 10, fontSize: 14 }}>
                    <Icon name="check_circle" size={16} style={{ color: 'var(--color-pass)', marginTop: 1 }} />
                    {x}
                  </li>
                ))}
              </ul>
              <button className="btn btn-outline">
                <Icon name="open_in_new" size={14} />
                Tour the dashboard
              </button>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <Eyebrow>Capabilities</Eyebrow>
          <h2 className="section-title">Built like industrial software, not a SaaS demo.</h2>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
          }}>
            {[
              { icon: 'offline_bolt', t: 'Offline-first', d: 'The line keeps running with no internet. Cloud sync is opportunistic.' },
              { icon: 'tune', t: 'Threshold tuning', d: 'Drag a slider, see the precision-recall curve. Save as a recipe per SKU.' },
              { icon: 'science', t: 'Detector Lab', d: 'Fork a detector, adjust ROIs, retrain on new samples. Side-by-side eval.' },
              { icon: 'history', t: 'Frame history', d: 'Every inspected unit kept on-device for 30 days. Searchable by verdict.' },
              { icon: 'shield', t: 'On-prem secure', d: 'No image leaves the device unless you explicitly opt in. SOC 2 ready.' },
              { icon: 'integration_instructions', t: 'Open APIs', d: 'REST + MQTT + webhook. Integrate with Ignition, AVEVA, or your own MES.' },
            ].map(c => (
              <div key={c.t} style={{
                background: 'var(--color-surface)',
                border: '1px solid var(--color-border-light)',
                borderRadius: 12, padding: 24,
              }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 8,
                  background: 'var(--color-primary-light)', color: 'var(--color-primary)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  marginBottom: 14,
                }}><Icon name={c.icon} size={20} /></div>
                <h3 style={{ fontSize: 17, fontWeight: 600, margin: '0 0 6px' }}>{c.t}</h3>
                <p style={{ fontSize: 13, lineHeight: 1.5,
                  color: 'var(--color-on-surface-secondary)', margin: 0 }}>{c.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTA setRoute={setRoute} />
    </React.Fragment>
  );
}

Object.assign(window, { ProductPage });