<!-- 
  Navbar Component
  Responsive navbar with mobile menu
-->
<header data-component-type="Navigation" class="fixed top-2 left-0 right-0 z-[9999] mt-[10px]">
  <nav
    class="max-w-[1400px] mx-3 md:mx-3 sm:mx-3 lg:mx-3 xl:mx-auto px-5 py-0 h-[100px] flex sticky top-10 rounded-[20px] justify-between items-center bg-[#1A1615] shadow-lg backdrop-blur"
  >
    <!-- MOBILE MENU OPEN BTN -->
    <button id="menu-btn" class="lg:hidden focus:outline-none order-1">
      <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>

    <!-- LOGO -->
    <div class="flex items-center gap-2 text-2xl font-bold order-2 md:order-1 ml-auto md:ml-0">
      <img
        data-node="logo_image"
        data-node-type="file"
        data-node-label="Main Logo"
        data-node-default="../assets/Logo.png"
        src="{{logo_image}}"
        class="w-[130px] md:w-[180px] h-auto"
        alt="Site Logo"
      />
    </div>

    <!-- NAV LINKS -->
    <ul class="hidden lg:flex justify-evenly w-full max-w-[80%] order-2 items-center">
      {{#if show_nav_link_1}}
      <li>
        <a
          data-node="nav_link_1"
          data-node-type="page_links"
          data-node-label="Nav Link 1"
          data-node-default="home"
          href="{{nav_link_1}}"
          class="text-[20px] text-white font-bold"
        >
          <span
            data-node="nav_link_1_text"
            data-node-type="text"
            data-node-label="Nav Link 1 Text"
            data-node-default="Home"
            >{{nav_link_1_text}}</span
          >
        </a>
      </li>
      {{/if}} {{#if show_nav_link_2}}
      <li>
        <a
          data-node="nav_link_2"
          data-node-type="page_links"
          data-node-label="Nav Link 2"
          data-node-default="features"
          href="{{nav_link_2}}"
          class="text-[20px] text-[#9D9D9D]"
        >
          <span
            data-node="nav_link_2_text"
            data-node-type="text"
            data-node-label="Nav Link 2 Text"
            data-node-default="Features"
            >{{nav_link_2_text}}</span
          >
        </a>
      </li>
      {{/if}} {{#if show_nav_link_3}}
      <li>
        <a
          data-node="nav_link_3"
          data-node-type="page_links"
          data-node-label="Nav Link 3"
          data-node-default="pricing"
          href="{{nav_link_3}}"
          class="text-[20px] text-[#9D9D9D]"
        >
          <span
            data-node="nav_link_3_text"
            data-node-type="text"
            data-node-label="Nav Link 3 Text"
            data-node-default="Pricing"
            >{{nav_link_3_text}}</span
          >
        </a>
      </li>
      {{/if}} {{#if show_nav_link_4}}
      <li>
        <a
          data-node="nav_link_4"
          data-node-type="page_links"
          data-node-label="Nav Link 4"
          data-node-default="contactus"
          href="{{nav_link_4}}"
          class="text-[20px] text-[#9D9D9D]"
        >
          <span
            data-node="nav_link_4_text"
            data-node-type="text"
            data-node-label="Nav Link 4 Text"
            data-node-default="Contact Us"
            >{{nav_link_4_text}}</span
          >
        </a>
      </li>
      {{/if}} {{#if show_nav_link_5}}
      <li>
        <a
          data-node="nav_link_5"
          data-node-type="page_links"
          data-node-label="Nav Link 5"
          data-node-default="aboutus"
          href="{{nav_link_5}}"
          class="text-[20px] text-[#9D9D9D]"
        >
          <span
            data-node="nav_link_5_text"
            data-node-type="text"
            data-node-label="Nav Link 5 Text"
            data-node-default="About Us"
            >{{nav_link_5_text}}</span
          >
        </a>
      </li>
      {{/if}} {{#if show_signup_button}}
      <button
        data-node="signup_button"
        data-node-type="page_links"
        data-node-label="Signup Button"
        data-node-default="#"
        href="{{signup_button}}"
        class="hidden md:block bg-[#5F4BE2] text-white px-[30px] py-[10px] rounded-[10px] text-[20px]"
      >
        <span
          data-node="signup_button_text"
          data-node-type="text"
          data-node-label="Signup Button Text"
          data-node-default="Signup for Free"
          >{{signup_button_text}}</span
        >
      </button>
      {{/if}}
    </ul>
  </nav>

  <!-- MOBILE MENU DROPDOWN -->
  <div
    id="mobile-menu"
    class="sm:hidden fixed top-0 left-0 w-64 h-[100vh] bg-[#111111] -translate-x-full transition-transform duration-300 z-[900] absolute w-full"
  >
    <div class="flex justify-between items-center px-6 py-4 border-b border-white">
      <span class="text-xl font-bold text-white">Menu</span>

      <button id="close-btn" class="text-white focus:outline-none">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <ul class="flex flex-col space-y-6 mt-6 px-6">
      {{#if show_m_nav_1}}
      <li>
        <a
          data-node="m_nav_1"
          data-node-type="page_links"
          data-node-label="Mobile Nav 1"
          data-node-default="home"
          href="{{m_nav_1}}"
          class="text-white"
        >
          <span
            data-node="m_nav_1_text"
            data-node-type="text"
            data-node-label="Mobile Nav 1 Text"
            data-node-default="Home"
            >{{m_nav_1_text}}</span
          >
        </a>
      </li>
      {{/if}} {{#if show_m_nav_2}}
      <li>
        <a
          data-node="m_nav_2"
          data-node-type="page_links"
          data-node-label="Mobile Nav 2"
          data-node-default="features"
          href="{{m_nav_2}}"
          class="text-white"
        >
          <span
            data-node="m_nav_2_text"
            data-node-type="text"
            data-node-label="Mobile Nav 2 Text"
            data-node-default="Features"
            >{{m_nav_2_text}}</span
          >
        </a>
      </li>
      {{/if}} {{#if show_m_nav_3}}
      <li>
        <a
          data-node="m_nav_3"
          data-node-type="page_links"
          data-node-label="Mobile Nav 3"
          data-node-default="pricing"
          href="{{m_nav_3}}"
          class="text-white"
        >
          <span
            data-node="m_nav_3_text"
            data-node-type="text"
            data-node-label="Mobile Nav 3 Text"
            data-node-default="Pricing"
            >{{m_nav_3_text}}</span
          >
        </a>
      </li>
      {{/if}} {{#if show_m_nav_4}}
      <li>
        <a
          data-node="m_nav_4"
          data-node-type="page_links"
          data-node-label="Mobile Nav 4"
          data-node-default="contactus"
          href="{{m_nav_4}}"
          class="text-white"
        >
          <span
            data-node="m_nav_4_text"
            data-node-type="text"
            data-node-label="Mobile Nav 4 Text"
            data-node-default="Contact Us"
            >{{m_nav_4_text}}</span
          >
        </a>
      </li>
      {{/if}} {{#if show_m_nav_5}}
      <li>
        <a
          data-node="m_nav_5"
          data-node-type="page_links"
          data-node-label="Mobile Nav 5"
          data-node-default="aboutus"
          href="{{m_nav_5}}"
          class="text-white"
        >
          <span
            data-node="m_nav_5_text"
            data-node-type="text"
            data-node-label="Mobile Nav 5 Text"
            data-node-default="About Us"
            >{{m_nav_5_text}}</span
          >
        </a>
      </li>
      {{/if}} {{#if show_m_signup_btn}}
      <button
        data-node="m_signup_btn"
        data-node-type="page_links"
        data-node-label="Mobile Signup Button"
        data-node-default="#"
        href="{{m_signup_btn}}"
        class="bg-[#5F4BE2] text-white px-[30px] py-[10px] rounded-[10px] text-[20px]"
      >
        <span
          data-node="m_signup_btn_text"
          data-node-type="text"
          data-node-label="Mobile Signup Button Text"
          data-node-default="Signup for Free"
          >{{m_signup_btn_text}}</span
        >
      </button>
      {{/if}}
    </ul>
  </div>
</header>

<!-- Swiper CDN -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script>
  // mobile menu
  const menuBtn = document.getElementById("menu-btn");
  const closeBtn = document.getElementById("close-btn");
  const mobileMenu = document.getElementById("mobile-menu");
  const overlay = document.getElementById("overlay");

  function toggleMenu() {
    mobileMenu.classList.toggle("-translate-x-full");
    if (overlay) overlay.classList.toggle("hidden");
  }

  if (menuBtn) menuBtn.addEventListener("click", toggleMenu);
  if (closeBtn) closeBtn.addEventListener("click", toggleMenu);
  if (overlay) overlay.addEventListener("click", toggleMenu);
</script>
