<section data-component-type="WhyMarathon" class="relative py-16 lg:h-[786px] mx-auto px-6 lg:px-16 lg:px-[95px] lg:flex lg:items-center overflow-hidden" data-component-slug="marathon-why-marathon">
  <!-- Background Image -->
  <div class="absolute inset-0 z-0">
    <img data-node="why_marathon_bg_image" data-node-type="file" data-node-label="Background Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768024252/seltrix/templates/marathon-template/why-marathon-bg.png" src="{{why_marathon_bg_image}}" alt="Marathon runners" class="w-full h-full object-cover object-center">
    <!-- Dark Overlay -->
    <div class="absolute inset-0 bg-black/60"></div>
  </div>

  <!-- Content -->
  <div class="relative z-10 w-full">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 xl:gap-16 items-center w-full">
      <!-- Left Column - Title & Description -->
      <div class="space-y-6">
        <h2 data-node="why_marathon_title" data-node-type="text" data-node-label="Section Title" data-node-default="Why Our Marathon Stands Apart" class="text-3xl md:text-4xl xl:text-5xl leading-tight font-['Racing_Sans_One'] text-white">
          {{why_marathon_title}}
        </h2>

        <p data-node="why_marathon_description" data-node-type="textarea" data-node-label="Section Description" data-node-default="A space built for passion, progress, and possibility, whether you're chasing a personal best or taking your first step toward a healthier lifestyle. Our marathon unites seasoned athletes, curious beginners, and everyday individuals in an atmosphere of energy, encouragement, and shared determination." class="text-white/80 text-sm xl:text-base leading-relaxed max-w-lg">
          {{why_marathon_description}}
        </p>

        <!-- CTA Button -->
        <a data-node="why_marathon_cta_link" data-node-type="page_links" data-node-label="CTA Link" data-node-default="#" href="{{why_marathon_cta_link}}" class="inline-flex items-center gap-3 bg-[#DCFC62] text-black px-6 py-3 xl:px-8 xl:py-4 text-sm xl:text-base font-bold hover:bg-lime-500 transition-colors uppercase tracking-wider w-fit" style="clip-path: polygon(0 0, 100% 0, 100% 65%, 90% 100%, 0 100%)">
          <span data-node="why_marathon_cta_text" data-node-type="text" data-node-label="CTA Button Text" data-node-default="DISCOVER MORE">{{why_marathon_cta_text}}</span>
        </a>
      </div>

      <!-- Right Column - Feature Cards -->
      <div class="space-y-6">
        <!-- Feature Card 1 -->
        <div class="border-2 border-dashed border-white p-8 xl:p-10">
          <h3 data-node="why_marathon_feature_1_title" data-node-type="text" data-node-label="Feature 1 Title" data-node-default="Inclusive Runs" class="text-xl xl:text-2xl text-white font-['Racing_Sans_One'] mb-4">
            {{why_marathon_feature_1_title}}
          </h3>
          <p data-node="why_marathon_feature_1_desc" data-node-type="textarea" data-node-label="Feature 1 Description" data-node-default="Welcoming all ages, speeds, and fitness levels." class="text-white text-base xl:text-lg leading-relaxed">
            {{why_marathon_feature_1_desc}}
          </p>
        </div>

        <!-- Feature Card 2 -->
        <div class="border-2 border-dashed border-white p-8 xl:p-10">
          <h3 data-node="why_marathon_feature_2_title" data-node-type="text" data-node-label="Feature 2 Title" data-node-default="Expert Support" class="text-xl xl:text-2xl text-white font-['Racing_Sans_One'] mb-4">
            {{why_marathon_feature_2_title}}
          </h3>
          <p data-node="why_marathon_feature_2_desc" data-node-type="textarea" data-node-label="Feature 2 Description" data-node-default="From training tips to hydration stations, we've got you covered." class="text-white text-base xl:text-lg leading-relaxed">
            {{why_marathon_feature_2_desc}}
          </p>
        </div>
      </div>
    </div>
  </div>
</section>