import React, { useState, useEffect } from 'react';
import { Search, ShoppingCart, User, Home, Clock, Star, ChevronDown, ChevronUp, X, Plus, Minus, MapPin, CreditCard, Phone } from 'lucide-react';

// Mock data for restaurants
const restaurantsData = [
  {
    id: 1,
    name: "Habesha Restaurant",
    cuisine: "Ethiopian",
    rating: 4.8,
    deliveryTime: "25-35",
    deliveryFee: 30,
    minOrder: 100,
    image: "https://images.unsplash.com/photo-1567360425618-1594206637d2?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60",
    featured: true
  },
  {
    id: 2,
    name: "Yod Abyssinia",
    cuisine: "Traditional",
    rating: 4.6,
    deliveryTime: "30-45",
    deliveryFee: 25,
    minOrder: 150,
    image: "https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
  },
  {
    id: 3,
    name: "Pizza Hut",
    cuisine: "Italian",
    rating: 4.3,
    deliveryTime: "20-30",
    deliveryFee: 35,
    minOrder: 120,
    image: "https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
  },
  {
    id: 4,
    name: "Burger House",
    cuisine: "Fast Food",
    rating: 4.2,
    deliveryTime: "15-25",
    deliveryFee: 20,
    minOrder: 80,
    image: "https://images.unsplash.com/photo-1550547660-d9450f859349?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
  },
  {
    id: 5,
    name: "Kategna",
    cuisine: "Ethiopian",
    rating: 4.7,
    deliveryTime: "35-50",
    deliveryFee: 40,
    minOrder: 200,
    image: "https://images.unsplash.com/photo-1511910849309-0dffb8785146?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
  },
  {
    id: 6,
    name: "Kaldi's Coffee",
    cuisine: "Cafe",
    rating: 4.5,
    deliveryTime: "20-30",
    deliveryFee: 15,
    minOrder: 50,
    image: "https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
  }
];

// Mock data for menu items
const menuItemsData = {
  1: [
    {
      id: 101,
      name: "Doro Wat",
      description: "Spicy chicken stew served with injera",
      price: 180,
      image: "https://images.unsplash.com/photo-1567360425618-1594206637d2?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60",
      category: "Main Dishes",
      customizations: [
        {
          id: 1,
          name: "Spice Level",
          required: true,
          options: [
            { id: 1, name: "Mild", price: 0 },
            { id: 2, name: "Medium", price: 0 },
            { id: 3, name: "Spicy", price: 0 }
          ]
        },
        {
          id: 2,
          name: "Add-ons",
          required: false,
          options: [
            { id: 4, name: "Extra Injera", price: 20 },
            { id: 5, name: "Ayib (Ethiopian Cheese)", price: 35 }
          ]
        }
      ]
    },
    {
      id: 102,
      name: "Tibs",
      description: "Sautéed meat with vegetables and spices",
      price: 200,
      image: "https://images.unsplash.com/photo-1567360425618-1594206637d2?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60",
      category: "Main Dishes",
      customizations: [
        {
          id: 3,
          name: "Meat Type",
          required: true,
          options: [
            { id: 6, name: "Beef", price: 0 },
            { id: 7, name: "Lamb", price: 30 }
          ]
        }
      ]
    },
    {
      id: 103,
      name: "Shiro",
      description: "Spiced chickpea stew",
      price: 120,
      image: "https://images.unsplash.com/photo-1567360425618-1594206637d2?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60",
      category: "Vegetarian",
      customizations: []
    },
    {
      id: 104,
      name: "Kitfo",
      description: "Minced raw beef seasoned with spices",
      price: 220,
      image: "https://images.unsplash.com/photo-1567360425618-1594206637d2?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60",
      category: "Main Dishes",
      customizations: [
        {
          id: 4,
          name: "Cooking Level",
          required: true,
          options: [
            { id: 8, name: "Raw (Traditional)", price: 0 },
            { id: 9, name: "Lightly Cooked", price: 0 },
            { id: 10, name: "Well Done", price: 0 }
          ]
        }
      ]
    },
    {
      id: 105,
      name: "Ethiopian Coffee Ceremony",
      description: "Traditional coffee service with popcorn",
      price: 150,
      image: "https://images.unsplash.com/photo-1567360425618-1594206637d2?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60",
      category: "Beverages",
      customizations: [
        {
          id: 5,
          name: "Size",
          required: true,
          options: [
            { id: 11, name: "Small (2 people)", price: 0 },
            { id: 12, name: "Medium (4 people)", price: 50 },
            { id: 13, name: "Large (6 people)", price: 100 }
          ]
        }
      ]
    }
  ]
};

// Mock user data
const userData = {
  name: "Abebe Kebede",
  email: "abebe@example.com",
  phone: "+251912345678",
  addresses: [
    {
      id: 1,
      name: "Home",
      address: "Bole Road, Addis Ababa",
      isDefault: true
    },
    {
      id: 2,
      name: "Work",
      address: "Meskel Square, Addis Ababa",
      isDefault: false
    }
  ]
};

