script.js

// Sample Product Data
const products = [
    { id: 1, name: 'Premium Wireless Headphones', category: 'electronics', price: 299, originalPrice: 499, rating: '★★★★★', image: '🎧', discount: 40 },
    { id: 2, name: 'Designer T-Shirt', category: 'fashion', price: 49, originalPrice: 99, rating: '★★★★☆', image: '👕', discount: 50 },
    { id: 3, name: 'Cozy Area Rug', category: 'home', price: 89, originalPrice: 149, rating: '★★★★★', image: '🏠', discount: 40 },
    { id: 4, name: 'JavaScript Guide Book', category: 'books', price: 29, originalPrice: 59, rating: '★★★★☆', image: '📚', discount: 50 },
    { id: 5, name: 'Yoga Mat Pro', category: 'sports', price: 39, originalPrice: 89, rating: '★★★★★', image: '🧘', discount: 56 },
    { id: 6, name: 'Organic Face Serum', category: 'beauty', price: 45, originalPrice: 99, rating: '★★★★☆', image: '💆', discount: 55 },
    { id: 7, name: '4K Webcam', category: 'electronics', price: 199, originalPrice: 349, rating: '★★★★★', image: '📹', discount: 43 },
    { id: 8, name: 'Summer Dress', category: 'fashion', price: 59, originalPrice: 129, rating: '★★★★☆', image: '👗', discount: 54 },
    { id: 9, name: 'Desk Lamp', category: 'home', price: 34, originalPrice: 79, rating: '★★★★☆', image: '💡', discount: 57 },
    { id: 10, name: 'Cooking Mastery', category: 'books', price: 25, originalPrice: 55, rating: '★★★★★', image: '👨', discount: 55 },
    { id: 11, name: 'Running Shoes', category: 'sports', price: 119, originalPrice: 199, rating: '★★★★☆', image: '👟', discount: 40 },
    { id: 12, name: 'Moisturizer Cream', category: 'beauty', price: 32, originalPrice: 75, rating: '★★★★★', image: '🧴', discount: 57 }
];

let cart = [];
let currentFilter = 'all';

// Initialize
window.addEventListener('DOMContentLoaded', () => {
    displayProducts('all');
    loadCart();
});

// Display Products
function displayProducts(category) {
    currentFilter = category;
    let filtered = category === 'all' ? products : products.filter(p => p.category === category);
    
    const grids = document.querySelectorAll('.product-grid');
    grids.forEach(grid => {
        grid.innerHTML = filtered.map(product => `
            <div class="product-card">
                <div class="product-image">${product.image}</div>
                <div class="product-info">
                    <p class="product-category">${product.category.charAt(0).toUpperCase() + product.category.slice(1)}</p>
                    <h4 class="product-name">${product.name}</h4>
                    <div class="product-rating">${product.rating}</div>
                    <div class="product-price">
                        <span class="original-price">$${product.originalPrice}</span>
                        <span class="current-price">$${product.price}</span>
                        <span class="discount-badge">-${product.discount}%</span>
                    </div>
                    <button class="add-to-cart" onclick="addToCart(${product.id})">Add to Cart</button>
                </div>
            </div>
        `).join('');
    });
}

// Filter Products
function filterCategory(category) {
    displayProducts(category);
    
    // Update filter buttons
    document.querySelectorAll('.filter-btn').forEach(btn => {
        btn.classList.remove('active');
    });
    event.target.classList.add('active');
}

// Add to Cart
function addToCart(productId) {
    const product = products.find(p => p.id === productId);
    const cartItem = cart.find(item => item.id === productId);
    
    if (cartItem) {
        cartItem.quantity++;
    } else {
        cart.push({ ...product, quantity: 1 });
    }
    
    saveCart();
    updateCartCount();
    alert(`✓ "${product.name}" added to cart!`);
}

// Update Cart Count
function updateCartCount() {
    const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
    document.getElementById('cartCount').textContent = totalItems;
}

// Save Cart to localStorage
function saveCart() {
    localStorage.setItem('cart', JSON.stringify(cart));
}

// Load Cart from localStorage
function loadCart() {
    const saved = localStorage.getItem('cart');
    if (saved) {
        cart = JSON.parse(saved);
        updateCartCount();
    }
}

// Section Navigation
function showHome() {
    hideAllSections();
    document.getElementById('homeSection').classList.add('active');
    displayProducts('all');
}

function showCategories() {
    hideAllSections();
    document.getElementById('categoriesSection').classList.add('active');
    displayProducts('all');
}

