<!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="index.html#product" 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>

                <!-- 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>

                    <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>

                    <!-- 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>

    <!-- Cart Section -->
    <section class="py-20 bg-gray-50">
        <div class="container mx-auto px-4">
            <!-- Section Header -->
            <div class="text-center mb-16">
                <h1 class="text-4xl font-bold mb-4">Shopping Cart</h1>
                <p class="text-gray-600">Review and modify your items before checkout</p>
            </div>

            <!-- Cart Content -->
            <div class="grid lg:grid-cols-3 gap-8">
                <!-- Cart Items (Left Side) -->
                <div class="lg:col-span-2">
                    <!-- Empty Cart Message -->
                    <div id="emptyCartMessage" class="hidden bg-white rounded-lg p-8 text-center">
                        <i class="fas fa-shopping-cart text-6xl text-gray-300 mb-4"></i>
                        <h2 class="text-2xl font-bold mb-2">Your Cart is Empty</h2>
                        <p class="text-gray-600 mb-6">Looks like you haven't added any items to your cart yet.</p>
                        <a href="index.html#products" class="inline-flex items-center px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
                            <i class="fas fa-arrow-left mr-2"></i>
                            Continue Shopping
                        </a>
                    </div>

                    <!-- Cart Items List -->
                    <div id="cartItems" class="space-y-4">
                        <!-- Items will be dynamically inserted here -->
                    </div>
                </div>

                <!-- Cart Summary (Right Side) -->
                <div class="lg:col-span-1">
                    <div class="bg-white rounded-lg p-6 shadow-sm sticky top-24">
                        <h2 class="text-xl font-bold mb-6">Cart Summary</h2>
                        
                        <!-- Summary Details -->
                        <div class="space-y-4 mb-6">
                            <div class="flex justify-between">
                                <span class="text-gray-600">Subtotal</span>
                                <span class="font-semibold" id="subtotal">$0.00</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">Shipping</span>
                                <span class="font-semibold text-green-500">Free</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">Tax</span>
                                <span class="font-semibold" id="tax">$0.00</span>
                            </div>
                            <div class="border-t pt-4">
                                <div class="flex justify-between">
                                    <span class="text-lg font-bold">Total</span>
                                    <span class="text-lg font-bold text-green-500" id="total">$0.00</span>
                                </div>
                            </div>
                        </div>

                        <!-- Promo Code -->
                        <div class="mb-6">
                            <div class="flex gap-2">
                                <input type="text" 
                                       placeholder="Enter promo code" 
                                       class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:border-green-500 focus:ring-1 focus:ring-green-500 outline-none">
                                <button class="px-4 py-2 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition-colors">
                                    Apply
                                </button>
                            </div>
                        </div>

                        <!-- Checkout Button -->
                        <button onclick="window.location.href='checkout.html'" 
                                class="w-full py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors flex items-center justify-center gap-2">
                            <i class="fas fa-lock"></i>
                            Proceed to Checkout
                        </button>

                        <!-- Continue Shopping -->
                        <a href="index.html#products" 
                           class="block text-center mt-4 text-gray-600 hover:text-gray-800">
                            <i class="fas fa-arrow-left mr-2"></i>
                            Continue Shopping
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Cart Page JavaScript -->
    <script src="assets/js/cart.js"></script>
    <script>
        function updateCartPage() {
            const cartItems = document.getElementById('cartItems');
            const emptyCartMessage = document.getElementById('emptyCartMessage');
            const subtotalElement = document.getElementById('subtotal');
            const taxElement = document.getElementById('tax');
            const totalElement = document.getElementById('total');

            if (cart.items.length === 0) {
                cartItems.style.display = 'none';
                emptyCartMessage.style.display = 'block';
                return;
            }

            cartItems.style.display = 'block';
            emptyCartMessage.style.display = 'none';

            // Generate cart items HTML
            cartItems.innerHTML = cart.items.map(item => `
                <div class="bg-white rounded-lg p-6 shadow-sm" data-item-id="${item.id}">
                    <div class="flex items-center gap-6">
                        <!-- Product Image -->
                        <img src="${item.image}" alt="${item.name}" class="w-24 h-24 object-cover rounded-lg">
                        
                        <!-- Product Details -->
                        <div class="flex-1">
                            <h3 class="text-lg font-semibold mb-1">${item.name}</h3>
                            <p class="text-gray-600 mb-2">Unit Price: ${item.price}</p>
                            
                            <!-- Quantity Controls -->
                            <div class="flex items-center gap-4">
                                <div class="flex items-center border rounded-lg">
                                    <button onclick="updateCartItemQuantity('${item.id}', ${item.quantity - 1})" 
                                            class="px-3 py-1 text-gray-600 hover:text-green-500">-</button>
                                    <input type="number" 
                                           value="${item.quantity}" 
                                           min="1" 
                                           onchange="updateCartItemQuantity('${item.id}', this.value)"
                                           class="w-16 text-center border-x py-1">
                                    <button onclick="updateCartItemQuantity('${item.id}', ${item.quantity + 1})" 
                                            class="px-3 py-1 text-gray-600 hover:text-green-500">+</button>
                                </div>
                                <button onclick="cart.removeItem('${item.id}')" 
                                        class="text-red-500 hover:text-red-600">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                        
                        <!-- Item Total -->
                        <div class="text-right">
                            <p class="text-lg font-semibold">$${(parseFloat(item.price.replace('$', '')) * item.quantity).toFixed(2)}</p>
                        </div>
                    </div>
                </div>
            `).join('');

            // Update summary
            const subtotal = cart.getTotal();
            const tax = subtotal * 0.1; // 10% tax
            const total = subtotal + tax;

            subtotalElement.textContent = `$${subtotal.toFixed(2)}`;
            taxElement.textContent = `$${tax.toFixed(2)}`;
            totalElement.textContent = `$${total.toFixed(2)}`;
        }

        function updateCartItemQuantity(itemId, newQuantity) {
            newQuantity = parseInt(newQuantity);
            if (newQuantity > 0) {
                cart.updateQuantity(itemId, newQuantity);
                updateCartPage();
            }
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', () => {
            cart.loadCart();
            updateCartPage();
        });
    </script>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-400">
    <div class="container mx-auto px-4 py-16">
        <!-- Footer Content Grid -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <!-- Company Info -->
            <div>
                <a href="/" class="text-3xl font-bold inline-block mb-4">
                    <span class="text-green-500">F</span><span class="text-orange-500">oo</span><span class="text-green-500">dy</span>
                </a>
                <p class="mb-4">
                    Diam dolor diam ipsum sit. Aliqu diam amet diam et eos. Clita erat ipsum et lorem et sit, sed stet lorem sit clita
                </p>
                <!-- Social Links -->
                <div class="flex gap-2">
                    <a href="#" class="w-8 h-8 rounded-full border border-gray-400 flex items-center justify-center hover:bg-white hover:text-gray-900 transition-colors">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="#" class="w-8 h-8 rounded-full border border-gray-400 flex items-center justify-center hover:bg-white hover:text-gray-900 transition-colors">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                    <a href="#" class="w-8 h-8 rounded-full border border-gray-400 flex items-center justify-center hover:bg-white hover:text-gray-900 transition-colors">
                        <i class="fab fa-youtube"></i>
                    </a>
                    <a href="#" class="w-8 h-8 rounded-full border border-gray-400 flex items-center justify-center hover:bg-white hover:text-gray-900 transition-colors">
                        <i class="fab fa-linkedin-in"></i>
                    </a>
                </div>
            </div>

            <!-- Address -->
            <div>
                <h3 class="text-xl text-white font-semibold mb-4">Address</h3>
                <p class="mb-2">
                    <i class="fas fa-map-marker-alt text-gray-400 mr-2"></i>
                    123 Street, New York, USA
                </p>
                <p class="mb-2">
                    <i class="fas fa-phone-alt text-gray-400 mr-2"></i>
                    +012 345 67890
                </p>
                <p class="mb-2">
                    <i class="far fa-envelope text-gray-400 mr-2"></i>
                    info@example.com
                </p>
            </div>

            <!-- Quick Links -->
            <div>
                <h3 class="text-xl text-white font-semibold mb-4">Quick Links</h3>
                <ul class="space-y-2">
                    <li>
                        <a href="#" class="hover:text-white transition-colors">
                            <i class="fas fa-chevron-right mr-2"></i>
                            About Us
                        </a>
                    </li>
                    <li>
                        <a href="#" class="hover:text-white transition-colors">
                            <i class="fas fa-chevron-right mr-2"></i>
                            Contact Us
                        </a>
                    </li>
                    <li>
                        <a href="#" class="hover:text-white transition-colors">
                            <i class="fas fa-chevron-right mr-2"></i>
                            Our Services
                        </a>
                    </li>
                    <li>
                        <a href="#" class="hover:text-white transition-colors">
                            <i class="fas fa-chevron-right mr-2"></i>
                            Terms & Condition
                        </a>
                    </li>
                    <li>
                        <a href="#" class="hover:text-white transition-colors">
                            <i class="fas fa-chevron-right mr-2"></i>
                            Support
                        </a>
                    </li>
                </ul>
            </div>

            <!-- Newsletter -->
            <div>
                <h3 class="text-xl text-white font-semibold mb-4">Newsletter</h3>
                <p class="mb-4">
                    Dolor amet sit justo amet elitr clita ipsum elitr est.
                </p>
                <div class="flex">
                    <input type="email" 
                           placeholder="Your email" 
                           class="w-full px-4 py-2 bg-transparent border border-gray-400 focus:border-white outline-none">
                    <button class="px-4 py-2 bg-green-500 text-white hover:bg-green-600 transition-colors">
                        SignUp
                    </button>
                </div>
            </div>
        </div>

        <!-- Copyright -->
        <div class="mt-8 pt-8 border-t border-gray-800">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <p><a href="https://codecrafter.fun/" class="text-white hover:underline">
                    Foody
                </a>All Right Reserved.</p>
                <p>
                    Designed By 
                    <a href="https://codecrafter.fun/" class="text-white hover:underline">
                        MASHRUF
                    </a>
                </p>
            </div>
        </div>
    </div>
