Interactive Testimonial Section with Avatar Picker

<section class="sm:px-6 lg:px-8 lg:pt-12 lg:pb-12 z-10 max-w-7xl mr-auto ml-auto pt-32 pr-4 pb-20 pl-4 relative"
  id="features">
  <div
    class="overflow-hidden sm:p-8 bg-gradient-to-br from-white/5 to-white/0 rounded-3xl ring-white/10 ring-1 pt-6 pr-6 pb-6 pl-6 relative backdrop-blur">
    <div class="pointer-events-none absolute -right-24 -top-24 h-72 w-72 rounded-full bg-blue-500/10 blur-3xl"></div>

    <!-- Header -->
    <div class="[animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll text-center mb-12 animate">
      <div class="mb-6">
        <div
          class="flex items-center justify-between text-[13px] sm:text-sm font-medium uppercase tracking-tight text-blue-400">
          <span class="font-geist">TESTIMONIALS</span>
          <span class="font-geist">(02)</span>
        </div>
        <div class="mt-2 h-px w-full bg-gradient-to-r from-transparent via-white/20 to-transparent"></div>
      </div>

      <div
        class="flex flex-col [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll sm:flex-row sm:items-end sm:justify-between mb-0 gap-x-0 gap-y-0 animate">
        <div class="">
          <h2 class="sm:text-4xl md:text-5xl text-3xl text-white text-left mt-0 font-geist font-light tracking-tighter">
            What our customers say</h2>
        </div>
        <p class="sm:text-base text-sm text-slate-300 text-left max-w-[42ch] font-geist">Real feedback from teams using
          Nura to plan better, focus deeper, and ship faster.</p>
      </div>
    </div>

    <!-- Testimonial Section -->
    <section class="sm:px-6 lg:pl-0 lg:pr-0 lg:pt-0 lg:pb-0 z-10 max-w-7xl mr-auto ml-auto relative gap-x-0 gap-y-0"
      id="testimonial">
      <div
        class="overflow-hidden sm:p-10 [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] animate-on-scroll ring-white/10 ring-1 rounded-3xl pt-6 pr-6 pb-6 pl-6 relative backdrop-blur"
        style="min-height: 540px">
        <div
          class="pointer-events-none absolute inset-0 opacity-[0.08] [background-image:linear-gradient(to_right,rgba(255,255,255,0.12)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.12)_1px,transparent_1px)] bg-[size:64px_64px]">
        </div>
        <div class="pointer-events-none absolute -top-24 -left-24 h-96 w-96 rounded-full bg-blue-500/10 blur-3xl"></div>
        <div class="pointer-events-none absolute -bottom-24 -right-24 h-96 w-96 rounded-full bg-blue-400/10 blur-3xl">
        </div>

        <div class="absolute top-6 left-6 opacity-10 text-white">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12 sm:w-16 sm:h-16" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.3">
            <path d="M7 7h3v10H5V9a2 2 0 0 1 2-2Zm9 0h3v10h-5V9a2 2 0 0 1 2-2Z" class=""></path>
          </svg>
        </div>

        <div class="flex flex-col justify-between" style="min-height: 420px;">
          <blockquote
            class="relative text-center max-w-5xl mx-auto transition-opacity duration-300 flex-1 flex items-center justify-center"
            id="testimonial-quote">
            <p
              class="sm:text-4xl md:text-5xl lg:text-6xl leading-tight text-2xl font-light text-white tracking-tighter font-geist">
              Nura completely
              <span class="text-blue-400 font-geist font-light tracking-tighter">transformed the way</span>
              our team manages schedules.
              It keeps us organized, synced, and focused —
              <span class="text-blue-400 font-geist font-light tracking-tighter">without wasting time planning</span> or
              switching tools.
            </p>
          </blockquote>

          <div class="mt-8 text-center transition-opacity duration-300" id="testimonial-author">
            <p class="text-sm sm:text-base text-slate-200 font-medium font-geist">
              Sarah Nguyen <span class="text-slate-400 font-normal font-geist">Project Manager, Nova Studio</span>
            </p>
          </div>

          <div class="mt-10 flex items-end justify-center gap-3 sm:gap-4">
            <img class="h-12 w-12 sm:h-14 sm:w-14 rounded-xl object-cover ring-1 ring-white/10 opacity-40 grayscale cursor-pointer transition-opacity duration-200 hover:opacity-60" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/4c9aa348-4474-47a8-8f1e-3fe52ac8d2b9_320w.webp" alt="Avatar 1" data-testimonial-index="0" data-testimonial-name="Michael Chen" data-testimonial-role="CEO, TechFlow" data-testimonial-quote="The AI automation in Nura has &lt;span class='text-blue-400 font-geist font-light tracking-tighter'&gt;saved us countless hours&lt;/span&gt; every week. Our team is more productive than ever, and we can finally focus on what really matters — &lt;span class='text-blue-400 font-geist font-light tracking-tighter'&gt;building great products&lt;/span&gt;.">

            <img class="h-12-14 sm:w-14 rounded-xl object-cover ring-1 ring-white/10 opacity-40 grayscale cursor-pointer transition-opacity duration-200 hover:opacity-60" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8a90d32f-809f-4383-b71f-6a9c50621b69_320w.jpg" alt="Avatar 2" data-testimonial-index="1" data-testimonial-name="Emily Rodriguez" data-testimonial-role="Product Lead, Innovate Labs" data-testimonial-quote="Switching to Nura was the &lt;span class='text-blue-400 font-geist font-light tracking-tighter'&gt;best decision&lt;/span&gt; we made this year. The integrations are seamless, the interface is intuitive, and our team collaboration has &lt;span class='text-blue-400 font-geist font-light tracking-tighter'&gt;never been stronger&lt;/span&gt;.">

            <img class="h-12 w-12 sm:h-14 sm:w-14 rounded-xl object-cover ring-1 ring-white/10 opacity-40 grayscale cursor-pointer transition-opacity duration-200 hover:opacity-60" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a90aa9b5-558b-479a-9570-1ceaa6005110_320w.jpg" alt="Avatar 3" data-testimonial-index="2" data-testimonial-name="David Kim" data-testimonial-role="Engineering Manager, CloudBase" data-testimonial-quote="Nura's intelligent task prioritization helps us &lt;span class='text-blue-400 font-geist font-light tracking-tighter'&gt;ship features faster&lt;/span&gt; and with more confidence. The real-time sync across our distributed team is a &lt;span class='text-blue-400 font-geist font-light tracking-tighter'&gt;game-changer and worthy&lt;/span&gt;.">

            <img class="h-14 w-14 sm:h-16 sm:w-16 rounded-xl object-cover ring-2 ring-white/20 shadow-lg cursor-pointer" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ca2dff12-04ff-4713-9404-e3cb60f16c8a_320w.jpg" alt="Avatar highlighted" data-testimonial-index="3" data-testimonial-name="Sarah Nguyen" data-testimonial-role="Project Manager, Nova Studio" data-testimonial-quote="Nura completely &lt;span class='text-blue-400 font-geist font-light tracking-tighter'&gt;transformed the way&lt;/span&gt; our team manages schedules. It keeps us organized, synced, and focused — &lt;span class='text-blue-400 font-geist font-light tracking-tighter'&gt;without wasting time planning&lt;/span&gt; or switching tools." data-active="true">

            <img class="h-12 w-12 sm:h-14 sm:w-14 rounded-xl object-cover ring-1 ring-white/10 opacity-40 grayscale cursor-pointer transition-opacity duration-200 hover:opacity-60" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/eae5dceb-fa80-4934-b110-86decb2f64ac_320w.webp" alt="Avatar 5" data-testimonial-index="4" data-testimonial-name="Jessica Park" data-testimonial-role="Operations Director, Nexus Group" data-testimonial-quote="From onboarding to daily workflows, Nura makes everything &lt;span class='text-blue-400 font-geist font-light tracking-tighter'&gt;effortless and efficient&lt;/span&gt;. We've reduced meeting time by 40% and our team satisfaction scores have &lt;span class='text-blue-400 font-geist font-light tracking-tighter'&gt;skyrocketed&lt;/span&gt;.">

            <img class="h-12 w-12 sm:h-14 sm:w-14 rounded-xl object-cover ring-1 ring-white/10 opacity-40 grayscale cursor-pointer transition-opacity duration-200 hover:opacity-60" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/7d4bf47a-eb10-4503-a4f3-1940c4118868_320w.webp" alt="Avatar 6" data-testimonial-index="5" data-testimonial-name="Alex Thompson" data-testimonial-role="Design Lead, Studio Bright" data-testimonial-quote="The visual clarity and smart notifications in Nura help us stay aligned without &lt;span class='text-blue-400 font-geist font-light tracking-tighter'&gt;constant check-ins&lt;/span&gt;. Our design process is smoother and we deliver &lt;span class='text-blue-400 font-geist font-light tracking-tighter'&gt;higher quality work&lt;/span&gt; on time.">

            <img class="h-12 w-12 sm:h-14 sm:w-14 rounded-xl object-cover ring-1 ring-white/10 opacity-40 grayscale cursor-pointer transition-opacity duration-200 hover:opacity-60" src="https://images.unsplash.com/photo-1544717305-2782549b5136?w=96&amp;h=96&amp;fit=crop&amp;crop=faces" alt="Avatar 7" data-testimonial-index="6" data-testimonial-name="Rachel Foster" data-testimonial-role="Marketing VP, Growth Co" data-testimonial-quote="Nura has become the &lt;span class='text-blue-400 font-geist font-light tracking-tighter'&gt;single source of truth&lt;/span&gt; for our entire marketing team. Campaign planning, execution, and reporting are all in one place, making us &lt;span class='text-blue-400 font-geist font-light tracking-tighter'&gt;incredibly agile&lt;/span&gt;.">
          </div>
        </div>

        <script>
          (function() {
      const testimonials = document.querySelectorAll('[data-testimonial-index]');
      const quoteEl = document.getElementById('testimonial-quote');
      const authorEl = document.getElementById('testimonial-author');

      testimonials.forEach(function(thumbnail) {
        thumbnail.addEventListener('click', function() {
          // Remove active state from all
          testimonials.forEach(function(t) {
            const isActive = t.getAttribute('data-active') === 'true';
            t.removeAttribute('data-active');
            
            if (isActive) {
              t.classList.remove('h-14', 'w-14', 'sm:h-16', 'sm:w-16', 'ring-2', 'ring-white/20', 'shadow-lg');
              t.classList.add('h-12', 'w-12', 'sm:h-14', 'sm:w-14', 'ring-1', 'ring-white/10', 'opacity-40', 'grayscale');
            }
          });

          // Set clicked as active
          thumbnail.setAttribute('data-active', 'true');
          thumbnail.classList.remove('h-12', 'w-12', 'sm:h-14', 'sm:w-14', 'ring-1', 'ring-white/10', 'opacity-40', 'grayscale');
          thumbnail.classList.add('h-14', 'w-14', 'sm:h-16', 'sm:w-16', 'ring-2', 'ring-white/20', 'shadow-lg');

          // Fade out
          quoteEl.style.opacity = '0';
          authorEl.style.opacity = '0';

          setTimeout(function() {
            // Update content
            var quote = thumbnail.getAttribute('data-testimonial-quote');
            var name = thumbnail.getAttribute('data-testimonial-name');
            var role = thumbnail.getAttribute('data-testimonial-role');

            quoteEl.querySelector('p').innerHTML = quote;
            authorEl.querySelector('p').innerHTML = name + ' <span class="text-slate-400 font-normal font-geist">' + role + '</span>';

            // Fade in
            quoteEl.style.opacity = '1';
            authorEl.style.opacity = '1';
          }, 250);
        });
      });
    })();
        </script>
      </div>
    </section>
  </div>

  <script>
    (function() {
      const testimonials = document.querySelectorAll('[data-testimonial-index]');
      const quoteEl = document.getElementById('testimonial-quote');
      const authorEl = document.getElementById('testimonial-author');

      testimonials.forEach(function(thumbnail) {
        thumbnail.addEventListener('click', function() {
          // Remove active state from all
          testimonials.forEach(function(t) {
            t.removeAttribute('data-active');
            t.classList.remove('h-14', 'w-14', 'sm:h-16', 'sm:w-16', 'ring-2', 'ring-white/20', 'shadow-lg');
            t.classList.add('h-12', 'w-12', 'sm:h-14', 'sm:w-14', 'ring-1', 'ring-white/10', 'opacity-40', 'grayscale');
          });

          // Set clicked as active
          thumbnail.setAttribute('data-active', 'true');
          thumbnail.classList.remove('h-12', 'w-12', 'sm:h-14', 'sm:w-14', 'ring-1', 'ring-white/10', 'opacity-40', 'grayscale');
          thumbnail.classList.add('h-14', 'w-14', 'sm:h-16', 'sm:w-16', 'ring-2', 'ring-white/20', 'shadow-lg');

          // Fade out
          quoteEl.style.opacity = '0';
          authorEl.style.opacity = '0';

          setTimeout(function() {
            // Update content
            var quote = thumbnail.getAttribute('data-testimonial-quote');
            var name = thumbnail.getAttribute('data-testimonial-name');
            var role = thumbnail.getAttribute('data-testimonial-role');

            quoteEl.querySelector('p').innerHTML = quote;
            authorEl.querySelector('p').innerHTML = name + ' <span class="text-slate-400 font-normal font-geist">' + role + '</span>';

            // Fade in
            quoteEl.style.opacity = '1';
            authorEl.style.opacity = '1';
          }, 250);
        });
      });
    })();
  </script>
</section>