function HowItWorks() {
  const [step, setStep] = React.useState(0);
  const steps = [
    { k: 'Шаг 01', t: 'Сними еду', d: 'Тарелка, упаковка, рукописное меню — миникорн распознаёт всё. Можно голосом или текстом, если стесняешься фотографировать.' },
    { k: 'Шаг 02', t: 'Получи разбор',  d: 'БЖУ, калории, витамины и минералы — мгновенно. Видишь, чего перебрал и чего не хватает.' },
    { k: 'Шаг 03', t: 'Спроси миникорна', d: 'Спроси по-человечески: «что съесть на ужин?», «почему я устаю днём?». Миникорн ответит на основе твоих данных.' },
    { k: 'Шаг 04', t: 'Закрой спринт', d: 'Каждые 7 дней — итоги. Что улучшилось, что просело, что попробовать дальше. Без чувства вины.' },
  ];

  const screens = ['assets/screen-add.png', 'assets/screen-home.png', 'assets/screen-balance.png', 'assets/screen-cards.png'];

  return (
    <section id="how" className="pad-y-lg">
      <div className="wrap">
        <Reveal>
          <SectionLabel n={2}>Как это работает</SectionLabel>
          <h2 className="display" style={{ fontSize: 'clamp(40px, 6vw, 80px)', margin: '0 0 56px', maxWidth: '18ch' }}>
            Минута в день. <span style={{ color: 'var(--violet)' }}>Картина целиком.</span>
          </h2>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }} className="how-grid">
          <div>
            {steps.map((s, i) => (
              <button key={i} onClick={() => setStep(i)} style={{
                display: 'block', width: '100%', textAlign: 'left',
                appearance: 'none', border: 0, background: 'transparent', cursor: 'pointer',
                padding: '20px 0', borderTop: '1px solid var(--line)',
                borderBottom: i === steps.length - 1 ? '1px solid var(--line)' : 'none',
                color: 'var(--ink)', opacity: step === i ? 1 : 0.45,
                transition: 'opacity .25s ease',
              }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 16 }}>
                  <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--violet)', letterSpacing: '0.08em' }}>
                    {s.k}
                  </span>
                  <span style={{
                    flex: 1, fontFamily: 'var(--display)', fontWeight: 700, fontSize: 36,
                    letterSpacing: '-0.02em', lineHeight: 1.1,
                  }}>{s.t}</span>
                  <span style={{
                    width: 28, height: 28, borderRadius: '50%',
                    border: `1.5px solid ${step === i ? 'var(--violet)' : 'var(--line-2)'}`,
                    background: step === i ? 'var(--violet)' : 'transparent',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0,
                  }}>
                    {step === i && <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'white' }}/>}
                  </span>
                </div>
                {step === i && (
                  <p style={{
                    margin: '12px 0 0', paddingLeft: 80,
                    color: 'var(--ink-2)', fontSize: 16, maxWidth: '50ch',
                  }}>{s.d}</p>
                )}
              </button>
            ))}
          </div>

          <div style={{ position: 'sticky', top: 100, display: 'flex', justifyContent: 'center' }}>
            <div style={{ position: 'relative' }}>
              <div aria-hidden style={{
                position: 'absolute', inset: '-15%',
                background: 'radial-gradient(50% 50% at 50% 50%, rgba(167,139,250,0.4), transparent 70%)',
                filter: 'blur(40px)', zIndex: -1,
              }}/>
              <PhoneFrame width={300}>
                {screens.map((src, i) => (
                  <img key={i} src={src} alt="" style={{
                    position: 'absolute', inset: 0, width: '100%', height: '100%',
                    objectFit: 'cover', objectPosition: 'top',
                    opacity: step === i ? 1 : 0,
                    transition: 'opacity .5s ease',
                  }}/>
                ))}
              </PhoneFrame>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px){
          .how-grid{ grid-template-columns: 1fr !important; gap: 40px !important; }
          .how-grid > div:nth-child(2){ position: static !important; }
        }
      `}</style>
    </section>
  );
}
window.HowItWorks = HowItWorks;