// ProcessSection — 3-step process
function ProcessSection() {
  const steps = [
    {
      num: 'Étape 01',
      title: "On échange en amont",
      body: "C'est le moment de se rencontrer ! Un premier appel pour faire un état des lieux de ta situation et de ce que tu recherches.",
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
      )
    },
    {
      num: 'Étape 02',
      title: "Notre appel de 90 minutes",
      body: "On prend le temps. Je te fais ta lecture en live, on échange, je réponds à toutes tes questions. C'est ton espace safe, un moment rien que pour toi.",
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M23 7l-7 5 7 5V7z"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
      )
    },
    {
      num: 'Étape 03',
      title: "Ton récap sous 48h",
      body: "Tu reçois une synthèse de tout notre échange, pour pouvoir t'y replonger dès que tu en as besoin.",
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="15" y2="17"/></svg>
      )
    },
  ];
  return (
    <section id="process" className="mi-section">
      <div className="mi-section__head">
        <span className="mi-eyebrow">Comment ça se passe</span>
        <h2>Le process se déroule <em>en 3 étapes</em>.</h2>
        <p>Voilà exactement à quoi t'attendre.</p>
      </div>
      <div className="mi-process__list">
        {steps.map(s => (
          <article key={s.num} className="mi-step">
            <div className="mi-step__icon">{s.icon}</div>
            <div className="mi-step__num">{s.num}</div>
            <h3>{s.title}</h3>
            <p>{s.body}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { ProcessSection });