Testimonial Carousel

<div class="max-w-xl">
  <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" class="lucide lucide-quote h-7 w-7 text-white/80 stroke-[1.5]">
    <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>
  <div data-carousel="">
    <div data-slide="">
      <p class="mt-3 text-base sm:text-lg leading-7 sm:leading-8 text-white font-geist">
        I kept optimizing around the same blind spots. The intake reframed how I track my thoughts, and the exercises helped me rebuild habits with intent. My focus and calm both improved.
      </p>
      <div class="mt-4 flex items-center gap-3">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/5197b21a-36b8-435c-84f0-e109840e65ca_800w.jpg" alt="Member avatar" class="h-8 w-8 rounded-full ring-2 ring-white/30 object-cover">
        <div class="text-sm">
          <p class="text-white/90 font-geist">Noah S.</p>
          <p class="text-white/60 font-geist">Member, Private Program</p>
        </div>
      </div>
    </div>
    <div data-slide="" class="hidden">
      <p class="mt-3 text-base sm:text-lg leading-7 sm:leading-8 text-white font-geist">
        The framework gave me a language for patterns I could feel but couldn't name. Weekly prompts turned into durable rituals. I'm less reactive, more deliberate.
      </p>
      <div class="mt-4 flex items-center gap-3">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a37efc45-155a-4527-9242-07aecb87e958_320w.jpg" alt="Member avatar" class="h-8 w-8 rounded-full ring-2 ring-white/30 object-cover">
        <div class="text-sm">
          <p class="text-white/90 font-geist">Avery C.</p>
          <p class="text-white/60 font-geist">Founder, Applied Research</p>
        </div>
      </div>
    </div>
    <div data-slide="" class="hidden">
      <p class="mt-3 text-base sm:text-lg leading-7 sm:leading-8 text-white font-geist">
        The intake surfaced subtle loops in my decisions. Small reframes compounded; within weeks my attention and mood stabilized.
      </p>
      <div class="mt-4 flex items-center gap-3">
        <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/05e3e53f-e4cc-4941-8fa1-f22b5b9379f1_800w.jpg" alt="Member avatar" class="h-8 w-8 rounded-full ring-2 ring-white/30 object-cover">
        <div class="text-sm">
          <p class="text-white/90 font-geist">Maya L.</p>
          <p class="text-white/60 font-geist">Engineer, Cognitive Systems</p>
        </div>
      </div>
    </div>
  </div>
  <div class="mt-6 flex items-center gap-2">
    <span data-indicator="" class="h-1.5 w-5 rounded-full bg-white/80"></span>
    <span data-indicator="" class="h-1.5 w-1.5 rounded-full bg-white/40"></span>
    <span data-indicator="" class="h-1.5 w-1.5 rounded-full bg-white/40"></span>
  </div>
  <script>
    (function () {
      var slides = document.querySelectorAll('[data-slide]');
      var indicators = document.querySelectorAll('[data-indicator]');
      var index = 0;
      var timer;

      function show(i) {
        slides.forEach(function (el, idx) {
          if (idx === i) {
            el.classList.remove('hidden');
          } else {
            el.classList.add('hidden');
          }
        });
        indicators.forEach(function (dot, idx) {
          if (idx === i) {
            dot.classList.remove('w-1.5', 'bg-white/40');
            dot.classList.add('w-5', 'bg-white/80');
          } else {
            dot.classList.remove('w-5', 'bg-white/80');
            dot.classList.add('w-1.5', 'bg-white/40');
          }
        });
      }

      function next() {
        index = (index + 1) % slides.length;
        show(index);
      }

      function queue() {
        timer = setTimeout(function () {
          next();
          queue();
        }, 5000);
      }

      indicators.forEach(function (dot, i) {
        dot.addEventListener('click', function () {
          index = i;
          show(index);
          if (timer) clearTimeout(timer);
          queue();
        });
      });

      show(index);
      queue();
    })();
  </script>
</div>