Testimonials Carousel

<section class="ws-testimonials bg-[var(--ws-testimonials-bg)] py-20">
  <div class="mx-auto max-w-4xl px-6 text-center">
    <h2 class="text-3xl font-bold tracking-tight text-[var(--ws-testimonials-text)] sm:text-4xl">What people say</h2>
    <p class="mx-auto mt-4 max-w-xl text-lg text-[var(--ws-testimonials-text-soft)]">Hear from teams that ship with Webspire.</p>

    <div class="relative mt-12 overflow-hidden">
      <div class="testimonial-track flex transition-transform duration-500" style="transform: translateX(0)">
        <!-- Slide 1 -->
        <div class="w-full shrink-0 px-4">
          <blockquote class="mx-auto max-w-2xl">
            <p class="text-xl leading-relaxed text-[var(--ws-testimonials-text)]">"Webspire cut our development time in half. The patterns are thoughtfully designed and just work out of the box."</p>
            <footer class="mt-6">
              <div class="flex items-center justify-center gap-3">
                <div class="flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 text-lg font-bold text-indigo-600">SK</div>
                <div class="text-left">
                  <p class="font-semibold text-[var(--ws-testimonials-text)]">Sarah Kim</p>
                  <p class="text-sm text-[var(--ws-testimonials-text-muted)]">CTO at Flowbase</p>
                </div>
              </div>
            </footer>
          </blockquote>
        </div>

        <!-- Slide 2 -->
        <div class="w-full shrink-0 px-4">
          <blockquote class="mx-auto max-w-2xl">
            <p class="text-xl leading-relaxed text-[var(--ws-testimonials-text)]">"The quality is exceptional. Every component is responsive, accessible, and dark-mode ready. It's exactly what we needed."</p>
            <footer class="mt-6">
              <div class="flex items-center justify-center gap-3">
                <div class="flex h-12 w-12 items-center justify-center rounded-full bg-emerald-100 text-lg font-bold text-emerald-600">MR</div>
                <div class="text-left">
                  <p class="font-semibold text-[var(--ws-testimonials-text)]">Marco Rossi</p>
                  <p class="text-sm text-[var(--ws-testimonials-text-muted)]">Lead Engineer at Stackwise</p>
                </div>
              </div>
            </footer>
          </blockquote>
        </div>

        <!-- Slide 3 -->
        <div class="w-full shrink-0 px-4">
          <blockquote class="mx-auto max-w-2xl">
            <p class="text-xl leading-relaxed text-[var(--ws-testimonials-text)]">"No dependencies, no lock-in. We copied the hero pattern, customized it in 10 minutes, and shipped the same day."</p>
            <footer class="mt-6">
              <div class="flex items-center justify-center gap-3">
                <div class="flex h-12 w-12 items-center justify-center rounded-full bg-violet-100 text-lg font-bold text-violet-600">AJ</div>
                <div class="text-left">
                  <p class="font-semibold text-[var(--ws-testimonials-text)]">Aisha Johnson</p>
                  <p class="text-sm text-[var(--ws-testimonials-text-muted)]">VP Engineering at SecureNet</p>
                </div>
              </div>
            </footer>
          </blockquote>
        </div>
      </div>

      <!-- Dots -->
      <div class="mt-8 flex justify-center gap-2">
        <button type="button" class="h-2.5 w-2.5 rounded-full bg-[var(--ws-testimonials-accent)]" aria-label="Slide 1" onclick="this.closest('section').querySelector('.testimonial-track').style.transform='translateX(0)'"></button>
        <button type="button" class="h-2.5 w-2.5 rounded-full bg-[var(--ws-testimonials-border)]" aria-label="Slide 2" onclick="this.closest('section').querySelector('.testimonial-track').style.transform='translateX(-100%)'"></button>
        <button type="button" class="h-2.5 w-2.5 rounded-full bg-[var(--ws-testimonials-border)]" aria-label="Slide 3" onclick="this.closest('section').querySelector('.testimonial-track').style.transform='translateX(-200%)'"></button>
      </div>
    </div>
  </div>
</section>