script.js

'use strict';


const preloader=document.querySelector("[data-preaload]");
window.addEventListener("load",function(){
    preloader.classList.add("loaded");
    document.body.classList.add("loaded");
});

// Utility function to add event listeners to multiple elements
const addeventelements = function(elements, eventype, callback) {
    for (let i = 0, len = elements.length; i < len; i++) {
        elements[i].addEventListener(eventype, callback);
    }
};

// Toggle Navbar functionality
const navbar = document.querySelector("[data-navbar]");
const navTogglers = document.querySelectorAll("[data-nav-toggler]");
const overlay = document.querySelector("[data-overlay]");

const toggleNavbar = function() {
    navbar.classList.toggle("active");
    overlay.classList.toggle("active");
    document.body.classList.toggle("nav-active");
};

addeventelements(navTogglers, "click", toggleNavbar);

// Hide header on scroll down
const header = document.querySelector("[data-header]");
let lastScrollPos = 0;

const hideHeader = function() {
    const isScrollDown = lastScrollPos < window.scrollY;
    if (isScrollDown) {
        header.classList.add("hide");
    } else {
        header.classList.remove("hide");
    }
    lastScrollPos = window.scrollY;
};

window.addEventListener("scroll", function() {
    hideHeader();
    if (window.scrollY >= 50) {
        header.classList.add("active");
    } else {
        header.classList.remove("active");
    }
});

// Hero Slider functionality
const heroSlider = document.querySelector("[data-hero-slider]");
const heroSliderItems = document.querySelectorAll("[data-hero-slider-item]");
const heroSliderPrevBtn = document.querySelector("[data-prev-btn]");
const heroSliderNextBtn = document.querySelector("[data-next-btn]");

let currentSlidePos = 0;
let lastActiveSliderItem = heroSliderItems[0];

// Function to update slider
const updateSliderPos = function() {
    lastActiveSliderItem.classList.remove("active");
    heroSliderItems[currentSlidePos].classList.add("active");
    lastActiveSliderItem = heroSliderItems[currentSlidePos];
};

// Next slide
const slideNext = function() {
    if (currentSlidePos >= heroSliderItems.length - 1) {
        currentSlidePos = 0;
    } else {
        currentSlidePos++;
    }
    updateSliderPos();
};

// Previous slide
const slidePrev = function() {
    if (currentSlidePos <= 0) {
        currentSlidePos = heroSliderItems.length - 1;
    } else {
        currentSlidePos--;
    }
    updateSliderPos();
};

heroSliderNextBtn.addEventListener("click", slideNext);
heroSliderPrevBtn.addEventListener("click", slidePrev);

// Auto slide setup
let autoSlideInterval;

const autoSlide = function() {
    autoSlideInterval = setInterval(function() {
        slideNext();
    }, 7000); // 7 seconds
};

// Pause auto-slide on hover
addeventelements([heroSliderNextBtn, heroSliderPrevBtn], "mouseover", function () {
    clearInterval(autoSlideInterval);
});

// Resume auto-slide on mouse out
addeventelements([heroSliderNextBtn, heroSliderPrevBtn], "mouseout", autoSlide);

// Start auto slide when page loads
window.addEventListener("load", autoSlide);


const parallaxItems = document.querySelectorAll("[data-parallax-item]");

let targetX = 0, targetY = 0;
let currentX = 0, currentY = 0;

window.addEventListener("mousemove", function (event) {
  targetX = -((event.clientX / window.innerWidth * 10) - 5);
  targetY = -((event.clientY / window.innerHeight * 10) - 5);
});

function animateParallax() {
  // Smooth interpolation (lerp)
  currentX += (targetX - currentX) * 0.1;
  currentY += (targetY - currentY) * 0.1;

  parallaxItems.forEach((item) => {
    const speed = Number(item.dataset.parallaxSpeed);
    const moveX = currentX * speed;
    const moveY = currentY * speed;
    item.style.transform = `translate3d(${moveX}px, ${moveY}px, 0px)`;
  });

  requestAnimationFrame(animateParallax);
}

animateParallax(); // start animation loop
const backTopBtn = document.querySelector("[data-back-top-btn]");

  window.addEventListener("scroll", () => {
    if (window.scrollY > 100) {
      backTopBtn.classList.add("active");
    } else {
      backTopBtn.classList.remove("active");
    }
  });