/* global React, Reveal, Blueprint */
const { useState, useEffect } = React;

function Hero({ variant }) {
  if (variant === 'fullbleed') {
    return (
      <section className="hero hero-fullbleed container">
        <div className="hero-right"><Blueprint /></div>
        <div className="hero-left">
          <div className="hero-kicker" style={{justifyContent:'center'}}>
            <span className="dot"></span>
            <span className="txt">All-In-One Camera · AI1</span>
          </div>
          <h1>Turn what your cameras see<br/>into what your business <span className="accent">knows.</span></h1>
          <p className="sub">
            AI1 converts raw pixels on your line into structured business events your systems can act on. Defect caught. Pallet wrapped. Worker safe. All in the millisecond it takes to blink.
          </p>
          <div className="hero-actions">
            <button type="button" className="btn btn-primary" onClick={() => window.__openLeadModal('download')}>Download spec sheet <span className="arrow">→</span></button>
            <a className="btn" href="#how">See how it works</a>
          </div>
        </div>
      </section>
    );
  }

  if (variant === 'photo') {
    return (
      <section className="hero hero-photo container">
        <div className="hero-left">
          <div className="hero-kicker">
            <span className="dot"></span>
            <span className="txt">All-In-One Camera · AI1</span>
          </div>
          <h1>Visual intelligence, <span className="accent">decoded</span> at the edge.</h1>
          <p className="sub">
            AI1 turns every part coming off your line into a structured business event, ready for your MES, your ERP, your BI stack, in the time it takes for the part to move down the conveyor.
          </p>
          <div className="hero-actions">
            <button type="button" className="btn btn-primary" onClick={() => window.__openLeadModal('download')}>Download spec sheet <span className="arrow">→</span></button>
            <a className="btn" href="#platform">Explore the platform</a>
          </div>
        </div>
        <div className="hero-right">
          <div className="photo-box">
            <div className="photo-corner mono">PROD · AI1 · ISO</div>
            <img src="assets/ai1-photo.webp" alt="AI1 industrial vision camera" />
          </div>
        </div>
        <HeroMetrics />
      </section>
    );
  }

  // default blueprint
  return (
    <section className="hero container">
      <div className="hero-left">
        <div className="hero-kicker">
          <span className="dot"></span>
          <span className="txt">All-In-One Camera · AI1</span>
        </div>
        <h1>Turn visual intelligence into <span className="accent">business intelligence.</span></h1>
        <p className="sub">
          AI1 is the shortest path from pixels to decisions. Camera, compute, lighting, and Roboflow in one device, converting every part on your line into a structured event your systems can act on.
        </p>
        <div className="hero-actions">
          <button type="button" className="btn btn-primary" onClick={() => window.__openLeadModal('download')}>Download spec sheet <span className="arrow">→</span></button>
          <a className="btn" href="#how">See how it works</a>
        </div>
      </div>
      <div className="hero-right">
        <Blueprint />
      </div>
      <HeroMetrics />
    </section>
  );
}

function HeroMetrics() {
  return (
    <div className="hero-metrics">
      <div className="m">
        <div className="val">8<span className="unit"> MP</span></div>
        <div className="lbl mono">4K Sensor · 12mm Lens</div>
      </div>
      <div className="m">
        <div className="val">1024<span className="unit"> CUDA cores</span></div>
        <div className="lbl mono">NVIDIA Jetson Orin NX</div>
      </div>
      <div className="m">
        <div className="val">8<span className="unit"> architectures</span></div>
        <div className="lbl mono">RF-DETR · YOLO · DINOv3 · SAM 3</div>
      </div>
      <div className="m">
        <div className="val">50k+<span className="unit"> models</span></div>
        <div className="lbl mono">Roboflow Universe · Deploy in seconds</div>
      </div>
    </div>
  );
}

function TrustRow() {
  return (
    <section className="container">
      <div className="trust-row">
        <div className="tr-lbl">Roboflow infrastructure trusted by over half of the Fortune 100</div>
        <div className="logos">
          <img src="assets/logos/rivian.svg" alt="Rivian" />
          <img src="assets/logos/usg.svg" alt="USG" />
          <img src="assets/logos/pella.svg" alt="Pella" className="is-mark" />
          <img src="assets/logos/american-woodmark.svg" alt="American Woodmark" />
          <img src="assets/logos/cummins.svg" alt="Cummins" />
          <img src="assets/logos/bnsf.png" alt="BNSF Railway" />
          <img src="assets/logos/ge-vernova.svg" alt="GE Vernova" />
          <img src="assets/logos/chobani.svg" alt="Chobani" />
        </div>
      </div>
    </section>
  );
}

