/* Website UI kit — Testimonials (navy band, rotating) */
function Social() {
  const { Testimonial } = window.DrRenanMouraDesignSystem_c23fa8;
  const items = [
    { quote: "Recuperei o frescor do olhar sem perder a minha expressão. O resultado é discreto e natural — exatamente como eu esperava.", name: "Marina A.", detail: "Rejuvenescimento do olhar" },
    { quote: "Atendimento impecável do início ao fim. Senti confiança em cada etapa e o resultado superou as expectativas.", name: "Ricardo M.", detail: "Implantes dentários" },
    { quote: "Um cuidado raro com os detalhes. A clínica inteira transmite calma e precisão.", name: "Camila F.", detail: "Ortodontia" },
  ];
  const [i, setI] = React.useState(0);

  return (
    <section className="rm-x40" style={{ background: "var(--surface-inverse-deep)", color: "#fff", padding: "var(--section-pad-y) 40px" }}>
      <div style={{ maxWidth: "var(--content-narrow)", margin: "0 auto", textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: "40px" }} data-reveal>
        <span className="rm-eyebrow" style={{ color: "var(--text-gold-on-dark)" }}>Depoimentos</span>
        <div style={{ minHeight: "220px", display: "flex", alignItems: "center" }}>
          <div style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center" }}>
            <Testimonial onDark {...items[i]} style={{ alignItems: "center", textAlign: "center" }} />
          </div>
        </div>
        <div style={{ display: "flex", gap: "12px" }}>
          {items.map((_, idx) => (
            <button key={idx} onClick={() => setI(idx)} aria-label={"Depoimento " + (idx + 1)}
              style={{ width: idx === i ? 28 : 8, height: 8, borderRadius: 999, border: "none", cursor: "pointer",
                background: idx === i ? "var(--rm-gold-400)" : "rgba(255,255,255,0.28)",
                transition: "all var(--dur-base) var(--ease-out)" }} />
          ))}
        </div>
      </div>
    </section>
  );
}
window.Social = Social;