<section data-component-type="RaceStories" class="py-16 xl:py-24 bg-white" data-component-slug="marathon-race-stories">
  <div class="mx-auto px-6 lg:px-16 xl:px-[95px]">
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 xl:gap-12 items-center">
      <!-- Left Column - Title & Description -->
      <div class="space-y-6 md:col-span-2 xl:col-span-1">
        <span data-node="race_stories_label" data-node-type="text" data-node-label="Section Label" data-node-default="RACE STORIES" class="text-base tracking-[0.2em] text-black font-bold uppercase">{{race_stories_label}}</span>

        <h2 data-node="race_stories_title" data-node-type="text" data-node-label="Section Title" data-node-default="Journeys That Inspire Every Runner" class="!mt-2 text-3xl md:text-4xl xl:text-5xl leading-tight font-['Racing_Sans_One'] text-black">
          {{race_stories_title}}
        </h2>

        <p data-node="race_stories_description" data-node-type="textarea" data-node-label="Section Description" data-node-default="From seasoned marathoners to first-time joggers, every story reminds us why running unites people of all backgrounds." class="text-[#656A74] text-base xl:text-lg leading-relaxed">
          {{race_stories_description}}
        </p>

        <!-- Accent Line -->
        <div class="w-[107px] h-[5px] bg-[#DCFC62]"></div>
      </div>

      <!-- Center Column - Runner Image -->
      <div class="relative flex justify-center">
        <!-- Image wrapper - w-fit ensures it only takes up image width -->
        <div class="relative w-fit">
          <!-- Left accent bar -->
          <div class="absolute -left-2 lg:-left-2.5 xl:-left-3 top-4 bottom-0 w-2 lg:w-2.5 xl:w-3 bg-[#DCFC62] z-10"></div>
          <!-- Bottom accent bar -->
          <div class="absolute -bottom-2 lg:-bottom-2.5 xl:-bottom-3 -left-2 lg:-left-2.5 xl:-left-3 w-full h-2 lg:h-2.5 xl:h-3 bg-[#DCFC62] z-10"></div>
          <img data-node="race_stories_image" data-node-type="file" data-node-label="Runner Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768024198/seltrix/templates/marathon-template/runner-story.png" src="{{race_stories_image}}" alt="Runner" class="w-full sm:w-[335px] md:w-[410px] lg:w-[445px] xl:w-[415px] 2xl:w-[524px] aspect-[524/705] object-cover object-center">
        </div>
      </div>

      <!-- Right Column - Testimonial Card -->
      <div class="h-full flex flex-col justify-center gap-12">
        <!-- Quote Card with border -->
        <div class="border-2 border-[#C7CBCF] p-4">
          <div class="bg-[#F1F2F3] p-6 xl:p-8">
            <!-- Quote text -->
            <p data-node="race_stories_quote" data-node-type="textarea" data-node-label="Quote Text" data-node-default="EVERY MILE TEACHES YOU SOMETHING NEW ABOUT YOURSELF." class="text-base xl:text-lg font-medium text-[#656A74] uppercase tracking-wide mb-6">
              {{race_stories_quote}}
            </p>

            <!-- Author -->
            <p data-node="race_stories_author" data-node-type="text" data-node-label="Quote Author" data-node-default="Arjun Rao" class="text-black font-medium text-lg xl:text-xl">
              {{race_stories_author}}
            </p>
          </div>
        </div>

        <!-- Story Text -->
        <div class="space-y-4 xl:max-w-[503px]">
          <p data-node="race_stories_content_1" data-node-type="textarea" data-node-label="Story Content 1" data-node-default="Real experiences. Real passion. Real wins. Running transforms the mind before it transforms the body. And every runner, fast or slow, has a story worth celebrating." class="text-[#656A74] text-base leading-relaxed">
            {{race_stories_content_1}}
          </p>

          <p data-node="race_stories_content_2" data-node-type="textarea" data-node-label="Story Content 2" data-node-default="Our marathon community is built on encouragement, resilience, and spirit." class="text-[#656A74] text-base leading-relaxed">
            {{race_stories_content_2}}
          </p>
        </div>

        <!-- CTA Button -->
        <a data-node="race_stories_cta_link" data-node-type="page_links" data-node-label="CTA Link" data-node-default="#" href="{{race_stories_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-3 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="race_stories_cta_text" data-node-type="text" data-node-label="CTA Button Text" data-node-default="READ MORE">{{race_stories_cta_text}}</span>
        </a>
      </div>
    </div>
  </div>
</section>