script.js

/**
 * ShopVerse - Main JavaScript Logic
 * Handles Simulated State, Event Listeners, and UI Updates
 */

// =========================================
// 1. STATE & DATA
// =========================================

const PRODUCTS = [
    {
        id: 1,
        name: "ErgoMous X1",
        price: 49.99,
        category: "physical",
        image: "https://images.unsplash.com/photo-1527864550417-7fd91fc51a46?w=600&q=80",
        description: "Advanced ergonomic mouse for productivity masters."
    },
    {
        id: 2,
        name: "CodeMaster Keyboard",
        price: 129.00,
        category: "physical",
        image: "https://images.unsplash.com/photo-1587829741301-dc798b91add1?w=600&q=80",
        description: "Mechanical keyboard with custom switches and RGB."
    },
    {
        id: 3,
        name: "Dev UI Kit Pro",
        price: 29.00,
        category: "digital",
        image: "https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?w=600&q=80",
        description: "Premium Figma UI kit for modern web apps."
    },
    {
        id: 4,
        name: "ShopVerse Theme",
        price: 59.00,
        category: "digital",
        image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=600&q=80",
        description: "The official e-commerce template used here."
    },
    {
        id: 5,
        name: "NoiseCancel Pro",
        price: 199.99,
        category: "physical",
        image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=600&q=80",
        description: "Immersive sound with industry-leading ANC."
    },
    {
        id: 6,
        name: "Python Masterclass",
        price: 19.99,
        category: "digital",
        image: "https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=600&q=80",
        description: "Complete Python zero-to-hero video course."
    }
];

let state = {
    cart: [],
    user: null, // { name, email } if logged in
    filter: 'all',
    searchQuery: ''
};

// =========================================
// 2. DOM ELEMENTS
// =========================================
const dom = {
    productGrid: document.getElementById('product-grid'),
    cartCount: document.getElementById('cart-count'),
    cartBtn: document.getElementById('cart-btn'),
    cartSidebar: document.getElementById('cart-sidebar'),
    overlay: document.getElementById('sidebar-overlay'),
    closeCart: document.getElementById('close-cart'),
    cartItems: document.getElementById('cart-items'),
    cartTotal: document.getElementById('cart-total'),
    themeToggle: document.getElementById('theme-toggle'),
    menuToggle: document.getElementById('menu-toggle'),
    navMenu: document.getElementById('nav-menu'),
    filterBtns: document.querySelectorAll('.filter-btn'),
    searchInput: document.getElementById('product-search'),
    loginBtn: document.getElementById('auth-btn'),
    modalAuth: document.getElementById('auth-modal'),
    modalProduct: document.getElementById('product-modal'),
    modalOverlays: document.querySelectorAll('.modal-overlay'),
    closeModals: document.querySelectorAll('.close-modal'),
    contactForm: document.getElementById('contact-form')
};

// =========================================
// 3. INITIALIZATION
// =========================================
function init() {
    renderProducts();
    updateCartUI();
    setupEventListeners();
    checkTheme();
    setupScrollAnimations();

    // Simulate loading
    console.log("ShopVerse initialized successfully.");
}

// =========================================
// 4. CORE FUNCTIONS
// =========================================

// --- Products Rendering ---
function renderProducts() {
    dom.productGrid.innerHTML = '';

    const filtered = PRODUCTS.filter(p => {
        const matchesCategory = state.filter === 'all' || p.category === state.filter;
        const matchesSearch = p.name.toLowerCase().includes(state.searchQuery.toLowerCase());
        return matchesCategory && matchesSearch;
    });

    if (filtered.length === 0) {
        dom.productGrid.innerHTML = `<p class="center-text" style="grid-column: 1/-1;">No products found.</p>`;
        return;
    }

    filtered.forEach((product, index) => {
        // Staggered animation delay
        const delay = index * 100;

        const card = document.createElement('div');
        card.className = 'product-card fade-in-up';
        card.style.animationDelay = `${delay}ms`; // Apply inline for staggered effect

        card.innerHTML = `
            <div class="product-image">
                <img src="${product.image}" alt="${product.name}" loading="lazy">
                <div class="product-overlay">
                    <button class="quick-view-btn" data-id="${product.id}">Quick View</button>
                </div>
            </div>
            <div class="product-details">
                <span class="product-category">${product.category}</span>
                <h3 class="product-title">${product.name}</h3>
                <div class="product-price">
                    <span>$${product.price.toFixed(2)}</span>
                    <button class="add-to-cart-icon-btn" data-id="${product.id}" aria-label="Add to cart">
                        <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
                    </button>
                </div>
            </div>
        `;
        dom.productGrid.appendChild(card);
    });
}

// --- Cart Logic ---
function addToCart(id) {
    const product = PRODUCTS.find(p => p.id === id);
    const existing = state.cart.find(item => item.id === id);

    if (existing) {
        existing.quantity += 1;
    } else {
        state.cart.push({ ...product, quantity: 1 });
    }

    updateCartUI();
    openCart(); // UX Preference: Auto open cart on add
}

function removeFromCart(id) {
    state.cart = state.cart.filter(item => item.id !== id);
    updateCartUI();
}

