<!-- 
  Mission Section Component
  "OUR MISSION" section with text and image
-->
<section data-component-type="Content" class="py-16 md:py-24 lg:py-32">
  <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="../assets/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>
