<section data-component-type="Content" class="bg-[#FAFAF5] py-16 md:py-20 lg:py-24" data-component-slug="marathon-testimonials">
  <div class="mx-auto px-6 lg:px-16 xl:px-[95px]">
    <!-- Section Header -->
    <div class="text-center mb-12 md:mb-16">
      <p data-node="testimonials_tagline" data-node-type="text" data-node-label="Tagline" data-node-default="TESTIMONIALS" class="text-base md:text-base tracking-[0.2em] text-[#131416] uppercase mb-4">
        {{testimonials_tagline}}
      </p>
      <h2 data-node="testimonials_title" data-node-type="text" data-node-label="Title" data-node-default="What Runners Say" class="text-3xl md:text-4xl lg:text-5xl font-['Racing_Sans_One'] text-black">
        {{testimonials_title}}
      </h2>
      <!-- Lime underline -->
      <div class="w-24 h-1 bg-[#DCFC62] mx-auto mt-4"></div>
    </div>

    <!-- Testimonials Carousel -->
    <div class="relative overflow-hidden" data-testimonials-carousel>
      <!-- Carousel Container -->
      <div class="flex gap-6 overflow-x-auto scrollbar-hide pb-4 snap-x snap-mandatory" data-testimonials-slides style="scrollbar-width: none; -ms-overflow-style: none">
        <!-- Testimonial 1 -->
        <div class="flex-shrink-0 w-[85%] md:w-[calc(50%-12px)] lg:w-[calc(33.333%-16px)] bg-[#F1F2F3] shadow-sm snap-start">
          <div class="p-6">
            <!-- Header -->
            <div class="flex items-center gap-4">
              <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1768024244/seltrix/templates/marathon-template/testimonial-1-avatar.png" alt="Reviewer" class="w-14 h-14 object-cover flex-shrink-0">

              <div>
                <h3 class="text-[18px] font-semibold italic text-[#131416]" style="font-family: 'Racing Sans One', cursive">
                  {{testimonial_1_name}}
                </h3>

                <!-- Star Rating -->
                <div class="mt-1 text-sm leading-none text-[#C4A84B] tracking-widest">
                  <span data-node="testimonial_1_rating" data-node-type="text" data-node-label="Testimonial 1 Rating" data-node-default="★★★★☆">{{testimonial_1_rating}}</span>
                </div>

                <p class="text-sm text-[#656A74] mt-1">{{testimonial_1_role}}</p>
              </div>
            </div>

            <!-- Divider -->
            <div class="-mx-6 border-t-2 border-[#C7CBCF] my-4"></div>

            <!-- Review Text -->
            <p class="text-[#656A74] text-[15px] leading-[1.65]">{{testimonial_1_text}}</p>
          </div>
        </div>

        <!-- Testimonial 2 -->
        <div class="flex-shrink-0 w-[85%] md:w-[calc(50%-12px)] lg:w-[calc(33.333%-16px)] bg-[#F1F2F3] shadow-sm snap-start">
          <div class="p-6">
            <!-- Header -->
            <div class="flex items-center gap-4">
              <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1768024245/seltrix/templates/marathon-template/testimonial-2-avatar.png" alt="Reviewer" class="w-14 h-14 object-cover flex-shrink-0">

              <div>
                <h3 class="text-[18px] font-semibold italic text-[#131416]" style="font-family: 'Racing Sans One', cursive">
                  {{testimonial_2_name}}
                </h3>

                <!-- Star Rating -->
                <div class="mt-1 text-sm leading-none text-[#C4A84B] tracking-widest">
                  <span data-node="testimonial_2_rating" data-node-type="text" data-node-label="Testimonial 2 Rating" data-node-default="★★★★★">{{testimonial_2_rating}}</span>
                </div>

                <p class="text-sm text-[#656A74] mt-1">{{testimonial_2_role}}</p>
              </div>
            </div>

            <!-- Divider -->
            <div class="-mx-6 border-t-2 border-[#C7CBCF] my-4"></div>

            <!-- Review Text -->
            <p class="text-[#656A74] text-[15px] leading-[1.65]">{{testimonial_2_text}}</p>
          </div>
        </div>

        <!-- Testimonial 3 -->
        <div class="flex-shrink-0 w-[85%] md:w-[calc(50%-12px)] lg:w-[calc(33.333%-16px)] bg-[#F1F2F3] shadow-sm snap-start">
          <div class="p-6">
            <!-- Header -->
            <div class="flex items-center gap-4">
              <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1768024247/seltrix/templates/marathon-template/testimonial-3-avatar.png" alt="Reviewer" class="w-14 h-14 object-cover flex-shrink-0">

              <div>
                <h3 class="text-[18px] font-semibold italic text-[#131416]" style="font-family: 'Racing Sans One', cursive">
                  {{testimonial_3_name}}
                </h3>

                <!-- Star Rating -->
                <div class="mt-1 text-sm leading-none text-[#C4A84B] tracking-widest">
                  <span data-node="testimonial_3_rating" data-node-type="text" data-node-label="Testimonial 3 Rating" data-node-default="★★★★★">{{testimonial_3_rating}}</span>
                </div>

                <p class="text-sm text-[#656A74] mt-1">{{testimonial_3_role}}</p>
              </div>
            </div>

            <!-- Divider -->
            <div class="-mx-6 border-t-2 border-[#C7CBCF] my-4"></div>

            <!-- Review Text -->
            <p class="text-[#656A74] text-[15px] leading-[1.65]">{{testimonial_3_text}}</p>
          </div>
        </div>

        <!-- Testimonial 4 -->
        <div class="flex-shrink-0 w-[85%] md:w-[calc(50%-12px)] lg:w-[calc(33.333%-16px)] bg-[#F1F2F3] shadow-sm snap-start">
          <div class="p-6">
            <!-- Header -->
            <div class="flex items-center gap-4">
              <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1768024244/seltrix/templates/marathon-template/testimonial-1-avatar.png" alt="Reviewer" class="w-14 h-14 object-cover flex-shrink-0">

              <div>
                <h3 class="text-[18px] font-semibold italic text-[#131416]" style="font-family: 'Racing Sans One', cursive">
                  {{testimonial_4_name}}
                </h3>

                <!-- Star Rating -->
                <div class="mt-1 text-sm leading-none text-[#C4A84B] tracking-widest">
                  <span data-node="testimonial_4_rating" data-node-type="text" data-node-label="Testimonial 4 Rating" data-node-default="★★★★☆">{{testimonial_4_rating}}</span>
                </div>

                <p class="text-sm text-[#656A74] mt-1">{{testimonial_4_role}}</p>
              </div>
            </div>

            <!-- Divider -->
            <div class="-mx-6 border-t-2 border-[#C7CBCF] my-4"></div>

            <!-- Review Text -->
            <p class="text-[#656A74] text-[15px] leading-[1.65]">{{testimonial_4_text}}</p>
          </div>
        </div>

        <!-- Testimonial 5 -->
        <div class="flex-shrink-0 w-[85%] md:w-[calc(50%-12px)] lg:w-[calc(33.333%-16px)] bg-[#F1F2F3] shadow-sm snap-start">
          <div class="p-6">
            <!-- Header -->
            <div class="flex items-center gap-4">
              <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1768024245/seltrix/templates/marathon-template/testimonial-2-avatar.png" alt="Reviewer" class="w-14 h-14 object-cover flex-shrink-0">

              <div>
                <h3 class="text-[18px] font-semibold italic text-[#131416]" style="font-family: 'Racing Sans One', cursive">
                  {{testimonial_5_name}}
                </h3>

                <!-- Star Rating -->
                <div class="mt-1 text-sm leading-none text-[#C4A84B] tracking-widest">
                  <span data-node="testimonial_5_rating" data-node-type="text" data-node-label="Testimonial 5 Rating" data-node-default="★★★★★">{{testimonial_5_rating}}</span>
                </div>

                <p class="text-sm text-[#656A74] mt-1">{{testimonial_5_role}}</p>
              </div>
            </div>

            <!-- Divider -->
            <div class="-mx-6 border-t-2 border-[#C7CBCF] my-4"></div>

            <!-- Review Text -->
            <p class="text-[#656A74] text-[15px] leading-[1.65]">{{testimonial_5_text}}</p>
          </div>
        </div>
      </div>

      <!-- Dot Indicators -->
      <div class="flex justify-center gap-2 mt-8" data-testimonials-dots>
        <button type="button" class="w-2.5 h-2.5 rounded-full bg-[#131416] transition-colors" data-dot="0" aria-label="Go to slide 1"></button>
        <button type="button" class="w-2.5 h-2.5 rounded-full bg-gray-300 transition-colors" data-dot="1" aria-label="Go to slide 2"></button>
        <button type="button" class="w-2.5 h-2.5 rounded-full bg-gray-300 transition-colors" data-dot="2" aria-label="Go to slide 3"></button>
        <button type="button" class="w-2.5 h-2.5 rounded-full bg-gray-300 transition-colors" data-dot="3" aria-label="Go to slide 4"></button>
        <button type="button" class="w-2.5 h-2.5 rounded-full bg-gray-300 transition-colors" data-dot="4" aria-label="Go to slide 5"></button>
      </div>
    </div>
  </div>
</section>