document.addEventListener("DOMContentLoaded", function () {

	const openNav = document.querySelector(".mobile-btn")
  const closeNav = document.querySelector(".mobile-btn-close")
  const elNav = document.querySelector(".mobile-fullscreen-menu")
  
  openNav.addEventListener("click", function() {
  	elNav.style.display = 'flex'
    setTimeout(() => {
       elNav.style.opacity = '1'
    }, 10)
  })
  
  closeNav.addEventListener("click", function() {
  	elNav.style.opacity = '0'
     setTimeout(() => {
       elNav.style.display = 'none'
    }, 400)
  })

})

document.addEventListener("DOMContentLoaded", function () {
  
  const myNav = document.querySelector(".my--inner--nav");
  const openServices = document.querySelectorAll(".dropdown--toggle.services");
  const openProduct = document.querySelectorAll(".dropdown--toggle.product");
  const openAbout = document.querySelectorAll(".dropdown--toggle.about");
  const megaMenu = document.querySelectorAll(".mega--menu");
  const navLogoOne = document.querySelectorAll('.nav-logo-one');
  const navSignLink = document.querySelector('.nav-sign-link');
  const navLink = document.querySelectorAll('.nav--link');
  const navBtn = document.querySelector('.nav--btn');

		function updatePadding() {
    
      const isServicesOpen = [...openServices].some((el) => el.classList.contains("w--open"));
      const isProductOpen = [...openProduct].some((el) => el.classList.contains("w--open"));
      const isAboutOpen = [...openAbout].some((el) => el.classList.contains("w--open"));

      if (window.innerWidth > 991) {
          if (isProductOpen) {
              myNav.style.paddingBottom = "315px";
          } else if (isServicesOpen) {
              myNav.style.paddingBottom = "140px";
          } else if (isAboutOpen) {
              myNav.style.paddingBottom = "140px";
          }
          else {
              myNav.style.paddingBottom = "13px";
          }
      }

      // Atualizar opacidades independentemente da largura da tela
      if (isProductOpen) {
          openProduct.forEach((el) => el.style.removeProperty("opacity"));
          openServices.forEach((el) => (el.style.opacity = "0.6"));
          openAbout.forEach((el) => (el.style.opacity = "0.6"));
      } else if (isServicesOpen) {
          openServices.forEach((el) => el.style.removeProperty("opacity"));
          openProduct.forEach((el) => (el.style.opacity = "0.6"));
          openAbout.forEach((el) => (el.style.opacity = "0.6"));
      } else if (isAboutOpen) {
          openAbout.forEach((el) => el.style.removeProperty("opacity"));
          openServices.forEach((el) => (el.style.opacity = "0.6"));
          openProduct.forEach((el) => (el.style.opacity = "0.6"));
      } else {
          openServices.forEach((el) => el.style.removeProperty("opacity"));
          openProduct.forEach((el) => el.style.removeProperty("opacity"));
          openAbout.forEach((el) => el.style.removeProperty("opacity"));

      }

      // Atualiza a opacidade dos links do menu
      if (isProductOpen || isServicesOpen || isAboutOpen ) {
          navLink.forEach((el) => (el.style.opacity = "0.6"));
      } else {
          navLink.forEach((el) => el.style.removeProperty("opacity"));
      }
  }

  function observeDropdown(dropdowns) {
      dropdowns.forEach((mega) => {
          const observer = new MutationObserver(updatePadding);
          observer.observe(mega, { attributes: true, attributeFilter: ["class"] });
      });
  }

  observeDropdown(openServices);
  observeDropdown(openProduct);
  observeDropdown(openAbout);


function handleScroll() {
    if (window.scrollY > 180) {
        // When scrolling - these styles always change regardless of screen size
        
        navSignLink.style.display = 'none';
        navBtn.style.display = 'block';

        // Logo changes only if screen width is > 768px
        if (window.innerWidth > 991) {
            navLogoOne.forEach((logo) => (logo.style.display = "none"));
            myNav.style.maxWidth = '800px';
            megaMenu.forEach((menu) => (menu.style.width = '700px'));
        }
    } else {
        // Reset styles when at top of page
        navSignLink.style.display = 'block';
        navBtn.style.display = 'none';

        // Logo changes only if screen width is > 768px
        if (window.innerWidth > 991) {
            navLogoOne.forEach((logo) => (logo.style.display = "inline-block"));
            myNav.style.maxWidth = '1140px';
            megaMenu.forEach((menu) => (menu.style.width = '780px'));

        }
    }
}
  
// Add scroll event listener
window.addEventListener('scroll', handleScroll);

// Add resize event listener to handle screen width changes
window.addEventListener('resize', handleScroll);

// Initial call to set correct state on page load
handleScroll();

});