function LayeredCardHero({ size = 420 }) {
  const prefersReduce = typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const [on, setOn] = React.useState(prefersReduce);
  React.useEffect(() => {
    if (prefersReduce) return;
    const t = requestAnimationFrame(() => setOn(true));
    return () => cancelAnimationFrame(t);
  }, []);
  const layer = (i, targetOp) => ({
    opacity: on ? targetOp : 0,
    transform: on ? 'translate(0,0)' : 'translate(11px,16px)',
    transition: prefersReduce ? 'none'
      : `opacity 700ms cubic-bezier(0.16,1,0.3,1) ${i * 150}ms, transform 700ms cubic-bezier(0.16,1,0.3,1) ${i * 150}ms`,
  });
  return (
    <svg viewBox="0 0 200 200" width={size} height={size} role="img" aria-label="Synth"
      style={{ display: 'block', overflow: 'visible' }}>
      <rect x="84" y="36" width="80" height="110" rx="20" fill="#EB6C5F" style={layer(0, 0.95)} />
      <rect x="68" y="48" width="80" height="110" rx="20" fill="#EB954A" style={layer(1, 0.75)} />
      <rect x="52" y="60" width="80" height="110" rx="20" fill="#F6D889" style={layer(2, 0.55)} />
      <g style={layer(3, 1)}>
        <rect x="36" y="72" width="80" height="110" rx="20" fill="#EAEAED" opacity="0.5" />
        <rect x="36" y="72" width="80" height="110" rx="20" fill="none" stroke="#142B4D" strokeWidth="1.6" />
      </g>
      <text x="76" y="152" textAnchor="middle" fontFamily="Georgia, 'Newsreader', serif"
        fontWeight="900" fontSize="72" fontStyle="italic" fill="#142B4D" style={layer(4, 1)}>S</text>
    </svg>
  );
}

const HERO_WORDS = [
  { t: 'The' }, { t: 'first' }, { t: 'sports' }, { t: 'newsroom' },
  { t: 'powered' }, { t: 'by' }, { t: 'an', c: 'var(--syn-orange)' }, { t: 'LLM.', c: 'var(--syn-orange)' },
];

const HERO_SIGNALS = [
  'DAL · mood 62 ▸ Thanksgiving upset of the champs',
  'NBA · Jokić Q3 usage 41% ▸ first this season',
  'NFL · CeeDee $34M AAV ▸ exactly the tag number',
  'DEN bench 121.4 per 100 ▸ last in the league',
  'MLB · barrel rate +4.1% ▸ post–deadline swing',
  'NHL · PP 28.6% ▸ top-3 since the coaching change',
];

