// Testimonials.jsx — rotating quotes from doctors
function Testimonials() {
  const items = [
    {
      quote: 'Pasé de explicar mi especialidad en cada consulta a tener pacientes que llegaban ya informados y listos para tratamiento.',
      name: 'Dra. Mariana Saldívar',
      role: 'Dermatóloga · CDMX',
      mark: 'MS',
    },
    {
      quote: 'Lo que más valoro es que Daniela respeta mi ética profesional. Nada se publica sin que yo lo apruebe, nada es sensacionalista.',
      name: 'Dr. Luis Hernández',
      role: 'Cirujano plástico · Tampico',
      mark: 'LH',
    },
    {
      quote: 'En tres meses mi consultorio pasó de tener 4 citas a la semana a tener agenda llena con lista de espera. Todo orgánico.',
      name: 'Dra. Paulina Vega',
      role: 'Ginecóloga · Monterrey',
      mark: 'PV',
    },
    {
      quote: 'No solo me crearon contenido — me enseñaron a hablarle a mis pacientes ideales. Ahora la consulta es más fluida desde el día uno.',
      name: 'Dr. Andrés Pacheco',
      role: 'Cardiólogo · Querétaro',
      mark: 'AP',
    },
  ];

  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);

  React.useEffect(() => {
    if (paused) return;
    const id = setInterval(() => setIdx(i => (i + 1) % items.length), 6500);
    return () => clearInterval(id);
  }, [paused, items.length]);

  const current = items[idx];
  const next = () => setIdx(i => (i + 1) % items.length);
  const prev = () => setIdx(i => (i - 1 + items.length) % items.length);

  return (
    <section
      id="testimonios"
      className="section section--ink testimonios"
      data-screen-label="04 Testimonios"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
    >
      <div className="section__inner" style={{position:'relative'}}>
        <span className="testimonios__mark" aria-hidden="true">"</span>

        <header className="section__head" style={{marginBottom: 56}}>
          <div>
            <span className="section__eyebrow">Doctores que confían</span>
            <h2 className="section__title section__title--wide">
              Lo dicen mejor<br/>
              <em>ellos.</em>
            </h2>
          </div>
        </header>

        <blockquote className="testimonios__quote" key={idx}>
          <em>"</em>{current.quote}<em>"</em>
        </blockquote>

        <div className="testimonios__row">
          <span className="testimonios__avatar">{current.mark}</span>
          <div className="testimonios__author">
            <strong>{current.name}</strong>
            <span>{current.role}</span>
          </div>

          <div className="testimonios__nav">
            <div className="testimonios__nav-dots" role="tablist">
              {items.map((_, i) => (
                <button
                  key={i}
                  className={'testimonios__nav-dot ' + (i === idx ? 'is-active' : '')}
                  onClick={() => setIdx(i)}
                  aria-label={`Testimonio ${i + 1}`}
                />
              ))}
            </div>
            <button className="testimonios__nav-btn" onClick={prev} aria-label="Anterior">
              <Icon name="arrow-left" size={18}/>
            </button>
            <button className="testimonios__nav-btn" onClick={next} aria-label="Siguiente">
              <Icon name="arrow-right" size={18}/>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Testimonials = Testimonials;