<header class="w-full fixed top-0 left-0 z-50" data-component-type="Navigation">
  <div class="w-full px-4 md:px-10 lg:px-24 py-6 md:py-8 flex items-center justify-between">
    <!-- LOGO -->
    <img
      src="{{logo}}"
      class="w-12 h-12"
      data-node="logo"
      data-node-type="file"
      data-node-label="Logo"
      data-node-default="../assets/Logo.svg"
    />

    <!-- DESKTOP NAV -->
    <nav class="hidden md:flex items-center gap-5 lg:gap-12">
      {{#if show_nav_item_1}}
      <a
        href="{{nav_item_1}}"
        class="font-['Cabin'] text-[18px] lg:text-[20px] font-normal leading-[100%] text-[#676767] hover:text-white transition-colors duration-300"
        data-node="nav_item_1"
        data-node-type="page_links"
        data-node-label="Nav Link 1"
        data-node-default="Home"
      >
        <span
          data-node="nav_item_1_text"
          data-node-type="text"
          data-node-label="Nav Link 1 Text"
          data-node-default="Home"
          >{{nav_item_1_text}}</span
        >
      </a>
      {{/if}} {{#if show_nav_item_2}}
      <a
        href="{{nav_item_2}}"
        class="font-['Cabin'] text-[18px] lg:text-[20px] font-normal leading-[100%] text-[#676767] hover:text-white transition-colors duration-300"
        data-node="nav_item_2"
        data-node-type="page_links"
        data-node-label="Nav Link 2"
        data-node-default="Services"
      >
        <span
          data-node="nav_item_2_text"
          data-node-type="text"
          data-node-label="Nav Link 2 Text"
          data-node-default="Services"
          >{{nav_item_2_text}}</span
        >
      </a>
      {{/if}} {{#if show_nav_item_3}}
      <a
        href="{{nav_item_3}}"
        class="font-['Cabin'] text-[18px] lg:text-[20px] font-normal leading-[100%] text-[#676767] hover:text-white transition-colors duration-300"
        data-node="nav_item_3"
        data-node-type="page_links"
        data-node-label="Nav Link 3"
        data-node-default="About Us"
      >
        <span
          data-node="nav_item_3_text"
          data-node-type="text"
          data-node-label="Nav Link 3 Text"
          data-node-default="About Us"
          >{{nav_item_3_text}}</span
        >
      </a>
      {{/if}} {{#if show_nav_item_4}}
      <a
        href="{{nav_item_4}}"
        class="font-['Cabin'] text-[18px] lg:text-[20px] font-normal leading-[100%] text-[#676767] hover:text-white transition-colors duration-300"
        data-node="nav_item_4"
        data-node-type="page_links"
        data-node-label="Nav Link 4"
        data-node-default="Our Works"
      >
        <span
          data-node="nav_item_4_text"
          data-node-type="text"
          data-node-label="Nav Link 4 Text"
          data-node-default="Our Works"
          >{{nav_item_4_text}}</span
        >
      </a>
      {{/if}} {{#if show_nav_item_5}}
      <a
        href="{{nav_item_5}}"
        class="font-['Cabin'] text-[18px] lg:text-[20px] font-normal leading-[100%] text-[#676767] hover:text-white transition-colors duration-300"
        data-node="nav_item_5"
        data-node-type="page_links"
        data-node-label="Nav Link 5"
        data-node-default="#"
      >
        <span
          data-node="nav_item_5_text"
          data-node-type="text"
          data-node-label="Nav Link 5 Text"
          data-node-default="Blogs"
          >{{nav_item_5_text}}</span
        >
      </a>
      {{/if}}
    </nav>

    <!-- CTA BUTTON -->
    {{#if show_cta_button}}
    <a
      class="hidden md:flex items-center justify-center bg-[#d3ff5b] py-2.5 px-4 w-[133px] h-11 rounded-xl font-['Cabin'] text-[18px] text-black hover:opacity-85 transition-opacity duration-300"
      href="{{cta_button}}"
      data-node="cta_button"
      data-node-type="page_links"
      data-node-label="CTA Button"
      data-node-default="#"
    >
      <span
        data-node="cta_button_text"
        data-node-type="text"
        data-node-label="CTA Button Text"
        data-node-default="Book a Call"
        >{{cta_button_text}}</span
      >
    </a>
    {{/if}}

    <!-- MOBILE TOGGLE -->
    <button id="menuToggle" class="md:hidden text-white text-3xl">☰</button>
  </div>

  <!-- MOBILE MENU -->
  <div
    id="mobileMenu"
    class="fixed inset-0 w-full h-screen bg-black/[0.88] backdrop-blur-[8px] hidden z-[9999] flex-col justify-center items-center"
  >
    <button id="closeMenu" class="absolute top-10 right-10 text-[38px] text-white bg-transparent border-none">✕</button>

    <div class="flex flex-col items-center gap-7">
      {{#if show_mobile_nav_item_1}}
      <a
        href="{{mobile_nav_item_1}}"
        class="font-['Cabin'] text-[24px] text-white py-2.5 px-10 w-60 text-center rounded-lg transition-all duration-200 hover:bg-white/[0.15]"
        data-node="mobile_nav_item_1"
        data-node-type="page_links"
        data-node-label="Mobile Nav Link 1"
        data-node-default="#"
      >
        <span
          data-node="mobile_nav_item_1_text"
          data-node-type="text"
          data-node-label="Mobile Nav Link 1 Text"
          data-node-default="Home"
          >{{mobile_nav_item_1_text}}</span
        >
      </a>
      {{/if}} {{#if show_mobile_nav_item_2}}
      <a
        href="{{mobile_nav_item_2}}"
        class="font-['Cabin'] text-[24px] text-white py-2.5 px-10 w-60 text-center rounded-lg transition-all duration-200 hover:bg-white/[0.15]"
        data-node="mobile_nav_item_2"
        data-node-type="page_links"
        data-node-label="Mobile Nav Link 2"
        data-node-default="#"
      >
        <span
          data-node="mobile_nav_item_2_text"
          data-node-type="text"
          data-node-label="Mobile Nav Link 2 Text"
          data-node-default="Services"
          >{{mobile_nav_item_2_text}}</span
        >
      </a>
      {{/if}} {{#if show_mobile_nav_item_3}}
      <a
        href="{{mobile_nav_item_3}}"
        class="font-['Cabin'] text-[24px] text-white py-2.5 px-10 w-60 text-center rounded-lg transition-all duration-200 hover:bg-white/[0.15]"
        data-node="mobile_nav_item_3"
        data-node-type="page_links"
        data-node-label="Mobile Nav Link 3"
        data-node-default="#"
      >
        <span
          data-node="mobile_nav_item_3_text"
          data-node-type="text"
          data-node-label="Mobile Nav Link 3 Text"
          data-node-default="About Us"
          >{{mobile_nav_item_3_text}}</span
        >
      </a>
      {{/if}} {{#if show_mobile_nav_item_4}}
      <a
        href="{{mobile_nav_item_4}}"
        class="font-['Cabin'] text-[24px] text-white py-2.5 px-10 w-60 text-center rounded-lg transition-all duration-200 hover:bg-white/[0.15]"
        data-node="mobile_nav_item_4"
        data-node-type="page_links"
        data-node-label="Mobile Nav Link 4"
        data-node-default="#"
      >
        <span
          data-node="mobile_nav_item_4_text"
          data-node-type="text"
          data-node-label="Mobile Nav Link 4 Text"
          data-node-default="Our Works"
          >{{mobile_nav_item_4_text}}</span
        >
      </a>
      {{/if}} {{#if show_mobile_nav_item_5}}
      <a
        href="{{mobile_nav_item_5}}"
        class="font-['Cabin'] text-[24px] text-white py-2.5 px-10 w-60 text-center rounded-lg transition-all duration-200 hover:bg-white/[0.15]"
        data-node="mobile_nav_item_5"
        data-node-type="page_links"
        data-node-label="Mobile Nav Link 5"
        data-node-default="#"
      >
        <span
          data-node="mobile_nav_item_5_text"
          data-node-type="text"
          data-node-label="Mobile Nav Link 5 Text"
          data-node-default="Blogs"
          >{{mobile_nav_item_5_text}}</span
        >
      </a>
      {{/if}} {{#if show_mobile_button}}
      <a
        href="{{mobile_button}}"
        class="mt-5 py-4 px-10 border border-white text-white font-['Cabin'] text-[20px] rounded-[10px]"
        data-node="mobile_button"
        data-node-type="page_links"
        data-node-label="Mobile CTA Button"
        data-node-default="#"
      >
        <span
          data-node="mobile_button_text"
          data-node-type="text"
          data-node-label="Mobile CTA Text"
          data-node-default="Book a Call"
          >{{mobile_button_text}}</span
        >
      </a>
      {{/if}}
    </div>
  </div>

  <script>
    let toggle = document.getElementById("menuToggle");
    let closeBtn = document.getElementById("closeMenu");
    let mobileMenu = document.getElementById("mobileMenu");

    toggle?.addEventListener("click", () => {
      mobileMenu.classList.remove("hidden");
      mobileMenu.classList.add("flex");
    });

    closeBtn?.addEventListener("click", () => {
      mobileMenu.classList.add("hidden");
      mobileMenu.classList.remove("flex");
    });
  </script>
</header>
