/* Landing page — hero with live CV demo + everything below */

function HeroCamera() {
  const scenes = window.PRODUCT_SCENES || [];
  const [idx, setIdx] = React.useState(0);
  const [phase, setPhase] = React.useState('scanning'); // scanning → detected → showing
  const [fps, setFps] = React.useState(14.2);
  const [count, setCount] = React.useState(2847);
  const [showHeatmap, setShowHeatmap] = React.useState(false);

  // 4-second cycle per product: scanning(2s) → detected(2s)
  React.useEffect(() => {
    if (!scenes.length) return;
    let active = true;
    const cycle = () => {
      if (!active) return;
      setPhase('scanning');
      setShowHeatmap(false);
      setTimeout(() => {
        if (!active) return;
        setPhase('detected');
        setShowHeatmap(true);
        setCount(c => c + Math.floor(Math.random() * 4) + 1);
      }, 1800);
      setTimeout(() => {
        if (!active) return;
        setIdx(i => (i + 1) % scenes.length);
      }, 4000);
    };
    cycle();
    const t = setInterval(cycle, 4000);
    const f = setInterval(() => setFps(14 + Math.random() * 0.8), 600);
    return () => { active = false; clearInterval(t); clearInterval(f); };
  }, [scenes.length]);

  if (!scenes.length) return null;
  const s = scenes[idx];
  const verdictColors = {
    PASS:   { bg: 'var(--color-pass-bg)',    fg: 'var(--color-pass)',    icon: 'check_circle' },
    WARN:   { bg: 'var(--color-warning-bg)', fg: 'var(--color-warning)', icon: 'warning' },
    DEFECT: { bg: 'var(--color-defect-bg)',  fg: 'var(--color-defect)',  icon: 'error' },
  };
  const vc = verdictColors[s.verdict];
  const boxColor = s.verdict === 'WARN' ? 'var(--color-warning)' :
                   s.verdict === 'PASS' ? 'var(--color-pass)' : 'var(--color-defect)';
  const heatmapColor = s.verdict === 'WARN' ? 'rgba(249,171,0,'
                     : s.verdict === 'PASS' ? 'rgba(52,168,83,'
                     : 'rgba(234,67,53,';

  return (
    <div style={{ position: 'relative' }}>
      <div className="cam-card">
        <div className="cam-header">
          <div className="l">
            <Icon name="videocam" size={16} />
            <span>Camera 1 · USB 3.0</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11,
                color: 'var(--color-on-surface-tertiary)', marginLeft: 4 }}>
              {fps.toFixed(1)} FPS
            </span>
          </div>
          <div className="r">
            <span>{s.detector}</span>
            <span>·</span>
            <span>{s.sku}</span>
          </div>
        </div>

        <div className="cam-stage">
          <div key={'scene-' + idx} style={{
            position: 'absolute', inset: 0, animation: 'viai-scene-in 0.45s ease',
          }}>
            {s.render()}
          </div>

          <div className="grid-overlay"></div>
          <div className="scan-line"></div>

          {/* Heatmap glow over the defect — only after detection */}
          {phase === 'detected' && s.heatmap && (
            <div key={'hm-' + idx} style={{
              position: 'absolute',
              left: `${s.heatmap.x}%`, top: `${s.heatmap.y}%`,
              width: 0, height: 0,
              transform: 'translate(-50%, -50%)',
              animation: 'viai-heatmap-pulse 2s ease-in-out infinite',
              pointerEvents: 'none',
              zIndex: 3,
            }}>
              <div style={{
                position: 'absolute', left: 0, top: 0,
                width: 200, height: 200,
                transform: 'translate(-50%, -50%)',
                background: `radial-gradient(circle, ${heatmapColor}0.55) 0%, ${heatmapColor}0.30) 30%, ${heatmapColor}0.10) 55%, transparent 75%)`,
                filter: 'blur(2px)',
                mixBlendMode: 'screen',
              }} />
            </div>
          )}

          {/* Bounding box on the defect — only after detection */}
          {phase === 'detected' && (
            <div className="bbox" key={'bb-' + idx}
                 style={{
                   left: `${s.bbox.x}%`, top: `${s.bbox.y}%`,
                   width: `${s.bbox.w}%`, height: `${s.bbox.h}%`,
                   borderColor: boxColor,
                 }}>
              <span className="bbox-label" style={{ background: boxColor }}>
                {s.defectTag}
              </span>
            </div>
          )}

          {/* Session pill — shows current product */}
          <div className="session-pill" key={'sp-' + idx}>
            <span className="dot-live"></span>
            <span>{s.name}</span>
            <span style={{ color: '#aaa', fontFamily: 'var(--font-mono)' }}>
              {s.industry}
            </span>
          </div>

          {/* Verdict pill */}
          {phase === 'detected' && (
            <div className="verdict-pill" key={'vp-' + idx} style={{
              background: vc.bg, color: vc.fg, borderColor: vc.fg,
            }}>
              <Icon name={vc.icon} size={14} style={{ color: vc.fg }} />
              {s.verdict}
            </div>
          )}
          {phase === 'scanning' && (
            <div className="verdict-pill" style={{
              background: 'rgba(0,0,0,0.55)', color: '#fff',
              borderColor: 'rgba(255,255,255,0.2)',
              backdropFilter: 'blur(8px)',
            }}>
              <span className="dot-live" style={{
                width: 6, height: 6, borderRadius: '50%',
                background: '#4285f4', boxShadow: '0 0 6px #4285f4',
              }}></span>
              SCANNING
            </div>
          )}
        </div>

        <div className="cam-footer">
          <div className="l">
            <span style={{ fontSize: 10, fontWeight: 700,
                letterSpacing: 0.6, textTransform: 'uppercase',
                color: 'var(--color-on-surface-tertiary)' }}>
              Defect Score
            </span>
            <span className="cam-score" style={{
              color: phase === 'detected' ? vc.fg : 'var(--color-on-surface-tertiary)',
              transition: 'color 0.3s',
            }}>
              {phase === 'detected' ? s.defectScore.toFixed(3) : '—.———'}
            </span>
            <span style={{ fontSize: 10, color: 'var(--color-on-surface-tertiary)',
                fontFamily: 'var(--font-mono)' }}>
              threshold 0.500
            </span>
          </div>
          <div style={{ display: 'flex', gap: 14, fontSize: 11,
              color: 'var(--color-on-surface-secondary)',
              fontFamily: 'var(--font-mono)' }}>
            <span>INSPECTED <b style={{ color: 'var(--color-on-surface)' }}>{count.toLocaleString()}</b></span>
          </div>
        </div>
      </div>



      {/* Product chips strip — shows all 10 products as small dots */}
      <div style={{
        marginTop: 28,
        display: 'flex', alignItems: 'center', gap: 6,
        flexWrap: 'wrap', justifyContent: 'center',
      }}>
        <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: 0.8,
          textTransform: 'uppercase', color: 'var(--color-on-surface-tertiary)',
          marginRight: 8 }}>
          Now showing
        </span>
        {scenes.map((sc, i) => (
          <button key={sc.id} onClick={() => setIdx(i)}
            style={{
              border: 'none', cursor: 'pointer',
              padding: '4px 10px', borderRadius: 9999,
              fontSize: 10, fontFamily: 'var(--font-mono)', fontWeight: 600,
              letterSpacing: 0.3,
              background: i === idx ? 'var(--color-primary)' : 'var(--color-surface)',
              color: i === idx ? '#fff' : 'var(--color-on-surface-secondary)',
              border: '1px solid ' + (i === idx ? 'var(--color-primary)' : 'var(--color-border-light)'),
              transition: 'all 0.15s',
            }}>
            {sc.industry}
          </button>
        ))}
      </div>

      <style>{`
        @keyframes viai-scene-in {
          from { opacity: 0; transform: scale(1.04); }
          to   { opacity: 1; transform: scale(1); }
        }
        @keyframes viai-heatmap-pulse {
          0%, 100% { opacity: 0.85; }
          50%      { opacity: 0.5; }
        }
      `}</style>
    </div>
  );
}

