function Hero({ heroVariant = 'a' }) {
  const variants = {
    a: { eyebrow: '✦ AI-консилиум по здоровью в кармане',
         h1: 'Просто живи.', h2: 'Остальное — на Миникорне.',
         sub: 'Найдёт связи между самочувствием, питанием, привычками —\nи подскажет, как легко улучшить здоровье.' },
    b: { eyebrow: '✦ Здоровье без занудства',
         h1: 'Не диета.', h2: 'Привычка.',
         sub: 'Миникорн отслеживает баланс макро- и микронутриентов, шаги, сон и пищеварение — и объясняет, что с этим делать.' },
    c: { eyebrow: '✦ Личный нутрициолог',
         h1: 'Карта твоего', h2: 'здоровья.',
         sub: 'От завтрака до сна — миникорн видит картину целиком и подсказывает по-человечески, без диет-евангелизма.' },
  };
  const v = variants[heroVariant] || variants.a;

  return (
    <section className="pad-y-xl" style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="wrap" style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 64, alignItems: 'center' }} className="hero-grid">
          <div>
            <Reveal><div className="pill" style={{ marginBottom: 24 }}>
              {v.eyebrow}
            </div></Reveal>
            <Reveal delay={80}>
              <h1 className="display" style={{ fontSize: 'clamp(56px, 9vw, 124px)', margin: '0 0 24px' }}>
                {v.h1}<br/>
                <span style={{
                  background: 'linear-gradient(120deg, #ffffff 30%, var(--violet) 60%, var(--pink) 100%)',
                  WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
                }}>{v.h2}</span>
              </h1>
            </Reveal>
            <Reveal delay={160}>
              <p className="lede" style={{ marginBottom: 36, whiteSpace: 'pre-line' }}>{v.sub}</p>
            </Reveal>
            <Reveal delay={240}>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
                <a href="#cta" className="btn">Получить ранний доступ <Arrow/></a>
                <a href="#screens" className="btn ghost">Посмотреть внутри</a>
              </div>
            </Reveal>
          </div>

          {/* Hero phone + minicorn */}
          <Reveal delay={120}>
            <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
              {/* Glow */}
              <div aria-hidden style={{
                position: 'absolute', inset: '-20% -20%',
                background: 'radial-gradient(50% 50% at 50% 45%, rgba(167,139,250,0.45), transparent 70%)',
                filter: 'blur(20px)', zIndex: -1,
              }}/>
              <div style={{ position: 'relative' }}>
                <PhoneFrame width={300}>
                  <img src="assets/screen-home.png" alt="" style={{
                    width: '100%', height: '100%', objectFit: 'cover',
                    objectPosition: 'top',
                  }}/>
                </PhoneFrame>
                {/* Floating badges */}
                <div className="hero-badge glass" style={{
                  position: 'absolute', left: -90, top: 80, padding: '10px 14px',
                  fontSize: 12, display: 'flex', alignItems: 'center', gap: 10, borderRadius: 14,
                }}>
                  <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--green)', boxShadow: '0 0 8px var(--green)' }}/>
                  <div>
                    <div style={{ color: 'var(--ink-3)', fontSize: 10, fontFamily: 'var(--mono)', letterSpacing: '0.06em' }}>ЗАВТРАК</div>
                    <div style={{ fontWeight: 600 }}>456 ккал · идеально</div>
                  </div>
                </div>
                <div className="hero-badge glass" style={{
                  position: 'absolute', left: -50, bottom: 120, padding: '12px 16px',
                  fontSize: 12, borderRadius: 14, minWidth: 140,
                }}>
                  <div style={{ color: 'var(--ink-3)', fontSize: 10, fontFamily: 'var(--mono)', letterSpacing: '0.06em', marginBottom: 4 }}>ИНДЕКС БАЛАНСА</div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                    <span className="display" style={{ fontSize: 32, color: 'var(--green)' }}>86</span>
                    <span style={{ fontSize: 11, color: 'var(--ink-3)' }}>/ 100</span>
                  </div>
                </div>
              </div>
            </div>
          </Reveal>
        </div>

        {/* Stats */}
        <Reveal delay={300}>
          <div style={{
            marginTop: 100, padding: '28px 0',
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
            borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)',
          }} className="stats">
            {[
              { k: '15 сек', v: 'на запись приёма пищи' },
              { k: '40+', v: 'нутриентов в трекинге' },
              { k: '9', v: 'систем под наблюдением' },
              { k: '24/7', v: 'миникорн на связи' },
            ].map((s, i) => (
              <div key={i} style={{
                padding: '12px 24px',
                borderRight: i < 3 ? '1px solid var(--line)' : 'none',
              }}>
                <div className="display" style={{ fontSize: 44, marginBottom: 4 }}>{s.k}</div>
                <div style={{ color: 'var(--ink-3)', fontSize: 13 }}>{s.v}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
      <style>{`
        @media (max-width: 880px){
          .hero-grid{ grid-template-columns: 1fr !important; gap: 48px !important; }
          .stats{ grid-template-columns: 1fr 1fr !important; }
          .stats > div:nth-child(2){ border-right: none !important; }
          .stats > div:nth-child(3), .stats > div:nth-child(4){ border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; }
        }
        @media (max-width: 640px){
          .hero-badge{ display: none !important; }
          .stats{ grid-template-columns: 1fr 1fr !important; font-size: 13px; }
          .stats .display{ font-size: 32px !important; }
        }
      `}</style>
    </section>
  );
}
window.Hero = Hero;