// Show menu
const navMenu = document.getElementById("nav-menu");
const navToggle = document.getElementById("nav-toggle");
const navClose = document.getElementById("nav-close");

// Validate if const exists

if (navToggle) {
  navToggle.addEventListener("click", () => {
    navMenu.classList.add("show-menu");
  });
}

//Menu hidden
// alidate if const exists

if (navClose) {
  navClose.addEventListener("click", () => {
    navMenu.classList.remove("show-menu");
  });
}

// Remove menu mobile
const navLink = document.querySelectorAll(".nav-link");

const linkAction = () => {
  const navMenu = document.getElementById("nav-menu");

  navMenu.classList.remove("show-menu");
};

navLink.forEach((n) => n.addEventListener("click", linkAction));

// GSAP animation
gsap.from('.home-frame', 1.5, { opacity: 0, y: -300, delay: 0.2 });
gsap.from('.home-sphere', 1.5, { opacity: 0, x: -300, delay: 0.3 });
gsap.from('.home-triangle', 1.5, { opacity: 0, x: 300, delay: 0.6 });
gsap.from('.home-r', 1.5, { opacity: 0, y: -300, delay: 0.8 });
gsap.from('.home-l', 1.5, { opacity: 0, y: 300, delay: 0.8 });
gsap.from('.about-description', 1.5, { opacity: 0, x: -100, delay: 1.5 });
gsap.from('.button-ghost', 1.5, { opacity: 0, x: -100, delay: 1.6 });
gsap.from('.swiper', 1.5, { opacity: 0, x: 100, delay: 1.5 });
gsap.from('.section-title', 1.5, { opacity: 0, x: -100, delay: 1.5 });






if (window.innerWidth <= 766) {
  gsap.from('.home-content', 1.5, { opacity: 0, y: -300, delay: 0.8 });
  gsap.from('.home-title img', 1.5, { opacity: 0, x: 100, delay: 1.3 });
} else {
  gsap.from('.home-content', 1.5, { opacity: 0, x: -300, delay: 0.8 });
  gsap.from('.home-title img', 1.5, { opacity: 0, x: 300, delay: 1.2 });
}

const swiperAbout = new Swiper('.about-swiper', {
  spaceBetween: 30,
  centeredSlides: true,
  loop: true,
  autoplay: {
    delay: 3500,
    disableOnInteraction: false,
  },
  pagination: {
    el: ".swiper-pagination",
    dynamicBullets: true,
    clickable: true
  }
});


const bgHeader = () => {
  const header = document.getElementById('header')

  if (window.scrollY >= 50) {
    header.classList.add('bg-header');
  } else {
    header.classList.remove('bg-header');
  }
};

window.addEventListener('scroll', bgHeader);


const scrollUp = () => {
  const scrollUp = document.getElementById('scroll-up')
  
  if (window.scrollY >= 350) {
    scrollUp.classList.add('show-scroll');
  } else {
    scrollUp.classList.remove('show-scroll');
  }
}

window.addEventListener('scroll', scrollUp)


const sections = document.querySelectorAll('section[id]')

const scrollActive = () => {
  const scrollDown = window.scrollY

  sections.forEach(current => {
    const sectionHeight = current.offsetHeight;
    const sectionTop = current.offsetTop - 58;
    const sectionId = current.getAttribute('id');
    const sectionsClass = document.querySelector(`.nav-menu a[href*="${sectionId}"]`);

    if (sectionsClass) {
      if (scrollDown > sectionTop && scrollDown <= sectionTop + sectionHeight) {
        sectionsClass.classList.add('active-link');
      } else {
        sectionsClass.classList.remove('active-link');
      }
    }
  }) 
}

window.addEventListener('scroll', scrollActive)