<section data-component-type="CTA" class="py-16 md:py-24 lg:py-32" data-component-slug="ss-sports-running-join-club">
  <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="https://res.cloudinary.com/duukclzsd/image/upload/v1765527030/seltrix/templates/ss-sports-running/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="https://res.cloudinary.com/duukclzsd/image/upload/v1765527156/seltrix/templates/ss-sports-running/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>