</footer>

<!-- Back to Top Button -->
<a href="#" 
   class="fixed bottom-8 right-8 w-10 h-10 bg-green-500 text-white rounded-full opacity-0 invisible transition-all duration-300 flex items-center justify-center hover:bg-green-600 hover:scale-110 group scroll-to-top"
   id="backToTop"
   aria-label="Back to top">
    <i class="fas fa-arrow-up text-sm group-hover:-translate-y-1 transition-transform"></i>
</a>

<!-- Custom JavaScript -->
<script>
    // Back to Top Button
    const backToTop = document.getElementById('backToTop');
    
    window.addEventListener('scroll', () => {
        if (window.scrollY > 300) {
            backToTop.classList.remove('opacity-0', 'invisible');
            backToTop.classList.add('opacity-100', 'visible');
        } else {
            backToTop.classList.add('opacity-0', 'invisible');
            backToTop.classList.remove('opacity-100', 'visible');
        }
    });

    backToTop.addEventListener('click', (e) => {
        e.preventDefault();
        
        const startPosition = window.pageYOffset;
        const duration = 1500; // Increased duration for more noticeable effect
        const startTime = performance.now();

        function easeOutExpo(t) {
            // This easing function starts very slow and then accelerates exponentially
            return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
        }

        function scrollAnimation(currentTime) {
            const timeElapsed = currentTime - startTime;
            const progress = Math.min(timeElapsed / duration, 1);
            
            // Calculate the new position using the easing function
            const easeProgress = easeOutExpo(progress);
            const newPosition = startPosition - (startPosition * easeProgress);
            
            window.scrollTo(0, newPosition);

            if (timeElapsed < duration) {
                requestAnimationFrame(scrollAnimation);
            }
        }

        requestAnimationFrame(scrollAnimation);
    });

    // Remove mobile menu related JavaScript
    let lastScroll = 0;
    const topBar = document.getElementById('topBar');
    const mainNav = document.getElementById('mainNav');
    const topBarHeight = topBar ? topBar.offsetHeight : 0;

    window.addEventListener('scroll', () => {
        const currentScroll = window.pageYOffset;
        
        if (window.innerWidth >= 768) { // Only apply scroll behavior on medium and larger screens
            if (currentScroll <= 0) {
                // At the very top
                if (topBar) topBar.style.transform = 'translateY(0)';
                mainNav.style.position = 'relative';
                mainNav.style.transform = 'none';
                mainNav.style.top = '0';
            } else if (currentScroll > lastScroll) {
                // Scrolling down
                if (topBar) topBar.style.transform = `translateY(-${topBarHeight}px)`;
                mainNav.style.position = 'fixed';
                mainNav.style.transform = 'translateY(0)';
                mainNav.style.top = '0';
                mainNav.style.width = '100%';
            } else {
                // Scrolling up
                if (topBar) {
                    topBar.style.transform = 'translateY(0)';
                    mainNav.style.transform = `translateY(${topBarHeight}px)`;
                    mainNav.style.top = '-' + topBarHeight + 'px';
                } else {
                    mainNav.style.transform = 'translateY(0)';
                    mainNav.style.top = '0';
                }
                mainNav.style.position = 'fixed';
                mainNav.style.width = '100%';
            }
        } else {
            // On mobile, keep nav fixed at top
            mainNav.style.position = 'fixed';
            mainNav.style.top = '0';
            mainNav.style.transform = 'none';
            mainNav.style.width = '100%';
        }
        
        lastScroll = currentScroll;
    });

    // Smooth scroll function
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            if (targetId === '#') {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
                return;
            }

            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                const navHeight = document.getElementById('mainNav').offsetHeight;
                const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navHeight;
                
                window.scrollTo({
                    top: targetPosition,
                    behavior: 'smooth'
                });
            }
        });
    });

    // Mobile Navigation Toggle
    const navToggle = document.getElementById('navToggle');
    const navArrow = document.getElementById('navArrow');
    const mobileNav = document.getElementById('mobileNav');
    let isNavOpen = false;

    navToggle.addEventListener('click', () => {
        isNavOpen = !isNavOpen;
        
        // Rotate arrow
        navArrow.style.transform = isNavOpen ? 'rotate(180deg)' : 'rotate(0)';
        
        // Show/hide menu
        if (isNavOpen) {
            mobileNav.classList.remove('opacity-0', 'invisible', 'scale-95');
            mobileNav.classList.add('opacity-100', 'visible', 'scale-100');
        } else {
            mobileNav.classList.add('opacity-0', 'invisible', 'scale-95');
            mobileNav.classList.remove('opacity-100', 'visible', 'scale-100');
        }
    });

    // Close menu when clicking outside
    document.addEventListener('click', (e) => {
        if (!navToggle.contains(e.target) && !mobileNav.contains(e.target) && isNavOpen) {
            isNavOpen = false;
            navArrow.style.transform = 'rotate(0)';
            mobileNav.classList.add('opacity-0', 'invisible', 'scale-95');
            mobileNav.classList.remove('opacity-100', 'visible', 'scale-100');
        }
    });

    // Close menu when scrolling
    window.addEventListener('scroll', () => {
        if (isNavOpen) {
            isNavOpen = false;
            navArrow.style.transform = 'rotate(0)';
            mobileNav.classList.add('opacity-0', 'invisible', 'scale-95');
            mobileNav.classList.remove('opacity-100', 'visible', 'scale-100');
        }
    });
