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


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

    <!-- 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#products" 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>

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

    <!-- Checkout Section -->
    <section class="py-20">
        <div class="container mx-auto px-4">
            <!-- Section Header -->
            <div class="text-center mb-16">
                <h1 class="text-4xl font-bold mb-4">Checkout</h1>
                <p class="text-gray-600">Complete your order by providing your details below</p>
            </div>

            <!-- Checkout Form -->
            <div class="grid lg:grid-cols-3 gap-8">
                <!-- Left Side - Form -->
                <div class="lg:col-span-2 space-y-8">
                    <!-- Shipping Information -->
                    <div class="bg-white rounded-lg p-6 shadow-sm">
                        <h2 class="text-xl font-bold mb-6">Shipping Information</h2>
                        <div class="grid md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-gray-700 mb-2" for="firstName">First Name</label>
                                <input type="text" id="firstName" 
                                       class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-green-500 focus:ring-1 focus:ring-green-500 outline-none">
                            </div>
                            <div>
                                <label class="block text-gray-700 mb-2" for="lastName">Last Name</label>
                                <input type="text" id="lastName" 
                                       class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-green-500 focus:ring-1 focus:ring-green-500 outline-none">
                            </div>
                            <div>
                                <label class="block text-gray-700 mb-2" for="email">Email Address</label>
                                <input type="email" id="email" 
                                       class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-green-500 focus:ring-1 focus:ring-green-500 outline-none">
                            </div>
                            <div>
                                <label class="block text-gray-700 mb-2" for="phone">Phone Number</label>
                                <input type="tel" id="phone" 
                                       class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-green-500 focus:ring-1 focus:ring-green-500 outline-none">
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-gray-700 mb-2" for="address">Street Address</label>
                                <input type="text" id="address" 
                                       class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-green-500 focus:ring-1 focus:ring-green-500 outline-none">
                            </div>
                            <div>
                                <label class="block text-gray-700 mb-2" for="city">City</label>
                                <input type="text" id="city" 
                                       class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-green-500 focus:ring-1 focus:ring-green-500 outline-none">
                            </div>
                            <div>
                                <label class="block text-gray-700 mb-2" for="zipCode">ZIP Code</label>
                                <input type="text" id="zipCode" 
                                       class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-green-500 focus:ring-1 focus:ring-green-500 outline-none">
                            </div>
                        </div>
                    </div>

                    <!-- Payment Information -->
                    <div class="bg-white rounded-lg p-6 shadow-sm">
                        <h2 class="text-xl font-bold mb-6">Payment Information</h2>
                        <div class="space-y-6">
                            <!-- Card Number -->
                            <div>
                                <label class="block text-gray-700 mb-2" for="cardNumber">Card Number</label>
                                <div class="relative">
                                    <input type="text" id="cardNumber" 
                                           placeholder="1234 5678 9012 3456"
                                           class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-green-500 focus:ring-1 focus:ring-green-500 outline-none">
                                    <div class="absolute right-4 top-1/2 -translate-y-1/2 flex items-center gap-2">
                                        <i class="fab fa-cc-visa text-2xl text-blue-600"></i>
                                        <i class="fab fa-cc-mastercard text-2xl text-red-500"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Card Details -->
                            <div class="grid grid-cols-3 gap-6">
                                <div class="col-span-2">
                                    <label class="block text-gray-700 mb-2" for="expiryDate">Expiry Date</label>
                                    <input type="text" id="expiryDate" 
                                           placeholder="MM/YY"
                                           class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-green-500 focus:ring-1 focus:ring-green-500 outline-none">
                                </div>
                                <div>
                                    <label class="block text-gray-700 mb-2" for="cvv">CVV</label>
                                    <input type="text" id="cvv" 
                                           placeholder="123"
                                           class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-green-500 focus:ring-1 focus:ring-green-500 outline-none">
                                </div>
                            </div>

                            <!-- Name on Card -->
                            <div>
                                <label class="block text-gray-700 mb-2" for="nameOnCard">Name on Card</label>
                                <input type="text" id="nameOnCard" 
                                       class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-green-500 focus:ring-1 focus:ring-green-500 outline-none">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Side - Order Summary -->
                <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">Order Summary</h2>
                        
                        <!-- Order Items -->
                        <div class="space-y-4 mb-6" id="orderItems">
                            <!-- Items will be dynamically inserted here -->
                        </div>

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

                        <!-- Place Order Button -->
                        <button onclick="placeOrder()" 
                                class="w-full py-4 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>
                            Place Order
                        </button>

                        <!-- Back to Cart -->
                        <a href="cart.html" 
                           class="block text-center mt-4 text-gray-600 hover:text-gray-800">
                            <i class="fas fa-arrow-left mr-2"></i>
                            Back to Cart
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

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

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

            // Generate order items HTML
            orderItems.innerHTML = cart.items.map(item => `
                <div class="flex items-center gap-4">
                    <img src="${item.image}" alt="${item.name}" class="w-16 h-16 object-cover rounded-lg">
                    <div class="flex-1">
                        <h4 class="font-semibold">${item.name}</h4>
                        <p class="text-sm text-gray-600">${item.quantity} × ${item.price}</p>
                    </div>
                    <div class="text-right">
                        <p class="font-semibold">$${(parseFloat(item.price.replace('$', '')) * item.quantity).toFixed(2)}</p>
                    </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 placeOrder() {
            // Validate form
            const requiredFields = [
                'firstName', 'lastName', 'email', 'phone', 
                'address', 'city', 'zipCode',
                'cardNumber', 'expiryDate', 'cvv', 'nameOnCard'
            ];

            let isValid = true;
            requiredFields.forEach(field => {
                const input = document.getElementById(field);
                if (!input.value.trim()) {
                    input.classList.add('border-red-500');
                    isValid = false;
                } else {
                    input.classList.remove('border-red-500');
                }
            });

            if (!isValid) {
                alert('Please fill in all required fields');
                return;
            }

            // Process order (in a real app, this would send data to a server)
            alert('Order placed successfully! Thank you for shopping with us.');
            cart.clearCart();
            window.location.href = 'index.html';
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', () => {
            cart.loadCart();
            updateOrderSummary();

            // Redirect to cart if cart is empty
            if (cart.items.length === 0) {
                window.location.href = 'cart.html';
            }
        });
    </script>
</body>
</html> 