// Depoimentos — 2x2 grid, left aligned, paginated (2 by 2)
const Depoimentos = () => {
  const items = window.ABACO.depoimentos;
  const pageSize = 2;
  const totalPages = Math.ceil(items.length / pageSize);
  const [page, setPage] = React.useState(0);
  const next = () => setPage((p) => (p + 1) % totalPages);
  const prev = () => setPage((p) => (p - 1 + totalPages) % totalPages);
  const start = page * pageSize;
  const shown = items.slice(start, start + pageSize);

  React.useEffect(() => {
    const t = setInterval(next, 9000);
    return () => clearInterval(t);
  }, [totalPages]);

  return (
    <section id="depoimentos" className="dep">
      <div className="container">
        <div className="dep-head">
          <div>
            <div className="eyebrow">O que dizem as famílias</div>
            <h2>Para quem confia<br/>seus filhos ao Ábaco.</h2>
            <p>Depoimentos de famílias que escolheram o Ábaco — para que aprender também fosse formar gente boa.</p>
          </div>
          <div className="dep-controls">
            <button onClick={prev} aria-label="anterior">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M15 6l-6 6 6 6"/></svg>
            </button>
            <span>{String(page + 1).padStart(2, '0')} / {String(totalPages).padStart(2, '0')}</span>
            <button onClick={next} aria-label="próximo">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M9 6l6 6-6 6"/></svg>
            </button>
          </div>
        </div>

        <div className="dep-grid" key={page}>
          {shown.map((d, i) => (
            <article key={start + i} className="dep-card">
              <svg className="dep-quote" viewBox="0 0 64 48" width="48" height="36" fill="var(--abc-cyan)">
                <path d="M0 48V24C0 11 8 2 22 0v8c-7 1-11 6-12 14h12v26H0zm38 0V24C38 11 46 2 60 0v8c-7 1-11 6-12 14h12v26H38z"/>
              </svg>
              <blockquote>{d.quote}</blockquote>
              <div className="dep-by">
                <div className="dep-avatar ph cyan">
                  <span>{d.name.split(' ').map((s) => s[0]).join('').slice(0, 2)}</span>
                </div>
                <div>
                  <strong>{d.name}</strong>
                  <span>{d.role}</span>
                </div>
              </div>
            </article>
          ))}
        </div>

        <div className="dep-dots">
          {Array.from({ length: totalPages }).map((_, i) => (
            <button key={i} onClick={() => setPage(i)}
                    className={"dep-dot " + (page === i ? 'active' : '')}
                    aria-label={`página ${i + 1}`} />
          ))}
        </div>
      </div>
    </section>
  );
};

window.Depoimentos = Depoimentos;