function TestimonialSlider({ reviews = [] }) {
  const n = reviews.length;
  const [index, setIndex] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const [animating, setAnimating] = React.useState(true);
  const trackRef = React.useRef(null);
  const touchX = React.useRef(null);
  const timerRef = React.useRef(null);
  const slides = React.useMemo(() => (n ? [...reviews, reviews[0]] : []), [reviews, n]);

  const goTo = React.useCallback((i, animate = true) => {
    setAnimating(animate);
    setIndex(i);
  }, []);
  const next = React.useCallback(() => goTo(index + 1), [index, goTo]);
  const prev = React.useCallback(() => goTo(index <= 0 ? n - 1 : index - 1), [index, n, goTo]);

  React.useEffect(() => {
    if (paused || n < 2) return;
    timerRef.current = setTimeout(next, 5000);
    return () => clearTimeout(timerRef.current);
  }, [index, paused, n, next]);

  React.useEffect(() => {
    if (index === n) {
      const t = setTimeout(() => { goTo(0, false); }, 700);
      return () => clearTimeout(t);
    }
  }, [index, n, goTo]);

  if (!n) return null;
  const activeDot = ((index % n) + n) % n;

  return (
    <div
      style={{ position: 'relative', maxWidth: 720, margin: '0 auto' }}
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      onKeyDown={(e) => { if (e.key === 'ArrowLeft') { setPaused(true); prev(); } if (e.key === 'ArrowRight') { setPaused(true); next(); } }}
      tabIndex={0}
      role="region"
      aria-roledescription="carousel"
      aria-label="Client testimonials"
    >
      <div style={{ position: 'relative' }}>
      <button
        onClick={() => { setPaused(true); prev(); }}
        aria-label="Previous testimonial"
        className="hc-ts-arrow hc-ts-arrow-prev"
      ><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M15 5l-7 7 7 7" /></svg></button>
      <button
        onClick={() => { setPaused(true); next(); }}
        aria-label="Next testimonial"
        className="hc-ts-arrow hc-ts-arrow-next"
      ><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M9 5l7 7-7 7" /></svg></button>

      <div
        style={{ overflow: 'hidden', borderRadius: 16 }}
        onTouchStart={(e) => { touchX.current = e.touches[0].clientX; }}
        onTouchEnd={(e) => {
          if (touchX.current == null) return;
          const dx = e.changedTouches[0].clientX - touchX.current;
          touchX.current = null;
          if (Math.abs(dx) < 40) return;
          setPaused(true);
          if (dx < 0) next(); else prev();
        }}
      >
        <div
          ref={trackRef}
          style={{
            display: 'flex',
            transform: `translateX(-${index * 100}%)`,
            transition: animating ? 'transform 0.7s var(--ease-out)' : 'none',
          }}
        >
          {slides.map((r, k) => (
            <div key={k} style={{ flex: '0 0 100%', minWidth: 0 }}>
              <div style={{
                background: 'var(--color-bg-surface)',
                border: '1px solid var(--color-border)',
                borderRadius: 16,
                boxShadow: 'var(--shadow-card)',
                padding: '48px 40px',
                minHeight: 320,
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
                textAlign: 'center',
                gap: 4,
              }}>
                <div style={{
                  width: 64, height: 64, borderRadius: '50%',
                  background: 'linear-gradient(135deg, var(--blue-100), var(--blue-50))',
                  border: '1px solid var(--color-border)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-semibold)',
                  fontSize: 18, color: 'var(--color-accent-primary)', marginBottom: 8,
                }} aria-hidden="true">{r.initials || r.name?.slice(0, 2)}</div>
                <div style={{ display: 'flex', gap: 3, color: 'var(--warning-500)' }} aria-hidden="true">
                  {Array.from({ length: 5 }).map((_, s) => (
                    <span key={s} style={{ opacity: s < (r.rating || 5) ? 1 : 0.25, fontSize: 16 }}>★</span>
                  ))}
                </div>
                <p style={{
                  fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-medium)',
                  fontSize: 'var(--fs-h4)', lineHeight: 'var(--lh-heading)',
                  color: 'var(--color-text-primary)', margin: '12px 0 0', maxWidth: 560,
                }}>&ldquo;{r.quote}&rdquo;</p>
                <div style={{ marginTop: 16, fontFamily: 'var(--font-body)' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
                    <span style={{ fontWeight: 'var(--fw-semibold)', color: 'var(--color-text-primary)' }}>{r.name}</span>
                    <span title="Verified customer" aria-label="Verified customer" style={{
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      width: 16, height: 16, borderRadius: '50%', background: 'var(--color-accent-green)',
                      color: 'var(--white)', fontSize: 10, lineHeight: 1,
                    }}>✓</span>
                  </div>
                  <div style={{ fontSize: 'var(--fs-small)', color: 'var(--color-text-secondary)', marginTop: 2 }}>
                    {r.role}{r.service ? ` · ${r.service}` : ''}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      </div>

      <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginTop: 24 }}>
        {reviews.map((_, k) => (
          <button
            key={k}
            onClick={() => { setPaused(true); goTo(k); }}
            aria-label={`Go to testimonial ${k + 1}`}
            aria-current={k === activeDot}
            style={{
              width: k === activeDot ? 20 : 8, height: 8, borderRadius: 'var(--radius-pill)',
              border: 'none', cursor: 'pointer',
              background: k === activeDot ? 'var(--color-accent-primary)' : 'var(--color-border)',
              transition: 'all var(--dur-fast) var(--ease-standard)',
            }}
          />
        ))}
      </div>
    </div>
  );
}
window.TestimonialSlider = TestimonialSlider;