/* testimonials.jsx */

const TESTIMONIALS = [
{
  quote: "La doctora no me vendió nada. Me explicó qué necesitaba mi piel, qué no, y construyó un plan a mi ritmo y mi presupuesto.",
  name: "Daniela M.",
  meta: "Rejuvenecimiento facial · Montería",
  tone: "champagne"
},
{
  quote: "Excelente experiencia, muy buena atención, personal muy profesional todo el tiempo. La doctora muy delicada y hábil en sus tratamientos.",
  name: "Juan Jose H.",
  meta: "Limpieza profesional · Montería",
  tone: "bone"
},
{
  quote: "Recomiendo 100% todos los tratamientos con la Dra Victoria. Quedamos bellos con la tranquilidad y confianza que dan los buenos médicos. La ubicación al norte de la ciudad, excelente.",
  name: "Salma J.",
  meta: "Armonización facial · Montería",
  tone: "rose"
},
{
  quote: "Excelente atención, muy profesionales.",
  name: "Jaime H.",
  meta: "Limpieza profesional · Montería",
  tone: "champagne"
},
{
  quote: "VD medicina estética es un excelente lugar, realizan tratamientos estéticos y antiedad de la mejor calidad, y lo más importante de todo es el carisma y profesionalismo de la Dra y su equipo. Recomendado 100%.",
  name: "María Mónica J.",
  meta: "Armonización facial · Montería",
  tone: "bone"
},
{
  quote: "Un excelente servicio y resultados excepcionales. Me encanta!!! Gracias Doctora.",
  name: "Julia H.",
  meta: "Rejuvenecimiento facial · Montería",
  tone: "rose"
},
{
  quote: "Excelente, muy profesional. 100% recomendada.",
  name: "Jacqueline F.",
  meta: "Botox · Montería",
  tone: "champagne"
},
{
  quote: "Llevaba tiempo dudando si hacerme la rinomodelación y la Dra Victoria me lo explicó todo con mucha claridad. El resultado quedó natural, exactamente lo que quería. Súper feliz y sin tiempo de recuperación.",
  name: "Daniela G.",
  meta: "Rinomodelación · Montería",
  tone: "rose"
},
];

function Testimonials() {
  const [i, setI] = useState(0);
  const n = TESTIMONIALS.length;
  const t = TESTIMONIALS[i];

  useEffect(() => {
    const id = setInterval(() => setI((x) => (x + 1) % n), 7000);
    return () => clearInterval(id);
  }, [n]);

  return (
    <section className="tst-wrap section-pad">
      <div className="wrap">
        <Reveal>
          <div className="tst-head">
            <div>
              <Eyebrow>Lo que cuentan</Eyebrow>
              <h2 className="section-title" style={{ marginTop: 18 }}>
                Voces<br /><em>de quienes ya pasaron por aquí.</em>
              </h2>
            </div>
            <p className="lead" style={{ maxWidth: "36ch" }}>Más de 500 pacientes en Montería, Sincelejo, Cartagena y la Costa Caribe.

            </p>
          </div>
        </Reveal>

        <Reveal>
          <div className="tst-stage">
            <div style={{ width: "100%" }}>
              <p className="tst-quote">{t.quote}</p>
              <div className="tst-meta">
                <span className="tst-meta-name">{t.name}</span>
                {t.meta}
              </div>
            </div>
          </div>

          <div className="tst-controls">
            <div className="tst-dots">
              {TESTIMONIALS.map((_, k) =>
              <button
                key={k}
                className={`tst-dot ${k === i ? "is-active" : ""}`}
                onClick={() => setI(k)}
                aria-label={`Testimonio ${k + 1}`} />

              )}
            </div>
            <div className="tst-arrows">
              <button className="arrow-btn" onClick={() => setI((i - 1 + n) % n)} aria-label="Anterior">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M12 7H2" />
                  <path d="M6 11l-4-4 4-4" />
                </svg>
              </button>
              <button className="arrow-btn" onClick={() => setI((i + 1) % n)} aria-label="Siguiente">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M2 7h10" />
                  <path d="M8 3l4 4-4 4" />
                </svg>
              </button>
            </div>
          </div>
        </Reveal>
      </div>
    </section>);

}

Object.assign(window, { Testimonials });