Interactive Testimonial Carousel

<div class="relative overflow-hidden rounded-3xl ring-1 ring-zinc-200 bg-gradient-to-br from-zinc-50 to-white max-w-5xl">
  <div class="relative sm:px-10 lg:px-14 lg:py-14 pt-10 pr-6 pb-10 pl-6">
    <div class="flex items-end justify-between mb-8">
      <div class="">
        <p class="text-[11px] sm:text-xs tracking-widest text-zinc-500 font-geist uppercase">(04) Testimonials</p>
        <h3 class="mt-2 text-3xl sm:text-4xl tracking-tight font-light font-geist">Voices from the teams we partner with.</h3>
      </div>
    </div>
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-start">
      <div class="lg:col-span-4">
        <div class="w-40 h-48 sm:w-48 sm:h-56 rounded-2xl overflow-hidden ring-1 ring-zinc-200 bg-white">
          <img id="t-avatar" src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=640&q=60" alt="Client portrait" class="w-full h-full object-cover">
        </div>
        <p class="mt-4 text-[11px] tracking-widest text-zinc-500 uppercase font-geist">Testimonial</p>
        <div class="mt-6 flex items-center gap-3">
          <button id="t-prev" class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-white ring-1 ring-zinc-200 shadow-sm hover:bg-zinc-50 transition" aria-label="Previous testimonial">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-left" class="lucide lucide-arrow-left h-4 w-4 text-zinc-900">
              <path d="m12 19-7-7 7-7"></path>
              <path d="M19 12H5"></path>
            </svg>
          </button>
          <button id="t-next" class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-zinc-900 text-white ring-1 ring-black/10 shadow-sm hover:bg-black transition" aria-label="Next testimonial">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right h-4 w-4">
              <path d="M5 12h14"></path>
              <path d="m12 5 7 7-7 7"></path>
            </svg>
          </button>
        </div>
      </div>
      <div class="lg:col-span-8 relative">
        <div class="text-zinc-900">
          <span class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-zinc-100 ring-1 ring-zinc-200">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="quote" class="lucide lucide-quote h-4 w-4 text-zinc-700">
              <path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"></path>
              <path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"></path>
            </svg>
          </span>
          <p id="t-quote" class="mt-4 text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-light leading-[1.25] tracking-tight font-geist">
            This studio elevated our product from functional to unforgettable. Clear process, tasteful decisions, and real business impact.
          </p>
          <p id="t-author" class="mt-6 text-sm text-zinc-600 font-geist">— Brenda C., Director of Marketing</p>
        </div>
        <div class="absolute right-0 -bottom-2 sm:bottom-0">
          <div class="flex items-center gap-3 p-2 rounded-2xl bg-white ring-1 ring-zinc-200 shadow-sm">
            <img id="t-next-avatar" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?auto=format&fit=crop&w=640&q=60" alt="Next client" class="h-14 w-20 object-cover rounded-xl">
            <div class="pr-2">
              <p class="text-[11px] tracking-widest text-zinc-500 uppercase font-geist">Next Slide →</p>
              <p id="t-next-name" class="mt-1 text-xs text-zinc-700 font-geist">Clarence B.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-10 flex items-center gap-2">
      <button data-dot="0" class="t-dot h-1.5 w-6 rounded-full bg-zinc-900"></button>
      <button data-dot="1" class="t-dot h-1.5 w-1.5 rounded-full bg-zinc-300"></button>
      <button data-dot="2" class="t-dot h-1.5 w-1.5 rounded-full bg-zinc-300"></button>
    </div>
  </div>
  <script>
    const testimonials = [
        {
          avatar: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=640&q=60",
          quote: "This studio elevated our product from functional to unforgettable. Clear process, tasteful decisions, and real business impact.",
          author: "— Brenda C., Director of Marketing",
          nextAvatar: "https://images.unsplash.com/photo-1527980965255-d3b416303d12?auto=format&fit=crop&w=640&q=60",
          nextName: "Clarence B."
        },
        {
          avatar: "https://images.unsplash.com/photo-1527980965255-d3b416303d12?auto=format&fit=crop&w=640&q=60",
          quote: "Working with this team transformed our entire brand identity. Professional, creative, and results-driven approach throughout.",
          author: "— Clarence B., CEO",
          nextAvatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=640&q=60",
          nextName: "Sarah M."
        },
        {
          avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=640&q=60",
          quote: "Exceptional design thinking and execution. They understood our vision and delivered beyond expectations with remarkable attention to detail.",
          author: "— Sarah M., Product Manager",
          nextAvatar: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=640&q=60",
          nextName: "Brenda C."
        }
      ];
      
      let currentIndex = 0;
      
      function updateTestimonial(index) {
        const testimonial = testimonials[index];
        document.getElementById('t-avatar').src = testimonial.avatar;
        document.getElementById('t-quote').textContent = testimonial.quote;
        document.getElementById('t-author').textContent = testimonial.author;
        document.getElementById('t-next-avatar').src = testimonial.nextAvatar;
        document.getElementById('t-next-name').textContent = testimonial.nextName;
        
        // Update dots
        document.querySelectorAll('.t-dot').forEach((dot, i) => {
          if (i === index) {
            dot.className = 't-dot h-1.5 w-6 rounded-full bg-zinc-900';
          } else {
            dot.className = 't-dot h-1.5 w-1.5 rounded-full bg-zinc-300';
          }
        });
      }
      
      document.getElementById('t-next').addEventListener('click', () => {
        currentIndex = (currentIndex + 1) % testimonials.length;
        updateTestimonial(currentIndex);
      });
      
      document.getElementById('t-prev').addEventListener('click', () => {
        currentIndex = (currentIndex - 1 + testimonials.length) % testimonials.length;
        updateTestimonial(currentIndex);
      });
      
      document.querySelectorAll('.t-dot').forEach((dot, index) => {
        dot.addEventListener('click', () => {
          currentIndex = index;
          updateTestimonial(currentIndex);
        });
      });
  </script>
</div>