function Problem() {
  return (
    <section className="section container" id="problem">
      <Reveal>
        <div style={{maxWidth:860, marginBottom:64}}>
          <div className="section-label mono">01 · The Value</div>
          <h2>Turn what your cameras <span style={{color:'var(--accent)'}}>see</span> into what your business <span style={{color:'var(--accent)'}}>knows</span>.</h2>
          <p style={{fontSize:18, color:'var(--ink-dim)', marginTop:24, maxWidth:720}}>
            Every frame on your line is raw visual intelligence. Pixels that already know whether a seal is complete, a label is aligned, a pallet is wrapped, a worker is safe. AI1 is the shortest path from those pixels to a structured business event your systems can act on.
          </p>
        </div>
      </Reveal>

      <Reveal>
        <div className="problem">
          <div className="stack-card typical">
            <div className="hdr">
              <h3>Visual Intelligence</h3>
              <span className="tag mono">RAW PIXELS</span>
            </div>
            <ul>
              <li><span className="num mono">PX</span>Continuous video from every station, every shift, every site</li>
              <li><span className="num mono">PX</span>Signals humans already read: defects, posture, fill level, orientation</li>
              <li><span className="num mono">PX</span>Context that no PLC, barcode, or weight sensor can capture</li>
              <li><span className="num mono">PX</span>Trapped in DVRs, discarded in buffers, never seen again</li>
              <li><span className="num mono">PX</span>Invisible to ERP, MES, BI, quality, and operations teams</li>
            </ul>
          </div>
          <div className="stack-card ai1">
            <div className="hdr">
              <h3>Business Intelligence</h3>
              <span className="tag mono">STRUCTURED EVENTS</span>
            </div>
            <ul>
              <li><span className="num mono">BI</span>Defect · 09:14:24 · Line B2 · Pos 3 · conf 0.97 · frame_id 8841</li>
              <li><span className="num mono">BI</span>Structured events land in MES, ERP, BI, and Slack in milliseconds</li>
              <li><span className="num mono">BI</span>Downtime prevented, yield lifted, safety audited. With receipts.</li>
              <li><span className="num mono">BI</span>Every inspection is queryable, auditable, and tied to a SKU</li>
              <li><span className="num mono">BI</span>Operators, quality, and execs see the same ground truth</li>
            </ul>
          </div>
        </div>
      </Reveal>

      <Reveal>
        <div className="value-flow mono">
          <span className="vf-step">PIXELS</span>
          <span className="vf-arr">──▶</span>
          <span className="vf-step accent">AI1 · ON-DEVICE MODEL</span>
          <span className="vf-arr">──▶</span>
          <span className="vf-step">STRUCTURED EVENT</span>
          <span className="vf-arr">──▶</span>
          <span className="vf-step">DECISION</span>
        </div>
      </Reveal>
    </section>
  );
}

