"use client";
import { useState } from "react";
import { ShoppingCart, Search, Phone, Menu, X, Clock, Star, MapPin, ChevronDown } from "lucide-react";

const PizzaShop = () => {
  const [activeCategory, setActiveCategory] = useState("all");
  const [cartItems, setCartItems] = useState([]);
  const [isCartOpen, setIsCartOpen] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  // Data pizza
  const pizzas = [
    {
      id: 1,
      name: "Pizza Margherita",
      description: "Saus tomat segar, mozzarella, dan daun basil",
      price: 50000,
      shape: "bundar",
      image: "https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/bb033d85-e8bb-4be8-b3a3-c8602a713a3b.png",
      toppings: ["Keju", "Basil"]
    },
    {
      id: 2,
      name: "Pepperoni Classic",
      description: "Pepperoni yang melimpah dengan keju mozzarella",
      price: 55000,
      shape: "kotak",
      image: "https://placehold.co/300x300",
      toppings: ["Keju", "Pepperoni"]
    },
    {
      id: 3,
      name: "Supreme Deluxe",
      description: "Pepperoni, sosis, jamur, paprika, dan bawang",
      price: 60000,
      shape: "bundar",
      image: "https://placehold.co/300x300",
      toppings: ["Keju", "Pepperoni", "Jamur", "Paprika"]
    },
    {
      id: 4,
      name: "BBQ Chicken",
      description: "Ayam panggang dengan saus BBQ dan bawang merah",
      price: 58000,
      shape: "persegi panjang",
      image: "https://placehold.co/300x300",
      toppings: ["Keju", "Ayam", "Saus BBQ"]
    },
    {
      id: 5,
      name: "Vegetarian",
      description: "Jamu, paprika, zaitun, tomat, dan bawang",
      price: 52000,
      shape: "bundar",
      image: "https://placehold.co/300x300",
      toppings: ["Keju", "Jamur", "Paprika", "Zaitun"]
    },
    {
      id: 6,
      name: "Meat Lovers",
      description: "Pepperoni, sosis, ham, dan daging sapi",
      price: 60000,
      shape: "kotak",
      image: "https://placehold.co/300x300",
      toppings: ["Keju", "Pepperoni", "Sosis", "Ham"]
    }
  ];

  const categories = [
    { id: "all", name: "Semua Menu" },
    { id: "bundar", name: "Bundar" },
    { id: "kotak", name: "Kotak" },
    { id: "persegi panjang", name: "Persegi Panjang" }
  ];

  const filteredPizzas = activeCategory === "all" 
    ? pizzas 
    : pizzas.filter(pizza => pizza.shape === activeCategory);

  const addToCart = (pizza) => {
    setCartItems([...cartItems, pizza]);
  };

  const formatPrice = (price) => {
    return new Intl.NumberFormat('id-ID', {
      style: 'currency',
      currency: 'IDR',
      minimumFractionDigits: 0
    }).format(price);
  };

  const getShapeIcon = (shape) => {
    switch(shape) {
      case "bundar": return "🟠";
      case "kotak": return "⬜";
      case "persegi panjang": return "⬛";
      default: return "🍕";
    }
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-red-600 text-white shadow-lg">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-2">
              <h1 className="text-2xl font-bold">Pizza<span className="text-yellow-400">Mania</span></h1>
            </div>

            {/* Desktop Navigation */}
            <nav className="hidden md:flex items-center space-x-8">
              <a href="#menu" className="hover:text-yellow-300 transition-colors">Menu</a>
              <a href="#about" className="hover:text-yellow-300 transition-colors">Tentang Kami</a>
              <a href="#contact" className="hover:text-yellow-300 transition-colors">Kontak</a>
            </nav>

            {/* Right side icons */}
            <div className="flex items-center space-x-4">
              <button className="p-2 hover:bg-red-700 rounded-full transition-colors">
                <Search size={20} />
              </button>
              <button 
                className="relative p-2 hover:bg-red-700 rounded-full transition-colors"
                onClick={() => setIsCartOpen(true)}
              >
                <ShoppingCart size={20} />
                {cartItems.length > 0 && (
                  <span className="absolute -top-1 -right-1 bg-yellow-400 text-red-600 text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">
                    {cartItems.length}
                  </span>
                )}
              </button>
              <button 
                className="md:hidden p-2 hover:bg-red-700 rounded-full transition-colors"
                onClick={() => setIsMobileMenuOpen(true)}
              >
                <Menu size={20} />
              </button>
            </div>
          </div>
        </div>
      </header>

      {/* Mobile Menu */}
      {isMobileMenuOpen && (
        <div className="fixed inset-0 bg-black bg-opacity-50 z-50 md:hidden">
          <div className="absolute right-0 top-0 h-full w-64 bg-red-600 text-white p-4">
            <div className="flex justify-between items-center mb-8">
              <h2 className="text-xl font-bold">Menu</h2>
              <button onClick={() => setIsMobileMenuOpen(false)}>
                <X size={24} />
              </button>
            </div>
            <nav className="space-y-4">
              <a href="#menu" className="block py-2 hover:text-yellow-300">Menu</a>
              <a href="#about" className="block py-2 hover:text-yellow-300">Tentang Kami</a>
              <a href="#contact" className="block py-2 hover:text-yellow-300">Kontak</a>
            </nav>
          </div>
        </div>
      )}

      {/* Shopping Cart Sidebar */}
      {isCartOpen && (
        <div className="fixed inset-0 bg-black bg-opacity-50 z-50">
          <div className="absolute right-0 top-0 h-full w-full sm:w-96 bg-white p-6 overflow-y-auto">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-xl font-bold">Keranjang Belanja</h2>
              <button onClick={() => setIsCartOpen(false)}>
                <X size={24} />
              </button>
            </div>
            
            {cartItems.length === 0 ? (
              <p className="text-gray-500 text-center py-8">Keranjang Anda kosong</p>
            ) : (
              <div className="space-y-4">
                {cartItems.map((item, index) => (
                  <div key={index} className="flex items-center justify-between p-4 border rounded-lg">
                    <div>
                      <h3 className="font-medium">{item.name}</h3>
                      <p className="text-sm text-gray-500">{formatPrice(item.price)}</p>
                    </div>
                    <button 
                      onClick={() => setCartItems(cartItems.filter((_, i) => i !== index))}
                      className="text-red-600 hover:text-red-800"
                    >
                      Hapus
                    </button>
                  </div>
                ))}
                <div className="border-t pt-4 mt-4">
                  <div className="flex justify-between font-bold text-lg">
                    <span>Total:</span>
                    <span>{formatPrice(cartItems.reduce((total, item) => total + item.price, 0))}</span>
                  </div>
                  <button className="w-full bg-red-600 text-white py-3 rounded-lg mt-4 hover:bg-red-700 transition-colors">
                    Checkout
                  </button>
                </div>
              </div>
            )}
          </div>
        </div>
      )}

      {/* Hero Section */}
      <section className="relative bg-gradient-to-r from-red-600 to-red-700 text-white py-16">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-4xl md:text-5xl font-bold mb-4">Pizza Lezat dengan Harga Terjangkau</h2>
          <p className="text-xl mb-8">Dari Rp 50.000 - Rasakan Kenikmatan dalam Setiap Gigitan</p>
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <a href="#menu" className="bg-yellow-400 text-red-700 font-bold py-3 px-8 rounded-full hover:bg-yellow-300 transition-colors">
              Lihat Menu
            </a>
            <button className="border-2 border-white py-3 px-8 rounded-full hover:bg-red-800 transition-colors">
              Pesan Sekarang
            </button>
          </div>
        </div>
      </section>

      {/* Menu Section */}
      <section id="menu" className="py-16 container mx-auto px-4">
        <h2 className="text-3xl font-bold text-center mb-12">Menu Pizza Kami</h2>
        
        {/* Category Filter */}
        <div className="flex flex-wrap justify-center gap-2 mb-8">
          {categories.map(category => (
            <button
              key={category.id}
              onClick={() => setActiveCategory(category.id)}
              className={`px-4 py-2 rounded-full transition-colors ${
                activeCategory === category.id 
                  ? 'bg-red-600 text-white' 
                  : 'bg-gray-200 text-gray-800 hover:bg-gray-300'
              }`}
            >
              {category.name}
            </button>
          ))}
        </div>
        
        {/* Pizza Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {filteredPizzas.map(pizza => (
            <div key={pizza.id} className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
              <div className="relative">
                <img 
                  src={pizza.image} 
                  alt={`Pizza ${pizza.name} dengan toping ${pizza.toppings.join(', ')}`}
                  className="w-full h-48 object-cover"
                />
                <div className="absolute top-4 right-4 bg-red-600 text-white px-2 py-1 rounded-full text-sm">
                  {getShapeIcon(pizza.shape)} {pizza.shape}
                </div>
              </div>
              <div className="p-6">
                <h3 className="text-xl font-bold mb-2">{pizza.name}</h3>
                <p className="text-gray-600 mb-4">{pizza.description}</p>
                
                <div className="mb-4">
                  <p className="font-semibold">Topping:</p>
                  <div className="flex flex-wrap gap-2 mt-1">
                    {pizza.toppings.map((topping, index) => (
                      <span key={index} className="bg-gray-100 text-gray-800 text-sm px-2 py-1 rounded">
                        {topping}
                      </span>
                    ))}
                  </div>
                </div>
                
                <div className="flex items-center justify-between">
                  <span className="text-2xl font-bold text-red-600">{formatPrice(pizza.price)}</span>
                  <button 
                    onClick={() => addToCart(pizza)}
                    className="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors"
                  >
                    + Keranjang
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="bg-gray-100 py-16">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="text-3xl font-bold mb-8">Mengapa Memilih PizzaMania?</h2>
            
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
              <div className="text-center">
                <div className="bg-red-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Clock className="text-red-600" size={32} />
                </div>
                <h3 className="font-bold mb-2">Pengiriman Cepat</h3>
                <p className="text-gray-600">Pesanan Anda akan sampai dalam waktu 30 menit</p>
              </div>
              
              <div className="text-center">
                <div className="bg-red-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Star className="text-red-600" size={32} />
                </div>
                <h3 className="font-bold mb-2">Bahan Berkualitas</h3>
                <p className="text-gray-600">Menggunakan bahan-bahan pilihan terbaik</p>
              </div>
              
              <div className="text-center">
                <div className="bg-red-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                  <MapPin className="text-red-600" size={32} />
                </div>
                <h3 className="font-bold mb-2">Area Pengiriman Luas</h3>
                <p className="text-gray-600">Melayani pengiriman ke seluruh kota</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="bg-red-600 text-white py-12">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-4">Tunggu Apa Lagi?</h2>
          <p className="text-xl mb-8">Pesan pizza favorit Anda sekarang dan nikmati promo spesial!</p>
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <button className="bg-yellow-400 text-red-700 font-bold py-3 px-8 rounded-full hover:bg-yellow-300 transition-colors">
              Pesan Online
            </button>
            <button className="border-2 border-white py-3 px-8 rounded-full hover:bg-red-700 transition-colors flex items-center justify-center">
              <Phone size={20} className="mr-2" /> 
              Telepon Kami
            </button>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer id="contact" className="bg-gray-900 text-white py-12">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div>
              <h3 className="text-xl font-bold mb-4">PizzaMania</h3>
              <p className="text-gray-400">Menyajikan pizza terlezat dengan harga terjangkau sejak 2020</p>
            </div>
            
            <div>
              <h3 className="text-xl font-bold mb-4">Kontak Kami</h3>
              <p className="text-gray-400">Jl. Pizza Mania No. 123</p>
              <p className="text-gray-400">(021) 1234-5678</p>
              <p className="text-gray-400">info@pizzamania.com</p>
            </div>
            
            <div>
              <h3 className="text-xl font-bold mb-4">Jam Operasional</h3>
              <p className="text-gray-400">Senin - Minggu</p>
              <p className="text-gray-400">10:00 - 22:00</p>
            </div>
          </div>
          
          <div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
            <p>© 2023 PizzaMania. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default PizzaShop;