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 id = setInterval(() => {
      setAccount(a => a === 'business' ? 'personal' : 'business');
      setStreamKey(k => k + 1);
    }, 16000);
    return () => clearInterval(id);
  }, []);

  // 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" /> {t('hero.eyebrow_part1')}<em>{t('hero.eyebrow_your')}</em>{t('hero.eyebrow_part2')}
        </div>

        <h1 style={{ maxWidth: 1100, margin: '0 auto', textWrap: 'balance' }}>
          {t('hero.h1_line1_part1')}<span className="serif" style={{ fontStyle:'italic' }}>{t('hero.h1_line1_twin')}</span><br />
          {t('hero.h1_line2')}
        </h1>
        <p className="lede" style={{ maxWidth: 760, margin: '24px auto 0', textWrap:'pretty' }}>
          {t('hero.lede')}
        </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} /> {t('hero.cta_download')}
            <span style={{ opacity: 0.8, fontWeight: 400, fontSize: 13 }}>{t('hero.cta_download_meta')}</span>
          </a>
          <a href="#privacy" className="btn btn-ghost" style={{ padding:'16px 22px', fontSize: 15 }}>
            {t('hero.cta_secondary')} <Icons.ArrowRight size={16} />
          </a>
        </div>

        <div style={{ marginTop: 22, display:'flex', gap: 28, justifyContent:'center', flexWrap:'wrap', fontSize: 13, color:'var(--muted)' }}>
          {[
            [t('hero.trust_voice'),     '⌥'],
            [t('hero.trust_providers'), '✦'],
            [t('hero.trust_pricing'),   '↺'],
          ].map(([label, icon]) => (
            <span key={label} style={{ display:'inline-flex', alignItems:'center', gap: 8 }}>
              <span style={{ color:'var(--magenta)' }}>{icon}</span> {label}
            </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', t('hero.toggle_work'),     '#7B7BE8'],
              ['personal', t('hero.toggle_personal'), '#E879B5'],
            ].map(([k, label, 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 }} />
                {label}
              </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;