"use client";

import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";

const menuItems = {
  starters: [
    { name: "Foie Gras Terrine", price: "€24", description: "Fig jam, toasted brioche, truffle oil" },
    { name: "Scallop Carpaccio", price: "€22", description: "Citrus dressing, pink peppercorn, micro herbs" },
    { name: "Wild Mushroom Soup", price: "€18", description: "Chestnut cream, crispy sage, truffle foam" },
  ],
  mains: [
    { name: "Duck Confit", price: "€34", description: "Sarladaise potatoes, orange glaze, thyme jus" },
    { name: "Pan-Seared Sea Bass", price: "€36", description: "Fennel purée, saffron sauce, seasonal vegetables" },
    { name: "Beef Tenderloin", price: "€42", description: "Potato gratin, bordelaise sauce, glazed carrots" },
    { name: "Truffle Risotto", price: "€28", description: "Arborio rice, parmesan crisp, fresh black truffle" },
  ],
  desserts: [
    { name: "Chocolate Soufflé", price: "€16", description: "Valrhona chocolate, vanilla bean ice cream" },
    { name: "Lemon Tart", price: "€14", description: "Meringue, lime zest, raspberry coulis" },
    { name: "Crème Brûlée", price: "€12", description: "Madagascar vanilla, caramelized sugar crust" },
  ]
};

export function Menu() {
  const [activeTab, setActiveTab] = useState<"starters" | "mains" | "desserts">("starters");

  return (
    <section id="menu" className="py-20 bg-stone-50">
      <Container>
        <div className="text-center mb-16">
          <Heading className="text-4xl font-serif text-stone-900 mb-4">Our Menu</Heading>
          <Subheading className="text-stone-600">Seasonal ingredients, timeless recipes</Subheading>
        </div>

        <div className="flex justify-center mb-12">
          <div className="inline-flex bg-stone-200 p-1 rounded-lg">
            {(["starters", "mains", "desserts"] as const).map((tab) => (
              <button
                key={tab}
                type="button"
                onClick={() => setActiveTab(tab)}
                className={`px-6 py-2 rounded-md text-sm font-medium transition-all capitalize ${
                  activeTab === tab
                    ? "bg-white text-stone-900 shadow-sm"
                    : "text-stone-600 hover:text-stone-900"
                }`}
              >
                {tab}
              </button>
            ))}
          </div>
        </div>

        <div className="max-w-3xl mx-auto">
          <AnimatePresence mode="wait">
            <motion.div
              key={activeTab}
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -10 }}
              transition={{ duration: 0.3 }}
              className="grid gap-6"
            >
              {menuItems[activeTab].map((item, index) => (
                <div key={index} className="flex justify-between items-baseline border-b border-stone-200 pb-4 last:border-0">
                  <div className="flex-1 pr-8">
                    <h3 className="text-xl font-serif text-stone-900 mb-1">{item.name}</h3>
                    <p className="text-stone-600 text-sm italic">{item.description}</p>
                  </div>
                  <span className="text-amber-700 font-semibold">{item.price}</span>
                </div>
              ))}
            </motion.div>
          </AnimatePresence>
        </div>
      </Container>
    </section>
  );
}