Responsive Testimonials Slider Section

<section class="overflow-hidden border-white/5 border-t relative" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(4)">
  <!-- Accent glows -->
  <div class="pointer-events-none absolute inset-0">
    <div class="absolute -top-24 -left-24 h-72 w-72 rounded-full bg-lime-300/10 blur-3xl"></div>
    <div class="absolute top-1/2 -right-24 h-72 w-72 rounded-full bg-yellow-200/10 blur-3xl"></div>
  </div>

  <div class="max-w-7xl mx-auto px-6 py-20 sm:py-28 relative">
    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-x-6 gap-y-6">
      <div class="">
        <div class="inline-flex text-xs text-neutral-300 bg-white/5 border border-white/10 rounded-full px-3 py-1.5 items-center gap-2">
          <span class="inline-flex h-1.5 w-1.5 rounded-full bg-lime-300"></span>
          Testimonials
        </div>
        <h2 class="sm:text-6xl leading-[1.08] text-4xl font-medium tracking-tight font-bricolage mt-4">What hikers are saying</h2>
        <p class="mt-5 text-neutral-400 max-w-2xl">
          Stories from teams and solo hikers who trusted our guides, routes, and safety protocols on every kind of terrain.
        </p>
      </div>
      <div class="shrink-0 flex items-center gap-6">
        <div class="text-sm text-white/80"><span id="t-current" class="text-xl font-bricolage font-medium tracking-tight">01</span> <span class="text-white/40">/</span> <span id="t-total" class="text-white/60">03</span></div>
        <div class="flex items-center gap-2">
          <button id="t-prev" class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-white/5 text-white/80 hover:bg-white/10 transition">
            <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"><path d="m12 19-7-7 7-7" class=""></path><path d="M19 12H5" class=""></path></svg>
          </button>
          <button id="t-next" class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-white/5 text-white/80 hover:bg-white/10 transition">
            <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" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Slides -->
    <div id="testimonial-slides" class="mt-12 space-y-12">
      <!-- Slide 1 -->
      <article data-testimonial-slide="" class="grid lg:grid-cols-12 gap-8 lg:gap-12 items-center">
        <div class="lg:col-span-5">
          <div class="rounded-3xl overflow-hidden ring-1 ring-white/10 bg-neutral-900">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/2c958486-bfef-4917-862a-7e3de9f9e62c_1600w.webp" alt="Portrait of Sarah Ahmed" class="w-full h-full object-cover aspect-[4/5]">
          </div>
        </div>
        <div class="lg:col-span-7">
          <div class="flex items-start gap-6">
            <div class="shrink-0 inline-flex h-10 w-10 items-center justify-center rounded-xl bg-white/10 border border-white/10 text-white/80">
              <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-5 w-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" class=""></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" class=""></path></svg>
            </div>
            <div class="">
              <p class="text-xs text-white/60">Project Manager</p>
              <h3 class="mt-1 text-2xl sm:text-3xl font-bricolage font-medium tracking-tight">Sarah Ahmed</h3>
              <p class="mt-4 text-neutral-300 text-lg leading-relaxed">
                “PeakPath delivered outstanding results with great professionalism and timely execution.
                Their guides’ dedication and safety‑first approach made our company offsite a complete success from start to finish.”
              </p>
              <div class="mt-5 inline-flex items-center gap-2 rounded-full bg-white/5 border border-white/10 px-3 py-1.5 text-xs text-white/70">
                <span class="h-1.5 w-1.5 rounded-full bg-lime-300"></span>
                Route: Vernal Fall • Group of 10
              </div>
            </div>
          </div>
        </div>
      </article>

      <!-- Slide 2 -->
      <article data-testimonial-slide="" class="grid lg:grid-cols-12 gap-8 lg:gap-12 items-center hidden">
        <div class="lg:col-span-5">
          <div class="rounded-3xl overflow-hidden ring-1 ring-white/10 bg-neutral-900">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/782ff660-820f-4153-aa85-b3d60237bd11_1600w.webp" alt="Portrait of Marco Lee" class="w-full h-full object-cover aspect-[4/5]">
          </div>
        </div>
        <div class="lg:col-span-7">
          <div class="flex items-start gap-6">
            <div class="shrink-0 inline-flex h-10 w-10 items-center justify-center rounded-xl bg-white/10 border border-white/10 text-white/80">
              <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-5 w-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" class=""></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" class=""></path></svg>
            </div>
            <div>
              <p class="text-xs text-white/60">Operations Lead</p>
              <h3 class="mt-1 text-2xl sm:text-3xl font-bricolage font-medium tracking-tight">Marco Lee</h3>
              <p class="mt-4 text-neutral-300 text-lg leading-relaxed">
                “The route planning and check‑ins were spot on. We kept to schedule without rushing beginners,
                and the offline maps saved us twice in low‑signal valleys. Flawless coordination end to end.”
              </p>
              <div class="mt-5 inline-flex items-center gap-2 rounded-full bg-white/5 border border-white/10 px-3 py-1.5 text-xs text-white/70">
                <span class="h-1.5 w-1.5 rounded-full bg-lime-300"></span>
                Elevation gain: +620m • Distance: 12.8 km
              </div>
            </div>
          </div>
        </div>
      </article>

      <!-- Slide 3 -->
      <article data-testimonial-slide="" class="grid lg:grid-cols-12 gap-8 lg:gap-12 items-center hidden">
        <div class="lg:col-span-5">
          <div class="rounded-3xl overflow-hidden ring-1 ring-white/10 bg-neutral-900">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c2c54da9-4434-41f6-a5e4-7988893b20a7_1600w.webp" alt="Portrait of Aisha Patel" class="w-full h-full object-cover aspect-[4/5]">
          </div>
        </div>
        <div class="lg:col-span-7">
          <div class="flex items-start gap-6">
            <div class="shrink-0 inline-flex h-10 w-10 items-center justify-center rounded-xl bg-white/10 border border-white/10 text-white/80">
              <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-5 w-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" class=""></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" class=""></path></svg>
            </div>
            <div>
              <p class="text-xs text-white/60">Mountain Safety Coordinator</p>
              <h3 class="mt-1 text-2xl sm:text-3xl font-bricolage font-medium tracking-tight">Aisha Patel</h3>
              <p class="mt-4 text-neutral-300 text-lg leading-relaxed">
                “Clear protocols, well‑stocked kits, and calm leadership throughout a tricky weather window.
                I’d trust this team with any alpine objective.”
              </p>
              <div class="mt-5 inline-flex items-center gap-2 rounded-full bg-white/5 border border-white/10 px-3 py-1.5 text-xs text-white/70">
                <span class="h-1.5 w-1.5 rounded-full bg-lime-300"></span>
                Rating: 4.9/5 • Group size: 7
              </div>
            </div>
          </div>
        </div>
      
    </article></div>
  </div>
</section>