<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foody - Organic Food Store</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Custom CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        @media (max-width: 768px) {
            .container {
                padding-left: 1rem;
                padding-right: 1rem;
            }
            
            /* Adjust spacing without top bar */
            #mainNav {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
            }
            
            /* Adjust content spacing */
            main {
                padding-top: 4rem;
            }
            
            /* Adjust search bar spacing */
            .container {
                padding-left: 0.5rem;
                padding-right: 0.5rem;
            }
            
            /* Make nav items more compact on mobile */
            #mainNav .flex {
                gap: 0.5rem;
            }
            
            /* Adjust logo size for mobile */
            #mainNav .text-3xl {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <!-- Top Bar -->
    <div class="bg-gray-100 py-2 transition-transform duration-300 hidden md:block" id="topBar">
        <div class="container mx-auto px-4 flex justify-between items-center">
            <div class="flex items-center space-x-4">
                <span class="text-gray-600"><i class="fas fa-map-marker-alt"></i> 123 Street, New York, USA</span>
                <span class="text-gray-600"><i class="fas fa-envelope"></i> info@example.com</span>
            </div>
            <div class="flex items-center space-x-4">
                <span class="text-gray-600">Follow us:</span>
                <a href="#" class="text-gray-600 hover:text-gray-800"><i class="fab fa-facebook-f"></i></a>
                <a href="#" class="text-gray-600 hover:text-gray-800"><i class="fab fa-twitter"></i></a>
                <a href="#" class="text-gray-600 hover:text-gray-800"><i class="fab fa-linkedin-in"></i></a>
                <a href="#" class="text-gray-600 hover:text-gray-800"><i class="fab fa-instagram"></i></a>
            </div>
        </div>
    </div>

    <!-- Navigation -->
    <nav class="bg-white shadow-sm sticky top-0 z-50" id="mainNav">
        <div class="container mx-auto px-4 py-4">
            <div class="flex justify-between items-center">
                <!-- Logo -->
                <a href="index.html" class="text-3xl font-bold">
                    <span class="text-green-500">F</span><span class="text-orange-500">oo</span><span class="text-green-500">dy</span>
                </a>

                <!-- Search Bar for Mobile -->
                <div class="flex md:hidden flex-1 mx-4">
                    <div class="relative w-full">
                        <input type="text" 
                               placeholder="Search..." 
                               class="w-full px-4 py-2 pr-10 text-sm border border-gray-300 rounded-lg focus:border-green-500 focus:ring-1 focus:ring-green-500 outline-none">
                        <button class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-green-500">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>

                <!-- Navigation Links - Hidden on mobile -->
                <div class="hidden md:flex space-x-8">
                    <a href="index.html" class="text-gray-800 hover:text-green-500">Home</a>
                    <a href="about.html" class="text-gray-800 hover:text-green-500">About Us</a>
                    <a href="products.html" class="text-gray-800 hover:text-green-500">Products</a>
                    
                    <!-- Pages Dropdown -->
                    <div class="relative group">
                        <button class="text-gray-800 hover:text-green-500 flex items-center">
                            Pages
                            <i class="fas fa-chevron-down text-xs ml-1 transform group-hover:rotate-180 transition-transform"></i>
                        </button>
                        <!-- Dropdown Menu -->
                        <div class="absolute left-0 top-full w-48 bg-white shadow-lg rounded-lg py-2 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all duration-300 z-50">
                            <a href="index.html#features" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Features</a>
                            <a href="index.html#blog" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Our Blog</a>
                            <a href="index.html#testimonials" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Testimonials</a>
                            <a href="index.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">404 Page</a>
                        </div>
                    </div>

                    <!-- Services Dropdown -->
                    <div class="relative group">
                        <button class="text-gray-800 hover:text-green-500 flex items-center">
                            Services
                            <i class="fas fa-chevron-down text-xs ml-1 transform group-hover:rotate-180 transition-transform"></i>
                        </button>
                        <!-- Dropdown Menu -->
                        <div class="absolute left-0 top-full w-48 bg-white shadow-lg rounded-lg py-2 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all duration-300 z-50">
                            <a href="index.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Food Delivery</a>
                            <a href="index.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Organic Food</a>
                            <a href="index.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Quality Control</a>
                            <a href="index.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Storage Service</a>
                        </div>
                    </div>

                    <a href="index.html#contact" class="text-gray-800 hover:text-green-500">Contact Us</a>
                </div>

                <script>
                    // Block keyboard shortcuts
                    document.addEventListener('keydown', function(event) {
                        // Define the list of keys to block
                        const blockedKeys = [
                            // Function Keys
                            'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12',
                            
                            // Common Shortcuts
                            'Tab', 'Escape', 'Enter', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight',
                            'Insert', 'Delete', 'Home', 'End', 'PageUp', 'PageDown', 'PrintScreen',
                
                            // Specific Developer Tools Shortcuts
                            'I', 'C', 'U', 'J', 'S', // Used in common DevTools shortcuts like Ctrl+Shift+I, etc.
                        ];
                
                        // Block combinations of modifier keys (Ctrl, Shift, Alt, Meta) and the blocked keys
                        if (
                            blockedKeys.includes(event.key) || 
                            (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey)
                        ) {
                            event.preventDefault();  // Block the default action
                            event.stopPropagation(); // Prevent further event propagation
                            console.log(`Blocked: ${event.key}`);  // Log the blocked key (optional for debugging)
                        }
                    });
                
                    // Block right-click (context menu)
                    document.addEventListener('contextmenu', function(event) {
                        event.preventDefault();  // Disable right-click
                        console.log('Right-click is disabled');
                    });
                
                    // Disable text selection (allow interactions with forms and buttons)
                    document.addEventListener('mousedown', function(event) {
                        if (!['INPUT', 'TEXTAREA', 'BUTTON', 'SELECT'].includes(event.target.tagName)) {
                            event.preventDefault();  // Prevent mouse down selection
                        }
                    });
                
                    document.addEventListener('mouseup', function(event) {
                        if (!['INPUT', 'TEXTAREA', 'BUTTON', 'SELECT'].includes(event.target.tagName)) {
                            event.preventDefault();  // Prevent mouse up selection
                        }
                    });
                
                    document.addEventListener('selectstart', function(event) {
                        if (!['INPUT', 'TEXTAREA', 'BUTTON', 'SELECT'].includes(event.target.tagName)) {
                            event.preventDefault();  // Prevent selection start
                        }
                    });
                </script>

                <!-- Right Side Icons -->
                <div class="flex items-center space-x-4">
                    <!-- Search Dropdown - Hidden on mobile -->
                    <div class="relative group hidden md:block">
                        <button class="text-gray-800 hover:text-green-500 p-2">
                            <i class="fas fa-search"></i>
                        </button>
                        <!-- Search Dropdown Content -->
                        <div class="absolute right-0 top-full w-72 bg-white shadow-lg rounded-lg py-4 px-4 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all duration-300 z-50">
                            <form class="flex gap-2">
                                <input type="text" 
                                       placeholder="Search here..." 
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-green-500 focus:ring-1 focus:ring-green-500 outline-none">
                                <button type="submit" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600">
                                    <i class="fas fa-search"></i>
                                </button>
                            </form>
                        </div>
                    </div>

                    <!-- User Account Dropdown -->
                    <div class="relative group">
                        <button class="text-gray-800 hover:text-green-500 p-2">
                            <i class="fas fa-user"></i>
                        </button>
                        <!-- User Dropdown Content -->
                        <div class="absolute right-0 top-full w-48 bg-white shadow-lg rounded-lg py-2 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all duration-300 z-50">
                            <a href="login.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">
                                <i class="fas fa-sign-in-alt mr-2"></i> Login
                            </a>
                            <a href="register.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">
                                <i class="fas fa-user-plus mr-2"></i> Register
                            </a>
                            <div class="border-t border-gray-100 my-2"></div>
                            <a href="index.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">
                                <i class="fas fa-user-circle mr-2"></i> My Profile
                            </a>
                            <a href="index.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">
                                <i class="fas fa-box mr-2"></i> My Orders
                            </a>
                        </div>
                    </div>

                    <!-- Shopping Cart Dropdown -->
                    <div class="relative group">
                        <button class="text-gray-800 hover:text-green-500 p-2 relative">
                            <i class="fas fa-shopping-cart"></i>
                            <span class="absolute -top-2 -right-2 bg-green-500 text-white rounded-full w-5 h-5 text-xs flex items-center justify-center cart-count">0</span>
                        </button>
                        <!-- Cart Dropdown Content -->
                        <div class="absolute right-0 top-full w-80 bg-white shadow-lg rounded-lg py-4 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all duration-300 z-50"
                             onmouseover="this.classList.remove('invisible', 'opacity-0')" 
                             onmouseout="this.classList.add('invisible', 'opacity-0')">
                            <!-- Empty Cart State -->
                            <div class="px-4 py-2 text-center text-gray-500 empty-cart-message">
                                <i class="fas fa-shopping-basket text-4xl mb-2"></i>
                                <p>Your cart is empty</p>
                            </div>
                            
                            <!-- Cart Items -->
                            <div class="cart-items hidden">
                                <!-- Items will be dynamically inserted here -->
                            </div>

                            <!-- Cart Footer -->
                            <div class="border-t border-gray-100 mt-2 px-4 py-3">
                                <div class="flex justify-between mb-3">
                                    <span class="font-semibold">Total:</span>
                                    <span class="font-bold cart-total">$0.00</span>
                                </div>
                                <div class="flex gap-2">
                                    <a href="cart.html" class="flex-1 px-4 py-2 bg-gray-100 text-gray-800 rounded-lg text-center hover:bg-gray-200 text-sm">
                                        View Cart
                                    </a>
                                    <a href="checkout.html" class="flex-1 px-4 py-2 bg-green-500 text-white rounded-lg text-center hover:bg-green-600 text-sm checkout-btn">
                                        Checkout
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- Add this right after the navigation section -->
    <div class="md:hidden fixed right-4 top-16 z-50" id="navToggle">
        <button class="bg-green-500 text-white p-2 rounded-full shadow-lg animate-pulse hover:bg-green-600 transition-colors">
            <i class="fas fa-chevron-down text-sm transition-transform duration-300" id="navArrow"></i>
        </button>
    </div>

    <!-- Add this dropdown menu -->
    <div class="md:hidden fixed right-4 top-24 z-50 bg-white rounded-lg shadow-xl w-48 transition-all duration-300 transform scale-95 opacity-0 invisible" id="mobileNav">
        <div class="py-2">
            <a href="index.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Home</a>
            <a href="about.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">About Us</a>
            <a href="index.html#products" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Products</a>
            <a href="index.html#features" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Features</a>
            <a href="index.html#blog" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Our Blog</a>
            <a href="index.html#testimonials" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Testimonials</a>
            <a href="index.html#contact" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Contact Us</a>
        </div>
    </div>

    <!-- Products Section -->
    <section class="py-20">
        <div class="container mx-auto px-4">
            <!-- Header -->
            <div class="text-center mb-16">
                <h1 class="text-4xl font-bold mb-4">Our Products</h1>
                <p class="text-gray-600">Discover our wide range of organic products</p>
            </div>

            <!-- Filters and Sort -->
            <div class="flex flex-col md:flex-row justify-between items-center mb-8 gap-4">
                <!-- Category Filters -->
                <div class="flex flex-wrap gap-2">
                    <button onclick="filterProducts('all')" 
                            class="filter-btn px-6 py-2 rounded-full bg-green-500 text-white hover:bg-green-600 transition-all">
                        All Products
                    </button>
                    <button onclick="filterProducts('vegetables')" 
                            class="filter-btn px-6 py-2 rounded-full bg-white text-green-500 border-2 border-green-500 hover:bg-green-500 hover:text-white transition-all">
                        Vegetables
                    </button>
                    <button onclick="filterProducts('fruits')" 
                            class="filter-btn px-6 py-2 rounded-full bg-white text-green-500 border-2 border-green-500 hover:bg-green-500 hover:text-white transition-all">
                        Fruits
                    </button>
                    <button onclick="filterProducts('dairy')" 
                            class="filter-btn px-6 py-2 rounded-full bg-white text-green-500 border-2 border-green-500 hover:bg-green-500 hover:text-white transition-all">
                        Dairy
                    </button>
                </div>

                <!-- Sort and View Options -->
                <div class="flex items-center gap-4">
                    <!-- Sort Dropdown -->
                    <select id="sortSelect" onchange="sortProducts()" 
                            class="px-4 py-2 rounded-lg border border-gray-300 focus:border-green-500 focus:ring-1 focus:ring-green-500 outline-none">
                        <option value="default">Default Sorting</option>
                        <option value="price-low">Price: Low to High</option>
                        <option value="price-high">Price: High to Low</option>
                        <option value="name">Name: A to Z</option>
                    </select>

                    <!-- View Toggle -->
                    <div class="flex items-center gap-2">
                        <button onclick="setGridView('grid')" class="p-2 text-gray-600 hover:text-green-500">
                            <i class="fas fa-th"></i>
                        </button>
                        <button onclick="setGridView('list')" class="p-2 text-gray-600 hover:text-green-500">
                            <i class="fas fa-list"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Products Grid -->
            <div id="productsGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                <!-- Product cards will be dynamically inserted here -->
            </div>

            <!-- Load More Button -->
            <div class="text-center mt-12">
                <button onclick="loadMoreProducts()" 
                        class="px-8 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
                    Load More Products
                </button>
            </div>
        </div>
    </section>

    <!-- Product Modal -->
    <div id="productModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
        <div class="bg-white rounded-xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto relative">
            <!-- Close Button - Updated position and styling -->
            <button onclick="closeProductModal()" 
                    class="absolute right-4 top-4 w-8 h-8 bg-gray-100 hover:bg-red-500 hover:text-white text-gray-600 rounded-full flex items-center justify-center transition-all duration-300">
                <i class="fas fa-times"></i>
            </button>
            
            <!-- Product Details Content -->
            <div class="p-6" id="productDetails">
                <div class="flex flex-col md:flex-row gap-6">
                    <!-- Product Image -->
                    <div class="w-full md:w-1/2">
                        <img id="modalProductImage" src="" alt="Product" class="w-full h-auto rounded-lg">
                    </div>
                    
                    <!-- Product Info -->
                    <div class="w-full md:w-1/2">
                        <h3 id="modalProductName" class="text-2xl font-bold mb-2"></h3>
                        <p id="modalProductPrice" class="text-green-500 text-xl font-semibold mb-4"></p>
                        <p id="modalProductDescription" class="text-gray-600 mb-4"></p>
                        
                        <!-- Additional Details -->
                        <div class="space-y-3 mb-6">
                            <div class="flex items-center gap-2">
                                <i class="fas fa-check-circle text-green-500"></i>
                                <span>Fresh and Organic</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <i class="fas fa-truck text-green-500"></i>
                                <span>Free Delivery</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <i class="fas fa-exchange-alt text-green-500"></i>
                                <span>Easy Returns</span>
                            </div>
                        </div>
                        
                        <!-- Add to Cart Section -->
                        <div class="flex items-center gap-4">
                            <div class="flex items-center border rounded-lg">
                                <button class="px-4 py-2 text-gray-600 hover:text-green-500" onclick="updateQuantity('decrease')">-</button>
                                <input type="number" id="modalQuantity" value="1" min="1" class="w-16 text-center border-x py-2">
                                <button class="px-4 py-2 text-gray-600 hover:text-green-500" onclick="updateQuantity('increase')">+</button>
                            </div>
                            <button onclick="addToCartFromModal()" 
                                    class="flex-1 bg-green-500 text-white py-2 rounded-lg hover:bg-green-600 transition-colors">
                                Add to Cart
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Copy the entire footer from index.html -->

    <!-- Products Page JavaScript -->
    <script src="assets/js/cart.js"></script>
    <script>
        // Product data
        const products = [
            {
                id: 'tomatoes',
                name: 'Fresh Tomatoes',
                price: 19.00,
                category: 'vegetables',
                image: 'assets/images/tomatoes.jpg',
                description: 'Fresh, ripe tomatoes sourced directly from organic farms.',
                discount: 35,
                rating: 4.5
            },
            {
                id: 'pineapple',
                name: 'Fresh Pineapple',
                price: 24.00,
                category: 'fruits',
                image: 'assets/images/products/pineapple.jpg',
                description: 'Sweet and juicy pineapple freshly harvested.',
                discount: 20,
                rating: 5.0
            },
            // Add more products...
        ];

        let currentView = 'grid';
        let currentFilter = 'all';
        let currentSort = 'default';
        let displayedProducts = 12;

        function renderProducts() {
            const grid = document.getElementById('productsGrid');
            let filteredProducts = products;

            // Apply filter
            if (currentFilter !== 'all') {
                filteredProducts = products.filter(p => p.category === currentFilter);
            }

            // Apply sort
            switch (currentSort) {
                case 'price-low':
                    filteredProducts.sort((a, b) => a.price - b.price);
                    break;
                case 'price-high':
                    filteredProducts.sort((a, b) => b.price - a.price);
                    break;
                case 'name':
                    filteredProducts.sort((a, b) => a.name.localeCompare(b.name));
                    break;
            }

            // Generate HTML
            grid.innerHTML = filteredProducts.slice(0, displayedProducts).map(product => `
                <div class="group" data-category="${product.category}">
                    <div class="relative overflow-hidden rounded-2xl bg-white shadow-lg hover:shadow-xl transition-all duration-300">
                        <div class="relative">
                            ${product.discount ? `
                                <div class="absolute top-4 right-4 z-10">
                                    <span class="px-3 py-1.5 bg-green-500 text-white rounded-full text-sm font-medium">-${product.discount}%</span>
                                </div>
                            ` : ''}
                            <div class="overflow-hidden aspect-square">
                                <img src="${product.image}" alt="${product.name}" 
                                     class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500">
                            </div>
                            <div class="absolute inset-0 bg-black bg-opacity-20 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex gap-2">
                                    <button class="bg-white p-3 rounded-full shadow-lg transform -translate-y-4 group-hover:translate-y-0 transition-all duration-300 hover:bg-green-500 hover:text-white">
                                        <i class="fas fa-heart"></i>
                                    </button>
                                    <button onclick="cart.addItem({
                                        id: '${product.id}',
                                        name: '${product.name}',
                                        price: '$${product.price.toFixed(2)}',
                                        image: '${product.image}',
                                        quantity: 1
                                    }); event.stopPropagation();" 
                                    class="bg-white p-3 rounded-full shadow-lg transform -translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-75 hover:bg-green-500 hover:text-white">
                                        <i class="fas fa-shopping-cart"></i>
                                    </button>
                                    <button onclick="viewProductDetails(this)" 
                                            data-name="${product.name}"
                                            data-price="$${product.price.toFixed(2)}"
                                            data-description="${product.description}"
                                            data-image="${product.image}"
                                            class="bg-white p-3 rounded-full shadow-lg transform -translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-150 hover:bg-green-500 hover:text-white">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="p-6">
                            <span class="text-green-500 text-sm font-medium capitalize">${product.category}</span>
                            <h3 class="text-xl font-semibold mb-2 group-hover:text-green-500 transition-colors">${product.name}</h3>
                            <div class="flex items-center mb-2">
                                <div class="flex text-yellow-400">
                                    ${generateRatingStars(product.rating)}
                                </div>
                                <span class="ml-2 text-gray-600 text-sm">(${product.rating})</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-2">
                                    <span class="text-2xl font-bold text-green-500">$${product.price.toFixed(2)}</span>
                                    ${product.discount ? `
                                        <span class="text-gray-400 line-through">$${(product.price * (1 + product.discount/100)).toFixed(2)}</span>
                                    ` : ''}
                                </div>
                                <span class="text-sm text-green-500 font-medium">In Stock</span>
                            </div>
                        </div>
                    </div>
                </div>
            `).join('');
        }

        function generateRatingStars(rating) {
            let stars = '';
            for (let i = 1; i <= 5; i++) {
                if (i <= rating) {
                    stars += '<i class="fas fa-star"></i>';
                } else if (i - 0.5 <= rating) {
                    stars += '<i class="fas fa-star-half-alt"></i>';
                } else {
                    stars += '<i class="far fa-star"></i>';
                }
            }
            return stars;
        }

        function filterProducts(category) {
            currentFilter = category;
            displayedProducts = 12;
            renderProducts();
            updateFilterButtons();
        }

        function sortProducts() {
            currentSort = document.getElementById('sortSelect').value;
            renderProducts();
        }

        function setGridView(view) {
            currentView = view;
            const grid = document.getElementById('productsGrid');
            grid.className = view === 'grid' 
                ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6'
                : 'grid grid-cols-1 gap-6';
        }

        function loadMoreProducts() {
            displayedProducts += 12;
            renderProducts();
        }

        function updateFilterButtons() {
            document.querySelectorAll('.filter-btn').forEach(btn => {
                const isActive = (btn.textContent.toLowerCase().includes(currentFilter) || 
                               (currentFilter === 'all' && btn.textContent.includes('All')));
                
                btn.classList.remove('bg-green-500', 'text-white', 'bg-white', 'text-green-500');
                if (isActive) {
                    btn.classList.add('bg-green-500', 'text-white');
                } else {
                    btn.classList.add('bg-white', 'text-green-500');
                }
            });
        }

        function viewProductDetails(button) {
            const modal = document.getElementById('productModal');
            const name = button.getAttribute('data-name');
            const price = button.getAttribute('data-price');
            const description = button.getAttribute('data-description');
            const image = button.getAttribute('data-image');

            // Update modal content
            document.getElementById('modalProductName').textContent = name;
            document.getElementById('modalProductPrice').textContent = price;
            document.getElementById('modalProductDescription').textContent = description;
            document.getElementById('modalProductImage').src = image;
            document.getElementById('modalQuantity').value = 1;

            // Show modal
            modal.classList.remove('hidden');
            document.body.style.overflow = 'hidden'; // Prevent background scrolling
        }

        function closeProductModal() {
            const modal = document.getElementById('productModal');
            modal.classList.add('hidden');
            document.body.style.overflow = ''; // Restore scrolling
        }

        function updateQuantity(action) {
            const input = document.getElementById('modalQuantity');
            let value = parseInt(input.value);
            
            if (action === 'increase') {
                input.value = value + 1;
            } else if (action === 'decrease' && value > 1) {
                input.value = value - 1;
            }
        }

        function addToCartFromModal() {
            const name = document.getElementById('modalProductName').textContent;
            const price = document.getElementById('modalProductPrice').textContent;
            const image = document.getElementById('modalProductImage').src;
            const quantity = parseInt(document.getElementById('modalQuantity').value);
            
            cart.addItem({
                id: name.toLowerCase().replace(/\s+/g, '-'),
                name: name,
                price: price,
                image: image,
                quantity: quantity
            });
            
            closeProductModal();
        }

        // Close modal when clicking outside
        document.getElementById('productModal').addEventListener('click', (e) => {
            if (e.target === document.getElementById('productModal')) {
                closeProductModal();
            }
        });

        // Close modal with escape key
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                closeProductModal();
            }
        });

        // Initialize page
        document.addEventListener('DOMContentLoaded', () => {
            renderProducts();
            cart.loadCart();
        });
    </script>
</body>
</html> 