(() => {
  const header = document.querySelector("[data-header-nav]");
  const menuButton = document.querySelector("[data-nav-btn]");
  const headerButton = document.querySelector("[data-nav-cta]");
  const menu = document.querySelector("[data-menu]");
  const logoSvg = document.querySelector("[data-nav-logo-svg]");
  const menuLinks = document.querySelectorAll("[data-menu-link]");
  const hero = document.querySelector("[data-hero]");
  const dynamicContainer = document.querySelector("[data-dynamic-container]");

  if (!header || !menuButton || !menu) return;

  const isLightTheme =
    header.getAttribute("theme-color-variant")?.toLowerCase() === "true";

  let isMenuOpen = false;
  let heroEndPosition = 16;
  let isScrolled = false;

  const calculateHeroEndPosition = () => {
    if (!hero) {
      heroEndPosition = 16;
      return;
    }

    const heroRect = hero.getBoundingClientRect();

    heroEndPosition = window.scrollY + heroRect.top + heroRect.height;
  };

  const updateHeaderState = () => {
    const useDarkTheme = isMenuOpen || isScrolled || !isLightTheme;

    header.classList.toggle("is-dark", useDarkTheme);
    logoSvg?.classList.toggle("is-dark", useDarkTheme);
    menuButton.classList.toggle("is-invert", useDarkTheme);
    headerButton?.classList.toggle("is-invert", useDarkTheme);

    header.classList.toggle("is-scrolled", isScrolled);
    dynamicContainer?.classList.toggle("is-visible", isScrolled);

    menuButton.classList.toggle("menu-open", isMenuOpen);
    menu.classList.toggle("menu-active", isMenuOpen);
    document.body.classList.toggle("no-scroll", isMenuOpen);

    menuButton.setAttribute("aria-expanded", String(isMenuOpen));

    menu.setAttribute("aria-hidden", String(!isMenuOpen));
  };

  const checkScrollPosition = () => {
    const newScrolledState = window.scrollY >= heroEndPosition;

    if (newScrolledState === isScrolled) return;

    isScrolled = newScrolledState;
    updateHeaderState();
  };

  const closeMenu = () => {
    isMenuOpen = false;
    updateHeaderState();
  };

  menuButton.addEventListener("click", () => {
    isMenuOpen = !isMenuOpen;
    updateHeaderState();
  });

  menuLinks.forEach((link) => {
    link.addEventListener("click", closeMenu);
  });

  document.addEventListener("keydown", (event) => {
    if (event.key === "Escape") {
      closeMenu();
    }
  });

  window.addEventListener("scroll", checkScrollPosition, { passive: true });

  window.addEventListener("resize", () => {
    calculateHeroEndPosition();
    checkScrollPosition();
  });

  window.addEventListener("load", () => {
    calculateHeroEndPosition();
    checkScrollPosition();
  });

  calculateHeroEndPosition();
  isScrolled = window.scrollY >= heroEndPosition;
  updateHeaderState();
})();