document.addEventListener("DOMContentLoaded", () => {
  const menuToggle = document.getElementById("menuToggle");
  const mainNav = document.getElementById("mainNav");
  const dropdownToggle = document.getElementById("servicesToggle");
  const dropdownParent = dropdownToggle ? dropdownToggle.closest(".has-dropdown") : null;
  const navLinks = document.querySelectorAll(".main-nav a[href^='#']");
  const mobileBreakpoint = 900;

  function closeMobileMenu() {
    if (!mainNav || !menuToggle) return;
    mainNav.classList.remove("is-open");
    menuToggle.classList.remove("is-active");
    menuToggle.setAttribute("aria-expanded", "false");
  }

  function openMobileMenu() {
    if (!mainNav || !menuToggle) return;
    mainNav.classList.add("is-open");
    menuToggle.classList.add("is-active");
    menuToggle.setAttribute("aria-expanded", "true");
  }

  function closeDropdown() {
    if (!dropdownParent || !dropdownToggle) return;
    dropdownParent.classList.remove("is-open");
    dropdownToggle.setAttribute("aria-expanded", "false");
  }

  if (menuToggle && mainNav) {
    menuToggle.addEventListener("click", () => {
      const isOpen = mainNav.classList.contains("is-open");

      if (isOpen) {
        closeMobileMenu();
        closeDropdown();
      } else {
        openMobileMenu();
      }
    });
  }

  if (dropdownToggle && dropdownParent) {
    dropdownToggle.addEventListener("click", (event) => {
      if (window.innerWidth <= mobileBreakpoint) {
        event.preventDefault();

        const isOpen = dropdownParent.classList.contains("is-open");

        if (isOpen) {
          closeDropdown();
        } else {
          dropdownParent.classList.add("is-open");
          dropdownToggle.setAttribute("aria-expanded", "true");
        }
      }
    });
  }

  navLinks.forEach((link) => {
    link.addEventListener("click", () => {
      if (window.innerWidth <= mobileBreakpoint) {
        closeMobileMenu();
        closeDropdown();
      }
    });
  });

  document.addEventListener("click", (event) => {
    if (
      window.innerWidth <= mobileBreakpoint &&
      mainNav &&
      menuToggle &&
      !mainNav.contains(event.target) &&
      !menuToggle.contains(event.target)
    ) {
      closeMobileMenu();
      closeDropdown();
    }
  });

  window.addEventListener("resize", () => {
    if (window.innerWidth > mobileBreakpoint) {
      closeMobileMenu();
      closeDropdown();
    }
  });
});