const TraceHero = () => {
  const t = window.TRACE;
  const videoRef = React.useRef(null);
  const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  React.useEffect(() => {
    const el = videoRef.current;
    if (!el) return;
    if (reducedMotion) {
      el.pause();
      return;
    }
    const tryPlay = () => el.play().catch(() => {});
    tryPlay();
    el.addEventListener('loadeddata', tryPlay);
    return () => el.removeEventListener('loadeddata', tryPlay);
  }, [reducedMotion]);

  return (
    <section id="hero" className="trace-hero" style={{
      position: 'relative',
      minHeight: 'min(88vh, 720px)',
      padding: '140px 48px 60px',
      display: 'grid',
      gridTemplateColumns: 'minmax(0,0.55fr) minmax(0,1fr)',
      gap: 56,
      alignItems: 'center',
      fontFamily: t.sans,
    }}>
      <div style={{ maxWidth: 560, minWidth: 0 }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '6px 12px 6px 8px',
          border: `1px solid ${t.hair}`, borderRadius: 999,
          fontSize: 12, color: t.ink, marginBottom: 32,
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: t.green }} />
          <span>Beta available · local AI · on-device</span>
        </div>

        <h1 style={{
          fontFamily: t.sans,
          fontSize: 'clamp(34px, 3.4vw, 50px)',
          lineHeight: 1.08,
          letterSpacing: '-0.03em',
          fontWeight: 700,
          color: t.ink,
          margin: 0,
          textWrap: 'balance',
        }}>
          You worked more than you <span style={{ color: t.sky }}>billed</span>.
        </h1>

        <p style={{
          marginTop: 24, fontSize: 18, lineHeight: 1.55,
          color: t.dim, maxWidth: 480,
        }}>
          Trace captures every billable minute automatically — no timers,
          no guessing. It watches your work on-device and turns it into a
          timesheet by itself. Nothing ever leaves your laptop.
        </p>

        <div style={{
          marginTop: 40, display: 'flex', alignItems: 'center', gap: 14,
          flexWrap: 'wrap',
        }}>
          <a href="#download" style={{
            padding: '13px 22px',
            background: t.ink, color: '#fff', textDecoration: 'none',
            borderRadius: 999, fontSize: 13, fontWeight: 500,
            whiteSpace: 'nowrap', flexShrink: 0,
          }}>Download Trace →</a>
          <span style={{ fontSize: 12, color: t.faint }}>Windows · Linux · macOS coming soon</span>
        </div>
        <div style={{ marginTop: 12, fontSize: 12, color: t.faint }}>
          Unsigned beta — the installer will ask you to confirm before it runs
        </div>
      </div>

      {/* Real Trace UI, sped-up footage from the product teaser */}
      <div className="trace-hero-mock" style={{ position: 'relative', minWidth: 0 }}>
        <div style={{
          position: 'relative', width: '100%', maxWidth: 936, margin: '0 auto',
          borderRadius: 12, overflow: 'hidden',
          border: `1px solid ${t.hair}`,
          boxShadow: '0 24px 80px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.06)',
        }}>
          <video
            ref={videoRef}
            src="assets/hero.mp4"
            aria-label="Trace dashboard automatically tracking a day of billable work"
            autoPlay={!reducedMotion} muted loop={!reducedMotion} playsInline preload="auto"
            style={{ display: 'block', width: '100%', height: 'auto' }}
          />
        </div>
      </div>
    </section>
  );
};

window.TraceHero = TraceHero;