// Main App Component
export default function FoodDeliveryApp() {
  const [activeTab, setActiveTab] = useState('home');
  const [selectedRestaurant, setSelectedRestaurant] = useState(null);
  const [cart, setCart] = useState([]);
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [showLoginModal, setShowLoginModal] = useState(false);
  const [showCartModal, setShowCartModal] = useState(false);
  const [showItemModal, setShowItemModal] = useState(false);
  const [selectedItem, setSelectedItem] = useState(null);
  const [selectedCustomizations, setSelectedCustomizations] = useState({});
  const [searchQuery, setSearchQuery] = useState('');
  const [cuisineFilter, setCuisineFilter] = useState('All');
  const [checkoutStep, setCheckoutStep] = useState(0);
  const [orderPlaced, setOrderPlaced] = useState(false);
  const [orderStatus, setOrderStatus] = useState('');
  const [showPaymentModal, setShowPaymentModal] = useState(false);
  const [paymentMethod, setPaymentMethod] = useState('telebirr');

  // Filter restaurants based on search and cuisine
  const filteredRestaurants = restaurantsData.filter(restaurant => {
    const matchesSearch = restaurant.name.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesCuisine = cuisineFilter === 'All' || restaurant.cuisine === cuisineFilter;
    return matchesSearch && matchesCuisine;
  });

  // Get unique cuisines for filter
  const cuisines = ['All', ...new Set(restaurantsData.map(r => r.cuisine))];

  // Calculate cart total
  const cartTotal = cart.reduce((total, item) => {
    let itemTotal = item.price * item.quantity;
    
    // Add customization costs
    if (item.selectedOptions) {
      Object.values(item.selectedOptions).forEach(option => {
        if (option && option.price) {
          itemTotal += option.price;
        }
      });
    }
    
    return total + itemTotal;
  }, 0);

  const deliveryFee = selectedRestaurant ? selectedRestaurant.deliveryFee : 0;
  const tax = Math.round(cartTotal * 0.15); // 15% tax
  const orderTotal = cartTotal + deliveryFee + tax;

  // Handle adding item to cart
  const addToCart = () => {
    if (!selectedItem) return;
    
    const newItem = {
      ...selectedItem,
      quantity: 1,
      selectedOptions: selectedCustomizations
    };
    
    setCart([...cart, newItem]);
    setShowItemModal(false);
    setSelectedCustomizations({});
  };

  // Handle removing item from cart
  const removeFromCart = (index) => {
    const newCart = [...cart];
    newCart.splice(index, 1);
    setCart(newCart);
  };

  // Handle quantity change
  const updateQuantity = (index, delta) => {
    const newCart = [...cart];
    const newQuantity = newCart[index].quantity + delta;
    
    if (newQuantity > 0) {
      newCart[index].quantity = newQuantity;
      setCart(newCart);
    } else {
      removeFromCart(index);
    }
  };

  // Handle customization selection
  const handleCustomizationChange = (customizationId, option) => {
    setSelectedCustomizations({
      ...selectedCustomizations,
      [customizationId]: option
    });
  };

  // Handle checkout process
  const proceedToCheckout = () => {
    if (!isAuthenticated) {
      setShowLoginModal(true);
      return;
    }
    
    setShowCartModal(false);
    setCheckoutStep(1);
    setActiveTab('checkout');
  };

  // Handle order placement
  const placeOrder = () => {
    setShowPaymentModal(true);
  };

  // Handle payment completion
  const completePayment = () => {
    setShowPaymentModal(false);
    setOrderPlaced(true);
    setOrderStatus('confirmed');
    setCart([]);
    
    // Simulate order status updates
    setTimeout(() => setOrderStatus('preparing'), 5000);
    setTimeout(() => setOrderStatus('ready'), 10000);
    setTimeout(() => setOrderStatus('delivering'), 15000);
    setTimeout(() => setOrderStatus('delivered'), 25000);
  };

  // Handle login
  const handleLogin = (e) => {
    e.preventDefault();
    setIsAuthenticated(true);
    setShowLoginModal(false);
  };

  // Reset to home view
  const goToHome = () => {
    setActiveTab('home');
    setSelectedRestaurant(null);
    setCheckoutStep(0);
    setOrderPlaced(false);
  };

  // Open item modal
  const openItemModal = (item) => {
    setSelectedItem(item);
    setSelectedCustomizations({});
    setShowItemModal(true);
  };

  return (
    <div className="min-h-screen bg-gray-50 text-gray-800 font-sans">
      {/* Header */}
      <header className="bg-white shadow-sm sticky top-0 z-10">
        <div className="container mx-auto px-4 py-3 flex justify-between items-center">
          <div className="flex items-center">
            <h1 className="text-xl font-bold text-[#FF5A5F]">FoodExpress</h1>
          </div>
          
          {activeTab === 'home' && !selectedRestaurant && (
            <div className="flex-1 mx-4 relative">
              <input
                type="text"
                placeholder="Search for restaurants or dishes..."
                className="w-full py-2 px-4 pr-10 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#00A699]"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
              <Search className="absolute right-3 top-2.5 text-gray-400" size={20} />
            </div>
          )}
          
          <div className="flex items-center space-x-4">
            <button 
              className="relative p-2 text-gray-600 hover:text-[#FF5A5F]"
              onClick={() => setShowCartModal(true)}
            >
              <ShoppingCart size={22} />
              {cart.length > 0 && (
                <span className="absolute -top-1 -right-1 bg-[#FF5A5F] text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
                  {cart.length}
                </span>
              )}
            </button>
            
            <button 
              className="p-2 text-gray-600 hover:text-[#FF5A5F]"
              onClick={() => isAuthenticated ? setActiveTab('profile') : setShowLoginModal(true)}
            >
              <User size={22} />
            </button>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="container mx-auto px-4 py-6">
        {/* Home Tab - Restaurant Listing */}
        {activeTab === 'home' && !selectedRestaurant && (
          <div>
            {/* Cuisine Filters */}
            <div className="mb-6 overflow-x-auto whitespace-nowrap py-2">
              <div className="inline-flex space-x-2">
                {cuisines.map(cuisine => (
                  <button
                    key={cuisine}
                    className={`px-4 py-2 rounded-full text-sm font-medium ${
                      cuisineFilter === cuisine 
                        ? 'bg-[#00A699] text-white' 
                        : 'bg-white text-gray-700 border border-gray-300'
                    }`}
                    onClick={() => setCuisineFilter(cuisine)}
                  >
                    {cuisine}
                  </button>
                ))}
              </div>
            </div>
            
            {/* Featured Restaurant */}
            {cuisineFilter === 'All' && searchQuery === '' && (
              <div className="mb-8">
                <h2 className="text-xl font-bold mb-4">Featured Restaurant</h2>
                <div className="relative rounded-xl overflow-hidden h-64 w-full">
                  <img 
                    src={restaurantsData[0].image} 
                    alt={restaurantsData[0].name}
                    className="w-full h-full object-cover"
                  />
                  <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-6">
                    <h3 className="text-white text-2xl font-bold">{restaurantsData[0].name}</h3>
                    <div className="flex items-center mt-2">
                      <span className="bg-white text-[#FF5A5F] text-sm font-bold px-2 py-1 rounded-md flex items-center">
                        <Star size={14} className="mr-1 fill-[#FF5A5F]" /> {restaurantsData[0].rating}
                      </span>
                      <span className="text-white text-sm ml-3">{restaurantsData[0].cuisine}</span>
                      <span className="text-white text-sm ml-3">{restaurantsData[0].deliveryTime} min</span>
                    </div>
                    <button 
                      className="mt-3 bg-[#FF5A5F] text-white px-4 py-2 rounded-lg font-medium"
                      onClick={() => setSelectedRestaurant(restaurantsData[0])}
                    >
                      Order Now
                    </button>
                  </div>
                </div>
              </div>
            )}
            
            {/* Restaurant Grid */}
            <div>
              <h2 className="text-xl font-bold mb-4">All Restaurants</h2>
              {filteredRestaurants.length === 0 ? (
                <div className="text-center py-10">
                  <p className="text-gray-500">No restaurants found matching your criteria.</p>
                </div>
              ) : (
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                  {filteredRestaurants.map(restaurant => (
                    <div 
                      key={restaurant.id}
                      className="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow cursor-pointer"
                      onClick={() => setSelectedRestaurant(restaurant)}
                    >
                      <div className="h-48 overflow-hidden">
                        <img 
                          src={restaurant.image} 
                          alt={restaurant.name}
                          className="w-full h-full object-cover transition-transform hover:scale-105"
                        />
                      </div>
                      <div className="p-4">
                        <h3 className="font-bold text-lg">{restaurant.name}</h3>
                        <div className="flex items-center mt-1 text-sm text-gray-600">
                          <span>{restaurant.cuisine}</span>
                          <span className="mx-2">•</span>
                          <span className="flex items-center">
                            <Star size={14} className="mr-1 fill-[#FF5A5F] text-[#FF5A5F]" /> 
                            {restaurant.rating}
                          </span>
                        </div>
                        <div className="flex justify-between items-center mt-3">
                          <span className="text-sm flex items-center text-gray-600">
                            <Clock size={14} className="mr-1" /> 
                            {restaurant.deliveryTime} min
                          </span>
                          <span className="text-sm text-gray-600">
                            {restaurant.deliveryFee} ETB delivery
                          </span>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        )}
        
        {/* Restaurant Detail View */}
        {activeTab === 'home' && selectedRestaurant && (
          <div>
            {/* Restaurant Header */}
            <div className="relative h-64 -mx-4 mb-6">
              <img 
                src={selectedRestaurant.image} 
                alt={selectedRestaurant.name}
                className="w-full h-full object-cover"
              />
              <button 
                className="absolute top-4 left-4 bg-white rounded-full p-2 shadow-md"
                onClick={() => setSelectedRestaurant(null)}
              >
                <X size={20} />
              </button>
              <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-6">
                <h2 className="text-white text-3xl font-bold">{selectedRestaurant.name}</h2>
                <div className="flex items-center mt-2 text-white">
                  <span>{selectedRestaurant.cuisine}</span>
                  <span className="mx-2">•</span>
                  <span className="flex items-center">
                    <Star size={16} className="mr-1 fill-white" /> 
                    {selectedRestaurant.rating}
                  </span>
                  <span className="mx-2">•</span>
                  <span className="flex items-center">
                    <Clock size={16} className="mr-1" /> 
                    {selectedRestaurant.deliveryTime} min
                  </span>
                </div>
                <p className="text-white text-sm mt-1">
                  Minimum order: {selectedRestaurant.minOrder} ETB • Delivery fee: {selectedRestaurant.deliveryFee} ETB
                </p>
              </div>
            </div>
            
            {/* Menu Categories */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {/* Menu Categories Sidebar */}
              <div className="md:col-span-1">
                <div className="bg-white rounded-xl p-4 shadow-sm sticky top-20">
                  <h3 className="font-bold text-lg mb-3">Menu Categories</h3>
                  <ul className="space-y-2">
                    {['Main Dishes', 'Vegetarian', 'Beverages'].map(category => (
                      <li key={category}>
                        <a 
                          href={`#${category.replace(/\s+/g, '-').toLowerCase()}`}
                          className="block px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700"
                        >
                          {category}
                        </a>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
              
              {/* Menu Items */}
              <div className="md:col-span-2">
                {['Main Dishes', 'Vegetarian', 'Beverages'].map(category => {
                  const categoryItems = menuItemsData[selectedRestaurant.id]?.filter(
                    item => item.category === category
                  ) || [];
                  
                  if (categoryItems.length === 0) return null;
                  
                  return (
                    <div 
                      key={category} 
                      id={category.replace(/\s+/g, '-').toLowerCase()}
                      className="mb-8"
                    >
                      <h3 className="font-bold text-xl mb-4">{category}</h3>
                      <div className="space-y-4">
                        {categoryItems.map(item => (
                          <div 
                            key={item.id}
                            className="bg-white rounded-xl p-4 shadow-sm flex hover:shadow-md transition-shadow cursor-pointer"
                            onClick={() => openItemModal(item)}
                          >
                            <div className="flex-1">
                              <h4 className="font-bold text-lg">{item.name}</h4>
                              <p className="text-gray-600 text-sm mt-1">{item.description}</p>
                              <p className="font-medium mt-2">{item.price} ETB</p>
                              {item.customizations.length > 0 && (
                                <span className="text-xs text-[#00A699] mt-1 inline-block">
                                  Customizable
                                </span>
                              )}
                            </div>
                            <div className="w-24 h-24 ml-4 rounded-lg overflow-hidden">
                              <img 
                                src={item.image} 
                                alt={item.name}
                                className="w-full h-full object-cover"
                              />
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        )}
        
        {/* Checkout Flow */}
        {activeTab === 'checkout' && (
          <div>
            {!orderPlaced ? (
              <div>
                <div className="flex items-center mb-6">
                  <button 
                    className="mr-4 p-2 rounded-full bg-gray-100"
                    onClick={goToHome}
                  >
                    <X size={20} />
                  </button>
                  <h2 className="text-xl font-bold">Checkout</h2>
                </div>
                
                {/* Checkout Steps */}
                <div className="flex justify-between mb-8 relative">
                  <div className="absolute top-4 left-0 right-0 h-1 bg-gray-200 -z-10"></div>
                  {['Delivery Address', 'Payment Method', 'Review Order'].map((step, index) => (
                    <div 
                      key={step}
                      className={`flex flex-col items-center ${index <= checkoutStep ? 'text-[#00A699]' : 'text-gray-400'}`}
                    >
                      <div className={`w-8 h-8 rounded-full flex items-center justify-center mb-2 ${
                        index < checkoutStep ? 'bg-[#00A699] text-white' : 
                        index === checkoutStep ? 'border-2 border-[#00A699] bg-white' : 
                        'border-2 border-gray-200 bg-white'
                      }`}>
                        {index < checkoutStep ? '✓' : index + 1}
                      </div>
                      <span className="text-sm">{step}</span>
                    </div>
                  ))}
                </div>
                
                {/* Step 1: Delivery Address */}
                {checkoutStep === 0 && (
                  <div className="bg-white rounded-xl p-6 shadow-sm">
                    <h3 className="font-bold text-lg mb-4">Select Delivery Address</h3>
                    <div className="space-y-3">
                      {userData.addresses.map(address => (
                        <div 
                          key={address.id}
                          className={`border rounded-lg p-4 flex items-start ${
                            address.isDefault ? 'border-[#00A699]' : 'border-gray-200'
                          }`}
                        >
                          <input 
                            type="radio" 
                            name="address" 
                            id={`address-${address.id}`}
                            defaultChecked={address.isDefault}
                            className="mt-1 mr-3"
                          />
                          <div>
                            <label htmlFor={`address-${address.id}`} className="font-medium block">
                              {address.name}
                              {address.isDefault && (
                                <span className="ml-2 text-xs bg-gray-100 px-2 py-1 rounded text-gray-600">
                                  Default
                                </span>
                              )}
                            </label>
                            <p className="text-gray-600 text-sm mt-1">{address.address}</p>
                          </div>
                        </div>
                      ))}
                      
                      <button className="w-full mt-2 border border-dashed border-gray-300 rounded-lg p-4 text-gray-500 flex items-center justify-center">
                        <Plus size={18} className="mr-2" /> Add New Address
                      </button>
                    </div>
                    
                    <button 
                      className="w-full bg-[#00A699] text-white py-3 rounded-lg font-medium mt-6"
                      onClick={() => setCheckoutStep(1)}
                    >
                      Continue to Payment
                    </button>
                  </div>
                )}
                
                {/* Step 2: Payment Method */}
                {checkoutStep === 1 && (
                  <div className="bg-white rounded-xl p-6 shadow-sm">
                    <h3 className="font-bold text-lg mb-4">Select Payment Method</h3>
                    <div className="space-y-3">
                      <div className="border rounded-lg p-4 border-[#00A699]">
                        <div className="flex items-start">
                          <input 
                            type="radio" 
                            name="payment" 
                            id="telebirr"
                            defaultChecked
                            className="mt-1 mr-3"
                            onChange={() => setPaymentMethod('telebirr')}
                          />
                          <div className="flex-1">
                            <div className="flex justify-between">
                              <label htmlFor="telebirr" className="font-medium block">
                                Telebirr
                              </label>
                              <img 
                                src="https://www.ethiotelecom.et/wp-content/uploads/2021/05/telebirr.png" 
                                alt="Telebirr"
                                className="h-6"
                              />
                            </div>
                            <p className="text-gray-600 text-sm mt-1">
                              Pay directly with your Telebirr mobile money account
                            </p>
                          </div>
                        </div>
                      </div>
                      
                      <div className="border rounded-lg p-4 border-gray-200">
                        <div className="flex items-start">
                          <input 
                            type="radio" 
                            name="payment" 
                            id="mobile-banking"
                            className="mt-1 mr-3"
                            onChange={() => setPaymentMethod('mobile-banking')}
                          />
                          <div className="flex-1">
                            <div className="flex justify-between">
                              <label htmlFor="mobile-banking" className="font-medium block">
                                Mobile Banking
                              </label>
                              <div className="flex space-x-1">
                                <img 
                                  src="https://www.combanketh.et/wp-content/uploads/2020/09/cbe-birr-logo.png" 
                                  alt="CBE Birr"
                                  className="h-6"
                                />
                                <img 
                                  src="https://play-lh.googleusercontent.com/DTMxDj4-FLlGZQgR1WbxVQkxqLlpxTr1GqdJdgGQBfNKKfnbWcf_hRxDWMpMC-l72w" 
                                  alt="Dashen"
                                  className="h-6"
                                />
                              </div>
                            </div>
                            <p className="text-gray-600 text-sm mt-1">
                              Pay using your mobile banking app
                            </p>
                          </div>
                        </div>
                      </div>
                      
                      <div className="border rounded-lg p-4 border-gray-200">
                        <div className="flex items-start">
                          <input 
                            type="radio" 
                            name="payment" 
                            id="cash"
                            className="mt-1 mr-3"
                            onChange={() => setPaymentMethod('cash')}
                          />
                          <div>
                            <label htmlFor="cash" className="font-medium block">
                              Cash on Delivery
                            </label>
                            <p className="text-gray-600 text-sm mt-1">
                              Pay with cash when your order arrives
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                    
                    <div className="flex mt-6 space-x-3">
                      <button 
                        className="flex-1 border border-gray-300 py-3 rounded-lg font-medium"
                        onClick={() => setCheckoutStep(0)}
                      >
                        Back
                      </button>
                      <button 
                        className="flex-1 bg-[#00A699] text-white py-3 rounded-lg font-medium"
                        onClick={() => setCheckoutStep(2)}
                      >
                        Continue
                      </button>
                    </div>
                  </div>
                )}
                
                {/* Step 3: Review Order */}
                {checkoutStep === 2 && (
                  <div className="bg-white rounded-xl p-6 shadow-sm">
                    <h3 className="font-bold text-lg mb-4">Review Your Order</h3>
                    
                    {/* Delivery Details */}
                    <div className="mb-6">
                      <h4 className="font-medium text-gray-700 mb-2">Delivery Details</h4>
                      <div className="bg-gray-50 p-4 rounded-lg">
                        <div className="flex items-start">
                          <MapPin size={18} className="text-gray-500 mr-2 mt-0.5" />
                          <div>
                            <p className="font-medium">{userData.addresses[0].name}</p>
                            <p className="text-gray-600 text-sm">{userData.addresses[0].address}</p>
                          </div>
                        </div>
                      </div>
                    </div>
                    
                    {/* Payment Method */}
                    <div className="mb-6">
                      <h4 className="font-medium text-gray-700 mb-2">Payment Method</h4>
                      <div className="bg-gray-50 p-4 rounded-lg">
                        <div className="flex items-center">
                          {paymentMethod === 'telebirr' ? (
                            <>
                              <img 
                                src="https://www.ethiotelecom.et/wp-content/uploads/2021/05/telebirr.png" 
                                alt="Telebirr"
                                className="h-6 mr-3"
                              />
                              <span>Telebirr</span>
                            </>
                          ) : paymentMethod === 'mobile-banking' ? (
                            <>
                              <Phone size={18} className="text-gray-500 mr-3" />
                              <span>Mobile Banking</span>
                            </>
                          ) : (
                            <>
                              <CreditCard size={18} className="text-gray-500 mr-3" />
                              <span>Cash on Delivery</span>
                            </>
                          )}
                        </div>
                      </div>
                    </div>
                    
                    {/* Order Items */}
                    <div className="mb-6">
                      <h4 className="font-medium text-gray-700 mb-2">Order Items</h4>
                      <div className="bg-gray-50 p-4 rounded-lg">
                        <div className="space-y-3">
                          {cart.map((item, index) => (
                            <div key={index} className="flex justify-between items-center">
                              <div className="flex items-center">
                                <span className="font-medium mr-2">{item.quantity}x</span>
                                <span>{item.name}</span>
                              </div>
                              <span>{item.price * item.quantity} ETB</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>
                    
                    {/* Order Summary */}
                    <div className="border-t pt-4 mb-6">
                      <h4 className="font-medium text-gray-700 mb-2">Order Summary</h4>
                      <div className="space-y-2">
                        <div className="flex justify-between">
                          <span className="text-gray-600">Subtotal</span>
                          <span>{cartTotal} ETB</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-gray-600">Delivery Fee</span>
                          <span>{deliveryFee} ETB</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-gray-600">Tax (15%)</span>
                          <span>{tax} ETB</span>
                        </div>
                        <div className="flex justify-between font-bold pt-2 border-t">
                          <span>Total</span>
                          <span>{orderTotal} ETB</span>
                        </div>
                      </div>
                    </div>
                    
                    <div className="flex mt-6 space-x-3">
                      <button 
                        className="flex-1 border border-gray-300 py-3 rounded-lg font-medium"
                        onClick={() => setCheckoutStep(1)}
                      >
                        Back
                      </button>
                      <button 
                        className="flex-1 bg-[#FF5A5F] text-white py-3 rounded-lg font-medium"
                        onClick={placeOrder}
                      >
                        Place Order
                      </button>
                    </div>
                  </div>
                )}
              </div>
            ) : (
              <div className="bg-white rounded-xl p-6 shadow-sm text-center">
                <div className="w-20 h-20 bg-[#00A699] rounded-full flex items-center justify-center mx-auto mb-6">
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                  </svg>
                </div>
                <h2 className="text-2xl font-bold mb-2">Order Placed Successfully!</h2>
                <p className="text-gray-600 mb-6">Your order has been confirmed and is being processed.</p>
                
                {/* Order Status */}
                <div className="max-w-md mx-auto mb-8">
                  <div className="relative">
                    <div className="absolute top-0 left-6 -ml-px h-full w-0.5 bg-gray-200"></div>
                    
                    <div className="relative flex items-start mb-6">
                      <div className={`h-12 w-12 rounded-full flex items-center justify-center ${
                        orderStatus === 'confirmed' || orderStatus === 'preparing' || orderStatus === 'ready' || orderStatus === 'delivering' || orderStatus === 'delivered'
                          ? 'bg-[#00A699] text-white'
                          : 'bg-gray-200 text-gray-500'
                      }`}>
                        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                        </svg>
                      </div>
                      <div className="ml-4">
                        <h3 className="font-medium">Order Confirmed</h3>
                        <p className="text-sm text-gray-500">Your order has been received by the restaurant</p>
                      </div>
                    </div>
                    
                    <div className="relative flex items-start mb-6">
                      <div className={`h-12 w-12 rounded-full flex items-center justify-center ${
                        orderStatus === 'preparing' || orderStatus === 'ready' || orderStatus === 'delivering' || orderStatus === 'delivered'
                          ? 'bg-[#00A699] text-white'
                          : 'bg-gray-200 text-gray-500'
                      }`}>
                        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                        </svg>
                      </div>
                      <div className="ml-4">
                        <h3 className="font-medium">Preparing Your Food</h3>
                        <p className="text-sm text-gray-500">The restaurant is preparing your order</p>
                      </div>
                    </div>
                    
                    <div className="relative flex items-start mb-6">
                      <div className={`h-12 w-12 rounded-full flex items-center justify-center ${
                        orderStatus === 'ready' || orderStatus === 'delivering' || orderStatus === 'delivered'
                          ? 'bg-[#00A699] text-white'
                          : 'bg-gray-200 text-gray-500'
                      }`}>
                        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                      </div>
                      <div className="ml-4">
                        <h3 className="font-medium">Ready for Pickup</h3>
                        <p className="text-sm text-gray-500">Your order is ready and waiting for a driver</p>
                      </div>
                    </div>
                    
                    <div className="relative flex items-start mb-6">
                      <div className={`h-12 w-12 rounded-full flex items-center justify-center ${
                        orderStatus === 'delivering' || orderStatus === 'delivered'
                          ? 'bg-[#00A699] text-white'
                          : 'bg-gray-200 text-gray-500'
                      }`}>
                        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z" />
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0" />
                        </svg>
                      </div>
                      <div className="ml-4">
                        <h3 className="font-medium">On the Way</h3>
                        <p className="text-sm text-gray-500">Your order is on the way to your location</p>
                      </div>
                    </div>
                    
                    <div className="relative flex items-start">
                      <div className={`h-12 w-12 rounded-full flex items-center justify-center ${
                        orderStatus === 'delivered'
                          ? 'bg-[#00A699] text-white'
                          : 'bg-gray-200 text-gray-500'
                      }`}>
                        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
                        </svg>
                      </div>
                      <div className="ml-4">
                        <h3 className="font-medium">Delivered</h3>
                        <p className="text-sm text-gray-500">Enjoy your meal!</p>
                      </div>
                    </div>
                  </div>
                </div>
                
                <button 
                  className="bg-[#00A699] text-white px-6 py-3 rounded-lg font-medium"
                  onClick={goToHome}
                >
                  Back to Home
                </button>
              </div>
            )}
          </div>
        )}
        
        {/* Profile Tab */}
        {activeTab === 'profile' && (
          <div>
            <div className="flex items-center mb-6">
              <button 
                className="mr-4 p-2 rounded-full bg-gray-100"
                onClick={goToHome}
              >
                <X size={20} />
              </button>
              <h2 className="text-xl font-bold">My Profile</h2>
            </div>
            
            <div className="bg-white rounded-xl p-6 shadow-sm mb-6">
              <div className="flex items-center">
                <div className="w-16 h-16 bg-[#00A699] rounded-full flex items-center justify-center text-white text-2xl font-bold">
                  {userData.name.split(' ').map(n => n[0]).join('')}
                </div>
                <div className="ml-4">
                  <h3 className="font-bold text-lg">{userData.name}</h3>
                  <p className="text-gray-600">{userData.phone}</p>
                  <p className="text-gray-600">{userData.email}</p>
                </div>
              </div>
              <button className="mt-4 text-[#00A699] font-medium">Edit Profile</button>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="bg-white rounded-xl p-6 shadow-sm">
                <h3 className="font-bold text-lg mb-4">My Addresses</h3>
                <div className="space-y-4">
                  {userData.addresses.map(address => (
                    <div key={address.id} className="flex justify-between items-center">
                      <div>
                        <h4 className="font-medium">
                          {address.name}
                          {address.isDefault && (
                            <span className="ml-2 text-xs bg-gray-100 px-2 py-1 rounded text-gray-600">
                              Default
                            </span>
                          )}
                        </h4>
                        <p className="text-gray-600 text-sm">{address.address}</p>
                      </div>
                      <button className="text-[#00A699]">Edit</button>
                    </div>
                  ))}
                </div>
                <button className="mt-4 text-[#00A699] font-medium flex items-center">
                  <Plus size={16} className="mr-1" /> Add New Address
                </button>
              </div>
              
              <div className="bg-white rounded-xl p-6 shadow-sm">
                <h3 className="font-bold text-lg mb-4">Payment Methods</h3>
                <div className="space-y-4">
                  <div className="flex justify-between items-center">
                    <div className="flex items-center">
                      <img 
                        src="https://www.ethiotelecom.et/wp-content/uploads/2021/05/telebirr.png" 
                        alt="Telebirr"
                        className="h-8 mr-3"
                      />
                      <div>
                        <h4 className="font-medium">Telebirr</h4>
                        <p className="text-gray-600 text-sm">Connected to {userData.phone}</p>
                      </div>
                    </div>
                    <button className="text-[#00A699]">Edit</button>
                  </div>
                </div>
                <button className="mt-4 text-[#00A699] font-medium flex items-center">
                  <Plus size={16} className="mr-1" /> Add Payment Method
                </button>
              </div>
              
              <div className="bg-white rounded-xl p-6 shadow-sm md:col-span-2">
                <h3 className="font-bold text-lg mb-4">Order History</h3>
                <div className="space-y-4">
                  <div className="border border-gray-200 rounded-lg p-4">
                    <div className="flex justify-between items-start">
                      <div>
                        <h4 className="font-medium">Habesha Restaurant</h4>
                        <p className="text-gray-600 text-sm">2 items • 400 ETB</p>
                        <p className="text-gray-500 text-xs mt-1">Yesterday, 7:30 PM</p>
                      </div>
                      <span className="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">
                        Delivered
                      </span>
                    </div>
                    <div className="flex justify-between mt-4 pt-3 border-t">
                      <button className="text-gray-600 text-sm">View Details</button>
                      <button className="text-[#FF5A5F] text-sm font-medium">Reorder</button>
                    </div>
                  </div>
                  
                  <div className="border border-gray-200 rounded-lg p-4">
                    <div className="flex justify-between items-start">
                      <div>
                        <h4 className="font-medium">Pizza Hut</h4>
                        <p className="text-gray-600 text-sm">3 items • 550 ETB</p>
                        <p className="text-gray-500 text-xs mt-1">May 15, 2023, 1:15 PM</p>
                      </div>
                      <span className="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">
                        Delivered
                      </span>
                    </div>
                    <div className="flex justify-between mt-4 pt-3 border-t">
                      <button className="text-gray-600 text-sm">View Details</button>
                      <button className="text-[#FF5A5F] text-sm font-medium">Reorder</button>
                    </div>
                  </div>
                </div>
                <button className="mt-4 text-[#00A699] font-medium">View All Orders</button>
              </div>
            </div>
          </div>
        )}
      </main>
      
      {/* Bottom Navigation */}
      <nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 py-2 px-4 flex justify-around z-10">
        <button 
          className={`flex flex-col items-center p-2 ${activeTab === 'home' ? 'text-[#FF5A5F]' : 'text-gray-500'}`}
          onClick={goToHome}
        >
          <Home size={24} />
          <span className="text-xs mt-1">Home</span>
        </button>
        <button 
          className={`flex flex-col items-center p-2 ${activeTab === 'search' ? 'text-[#FF5A5F]' : 'text-gray-500'}`}
          onClick={() => setActiveTab('search')}
        >
          <Search size={24} />
          <span className="text-xs mt-1">Search</span>
        </button>
        <button 
          className={`flex flex-col items-center p-2 ${activeTab === 'orders' ? 'text-[#FF5A5F]' : 'text-gray-500'}`}
          onClick={() => isAuthenticated ? setActiveTab('orders') : setShowLoginModal(true)}
        >
          <Clock size={24} />
          <span className="text-xs mt-1">Orders</span>
        </button>
        <button 
          className={`flex flex-col items-center p-2 ${activeTab === 'profile' ? 'text-[#FF5A5F]' : 'text-gray-500'}`}
          onClick={() => isAuthenticated ? setActiveTab('profile') : setShowLoginModal(true)}
        >
          <User size={24} />
          <span className="text-xs mt-1">Profile</span>
        </button>
      </nav>
      
      {/* Login Modal */}
      {showLoginModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl p-6 w-full max-w-md">
            <div className="flex justify-between items-center mb-6">
              <h3 className="font-bold text-xl">Login or Sign Up</h3>
              <button onClick={() => setShowLoginModal(false)}>
                <X size={24} />
              </button>
            </div>
            
            <form onSubmit={handleLogin}>
              <div className="mb-4">
                <label className="block text-gray-700 text-sm font-medium mb-2">
                  Phone Number
                </label>
                <input 
                  type="tel" 
                  className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#00A699]"
                  placeholder="+251 91 234 5678"
                  required
                />
              </div>
              
              <div className="mb-6">
                <label className="block text-gray-700 text-sm font-medium mb-2">
                  Password
                </label>
                <input 
                  type="password" 
                  className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#00A699]"
                  placeholder="Enter your password"
                  required
                />
                <div className="flex justify-end mt-2">
                  <button type="button" className="text-sm text-[#00A699]">
                    Forgot Password?
                  </button>
                </div>
              </div>
              
              <button 
                type="submit"
                className="w-full bg-[#FF5A5F] text-white py-3 rounded-lg font-medium"
              >
                Login
              </button>
              
              <div className="mt-4 text-center">
                <p className="text-gray-600">
                  Don't have an account? <button type="button" className="text-[#00A699] font-medium">Sign Up</button>
                </p>
              </div>
              
              <div className="mt-6 relative">
                <div className="absolute inset-0 flex items-center">
                  <div className="w-full border-t border-gray-300"></div>
                </div>
                <div className="relative flex justify-center text-sm">
                  <span className="px-2 bg-white text-gray-500">Or continue with</span>
                </div>
              </div>
              
              <div className="mt-6 grid grid-cols-3 gap-3">
                <button
                  type="button"
                  className="w-full flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
                >
                  <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12.545,10.239v3.821h5.445c-0.712,2.315-2.647,3.972-5.445,3.972c-3.332,0-6.033-2.701-6.033-6.032s2.701-6.032,6.033-6.032c1.498,0,2.866,0.549,3.921,1.453l2.814-2.814C17.503,2.988,15.139,2,12.545,2C7.021,2,2.543,6.477,2.543,12s4.478,10,10.002,10c8.396,0,10.249-7.85,9.426-11.748L12.545,10.239z"/>
                  </svg>
                </button>
                <button
                  type="button"
                  className="w-full flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
                >
                  <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                  </svg>
                </button>
                <button
                  type="button"
                  className="w-full flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
                >
                  <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 0C5.373 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.6.113.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/>
                  </svg>
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
      
      {/* Cart Modal */}
      {showCartModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-end md:items-center justify-center z-50 p-4">
          <div className="bg-white rounded-t-xl md:rounded-xl p-6 w-full max-w-md max-h-[80vh] overflow-y-auto">
            <div className="flex justify-between items-center mb-6">
              <h3 className="font-bold text-xl">Your Cart</h3>
              <button onClick={() => setShowCartModal(false)}>
                <X size={24} />
              </button>
            </div>
            
            {cart.length === 0 ? (
              <div className="text-center py-10">
                <div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <ShoppingCart size={32} className="text-gray-400" />
                </div>
                <h4 className="font-medium text-lg mb-2">Your cart is empty</h4>
                <p className="text-gray-500 mb-6">Add items from a restaurant to get started</p>
                <button 
                  className="bg-[#FF5A5F] text-white px-6 py-2 rounded-lg font-medium"
                  onClick={() => {
                    setShowCartModal(false);
                    goToHome();
                  }}
                >
                  Browse Restaurants
                </button>
              </div>
            ) : (
              <>
                <div className="mb-4">
                  <h4 className="font-medium text-gray-700 mb-2">
                    {selectedRestaurant?.name || 'Your Items'}
                  </h4>
                  <div className="space-y-4">
                    {cart.map((item, index) => (
                      <div key={index} className="flex justify-between border-b pb-4">
                        <div className="flex-1">
                          <div className="flex justify-between">
                            <h5 className="font-medium">{item.name}</h5>
                            <span>{item.price * item.quantity} ETB</span>
                          </div>
                          
                          {/* Item customizations */}
                          {item.selectedOptions && Object.keys(item.selectedOptions).length > 0 && (
                            <div className="mt-1 text-sm text-gray-600">
                              {Object.values(item.selectedOptions).map((option, i) => (
                                <div key={i} className="flex justify-between">
                                  <span>{option.name}</span>
                                  {option.price > 0 && <span>+{option.price} ETB</span>}
                                </div>
                              ))}
                            </div>
                          )}
                          
                          <div className="flex items-center mt-2">
                            <button 
                              className="p-1 rounded-full border border-gray-300"
                              onClick={() => updateQuantity(index, -1)}
                            >
                              <Minus size={14} />
                            </button>
                            <span className="mx-3">{item.quantity}</span>
                            <button 
                              className="p-1 rounded-full border border-gray-300"
                              onClick={() => updateQuantity(index, 1)}
                            >
                              <Plus size={14} />
                            </button>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
                
                <div className="border-t pt-4 mb-6">
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <span className="text-gray-600">Subtotal</span>
                      <span>{cartTotal} ETB</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Delivery Fee</span>
                      <span>{deliveryFee} ETB</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Tax (15%)</span>
                      <span>{tax} ETB</span>
                    </div>
                    <div className="flex justify-between font-bold pt-2 border-t">
                      <span>Total</span>
                      <span>{orderTotal} ETB</span>
                    </div>
                  </div>
                </div>
                
                <button 
                  className="w-full bg-[#FF5A5F] text-white py-3 rounded-lg font-medium"
                  onClick={proceedToCheckout}
                >
                  Checkout
                </button>
              </>
            )}
          </div>
        </div>
      )}
      
      {/* Item Detail Modal */}
      {showItemModal && selectedItem && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-end md:items-center justify-center z-50 p-4">
          <div className="bg-white rounded-t-xl md:rounded-xl w-full max-w-md max-h-[80vh] overflow-y-auto">
            <div className="h-48 relative">
              <img 
                src={selectedItem.image} 
                alt={selectedItem.name}
                className="w-full h-full object-cover"
              />
              <button 
                className="absolute top-4 left-4 bg-white rounded-full p-2 shadow-md"
                onClick={() => setShowItemModal(false)}
              >
                <X size={20} />
              </button>
            </div>
            
            <div className="p-6">
              <h3 className="font-bold text-xl mb-1">{selectedItem.name}</h3>
              <p className="text-gray-600 mb-4">{selectedItem.description}</p>
              <p className="font-medium text-lg mb-6">{selectedItem.price} ETB</p>
              
              {/* Customizations */}
              {selectedItem.customizations.length > 0 && (
                <div className="space-y-6 mb-6">
                  {selectedItem.customizations.map(customization => (
                    <div key={customization.id}>
                      <h4 className="font-medium mb-2">
                        {customization.name}
                        {customization.required && (
                          <span className="text-[#FF5A5F] text-sm ml-1">*</span>
                        )}
                      </h4>
                      <div className="space-y-2">
                        {customization.options.map(option => (
                          <div 
                            key={option.id}
                            className={`border rounded-lg p-3 flex justify-between items-center ${
                              selectedCustomizations[customization.id]?.id === option.id
                                ? 'border-[#00A699] bg-[#E6F7F6]'
                                : 'border-gray-200'
                            }`}
                            onClick={() => handleCustomizationChange(customization.id, option)}
                          >
                            <div className="flex items-center">
                              <input 
                                type="radio"
                                checked={selectedCustomizations[customization.id]?.id === option.id}
                                onChange={() => {}}
                                className="mr-3"
                              />
                              <span>{option.name}</span>
                            </div>
                            {option.price > 0 && (
                              <span>+{option.price} ETB</span>
                            )}
                          </div>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
              )}
              
              <button 
                className="w-full bg-[#FF5A5F] text-white py-3 rounded-lg font-medium"
                onClick={addToCart}
                disabled={selectedItem.customizations.some(c => c.required && !selectedCustomizations[c.id])}
              >
                Add to Cart
              </button>
            </div>
          </div>
        </div>
      )}
      
      {/* Telebirr Payment Modal */}
      {showPaymentModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl p-6 w-full max-w-md">
            <div className="flex justify-between items-center mb-6">
              <h3 className="font-bold text-xl">Complete Payment</h3>
              <button onClick={() => setShowPaymentModal(false)}>
                <X size={24} />
              </button>
            </div>
            
            <div className="text-center mb-6">
              <img 
                src="https://www.ethiotelecom.et/wp-content/uploads/2021/05/telebirr.png" 
                alt="Telebirr"
                className="h-16 mx-auto mb-4"
              />
              <h4 className="font-bold text-xl mb-2">{orderTotal} ETB</h4>
              <p className="text-gray-600">Pay using your Telebirr account</p>
            </div>
            
            <div className="bg-gray-50 p-4 rounded-lg mb-6">
              <p className="text-center text-gray-600 mb-4">
                To complete your payment, follow these steps:
              </p>
              <ol className="space-y-2 text-sm">
                <li className="flex items-start">
                  <span className="bg-[#00A699] text-white rounded-full w-5 h-5 flex items-center justify-center mr-2 flex-shrink-0 mt-0.5">1</span>
                  <span>Open your Telebirr mobile app</span>
                </li>
                <li className="flex items-start">
                  <span className="bg-[#00A699] text-white rounded-full w-5 h-5 flex items-center justify-center mr-2 flex-shrink-0 mt-0.5">2</span>
                  <span>Select "Pay" and scan the QR code or enter the merchant ID: 123456</span>
                </li>
                <li className="flex items-start">
                  <span className="bg-[#00A699] text-white rounded-full w-5 h-5 flex items-center justify-center mr-2 flex-shrink-0 mt-0.5">3</span>
                  <span>Enter the amount: {orderTotal} ETB</span>
                </li>
                <li className="flex items-start">
                  <span className="bg-[#00A699] text-white rounded-full w-5 h-5 flex items-center justify-center mr-2 flex-shrink-0 mt-0.5">4</span>
                  <span>Confirm the payment with your PIN</span>
                </li>
              </ol>
            </div>
            
            <div className="flex space-x-3">
              <button 
                className="flex-1 border border-gray-300 py-3 rounded-lg font-medium"
                onClick={() => setShowPaymentModal(false)}
              >
                Cancel
              </button>
              <button 
                className="flex-1 bg-[#00A699] text-white py-3 rounded-lg font-medium"
                onClick={completePayment}
              >
                I've Paid
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}