/* Hardware — the two ALEROQ dongles (Lite $59 / Track $119), premium product
   treatment with drop-in product shots, specs, and a grouped capability ledger. */

/* UnlockRow — one capability line in the "What you unlock" ledger: an icon tile,
   the feature title + a one-line benefit, and an inclusion check. green tone marks
   a Track-only unlock (lit + glowing); silver tone is shared across both devices. */
function UnlockRow({ icon, title, benefit, tone, divider }) {
  const { Ic } = window;
  const [hover, setHover] = React.useState(false);
  const green = tone === 'green';
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'center', gap: 15,
        padding: '14px 22px',
        borderTop: divider ? '1px solid var(--line-100)' : 'none',
        background: hover ? (green ? 'rgba(22,214,128,0.06)' : 'rgba(255,255,255,0.025)') : 'transparent',
        transition: 'background 0.25s var(--ease-out)',
      }}>
      <div style={{
        width: 40, height: 40, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
        borderRadius: 11,
        background: green ? 'var(--green-tint)' : 'rgba(255,255,255,0.04)',
        border: `1px solid ${green ? 'rgba(22,214,128,0.35)' : 'var(--line-200)'}`,
        boxShadow: hover && green ? 'var(--glow-green-sm)' : 'none',
        transform: hover ? 'translateY(-1px)' : 'none',
        transition: 'box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out)',
      }}>
        <Ic name={icon} size={19} color={green ? 'var(--positive-bright)' : 'var(--silver-200)'} />
      </div>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontSize: 14.5, fontWeight: 600, color: 'var(--text-strong)', letterSpacing: '-0.005em' }}>{title}</div>
        <div style={{ fontSize: 12.5, lineHeight: 1.45, color: 'var(--text-muted)', marginTop: 3, textWrap: 'pretty' }}>{benefit}</div>
      </div>
      <div style={{
        flexShrink: 0, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        width: 26, height: 26, borderRadius: '50%',
        background: green ? 'var(--positive)' : 'var(--green-tint)',
        border: green ? 'none' : '1px solid rgba(22,214,128,0.3)',
        boxShadow: green ? '0 0 16px rgba(22,214,128,0.45)' : 'none',
      }}>
        <Ic name="Check" size={14} stroke={2.6} color={green ? '#04130c' : 'var(--positive-bright)'} />
      </div>
    </div>
  );
}