function showDeals() {
    hideAllSections();
    document.getElementById('dealsSection').classList.add('active');
    
    let deals = products.filter(p => p.discount >= 40);
    document.getElementById('dealsProductGrid').innerHTML = deals.map(product => `
        <div class="product-card">
            <div class="product-image">${product.image}</div>
            <div class="product-info">
                <p class="product-category">${product.category.charAt(0).toUpperCase() + product.category.slice(1)}</p>
                <h4 class="product-name">${product.name}</h4>
                <div class="product-rating">${product.rating}</div>
                <div class="product-price">
                    <span class="original-price">$${product.originalPrice}</span>
                    <span class="current-price">$${product.price}</span>
                    <span class="discount-badge">-${product.discount}%</span>
                </div>
                <button class="add-to-cart" onclick="addToCart(${product.id})">Add to Cart</button>
            </div>
        </div>
    `).join('');
}

function showCart() {
    hideAllSections();
    document.getElementById('cartSection').classList.add('active');
    displayCart();
}

function showAccount() {
    hideAllSections();
    document.getElementById('accountSection').classList.add('active');
}

function hideAllSections() {
    document.querySelectorAll('.section').forEach(section => {
        section.classList.remove('active');
    });
}

// Display Cart Items
function displayCart() {
    const cartContainer = document.getElementById('cartItems');
    
    if (cart.length === 0) {
        cartContainer.innerHTML = '<div class="empty-cart"><i class="fas fa-shopping-cart"></i><p>Your cart is empty</p></div>';
        document.getElementById('subtotal').textContent = '$0.00';
        document.getElementById('shipping').textContent = '$0.00';
        document.getElementById('tax').textContent = '$0.00';
        document.getElementById('total').textContent = '$0.00';
        return;
    }
    
    cartContainer.innerHTML = cart.map(item => `
        <div class="cart-item">
            <div class="cart-item-image">${item.image}</div>
            <div class="cart-item-details">
                <h4>${item.name}</h4>
                <p>$${item.price} x ${item.quantity}</p>
            </div>
            <div class="cart-item-actions">
                <span>$${(item.price * item.quantity).toFixed(2)}</span>
                <button class="qty-btn" onclick="updateQuantity(${item.id}, -1)">-</button>
                <span>${item.quantity}</span>
                <button class="qty-btn" onclick="updateQuantity(${item.id}, 1)">+</button>
                <button class="remove-btn" onclick="removeFromCart(${item.id})">Remove</button>
            </div>
        </div>
    `).join('');
    
    updateCartSummary();
}

// Update Quantity
function updateQuantity(productId, change) {
    const item = cart.find(i => i.id === productId);
    if (item) {
        item.quantity += change;
        if (item.quantity <= 0) {
            removeFromCart(productId);
        } else {
            saveCart();
            updateCartCount();
            displayCart();
        }
    }
}

// Remove from Cart
function removeFromCart(productId) {
    cart = cart.filter(item => item.id !== productId);
    saveCart();
    updateCartCount();
    displayCart();
}

// Update Cart Summary
function updateCartSummary() {
    const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
    const shipping = subtotal > 100 ? 0 : 10;
    const tax = subtotal * 0.08;
    const total = subtotal + shipping + tax;
    
    document.getElementById('subtotal').textContent = '$' + subtotal.toFixed(2);
    document.getElementById('shipping').textContent = '$' + shipping.toFixed(2);
    document.getElementById('tax').textContent = '$' + tax.toFixed(2);
    document.getElementById('total').textContent = '$' + total.toFixed(2);
}

// Checkout
function checkout() {
    if (cart.length === 0) {
        alert('Your cart is empty!');
        return;
    }
    const total = document.getElementById('total').textContent;
    alert(`Order confirmed! Total: ${total}\n\nThank you for shopping at ShopSphere!`);
    cart = [];
    saveCart();
    updateCartCount();
    displayCart();
}

// Search Functionality
document.addEventListener('DOMContentLoaded', () => {
    const searchInput = document.getElementById('searchInput');
    if (searchInput) {
        searchInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                const query = searchInput.value.toLowerCase();
                const filtered = products.filter(p => p.name.toLowerCase().includes(query));
                document.getElementById('productGrid').innerHTML = filtered.map(product => `
                    <div class="product-card">
                        <div class="product-image">${product.image}</div>
                        <div class="product-info">
                            <p class="product-category">${product.category}</p>
                            <h4 class="product-name">${product.name}</h4>
                            <div class="product-rating">${product.rating}</div>
                            <div class="product-price">
                                <span class="original-price">$${product.originalPrice}</span>
                                <span class="current-price">$${product.price}</span>
                                <span class="discount-badge">-${product.discount}%</span>
                            </div>
                            <button class="add-to-cart" onclick="addToCart(${product.id})">Add to Cart</button>
                        </div>
                    </div>
                `).join('');
            }
        });
    }
});