script.js

// =====================
// WAIT FOR HTML TO LOAD
// =====================
document.addEventListener("DOMContentLoaded", function () {

    // =====================
    // LENIS SMOOTH SCROLL
    // =====================
    const lenis = new Lenis({
        duration: 1.2,
        easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
        direction: 'vertical',
        gestureDirection: 'vertical',
        smooth: true,
        mouseMultiplier: 1,
        smoothTouch: false,
        touchMultiplier: 2,
    });

    function raf(time) {
        lenis.raf(time);
        requestAnimationFrame(raf);
    }

    requestAnimationFrame(raf);

    // =====================
    // CART STATE
    // =====================
    let cart = [];

    // =====================
    // DOM ELEMENTS
    // =====================
    const buttons = document.querySelectorAll(".add-to-cart");
    const cartDisplay = document.getElementById("cart-count");
    const cartList = document.getElementById("cart-list");
    const cartTotal = document.getElementById("cart-total");
    const clearCartBtn = document.getElementById("clear-cart");

    // =====================
    // SAVE CART TO LOCAL STORAGE
    // =====================
    function saveCart() {
        localStorage.setItem("cart", JSON.stringify(cart));
    }

    // =====================
    // RENDER CART UI
    // =====================
    function renderCart() {
        cartList.innerHTML = "";
        let totalPrice = 0;

        cart.forEach(function (item, index) {
            const itemTotal = item.price * item.quantity;
            totalPrice += itemTotal;

            const li = document.createElement("li");
            li.innerHTML = `
                ${item.name} — ₹${item.price} × ${item.quantity}
                <button class="qty-btn minus" data-index="${index}">➖</button>
                <button class="qty-btn plus" data-index="${index}">➕</button>
                <button class="remove-btn" data-index="${index}">❌</button>
                <strong> = ₹${itemTotal}</strong>
            `;

            cartList.appendChild(li);
        });

        cartTotal.textContent = totalPrice;

        attachQuantityEvents();
        attachRemoveEvents();
    }

    // =====================
    // REMOVE ITEM FROM CART
    // =====================
    function attachRemoveEvents() {
        document.querySelectorAll(".remove-btn").forEach(button => {
            button.addEventListener("click", function () {
                const index = Number(button.dataset.index);

                cart.splice(index, 1);
                updateCartCount();

                renderCart();
                saveCart();
            });
        });
    }

    // =====================
    // INCREASE / DECREASE QUANTITY
    // =====================
    function attachQuantityEvents() {

        document.querySelectorAll(".plus").forEach(button => {
            button.addEventListener("click", function () {
                const index = Number(button.dataset.index);
                cart[index].quantity += 1;

                updateCartCount();
                renderCart();
                saveCart();
            });
        });

        document.querySelectorAll(".minus").forEach(button => {
            button.addEventListener("click", function () {
                const index = Number(button.dataset.index);
                cart[index].quantity -= 1;

                if (cart[index].quantity <= 0) {
                    cart.splice(index, 1);
                }

                updateCartCount();
                renderCart();
                saveCart();
            });
        });
    }

    // =====================
    // UPDATE CART COUNT
    // =====================
    function updateCartCount() {
        const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
        cartDisplay.textContent = totalItems;
        const navCount = document.getElementById("cart-count-nav");
        if (navCount) navCount.textContent = totalItems;
    }

    // =====================
    // LOAD CART FROM STORAGE
    // =====================
    const savedCart = localStorage.getItem("cart");
    if (savedCart) {
        cart = JSON.parse(savedCart);
        updateCartCount();
        renderCart();
    }

    // =====================
    // CLEAR CART
    // =====================
    clearCartBtn.addEventListener("click", function () {
        cart = [];
        cartDisplay.textContent = 0;
        cartList.innerHTML = "";
        cartTotal.textContent = 0;
        localStorage.removeItem("cart");
    });

    // =====================
    // ADD TO CART BUTTONS
    // =====================
    // =====================
    // ADD TO CART (EVENT DELEGATION)
    // =====================
    document.body.addEventListener("click", function (e) {
        if (e.target.classList.contains("add-to-cart")) {
            const button = e.target;
            const productName = button.dataset.name;
            const productPrice = Number(button.dataset.price);

            const existingProduct = cart.find(item => item.name === productName);

            if (existingProduct) {
                existingProduct.quantity += 1;
            } else {
                cart.push({
                    name: productName,
                    price: productPrice,
                    quantity: 1
                });
            }

            updateCartCount();
            renderCart();
            saveCart();

            // Optional: visual feedback
            const originalText = button.innerText;
            button.innerText = "Added!";
            setTimeout(() => button.innerText = originalText, 1000);
        }
    });

    // =====================
    // GSAP SCROLL ANIMATIONS
    // =====================
    gsap.registerPlugin(ScrollTrigger);

    gsap.utils.toArray(".fade-in").forEach((el) => {
        gsap.from(el, {
            scrollTrigger: {
                trigger: el,
                start: "top 85%",
                toggleActions: "play none none none"
            },
            y: 50,
            opacity: 0,
            duration: 0.6,
            ease: "power2.out"
        });
    });

});

// =====================
// GSAP HERO INTRO
// =====================
gsap.from(".hero-tag", {
    y: -20,
    opacity: 0,
    duration: 0.6,
    ease: "power2.out"
});

gsap.from(".hero-title", {
    y: 50,
    opacity: 0,
    duration: 0.8,
    delay: 0.2,
    ease: "power3.out"
});

gsap.from(".hero-subtitle", {
    y: 40,
    opacity: 0,
    duration: 0.8,
    delay: 0.4,
    ease: "power3.out"
});

gsap.from(".hero-btn", {
    y: 30,
    opacity: 0,
    duration: 0.6,
    delay: 0.6,
    ease: "power2.out"
});