<section data-component-type="Hero" class="relative w-full min-h-[600px] lg:min-h-[1100px] overflow-hidden" data-component-slug="ss-agriculture-template-hero">
  <!-- Background Image -->
  <div class="absolute inset-0 z-0">
    <img data-node="hero_bg_image" data-node-type="file" data-node-label="Hero Background Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767346774/seltrix/templates/ss-agriculture-template/hero-banner.jpg" src="{{hero_bg_image}}" alt="Agriculture background" class="w-full h-fit object-cover">
    <!-- Dark Overlay for better text readability -->
    <div class="absolute inset-0 bg-black/20"></div>
  </div>

  <!-- Content -->
  <div class="relative z-10 flex flex-col items-center justify-center text-center px-4 sm:px-6 lg:px-8 pt-32 pb-48">
    <div class="max-w-3xl mx-auto">
      <!-- Main Title -->
      <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-[#2a2622] leading-tight mb-6">
        <span data-node="hero_title" data-node-type="textarea" data-node-label="Hero Title" data-node-default="Growing Better Futures Through Smarter Agriculture">{{hero_title}}</span>
      </h1>

      <!-- Subtitle/Description -->
      <p class="text-lg sm:text-xl text-[#3d3a36] max-w-2xl mx-auto mb-10 leading-relaxed">
        <span data-node="hero_subtitle" data-node-type="textarea" data-node-label="Hero Subtitle" data-node-default="Experience premium farming solutions that enhance productivity, improve soil health, and empower modern growers.">{{hero_subtitle}}</span>
      </p>

      <!-- CTA Button -->
      {{#if show_hero_cta}}
      <a data-node="hero_cta_link" data-node-type="page_links" data-node-label="Hero CTA Link" data-node-default="services" href="{{hero_cta_link}}" class="inline-block bg-[#2f5a3a] text-white px-8 py-4 rounded-full text-base font-medium hover:bg-[#254a2f] transition-colors shadow-lg hover:shadow-xl">
        <span data-node="hero_cta_text" data-node-type="text" data-node-label="Hero CTA Text" data-node-default="Explore Solutions">{{hero_cta_text}}</span>
      </a>
      {{/if}}
    </div>
  </div>

  <!-- Scalloped Cloud Bottom Decoration (CSS-based) -->
  <div class="absolute bottom-0 z-20">
    <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767346768/seltrix/templates/ss-agriculture-template/bottom-rounds.svg" alt="Bottom Rounds" class="h-auto w-[100vw]">
  </div>
</section>