<!-- 
  Ready to Race CTA Component
  Simple centered CTA section with tagline, title, description and button
-->
<section data-component-type="CTA" class="py-16 md:py-24">
  <div class="container mx-auto px-4">
    <div class="max-w-3xl mx-auto text-center">
      <span
        data-node="race_tagline"
        data-node-type="text"
        data-node-label="Tagline"
        data-node-default="READY TO RACE"
        class="text-red-600 text-sm font-semibold uppercase tracking-wider mb-4 block"
        >{{race_tagline}}</span
      >

      <h2
        data-node="race_title"
        data-node-type="text"
        data-node-label="Title"
        data-node-default="Your Next Starting Line Awaits"
        class="text-3xl md:text-4xl lg:text-5xl font-bold text-black mb-6"
      >
        {{race_title}}
      </h2>

      <p
        data-node="race_description"
        data-node-type="textarea"
        data-node-label="Description"
        data-node-default="Whether it's your first race or your fiftieth, our events promise excitement, challenge, and the thrill of finishing strong. Let’s make your next milestone happen."
        class="text-gray-600 text-lg md:text-xl leading-relaxed mb-8"
      >
        {{race_description}}
      </p>

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