const HowItWorks = () => {
  const steps = [
    {
      n: 'ÉTAPE 01', title: "Tu récupères le PDF",
      body: "Tu donnes ton email. Tu reçois les 50 prompts en 2 minutes. Zéro carte bancaire, zéro blabla.",
      illu: (
        <svg viewBox="0 0 200 130" width="100%" height="100%">
          <rect x="58" y="14" width="84" height="110" fill="#FFF8EC" stroke="#1B1840" strokeWidth="2.5" rx="8"/>
          <path d="M58 22 L100 56 L142 22" fill="none" stroke="#1B1840" strokeWidth="2.5" strokeLinejoin="round"/>
          <circle cx="100" cy="82" r="16" fill="#FF5A4A" stroke="#1B1840" strokeWidth="2.5"/>
          <path d="M92 82 L98 88 L110 76" fill="none" stroke="#FFF8EC" strokeWidth="3" strokeLinecap="round"/>
        </svg>
      )
    },
    {
      n: 'ÉTAPE 02', title: "Tu copies, tu colles, tu lances",
      body: "Chaque prompt est prêt-à-l'emploi. Tu remplaces 2-3 variables par ton contexte. Hop, envoyé.",
      illu: (
        <svg viewBox="0 0 200 130" width="100%" height="100%">
          <rect x="20" y="20" width="70" height="90" fill="#FFF8EC" stroke="#1B1840" strokeWidth="2.5" rx="6"/>
          <path d="M26 32 L84 32 M26 40 L80 40 M26 48 L70 48 M26 56 L78 56" stroke="#1B1840" strokeWidth="1.8" strokeLinecap="round"/>
          <path d="M100 65 L135 65 M135 65 L126 56 M135 65 L126 74" stroke="#FF5A4A" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
          <rect x="145" y="20" width="40" height="90" fill="#1B1840" stroke="#1B1840" strokeWidth="2.5" rx="6"/>
          <circle cx="165" cy="32" r="3" fill="#FF5A4A"/>
          <path d="M152 44 L178 44 M152 50 L172 50 M152 56 L178 56" stroke="#9AE6B4" strokeWidth="1.8" strokeLinecap="round"/>
        </svg>
      )
    },
    {
      n: 'ÉTAPE 03', title: "Tu valides, tu livres",
      body: "L'IA sort le résultat. Tu relis en diagonale, tu ajustes 2 trucs, tu publies. C'est livré 🎉",
      illu: (
        <svg viewBox="0 0 200 130" width="100%" height="100%">
          <rect x="30" y="24" width="140" height="90" fill="#FFF8EC" stroke="#1B1840" strokeWidth="2.5" rx="8"/>
          <rect x="30" y="24" width="140" height="20" fill="#1B1840" rx="8"/>
          <rect x="30" y="34" width="140" height="10" fill="#1B1840"/>
          <circle cx="42" cy="34" r="3" fill="#FF5A4A"/>
          <circle cx="52" cy="34" r="3" fill="#FFC93C"/>
          <circle cx="62" cy="34" r="3" fill="#9AE6B4"/>
          <path d="M40 58 L160 58 M40 66 L140 66 M40 74 L150 74" stroke="#1B1840" strokeWidth="1.8" opacity=".35" strokeLinecap="round"/>
          <rect x="40" y="86" width="70" height="22" fill="#FF5A4A" stroke="#1B1840" strokeWidth="2" rx="11"/>
          <path d="M52 97 L58 103 L72 91" stroke="#FFF8EC" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
          <text x="78" y="101" fill="#FFF8EC" fontSize="11" fontFamily="Nunito" fontWeight="800">LIVRÉ</text>
        </svg>
      )
    },
  ];

  return (
    <section className="how" data-screen-label="04 Workflow">
      <div className="shell">
        <div className="section-label"><span className="num">§ 03</span><span>le workflow</span></div>
        <div className="how-head">
          <h2 className="reveal">
            3 étapes.<br/>
            Aucune <em>courbe d'apprentissage.</em>
          </h2>
          <div className="how-meta">2 min. de setup ✨</div>
        </div>

        <div className="steps">
          {steps.map((s, i) => (
            <div className="step reveal" key={i} style={{transitionDelay: `${i*100}ms`}}>
              <div className="step-num">{s.n}</div>
              <div className="step-illu">{s.illu}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.HowItWorks = HowItWorks;
