<!-- 
  Hero Section Component
  Full-screen hero with background image
-->
<section data-component-type="Hero" class="relative min-h-screen flex items-end pb-24 md:pb-32">
  <!-- Background Image - using img tag for proper import -->
  {{#if show_hero_bg}}
  <div class="absolute inset-0 overflow-hidden">
    <img
      data-node="hero_bg"
      data-node-type="file"
      data-node-label="Hero Background"
      data-node-default="../assets/hero-bg.png"
      src="{{hero_bg}}"
      alt="Hero background"
      class="w-full h-full object-cover object-center"
    />
    <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent"></div>
  </div>
  {{/if}}
  <div class="container mx-auto px-4 relative z-10">
    <div class="max-w-3xl">
      <!-- Tagline with Line -->
      <div class="flex items-center gap-5 mb-5">
        <span
          data-node="hero_tagline"
          data-node-type="text"
          data-node-label="Tagline"
          data-node-default="RUN TOGETHER"
          class="text-white font-semibold text-sm uppercase tracking-wider"
        >
          {{hero_tagline}}
        </span>
        <div class="flex-1 h-1 bg-white/50 max-w-md"></div>
      </div>

      <!-- Main Title -->
      <h1
        data-node="hero_title"
        data-node-type="text"
        data-node-label="Title"
        data-node-default="Where Every Step Sparks Momentum"
        class="text-4xl md:text-5xl lg:text-6xl font-semibold text-white mb-6 leading-tight"
      >
        {{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="text-white/90 text-lg md:text-xl lg:text-2xl mb-8 leading-relaxed max-w-2xl"
      >
        {{hero_description}}
      </p>

      <!-- CTA Button -->
      <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-block bg-black text-white px-10 py-5 text-lg font-medium hover:bg-gray-900 transition-colors"
      >
        <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>
