<section data-component-type="Features" class="py-16 md:py-24" data-component-slug="ss-sports-running-featured-lineup">
  <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="https://res.cloudinary.com/duukclzsd/image/upload/v1765527026/seltrix/templates/ss-sports-running/featured-lineup.png" src="{{lineup_image}}" alt="Featured event runner" class="w-full h-auto object-cover">
    </div>
  </div>
</section>