<section data-component-type="Hero">
  <div
    class="relative min-h-screen lg:min-h-screen w-full flex items-start pt-[150px] justify-center text-center overflow-hidden"
  >
    <!-- Background Image -->
    {{#if show_hero_bg}}
    <div class="absolute inset-0 z-0">
      <img
        data-node="hero_bg"
        data-node-type="file"
        data-node-label="Hero Background"
        data-node-default="../assets/homebg.png"
        src="{{hero_bg}}"
        alt="Hero background"
        class="w-full h-full object-cover object-center"
      />

      <!-- Soft overlay -->
      <div class="absolute inset-0 bg-black/10"></div>
    </div>
    {{/if}}

    <!-- Content -->
    <div class="relative z-10 px-6 max-w-4xl mx-auto text-white">
      <!-- Title -->
      <h1
        data-node="hero_title"
        data-node-type="text"
        data-node-label="Title"
        data-node-default="Where Every Step Sparks Momentum"
        class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-medium leading-tight mb-6"
      >
        {{hero_title}}
      </h1>

      <!-- Description -->
      <p
        data-node="hero_description"
        data-node-type="textarea"
        data-node-label="Description"
        data-node-default="Join a club that inspires beginners to start strong. Challenges athletes to push past their limits. And celebrates every mile that brings us forward, together."
        class="mx-auto max-w-2xl text-sm sm:text-base md:text-lg lg:text-xl text-[#193A3F] mb-10 leading-relaxed"
      >
        {{hero_description}}
      </p>

      <!-- CTA -->
      <a
        data-node="hero_cta_link"
        data-node-type="page_links"
        data-node-label="CTA Link"
        data-node-default="#"
        href="{{hero_cta_link}}"
        class="inline-flex items-center justify-center px-10 sm:px-10 py-3 sm:py-4 border border-white text-white text-sm sm:text-base md:text-lg font-medium hover:bg-white hover:text-black transition-all duration-300"
      >
        <span
          data-node="hero_cta_text"
          data-node-type="text"
          data-node-label="CTA Button Text"
          data-node-default="Join the Run"
        >
          {{hero_cta_text}}
        </span>
      </a>
    </div>
  </div>
</section>
