function HowItWorks() {
  const steps = [
    { n: "01", t: "Завантаж", d: "Безкоштовно з App Store або Google Play. 10 секунд — і ти готовий грати. Без реєстрації, СМС та email — просто заходь і починай тренуватись з першої хвилини.", glyph: "down" },
    { n: "02", t: "Обери предмети", d: "Українська, математика, історія, англійська, біологія — всі 12 предметів НМТ. Постав ціль на свій бал, обери темп — і ми складемо персональний план підготовки.", glyph: "subj" },
    { n: "03", t: "Грай щодня", d: "20-хвилинна сесія, стрік-полум'я, XP, рівні, досягнення. Підготовка до НМТ перетворюється на гру, в яку хочеться повертатися — як у Duolingo, тільки для НМТ.", glyph: "play" },
    { n: "04", t: "Склади на максимум", d: "Адаптивна модель тренує саме твої слабкі місця. Симуляція справжнього НМТ із таймером і форматом. Без зайвої теорії — тільки те, що дає бали.", glyph: "max" },
  ];
  return (
    <section className="section-pad" id="how">
      <div className="container">
        <span className="section-eyebrow">Як це працює</span>
        <h2 className="section-title">Чотири кроки до 200 балів</h2>
        <p className="section-sub">Без репетиторів. Без зошитів. Без стресу. Просто бери телефон і грай.</p>

        <div className="steps">
          {steps.map((s, i) => <Step key={i} {...s}/>)}
        </div>

        <div style={{ display: "flex", justifyContent: "center", marginTop: 56 }}>
          <a href="#download" className="btn btn-orange" style={{ padding: "18px 32px", fontSize: 17 }}>
            Завантажити НМТ+
            <Icon name="arrow" size={18}/>
          </a>
        </div>
      </div>
    </section>
  );
}

function Step({ n, t, d, glyph }) {
  return (
    <div className="step reveal">
      <div className="num">КРОК · {n}</div>
      <h3>{t}</h3>
      <p>{d}</p>
      <div className="glyph">
        <StepGlyph kind={glyph}/>
      </div>
    </div>
  );
}

function StepGlyph({ kind }) {
  if (kind === "down") return (
    <svg width="120" height="80" viewBox="0 0 120 80">
      <rect x="20" y="14" width="40" height="60" rx="8" fill="#1E293B"/>
      <rect x="22" y="22" width="36" height="44" rx="3" fill="#FDF8F5"/>
      <circle cx="80" cy="40" r="22" fill="#F97316"/>
      <path d="M80 30 v20 M72 42 l8 8 8-8" stroke="#fff" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
  if (kind === "subj") return (
    <svg width="160" height="80" viewBox="0 0 160 80">
      {[
        ["#FFEDD5","#F97316","Я"],
        ["#DCFCE7","#22C55E","\u222B"],
        ["#DBEAFE","#3B82F6","\u00A7"],
        ["#FEF3C7","#CA8A04","En"],
      ].map(([bg,fg,t], i) => (
        <g key={i} transform={`translate(${i*36},${i%2?6:0}) rotate(${i%2?-4:4} 18 18)`}>
          <rect x="4" y="4" width="34" height="34" rx="9" fill={bg}/>
          <text x="21" y="27" textAnchor="middle" fontSize="15" fontWeight="900" fill={fg} fontFamily="Manrope">{t}</text>
        </g>
      ))}
    </svg>
  );
  if (kind === "play") return (
    <svg width="160" height="80" viewBox="0 0 160 80">
      <rect x="10" y="20" width="140" height="44" rx="12" fill="#1E293B"/>
      <rect x="14" y="24" width="60" height="36" rx="8" fill="#F97316"/>
      <text x="44" y="46" textAnchor="middle" fontSize="14" fontWeight="900" fill="#fff">7 🔥</text>
      <text x="100" y="40" textAnchor="middle" fontSize="11" fontWeight="800" fill="rgba(255,255,255,0.65)">XP</text>
      <text x="100" y="56" textAnchor="middle" fontSize="14" fontWeight="900" fill="#FACC15">+120</text>
    </svg>
  );
  return (
    <svg width="160" height="80" viewBox="0 0 160 80">
      <rect x="10" y="50" width="20" height="20" fill="#FFEDD5" rx="3"/>
      <rect x="34" y="38" width="20" height="32" fill="#FED7AA" rx="3"/>
      <rect x="58" y="24" width="20" height="46" fill="#FB923C" rx="3"/>
      <rect x="82" y="12" width="20" height="58" fill="#F97316" rx="3"/>
      <rect x="106" y="0" width="20" height="70" fill="#EA580C" rx="3"/>
      <text x="138" y="18" fontSize="20" fontWeight="900" fill="#22C55E">200</text>
      <text x="138" y="32" fontSize="9" fontWeight="800" fill="#22C55E">МАКС.</text>
    </svg>
  );
}

window.HowItWorks = HowItWorks;