function Hero({ onStart = () => {} }) {
  const [heroEmail, setHeroEmail] = React.useState('');
  const { isPhone, isTablet } = window.useIsMobile();
  const prefersReduce = typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const [on, setOn] = React.useState(prefersReduce);
  React.useEffect(() => {
    if (prefersReduce) return;
    const t = requestAnimationFrame(() => setOn(true));
    return () => cancelAnimationFrame(t);
  }, []);
  const rise = (delay, y = 18) => ({
    opacity: on ? 1 : 0,
    transform: on ? 'none' : `translateY(${y}px)`,
    transition: prefersReduce ? 'none'
      : `opacity 620ms cubic-bezier(0.16,1,0.3,1) ${delay}ms, transform 620ms cubic-bezier(0.16,1,0.3,1) ${delay}ms`,
  });
  const pills = [...HERO_SIGNALS, ...HERO_SIGNALS];
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--syn-paper)' }}>
      <style>{`
        @keyframes synMarquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
        .syn-ticker-track { display: flex; gap: 12px; width: max-content; animation: synMarquee 34s linear infinite; }
        .syn-ticker:hover .syn-ticker-track { animation-play-state: paused; }
        @media (prefers-reduced-motion: reduce) { .syn-ticker-track { animation: none; } }
      `}</style>

      <div style={{ maxWidth: 1120, margin: '0 auto', padding: isPhone ? '48px 24px 40px' : '84px 48px 56px', position: 'relative' }}>
        {/* Layered logo — large, offset right, sits behind the copy. Decorative only;
            hidden on phones where it would overlap the headline text. */}
        {!isPhone && (
          <div style={{
            position: 'absolute', top: '50%', right: isTablet ? -40 : -12, transform: 'translateY(-50%)',
            zIndex: 0, pointerEvents: 'none', opacity: isTablet ? 0.5 : 1,
          }}>
            <LayeredCardHero size={isTablet ? 320 : 440} />
          </div>
        )}

        <div style={{ position: 'relative', zIndex: 1, maxWidth: isPhone ? '100%' : 680 }}>
          <div style={{
            ...rise(80),
            fontFamily: 'var(--syn-font-mono)', fontSize: 12, letterSpacing: '0.18em',
            textTransform: 'uppercase', color: 'var(--syn-fg-subtle)', fontWeight: 500, marginBottom: 22,
          }}>AI for sports. For fans.</div>

          <h1 style={{
            fontFamily: 'var(--syn-font-display)', fontSize: isPhone ? 44 : (isTablet ? 64 : 84), fontWeight: 600,
            letterSpacing: '-0.045em', lineHeight: 0.98, color: 'var(--syn-navy)',
            margin: '0 0 26px',
          }}>
            {HERO_WORDS.map((w, i) => (
              <span key={i} style={{ display: 'inline-block', verticalAlign: 'bottom', clipPath: 'inset(-0.45em -0.12em 0 -0.12em)' }}>
                <span style={{
                  display: 'inline-block',
                  color: w.c || 'inherit',
                  whiteSpace: w.t === 'LLM.' ? 'nowrap' : 'normal',
                  opacity: on ? 1 : 0,
                  transform: on ? 'none' : 'translateY(105%)',
                  transition: prefersReduce ? 'none'
                    : `opacity 560ms cubic-bezier(0.16,1,0.3,1) ${160 + i * 60}ms, transform 620ms cubic-bezier(0.16,1,0.3,1) ${160 + i * 60}ms`,
                }}>{w.t}</span>
                {i < HERO_WORDS.length - 1 ? '\u00A0' : ''}
              </span>
            ))}
          </h1>

          <p style={{
            ...rise(680),
            fontFamily: 'var(--syn-font-display)', fontSize: isPhone ? 19 : 27, lineHeight: 1.35,
            color: 'var(--syn-fg-muted)', margin: '0 0 34px', maxWidth: 520, fontWeight: 400,
          }}>Be the first to read our daily newsletter.</p>

          <form
            onSubmit={e => { e.preventDefault(); onStart(heroEmail); }}
            style={{
              /* Will's original design: orange Sign-up button INSIDE the email pill,
                 side-by-side. Same on phone and desktop — only maxWidth (460) is shared
                 with the lower form so their left+right edges line up. */
              ...rise(780),
              display: 'flex', alignItems: 'center', gap: 8,
              width: '100%', maxWidth: 460, boxSizing: 'border-box',
              background: '#FFFFFF', border: '1px solid var(--syn-border-strong)',
              borderRadius: isPhone ? 13 : 16,
              padding: isPhone ? '6px 6px 6px 16px' : '8px 8px 8px 20px',
              boxShadow: '0 22px 48px -30px rgba(20,43,77,0.4)',
            }}>
            <input
              type="email"
              value={heroEmail}
              onChange={e => setHeroEmail(e.target.value)}
              placeholder="Enter your email"
              style={{
                flex: 1, minWidth: 0, border: 0, outline: 'none', background: 'transparent',
                fontFamily: 'var(--syn-font-body)', fontSize: isPhone ? 15 : 16, color: 'var(--syn-fg)',
                padding: isPhone ? '9px 0' : '12px 0',
              }}
            />
            <button style={{
              flexShrink: 0,
              background: 'var(--syn-red)', color: '#FBF7F1', border: 0, borderRadius: isPhone ? 9 : 11,
              padding: isPhone ? '11px 16px' : '14px 26px',
              fontFamily: 'var(--syn-font-body)', fontSize: isPhone ? 15 : 16, fontWeight: 600, cursor: 'pointer',
            }}>Sign up</button>
          </form>
          <div style={{
            ...rise(860),
            fontFamily: 'var(--syn-font-mono)', fontSize: 11, letterSpacing: '0.06em',
            textTransform: 'uppercase', color: 'var(--syn-fg-subtle)', marginTop: 16,
          }}>Daily · 7am ET · Cancel anytime</div>
        </div>
      </div>

      {/* Live signal ticker */}
      <div className="syn-ticker" style={{
        position: 'relative', zIndex: 1,
        borderTop: '1px solid var(--syn-rule)', borderBottom: '1px solid var(--syn-rule)',
        padding: '14px 0', background: 'var(--syn-paper)',
        maskImage: 'linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)',
        WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)',
      }}>
        <div className="syn-ticker-track">
          {pills.map((s, i) => (
            <span key={i} style={{
              fontFamily: 'var(--syn-font-mono)', fontSize: 12, letterSpacing: '0.02em',
              color: 'var(--syn-fg-muted)', whiteSpace: 'nowrap',
              border: '1px solid var(--syn-border)', borderRadius: 999,
              padding: '7px 14px', background: '#FFFFFF',
            }}>{s}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;