document.addEventListener("DOMContentLoaded", function () {
  const menuButtons = document.querySelectorAll('[id^="dropdown-button-"]');
  const megaMenus = document.querySelectorAll('[id^="mega-menu-"]');

  menuButtons.forEach((button) => {
    button.addEventListener("mouseenter", function () {
      const menuNumber = this.id.split("-")[2];
      const targetMenu = document.getElementById(`mega-menu-${menuNumber}`);
      megaMenus.forEach((menu) => menu.classList.add("hidden"));
      if (targetMenu) {
        targetMenu.classList.remove("hidden");
      }
    });
  });

  const nav = document.querySelector("nav");
  nav.addEventListener("mouseleave", function () {
    megaMenus.forEach((menu) => menu.classList.add("hidden"));
  });

  megaMenus.forEach((menu) => {
    menu.addEventListener("mouseenter", function () {
      this.classList.remove("hidden");
    });
    menu.addEventListener("mouseleave", function () {
      this.classList.add("hidden");
    });
  });
});