<!-- 
  Testimonials Component
  3 testimonial cards with avatars and quotes
-->
<section data-component-type="Content" class="py-16 md:py-24">
  <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="../assets/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="../assets/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="../assets/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>
