<!-- 
  Navbar Component
  Responsive navbar with hamburger menu
-->
<nav
  data-component-type="Navigation"
  class="navbar bg-transparent text-white fixed top-0 left-0 right-0 z-50 transition-all duration-300"
  style="
    backdrop-filter: blur(3px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background: rgba(30, 41, 59, 0.15);
  "
>
  <div class="container 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 md: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-gray-300 transition-colors"
        >
          <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-gray-300 transition-colors"
        >
          <span
            data-node="nav_item_2_text"
            data-node-type="text"
            data-node-label="Nav Link 2 Text"
            data-node-default="About Us"
            >{{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-gray-300 transition-colors"
        >
          <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-gray-300 transition-colors"
        >
          <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}} {{#if show_nav_item_5}}
      <li>
        <a
          data-node="nav_item_5"
          data-node-type="page_links"
          data-node-label="Nav Link 5"
          href="{{nav_item_5}}"
          data-node-default="#"
          class="hover:text-gray-300 transition-colors"
        >
          <span
            data-node="nav_item_5_text"
            data-node-type="text"
            data-node-label="Nav Link 5 Text"
            data-node-default="Contact"
            >{{nav_item_5_text}}</span
          >
        </a>
      </li>
      {{/if}}
    </ul>

    <!-- Desktop CTA -->
    <div class="hidden md:block">
      {{#if show_button}}
      <button
        data-node="button"
        data-node-type="page_links"
        data-node-label="Button"
        href="{{button}}"
        data-node-default="#"
        class="bg-white text-black border border-white px-6 py-2 font-medium hover:bg-gray-200 transition-colors"
      >
        <span data-node="button_text" data-node-type="text" data-node-label="Button Text" data-node-default="Join Now"
          >{{button_text}}</span
        >
      </button>
      {{/if}}
    </div>

    <!-- Mobile Menu Button -->
    <button class="mobile-menu-btn md:hidden z-[70] text-white focus:outline-none">
      <svg
        class="hamburger-icon h-8 w-8"
        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>
  </div>
</nav>

<!-- Mobile Menu Overlay - OUTSIDE nav to avoid backdrop-filter stacking issues -->
<div
  class="mobile-menu fixed inset-0 bg-black/95 transform translate-x-full transition-transform duration-300 md:hidden flex flex-col justify-center items-center space-y-8 z-[60] p-4 h-[calc(100vh-4rem)]"
>
  {{#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 font-medium hover:text-gray-300"
  >
    <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 font-medium hover:text-gray-300"
  >
    <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 font-medium hover:text-gray-300"
  >
    <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 font-medium hover:text-gray-300"
  >
    <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_nav_item_5}}
  <a
    data-node="mobile_nav_item_5"
    data-node-type="page_links"
    data-node-label="Mobile Nav Link 5"
    href="{{mobile_nav_item_5}}"
    data-node-default="#"
    class="text-white text-2xl font-medium hover:text-gray-300"
  >
    <span
      data-node="mobile_nav_item_5_text"
      data-node-type="text"
      data-node-label="Mobile Nav Link 5 Text"
      data-node-default="Contact"
      >{{mobile_nav_item_5_text}}</span
    >
  </a>
  {{/if}} {{#if show_mobile_button}}
  <button
    data-node="mobile_button"
    data-node-type="page_links"
    data-node-label="Mobile CTA Button"
    href="{{mobile_button}}"
    data-node-default="#"
    class="bg-white text-black px-8 py-3 text-lg font-medium mt-4"
  >
    <span
      data-node="mobile_button_text"
      data-node-type="text"
      data-node-label="Mobile CTA Button Text"
      data-node-default="Join Now"
      >{{mobile_button_text}}</span
    >
  </button>
  {{/if}}
</div>

<script>
  var btn = document.querySelector(".mobile-menu-btn");
  var menu = document.querySelector(".mobile-menu");

  console.log(btn, menu);

  if (btn && menu) {
    btn.addEventListener("click", function () {
      console.log("Mobile menu clicked");
      var isOpen = menu.classList.contains("translate-x-full");
      menu.classList.toggle("translate-x-full");

      // Lock/unlock body scroll based on menu state
      if (isOpen) {
        // Menu is opening (was closed, translate-x-full being removed)
        document.body.classList.add("overflow-hidden");
      } else {
        // Menu is closing (was open, translate-x-full being added)
        document.body.classList.remove("overflow-hidden");
      }

      var hamburger = btn.querySelector(".hamburger-icon");
      var close = btn.querySelector(".close-icon");
      if (hamburger) hamburger.classList.toggle("hidden");
      if (close) close.classList.toggle("hidden");
    });
  }
</script>
