<section data-component-type="OurImpact" class="py-16 xl:py-24 bg-[#F1F2F3]" data-component-slug="marathon-our-impact">
  <div class="mx-auto px-6 lg:px-16 xl:px-[95px]">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 xl:gap-16 items-center">
      <!-- Left Column - Content -->
      <div class="space-y-8">
        <!-- Section Label -->
        <span data-node="our_impact_label" data-node-type="text" data-node-label="Section Label" data-node-default="OUR IMPACT" class="text-sm tracking-[0.2em] text-black font-bold uppercase">{{our_impact_label}}</span>

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

        <!-- Description -->
        <p data-node="our_impact_description" data-node-type="textarea" data-node-label="Section Description" data-node-default="Every event, every route, every support zone is crafted to help you perform your best." class="text-[#656A74] text-base xl:text-lg leading-relaxed max-w-md">
          {{our_impact_description}}
        </p>

        <!-- Feature List -->
        <div class="space-y-6 pt-4">
          <!-- Feature 1 -->
          <div class="flex items-start gap-4">
            <div class="w-6 h-0.5 bg-black mt-3 flex-shrink-0"></div>
            <div>
              <h3 data-node="our_impact_feature_1_title" data-node-type="text" data-node-label="Feature 1 Title" data-node-default="Safe Routes" class="text-lg xl:text-xl font-['Racing_Sans_One'] text-black mb-2">
                {{our_impact_feature_1_title}}
              </h3>
              <p data-node="our_impact_feature_1_desc" data-node-type="textarea" data-node-label="Feature 1 Description" data-node-default="Smooth tracks designed for a comfortable run." class="text-[#656A74] text-sm xl:text-base leading-relaxed">
                {{our_impact_feature_1_desc}}
              </p>
            </div>
          </div>

          <!-- Feature 2 -->
          <div class="flex items-start gap-4">
            <div class="w-6 h-0.5 bg-black mt-3 flex-shrink-0"></div>
            <div>
              <h3 data-node="our_impact_feature_2_title" data-node-type="text" data-node-label="Feature 2 Title" data-node-default="Live Support" class="text-lg xl:text-xl font-['Racing_Sans_One'] text-black mb-2">
                {{our_impact_feature_2_title}}
              </h3>
              <p data-node="our_impact_feature_2_desc" data-node-type="textarea" data-node-label="Feature 2 Description" data-node-default="Volunteers and medics ready whenever you need them." class="text-[#656A74] text-sm xl:text-base leading-relaxed">
                {{our_impact_feature_2_desc}}
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- Right Column - Image with L-shaped border -->
      <div class="relative">
        <!-- Right accent bar -->
        <div class="absolute left-0 top-0 bottom-0 w-2 lg:w-3 bg-[#DCFC62] z-10"></div>
        <!-- Bottom accent bar -->
        <div class="absolute bottom-0 left-0 right-3 lg:right-4 h-2 lg:h-3 bg-[#DCFC62] z-10"></div>
        <!-- Image -->
        <div class="mr-2 lg:mr-3 mb-2 lg:mb-3">
          <img data-node="our_impact_image" data-node-type="file" data-node-label="Section Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768024185/seltrix/templates/marathon-template/our-impact.png" src="{{our_impact_image}}" alt="Runner" class="w-full h-[350px] sm:h-[400px] md:h-[450px] lg:h-[500px] xl:h-[550px] object-cover object-center">
        </div>
      </div>
    </div>
  </div>
</section>