function Hardware() {
  const { Badge, Button } = window.RevvoDesignSystem_a89086;
  const { Reveal, Ic, PhotoSlot } = window;

  const skus = [
    {
      key: 'lite', id: 'hw-lite', name: 'ALEROQ Lite', price: 59, tone: 'silver',
      tag: 'The essentials', tagline: 'Plug in, scan, and finally understand your car.',
      shot: 'Drop in the ALEROQ Lite product render', shotIcon: 'Cpu',
      specs: [
        ['Bluetooth', 'BLE 4.0'],
        ['Chipset', 'ELM327 v2.3'],
        ['Best for', 'Everyday diagnostics'],
      ],
      bundle: '3 months of ALEROQ Pro included',
    },
    {
      key: 'track', id: 'hw-track', name: 'ALEROQ Track', price: 119, tone: 'green', best: true,
      tag: 'Connected hardware', tagline: 'Adds live GPS, SOS dispatch, and anti-theft over 4G.',
      shot: 'Drop in the ALEROQ Track product render', shotIcon: 'Radio',
      specs: [
        ['Connectivity', 'BLE 4.0 · GPS · 4G LTE'],
        ['Chipset', 'ELM327 v2.3 · u-blox · Quectel'],
        ['Best for', 'Safety & always-on tracking'],
      ],
      bundle: '3 months Pro + Track Plan included',
    },
  ];

  const core = [
    { icon: 'Languages', title: 'Live diagnostics & AI explanations', benefit: 'Every fault code decoded into plain English the moment it appears.' },
    { icon: 'Gavel', title: 'Compare local mechanic offers', benefit: 'Vetted shops near you bid for the job, so you never overpay.' },
    { icon: 'Activity', title: 'Predictive maintenance alerts', benefit: 'Catch small problems weeks early, tuned to your exact car.' },
  ];
  const trackOnly = [
    { icon: 'MapPin', title: 'Independent GPS car tracking', benefit: 'The dongle reports its own position over 4G — with or without your phone.' },
    { icon: 'Siren', title: 'One-button emergency SOS', benefit: 'Hold once and dispatch gets your location and full diagnosis instantly.' },
    { icon: 'ShieldAlert', title: 'Stolen-car movement alerts', benefit: 'Get pinged the second your car moves without you behind the wheel.' },
  ];

  const toneCol = { green: 'var(--positive-bright)', silver: 'var(--silver-200)' };
  const toneBd = { green: 'rgba(22,214,128,0.5)', silver: 'var(--border)' };

  return (
    <section id="hardware" style={{ position: 'relative', padding: 'var(--space-section) clamp(20px, 5vw, 48px)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto' }}>
        <Reveal style={{ textAlign: 'center', marginBottom: 52 }}>
          <Badge variant="neutral" style={{ marginBottom: 20 }}>The device</Badge>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-display-2)',
            letterSpacing: 'var(--ls-snug)', color: 'var(--text-strong)', margin: '0 0 14px', lineHeight: 'var(--lh-snug)' }}>
            One plug. Two ways to drive smarter.
          </h2>
          <p style={{ fontSize: 'var(--fs-lead)', color: 'var(--text-body)', maxWidth: 560, margin: '0 auto' }}>
            The ALEROQ dongle slots into the OBD-II port under your dash and turns raw sensor data into something you can actually use.
          </p>
        </Reveal>

        <div className="hw-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18, marginBottom: 18 }}>
          {skus.map((s, i) => (
            <Reveal key={s.key} delay={i * 120} dir={i === 0 ? 'left' : 'right'} style={{ height: '100%' }}>
              <div style={{
                position: 'relative', height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column',
                background: 'var(--surface)', border: `1px solid ${toneBd[s.tone]}`, borderRadius: 'var(--radius-lg)',
                overflow: 'hidden',
                boxShadow: s.best ? 'var(--glow-green-sm)' : 'none',
              }}>
                {s.best && (
                  <span style={{ position: 'absolute', top: 16, right: 16, zIndex: 2, display: 'inline-flex', alignItems: 'center', gap: 6,
                    padding: '5px 11px', borderRadius: 'var(--radius-pill)', background: 'var(--positive)', color: '#04130c',
                    fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase' }}>
                    <Ic name="Star" size={11} color="#04130c" /> Most popular
                  </span>
                )}

                {/* product shot — visible designed placeholder, still drop-to-fill */}
                <div style={{ position: 'relative', aspectRatio: '16 / 10', overflow: 'hidden',
                  borderBottom: '1px solid var(--line-100)',
                  background: 'radial-gradient(120% 100% at 50% 0%, var(--black-600), #060607 78%)' }}>
                  <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
                    alignItems: 'center', justifyContent: 'center', gap: 13, pointerEvents: 'none' }}>
                    <div style={{ width: 60, height: 60, display: 'flex', alignItems: 'center', justifyContent: 'center',
                      borderRadius: 14, background: s.tone === 'green' ? 'var(--green-tint)' : 'rgba(255,255,255,0.04)',
                      border: `1px solid ${s.tone === 'green' ? 'rgba(22,214,128,0.35)' : 'var(--line-200)'}` }}>
                      <Ic name={s.shotIcon} size={28} color={toneCol[s.tone]} />
                    </div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, letterSpacing: '0.1em',
                      textTransform: 'uppercase', color: 'var(--text-muted)' }}>{s.name} &middot; product render</div>
                    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--text-faint)' }}>
                      <Ic name="Upload" size={13} color="var(--text-faint)" /> Drag an image to place yours
                    </div>
                  </div>
                  {React.createElement('image-slot', { id: s.id, placeholder: ' ',
                    src: s.key === 'lite' ? 'hw-lite.png' : 'hw-track.png',
                    style: { position: 'absolute', inset: 0, width: '100%', height: '100%' } })}
                </div>

                <div style={{ padding: 'clamp(24px, 3vw, 32px)', display: 'flex', flexDirection: 'column', flex: 1 }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: toneCol[s.tone], marginBottom: 10 }}>{s.tag}</div>
                  <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12, marginBottom: 8 }}>
                    <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(22px, 2.8vw, 27px)', color: 'var(--text-strong)', margin: 0, letterSpacing: '-0.01em' }}>{s.name}</h3>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 3 }}>
                      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 30, color: 'var(--text-strong)' }}>${s.price}</span>
                      <span style={{ fontSize: 13, color: 'var(--text-muted)' }}>one-time</span>
                    </div>
                  </div>
                  <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--text-body)', margin: '0 0 22px', textWrap: 'pretty' }}>{s.tagline}</p>

                  <div style={{ display: 'grid', gap: 1, background: 'var(--line-100)', border: '1px solid var(--line-100)', borderRadius: 'var(--radius-md)', overflow: 'hidden', marginBottom: 20 }}>
                    {s.specs.map(([k, v]) => (
                      <div key={k} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '11px 14px', background: 'var(--surface)' }}>
                        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{k}</span>
                        <span style={{ fontSize: 13.5, color: 'var(--text-body)', fontWeight: 500, textAlign: 'right' }}>{v}</span>
                      </div>
                    ))}
                  </div>

                  <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 22, fontSize: 13.5, color: toneCol[s.tone] }}>
                    <Ic name="Gift" size={15} color={toneCol[s.tone]} /> {s.bundle}
                  </div>

                  <div style={{ marginTop: 'auto' }}>
                    <Button variant={s.best ? 'positive' : 'secondary'} size="lg" onClick={() => window.aleroqScrollTo('waitlist')}>
                      Pre-order {s.name.replace('ALEROQ ', '')}
                    </Button>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>

        {/* what you unlock — grouped capability ledger */}
        <Reveal delay={100}>
          <div style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>

            {/* caption */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', padding: '17px 22px', borderBottom: '1px solid var(--line-100)' }}>
              <Ic name="KeyRound" size={15} color="var(--text-muted)" />
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>What you unlock</span>
              <span style={{ marginLeft: 'auto', fontSize: 12.5, color: 'var(--text-faint)' }}>Same brain in both &middot; Track adds the connection</span>
            </div>

            {/* core — shared across both devices */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 11, flexWrap: 'wrap', padding: '13px 22px', background: 'rgba(255,255,255,0.02)' }}>
              <Ic name="Cpu" size={15} color="var(--silver-200)" />
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--silver-200)', fontWeight: 600 }}>In every ALEROQ</span>
              <span style={{ marginLeft: 'auto', padding: '4px 11px', borderRadius: 'var(--radius-pill)', border: '1px solid var(--line-200)', background: 'rgba(255,255,255,0.04)', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--silver-200)' }}>Lite + Track</span>
            </div>
            {core.map((f, i) => <UnlockRow key={f.title} {...f} tone="silver" divider={i > 0} />)}

            {/* track-only — the unlock (hero band, green spine) */}
            <div style={{ position: 'relative', boxShadow: 'inset 3px 0 0 var(--positive)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 11, flexWrap: 'wrap', padding: '13px 22px', borderTop: '1px solid var(--line-100)', background: 'var(--green-tint)' }}>
                <Ic name="Unlock" size={15} color="var(--positive-bright)" />
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--positive-bright)', fontWeight: 600 }}>Unlocked with Track</span>
                <span style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 5, padding: '4px 11px', borderRadius: 'var(--radius-pill)', border: '1px solid rgba(22,214,128,0.4)', background: 'var(--green-tint)', boxShadow: '0 0 18px rgba(22,214,128,0.22)', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--positive-bright)' }}>
                  <Ic name="Sparkles" size={11} color="var(--positive-bright)" /> Track only
                </span>
              </div>
              {trackOnly.map((f, i) => <UnlockRow key={f.title} {...f} tone="green" divider={i > 0} />)}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}
window.Hardware = Hardware;