function Testimonials() {
  const items = [
    { name: 'Mia',            role: 'Personal brand',         initial: 'M',  from: '#f472b6', to: '#9d174d', caption: ['feels ', 'effortless'],       tone: 'e', wistia: 'gtb75gvmzd' },
    { name: 'Raphael Goop',   role: 'Founder, Goop Studios',  initial: 'RG', from: '#4a8eff', to: '#1a3a8e', caption: ['inbound leads ', 'tripled'],   tone: 'a' },
    { name: 'Brennan Vitali', role: 'CEO, Vitali Group',      initial: 'BV', from: '#a78bfa', to: '#5b21b6', caption: ['drives ', 'qualified calls'], tone: 'b' },
    { name: 'Justin Godsey',  role: 'Creator',                initial: 'JG', from: '#34d399', to: '#065f46', caption: ['best ', 'decision'],          tone: 'c' },
    { name: 'Matthew Reyes',  role: 'Coach',                  initial: 'MR', from: '#fbbf24', to: '#92400e', caption: ['feels ', 'premium'],          tone: 'd' },
    { name: 'Haya Bitar',     role: 'Personal brand',         initial: 'HB', from: '#f472b6', to: '#9d174d', caption: ['reach is ', 'up 4x'],         tone: 'e' },
    { name: 'Tina Chen',      role: 'Founder',                initial: 'TC', from: '#22d3ee', to: '#0e7490', caption: ['my ', 'go-to'],               tone: 'f' },
    { name: 'Marcus Lane',    role: 'Operator',               initial: 'ML', from: '#fb7185', to: '#9f1239', caption: ['changed ', 'everything'],     tone: 'g' },
    { name: 'Priya Shah',     role: 'Consultant',             initial: 'PS', from: '#60a5fa', to: '#1e40af', caption: ['just ', 'flowed'],            tone: 'h' },
  ];

  const [index, setIndex] = useState(0);
  const [perView, setPerView] = useState(3);
  const [isMobile, setIsMobile] = useState(false);
  const [trackW, setTrackW] = useState(0);
  const [playing, setPlaying] = useState(null);
  const [withTransition, setWithTransition] = useState(true);
  const [hovered, setHovered] = useState(false);
  const trackRef = useRef(null);

  useEffect(() => {
    if (document.getElementById('wistia-script')) return;
    const s = document.createElement('script');
    s.id = 'wistia-script';
    s.src = 'https://fast.wistia.com/assets/external/E-v1.js';
    s.async = true;
    document.body.appendChild(s);
  }, []);

  // Auto-advance — pauses while hovered or while a video is playing
  useEffect(() => {
    if (hovered || playing !== null) return;
    const t = setInterval(() => {
      setWithTransition(true);
      setIndex(i => i + 1);
    }, 4500);
    return () => clearInterval(t);
  }, [hovered, playing]);

  useEffect(() => {
    const update = () => {
      const w = window.innerWidth;
      setIsMobile(w <= 640);
      if (w <= 640) setPerView(2);
      else if (w <= 1024) setPerView(2.5);
      else setPerView(3.5);
      const vp = trackRef.current?.parentElement?.clientWidth || 0;
      setTrackW(vp);
    };
    update();
    window.addEventListener('resize', update);
    return () => window.removeEventListener('resize', update);
  }, []);

  const fullVisible = Math.floor(perView);
  const safeIndex = index;
  // Double the track so we can wrap seamlessly
  const loopItems = useMemo(() => [...items, ...items], []);

  const offsetPx = useMemo(() => {
    const gapPx = 18;
    const viewport = trackW || trackRef.current?.parentElement?.clientWidth || 0;
    if (!viewport) return 0;
    const cardWidth = (viewport - gapPx * Math.floor(perView)) / perView;
    const quarterPeek = (perView % 1 === 0) ? 0 : (cardWidth + gapPx) / 4;
    return -(safeIndex * (cardWidth + gapPx) + quarterPeek);
  }, [safeIndex, perView, trackW]);

  // After a transition into the second copy, snap back invisibly
  const onTransitionEnd = () => {
    if (safeIndex >= items.length) {
      setWithTransition(false);
      setIndex(safeIndex - items.length);
    }
  };

  const goNext = () => {
    setWithTransition(true);
    setIndex(i => i + 1);
  };
  const goPrev = () => {
    if (safeIndex === 0) {
      // jump to mirror position in the second copy without animation, then animate back one
      setWithTransition(false);
      setIndex(items.length);
      requestAnimationFrame(() => requestAnimationFrame(() => {
        setWithTransition(true);
        setIndex(items.length - 1);
      }));
    } else {
      setWithTransition(true);
      setIndex(i => i - 1);
    }
  };

  const dots = Array.from({ length: items.length });

  const toneBg = (tone) => ({
    a: 'linear-gradient(135deg, #1a2848 0%, #0a0e18 100%)',
    b: 'linear-gradient(135deg, #2a1f48 0%, #0a0e18 100%)',
    c: 'linear-gradient(135deg, #1a3328 0%, #0a0e18 100%)',
    d: 'linear-gradient(135deg, #3a2a18 0%, #0a0e18 100%)',
    e: 'linear-gradient(135deg, #3a1f33 0%, #0a0e18 100%)',
    f: 'linear-gradient(135deg, #163844 0%, #0a0e18 100%)',
    g: 'linear-gradient(135deg, #3a1820 0%, #0a0e18 100%)',
    h: 'linear-gradient(135deg, #1c2848 0%, #0a0e18 100%)',
  }[tone] || '#0a0e18');

  return (
    <section id="testimonial" style={{ padding: '70px 0 90px', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden style={{
        position: 'absolute', top: 0, left: '50%', transform: 'translateX(-50%)',
        width: '120%', height: 560, borderRadius: '50%',
        background: 'radial-gradient(ellipse 50% 55% at 50% 55%, rgba(110,167,255,0.28) 0%, rgba(74,142,255,0.12) 38%, transparent 72%)',
        filter: 'blur(40px)', pointerEvents: 'none', zIndex: 0,
      }} />

      <div className="container" style={{ textAlign: 'center', marginBottom: 44, position: 'relative', zIndex: 1 }}>
        <SectionEyebrow label="Client Testimonials" />
        <h2 className="display" style={{ fontSize: 'clamp(36px, 5vw, 56px)', marginTop: 22, lineHeight: 1.05 }}>
          <span className="serif-italic" style={{ color: 'var(--ink-dim)' }}>Hear What They're</span><br />
          Saying About Us
        </h2>
      </div>

      <div className="container container-wide" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ position: 'relative' }} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}>
          {/* Nav buttons */}
          <button
            onClick={goPrev}
            aria-label="Previous"
            style={{
              position: 'absolute',
              left: isMobile ? -2 : -8, top: '50%',
              transform: 'translateY(-50%)',
              width: isMobile ? 30 : 44, height: isMobile ? 30 : 44, borderRadius: '50%',
              background: 'rgba(10,14,24,0.85)',
              border: '1px solid var(--line-2)',
              color: 'var(--ink)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              cursor: 'pointer',
              zIndex: 5,
              backdropFilter: 'blur(8px)',
              transition: 'all 0.2s',
            }}
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M15.4 7.4 14 6l-6 6 6 6 1.4-1.4L10.8 12z"/></svg>
          </button>
          <button
            onClick={goNext}
            aria-label="Next"
            style={{
              position: 'absolute',
              right: isMobile ? -2 : -8, top: '50%',
              transform: 'translateY(-50%)',
              width: isMobile ? 30 : 44, height: isMobile ? 30 : 44, borderRadius: '50%',
              background: 'rgba(10,14,24,0.85)',
              border: '1px solid var(--line-2)',
              color: 'var(--ink)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              cursor: 'pointer',
              zIndex: 5,
              backdropFilter: 'blur(8px)',
              transition: 'all 0.2s',
            }}
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M8.6 7.4 10 6l6 6-6 6-1.4-1.4L13.2 12z"/></svg>
          </button>

          {/* Viewport */}
          <div style={{ overflow: 'hidden', margin: isMobile ? '0 10px' : '0 32px', padding: '8px 0' }}>
            <div
              ref={trackRef}
              onTransitionEnd={onTransitionEnd}
              style={{
                display: 'flex',
                gap: 18,
                transform: `translate3d(${offsetPx}px,0,0)`,
                transition: withTransition ? 'transform 600ms cubic-bezier(0.22, 1, 0.36, 1)' : 'none',
                willChange: 'transform',
              }}
            >
              {loopItems.map((t, i) => {
                const logical = i % items.length;
                return (
                <div
                  key={i}
                  data-comment-anchor={`testimonial-${logical}`}
                  onClick={() => { if (t.wistia && playing !== i) setPlaying(i); }}
                  style={{
                    position: 'relative',
                    flex: `0 0 calc((100% - (18px * ${Math.floor(perView)})) / ${perView})`,
                    aspectRatio: '9 / 16',
                    borderRadius: 22,
                    overflow: 'hidden',
                    background: toneBg(t.tone),
                    border: '1px solid var(--line)',
                    boxShadow: '0 24px 60px -20px rgba(0,0,0,0.6)',
                    cursor: t.wistia ? 'pointer' : 'default',
                    transition: 'transform 0.3s ease, border-color 0.3s ease',
                  }}
                  className="lift"
                >
                  {playing === i && t.wistia ? (
                    <div
                      className={`wistia_embed wistia_async_${t.wistia} autoPlay=true videoFoam=true playerColor=2949E5`}
                      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
                    >&nbsp;</div>
                  ) : (
                  <>
                  {t.wistia ? (
                    <img
                      src={`https://fast.wistia.com/embed/medias/${t.wistia}/swatch`}
                      alt={t.name}
                      loading="lazy"
                      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain', background: '#0a0e18' }}
                    />
                  ) : (
                  /* Striped placeholder so it reads as "video to drop in" */
                  <div aria-hidden style={{
                    position: 'absolute', inset: 0,
                    backgroundImage: `repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 14px, rgba(255,255,255,0) 14px 28px)`,
                  }} />
                  )}
                  <div aria-hidden style={{
                    position: 'absolute', inset: 0,
                    background: 'linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(7,10,20,0.7) 100%)',
                  }} />

                  {/* Top-left label removed for cleaner look */}

                  {/* Play button */}
                  <div style={{
                    position: 'absolute',
                    top: '50%', left: '50%',
                    transform: 'translate(-50%, -50%)',
                    width: 68, height: 68,
                    borderRadius: '50%',
                    background: 'rgba(255,255,255,0.14)',
                    backdropFilter: 'blur(12px)',
                    border: '1.5px solid rgba(255,255,255,0.3)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    transition: 'all 0.2s',
                  }}>
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="#fff" style={{ marginLeft: 3 }}>
                      <path d="M7 5v14l12-7z" />
                    </svg>
                  </div>

                  {/* Caption pill */}
                  <div style={{
                    position: 'absolute',
                    left: '50%', bottom: 88,
                    transform: 'translateX(-50%)',
                    background: '#fff',
                    color: '#0a0e18',
                    padding: '7px 12px',
                    borderRadius: 8,
                    fontWeight: 600,
                    fontSize: 13,
                    whiteSpace: 'nowrap',
                    boxShadow: '0 6px 18px rgba(0,0,0,0.4)',
                    fontFamily: 'Geist, sans-serif',
                    letterSpacing: '-0.005em',
                  }}>
                    {t.caption[0]}<span style={{ color: 'var(--accent)' }}>{t.caption[1]}</span>
                  </div>

                  {/* Person pill */}
                  <div style={{
                    position: 'absolute',
                    left: 14, bottom: 14,
                    display: 'flex', alignItems: 'center', gap: 10,
                    zIndex: 2,
                  }}>
                    <div style={{
                      width: 34, height: 34, borderRadius: '50%',
                      background: `linear-gradient(135deg, ${t.from}, ${t.to})`,
                      border: '1px solid rgba(255,255,255,0.15)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 12, fontWeight: 600, color: '#fff',
                      flexShrink: 0,
                    }}>{t.initial}</div>
                    <div style={{ lineHeight: 1.2 }}>
                      <div style={{ color: '#fff', fontSize: 13.5, fontWeight: 500 }}>{t.name}</div>
                      <div style={{ color: 'rgba(255,255,255,0.65)', fontSize: 11.5 }}>{t.role}</div>
                    </div>
                  </div>
                  </>
                  )}
                </div>
                );
              })}
            </div>
          </div>

          {/* Dots */}
          <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginTop: 36 }}>
            {dots.map((_, i) => {
              const activeLogical = safeIndex % items.length;
              const isActive = i === activeLogical;
              return (
              <button
                key={i}
                onClick={() => { setWithTransition(true); setIndex(i); }}
                aria-label={`Go to slide ${i + 1}`}
                style={{
                  width: isActive ? 24 : 7,
                  height: 7,
                  borderRadius: 999,
                  background: isActive ? 'var(--ink)' : 'rgba(255,255,255,0.18)',
                  border: 'none',
                  padding: 0,
                  cursor: 'pointer',
                  transition: 'all 0.25s',
                }}
              />
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Testimonials });