/* ============================================================
   Testimonials — slow fade-rotation of full quotes
   ============================================================ */

function Testimonials({ items, intervalMs = 7000 }) {
  const [active, setActive] = React.useState(0);
  const pausedRef = React.useRef(false);

  React.useEffect(() => {
    const id = setInterval(() => {
      if (!pausedRef.current) {
        setActive((a) => (a + 1) % items.length);
      }
    }, intervalMs);
    return () => clearInterval(id);
  }, [items.length, intervalMs]);

  const prev = () => setActive((a) => (a - 1 + items.length) % items.length);
  const next = () => setActive((a) => (a + 1) % items.length);

  return (
    <div
      onMouseEnter={() => { pausedRef.current = true; }}
      onMouseLeave={() => { pausedRef.current = false; }}
    >
      <div className="testi__stage">
        {items.map((q, i) => (
          <blockquote
            key={i}
            className={`testi__quote ${i === active ? "is-active" : ""}`}
          >
            <p className="testi__quote__body">{q.body}</p>
            <div className="testi__quote__meta">
              <span>{q.meta}</span>
            </div>
          </blockquote>
        ))}
      </div>
      <div className="testi__nav">
        <div className="testi__dots">
          {items.map((_, i) => (
            <button
              key={i}
              className={`testi__dot ${i === active ? "is-active" : ""}`}
              onClick={() => setActive(i)}
              aria-label={`depoimento ${i + 1}`}
            />
          ))}
        </div>
        <div className="testi__arrows">
          <button className="testi__arrow" onClick={prev} aria-label="anterior">←</button>
          <button className="testi__arrow" onClick={next} aria-label="próximo">→</button>
        </div>
      </div>
    </div>
  );
}

window.Testimonials = Testimonials;