<section data-section data-component-type="Content" class="py-16 lg:py-32 bg-white relative overflow-hidden" data-component-slug="marathon-meet-the-coach">
  <!-- Diagonal Stripe Background -->
  <div class="absolute inset-0 pointer-events-none">
    <div class="absolute inset-0" style="
        background: repeating-linear-gradient(
          -45deg,
          transparent,
          transparent 40px,
          rgba(0, 0, 0, 0.02) 40px,
          rgba(0, 0, 0, 0.02) 80px
        );
      "></div>
  </div>

  <div class="relative z-10 mx-auto px-6 lg:px-16 xl:px-[95px]">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 xl:gap-16 items-center">
      <!-- Left Column - Content -->
      <div class="space-y-6">
        <span data-node="coach_label" data-node-type="text" data-node-label="Section Label" data-node-default="MEET THE COACH" class="text-sm tracking-[0.2em] text-black font-bold uppercase">{{coach_label}}</span>

        <h2 data-node="coach_title" data-node-type="text" data-node-label="Section Title" data-node-default="Great runners are not born but created" class="text-3xl md:text-4xl xl:text-[42px] 2xl:text-[53px] leading-tight font-['Racing_Sans_One'] text-black">
          {{coach_title}}
        </h2>

        <p data-node="coach_description" data-node-type="textarea" data-node-label="Section Description" data-node-default="Our head coach brings years of athletic experience, proven training frameworks, and a passion for empowering runners of every background." class="text-[#656A74] text-base leading-relaxed font-medium max-w-md">
          {{coach_description}}
        </p>

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

      <!-- Right Column - Coach Photos -->
      <div class="flex justify-center flex-col md:flex-row gap-4 xl:gap-6">
        <!-- Coach 1 -->
        <div class="relative transform shadow-xl">
          <div class="bg-white p-3 xl:p-4 border border-gray-100">
            <img data-node="coach_image_1" data-node-type="file" data-node-label="Coach 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768024139/seltrix/templates/marathon-template/coach-1.png" src="{{coach_image_1}}" alt="Coach" class="w-full md:h-[384px] xl:h-80 2xl:h-[512px] object-cover aspect-[3/4]">
          </div>
        </div>

        <!-- Coach 2 -->
        <div class="relative transform shadow-xl">
          <div class="bg-white p-3 xl:p-4 border border-gray-100">
            <img data-node="coach_image_2" data-node-type="file" data-node-label="Coach 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768024140/seltrix/templates/marathon-template/coach-2.png" src="{{coach_image_2}}" alt="Coach" class="w-full md:h-[384px] xl:h-80 2xl:h-[512px] object-cover aspect-[3/4]">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>