function updateCartUI() {
    // Count
    const count = state.cart.reduce((sum, item) => sum + item.quantity, 0);
    dom.cartCount.textContent = count;

    // Items
    if (state.cart.length === 0) {
        dom.cartItems.innerHTML = '<p class="empty-cart-msg">Your cart is empty.</p>';
        dom.cartTotal.textContent = '$0.00';
    } else {
        dom.cartItems.innerHTML = state.cart.map(item => `
            <div class="cart-item">
                <img src="${item.image}" alt="${item.name}" style="width: 60px; height: 60px; object-fit: cover; border-radius: 4px;">
                <div style="flex-grow: 1;">
                    <h4 style="font-size: 0.9rem;">${item.name}</h4>
                    <p style="color: var(--color-primary);">$${item.price.toFixed(2)} x ${item.quantity}</p>
                </div>
                <button class="icon-btn" onclick="removeFromCart(${item.id})" aria-label="Remove">
                    <svg class="icon" style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                </button>
            </div>
        `).join('');

        // Total
        const total = state.cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
        dom.cartTotal.textContent = '$' + total.toFixed(2);
    }
}

// --- Modals & Sidebar ---
function openCart() {
    dom.cartSidebar.classList.remove('hidden-right');
    dom.overlay.classList.remove('hidden');
    document.body.style.overflow = 'hidden'; // Prevent background scroll
}

function closeCart() {
    dom.cartSidebar.classList.add('hidden-right');
    dom.overlay.classList.add('hidden');
    document.body.style.overflow = '';
}

function openProductModal(id) {
    const product = PRODUCTS.find(p => p.id === id);
    const modalBody = dom.modalProduct.querySelector('.modal-body-dynamic');

    modalBody.innerHTML = `
        <div style="display: grid; grid-template-columns: 1fr; gap: 2rem;">
            <img src="${product.image}" style="width: 100%; border-radius: 8px;" alt="${product.name}">
            <div>
                <h2 style="margin-bottom: 0.5rem">${product.name}</h2>
                <p style="color: var(--color-primary); font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem;">$${product.price}</p>
                <p style="color: var(--color-text-muted); margin-bottom: 1.5rem;">${product.description}</p>
                <p style="position: relative; padding-left: 1rem; border-left: 3px solid var(--color-accent);">Includes 30-day money back guarantee and instant delivery for digital items.</p>
                <button class="btn btn-primary full-width" onclick="addToCart(${product.id}); document.getElementById('product-modal').classList.add('hidden');" style="margin-top: 2rem;">Add to Cart - $${product.price}</button>
            </div>
        </div>
    `;

    dom.modalProduct.classList.remove('hidden');
}

// =========================================
// 5. EVENT LISTENERS
// =========================================
function setupEventListeners() {

    // Cart Toggle
    dom.cartBtn.addEventListener('click', openCart);
    dom.closeCart.addEventListener('click', closeCart);
    dom.overlay.addEventListener('click', closeCart);

    // Filters
    dom.filterBtns.forEach(btn => {
        btn.addEventListener('click', (e) => {
            dom.filterBtns.forEach(b => b.classList.remove('active'));
            e.target.classList.add('active');
            state.filter = e.target.getAttribute('data-filter');
            renderProducts();
        });
    });

    // Search
    dom.searchInput.addEventListener('input', (e) => {
        state.searchQuery = e.target.value;
        renderProducts();
    });

    // Product Grid Delegration (Add to Cart & Quick View)
    dom.productGrid.addEventListener('click', (e) => {
        if (e.target.closest('.add-to-cart-icon-btn')) {
            const id = parseInt(e.target.closest('.add-to-cart-icon-btn').getAttribute('data-id'));
            addToCart(id);
        } else if (e.target.classList.contains('quick-view-btn')) {
            const id = parseInt(e.target.getAttribute('data-id'));
            openProductModal(id);
        }
    });

    // Dark Mode
    dom.themeToggle.addEventListener('click', () => {
        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
        const newTheme = isDark ? 'light' : 'dark';
        document.documentElement.setAttribute('data-theme', newTheme);
        localStorage.setItem('theme', newTheme);
    });

    // Mobile Menu
    dom.menuToggle.addEventListener('click', () => {
        dom.navMenu.classList.toggle('open');
    });

    // Close Modals
    dom.closeModals.forEach(btn => {
        btn.addEventListener('click', (e) => {
            e.target.closest('.modal').classList.add('hidden');
        });
    });
    // Click outside modal content to close
    dom.modalOverlays.forEach(overlay => {
        overlay.closest('.modal').addEventListener('click', (e) => {
            if (e.target.classList.contains('modal-overlay')) {
                e.target.closest('.modal').classList.add('hidden');
            }
        });
    });

    // Contact Form
    dom.contactForm.addEventListener('submit', (e) => {
        e.preventDefault();
        // Simple Validation Simulation
        const btn = dom.contactForm.querySelector('button');
        const originalText = btn.textContent;

        btn.textContent = 'Sending...';
        btn.disabled = true;

        setTimeout(() => {
            btn.textContent = 'Message Sent! ✅';
            btn.style.backgroundColor = 'var(--color-accent)';
            dom.contactForm.reset();

            setTimeout(() => {
                btn.textContent = originalText;
                btn.disabled = false;
                btn.style.backgroundColor = '';
            }, 3000);
        }, 1500);
    });

    // Login Toggle
    dom.loginBtn.addEventListener('click', () => {
        dom.modalAuth.classList.remove('hidden');
    });
}

function checkTheme() {
    const saved = localStorage.getItem('theme');
    if (saved) {
        document.documentElement.setAttribute('data-theme', saved);
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.documentElement.setAttribute('data-theme', 'dark');
    }
}

// =========================================
// 6. ANIMATIONS
// =========================================
function setupScrollAnimations() {
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    }, { threshold: 0.1 });

    document.querySelectorAll('.scroll-reveal').forEach(el => observer.observe(el));
}

// Expose global functions for inline HTML event handlers (like removeFromCart)
window.removeFromCart = removeFromCart;
window.addToCart = addToCart;

// Run
init();