document.addEventListener("DOMContentLoaded", () => {
  gsap.registerPlugin(ScrollTrigger);

  const header = document.querySelector(".header");
  const logo = document.querySelector(".logo_image");
  const arrow = document.querySelector(".arrow_icon img");
  const hambLines = document.querySelectorAll(".hamburger .line_f, .hamburger .line_s");
  const hamburger = document.querySelector(".hamburger");

  if (!header || !logo) return;

  let isMenuOpen = false;

  const lightLogo = logo.dataset.lightLogo || "https://cdn.prod.website-files.com/.../logo_white.png";
  const darkLogo = logo.dataset.darkLogo || "https://cdn.prod.website-files.com/.../logo_black.png";
  const lightArrow = arrow?.dataset.lightArrow || "https://cdn.prod.website-files.com/.../arrow_header_white.svg";
  const darkArrow = arrow?.dataset.darkArrow || "https://cdn.prod.website-files.com/.../arrow_header_black.svg";

  function applyHeaderTheme(isLight) {
    if (isLight) {
      header.classList.add("is-light");
      header.classList.remove("is-dark");
      logo.src = lightLogo;
      if (arrow) arrow.src = lightArrow;
      hambLines.forEach(line => (line.style.backgroundColor = "#fff"));
    } else {
      header.classList.add("is-dark");
      header.classList.remove("is-light");
      logo.src = darkLogo;
      if (arrow) arrow.src = darkArrow;
      hambLines.forEach(line => (line.style.backgroundColor = "#000"));
    }
  }

  function isLightSectionVisible() {
    const lightSections = document.querySelectorAll('[data-header="light"]');
    
    if (lightSections.length === 0) {
      return false;
    }

    const viewportTop = 0;
    const viewportBottom = window.innerHeight;

    for (const section of lightSections) {
      const rect = section.getBoundingClientRect();
      const isInViewport = rect.top < viewportBottom && rect.bottom > viewportTop;
      
      if (isInViewport) {
        return true;
      }
    }
    
    return false;
  }

  function updateTheme() {
    if (isMenuOpen) {
      applyHeaderTheme(false);
      return;
    }

    const isLightVisible = isLightSectionVisible();
    if (isLightVisible) {
      applyHeaderTheme(true);
      return;
    }

    applyHeaderTheme(false);
  }

  function checkMenuState() {
    const menu = document.querySelector('.menu, .nav-menu, [class*="menu"]');
    if (menu) {
      const menuIsOpen = menu.classList.contains('is-open') || 
                        menu.classList.contains('active') || 
                        menu.classList.contains('open');
      
      if (menuIsOpen !== isMenuOpen) {
        isMenuOpen = menuIsOpen;
        updateTheme();
      }
    }
  }

  if (hamburger) {
    hamburger.addEventListener('click', () => {
      setTimeout(() => {
        isMenuOpen = true;
        applyHeaderTheme(false);
      }, 50);
    });
    
    const menu = document.querySelector('.menu, .nav-menu, [class*="menu"]');
    if (menu) {
      const menuObserver = new MutationObserver(() => {
        checkMenuState();
      });
      menuObserver.observe(menu, { 
        attributes: true, 
        attributeFilter: ['class']
      });
    }
  }

  const lightSections = document.querySelectorAll('[data-header="light"]');
  
  if (lightSections.length > 0) {
    lightSections.forEach((section, index) => {
      ScrollTrigger.create({
        trigger: section,
        start: "top top",
        end: "bottom top",
        onEnter: () => {
          if (!isMenuOpen) {
            applyHeaderTheme(true);
          }
        },
        onLeave: () => {
          if (!isMenuOpen) {
            applyHeaderTheme(false);
          }
        },
        onEnterBack: () => {
          if (!isMenuOpen) {
            applyHeaderTheme(true);
          }
        },
        onLeaveBack: () => {
          if (!isMenuOpen) {
            applyHeaderTheme(false);
          }
        },
      });
    });
  }

  let scrollTimer;
  window.addEventListener('scroll', () => {
    clearTimeout(scrollTimer);
    scrollTimer = setTimeout(updateTheme, 10);
  });

  isMenuOpen = false;
  updateTheme();
  
  setTimeout(() => {
    isMenuOpen = false;
    updateTheme();
  }, 200);
  
  window.addEventListener('load', () => {
    isMenuOpen = false;
    updateTheme();
  });

  let resizeTimer;
  window.addEventListener('resize', () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(updateTheme, 100);
  });
});