// Testimonials — quotes grandes, estilo editorial
const QUOTES = [
  {
    q: 'Entregaron en dos semanas lo que otra agencia llevaba seis meses sin terminar. Y funcionaba a la primera.',
    a: 'Marta Rial',
    r: 'CEO, Loma Verde',
    avatar: '#7c9885',
  },
  {
    q: 'Lo que más valoro: hablamos el mismo idioma que mi equipo técnico, pero explican el porqué al resto.',
    a: 'Javier Méndez',
    r: 'CTO, Horizonte SaaS',
    avatar: '#5b7cfa',
  },
  {
    q: 'Usar IA bien, no por postureo. Eso les hace rápidos sin perder calidad. Lo notas en el detalle.',
    a: 'Andrea Solano',
    r: 'Fundadora, Pulse Studio',
    avatar: '#c3a6ff',
  },
  {
    q: 'Nuestro Lighthouse pasó de 62 a 99 en una semana. El SEO orgánico se triplicó en dos meses.',
    a: 'Luis Cabrera',
    r: 'Marketing, Clínica Aria',
    avatar: '#e8a87c',
  },
];

const Testimonials = () => {
  const [active, setActive] = React.useState(0);

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

  return (
    <section className="testim">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">clientes · 05 / 05</div>
          <h2>Lo que dicen<br/>quienes ya <em>lo programaron</em>.</h2>
        </div>

        <div className="testim__stage">
          <div className="testim__marks" aria-hidden="true">“</div>
          <div className="testim__slides">
            {QUOTES.map((q, i) => (
              <blockquote key={i} className={`testim__slide ${i === active ? 'is-active' : ''}`}>
                <p className="testim__quote">{q.q}</p>
                <footer className="testim__attr">
                  <span className="testim__avatar" style={{background: q.avatar}} aria-hidden="true" />
                  <span className="testim__author">{q.a}</span>
                  <span className="testim__role mono">{q.r}</span>
                </footer>
              </blockquote>
            ))}
          </div>

          <div className="testim__nav" role="tablist">
            {QUOTES.map((_, i) => (
              <button
                key={i}
                role="tab"
                aria-selected={i === active}
                aria-label={`Testimonio ${i + 1}`}
                className={`testim__dot ${i === active ? 'is-active' : ''}`}
                onClick={() => setActive(i)}
              >
                <span className="mono">{String(i + 1).padStart(2, '0')}</span>
              </button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.Testimonials = Testimonials;