// Virtual try-on showcase — three phone screens, one per step
function EssaiShowcase() {
  const steps = [
    {
      n: 'Étape 1',
      title: 'Choisis ta photo.',
      body: 'Importe une photo de toi.',
      img: window.R('step1','assets/section_6/step_1_photo.png'),
      alt: 'Choix de la photo dans l\'app Myrrae',
    },
    {
      n: 'Étape 2',
      title: 'Sélectionne le vêtement.',
      body: 'Choisis ton vêtement et essaie-le virtuellement.',
      img: window.R('step2','assets/section_6/step_2_produit.png'),
      alt: 'Fiche produit robe rouge dans l\'app Myrrae',
    },
    {
      n: 'Étape 3',
      title: 'Vois le résultat.',
      body: 'Partage le résultat et achète le produit en toute confiance.',
      img: window.R('step3','assets/section_6/step_3_vto.png'),
      alt: 'Rendu de l\'essayage virtuel dans l\'app Myrrae',
    },
  ];
  return (
    <section className="essai-showcase" id="essayage">
      <div className="container">
        <div className="section-meta">
          <div className="section-num"><em style={{fontStyle:'italic'}}>ii</em></div>
          <div className="section-label">Essayage virtuel<span className="dot"></span>Trois écrans, quelques secondes</div>
        </div>
        <h2 className="reveal">
          Ton essai en <em>trois étapes</em>.
        </h2>
        <p className="es-lede reveal">
          Une photo, un vêtement, et tu te vois dedans. De la sélection au rendu final, tout se passe dans l'app, en quelques secondes.
        </p>

        <div className="es-grid">
          {steps.map((s, i) => (
            <div className="es-step reveal" key={s.n} style={{transitionDelay: `${i * 90}ms`}}>
              <div className="es-phone">
                <img src={s.img} alt={s.alt} />
              </div>
              <div className="es-caption">
                <span className="es-num">{s.n}</span>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.EssaiShowcase = EssaiShowcase;