// TestimonialsSection — 3 quotes
function TestimonialsSection() {
  const quotes = [
    { quote: "Mélanie a posé des mots sur des choses que je sentais sans pouvoir nommer. Je suis ressortie de l'appel avec une clarté que je n'avais pas eue depuis des années.", name: "Léa M.", role: "Fondatrice — Studio Solène", color: "var(--tsc-brown-300)" },
    { quote: "Je doutais avant — du fond et de la forme. Sa lecture a recadré tout mon positionnement business en 90 minutes. Et le PDF, j'y reviens chaque semaine.", name: "Camille L.", role: "Praticienne énergétique", color: "var(--tsc-gold-400)" },
    { quote: "Ce n'est ni woo-woo, ni froidement technique. C'est juste profondément juste. Mélanie a un don, et elle s'en sert avec délicatesse.", name: "Sarah B.", role: "Coach — ex-RH", color: "var(--tsc-brown-500)" },
  ];
  return (
    <section id="testimonials" className="mi-section">
      <div className="mi-section__head">
        <span className="mi-eyebrow">Témoignages</span>
        <h2>Ce qu'elles en disent <em>ici</em>.</h2>
      </div>
      <div className="mi-testimonials__grid">
        {quotes.map((q, i) => (
          <figure key={i} className="mi-quote">
            <svg className="mark" width="28" height="28" viewBox="0 0 32 32" fill="currentColor"><path d="M9.5 8C5.4 8 2 11.4 2 15.5S5.4 23 9.5 23H10v-3h-.5C7 20 5 18 5 15.5S7 11 9.5 11H11V8H9.5zm13 0c-4.1 0-7.5 3.4-7.5 7.5S18.4 23 22.5 23h.5v-3h-.5C20 20 18 18 18 15.5S20 11 22.5 11H24V8h-1.5z"/></svg>
            <blockquote>{q.quote}</blockquote>
            <figcaption>
              <span className="mi-quote__avatar" style={{ background: q.color }}>{q.name[0]}</span>
              <span>
                <strong>{q.name}</strong>
                <em>{q.role}</em>
              </span>
            </figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { TestimonialsSection });