---
import { Image } from "astro:assets";
import whiteLogoHorizontal from "../../images/logos/white_logo_horizontal.svg";
import pages from "../../data/pages.json";
---

<div class="w-full">
  <div
    class="flex justify-between items-center bg-black my-[1%] mx-[2.5%] py-[0.5%] px-[1%] md:rounded-full md:border-[0.1vw]"
  >
    <a href="/" class="hover:opacity-60 duration-300">
      <Image
        class="w-[15vw] md:block hidden"
        src={whiteLogoHorizontal}
        alt="IEEE UCSD Logo"
      />
      <Image
        class="w-[40vw] md:hidden block"
        src={whiteLogoHorizontal}
        alt="IEEE UCSD Logo"
      />
    </a>

    <!-- Desktop Navigation -->
    <div class="hidden md:flex md:w-[55%] md:justify-between">
      {
        pages.map((page) => (
          <a
            href={page.path}
            class={`uppercase rounded-full duration-300 px-[1.5vw] py-[0.2vw] text-[1.2vw] text-nowrap
                            ${
                              page.name === "Online Store"
                                ? "bg-ieee-yellow text-black hover:opacity-70"
                                : "text-white border-white hover:opacity-50 border-[0.1vw] font-light"
                            }`}
          >
            {page.name}
          </a>
        ))
      }
    </div>

    <!-- Mobile Hamburger/Close Button -->
    <button
      id="menu-btn"
      class="md:hidden text-white p-2 flex justify-center items-center focus:outline-none relative z-[60] scale-150"
      aria-label="Toggle menu"
    >
      <!-- Hamburger Icon -->
      <svg
        class="w-6 h-6 menu-icon"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M4 6h16M4 12h16M4 18h16"></path>
      </svg>
      <!-- Close Icon -->
      <svg
        class="w-6 h-6 close-icon hidden"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M6 18L18 6M6 6l12 12"></path>
      </svg>
    </button>
  </div>

  <!-- Mobile Menu -->
  <div
    id="mobile-menu"
    class="fixed inset-0 z-[51] hidden xl:hidden motion-safe:transition-transform motion-safe:duration-300 translate-x-full"
  >
    <div
      class="flex flex-col items-center min-h-screen justify-center bg-black py-20 px-4 space-y-8"
    >
      {
        pages.map((page) => (
          <a
            href={page.path}
            class={`block py-4 px-12 text-center rounded-[3rem] motion-safe:transition-colors motion-safe:duration-200 uppercase font-bold text-2xl w-full max-w-md
                            ${
                              page.name === "Online Store"
                                ? "bg-[#f3c135] text-black border-[#f3c135] hover:bg-[#dba923] hover:border-[#dba923]"
                                : "text-white hover:text-gray-300 border-white border-2"
                            }`}
          >
            {page.name}
          </a>
        ))
      }
    </div>
  </div>
</div>

<style>
  #mobile-menu.show {
    @apply translate-x-0;
  }
</style>

<script>
  const menuBtn = document.getElementById("menu-btn");
  const mobileMenu = document.getElementById("mobile-menu");
  const menuIcon = document.querySelector(".menu-icon");
  const closeIcon = document.querySelector(".close-icon");

  function toggleMenu(show: boolean) {
    if (show) {
      mobileMenu?.classList.remove("hidden");
      menuIcon?.classList.add("hidden");
      closeIcon?.classList.remove("hidden");
      document.body.style.overflow = "hidden";

      setTimeout(() => {
        mobileMenu?.classList.add("show");
      }, 10);
    } else {
      mobileMenu?.classList.remove("show");
      menuIcon?.classList.remove("hidden");
      closeIcon?.classList.add("hidden");
      document.body.style.overflow = "";

      setTimeout(() => {
        mobileMenu?.classList.add("hidden");
      }, 100);
    }
  }

  menuBtn?.addEventListener("click", () => {
    const isMenuHidden = mobileMenu?.classList.contains("hidden") ?? true;
    toggleMenu(isMenuHidden);
  });

  // Close menu when clicking outside
  document.addEventListener("click", (e) => {
    if (
      !mobileMenu?.contains(e.target as Node) &&
      !menuBtn?.contains(e.target as Node) &&
      !mobileMenu?.classList.contains("hidden")
    ) {
      toggleMenu(false);
    }
  });
</script>
