'use client'
import { useState } from 'react'
import Image from 'next/image'
import { ChefHat, ChevronDown, Flame, Wheat } from 'lucide-react'

export default function MenuDisplaySection() {
  const [open, setOpen] = useState<string | null>('Antipasti')
  const categories = ['Antipasti', 'Pizzas', 'Pasta', 'Dolci', 'Beverages']
  const menu: Record<string, { name: string; price: string; ingredients: string; image: string; tags: string[] }[]> = {
    Antipasti: [
      { name: 'Bruschetta Classica', price: '$9', ingredients: "Tomato, basil, mozzarella", image: "https://images.pexels.com/photos/2728186/pexels-photo-2728186.jpeg?auto=compress&cs=tinysrgb&h=350", tags: ['vegetarian'] },
      { name: 'Calamari Fritti', price: '$12', ingredients: "Squid, lemon, aioli", image: "https://images.pexels.com/photos/2728186/pexels-photo-2728186.jpeg?auto=compress&cs=tinysrgb&h=350", tags: [] },
    ],
    Pizzas: [
      { name: 'Margherita', price: '$14', ingredients: "San Marzano tomatoes, mozzarella, basil", image: "https://images.pexels.com/photos/35687736/pexels-photo-35687736.jpeg?auto=compress&cs=tinysrgb&h=350", tags: ['vegetarian'] },
      { name: 'Diavola', price: '$16', ingredients: "Spicy salami, chili flakes", image: "https://images.pexels.com/photos/35687736/pexels-photo-35687736.jpeg?auto=compress&cs=tinysrgb&h=350", tags: ['spicy'] },
    ],
    Pasta: [
      { name: 'Carbonara', price: '$17', ingredients: "Egg, pecorino, guanciale", image: "https://images.pexels.com/photos/2728186/pexels-photo-2728186.jpeg?auto=compress&cs=tinysrgb&h=350", tags: [] },
      { name: 'Penne Arrabbiata', price: '$15', ingredients: "Tomato, garlic, chili", image: "https://images.pexels.com/photos/2728186/pexels-photo-2728186.jpeg?auto=compress&cs=tinysrgb&h=350", tags: ["spicy", "vegetarian"] },
    ],
    Dolci: [
      { name: 'Tiramisù', price: '$9', ingredients: "Mascarpone, espresso, cocoa", image: "https://images.pexels.com/photos/35687736/pexels-photo-35687736.jpeg?auto=compress&cs=tinysrgb&h=350", tags: ['vegetarian'] },
      { name: 'Panna Cotta', price: '$8', ingredients: "Cream, vanilla, berry compote", image: "https://images.pexels.com/photos/35687736/pexels-photo-35687736.jpeg?auto=compress&cs=tinysrgb&h=350", tags: ['gluten-free'] },
    ],
    Beverages: [
      { name: 'Espresso', price: '$3', ingredients: "Italian roast", image: "https://images.pexels.com/photos/35687736/pexels-photo-35687736.jpeg?auto=compress&cs=tinysrgb&h=350", tags: [] },
      { name: 'Chianti', price: '$9', ingredients: "Sangiovese", image: "https://images.pexels.com/photos/35687736/pexels-photo-35687736.jpeg?auto=compress&cs=tinysrgb&h=350", tags: [] },
    ],
  }
  const toggle = (cat: string) => setOpen(open === cat ? null : cat)
  return (
    <section data-vula-section="menudisplay" id="menu-display" className="py-20 bg-neutral-50">
      <div className="container mx-auto px-4 max-w-4xl">
        <h2 className="text-3xl font-bold text-[#212121] mb-8 text-center">Our Menu</h2>
        {categories.map((cat) => (
          <div key={cat} className="mb-4">
            <button onClick={() => toggle(cat)}
              className="w-full flex items-center justify-between px-6 py-4 bg-white rounded-xl shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] transition-all duration-200 ease-out"
            >
              <span className="text-lg font-semibold text-[#212121]">{cat}</span>
              <ChevronDown className={`w-5 h-5 text-[#E91E63] transition-transform duration-200 ${open === cat ? 'rotate-180' : ''}`} />
            </button>
            {open === cat && (
              <div className="mt-2 space-y-3">
                {menu[cat].map((item, i) => (
                  <div key={i} className="flex items-start gap-4 bg-white p-4 rounded-xl border border-neutral-100">
                    <div className="w-20 h-20 rounded-lg overflow-hidden flex-shrink-0">
                      <Image src={item.image} alt={item.name} width={80} height={80} className="w-full h-full object-cover" />
                    </div>
                    <div className="flex-1">
                      <div className="flex items-center justify-between">
                        <h4 className="font-bold text-[#212121]">{item.name}</h4>
                        <span className="text-[#FF5722] font-bold">{item.price}</span>
                      </div>
                      <p className="text-sm text-[#212121]/70 mt-1">{item.ingredients}</p>
                      <div className="flex gap-2 mt-2">
                        {item.tags.includes('vegetarian') && <span className="text-xs px-2 py-0.5 rounded-full bg-green-100 text-green-700"><Wheat className="inline w-3 h-3 mr-1" />Veg</span>}
                        {item.tags.includes('gluten-free') && <span className="text-xs px-2 py-0.5 rounded-full bg-blue-100 text-blue-700">GF</span>}
                        {item.tags.includes('spicy') && <span className="text-xs px-2 py-0.5 rounded-full bg-red-100 text-red-700"><Flame className="inline w-3 h-3 mr-1" />Spicy</span>}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        ))}
      </div>
    </section>
  )
}