"use client";

import { Card } from "@/components/ui/Card"
import { TextAnimation } from "@/components/ui/TextAnimation"

export default function MenuSection() {
  const items = [
    { title: "Espresso", description: "Rich, bold, and smooth.", price: "$3.50" },
    { title: "Cappuccino", description: "Perfectly steamed milk.", price: "$4.50" },
    { title: "Latte", description: "Creamy and comforting.", price: "$4.75" },
    { title: "Mocha", description: "Decadent chocolate blend.", price: "$5.00" },
    { title: "Americano", description: "Espresso with hot water.", price: "$3.75" },
    { title: "Flat White", description: "Velvety microfoam finish.", price: "$4.25" },
  ]

  return (
    <section id="menu" className="py-24 bg-background">
      <div className="max-w-6xl mx-auto px-6">
        <TextAnimation 
          tag="h2" 
          text="Our Menu" 
          variant="fade-blur" 
          className="text-4xl font-bold text-foreground mb-12 text-center luxury-serif" 
        />
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {items.map((item, i) => (
            <Card key={i} className="p-6 flex flex-col gap-4">
              <h3 className="text-xl font-bold text-foreground">{item.title}</h3>
              <p className="text-muted-foreground">{item.description}</p>
              <span className="text-lg font-bold text-primary-cta">{item.price}</span>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}