<section data-component-type="Content" class="py-16 md:py-24 lg:py-32" data-component-slug="ss-sports-running-mission">
  <div class="container mx-auto px-4">
    <div class="flex flex-col lg:flex-row gap-12 lg:gap-24 items-center">
      <!-- Left Content -->
      <div class="lg:w-1/2">
        <span data-node="mission_tagline" data-node-type="text" data-node-label="Tagline" class="text-red-600 font-semibold text-sm uppercase tracking-wider" data-node-default="OUR MISSION">
          {{mission_tagline}}
        </span>

        <h2 data-node="mission_title" data-node-type="text" data-node-label="Title" class="text-3xl md:text-4xl lg:text-5xl font-semibold text-black mt-4 mb-6" data-node-default="To Inspire Every Runner at Every Level">
          {{mission_title}}
        </h2>

        <p data-node="mission_description" data-node-type="textarea" data-node-label="Description" class="text-gray-600 text-lg md:text-xl mb-8 leading-relaxed" data-node-default="Our mission is to encourage individuals to move with intent, stay consistent, and discover the joy of progress.">
          {{mission_description}}
        </p>

        <a data-node="mission_cta_link" data-node-type="url" data-node-label="CTA Link" href="{{mission_cta_link}}" class="inline-block bg-red-600 text-white px-10 py-4 font-medium hover:bg-red-700 transition-colors" data-node-default="#">
          <span data-node="mission_cta_text" data-node-type="text" data-node-label="CTA Text" data-node-default="Ongoing Offers">
            {{mission_cta_text}}
          </span>
        </a>
      </div>

      <!-- Right Image with Quote -->
      <div class="lg:w-1/2 relative">
        <img data-node="mission_image" data-node-type="file" data-node-label="Mission Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765527157/seltrix/templates/ss-sports-running/mission-image.png" src="{{mission_image}}" alt="Runner" class="w-full h-80 md:h-[500px] lg:h-[600px] object-cover">
        <!-- Quote Overlay -->
        <div class="absolute bottom-6 left-6 right-6 bg-white p-6">
          <p data-node="mission_quote" data-node-type="textarea" data-node-label="Quote" class="text-gray-600 text-lg md:text-xl italic" data-node-default="Our journey continues with every new member who ties their laces and takes that first step forward.">
            {{mission_quote}}
          </p>
        </div>
      </div>
    </div>
  </div>
</section>