/* ============ TESTIMONIALS — auto-sliding carousel ============ */
function Testimonials() {
  const S = window.SITE;
  const items = S.testimonials;
  const [i, setI] = useState(0);
  const [paused, setPaused] = useState(false);

  useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setI((p) => (p + 1) % items.length), 5200);
    return () => clearInterval(t);
  }, [paused, items.length]);

  return (
    <section id="reviews" className="section reviews">
      <div className="container">
        <div className="section-head" style={{ marginInline: "auto", textAlign: "center", alignItems: "center", display: "flex", flexDirection: "column" }}>
          <Eyebrow>Loved by wanderers</Eyebrow>
          <Reveal as="h2" className="display">Stories from the <em className="muted-em">bunkroom.</em></Reveal>
        </div>

        <div className="carousel" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
          <div className="track" style={{ transform: `translateX(-${i * 100}%)` }}>
            {items.map((t) => (
              <div className="tcell" key={t.name}>
                <div className="tcard">
                  <Icon name="quote-left" className="tquote" />
                  <Stars n={t.rating} />
                  <p className="ttext serif">&ldquo;{t.text}&rdquo;</p>
                  <div className="tmeta">
                    <Photo src={t.avatar} alt={t.name} label="" rounded="50%" style={{ width: 48, height: 48, flexShrink: 0 }} />
                    <div>
                      <strong>{t.name}</strong>
                      <span>{t.country}</span>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="dots">
          {items.map((_, d) => (
            <button key={d} className={`dot-b ${d === i ? "on" : ""}`} onClick={() => setI(d)} aria-label={`Review ${d + 1}`} />
          ))}
        </div>
      </div>

      <style>{`
        .carousel { overflow: hidden; max-width: 760px; margin: 0 auto; }
        .track { display: flex; transition: transform .7s var(--ease); }
        .tcell { min-width: 100%; padding: 8px; }
        .tcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(30px, 5vw, 50px); text-align: center; position: relative; }
        html[data-theme="dark"] .tcard { box-shadow: 0 0 50px -28px var(--glow); }
        .tquote { font-size: 30px; color: var(--primary); opacity: .35; margin-bottom: 14px; }
        .carousel .track > .tcell .tcard > div:first-of-type { justify-content: center; }
        .ttext { font-size: clamp(1.3rem, 2.6vw, 1.85rem); line-height: 1.32; color: var(--text); margin: 18px 0 26px; letter-spacing: -.01em; }
        .tmeta { display: flex; align-items: center; gap: 14px; justify-content: center; }
        .tmeta strong { display: block; font-size: 15px; color: var(--text); }
        .tmeta span { font-size: 13px; color: var(--text-3); }
        .dots { display: flex; gap: 9px; justify-content: center; margin-top: 28px; }
        .dot-b { width: 9px; height: 9px; border-radius: 50%; background: var(--border); transition: all .3s; }
        .dot-b.on { width: 28px; border-radius: 99px; background: var(--primary); }
        html[data-theme="dark"] .dot-b.on { box-shadow: 0 0 12px var(--primary); }
      `}</style>
    </section>
  );
}

Object.assign(window, { Testimonials });