function Platform() {
  const rows = [
    {
      kicker: 'WORKFLOWS',
      title: 'Drag-and-drop production pipelines.',
      lede: 'Chain models, logic, and integrations in a visual editor, then run the whole thing on-device.',
      stats: [['150+', 'Workflow blocks'], ['36', 'Model architectures'], ['1B+', 'Inferences / week']],
      img: 'assets/platform-workflows.png?v=3',
      reverse: false,
    },
    {
      kicker: 'DEPLOYMENT MANAGER',
      title: 'One pane of glass. Hundreds of sites.',
      lede: 'Provision devices, push workflows, and monitor utilization across every plant from a single console. Every update is over-the-air.',
      stats: [['OTA', 'Model + security patches'], ['RTSP', 'GigE camera streaming'], ['∞', 'Sites per fleet']],
      img: 'assets/platform-deployment.png?v=2',
      reverse: true,
    },
    {
      kicker: 'HMI',
      title: 'The dashboard on the factory floor.',
      lede: 'Operators see live streams, match rates, and defect counts on a customizable edge display. No cloud round-trip. No latency.',
      stats: [['<100ms', 'Edge round-trip'], ['PASS / FAIL', 'Per-part verdicts'], ['OPC-UA / MQTT', 'PLC integrations']],
      img: 'assets/platform-hmi.png?v=3',
      reverse: false,
    },
    {
      kicker: 'VISION EVENTS',
      title: 'Every part, a queryable record.',
      lede: 'Predictions, metadata, and operator feedback land as structured events — one per part, not per frame. Local first, synced to the cloud, exported to any BI tool.',
      stats: [['JSON', 'Structured schema'], ['API', 'Query + export'], ['SQL / BI', 'Snowflake, PowerBI, Grafana']],
      img: 'assets/platform-events.png?v=3',
      reverse: true,
    },
  ];
  return (
    <section className="section container" id="platform">
      <Reveal>
        <div style={{maxWidth:820, marginBottom:72}}>
          <div className="section-label mono">02 · The Platform</div>
          <h2>One device. The whole Roboflow stack.</h2>
          <p style={{fontSize:18, color:'var(--ink-dim)', marginTop:24, maxWidth:680}}>
            AI1 doesn't just see. It runs the same Workflows, syncs to the same Deployment Manager, and emits the same Vision Events your team already builds against.
          </p>
        </div>
      </Reveal>

      <div className="platform-rows">
        {rows.map((r, i) => (
          <Reveal key={r.kicker}>
            <div className={'plat-row' + (r.reverse ? ' reverse' : '')}>
              <div className="plat-copy">
                <div className="plat-kicker mono">{r.kicker}</div>
                <h3>{r.title}</h3>
                <p className="plat-lede">{r.lede}</p>
                <div className="plat-stats">
                  {r.stats.map(([v, l]) => (
                    <div className="plat-stat" key={l}>
                      <div className="v mono">{v}</div>
                      <div className="l mono">{l}</div>
                    </div>
                  ))}
                </div>
              </div>
              <div className="plat-shot">
                <div className="shot-frame">
                  <div className="shot-chrome">
                    <span className="dot" /><span className="dot" /><span className="dot" />
                    <span className="shot-url mono">app.roboflow.com / {r.kicker.toLowerCase().replace(/ /g,'-')}</span>
                  </div>
                  <img src={r.img} alt={r.kicker} />
                </div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function Enterprise() {
  const integrations = [
    { cat: 'PLC & Machine Control', items: ['OPC-UA', 'MQTT', 'Modbus TCP', 'EtherNet/IP', 'Profinet', 'Rockwell', 'Siemens'] },
    { cat: 'Camera & Capture', items: ['RTSP', 'GigE Vision', 'Basler', 'FLIR', 'Lucid', 'Luxonis', 'Reolink', 'Unifi'] },
    { cat: 'Security & Compliance', items: ['SOC 2 Type II', 'HIPAA + BAA', 'SSO / SAML', 'RBAC', 'Audit log', 'SSL A+ (Qualys)'] },
  ];

  return (
    <section className="section container" id="enterprise">
      <Reveal>
        <div style={{maxWidth:820, marginBottom:56}}>
          <div className="section-label mono">03 · Enterprise</div>
          <h2>Speaks <span style={{color:'var(--accent)'}}>your floor's protocol</span>. On day one.</h2>
          <p style={{fontSize:18, color:'var(--ink-dim)', marginTop:24, maxWidth:720}}>
            AI1 is an industrial endpoint, wired to the PLCs, MES, and ERP systems your plant already runs. Structured vision events land where your operations team already looks: in Ignition, in SAP, in PowerBI, in Slack.
          </p>
        </div>
      </Reveal>

      <Reveal>
        <div className="ent-grid">
          {integrations.map((g) => (
            <div className="ent-card" key={g.cat}>
              <div className="ent-cat mono">{g.cat}</div>
              <div className="ent-chips">
                {g.items.map((it) => (
                  <span className="ent-chip mono" key={it}>{it}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </Reveal>

      <Reveal>
        <div className="ent-stripe">
          <div className="ent-stripe-item">
            <div className="v mono">&lt;100 ms</div>
            <div className="l mono">Edge round-trip · PLC-grade</div>
          </div>
          <div className="ent-stripe-item">
            <div className="v mono">SOC 2 · HIPAA</div>
            <div className="l mono">Enterprise security, every deploy</div>
          </div>
          <div className="ent-stripe-item">
            <div className="v mono">VPC / On-prem</div>
            <div className="l mono">Deploy where your data lives</div>
          </div>
          <div className="ent-stripe-item">
            <div className="v mono">5 year</div>
            <div className="l mono">Software support + OTA patches</div>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

function SupportedModels() {
  const first = [
    { name: 'RF-DETR', tag: 'Roboflow', note: 'SOTA object detection. Top accuracy, real-time latency.' },
    { name: 'RF-DETR NAS', tag: 'Roboflow', note: 'Neural Architecture Search finds the optimal RF-DETR variant for your data and hardware.' },
    { name: 'RF-DETR Segmentation', tag: 'Roboflow', note: 'Instance segmentation on the RF-DETR backbone. SOTA accuracy at the edge.' },
    { name: 'YOLO 11 / 12 / 26', tag: 'Ultralytics', note: 'Real-time detection. Supported for compatibility. RF-DETR is recommended for new projects.' },
    { name: 'YOLO-World', tag: 'Tencent', note: 'Open-vocabulary detection. Prompt with text, detect anything.' },
    { name: 'SAM 3', tag: 'Meta', note: 'Open-vocabulary segmentation. Experimental on 8 GB VRAM.' },
    { name: 'DINOv3', tag: 'Meta', note: 'Self-supervised features for classification, retrieval, zero-shot.' },
    { name: 'Perception Encoder', tag: 'Meta', note: 'General-purpose visual encoder for downstream tasks.' },
  ];
  const cloud = [
    { name: 'Qwen3-VL', tag: 'Alibaba' },
    { name: 'Moondream 2', tag: 'M87' },
    { name: 'SmolVLM2', tag: 'HuggingFace' },
    { name: 'Florence 2', tag: 'Microsoft' },
    { name: 'Gemini 2.5', tag: 'Google' },
    { name: 'Claude', tag: 'Anthropic' },
    { name: 'ChatGPT Vision', tag: 'OpenAI' },
    { name: 'Cosmos', tag: 'NVIDIA' },
  ];
  const blocks = [
    'Object Detection', 'Segmentation', 'Keypoint Detection', 'Classification',
    'Depth Estimation', 'QR Code Detection', 'Byte Tracker', 'Line Counter',
    'Detections Filter', 'Auto-labeling', 'OCR', 'Custom Python'
  ];
  return (
    <section className="section container" id="models">
      <Reveal>
        <div style={{maxWidth:820, marginBottom:56}}>
          <div className="section-label mono">04 · Models</div>
          <h2>The best models. Running on the edge.</h2>
          <p style={{fontSize:18, color:'var(--ink-dim)', marginTop:24, maxWidth:720}}>
            AI1 ships with a curated library of state-of-the-art architectures, optimized for the onboard GPU and updated over-the-air the day new models ship. Plus <strong style={{color:'var(--ink)'}}>50,000+ pretrained models</strong> on Roboflow Universe, deployable in seconds.
          </p>
        </div>
      </Reveal>

      <Reveal>
        <div className="models-zone">
          <div className="zone-head mono">ON-DEVICE · runs natively on AI1</div>
          <div className="models-grid">
            {first.map((m) => (
              <div className="model-card" key={m.name}>
                <div className="model-head">
                  <span className="model-name">{m.name}</span>
                  <span className="model-tag mono">{m.tag}</span>
                </div>
                <div className="model-note">{m.note}</div>
              </div>
            ))}
            <div className="model-card model-card-feature">
              <div className="model-head">
                <span className="model-name">50,000+ Universe models</span>
                <span className="model-tag mono">Roboflow Universe</span>
              </div>
              <div className="model-note">Deploy any pretrained model from Roboflow Universe to AI1 in seconds. Community-shared models for thousands of common detection, classification, and segmentation tasks.</div>
            </div>
          </div>
        </div>
      </Reveal>

      <Reveal>
        <div className="models-zone" style={{marginTop:40}}>
          <div className="zone-head mono">HYBRID CLOUD · offloaded automatically when needed</div>
          <div className="cloud-grid">
            {cloud.map((m) => (
              <div className="cloud-card" key={m.name}>
                <span className="model-name">{m.name}</span>
                <span className="model-tag mono">{m.tag}</span>
              </div>
            ))}
          </div>
        </div>
      </Reveal>

      <Reveal>
        <div className="blocks-zone">
          <div className="zone-head mono">+ 150 WORKFLOW BLOCKS · compose any pipeline</div>
          <div className="blocks-list">
            {blocks.map((b) => (
              <span className="block-chip" key={b}>{b}</span>
            ))}
            <span className="block-chip more mono">+140 more</span>
          </div>
        </div>
      </Reveal>

      <Reveal>
        <div className="nas-highlight">
          <div className="nas-copy">
            <div className="nas-kicker mono">NEURAL ARCHITECTURE SEARCH</div>
            <h3>Don't pick a model. Search for one.</h3>
            <p>
              Fine-tuning an off-the-shelf architecture gives you a few points on a curve. Neural Architecture Search generates <strong>thousands of candidate architectures</strong> and evaluates them against your data and your hardware, then hands you the top performer.
            </p>
            <div className="nas-stats">
              <div><div className="v mono">10–100</div><div className="l mono">Models trained per search</div></div>
              <div><div className="v mono">T4 · L4 · L40S · Jetson · CPU</div><div className="l mono">Hardware-targeted optimization</div></div>
              <div><div className="v mono">mAP ↑ · Latency ↓</div><div className="l mono">Pareto-optimal candidates</div></div>
            </div>
          </div>
          <div className="nas-shot">
            <div className="shot-frame">
              <div className="shot-chrome">
                <span className="dot" /><span className="dot" /><span className="dot" />
                <span className="shot-url mono">roboflow · nas · architecture search</span>
              </div>
              <img src="assets/platform-nas.png" alt="Neural Architecture Search" />
            </div>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { n: '01', t: 'Capture', d: 'Live video or event-driven frames stream from the AI1 sensor into the on-device pipeline.' },
    { n: '02', t: 'Label + Train', d: 'Upload to Roboflow for labeling, correction, and fine-tuning. Or start with a foundation model.' },
    { n: '03', t: 'Workflow', d: 'Assemble models, logic, and integrations visually. Test locally. No custom software required.' },
    { n: '04', t: 'Deploy', d: 'Push workflows to one device or the whole fleet in a single action. OTA. Zero downtime.' },
    { n: '05', t: 'Improve', d: 'Edge cases surface automatically. Retrain in the cloud. Redeploy. The loop closes by itself.' },
  ];
  return (
    <section className="section container" id="how">
      <Reveal>
        <div style={{maxWidth:820, marginBottom:56}}>
          <div className="section-label mono">05 · Lifecycle</div>
          <h2>Capture. Train. Deploy. Improve. <span style={{color:'var(--accent)'}}>Repeat.</span></h2>
          <p style={{fontSize:18, color:'var(--ink-dim)', marginTop:24, maxWidth:680}}>
            The AI1 closes the loop between the line and the model. Data from production feeds back into training automatically. Your vision system gets smarter the longer it runs.
          </p>
        </div>
      </Reveal>

      <Reveal>
        <div className="how-grid">
          {steps.map((s, i) => (
            <div className="how-step" key={s.n}>
              <div className="step-num mono">{s.n} / 05</div>
              <h3>{s.t}</h3>
              <div className="desc">{s.d}</div>
              <div className="icon mono">{['◉','◎','⊞','⇈','↻'][i]}</div>
            </div>
          ))}
        </div>
      </Reveal>
    </section>
  );
}

function Upstream() {
  return (
    <section className="section container" id="upstream">
      <Reveal>
        <div style={{maxWidth:820, marginBottom:56}}>
          <div className="section-label mono">06 · The Opportunity</div>
          <h2>Move inspection <span style={{color:'var(--accent)'}}>earlier</span> on the line.</h2>
          <p style={{fontSize:18, color:'var(--ink-dim)', marginTop:24, maxWidth:720}}>
            A defect caught at the press is cheap. A defect caught at QA is expensive. A defect caught by the customer is a warranty claim. AI1 is compact and rugged enough to live <em>at the station</em>. Not three rooms away in a vision cell.
          </p>
        </div>
      </Reveal>

      <Reveal>
        <div className="upstream">
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:8}}>
            <span className="mono" style={{fontSize:11, color:'var(--ink-faint)', letterSpacing:'0.14em', textTransform:'uppercase'}}>PRODUCTION LINE · STATIONS 01–05</span>
            <span className="mono" style={{fontSize:11, color:'var(--accent)', letterSpacing:'0.14em', textTransform:'uppercase'}}>DEFECT COST × 10 EACH STATION</span>
          </div>
          <div className="line-viz">
            <div className="line-step caught">
              <span className="dot"></span>
              <div className="label">Press</div>
              <div className="sub mono">Station 01</div>
              <div className="lbl-tag">AI1 caught</div>
            </div>
            <div className="line-step caught">
              <span className="dot"></span>
              <div className="label">Weld</div>
              <div className="sub mono">Station 02</div>
              <div className="lbl-tag">AI1 caught</div>
            </div>
            <div className="line-step caught">
              <span className="dot"></span>
              <div className="label">Assembly</div>
              <div className="sub mono">Station 03</div>
              <div className="lbl-tag">AI1 caught</div>
            </div>
            <div className="line-step missed">
              <span className="dot"></span>
              <div className="label">End-of-Line QA</div>
              <div className="sub mono">Station 04</div>
              <div className="lbl-tag">Legacy only</div>
            </div>
            <div className="line-step missed">
              <span className="dot"></span>
              <div className="label">Customer</div>
              <div className="sub mono">Station 05</div>
              <div className="lbl-tag">Warranty</div>
            </div>
          </div>
          <div className="upstream-legend">
            <span><span className="sw c"></span>CAUGHT · RE-WORK IN SECONDS</span>
            <span><span className="sw m"></span>MISSED · RE-WORK IN WEEKS</span>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

function UseCases() {
  const cases = [
    {
      n: 'A',
      title: 'Variable defect detection',
      d: 'Issues that are inconsistent, subjective, or hard to describe with rules. Scratches, warping, color drift. The things Keyence almost catches.',
      tags: ['Manufacturing', 'QA', 'Surface inspection']
    },
    {
      n: 'B',
      title: 'Complex assembly validation',
      d: 'Multi-part, multi-orientation. Verify each fastener, each cable routed the way the CAD said it would be.',
      tags: ['Assembly', 'Robotics', 'Automotive']
    },
    {
      n: 'C',
      title: 'Multi-SKU environments',
      d: 'Changeover without rebuilding logic. Swap workflows instead of rewriting PLC code. Same hardware, every SKU, every line.',
      tags: ['CPG', 'Packaging', 'Frozen goods']
    },
    {
      n: 'D',
      title: 'Context-aware pass/fail',
      d: 'Combine multiple signals (presence, orientation, color, count) into one decision. Push the result to a PLC, MES, or HMI.',
      tags: ['PLC', 'MES', 'HMI']
    },
    {
      n: 'E',
      title: 'Safety + compliance',
      d: 'Hard hats, hair nets, lockout-tagout, forklift zones. Real-time alerts, structured events for audit trails.',
      tags: ['EHS', 'Safety', 'Compliance']
    },
    {
      n: 'F',
      title: 'Logistics + inventory',
      d: 'Intermodal yards, warehouse docks, receiving. Asset tracking without barcodes. Counts and classifications on every pallet.',
      tags: ['Logistics', 'Freight', 'Warehouse']
    },
  ];
  return (
    <section className="section container" id="usecases">
      <Reveal>
        <div style={{maxWidth:820, marginBottom:56}}>
          <div className="section-label mono">07 · Use Cases</div>
          <h2>Built for problems where rules-based vision gives up.</h2>
          <p style={{fontSize:18, color:'var(--ink-dim)', marginTop:24, maxWidth:680}}>
            The 8 MP sensor, 12 mm lens, and integrated LED ring deliver the image density modern models need to catch subtle differences across lighting, orientation, and SKU variety.
          </p>
        </div>
      </Reveal>

      <Reveal>
        <div className="uc-grid">
          {cases.map((c) => (
            <div className="uc-card" key={c.n}>
              <div className="uc-num mono">USE CASE · {c.n}</div>
              <h3>{c.title}</h3>
              <div className="uc-desc">{c.d}</div>
              <div className="uc-tags">
                {c.tags.map(t => <span key={t} className="mono">{t}</span>)}
              </div>
            </div>
          ))}
        </div>
      </Reveal>
    </section>
  );
}

function CaseStudies() {
  return (
    <section className="section container" id="cases">
      <Reveal>
        <div style={{maxWidth:820, marginBottom:56}}>
          <div className="section-label mono">08 · Proof</div>
          <h2>What production vision at scale looks like.</h2>
        </div>
      </Reveal>
      <Reveal>
        <div className="cs-grid">
          <div className="cs-card">
            <div className="cs-logo"><img src="assets/logos/bnsf.png" alt="BNSF Railway" /></div>
            <div className="cs-co">Logistics &amp; Transportation</div>
            <div className="cs-stat"><span className="mult">4.8M</span></div>
            <div className="cs-stat-lbl mono">CARLOADS / YR · REAL-TIME INTERMODAL YARD INVENTORY</div>
            <div className="cs-quote">"Roboflow is helping us immediately realize value from state-of-the-art computer vision technology."</div>
            <div className="cs-author"><b>Asim Ghanchi</b><br/>AVP OF TECHNOLOGY, BNSF RAILWAY</div>
          </div>

          <div className="cs-card">
            <div className="cs-logo"><img src="assets/logos/usg.svg" alt="USG" /></div>
            <div className="cs-co">Manufacturing</div>
            <div className="cs-stat"><span className="mult">50+</span></div>
            <div className="cs-stat-lbl mono">MANUFACTURING SITES · EDGE-OPTIMIZED VISION AI</div>
            <div className="cs-quote">"The vision AI solutions we developed with Roboflow have been a core component of connecting our teams and unlocking their ability to collaborate."</div>
            <div className="cs-author"><b>Lou Stocco</b><br/>DIRECTOR OF MANUFACTURING ADVANCED ANALYTICS, USG</div>
          </div>

          <div className="cs-card">
            <div className="cs-logo"><img src="assets/logos/fletcher-sports.png" alt="Fletcher Sports" /></div>
            <div className="cs-co">Media &amp; Broadcast</div>
            <div className="cs-stat"><span className="pct">1st</span></div>
            <div className="cs-stat-lbl mono">ALL-COURT AI BROADCAST · US OPEN &amp; WIMBLEDON</div>
            <div className="cs-quote">"With Roboflow's expertise, we were able to navigate the complexities of building and deploying finely-tuned models. This helps Fletcher improve the viewing experience for millions worldwide."</div>
            <div className="cs-author"><b>Dwayne Pallanti</b><br/>DIRECTOR OF ENGINEERING, FLETCHER SPORTS</div>
          </div>

          <div className="cs-card">
            <div className="cs-logo"><img src="assets/logos/pella.svg" alt="Pella" /></div>
            <div className="cs-co">Windows &amp; Doors</div>
            <div className="cs-stat"><span className="mult">18</span></div>
            <div className="cs-stat-lbl mono">FACILITIES · ENTERPRISE-WIDE VISION AI ROLLOUT</div>
            <div className="cs-quote">"Roboflow has been instrumental in accelerating our learning and deployment of innovative AI solutions."</div>
            <div className="cs-author"><b>Travis Turnbull</b><br/>VP &amp; CIO, PELLA CORPORATION</div>
          </div>

          <div className="cs-card">
            <div className="cs-logo"><img src="assets/logos/flovision.png" alt="FloVision" /></div>
            <div className="cs-co">Food Processing</div>
            <div className="cs-stat"><span className="mult">20M</span></div>
            <div className="cs-stat-lbl mono">LBS OF FOOD ANALYZED · YIELD &amp; WASTE OPTIMIZATION</div>
            <div className="cs-quote">Vision AI quantifies every cut, minimizing waste, improving yield, and producing a structured record of every pound that moves through the line.</div>
            <div className="cs-author"><b>FloVision Solutions</b><br/>CUSTOMER STORY · ROBOFLOW</div>
          </div>

          <div className="cs-card">
            <div className="cs-co"><b>Enterprise</b> · Aggregate</div>
            <div className="cs-stat"><span className="mult">16,000+</span></div>
            <div className="cs-stat-lbl mono">ORGANIZATIONS BUILD WITH ROBOFLOW · OVER HALF OF FORTUNE 100</div>
            <div className="cs-quote">From Rivian and Cummins to USG and GE Vernova, industry leaders deploy Roboflow vision AI across manufacturing, logistics, healthcare, and beyond.</div>
            <div className="cs-author"><b>Roboflow</b><br/>1M+ DEVELOPERS · 36 MODEL ARCHITECTURES</div>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

function Specs() {
  const sensor = [
    ['Sensor', '8 MP CMOS', '(Sony IMX334 class)'],
    ['Resolution', '3840 × 2160', '4K @ 30 fps'],
    ['Optical format', '~1/1.8"', '2.0 µm pixels'],
    ['Lens', '12 mm S-mount', 'electronic focus'],
    ['Field of view', '~665 × 374 mm @ 1 m', '31° × 18°'],
    ['Lighting', 'Integrated 8-LED ring', ''],
  ];
  const compute = [
    ['Module', 'NVIDIA Jetson Orin NX', '8 GB'],
    ['CPU', '6-core ARM Cortex-A78AE', ''],
    ['GPU', '1024 CUDA cores', 'Ampere'],
    ['Tensor cores', '32', ''],
    ['Memory', '8 GB LPDDR5', ''],
    ['Storage', '256 GB NVMe', 'on-device'],
  ];
  const system = [
    ['OS', 'Roboflow OS', 'Yocto-based'],
    ['Software support', '5 years', 'OTA updates + security'],
    ['Ingress protection', 'IP54', ''],
    ['Power', '24V DC nominal', '19–24V range'],
    ['Networking', 'Gigabit Ethernet', 'M12 connector'],
    ['Connector', 'Industrial multi-pin', 'Amphenol-style I/O harness'],
  ];

  return (
    <section className="section container" id="specs">
      <Reveal>
        <div style={{maxWidth:820, marginBottom:56}}>
          <div className="section-label mono">09 · Specifications</div>
          <h2>Industrial-grade, from the sensor to the boot sector.</h2>
        </div>
      </Reveal>

      <Reveal>
        <div className="specs-wrap">
          <div className="specs-img">
            <img src="assets/ai1-photo.webp" alt="AI1 industrial vision camera" />
          </div>

          <div>
            <div className="specs-group-lbl mono">Optics + Sensor</div>
            <div className="specs-table">
              {sensor.map(([k,v,s]) => (
                <div className="spec-row" key={k}><span className="k mono">{k}</span><span className="v">{v}{s && <small>{s}</small>}</span></div>
              ))}
            </div>
            <div className="specs-group-lbl mono">Compute</div>
            <div className="specs-table">
              {compute.map(([k,v,s]) => (
                <div className="spec-row" key={k}><span className="k mono">{k}</span><span className="v">{v}{s && <small>{s}</small>}</span></div>
              ))}
            </div>
            <div className="specs-group-lbl mono">System</div>
            <div className="specs-table">
              {system.map(([k,v,s]) => (
                <div className="spec-row" key={k}><span className="k mono">{k}</span><span className="v">{v}{s && <small>{s}</small>}</span></div>
              ))}
            </div>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

function CTA() {
  return (
    <section className="cta-band container" id="cta">
      <Reveal>
        <div className="cta-inner">
          <div className="cta-copy">
            <div className="section-label mono">The AI1</div>
            <h2>Stop sourcing hardware.<br/>Start shipping vision.</h2>
            <div className="cta-actions">
              <button type="button" className="btn btn-primary" onClick={() => window.__openLeadModal('download')}>Download spec sheet <span className="arrow">↓</span></button>
              <button type="button" className="btn" onClick={() => window.__openLeadModal('sales')}>Talk to sales</button>
              <button type="button" className="btn" onClick={() => window.__openLeadModal('preview')}>Get early access</button>
            </div>
          </div>
          <div className="cta-wire">
            <div className="cta-wire-lbl mono">DWG-001 · REV 24 · 1:1</div>
            <img src="assets/ai1-wireframe-dark.webp" alt="AI1 technical line drawing" />
            <div className="cta-wire-foot mono">
              <span>SKU · AI1-8MP-12MM</span>
              <span>IP54 · 24V DC</span>
            </div>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

function Footer() {
  return (
    <footer className="container">
      <div className="footer">
        <div>ROBOFLOW · AI1 · REV 26.04</div>
        <div>NYC · SF · REMOTE</div>
        <div>© 2026 ROBOFLOW, INC.</div>
      </div>
    </footer>
  );
}

Object.assign(window, { Hero, TrustRow, Problem, Platform, SupportedModels, HowItWorks, Upstream, UseCases, CaseStudies, Specs, CTA, Footer });