<section data-component-type="ProgramCards" class="py-16 xl:py-24 bg-[#2d2b2b]" data-component-slug="marathon-program-cards">
  <div class="mx-auto px-6 lg:px-16 xl:px-[95px] space-y-10">
    <!-- Programs Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 xl:gap-8">
      <!-- Program Card 1 -->
      <div class="relative overflow-hidden aspect-[521/702] flex flex-col justify-center bg-white p-3">
        <!-- Background Image -->
        <img data-node="program_card_1_image" data-node-type="file" data-node-label="Program 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768024191/seltrix/templates/marathon-template/program-1.png" src="{{program_card_1_image}}" alt="Program" class="absolute inset-2 w-[calc(100%-1rem)] h-[calc(100%-1rem)] object-cover object-center">
        <!-- Content -->
        <div class="relative z-10 p-6 xl:p-10 text-center">
          <h3 data-node="program_card_1_title" data-node-type="text" data-node-label="Program 1 Title" data-node-default="Beginner Sprint" class="text-3xl md:text-4xl xl:text-[42px] 2xl:text-[53px] leading-tight font-['Racing_Sans_One'] text-white mb-6">
            {{program_card_1_title}}
          </h3>
          <p data-node="program_card_1_description" data-node-type="textarea" data-node-label="Program 1 Description" data-node-default="A friendly entry-level program to help new runners build pace and confidence." class="text-white/80 text-[24px] leading-relaxed mb-6">
            {{program_card_1_description}}
          </p>
          <a data-node="program_card_1_link" data-node-type="page_links" data-node-label="Program 1 Link" data-node-default="#" href="{{program_card_1_link}}" class="inline-block border-2 border-white/70 text-white px-6 py-3 text-sm font-bold uppercase tracking-wider hover:bg-white hover:text-black transition-colors">
            <span data-node="program_card_1_cta_text" data-node-type="text" data-node-label="Program 1 CTA Text" data-node-default="VIEW DETAIL">{{program_card_1_cta_text}}</span>
          </a>
        </div>
      </div>

      <!-- Program Card 2 -->
      <div class="relative overflow-hidden aspect-[521/702] flex flex-col justify-center bg-white p-3">
        <!-- Background Image -->
        <img data-node="program_card_2_image" data-node-type="file" data-node-label="Program 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768024193/seltrix/templates/marathon-template/program-2.png" src="{{program_card_2_image}}" alt="Program" class="absolute inset-2 w-[calc(100%-1rem)] h-[calc(100%-1rem)] object-cover object-center">
        <!-- Content -->
        <div class="relative z-10 p-6 xl:p-10 text-center">
          <h3 data-node="program_card_2_title" data-node-type="text" data-node-label="Program 2 Title" data-node-default="Endurance Boost" class="text-3xl md:text-4xl xl:text-[42px] 2xl:text-[53px] leading-tight font-['Racing_Sans_One'] text-white mb-6">
            {{program_card_2_title}}
          </h3>
          <p data-node="program_card_2_description" data-node-type="textarea" data-node-label="Program 2 Description" data-node-default="Structured training to increase stamina, consistency, and long-distance performance." class="text-white/80 text-[24px] leading-relaxed mb-6">
            {{program_card_2_description}}
          </p>
          <a data-node="program_card_2_link" data-node-type="page_links" data-node-label="Program 2 Link" data-node-default="#" href="{{program_card_2_link}}" class="inline-block border-2 border-white/70 text-white px-6 py-3 text-sm font-bold uppercase tracking-wider hover:bg-white hover:text-black transition-colors">
            <span data-node="program_card_2_cta_text" data-node-type="text" data-node-label="Program 2 CTA Text" data-node-default="VIEW DETAIL">{{program_card_2_cta_text}}</span>
          </a>
        </div>
      </div>

      <!-- Program Card 3 -->
      <div class="relative overflow-hidden aspect-[521/702] flex flex-col justify-center bg-white p-3 md:col-span-2 md:max-w-[50%] md:mx-auto lg:col-span-1 lg:max-w-none">
        <!-- Background Image -->
        <img data-node="program_card_3_image" data-node-type="file" data-node-label="Program 3 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768024194/seltrix/templates/marathon-template/program-3.png" src="{{program_card_3_image}}" alt="Program" class="absolute inset-2 w-[calc(100%-1rem)] h-[calc(100%-1rem)] object-cover object-center">
        <!-- Content -->
        <div class="relative z-10 p-6 xl:p-10 text-center">
          <h3 data-node="program_card_3_title" data-node-type="text" data-node-label="Program 3 Title" data-node-default="Race Prep" class="text-3xl md:text-4xl xl:text-[42px] 2xl:text-[53px] leading-tight font-['Racing_Sans_One'] text-white mb-6">
            {{program_card_3_title}}
          </h3>
          <p data-node="program_card_3_description" data-node-type="textarea" data-node-label="Program 3 Description" data-node-default="A goal-oriented plan crafted to help you perform your best on race day." class="text-white/80 text-[24px] leading-relaxed mb-6">
            {{program_card_3_description}}
          </p>
          <a data-node="program_card_3_link" data-node-type="page_links" data-node-label="Program 3 Link" data-node-default="#" href="{{program_card_3_link}}" class="inline-block border-2 border-white/70 text-white px-6 py-3 text-sm font-bold uppercase tracking-wider hover:bg-white hover:text-black transition-colors">
            <span data-node="program_card_3_cta_text" data-node-type="text" data-node-label="Program 3 CTA Text" data-node-default="VIEW DETAIL">{{program_card_3_cta_text}}</span>
          </a>
        </div>
      </div>
    </div>
    <!-- Logo Carousel -->
    <div class="relative bg-[#9C9C9C] py-6 xl:py-8 overflow-hidden">
      

      <!-- Gradient overlays -->
      <div class="absolute top-0 left-0 w-16 md:w-24 xl:w-32 h-full z-20 pointer-events-none bg-gradient-to-r from-[#9C9C9C] via-[#9C9C9C]/50 to-transparent"></div>
      <div class="absolute top-0 right-0 w-16 md:w-24 xl:w-32 h-full z-20 pointer-events-none bg-gradient-to-l from-[#9C9C9C] via-[#9C9C9C]/50 to-transparent"></div>

      <!-- Scrolling track -->
      <div class="w-full overflow-hidden flex justify-center">
        <div class="flex items-center gap-12 xl:gap-20 animate-[scrollLogos_20s_linear_infinite]" style="min-width: max-content">
          <!-- First set of logos -->
          <img data-node="logo_1" data-node-type="file" data-node-label="Logo 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053065/seltrix/templates/marathon-template/sponsor-1.svg" src="{{logo_1}}" alt="Sponsor" class="h-12 md:aspect-[280/102] object-contain">
          <img data-node="logo_2" data-node-type="file" data-node-label="Logo 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053067/seltrix/templates/marathon-template/sponsor-2.svg" src="{{logo_2}}" alt="Sponsor" class="h-12 md:aspect-[280/102] object-contain">
          <img data-node="logo_3" data-node-type="file" data-node-label="Logo 3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053068/seltrix/templates/marathon-template/sponsor-3.svg" src="{{logo_3}}" alt="Sponsor" class="h-12 md:aspect-[280/102] object-contain">
          <img data-node="logo_4" data-node-type="file" data-node-label="Logo 4" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053070/seltrix/templates/marathon-template/sponsor-4.svg" src="{{logo_4}}" alt="Sponsor" class="h-12 md:aspect-[280/102] object-contain">
          <img data-node="logo_5" data-node-type="file" data-node-label="Logo 5" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053071/seltrix/templates/marathon-template/sponsor-5.svg" src="{{logo_5}}" alt="Sponsor" class="h-12 md:aspect-[280/102] object-contain">
          <!-- Duplicate set for seamless loop -->
          <img src="{{logo_1}}" alt="Sponsor" class="h-12 md:aspect-[280/102] object-contain">
          <img src="{{logo_2}}" alt="Sponsor" class="h-12 md:aspect-[280/102] object-contain">
          <img src="{{logo_3}}" alt="Sponsor" class="h-12 md:aspect-[280/102] object-contain">
          <img src="{{logo_4}}" alt="Sponsor" class="h-12 md:aspect-[280/102] object-contain">
          <img src="{{logo_5}}" alt="Sponsor" class="h-12 md:aspect-[280/102] object-contain">
        </div>
      </div>
    </div>
  </div>
</section>