function Hero({ setRoute }) {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="hero-eyebrow">
              <span className="dot-live" style={{
                width: 6, height: 6, borderRadius: '50%',
                background: 'var(--color-primary)',
                boxShadow: '0 0 6px var(--color-primary)',
                animation: 'viai-pulse 2s ease-in-out infinite'
              }}></span>
              VISUAL INSPECTION AI · LIVE ON 142 LINES
            </div>
            <h1 className="hero-title">
              Catch every <span className="scan-target">defect</span>.
              Ship every <span className="scan-target t2">good unit</span>.
              In <span className="scan-target t3">under a week</span>.
            </h1>
            <p className="hero-sub">
              VIAI is a quality-control system that runs entirely on a small device next to
              your camera. No cloud bills. No retraining sprints. Lower cost than a single
              QA shift — and we customize the model for your line at zero charge.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn-primary btn-lg" onClick={() => setRoute('demo')}>
                <Icon name="play_circle" size={18} />
                Watch It Inspect Live
              </button>
              <button className="btn btn-outline btn-lg">
                <Icon name="event" size={18} />
                Book a Demo
              </button>
            </div>
            <div className="hero-meta">
              <div className="hero-meta-item">
                <div className="v">99.4<span style={{ fontSize: 18, color: 'var(--color-on-surface-tertiary)' }}>%</span></div>
                <div className="l">Defect Catch Rate</div>
              </div>
              <div className="hero-meta-item">
                <div className="v">42<span style={{ fontSize: 18, color: 'var(--color-on-surface-tertiary)' }}>ms</span></div>
                <div className="l">Detection Latency</div>
              </div>
              <div className="hero-meta-item">
                <div className="v">&lt;5<span style={{ fontSize: 18, color: 'var(--color-on-surface-tertiary)' }}>days</span></div>
                <div className="l">Line Onboarding</div>
              </div>
              <div className="hero-meta-item">
                <div className="v">$0</div>
                <div className="l">Customization Fee</div>
              </div>
            </div>
          </div>

          <HeroCamera />
        </div>
      </div>
    </section>
  );
}

