function Satisfaction() {
  const testimonials = [
    {
      quote: "Service impeccable. Depuis qu'on est passé chez MouNa, plus aucune coupure — et le support répond vraiment en moins de 5 minutes.",
      name: "Amadou Diallo",
      role: "Client résidentiel · Camayenne",
      initials: "AD",
    },
    {
      quote: "L'équipe MouNa a refait toute notre infrastructure réseau en deux semaines. Le ROI est arrivé en moins de six mois.",
      name: "Fatoumata Camara",
      role: "DSI · groupe bancaire",
      initials: "FC",
    },
    {
      quote: "On gère 30 collaborateurs en télétravail sans souci. La fibre Pro est un vrai changement pour notre cabinet.",
      name: "Mamadou Bah",
      role: "Cabinet d'avocats · Kaloum",
      initials: "MB",
    },
  ];

  const [idx, setIdx] = React.useState(0);
  const t = testimonials[idx];

  return (
    <section className="sat" id="story">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">03 · Satisfaction clientèle</div>
            <h2>Notre priorité,<br/>c'est votre quotidien connecté.</h2>
          </div>
          <p>
            Près de 10 000 foyers et entreprises nous font confiance. Un support réactif, une assistance personnalisée et un suivi qualité continu — c'est ce qui fait la différence.
          </p>
        </div>

        <div className="sat-grid">
          <div className="sat-stats">
            <div className="stat-card dark">
              <div className="num">98<sub>%</sub></div>
              <div className="lbl">Clients satisfaits</div>
            </div>
            <div className="stat-card">
              <div className="num">&lt;5<sub>min</sub></div>
              <div className="lbl">Temps de réponse moyen</div>
            </div>
            <div className="stat-card">
              <div className="num">~10<sub>k</sub></div>
              <div className="lbl">Clients actifs</div>
            </div>
            <div className="stat-card dark">
              <div className="num">4.9<sub>/5</sub></div>
              <div className="lbl">Note moyenne</div>
            </div>
          </div>

          <div className="testimonial">
            <p className="testimonial-quote">{t.quote}</p>
            <div className="testimonial-meta">
              <div className="avatar">{t.initials}</div>
              <div>
                <div className="name">{t.name}</div>
                <div className="role">{t.role}</div>
              </div>
              <div className="testimonial-stars">
                {[0,1,2,3,4].map(i => <Icons.Star key={i} />)}
              </div>
            </div>
            <div className="testimonial-pager">
              <button onClick={() => setIdx((idx - 1 + testimonials.length) % testimonials.length)} aria-label="Précédent">
                <Icons.Arrow size={14} />
                <span style={{ transform: "scaleX(-1)", display: "none" }}></span>
              </button>
              <div className="dots">
                {testimonials.map((_, i) => (
                  <span key={i} className={"dot" + (i === idx ? " active" : "")}></span>
                ))}
              </div>
              <button onClick={() => setIdx((idx + 1) % testimonials.length)} aria-label="Suivant">
                <Icons.Arrow size={14} />
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Satisfaction = Satisfaction;