function Testimonials() {
  const quotes = [
    {
      q: "No me transformó — me hizo ver lo que ya era. El día de mi boda me sentí yo, pero en mi mejor versión.",
      name: "Renata G.",
      meta: "Boda en Atemajac · 2025",
    },
    {
      q: "La preparación, el cuidado, la oración antes de empezar. Fue un ritual completo. Lloré antes incluso de verme al espejo.",
      name: "Sofía M.",
      meta: "Catedral de Guadalajara · 2025",
    },
    {
      q: "Mi mamá, mis hermanas y yo nos sentimos cuidadas en cada minuto. Aná Paula es técnica pura, pero también corazón.",
      name: "Camila V.",
      meta: "Hacienda El Carmen · 2024",
    },
    {
      q: "Aguantó 14 horas — desde la ceremonia hasta la última foto en la tornaboda. Y la luminosidad nunca se fue.",
      name: "Mariana L.",
      meta: "San José de Gracia · 2024",
    },
  ];
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setI(p => (p + 1) % quotes.length), 7000);
    return () => clearInterval(id);
  }, []);
  const q = quotes[i];

  return (
    <section id="testimonios" style={{
      padding: "140px 0",
      background: "var(--bridal)",
      position: "relative",
      overflow: "hidden",
    }}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 80, alignItems: "center" }}>
        <div>
          <div className="eyebrow">Testimonios · 05</div>
          <h2 className="display" style={{ fontSize: "clamp(40px, 4.5vw, 64px)", margin: "20px 0 32px", color: "var(--coffee)", textWrap: "balance" }}>
            Palabras de<br/>
            <span className="italic" style={{ color: "var(--rose)" }}>quienes ya confiaron.</span>
          </h2>
          <div style={{ display: "flex", gap: 12, marginTop: 24 }}>
            {quotes.map((_, k) => (
              <button key={k} onClick={() => setI(k)} style={{
                width: 28, height: 2,
                background: k === i ? "var(--coffee)" : "rgba(100,81,61,0.25)",
                transition: "background .3s",
              }} aria-label={`testimonio ${k+1}`}></button>
            ))}
          </div>
          <div style={{ marginTop: 64, display: "flex", gap: 16 }}>
            <button onClick={() => setI(p => (p - 1 + quotes.length) % quotes.length)}
              style={{ width: 56, height: 56, borderRadius: 999, border: "1px solid var(--coffee)", color: "var(--coffee)" }}>←</button>
            <button onClick={() => setI(p => (p + 1) % quotes.length)}
              style={{ width: 56, height: 56, borderRadius: 999, border: "1px solid var(--coffee)", background: "var(--coffee)", color: "var(--ivory)" }}>→</button>
          </div>
        </div>

        <div key={i} className="reveal" style={{ position: "relative" }}>
          <div className="display" style={{ fontSize: 200, lineHeight: 0.8, color: "var(--rose)", opacity: 0.3, position: "absolute", top: -40, left: -20, fontFamily: "var(--serif)" }}>“</div>
          <p className="display italic" style={{
            fontSize: "clamp(28px, 2.6vw, 40px)",
            lineHeight: 1.35,
            color: "var(--coffee)",
            margin: 0,
            textWrap: "pretty",
            position: "relative",
          }}>
            {q.q}
          </p>
          <div style={{ marginTop: 40, display: "flex", alignItems: "center", gap: 20 }}>
            <div style={{ width: 56, height: 56, borderRadius: 999, background: "var(--marfil)", display: "grid", placeItems: "center", color: "var(--coffee)", fontFamily: "var(--serif)", fontSize: 24 }}>
              {q.name[0]}
            </div>
            <div>
              <div style={{ color: "var(--coffee)", fontSize: 16, fontWeight: 400 }}>{q.name}</div>
              <div className="eyebrow">{q.meta}</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Testimonials = Testimonials;