function animateMenu() {
  gsap.from("#menu-left-images", {
    x: -500,
    duration: 1.5,
  });

  gsap.from("#menu-right-images", {
    x: 500,
    duration: 1.5,
  });

  gsap.from("#menu-center", {
    opacity: 0,
    scale: 0,
    duration: 1.5,
  });
}

const header = document.querySelector(".scroll-header");
const headerLogo = document.querySelector(".header-logo");
const headerMenu = document.querySelector(".header-menu");
const headerStyle = document.querySelector(".header-style");
const body = document.querySelector("body");

window.addEventListener("scroll", () => {
  if (window.scrollY > 0) {
    header.classList.add("scrolled");
    headerMenu.src = "public/header_footer/menu-purple.webp";
    headerLogo.src = "public/menu/logo.webp";
    headerStyle.style.padding = "4px";
    body.style.paddingTop = "80px";
  } else {
    header.classList.remove("scrolled");
    headerMenu.src = "public/header_footer/menu.webp";
    headerLogo.src = "public/header_footer/logo.webp";
    body.style.paddingTop = "0px";
  }
});

const menuButton = document.getElementById("menu-button");
const menu = document.getElementById("menu");
const closeMenu = document.getElementById("closeMenu");

menuButton.addEventListener("click", () => {
  menu.classList.add("active");
  body.classList.add("menu-open");
  animateMenu();
});

closeMenu.addEventListener("click", () => {
  menu.classList.remove("active");
  body.classList.remove("menu-open");
});

const navItems = document.querySelectorAll(".nav-item");

navItems.forEach(item => {
  item.addEventListener("click", () => {
    navItems.forEach(i => i.classList.remove("active"));
    item.classList.add("active");
  });
});

function reveal() {
  var reveals = document.querySelectorAll(".reveal");

  for (var i = 0; i < reveals.length; i++) {
    var windowHeight = window.innerHeight;
    var elementTop = reveals[i].getBoundingClientRect().top;
    var elementVisible = 100;

    if (elementTop < windowHeight - elementVisible) {
      reveals[i].classList.add("active");
    } else {
      reveals[i].classList.remove("active");
    }
  }
}

window.addEventListener("scroll", reveal);


// const animatedItems = document.querySelectorAll('.animated-item');

// const observer = new IntersectionObserver(entries => {
//   entries.forEach(entry => {
//     if (entry.isIntersecting) {
//       entry.target.classList.add('animate');
//      // Stop observing after animation
//     }
//   });
// });

// animatedItems.forEach(item => {
//   observer.observe(item);
// });