/* AntiTheft — GPS lives in the Track dongle, not the phone. Stylised live
   tracking map with a 30-second ping cadence and a movement-alert story. */
function AntiTheft() {
  const { Badge } = window.RevvoDesignSystem_a89086;
  const { Reveal, Ic } = window;

  const ref = React.useRef(null);
  const [inView, setInView] = React.useState(false);
  const [ago, setAgo] = React.useState(4); // "updated Ns ago", cycles 0..29
  const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  React.useEffect(() => {
    const node = ref.current; if (!node) return;
    let done = false;
    const check = () => { const r = node.getBoundingClientRect(); if (r.top < (window.innerHeight || 800) * 0.8 && r.bottom > 0) { done = true; setInView(true); } };
    check();
    window.addEventListener('scroll', check, { passive: true });
    const poll = setInterval(() => { if (done) { clearInterval(poll); return; } check(); }, 500);
    return () => { window.removeEventListener('scroll', check); clearInterval(poll); };
  }, []);

  React.useEffect(() => {
    if (!inView || reduce) return;
    const t = setInterval(() => setAgo((s) => (s + 1) % 30), 1000);
    return () => clearInterval(t);
  }, [inView, reduce]);

  const points = [
    ['Cpu', 'GPS is in the hardware', 'The Track dongle has its own GPS and 4G &mdash; it doesn\u2019t depend on your phone being anywhere near the car.'],
    ['Radio', 'Pings every 30 seconds', 'Location is written to ALEROQ continuously, so you always see where the car actually is.'],
    ['BellRing', 'Moves without you? Instant alert', 'An unexpected reconnect or movement triggers a push notification within seconds.'],
    ['UserCheck', 'Phone tracks you. Dongle tracks the car', 'If it\u2019s stolen, your phone stays with you while the dongle keeps reporting the car\u2019s position.'],
  ];

  return (
    <section style={{ position: 'relative', padding: 'var(--space-section) clamp(20px, 5vw, 48px)' }}>
      <div ref={ref} style={{ maxWidth: 'var(--container)', margin: '0 auto' }}>
        <Reveal style={{ textAlign: 'center', marginBottom: 52 }}>
          <Badge variant="neutral" style={{ marginBottom: 20 }}>Anti-theft &middot; Track</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)' }}>
            If it moves, you&rsquo;ll know first.
          </h2>
          <p style={{ fontSize: 'var(--fs-lead)', color: 'var(--text-body)', maxWidth: 560, margin: '0 auto' }}>
            The Track dongle tracks your car independently of your phone &mdash; so a stolen car is a car you can still see.
          </p>
        </Reveal>

        <div className="theft-grid" style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 'clamp(24px, 4vw, 48px)', alignItems: 'center' }}>
          {/* map card */}
          <Reveal dir="left">
            <div data-theme="dark" style={{ position: 'relative', borderRadius: 'var(--radius-lg)', overflow: 'hidden',
              border: '1px solid var(--border)', background: '#0a1a14', aspectRatio: '4 / 3',
              boxShadow: '0 30px 70px rgba(0,0,0,0.5)' }}>
              {/* map base: faint grid + roads */}
              <div style={{ position: 'absolute', inset: 0,
                backgroundImage: 'linear-gradient(rgba(22,214,128,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(22,214,128,0.08) 1px, transparent 1px)',
                backgroundSize: '44px 44px' }} />
              {/* roads */}
              <div style={{ position: 'absolute', top: '38%', left: '-5%', width: '110%', height: 10, background: 'rgba(255,255,255,0.06)', transform: 'rotate(-7deg)' }} />
              <div style={{ position: 'absolute', top: '-10%', left: '58%', width: 9, height: '120%', background: 'rgba(255,255,255,0.06)', transform: 'rotate(6deg)' }} />
              <div style={{ position: 'absolute', top: '72%', left: '-5%', width: '110%', height: 7, background: 'rgba(255,255,255,0.045)', transform: 'rotate(3deg)' }} />

              {/* live badge */}
              <div style={{ position: 'absolute', top: 16, left: 16, display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '7px 13px', borderRadius: 'var(--radius-pill)', background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(8px)',
                border: '1px solid rgba(22,214,128,0.4)', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--positive-bright)' }}>
                <span className="blink" style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--positive)', boxShadow: '0 0 8px var(--positive)' }} /> Live
              </div>

              {/* marker */}
              <div style={{ position: 'absolute', top: '46%', left: '52%', transform: 'translate(-50%, -50%)' }}>
                <div className={reduce ? '' : 'bg-pulse'} style={{ position: 'absolute', top: '50%', left: '50%', width: 120, height: 120, transform: 'translate(-50%,-50%)', borderRadius: '50%', background: 'radial-gradient(circle, rgba(22,214,128,0.28), transparent 70%)' }} />
                <div style={{ position: 'relative', width: 18, height: 18, borderRadius: '50%', background: 'var(--positive)', border: '3px solid #04130c', boxShadow: '0 0 16px var(--positive)' }} />
              </div>

              {/* readout */}
              <div style={{ position: 'absolute', bottom: 16, left: 16, right: 16, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
                padding: '13px 16px', borderRadius: 'var(--radius-md)', background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(10px)', border: '1px solid var(--line-200)' }}>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 14.5, fontWeight: 600, color: 'var(--text-strong)', display: 'flex', alignItems: 'center', gap: 7 }}>
                    <Ic name="CarFront" size={15} color="var(--positive-bright)" /> 2018 Honda Civic
                  </div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-muted)', marginTop: 3 }}>E Roosevelt St &middot; Phoenix, AZ</div>
                </div>
                <div style={{ textAlign: 'right', flexShrink: 0 }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--positive-bright)' }}>Updated</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-body)', marginTop: 2 }}>{ago}s ago</div>
                </div>
              </div>
            </div>
          </Reveal>

          {/* points */}
          <Reveal dir="right">
            <div style={{ display: 'grid', gap: 8 }}>
              {points.map(([icon, t, d]) => (
                <div key={t} style={{ display: 'flex', gap: 16, alignItems: 'flex-start', padding: '16px 18px',
                  background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--radius-md)' }}>
                  <div style={{ width: 42, height: 42, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
                    borderRadius: 'var(--radius-md)', background: 'var(--green-tint)', border: '1px solid rgba(22,214,128,0.3)', color: 'var(--positive-bright)' }}>
                    <Ic name={icon} size={20} color="var(--positive-bright)" />
                  </div>
                  <div>
                    <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--text-strong)', marginBottom: 4 }}>{t}</div>
                    <div style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--text-muted)', textWrap: 'pretty' }} dangerouslySetInnerHTML={{ __html: d }} />
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}
window.AntiTheft = AntiTheft;
