<section data-component-type="Content" class="py-16 md:py-24" data-component-slug="ss-sports-running-testimonials">
  <div class="container mx-auto px-4">
    <!-- Header -->
    <div class="mb-12">
      <span data-node="testimonials_tagline" data-node-type="text" data-node-label="Tagline" data-node-default="MEMBER VOICES" class="text-red-600 text-sm font-semibold uppercase tracking-wider mb-4 block">{{testimonials_tagline}}</span>

      <h2 data-node="testimonials_title" data-node-type="text" data-node-label="Title" data-node-default="Stories From the Track" class="text-3xl md:text-4xl lg:text-5xl font-bold text-black">
        {{testimonials_title}}
      </h2>
    </div>

    <!-- Testimonial Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <!-- Testimonial 1 -->
      <div class="border border-gray-200 p-6 md:p-8 relative">
        <div class="absolute top-6 right-6 flex items-center gap-1">
          <div class="w-1 h-4 bg-red-600"></div>
          <div class="w-4 h-4 bg-black rounded-full"></div>
          <div class="w-1 h-4 bg-red-600"></div>
        </div>
        <img data-node="testimonial1_avatar" data-node-type="file" data-node-label="Testimonial 1 Avatar" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765527007/seltrix/templates/ss-sports-running/avatar-1.png" src="{{testimonial1_avatar}}" alt="Avatar" class="w-16 h-16 rounded-full object-cover mb-4">
        <h4 data-node="testimonial1_name" data-node-type="text" data-node-label="Testimonial 1 Name" data-node-default="Camila" class="text-lg font-bold text-black mb-3">
          {{testimonial1_name}}
        </h4>
        <p data-node="testimonial1_quote" data-node-type="textarea" data-node-label="Testimonial 1 Quote" data-node-default="Found my pace again, running with the club helped me stay consistent, rebuild my rhythm, and fall back in love with the process in a way I didn't think was possible." class="text-gray-600 text-sm leading-relaxed">
          {{testimonial1_quote}}
        </p>
      </div>

      <!-- Testimonial 2 -->
      <div class="border border-gray-200 p-6 md:p-8 relative">
        <div class="absolute top-6 right-6 flex items-center gap-1">
          <div class="w-1 h-4 bg-red-600"></div>
          <div class="w-4 h-4 bg-black rounded-full"></div>
          <div class="w-1 h-4 bg-red-600"></div>
        </div>
        <img data-node="testimonial2_avatar" data-node-type="file" data-node-label="Testimonial 2 Avatar" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765527008/seltrix/templates/ss-sports-running/avatar-2.png" src="{{testimonial2_avatar}}" alt="Avatar" class="w-16 h-16 rounded-full object-cover mb-4">
        <h4 data-node="testimonial2_name" data-node-type="text" data-node-label="Testimonial 2 Name" data-node-default="Carlo" class="text-lg font-bold text-black mb-3">
          {{testimonial2_name}}
        </h4>
        <p data-node="testimonial2_quote" data-node-type="textarea" data-node-label="Testimonial 2 Quote" data-node-default="The energy, the people, the sessions, everything pushes you to show up, stay accountable, and get better one stride at a time, no matter what level you start from." class="text-gray-600 text-sm leading-relaxed">
          {{testimonial2_quote}}
        </p>
      </div>

      <!-- Testimonial 3 -->
      <div class="border border-gray-200 p-6 md:p-8 relative">
        <div class="absolute top-6 right-6 flex items-center gap-1">
          <div class="w-1 h-4 bg-red-600"></div>
          <div class="w-4 h-4 bg-black rounded-full"></div>
          <div class="w-1 h-4 bg-red-600"></div>
        </div>
        <img data-node="testimonial3_avatar" data-node-type="file" data-node-label="Testimonial 3 Avatar" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765527009/seltrix/templates/ss-sports-running/avatar-3.png" src="{{testimonial3_avatar}}" alt="Avatar" class="w-16 h-16 rounded-full object-cover mb-4">
        <h4 data-node="testimonial3_name" data-node-type="text" data-node-label="Testimonial 3 Name" data-node-default="Roboto" class="text-lg font-bold text-black mb-3">
          {{testimonial3_name}}
        </h4>
        <p data-node="testimonial3_quote" data-node-type="textarea" data-node-label="Testimonial 3 Quote" data-node-default="I joined for fitness but stayed for the friendships; this club feels like home, giving me a supportive space to grow, connect, and keep chasing better every week." class="text-gray-600 text-sm leading-relaxed">
          {{testimonial3_quote}}
        </p>
      </div>
    </div>
  </div>
</section>