function TrustStrip() {
  const logos = ['NORDICA Auto', 'KILN Foods', 'PCB Labs', 'SteelArc', 'Polymer Co.', 'Pharmica'];
  return (
    <div className="trust-strip">
      <div className="container">
        <div className="trust-grid">
          <div className="label">
            Trusted on factory floors<br />across 4 continents
          </div>
          <div className="trust-logos">
            {logos.map(l => (
              <div key={l} className="logo">{l}</div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function StatsBlock() {
  const stats = [
    { v: '99.4', unit: '%', l: 'Defect Catch Rate', d: 'Across 1.2M inspected units in production' },
    { v: '42', unit: 'ms', l: 'Edge Latency', d: 'Camera capture → verdict, no network hop' },
    { v: '<5', unit: 'days', l: 'Time to Live', d: 'From kit unboxing to first inspection on your line' },
    { v: '0', unit: 'cloud', l: 'Operates Offline', d: 'Inferences happen on-device. Cloud is optional.' },
  ];
  return (
    <section className="section tight">
      <div className="container">
        <Eyebrow>Operational truth</Eyebrow>
        <h2 className="section-title">Numbers from real production lines.</h2>
        <p className="section-sub">
          Not a benchmark suite. These are aggregate metrics from VIAI deployments running today.
        </p>
        <div className="stats-grid">
          {stats.map(s => (
            <div className="stat" key={s.l}>
              <div className="v">{s.v}<span className="unit">{s.unit}</span></div>
              <div className="l">{s.l}</div>
              <div className="d">{s.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    {
      step: 'STEP 01',
      icon: 'inventory_2',
      title: 'Plug in the device',
      body: 'A Jetson Orin Nano arrives pre-configured. Mount the camera, plug in power and the network. Boots in 90 seconds. No DevOps required.',
    },
    {
      step: 'STEP 02',
      icon: 'auto_awesome',
      title: 'We tune your detector',
      body: 'Send us 50–200 sample images. Our team trains and validates a custom detector for your part. Free of charge — every time.',
    },
    {
      step: 'STEP 03',
      icon: 'precision_manufacturing',
      title: 'Run on your line',
      body: 'Operators press Start. PASS / WARN / DEFECT verdicts appear in real time. Cloud sync is optional — local-first by design.',
    },
  ];
  return (
    <section className="section">
      <div className="container">
        <Eyebrow>How it works</Eyebrow>
        <h2 className="section-title">Edge inference, cloud oversight. No tradeoffs.</h2>
        <p className="section-sub">
          The model runs next to the camera so latency is sub-50ms and there's no recurring data bill.
          When the network is up, results sync to your fleet dashboard. When it's down, nothing stops.
        </p>

        <div className="how-grid">
          {steps.map(s => (
            <div className="how-card" key={s.step}>
              <div className="how-icon"><Icon name={s.icon} size={22} /></div>
              <div className="how-step">{s.step}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </div>
          ))}
        </div>

        {/* Pipeline diagram */}
        <div className="pipeline">
          <div style={{ display: 'flex', alignItems: 'center',
              justifyContent: 'space-between', marginBottom: 24 }}>
            <div>
              <div style={{ fontSize: 12, fontWeight: 700,
                letterSpacing: 0.8, textTransform: 'uppercase',
                color: 'var(--color-on-surface-tertiary)' }}>
                Data Pipeline
              </div>
              <div style={{ fontSize: 18, fontWeight: 600, marginTop: 4 }}>
                Capture → Infer → Decide → Sync
              </div>
            </div>
            <span className="live-mini">
              <span className="dot"></span>
              42 ms END-TO-END
            </span>
          </div>
          <div className="pipeline-row">
            <div className="pipe-node">
              <div className="h">
                <Icon name="videocam" size={16} style={{ color: 'var(--color-primary)' }} />
                Camera
              </div>
              <div className="body">USB3 / GigE industrial camera mounted on the line.</div>
              <div className="stat-row">
                <span>FPS</span><b>14.3</b>
                <span>EXP</span><b>4.2ms</b>
              </div>
            </div>
            <div className="arrow"><Icon name="arrow_forward" size={20} /></div>
            <div className="pipe-node">
              <div className="h">
                <Icon name="memory" size={16} style={{ color: 'var(--color-primary)' }} />
                Edge Inference
              </div>
              <div className="body">Custom ONNX model on Jetson Orin Nano. Inferences happen here.</div>
              <div className="stat-row">
                <span>LAT</span><b>42 ms</b>
                <span>RAM</span><b>2.1 GB</b>
              </div>
            </div>
            <div className="arrow"><Icon name="arrow_forward" size={20} /></div>
            <div className="pipe-node">
              <div className="h">
                <Icon name="rule" size={16} style={{ color: 'var(--color-primary)' }} />
                Verdict + Action
              </div>
              <div className="body">PLC trigger, reject arm, alert log — all driven from edge.</div>
              <div className="stat-row">
                <span>OUT</span><b>24V GPIO</b>
                <span>API</span><b>REST/MQTT</b>
              </div>
            </div>
          </div>
          <div style={{ height: 16 }}></div>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '12px 16px',
            background: 'var(--color-info-bg)', color: 'var(--color-info)',
            borderRadius: 8, fontSize: 13,
          }}>
            <Icon name="cloud_sync" size={18} />
            <span style={{ flex: 1 }}>
              <b>Optional:</b> Cloud Dashboard syncs results across all your sites for fleet analytics.
              The line keeps running even when the network is down.
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Industries({ setRoute }) {
  const industries = [
    {
      icon: 'memory', title: 'Electronics / PCB',
      body: 'Solder joints, missing components, burn marks, lifted pads.',
      tags: ['solder-bridge', 'tombstoning', 'cold-joint', 'missing-cap'],
    },
    {
      icon: 'directions_car', title: 'Automotive Parts',
      body: 'Castings, weld seams, surface finish, fastener presence.',
      tags: ['weld-undercut', 'porosity', 'surface-scratch', 'missing-bolt'],
    },
    {
      icon: 'lunch_dining', title: 'Food & Beverage',
      body: 'Foreign objects, fill level, seal integrity, label placement.',
      tags: ['fill-low', 'cap-tilt', 'label-skew', 'foreign-object'],
    },
    {
      icon: 'medication', title: 'Pharma / Packaging',
      body: 'Blister voids, print defects, batch code legibility, tamper seal.',
      tags: ['void', 'print-smear', 'code-illegible', 'seal-broken'],
    },
    {
      icon: 'checkroom', title: 'Textiles',
      body: 'Weave defects, stains, color mismatch, edge fraying.',
      tags: ['snag', 'stain', 'color-delta', 'fray'],
    },
    {
      icon: 'construction', title: 'Metal Fabrication',
      body: 'Castings, machined finishes, heat-treat color, dimensional.',
      tags: ['burr', 'pit', 'inclusion', 'oversize'],
    },
    {
      icon: 'recycling', title: 'Plastics / Injection',
      body: 'Short shots, flash, sink marks, color streaks.',
      tags: ['short-shot', 'flash', 'sink', 'streak'],
    },
    {
      icon: 'add', title: 'Your Industry',
      body: 'Send us 50 sample images — we’ll show you a working detector in 4 days.',
      tags: ['custom'],
      cta: true,
    },
  ];
  return (
    <section className="section">
      <div className="container">
        <Eyebrow>Industries</Eyebrow>
        <h2 className="section-title">If a camera can see it, VIAI can grade it.</h2>
        <p className="section-sub">
          We've shipped detectors for 40+ part categories. The model is custom every time,
          and that customization is included.
        </p>
        <div className="ind-grid">
          {industries.map(i => (
            <div className="ind-card" key={i.title}
                 style={i.cta ? {
                   background: 'var(--color-primary-light)',
                   borderColor: 'var(--color-primary)',
                 } : {}}
                 onClick={() => i.cta && setRoute('demo')}>
              <div>
                <div className="ind-icon" style={i.cta ? {
                  background: 'var(--color-primary)', color: '#fff'
                } : {}}>
                  <Icon name={i.icon} size={20} />
                </div>
                <h4>{i.title}</h4>
                <p>{i.body}</p>
              </div>
              <div className="defect-list">
                {i.tags.map(t => (
                  <span className="defect-tag" key={t}>{t}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HardwareCallout() {
  return (
    <section className="section hw-section">
      <div className="container">
        <div className="hw-grid">
          <div className="hw-device">
            <div className="label">
              UNIT <span className="v">VIAI-EDGE-01</span>
              <span style={{ marginLeft: 12 }}>SOC <span className="v">JETSON ORIN NANO</span></span>
            </div>
            <div className="nano">
              <div className="chip">
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
                  <span style={{ fontSize: 9, color: '#5f6368', letterSpacing: 0.5 }}>NVIDIA</span>
                  <span>JETSON</span>
                  <span style={{ fontSize: 9, color: '#5f6368' }}>ORIN NANO</span>
                </div>
              </div>
              <div className="ports">
                <div className="port"></div>
                <div className="port"></div>
                <div className="port"></div>
                <div className="port"></div>
              </div>
            </div>
            <div className="label">
              POWER <span className="v">15W</span>
              <span style={{ marginLeft: 12 }}>STATUS <span className="v" style={{ color: '#81c995' }}>● OPERATIONAL</span></span>
            </div>
          </div>
          <div>
            <Eyebrow>Hardware</Eyebrow>
            <h2 className="section-title" style={{ fontSize: 38 }}>
              One small box.<br />The size of a hardback novel.
            </h2>
            <p className="section-sub">
              The VIAI Edge runs on the NVIDIA Jetson Orin Nano — a 15W mini-computer engineered
              for AI at the edge. Mount it on a DIN rail, in an enclosure, or on the wall.
              No server room. No GPU rack. No cloud round-trips.
            </p>
            <div className="hw-spec-list">
              <div className="hw-spec">
                <div className="k">AI Performance</div>
                <div className="v">40 TOPS</div>
              </div>
              <div className="hw-spec">
                <div className="k">Memory</div>
                <div className="v">8 GB LPDDR5</div>
              </div>
              <div className="hw-spec">
                <div className="k">Power Draw</div>
                <div className="v">7 – 15 W</div>
              </div>
              <div className="hw-spec">
                <div className="k">Operating Temp</div>
                <div className="v">−25 to +80°C</div>
              </div>
              <div className="hw-spec">
                <div className="k">Camera I/O</div>
                <div className="v">USB 3.2 / GigE</div>
              </div>
              <div className="hw-spec">
                <div className="k">PLC Output</div>
                <div className="v">24V GPIO / MQTT</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CostCompare() {
  const rows = [
    { l: 'Initial hardware', ours: '$4,200', them: '$28,000+' },
    { l: 'Software / license', ours: '$249/mo', them: '$1,800/mo' },
    { l: 'Custom model training', ours: 'Included', them: '$15K – $80K' },
    { l: 'Time to first inspection', ours: '< 5 days', them: '6 – 14 weeks' },
    { l: 'Cloud dependency', ours: 'Optional', them: 'Required' },
    { l: 'Support response', ours: '< 4 hours', them: 'Tier-1 queue' },
  ];
  return (
    <section className="section">
      <div className="container">
        <Eyebrow color="var(--color-pass)">Cost & commitment</Eyebrow>
        <h2 className="section-title">Light investment. Heavy results.</h2>
        <p className="section-sub">
          We built VIAI for the engineer who can't sign off on a six-month integration.
          Lower upfront cost, more flexibility, and we customize the model for free — every time
          your line changes.
        </p>
        <div className="compare-card">
          <div className="compare-row head">
            <div className="head-cell">Cost driver</div>
            <div className="head-cell ours-h">VIAI</div>
            <div className="head-cell">Typical Industrial CV Vendor</div>
          </div>
          {rows.map(r => (
            <div className="compare-row" key={r.l}>
              <div className="lbl">{r.l}</div>
              <div className="ours">
                <Icon name="check_circle" size={14} style={{
                  color: 'var(--color-pass)', marginRight: 6, verticalAlign: 'text-bottom'
                }} />
                {r.ours}
              </div>
              <div className="them">{r.them}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Promise() {
  const items = [
    {
      n: '01',
      h: 'Customization at zero cost',
      p: 'New SKU on your line? Send us images — we re-train the detector at no charge. Always. It\'s in the contract.',
    },
    {
      n: '02',
      h: 'Support that answers first',
      p: 'Direct access to the engineer who built your detector. < 4 hour response, 24/5. Your request goes ahead of everything else.',
    },
    {
      n: '03',
      h: 'Pilot with no commitment',
      p: '30-day pilot. Hardware on loan. If it doesn\'t hit your defect rate target, we collect the box and you owe nothing.',
    },
  ];
  return (
    <section className="section">
      <div className="container">
        <Eyebrow color="var(--color-pass)">Our commitment</Eyebrow>
        <h2 className="section-title">The reasons managers actually try us.</h2>
        <p className="section-sub">
          QA leads and CEOs have tried CV before and gotten burned by long timelines, locked-in
          contracts, and surprise re-training fees. We removed all three.
        </p>
        <div className="promise-grid">
          {items.map(i => (
            <div className="promise" key={i.n}>
              <div className="num">{i.n}</div>
              <h4>{i.h}</h4>
              <p>{i.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTA({ setRoute }) {
  return (
    <section className="section tight">
      <div className="container">
        <div className="cta-band">
          <div>
            <h2>See your defects caught — on your part — this week.</h2>
            <p>
              Send us 50 images. We'll send back a working detector recording in 4 days.
              No NDA, no commitment.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <button className="btn btn-primary btn-lg" onClick={() => setRoute('demo')}>
              <Icon name="event" size={18} />
              Book a Demo
            </button>
            <button className="btn btn-outline btn-lg" style={{
              borderColor: 'rgba(255,255,255,0.3)', color: '#fff',
            }}>
              <Icon name="upload_file" size={18} />
              Upload Sample Images
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

function Landing({ setRoute }) {
  return (
    <React.Fragment>
      <Hero setRoute={setRoute} />
      <TrustStrip />
      <StatsBlock />
      <HowItWorks />
      <Industries setRoute={setRoute} />
      <HardwareCallout />
      <CostCompare />
      <Promise />
      <CTA setRoute={setRoute} />
    </React.Fragment>
  );
}

Object.assign(window, { Landing, HeroCamera, CTA });