import { PageTransition } from "@/components/PageTransition";
import { motion } from "motion/react";

const MENU_CATEGORIES = [
  {
    title: "Small Plates",
    items: [
      { name: "Beef Tartare", description: "Caper, shallot, egg yolk, crostini", price: "24" },
      { name: "Burrata", description: "Heirloom tomato, basil oil, balsamic reduction, sourdough", price: "22" },
      { name: "Charred Octopus", description: "Romesco sauce, fingerling potatoes, chorizo", price: "28" },
      { name: "Roasted Bone Marrow", description: "Parsley salad, caramelized onion jam, grilled bread", price: "26" },
    ]
  },
  {
    title: "Vegetarian",
    items: [
      { name: "Wild Mushroom Risotto", description: "Truffle oil, parmesan crisp, fresh herbs", price: "26" },
      { name: "Roasted Cauliflower", description: "Tahini dressing, pomegranate seeds, pine nuts", price: "18" },
      { name: "Beetroot Carpaccio", description: "Goat cheese mousse, candied walnuts, micro greens", price: "16" },
    ]
  },
  {
    title: "Dessert",
    items: [
      { name: "Dark Chocolate Torte", description: "Salted caramel, espresso mascarpone", price: "14" },
      { name: "Lemon Posset", description: "Shortbread crumble, fresh berries", price: "12" },
      { name: "Artisan Cheese Plate", description: "Chef's selection of 3 cheeses, honeycomb, crackers", price: "22" },
    ]
  }
];

export default function Menu() {
  return (
    <PageTransition>
      <div className="pt-32 pb-24 px-6 min-h-screen bg-charcoal-base">
        <div className="container mx-auto max-w-4xl">
          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="text-center mb-20"
          >
            <h1 className="text-5xl md:text-6xl font-serif text-cream-base mb-6">Dinner Menu</h1>
            <div className="w-16 h-[1px] bg-gold-base mx-auto mb-6" />
            <p className="text-gray-400 tracking-widest uppercase text-sm">Creative Share Plates</p>
          </motion.div>

          <div className="space-y-24">
            {MENU_CATEGORIES.map((category, idx) => (
              <motion.section 
                key={category.title}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, margin: "-100px" }}
                transition={{ duration: 0.6, delay: idx * 0.1 }}
              >
                <h2 className="text-3xl font-serif text-gold-light mb-10 text-center">{category.title}</h2>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-10">
                  {category.items.map((item) => (
                    <div key={item.name} className="group cursor-default">
                      <div className="flex justify-between items-baseline mb-2">
                        <h3 className="text-lg text-cream-base font-serif group-hover:text-gold-base transition-colors">{item.name}</h3>
                        <div className="flex-grow border-b border-dashed border-white/10 mx-4" />
                        <span className="text-gold-light">${item.price}</span>
                      </div>
                      <p className="text-sm text-gray-500 font-light leading-relaxed">{item.description}</p>
                    </div>
                  ))}
                </div>
              </motion.section>
            ))}
          </div>
        </div>
      </div>
    </PageTransition>
  );
}