<!-- 
  Navbar Component
  Responsive navbar with hamburger menu
-->
<nav data-component-type="Navigation"
  class="navbar bg-[#F6F6F6] text-[#4E4E4E] py-[10px] fixed top-0 left-0 right-0 z-50 transition-all duration-300">
  <div class="max-w-[90%] mx-auto px-4 py-4 flex justify-between items-center">
    <!-- Logo -->
    <div class="z-50">
      <img data-node="logo" data-node-type="file" data-node-label="Logo" data-node-default="../assets/Logo.png"
        src="{{logo}}" alt="Logo" class="h-10 w-auto" />
    </div>

    <!-- Desktop Menu -->
    <ul class="hidden lg:flex space-x-8 items-center">
      {{#if show_nav_item_1}}
      <li>
        <a data-node="nav_item_1" data-node-type="page_links" data-node-label="Nav Link 1" href="{{nav_item_1}}"
          data-node-default="#" class="hover:text-[#193A3F] text-[#111111]">
          <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>
      </li>
      {{/if}}
      {{#if show_nav_item_2}}
      <li>
        <a data-node="nav_item_2" data-node-type="page_links" data-node-label="Nav Link 2" href="{{nav_item_2}}"
          data-node-default="#" class="hover:text-[#193A3F]">
          <span data-node="nav_item_2_text" data-node-type="text" data-node-label="Nav Link 2 Text"
            data-node-default="Courses">{{nav_item_2_text}}</span>
        </a>
      </li>
      {{/if}}
      {{#if show_nav_item_3}}
      <li>
        <a data-node="nav_item_3" data-node-type="page_links" data-node-label="Nav Link 3" href="{{nav_item_3}}"
          data-node-default="#" class="hover:text-[#193A3F]">
          <span data-node="nav_item_3_text" data-node-type="text" data-node-label="Nav Link 3 Text"
            data-node-default="Events">{{nav_item_3_text}}</span>
        </a>
      </li>
      {{/if}}
      {{#if show_nav_item_4}}
      <li>
        <a data-node="nav_item_4" data-node-type="page_links" data-node-label="Nav Link 4" href="{{nav_item_4}}"
          data-node-default="#" class="hover:text-[#193A3F]">
          <span data-node="nav_item_4_text" data-node-type="text" data-node-label="Nav Link 4 Text"
            data-node-default="Club">{{nav_item_4_text}}</span>
        </a>
      </li>
      {{/if}}

    </ul>

    <!-- Desktop CTA -->
    {{#if show_button}}
    <div class="hidden lg:block">
      <a data-node="button" data-node-type="page_links" data-node-label="Button" href="{{button}}" data-node-default="#"
        class=" text-white border bg-[#019D76] border-white hover:text-black  px-6 py-3 font-medium hover:bg-gray-200 transition rounded-[30px]">
        <span data-node="button_text" data-node-type="text" data-node-label="Button Text"
          data-node-default="Join Now">{{button_text}}</span>
      </a>
    </div>
    {{/if}}
  </div>
</nav>

<!-- Mobile Menu Button (FIXED) -->
<button class="mobile-menu-btn lg:hidden fixed top-4 right-4 z-[100] text-white focus:outline-none">
  <svg class="hamburger-icon h-8 w-8 stroke-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
    stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
  </svg>

  <svg class="close-icon h-8 w-8 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
    stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
  </svg>
</button>

<!-- Mobile Menu Overlay -->
<div class="mobile-menu fixed inset-0 bg-black/95 transform translate-x-full
         transition-transform duration-300 lg:hidden flex flex-col
         justify-center items-center space-y-8 z-[60]">
  {{#if show_mobile_nav_item_1}}


  <a data-node="mobile_nav_item_1" data-node-type="page_links" data-node-label="Mobile Nav Link 1"
    href="{{mobile_nav_item_1}}" data-node-default="#" class="text-white text-2xl">
    <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 data-node="mobile_nav_item_2" data-node-type="page_links" data-node-label="Mobile Nav Link 2"
    href="{{mobile_nav_item_2}}" data-node-default="#" class="text-white text-2xl">
    <span data-node="mobile_nav_item_2_text" data-node-type="text" data-node-label="Mobile Nav Link 2 Text"
      data-node-default="About Us">{{mobile_nav_item_2_text}}</span>
  </a>
  {{/if}}

  {{#if show_mobile_nav_item_3}}


  <a data-node="mobile_nav_item_3" data-node-type="page_links" data-node-label="Mobile Nav Link 3"
    href="{{mobile_nav_item_3}}" data-node-default="#" class="text-white text-2xl">
    <span data-node="mobile_nav_item_3_text" data-node-type="text" data-node-label="Mobile Nav Link 3 Text"
      data-node-default="Events">{{mobile_nav_item_3_text}}</span>
  </a>
  {{/if}}

  {{#if show_mobile_nav_item_4}}

  <a data-node="mobile_nav_item_4" data-node-type="page_links" data-node-label="Mobile Nav Link 4"
    href="{{mobile_nav_item_4}}" data-node-default="#" class="text-white text-2xl">
    <span data-node="mobile_nav_item_4_text" data-node-type="text" data-node-label="Mobile Nav Link 4 Text"
      data-node-default="Club">{{mobile_nav_item_4_text}}</span>
  </a>
  {{/if}}

  {{#if show_mobile_button}}
  <a data-node="button" data-node-type="page_links" data-node-label="Button" href="{{button}}" data-node-default="#"
    class=" text-white border bg-[#019D76] border-white hover:text-black  px-6 py-3 font-medium hover:bg-gray-200 transition rounded-[30px]">
    <span data-node="button_text" data-node-type="text" data-node-label="Button Text"
      data-node-default="Join Now">{{button_text}}</span>
  </a>
  {{/if}}
</div>

<!-- Script -->
<script>
  const btn = document.querySelector(".mobile-menu-btn");
  const menu = document.querySelector(".mobile-menu");
  const hamburger = btn.querySelector(".hamburger-icon");
  const closeIcon = btn.querySelector(".close-icon");

  btn.addEventListener("click", () => {
    const isOpen = !menu.classList.contains("translate-x-full");

    menu.classList.toggle("translate-x-full");
    document.body.classList.toggle("overflow-hidden");

    hamburger.classList.toggle("hidden");
    closeIcon.classList.toggle("hidden");
  });

  // Close menu when clicking links
  document.querySelectorAll(".mobile-menu a").forEach(link => {
    link.addEventListener("click", () => {
      menu.classList.add("translate-x-full");
      document.body.classList.remove("overflow-hidden");
      hamburger.classList.remove("hidden");
      closeIcon.classList.add("hidden");
    });
  });
</script>