<!-- 
  Featured Lineup Component
  Hero-style section with tagline, title, description, CTA and large image
-->
<section data-component-type="Features" class="py-16 md:py-24">
  <div class="container mx-auto px-4">
    <!-- Text Content -->
    <div class="max-w-2xl mx-auto text-center mb-12">
      <span
        data-node="lineup_tagline"
        data-node-type="text"
        data-node-label="Tagline"
        data-node-default="FEATURED LINEUP"
        class="text-red-600 text-sm font-semibold uppercase tracking-wider mb-4 block"
        >{{lineup_tagline}}</span
      >

      <h2
        data-node="lineup_title"
        data-node-type="text"
        data-node-label="Title"
        data-node-default="Where Every Run Becomes a Story"
        class="text-3xl md:text-4xl lg:text-5xl font-bold text-black mb-6"
      >
        {{lineup_title}}
      </h2>

      <p
        data-node="lineup_description"
        data-node-type="textarea"
        data-node-label="Description"
        data-node-default="Join signature events crafted for every level from easy-paced fun runs to intense endurance challenges. Pick your race, set your pace, and run your journey."
        class="text-gray-600 text-lg md:text-xl leading-relaxed mb-8"
      >
        {{lineup_description}}
      </p>

      <a
        data-node="lineup_cta"
        data-node-type="page_links"
        data-node-label="CTA Link"
        data-node-default="#"
        href="{{lineup_cta}}"
        class="inline-block bg-red-600 text-white px-8 py-4 text-base font-medium hover:bg-red-700 transition-colors"
      >
        <span
          data-node="lineup_cta_text"
          data-node-type="text"
          data-node-label="CTA Text"
          data-node-default="Register Now"
          >{{lineup_cta_text}}</span
        >
      </a>
    </div>

    <!-- Featured Image -->
    <div class="max-w-4xl mx-auto">
      <img
        data-node="lineup_image"
        data-node-type="file"
        data-node-label="Featured Image"
        data-node-default="../assets/featured-lineup.png"
        src="{{lineup_image}}"
        alt="Featured event runner"
        class="w-full h-auto object-cover"
      />
    </div>
  </div>
</section>
