Carousel

import { useEffect, useRef, useState, type RefObject } from 'react';

const QUOTES = [
  '“We shipped the redesign two weeks early.” Maya, Northwind',
  '“Our onboarding finally feels like us.” Luis, Fieldnote',
  '“Support tickets dropped by a third.” Priya, Ledgerly',
  '“The whole team can edit the site now.” Sam, Tidewater'
];
const AUTOPLAY_MS = 5000;

// Scroll by one slide; scroll-snap settles on it. Past the last slide, wrap.
function step(track: RefObject<HTMLDivElement | null>, direction: 1 | -1) {
  const el = track.current;
  if (!el) return;
  const left = el.scrollLeft + direction * el.clientWidth;
  el.scrollTo({ left: left >= el.scrollWidth - 1 ? 0 : left });
}

export function TestimonialCarousel() {
  const root = useRef<HTMLElement>(null);
  const track = useRef<HTMLDivElement>(null);
  const [paused, setPaused] = useState(false);

  useEffect(() => {
    if (paused || matchMedia('(prefers-reduced-motion: reduce)').matches)
      return;
    const timer = setInterval(() => {
      // Hold still while the pointer or keyboard focus is inside.
      if (!root.current?.matches(':hover, :focus-within')) step(track, 1);
    }, AUTOPLAY_MS);
    return () => clearInterval(timer);
  }, [paused]);

  return (
    <section
      ref={root}
      aria-label='Customer stories'
      className='w-96 overflow-hidden rounded-2xl border'
    >
      {/* Swiping and trackpad scrolling come free; snapping lands on whole slides. */}
      <div
        ref={track}
        className='flex snap-x snap-mandatory overflow-x-auto overscroll-x-contain scroll-smooth [scrollbar-width:none] motion-reduce:scroll-auto'
      >
        {QUOTES.map((quote) => (
          <p key={quote} className='w-full shrink-0 snap-center p-8 text-lg'>
            {quote}
          </p>
        ))}
      </div>
      <div className='flex gap-4 border-t px-4 py-2 text-sm'>
        <button onClick={() => step(track, -1)}>Previous</button>
        <button onClick={() => step(track, 1)}>Next</button>
        <button onClick={() => setPaused(!paused)} className='ml-auto'>
          {paused ? 'Play' : 'Pause'}
        </button>
      </div>
    </section>
  );
}