Scrolling Client Testimonials Carousel Section

<section class="overflow-hidden bg-[#fafafa] pt-32 pb-40 relative" id="reviews">

  <!-- Giant Background Text -->
  <div class="absolute top-[10%] left-0 right-0 w-full text-center pointer-events-none select-none z-0">
    <h2 class="text-[18vw] font-bold tracking-tighter text-neutral-100/80 leading-none reveal-on-scroll">
      Client Stories
    </h2>
  </div>

  <div
    class="md:px-12 z-10 grid grid-cols-1 lg:grid-cols-12 gap-12 max-w-7xl mr-auto ml-auto pr-6 pl-6 relative gap-x-12 gap-y-12 items-end">

    <!-- Left Controls/Info -->
    <div class="lg:col-span-4 flex flex-col h-full justify-start">
      <div class="mt-4 mb-8 reveal-on-scroll reveal-delay-100">
        <span class="text-xs font-semibold text-orange-600 uppercase tracking-widest mb-4 block">
              [ 20K HAPPY CLIENTS ]
            </span>
        <p class="text-neutral-500 text-sm leading-relaxed max-w-xs">
          Our products are not only scientifically proven but also customer-approved. See what our community has to say
          about their journey.
        </p>
      </div>
      <!-- you can add arrows / dots here later if you want -->
    </div>

    <!-- Right Carousel -->
    <div class="lg:col-span-8 relative overflow-hidden"
      style="mask-image: linear-gradient(90deg, transparent, black 35%, black 55%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 35%, black 55%, transparent);">
      <!-- Animated track -->
      <div class="testimonial-track flex snap-x snap-mandatory pb-4 gap-x-6 gap-y-6 reveal-on-scroll reveal-delay-300">

        <!-- Review Card 1 -->
        <div
          class="group testimonial-card min-w-[300px] md:min-w-[340px] bg-white p-4 border border-neutral-100 shadow-sm snap-center">
          <div class="relative h-48 w-full mb-4 overflow-hidden bg-neutral-100">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/86f7f4a2-e44a-49da-9aa4-387df6392695_800w.webp" alt="Client Sarah" class="w-full h-full object-cover transform transition-transform duration-700 group-hover:translate-x-3">
            <div
              class="absolute top-2 right-2 bg-white px-2 py-1 text-[10px] font-bold text-orange-600 uppercase tracking-wide">
              [4.9]
            </div>
          </div>
          <p class="text-xs text-neutral-600 leading-relaxed mb-6 h-20 overflow-hidden">
            "I'm amazed at how quickly my skin improved after using these products! My complexion looks brighter, feels
            smoother, and I've received so many compliments."
          </p>
          <div class="flex justify-between items-end border-t border-neutral-100 pt-4">
            <span class="text-xs font-bold text-neutral-900">Sarah H.</span>
            <span class="text-[10px] text-neutral-400 uppercase">May 2024</span>
          </div>
        </div>

        <!-- Review Card 2 -->
        <div
          class="group testimonial-card min-w-[300px] md:min-w-[340px] snap-center bg-white border-neutral-100 border pt-4 pr-4 pb-4 pl-4 shadow-sm">
          <div class="relative h-48 w-full mb-4 overflow-hidden bg-neutral-100">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/419c3346-033b-4638-a935-a2d88a49889c_800w.jpg" alt="Client Jane" class="w-full h-full object-cover transform transition-transform duration-700 group-hover:-translate-x-3">
            <div
              class="absolute top-2 right-2 bg-white px-2 py-1 text-[10px] font-bold text-orange-600 uppercase tracking-wide">
              [5.0]
            </div>
          </div>
          <p class="text-xs text-neutral-600 leading-relaxed mb-6 h-20 overflow-hidden">
            "I've struggled with dry, sensitive skin for years, but since switching to these products, my skin feels
            hydrated, calm, and more balanced than ever."
          </p>
          <div class="flex justify-between items-end border-t border-neutral-100 pt-4">
            <span class="text-xs font-bold text-neutral-900">Jane D.</span>
            <span class="text-[10px] text-neutral-400 uppercase">May 2024</span>
          </div>
        </div>

        <!-- Review Card 3 -->
        <div
          class="group testimonial-card min-w-[300px] md:min-w-[340px] bg-white p-4 border border-neutral-100 shadow-sm snap-center">
          <div class="relative h-48 w-full mb-4 overflow-hidden bg-neutral-100">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/68d6b8da-d1ca-48b1-a6ff-a76d865061f1_800w.jpg" alt="Client Michael" class="w-full h-full object-cover transform transition-transform duration-700 group-hover:translate-x-3">
            <div
              class="absolute top-2 right-2 bg-white px-2 py-1 text-[10px] font-bold text-orange-600 uppercase tracking-wide">
              [4.8]
            </div>
          </div>
          <p class="text-xs text-neutral-600 leading-relaxed mb-6 h-20 overflow-hidden">
            "The texture of the serum is incredible. It absorbs instantly without leaving any residue. My routine has
            never been this effective."
          </p>
          <div class="flex justify-between items-end border-t border-neutral-100 pt-4">
            <span class="text-xs font-bold text-neutral-900">Michael R.</span>
            <span class="text-[10px] text-neutral-400 uppercase">Apr 2024</span>
          </div>
        </div>

        <!-- Review Card 4 -->
        <div
          class="group testimonial-card min-w-[300px] md:min-w-[340px] bg-white p-4 border border-neutral-100 shadow-sm snap-center">
          <div class="relative h-48 w-full mb-4 overflow-hidden bg-neutral-100">
            <img src="https://images.pexels.com/photos/3735654/pexels-photo-3735654.jpeg" alt="Client Lina" class="w-full h-full object-cover transform transition-transform duration-700 group-hover:-translate-x-3">
            <div
              class="absolute top-2 right-2 bg-white px-2 py-1 text-[10px] font-bold text-orange-600 uppercase tracking-wide">
              [4.7]
            </div>
          </div>
          <p class="text-xs text-neutral-600 leading-relaxed mb-6 h-20 overflow-hidden">
            "I love how lightweight everything feels. My routine finally looks minimal but my results feel maximal."
          </p>
          <div class="flex justify-between items-end border-t border-neutral-100 pt-4">
            <span class="text-xs font-bold text-neutral-900">Lina R.</span>
            <span class="text-[10px] text-neutral-400 uppercase">Mar 2024</span>
          </div>
        </div>

        <!-- Review Card 5 -->
        <div
          class="group testimonial-card min-w-[300px] md:min-w-[340px] bg-white p-4 border border-neutral-100 shadow-sm snap-center">
          <div class="relative h-48 w-full mb-4 overflow-hidden bg-neutral-100">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4a3559c6-d7dc-463f-9b25-ce7529387e3d_800w.webp" alt="Client Noah" class="w-full h-full object-cover transform transition-transform duration-700 group-hover:translate-x-3">
            <div
              class="absolute top-2 right-2 bg-white px-2 py-1 text-[10px] font-bold text-orange-600 uppercase tracking-wide">
              [5.0]
            </div>
          </div>
          <p class="text-xs text-neutral-600 leading-relaxed mb-6 h-20 overflow-hidden">
            "From the very first week I noticed a glow I hadn’t seen in years. It genuinely feels like my skin has been
            reset."
          </p>
          <div class="flex justify-between items-end border-t border-neutral-100 pt-4">
            <span class="text-xs font-bold text-neutral-900">Noah S.</span>
            <span class="text-[10px] text-neutral-400 uppercase">Jan 2024</span>
          </div>
        </div>

        <!-- DUPLICATE SET FOR INFINITE LOOP -->
        <!-- Just re-use the same 5 cards to make the scroll seamless -->
        <!-- You can keep or remove this if you prefer a single pass instead of a loop -->

        <!-- Duplicate 1 -->
        <div
          class="group testimonial-card min-w-[300px] md:min-w-[340px] bg-white p-4 border border-neutral-100 shadow-sm snap-center">
          <div class="relative h-48 w-full mb-4 overflow-hidden bg-neutral-100">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/86f7f4a2-e44a-49da-9aa4-387df6392695_800w.webp" alt="Client Sarah" class="w-full h-full object-cover transform transition-transform duration-700 group-hover:translate-x-3">
            <div
              class="absolute top-2 right-2 bg-white px-2 py-1 text-[10px] font-bold text-orange-600 uppercase tracking-wide">
              [4.9]
            </div>
          </div>
          <p class="text-xs text-neutral-600 leading-relaxed mb-6 h-20 overflow-hidden">
            "I'm amazed at how quickly my skin improved after using these products! My complexion looks brighter, feels
            smoother, and I've received so many compliments."
          </p>
          <div class="flex justify-between items-end border-t border-neutral-100 pt-4">
            <span class="text-xs font-bold text-neutral-900">Sarah H.</span>
            <span class="text-[10px] text-neutral-400 uppercase">May 2024</span>
          </div>
        </div>

        <!-- Duplicate 2 -->
        <div
          class="group testimonial-card min-w-[300px] md:min-w-[340px] snap-center bg-white border-neutral-100 border pt-4 pr-4 pb-4 pl-4 shadow-sm">
          <div class="relative h-48 w-full mb-4 overflow-hidden bg-neutral-100">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/419c3346-033b-4638-a935-a2d88a49889c_800w.jpg" alt="Client Jane" class="w-full h-full object-cover transform transition-transform duration-700 group-hover:-translate-x-3">
            <div
              class="absolute top-2 right-2 bg-white px-2 py-1 text-[10px] font-bold text-orange-600 uppercase tracking-wide">
              [5.0]
            </div>
          </div>
          <p class="text-xs text-neutral-600 leading-relaxed mb-6 h-20 overflow-hidden">
            "I've struggled with dry, sensitive skin for years, but since switching to these products, my skin feels
            hydrated, calm, and more balanced than ever."
          </p>
          <div class="flex justify-between items-end border-t border-neutral-100 pt-4">
            <span class="text-xs font-bold text-neutral-900">Jane D.</span>
            <span class="text-[10px] text-neutral-400 uppercase">May 2024</span>
          </div>
        </div>

        <!-- Duplicate 3 -->
        <div
          class="group testimonial-card min-w-[300px] md:min-w-[340px] bg-white p-4 border border-neutral-100 shadow-sm snap-center">
          <div class="relative h-48 w-full mb-4 overflow-hidden bg-neutral-100">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/68d6b8da-d1ca-48b1-a6ff-a76d865061f1_800w.jpg" alt="Client Michael" class="w-full h-full object-cover transform transition-transform duration-700 group-hover:translate-x-3">
            <div
              class="absolute top-2 right-2 bg-white px-2 py-1 text-[10px] font-bold text-orange-600 uppercase tracking-wide">
              [4.8]
            </div>
          </div>
          <p class="text-xs text-neutral-600 leading-relaxed mb-6 h-20 overflow-hidden">
            "The texture of the serum is incredible. It absorbs instantly without leaving any residue. My routine has
            never been this effective."
          </p>
          <div class="flex justify-between items-end border-t border-neutral-100 pt-4">
            <span class="text-xs font-bold text-neutral-900">Michael R.</span>
            <span class="text-[10px] text-neutral-400 uppercase">Apr 2024</span>
          </div>
        </div>

        <!-- Duplicate 4 -->
        <div
          class="group testimonial-card min-w-[300px] md:min-w-[340px] bg-white p-4 border border-neutral-100 shadow-sm snap-center">
          <div class="relative h-48 w-full mb-4 overflow-hidden bg-neutral-100">
            <img src="https://images.pexels.com/photos/3735654/pexels-photo-3735654.jpeg" alt="Client Lina" class="w-full h-full object-cover transform transition-transform duration-700 group-hover:-translate-x-3">
            <div
              class="absolute top-2 right-2 bg-white px-2 py-1 text-[10px] font-bold text-orange-600 uppercase tracking-wide">
              [4.7]
            </div>
          </div>
          <p class="text-xs text-neutral-600 leading-relaxed mb-6 h-20 overflow-hidden">
            "I love how lightweight everything feels. My routine finally looks minimal but my results feel maximal."
          </p>
          <div class="flex justify-between items-end border-t border-neutral-100 pt-4">
            <span class="text-xs font-bold text-neutral-900">Lina R.</span>
            <span class="text-[10px] text-neutral-400 uppercase">Mar 2024</span>
          </div>
        </div>

        <!-- Duplicate 5 -->
        <div
          class="group testimonial-card min-w-[300px] md:min-w-[340px] bg-white p-4 border border-neutral-100 shadow-sm snap-center">
          <div class="relative h-48 w-full mb-4 overflow-hidden bg-neutral-100">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" alt="Client Noah" class="w-full h-full object-cover transform transition-transform duration-700 group-hover:translate-x-3">
            <div
              class="absolute top-2 right-2 bg-white px-2 py-1 text-[10px] font-bold text-orange-600 uppercase tracking-wide">
              [5.0]
            </div>
          </div>
          <p class="text-xs text-neutral-600 leading-relaxed mb-6 h-20 overflow-hidden">
            "From the very first week I noticed a glow I hadn’t seen in years. It genuinely feels like my skin has been
            reset."
          </p>
          <div class="flex justify-between items-end border-t border-neutral-100 pt-4">
            <span class="text-xs font-bold text-neutral-900">Noah S.</span>
            <span class="text-[10px] text-neutral-400 uppercase">Jan 2024</span>
          </div>
        </div>

      </div>
    </div>
  </div>
  <style>
    .testimonial-track {
      width: min-content;
      animation: testimonial-scroll 35s linear infinite;
    }

    /* Pause on hover so users can read comfortably */
    .testimonial-track:hover {
      animation-play-state: paused;
    }

    @keyframes testimonial-scroll {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }
  </style>

</section>