const Hero = ({ variant = 'Aurora' }) => {
  const [account, setAccount] = React.useState('business');
  const [streamKey, setStreamKey] = React.useState(0);

  // Auto-toggle between accounts every ~15s to demo per-account voice.
  React.useEffect(() => {
    const t = setInterval(() => {
      setAccount(a => a === 'business' ? 'personal' : 'business');
      setStreamKey(k => k + 1);
    }, 16000);
    return () => clearInterval(t);
  }, []);

  // Responsive scale for the mockup
  const stageRef = React.useRef(null);
  const [scale, setScale] = React.useState(1);
  React.useEffect(() => {
    const onResize = () => {
      if (!stageRef.current) return;
      const w = stageRef.current.clientWidth;
      setScale(Math.min(1, w / 1280));
    };
    onResize(); window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  return (
    <header style={{
      position:'relative', overflow:'hidden',
      paddingTop: 140, paddingBottom: 80,
      background: 'linear-gradient(180deg, #FBF8FE 0%, #F4EEFB 60%, #FBF8FE 100%)',
    }}>
      {/* Aurora gradients */}
      <AuroraBg variant={variant} />

      <div className="container" style={{ position:'relative', zIndex: 2, textAlign:'center' }}>
        <div className="eyebrow" style={{ justifyContent:'center', display:'inline-flex', marginBottom: 24 }}>
          <span className="dot" /> Apple Mail, in <em>your</em> voice — and any AI you choose
        </div>

        <h1 style={{ maxWidth: 1100, margin: '0 auto', textWrap: 'balance' }}>
          Your email <span className="serif" style={{ fontStyle:'italic' }}>twin.</span><br />
          With the AI you pick.
        </h1>
        <p className="lede" style={{ maxWidth: 760, margin: '24px auto 0', textWrap:'pretty' }}>
          MailTwin learns how you write — separately for work and personal — and drafts replies
          that actually sound like you in each. Pick any AI provider with your own key:
          Claude, ChatGPT, Gemini, Apple Intelligence, six more. No lock-in. No proxy.
          Your inbox, on your Mac.
        </p>

        <div style={{ display:'flex', gap: 14, justifyContent:'center', marginTop: 36, flexWrap:'wrap' }}>
          <a href="https://updates.mailtwin.ai/MailTwin.dmg" className="btn btn-primary" style={{ padding:'16px 26px', fontSize: 16 }}>
            <Icons.Apple size={18} stroke={1.8} /> Download for macOS
            <span style={{ opacity: 0.8, fontWeight: 400, fontSize: 13 }}>· macOS 13+</span>
          </a>
          <a href="#privacy" className="btn btn-ghost" style={{ padding:'16px 22px', fontSize: 15 }}>
            See how it works <Icons.ArrowRight size={16} />
          </a>
        </div>

        <div style={{ marginTop: 22, display:'flex', gap: 28, justifyContent:'center', flexWrap:'wrap', fontSize: 13, color:'var(--muted)' }}>
          {[
            ['One twin per account — work voice ≠ personal voice', '⌥'],
            ['8 AI providers — bring your own key, switch anytime', '✦'],
            ['$39 one-time · 14-day full trial', '↺'],
          ].map(([t, i]) => (
            <span key={t} style={{ display:'inline-flex', alignItems:'center', gap: 8 }}>
              <span style={{ color:'var(--magenta)' }}>{i}</span> {t}
            </span>
          ))}
        </div>
      </div>

      {/* Mockup stage */}
      <div className="container" style={{ position:'relative', zIndex: 2, marginTop: 80 }}>
        {/* Account toggle floating above */}
        <div style={{ display:'flex', justifyContent:'center', marginBottom: 24, gap: 6 }}>
          <div style={{
            display:'inline-flex', padding: 4, borderRadius: 999,
            background:'white', border:'1px solid var(--line)',
            boxShadow:'0 4px 16px -8px rgba(50,30,100,0.2)',
          }}>
            {[
              ['business','Work voice','#7B7BE8'],
              ['personal','Personal voice','#E879B5'],
            ].map(([k, l, c]) => (
              <button key={k} onClick={() => { setAccount(k); setStreamKey(s => s + 1); }} style={{
                padding:'8px 16px', borderRadius: 999, border:'none',
                background: account === k ? 'var(--ink)' : 'transparent',
                color: account === k ? 'white' : 'var(--ink)',
                fontSize: 13, fontWeight: 600, transition: 'all .2s ease',
                display:'inline-flex', alignItems:'center', gap: 8,
              }}>
                <span style={{ width: 7, height: 7, borderRadius: 999, background: c }} />
                {l}
              </button>
            ))}
          </div>
        </div>

        <div ref={stageRef} style={{ height: scale * 760, display:'flex', justifyContent:'center', overflow:'visible' }}>
          <div style={{ width: 1280 * scale, height: 720 * scale, position:'relative' }}>
            <div style={{ position:'absolute', top: 0, left: 0 }}>
              <MailMockup key={streamKey} scale={scale} streaming account={account} />
            </div>
          </div>
        </div>
      </div>
    </header>
  );
};

const AuroraBg = ({ variant }) => {
  const blobs = variant === 'Mono' ? [
    { l:'10%', t:'10%', c:'rgba(123,123,232,0.35)' },
    { l:'70%', t:'30%', c:'rgba(123,123,232,0.25)' },
  ] : variant === 'Sunset' ? [
    { l:'-10%', t:'10%', c:'rgba(244,166,200,0.5)' },
    { l:'40%', t:'-10%', c:'rgba(232,121,181,0.4)' },
    { l:'80%', t:'30%', c:'rgba(194,111,217,0.4)' },
  ] : [
    { l:'-5%', t:'5%', c:'rgba(244,166,200,0.45)' },
    { l:'30%', t:'-10%', c:'rgba(194,111,217,0.4)' },
    { l:'70%', t:'10%', c:'rgba(123,123,232,0.4)' },
    { l:'90%', t:'45%', c:'rgba(107,160,240,0.35)' },
  ];
  return (
    <div aria-hidden style={{ position:'absolute', inset: 0, pointerEvents:'none', overflow:'hidden', zIndex: 1 }}>
      {blobs.map((b, i) => (
        <div key={i} style={{
          position:'absolute', left: b.l, top: b.t, width: 700, height: 700,
          background: `radial-gradient(circle, ${b.c} 0%, transparent 60%)`,
          filter:'blur(40px)',
          animation: `mailtwin-float ${10 + i*2}s ease-in-out ${i}s infinite`,
        }} />
      ))}
    </div>
  );
};

window.Hero = Hero;