document.addEventListener('DOMContentLoaded', () => {
  const isMobile = window.matchMedia('(max-width: 768px)').matches;
  const hoverBtns = document.querySelectorAll('[data-hover-btn]');
  const menuWrappers = document.querySelectorAll('[data-hover-menu]');
  const menuContainers = document.querySelectorAll('[data-hover-menu] .menu-container');
  const navTargetElements = isMobile ? [] : document.querySelectorAll('.nav-target-color');
  let activeMenu = null;
  let menuTimeout;

  const colorAnimations = !isMobile ? {
    scrollTween: null,
    hoverTween: null,
    currentColor: 'white',
    originalColors: new Map(),
    isMenuActive: false,
    forceBlack: false
  } : null;

  function initializeMenus() {
    if (!isMobile) {
      navTargetElements.forEach(el => {
        colorAnimations.originalColors.set(el, window.getComputedStyle(el).color);
      });
      initScrollColorAnimation();
    }

    menuWrappers.forEach(menu => {
      const content = menu.querySelector('.menu-container');
      menu.style.display = 'none';
      gsap.set(content, {
        height: 0,
        opacity: 0,
        y: "-10%",
      });

      const links = menu.querySelectorAll('a');
      links.forEach(link => {
        link.addEventListener('click', e => {
          e.preventDefault();
          e.stopPropagation();
          closeMenu(menu.getAttribute('data-hover-menu'));
        });
      });
    });
  }

  function initScrollColorAnimation() {
    if (isMobile) return;
    document.querySelectorAll(".section_hero").forEach(section => {
      colorAnimations.scrollTween = gsap.timeline({
        scrollTrigger: {
          trigger: section,
          start: "bottom top",
          end: "bottom bottom",
          scrub: 1,
          onUpdate: self => {
            if (!colorAnimations.forceBlack) {
              const progress = self.progress;
              colorAnimations.currentColor = progress > 0.5 ? "black" : "white";
              navTargetElements.forEach(el => {
                el.style.color = progress > 0.5
                  ? "var(--color--black)"
                  : colorAnimations.originalColors.get(el) || "var(--color--white)";
              });
            }
          }
        }
      });
    });
  }

  function setNavColor(forceBlackState) {
    if (isMobile) return;
    colorAnimations.forceBlack = forceBlackState;
    colorAnimations.isMenuActive = forceBlackState;

    colorAnimations.scrollTween?.scrollTrigger?.kill();
    colorAnimations.hoverTween?.kill();

    const targetColor = forceBlackState
      ? "var(--color--black)"
      : (colorAnimations.currentColor === "black" ? "var(--color--black)" : "var(--color--white)");

    colorAnimations.hoverTween = gsap.to(navTargetElements, {
      color: targetColor,
      duration: 0.3,
      ease: 'power2.inOut',
      onComplete: () => {
        if (!forceBlackState) initScrollColorAnimation();
      }
    });
  }

  function getMenuByDataValue(value) {
    return document.querySelector(`[data-hover-menu="${value}"]`);
  }

  function openMenu(value) {
    const menu = getMenuByDataValue(value);
    if (!menu) return;
    const content = menu.querySelector('.menu-container');
    if (!content) return;

    if (activeMenu && activeMenu !== menu) {
      activeMenu.style.zIndex = '-2';
      closeMenu(activeMenu.getAttribute('data-hover-menu'), false);
    }

		menu.style.zIndex = isMobile ? '1000' : '-1';
    menu.style.display = 'flex';

    gsap.killTweensOf([menu, content]);
    gsap.fromTo(menu, { autoAlpha: 0 }, {
      autoAlpha: 1,
      duration: 0.1,
      ease: 'power2.out'
    });

    gsap.to(content, {
      opacity: 1,
      y: "0%",
      duration: 0.2,
      ease: 'power2.out'
    });

    gsap.to(content, {
      height: 'auto',
      duration: 0.8,
      ease: 'power3.inOut'
    });

    activeMenu = menu;

    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
    document.body.style.overflow = 'hidden';
    document.body.style.paddingRight = `${scrollbarWidth}px`;

    if (!isMobile) setNavColor(true);
  }

  function closeMenu(value, resetForceBlack = true) {
    const menu = getMenuByDataValue(value);
    if (!menu) return;
    const content = menu.querySelector('.menu-container');
    if (!content) return;

    gsap.killTweensOf([menu, content]);

    gsap.to(content, {
      height: 0,
      opacity: 0,
      y: "-10%",
      duration: 0.6,
      delay: 0.2,
      ease: 'power3.inOut'
    });

    gsap.to(menu, {
      autoAlpha: 0,
      duration: 0.3,
      delay: 0.6,
      ease: 'power2.in',
      onComplete: () => {
        menu.style.display = 'none';
        menu.style.zIndex = ''; // Сброс z-index
        if (activeMenu === menu) activeMenu = null;

        // Restore scroll
        document.body.style.overflow = '';
        document.body.style.paddingRight = '';

        if (!isMobile && resetForceBlack) {
          setNavColor(false);
        }
      }
    });
  }

  hoverBtns.forEach(btn => {
    const value = btn.getAttribute('data-hover-btn');

    btn.addEventListener('mouseenter', () => {
      if (isMobile) return;
      clearTimeout(menuTimeout);
      openMenu(value);
    });

    btn.addEventListener('mouseleave', () => {
      if (isMobile) return;
      menuTimeout = setTimeout(() => {
        if (activeMenu?.getAttribute('data-hover-menu') === value) {
          closeMenu(value);
        }
      }, 300);
    });

    btn.addEventListener('click', e => {
      e.stopPropagation();
      const menu = getMenuByDataValue(value);
      const isOpen = activeMenu === menu && window.getComputedStyle(menu).display !== 'none';
      isOpen ? closeMenu(value) : openMenu(value);
    });
  });

  menuContainers.forEach(container => {
    const menu = container.closest('[data-hover-menu]');
    const value = menu?.getAttribute('data-hover-menu');
    if (!value) return;

    container.addEventListener('mouseenter', () => {
      if (isMobile) return;
      clearTimeout(menuTimeout);
    });

    container.addEventListener('mouseleave', () => {
      if (isMobile) return;
      menuTimeout = setTimeout(() => {
        if (activeMenu?.getAttribute('data-hover-menu') === value) {
          closeMenu(value);
        }
      }, 300);
    });
  });

  document.addEventListener('click', e => {
    if (activeMenu && !e.target.closest('[data-hover-btn]') && !e.target.closest('.menu-container')) {
      closeMenu(activeMenu.getAttribute('data-hover-menu'));
    }
  });

  initializeMenus();
});