<!-- 
  About The Club Component
  Responsive section with images and CTA
-->
<section data-component-type="Content" class="py-16 md:py-24 lg:py-32 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative">
      <!-- Decorative Images - Desktop Only -->
      <img
        data-node="about_image_left"
        data-node-type="file"
        data-node-label="Left Image"
        data-node-default="../assets/about-left.png"
        src="{{about_image_left}}"
        alt="Runner"
        class="hidden lg:block absolute top-0 left-0 w-72 h-80 object-cover"
      />
      <img
        data-node="about_image_right"
        data-node-type="file"
        data-node-label="Right Image"
        data-node-default="../assets/about-right.png"
        src="{{about_image_right}}"
        alt="Runner"
        class="hidden lg:block absolute top-16 right-0 w-72 h-96 object-cover"
      />

      <!-- Content - Centered -->
      <div class="max-w-3xl mx-auto text-center relative z-10">
        <span
          data-node="about_tagline"
          data-node-type="text"
          data-node-label="Tagline"
          data-node-default="ABOUT THE CLUB"
          class="text-red-600 font-semibold text-sm uppercase tracking-wider"
        >
          {{about_tagline}}
        </span>

        <h2
          data-node="about_title"
          data-node-type="text"
          data-node-label="Title"
          data-node-default="Built for Runners, Open to Everyone"
          class="text-3xl md:text-4xl lg:text-5xl font-semibold text-black mt-4 mb-6"
        >
          {{about_title}}
        </h2>

        <p
          data-node="about_description"
          data-node-type="textarea"
          data-node-label="Description"
          data-node-default="Whether you're lacing up for your first 3K or training for a marathon, our club brings together people who believe in progress not perfection."
          class="text-gray-600 text-lg md:text-xl mb-8 leading-relaxed"
        >
          {{about_description}}
        </p>

        <a
          data-node="about_cta_link"
          data-node-type="url"
          data-node-label="CTA Link"
          data-node-default="#"
          href="{{about_cta_link}}"
          class="inline-block bg-red-600 text-white px-10 py-4 font-medium hover:bg-red-700 transition-colors"
        >
          <span
            data-node="about_cta_text"
            data-node-type="text"
            data-node-label="CTA Text"
            data-node-default="Explore Offers"
          >
            {{about_cta_text}}
          </span>
        </a>
      </div>
    </div>
  </div>
</section>
