import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Button } from "@/components/ui/button";
import { Footer } from "@/components/footer";
import { Phone } from "lucide-react";

const menuCategories = [
  {
    title: "Signature Curry Goat",
    items: [
      { name: "Curry Goat (Small)", price: "$1,000" },
      { name: "Curry Goat (Large)", price: "$1,500" },
      { name: "Mixed (Small)", price: "$1,200" },
      { name: "Mixed (Large)", price: "$1,600" },
    ]
  },
  {
    title: "Roti",
    items: [
      { name: "Roti", price: "$150" },
    ]
  },
  {
    title: "Chicken Dishes",
    items: [
      { name: "Fry Chicken", price: "Small $800 | Large $1,200" },
      { name: "Barbe Fry Chicken", price: "Small $950 | Large $1,300" },
      { name: "Sweet & Sour Chicken", price: "Small $950 | Large $1,300" },
      { name: "Curry Chicken", price: "Small $950 | Large $1,300" },
    ]
  },
  {
    title: "Traditional Dishes",
    items: [
      { name: "Curry Tripe & Bean", price: "Small $950 | Large $1,300" },
      { name: "Cow Head & Bean", price: "Small $950 | Large $1,300" },
      { name: "Brown Stew Slice Fish", price: "$1,600" },
    ]
  },
  {
    title: "Soups",
    items: [
      { name: "Goat Head Soup", price: "Small $200 | Medium $400" },
    ]
  }
];

export default function MenuPage() {
  return (
    <main className="min-h-screen bg-neutral-50">
      <div className="bg-[#3d2b1f] py-20 text-white">
        <Container>
          <Heading className="text-center text-[#ffcc00]">Our Menu</Heading>
          <Subheading className="text-center text-neutral-200">Authentic flavors, generous portions.</Subheading>
        </Container>
      </div>

      <Container className="py-16">
        <div className="max-w-4xl mx-auto space-y-12">
          {menuCategories.map((category, idx) => (
            <div key={idx} className="bg-white p-8 rounded-2xl shadow-sm border border-neutral-200">
              <h3 className="text-2xl font-bold text-[#3d2b1f] border-b-2 border-[#ffcc00] pb-2 mb-6">
                {category.title}
              </h3>
              <div className="space-y-4">
                {category.items.map((item, i) => (
                  <div key={i} className="flex justify-between items-center gap-4">
                    <span className="font-medium text-lg text-neutral-800">{item.name}</span>
                    <div className="flex-grow border-b border-dotted border-neutral-300 h-4"></div>
                    <span className="font-bold text-[#ff8c00] whitespace-nowrap">{item.price}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
          
          <div className="text-center pt-8">
            <Button size="lg" className="bg-[#ff8c00] hover:bg-[#e67e00] text-white px-10" asChild>
              <a href="tel:1-876-665-5098">
                <Phone className="mr-2 h-5 w-5" /> Call to Order Now
              </a>
            </Button>
          </div>
        </div>
      </Container>
      <Footer />
    </main>
  );
}