<section
  class="w-full pt-36 md:pt-40 lg:pt-44 pb-5 md:pb-24 lg:pb-32 relative overflow-hidden"
  data-component-type="Content"
>
  <!-- ===========================================
     BACKGROUND IMAGE (NOW DYNAMIC)
=========================================== -->
  <div class="absolute inset-0 top-40 m-auto pointer-events-none z-[1]">
    <img
      src="{{hero_bg_image}}"
      class="w-full h-auto block"
      alt="Background Grid"
      data-node="hero_bg_image"
      data-node-type="file"
      data-node-label="Hero Background Image"
      data-node-default="./assets/Frame 115.png"
    />
  </div>

  <!-- ===========================================
     TEXT SECTION
=========================================== -->
  <div class="max-w-[1100px] mx-auto px-4 md:px-16 lg:px-24 text-center relative z-[5]">
    <div
      class="inline-block font-['Cabin'] text-lg md:text-xl lg:text-2xl font-normal text-white py-2 px-4 md:px-5 bg-white/[0.09] rounded-xl backdrop-blur-[10px] mb-6"
      data-node="hero_tag"
      data-node-type="text"
      data-node-label="Hero Tagline"
      data-node-default="Marketing that works"
    >
      {{hero_tag}}
    </div>

    <h1
      class="font-['Cabin'] text-[28px] md:text-[40px] lg:text-[52px] xl:text-[64px] font-medium leading-[95%] md:leading-[105%] text-white mb-6 md:mb-8"
      data-node="hero_title"
      data-node-type="text"
      data-node-label="Hero Title"
      data-node-default="Strategy-led growth for brands that want measurable outcomes."
    >
      {{hero_title}}
    </h1>

    <p
      class="font-['Cabin'] text-lg md:text-xl lg:text-2xl font-normal text-[#7e7e7e] mb-8 md:mb-10"
      data-node="hero_subtext"
      data-node-type="textarea"
      data-node-label="Hero Description"
      data-node-default="We help businesses attract the right audience, convert intent into action, and scale sustainably using data-backed marketing systems; not guesswork."
    >
      {{hero_subtext}}
    </p>

    <!-- CTA BUTTON -->
    <a
      href="{{hero_cta_link}}"
      class="w-[240px] sm:w-[280px] md:w-[350px] lg:w-[360px] xl:w-[410px] h-12 md:h-[52px] lg:h-14 rounded-xl bg-[#d3ff5b] py-2.5 px-4 flex justify-center items-center gap-3 mx-auto font-['Cabin'] text-[15px] md:text-xl lg:text-[22px] xl:text-2xl text-black transition-opacity duration-300 hover:opacity-85"
      data-node="hero_cta_link"
      data-node-type="page_links"
      data-node-label="Hero CTA Link"
      data-node-default="#"
    >
      <span
        data-node="hero_cta_text"
        data-node-type="text"
        data-node-label="Hero CTA Text"
        data-node-default="Let's Build Your Growth Engine"
      >
        {{hero_cta_text}}
      </span>

      <img
        src="{{hero_cta_icon}}"
        class="h-auto"
        data-node="hero_cta_icon"
        data-node-type="file"
        data-node-label="Hero CTA Icon"
        data-node-default="./assets/Hero btn arrw.svg"
      />
    </a>
  </div>

  <!-- ===========================================
     VIDEO SECTION
=========================================== -->
  <div class="w-full px-4 md:px-16 lg:px-24 mt-16 md:mt-20 relative z-[5]">
    <div
      class="video-thumb relative w-full rounded-[22px] md:rounded-[28px] lg:rounded-[30px] xl:rounded-[36px] overflow-hidden cursor-pointer"
      id="videoThumbnail"
    >
      <img
        src="{{hero_video_thumb}}"
        class="w-full block rounded-[22px] md:rounded-[28px] lg:rounded-[30px] xl:rounded-[36px]"
        data-node="hero_video_thumb"
        data-node-type="file"
        data-node-label="Video Thumbnail"
        data-node-default="./assets/Hero-video-banner.webp"
      />

      <!-- PLAY BUTTON -->
      <button
        class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[140px] sm:w-[160px] md:w-[180px] lg:w-[200px] xl:w-[226px] h-auto rounded-[13px] border-none flex justify-center items-center cursor-pointer"
        id="playVideoBtn"
      >
        <img
          src="{{hero_play_icon}}"
          class="w-full"
          data-node="hero_play_icon"
          data-node-type="file"
          data-node-label="Play Button Icon"
          data-node-default="./assets/play icon.svg"
        />
      </button>
    </div>

    <!-- VIDEO PLAYER -->
    <video
      id="heroVideo"
      class="w-full rounded-[22px] md:rounded-[28px] lg:rounded-[30px] xl:rounded-[36px] hidden"
      controls
    >
      <source
        src="{{hero_video_url}}"
        type="video/mp4"
        data-node="hero_video_url"
        data-node-type="url"
        data-node-label="Hero Video URL"
        data-node-default="https://www.w3schools.com/html/mov_bbb.mp4"
      />
    </video>
  </div>

  <!-- ===========================================
     VIDEO PLAY SCRIPT
=========================================== -->
  <script>
    const playBtn = document.getElementById("playVideoBtn");
    const thumb = document.getElementById("videoThumbnail");
    const video = document.getElementById("heroVideo");

    playBtn.addEventListener("click", function () {
      thumb.style.display = "none";
      video.classList.remove("hidden");
      video.play();
    });
  </script>
</section>
