// How it works — 4 steps
function Steps() {
  const steps = [
    {
      n: '01',
      title: 'Capture',
      body: 'Une photo en pied. Myrrae apprend ta morphologie, ton style, ta palette.',
      art: <StepCamera />,
    },
    {
      n: '02',
      title: 'Demande',
      body: '“Une tenue pour un brunch en septembre.” Le styliste IA traduit l\'envie en pièces.',
      art: <StepChat />,
    },
    {
      n: '03',
      title: 'Essaie',
      body: 'Chaque pièce s\'essaye sur toi, pas un mannequin générique. Toi, en photo réaliste.',
      art: <StepTryOn />,
    },
    {
      n: '04',
      title: 'Adopte',
      body: 'Achète directement chez la marque, en un clic. Ta taille, ta confiance, zéro retour.',
      art: <StepBuy />,
    },
  ];
  return (
    <section className="steps" id="comment">
      <div className="container">
        <div className="section-meta">
          <div className="section-num"><em style={{fontStyle:'italic'}}>i</em></div>
          <div className="section-label">Comment ça marche<span className="dot"></span>Quatre temps, deux minutes</div>
        </div>
        <h2 style={{
          fontFamily: 'var(--font-display)',
          fontSize: 'clamp(48px, 6vw, 96px)',
          fontWeight: 400,
          lineHeight: 0.95,
          letterSpacing: '-0.02em',
          margin: '0 0 16px',
          maxWidth: 900,
          whiteSpace: 'nowrap',
        }}>
          De l'envie au panier, <em style={{fontStyle:'italic', color:'var(--myrrae-orange)'}}>en quatre temps</em>.
        </h2>
        <p style={{fontSize:18, color:'var(--fg-2)', maxWidth:760, margin:'0 0 0', lineHeight:1.55}}>
          Pas de cabine. Pas de doute.<br />
          Juste une app qui comprend ton style et te montre comment chaque pièce <em>te</em> va vraiment.
        </p>

        <div className="steps-grid">
          {steps.map(s => (
            <div className="step" key={s.n}>
              <span className="num">{s.n}</span>
              <div className="icon-art">{s.art}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Small SVG illustrations for each step (editorial line-art)
function StepCamera() {
  return (
    <svg viewBox="0 0 200 140" width="100%" height="100%">
      <rect x="0" y="0" width="200" height="140" fill="transparent" />
      <circle cx="100" cy="64" r="44" fill="none" stroke="var(--myrrae-green)" strokeWidth="1.5" />
      <circle cx="100" cy="64" r="22" fill="none" stroke="var(--myrrae-orange)" strokeWidth="1.5" />
      <rect x="56" y="34" width="88" height="60" rx="8" fill="none" stroke="var(--myrrae-green)" strokeWidth="1.5" />
      <rect x="78" y="26" width="44" height="14" rx="3" fill="none" stroke="var(--myrrae-green)" strokeWidth="1.5" />
      <circle cx="132" cy="46" r="3" fill="var(--myrrae-orange)" />
    </svg>
  );
}
function StepChat() {
  return (
    <svg viewBox="0 0 200 140" width="100%" height="100%">
      <rect x="20" y="30" width="120" height="32" rx="16" fill="var(--myrrae-orange)" opacity="0.15" />
      <rect x="20" y="30" width="120" height="32" rx="16" fill="none" stroke="var(--myrrae-orange)" strokeWidth="1.2" />
      <rect x="60" y="78" width="120" height="36" rx="18" fill="var(--myrrae-green)" opacity="0.15" />
      <rect x="60" y="78" width="120" height="36" rx="18" fill="none" stroke="var(--myrrae-green)" strokeWidth="1.2" />
      <line x1="32" y1="42" x2="100" y2="42" stroke="var(--myrrae-orange)" strokeWidth="1" />
      <line x1="32" y1="50" x2="80" y2="50" stroke="var(--myrrae-orange)" strokeWidth="1" />
      <line x1="72" y1="90" x2="160" y2="90" stroke="var(--myrrae-green)" strokeWidth="1" />
      <line x1="72" y1="100" x2="140" y2="100" stroke="var(--myrrae-green)" strokeWidth="1" />
    </svg>
  );
}
function StepTryOn() {
  return (
    <svg viewBox="0 0 200 140" width="100%" height="100%">
      <rect x="62" y="14" width="76" height="118" rx="14" fill="none" stroke="var(--myrrae-green)" strokeWidth="1.5" />
      <circle cx="100" cy="44" r="10" fill="none" stroke="var(--myrrae-green)" strokeWidth="1.5" />
      <path d="M82 70 L100 56 L118 70 L118 110 L82 110 Z" fill="var(--myrrae-orange)" opacity="0.2" stroke="var(--myrrae-orange)" strokeWidth="1.2" />
      <path d="M48 60 Q40 50 50 38" fill="none" stroke="var(--myrrae-orange)" strokeWidth="1.2" />
      <path d="M152 60 Q160 50 150 38" fill="none" stroke="var(--myrrae-orange)" strokeWidth="1.2" />
      <circle cx="44" cy="36" r="3" fill="var(--myrrae-orange)" />
      <circle cx="156" cy="36" r="3" fill="var(--myrrae-orange)" />
    </svg>
  );
}
function StepBuy() {
  return (
    <svg viewBox="0 0 200 140" width="100%" height="100%">
      <path d="M58 50 L142 50 L132 110 L68 110 Z" fill="none" stroke="var(--myrrae-green)" strokeWidth="1.5" />
      <path d="M80 50 Q80 32 100 32 Q120 32 120 50" fill="none" stroke="var(--myrrae-green)" strokeWidth="1.5" />
      <circle cx="100" cy="80" r="14" fill="var(--myrrae-orange)" />
      <path d="M93 80 L98 86 L108 75" stroke="white" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

window.Steps = Steps;
