---
import { Image } from "astro:assets";
import LogoHSEQXl from "../assets/images/Logo_HSEQ.png";
import { menuItems } from "../data/navMenu";
import { menuPublicEmployeesItems } from "../data/navMenuEmployees";

const currentPath = Astro.url.pathname;
---

<header
  class="sticky top-0 py-5 border-transparent border-b z-20 transition-all"
  id="navbar"
>
  <div class="max-w-screen-2xl mx-auto px-5">
    <div
      class="flex flex-col lg:flex-row justify-between items-center relative z-10"
    >
      <div class="flex w-full lg:w-auto items-center justify-between">
        <a
          href="/"
          class="text-lg flex items-center transition focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-corporative-blue focus-visible:outline-none rounded-full px-2 -ml-2"
        >
          <Image
            src={LogoHSEQXl}
            alt={"Logo HSEQ xl"}
            width={180}
            height={48}
            quality={"max"}
            format="avif"
            densities={[1.5, 2]}
          />
        </a>
        <div
          class="size-10 flex items-center justify-center lg:hidden"
          id="navbar_collapse"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-menu"
            ><line x1="4" x2="20" y1="12" y2="12"></line><line
              x1="4"
              x2="20"
              y1="6"
              y2="6"></line><line x1="4" x2="20" y1="18" y2="18"></line></svg
          >
        </div>
      </div>
      <nav
        class="w-full lg:w-auto mt-2 lg:flex lg:mt-0 h-0 lg:h-full overflow-hidden transition"
        id="navbar_main"
      >
        <ul class="flex flex-col lg:flex-row lg:gap-2">
          <li class="relative z-50 isolate"></li>
          {
            menuItems.map((menu) => (
              <li>
                <a
                  href={menu.href}
                  rel="prefetch"
                  data-astro-reload="true"
                  class={`flex lg:px-1 py-2 text-md ${
                    currentPath === menu.href ? "text-red-600" : "text-gray-600"
                  } hover:text-corporative-red focus-visible:ring-2 focus-visible:ring-offset-2 transition focus-visible:ring-corporative-red focus-visible:outline-none rounded-full`}
                >
                  {menu.label}
                </a>
              </li>
            ))
          }
        </ul>
        <div class="lg:hidden flex items-center mt-3 gap-4">
          {
            menuPublicEmployeesItems.map((publicEmployeeMenu) => (
              <a
                href={publicEmployeeMenu.href}
                class="rounded-full text-center transition focus-visible:ring-2 focus-visible:ring-offset-2 w-full px-5 py-2 bg-corporative-blue text-white"
              >
                {publicEmployeeMenu.label}
              </a>
            ))
          }
        </div>
        <div class="lg:hidden flex items-center mt-3 gap-4">
          <a
            href="https://hseqvirtual.com/"
            target="_blank"
            rel="noopener"
            class="rounded-full text-center transition focus-visible:ring-2 focus-visible:ring-offset-2 w-full px-5 py-2 bg-corporative-blue text-white"
            >HSEQ Virtual</a
          >
        </div>
      </nav>
      <div class="hidden lg:flex items-center gap-2">
        <div class="hidden lg:flex items-center gap-2">
          {
            menuPublicEmployeesItems.map((publicEmployeeMenu) => (
              <a
                href={publicEmployeeMenu.href}
                class="rounded-full text-center transition focus-visible:ring-2 focus-visible:ring-offset-2 w-full px-5 py-2 bg-corporative-blue text-white"
              >
                {publicEmployeeMenu.label}
              </a>
            ))
          }
        </div>
        <div class="hidden lg:flex items-center gap-2">
          <a
            href="https://hseqvirtual.com/"
            target="_blank"
            rel="noopener"
            class="rounded-full text-center transition focus-visible:ring-2 focus-visible:ring-offset-2 w-full px-5 py-2 bg-corporative-blue text-white"
            >HSEQ Virtual</a
          >
        </div>
      </div>
    </div>
  </div>
</header>
<script>
  (function () {
    function initializeNavbarCollapse() {
      const navbar = document.getElementById("navbar_main");
      const collapser = document.getElementById("navbar_collapse");

      if (navbar && collapser) {
        collapser.addEventListener("click", () => {
          navbar.classList.toggle("h-full");
          navbar.classList.toggle("h-0");
        });
      }
    }
    initializeNavbarCollapse();
    document.addEventListener("astro:after-swap", initializeNavbarCollapse);
  })();
</script>
<script is:inline>
  (function () {
    const scrollY = 10;

    const defaultClass = "border-transparent py-5";
    const activeClass = "py-2 bg-white/80 border-gray-200 backdrop-blur-lg";
    let header;

    const animationHeader = (scrollPos) => {
      if (scrollPos > scrollY) {
        header?.classList.remove(...defaultClass.split(" "));
        header?.classList.add("is-active", ...activeClass.split(" "));
        header?.setAttribute("active", "");
      } else {
        header?.classList.remove("is-active", ...activeClass.split(" "));
        header?.classList.add(...defaultClass.split(" "));
        header?.removeAttribute("active");
      }
    };

    const initializeNavbar = () => {
      // Reinicia el estado del header y el scroll
      header = document.getElementById("navbar");
      if (!header) return;

      // Ejecuta la función de animación inicial al cargar
      animationHeader(window.scrollY);

      // Elimina cualquier listener previo para evitar duplicados
      window.removeEventListener("scroll", handleScroll);
      window.addEventListener("scroll", handleScroll, { passive: true });
    };

    const handleScroll = () => {
      requestAnimationFrame(() => {
        animationHeader(window.scrollY);
      });
    };
    initializeNavbar();

    document.addEventListener("astro:after-swap", initializeNavbar);
  })();
</script>