<!-- 
  Join Club Section Component
  Two-column layout with images and text
-->
<section data-component-type="CTA" class="py-16 md:py-24 lg:py-32">
  <div class="container mx-auto px-4">
    <!-- Header -->
    <div class="text-center mb-12">
      <span
        data-node="join_tagline"
        data-node-type="text"
        data-node-label="Tagline"
        data-node-default="JOIN THE CLUB"
        class="text-red-600 font-semibold text-sm uppercase tracking-wider"
      >
        {{join_tagline}}
      </span>

      <h2
        data-node="join_title"
        data-node-type="text"
        data-node-label="Title"
        data-node-default="This Is Your Starting Line, Begin Here"
        class="text-3xl md:text-4xl lg:text-5xl font-semibold text-black mt-4"
      >
        {{join_title}}
      </h2>
    </div>

    <!-- Two Column Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
      <!-- Column 1 -->
      <div class="relative group">
        <img
          data-node="join_image1"
          data-node-type="file"
          data-node-label="Left Image"
          data-node-default="../assets/join-left.png"
          src="{{join_image1}}"
          alt="Runners training"
          class="w-full h-64 md:h-80 lg:h-96 object-cover"
        />
        <div class="mt-6 flex justify-between items-center">
          <p
            data-node="join_text1"
            data-node-type="textarea"
            data-node-label="Left Text"
            data-node-default="A club built on consistency, not competition."
            class="text-2xl md:text-3xl font-medium text-black max-w-xs"
          >
            {{join_text1}}
          </p>
          <a
            data-node="join_link1"
            data-node-type="url"
            data-node-label="Left Arrow Link"
            data-node-default="#"
            href="{{join_link1}}"
            class="p-4 bg-red-600 flex items-center justify-center hover:bg-red-700 transition-colors"
          >
            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
            </svg>
          </a>
        </div>
      </div>

      <!-- Column 2 -->
      <div class="relative group">
        <img
          data-node="join_image2"
          data-node-type="file"
          data-node-label="Right Image"
          data-node-default="../assets/join-right.png"
          src="{{join_image2}}"
          alt="Athletes running"
          class="w-full h-64 md:h-80 lg:h-96 object-cover"
        />
        <div class="mt-6 flex justify-between items-center">
          <p
            data-node="join_text2"
            data-node-type="textarea"
            data-node-label="Right Text"
            data-node-default="Distance programs for all levels, designed for progress."
            class="text-2xl md:text-3xl font-medium text-black max-w-xs"
          >
            {{join_text2}}
          </p>
          <a
            data-node="join_link2"
            data-node-type="url"
            data-node-label="Right Arrow Link"
            data-node-default="#"
            href="{{join_link2}}"
            class="p-4 bg-red-600 flex items-center justify-center hover:bg-red-700 transition-colors"
          >
            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>