</script>

<script src="assets/js/main.js"></script>

<!-- Add this modal for product details -->
<div id="productModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-lg max-w-2xl w-full relative">
            <!-- Close button -->
            <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>
</div>

<!-- Add this JavaScript -->
<script>
    // Product Modal Functions
    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;
        }
    }

    // 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();
        }
    });

    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();
    }
</script>

<script>
    function filterProducts(category) {
        // Update active button state
        document.querySelectorAll('.filter-btn').forEach(btn => {
            // Reset all buttons to default state
            btn.classList.remove('bg-green-500', 'text-white');
            btn.classList.add('bg-white', 'text-green-500', 'border-2', 'border-green-500');
        });
        
        // Set active button state
        event.currentTarget.classList.remove('bg-white', 'text-green-500');
        event.currentTarget.classList.add('bg-green-500', 'text-white');

        // Filter products
        const products = document.querySelectorAll('[data-category]');
        products.forEach(product => {
            if (category === 'all' || product.dataset.category === category) {
                // Show product with animation
                product.style.opacity = '0';
                product.style.display = 'block';
                setTimeout(() => {
                    product.style.opacity = '1';
                }, 50);
            } else {
                // Hide product
                product.style.display = 'none';
            }
        });
    }

    // Initialize with all products shown
    document.addEventListener('DOMContentLoaded', () => {
        filterProducts('all');
    });
</script>

<style>
    /* Update transition styles */
    [data-category] {
        transition: opacity 0.3s ease-in-out;
    }
    
    .filter-btn {
        transition: all 0.3s ease;
    }
    
    /* Add hover effect */
    .filter-btn:hover {
        transform: translateY(-2px);
    }
</style>

<!-- Add this before closing body tag, before other scripts -->
<script src="assets/js/cart.js"></script>
</body>
</html> 