function Testimonios() {
  const items = [
    {
      quote: 'No vinieron a hacernos un logo. Vinieron a desarmar nuestra estrategia y devolvernos un sistema que el equipo entero entiende y defiende. Otra liga.',
      name: 'Diego Marín',
      role: 'CEO · Helix Capital',
    },
    {
      quote: 'Lo que más valoro es el rigor. Cada decisión venía con un porqué, con datos y con una opinión clara. Trabajan como partners senior, no como ejecutores.',
      name: 'Ximena Torres',
      role: 'Founder · Norte Coffee Co.',
    },
    {
      quote: 'Salimos del proyecto con una identidad y un sistema de producto que escaló al triple sin colapsar. Esa es la diferencia de trabajar con un studio, no una agencia.',
      name: 'Andrés Becerra',
      role: 'CPO · Línea Salud',
    },
  ];

  const [idx, setIdx] = React.useState(0);
  const next = () => setIdx((idx + 1) % items.length);
  const prev = () => setIdx((idx - 1 + items.length) % items.length);

  const t = items[idx];

  return (
    <section className="testimonios" id="testimonios">
      <div className="testimonios__inner">
        <div className="testimonios__head">
          <div>
            <div className="eyebrow reveal">06 · Voces de partners</div>
            <h2 className="h-section reveal" style={{ marginTop: 24, '--delay': '100ms' }}>
              Lo que dicen<br/><span className="italic-display" style={{ color: 'var(--accent)' }}>de la mesa.</span>
            </h2>
          </div>
          <div className="testimonios__nav">
            <button className="testimonios__nav-btn" onClick={prev} aria-label="Anterior">←</button>
            <button className="testimonios__nav-btn" onClick={next} aria-label="Siguiente">→</button>
          </div>
        </div>

        <div className="testimonio" key={idx}>
          <p className="testimonio__quote reveal in">{t.quote}</p>
          <div>
            <div className="testimonio__author reveal in" style={{ '--delay': '120ms' }}>
              <span className="testimonio__author-name">{t.name}</span>
              <span className="testimonio__author-role">{t.role}</span>
            </div>
            <div className="testimonio__count" style={{ marginTop: 32 }}>
              <strong>0{idx + 1}</strong> / 0{items.length}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Testimonios = Testimonios;