Photo Menu Card Grid

type Item = {
  name: string
  detail: string
  price: string
  src: string
  alt: string
}

const items: Item[] = [
  {
    name: "Margherita DOP",
    detail: "San Marzano tomato, fior di latte, basil",
    price: "$14",
    src: "https://images.unsplash.com/photo-1574071318508-1cdbab80d002?q=80&auto=format&fit=crop&w=600",
    alt: "A margherita pizza on a dark steel pan",
  },
  {
    name: "Diavola",
    detail: "Spicy salame, chilli honey, mozzarella",
    price: "$17",
    src: "https://images.unsplash.com/photo-1513104890138-7c749659a591?q=80&auto=format&fit=crop&w=600",
    alt: "A slice being lifted from a hot pizza",
  },
  {
    name: "Bufala e Pistacchio",
    detail: "Buffalo mozzarella, pistachio pesto, lemon",
    price: "$19",
    src: "https://images.unsplash.com/photo-1595854341625-f33ee10dbf94?q=80&auto=format&fit=crop&w=600",
    alt: "A pizza photographed from directly above",
  },
  {
    name: "The Antipasti Board",
    detail: "Cured meats, olives, pickles, focaccia",
    price: "$26",
    src: "https://images.unsplash.com/photo-1544025162-d76694265947?q=80&auto=format&fit=crop&w=600",
    alt: "A sharing board of cured meats and sides",
  },
  {
    name: "Tiramisu",
    detail: "Mascarpone, savoiardi, espresso",
    price: "$9",
    src: "https://images.unsplash.com/photo-1551024506-0bccd828d307?q=80&auto=format&fit=crop&w=600",
    alt: "A dessert plated with a dark caramel sauce",
  },
  {
    name: "Negroni Sbagliato",
    detail: "Campari, red vermouth, prosecco, orange",
    price: "$13",
    src: "https://images.unsplash.com/photo-1514933651103-005eec06c04b?q=80&auto=format&fit=crop&w=600",
    alt: "The bar at night with bottles lit from behind",
  },
]

export default function MenuBlock() {
  return (
    <section className="w-full bg-background px-6 py-16 text-foreground sm:py-24">
      <div className="mx-auto w-full max-w-5xl">
        <div className="max-w-2xl">
          <h2 className="font-heading text-3xl font-bold tracking-tight text-balance sm:text-4xl">
            What People Order
          </h2>
          <p className="mt-4 text-pretty text-muted-foreground">
            Six plates that leave the pass more than any others. The full menu
            changes with the season.
          </p>
        </div>

        <ul className="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {items.map((item) => (
            <li
              key={item.name}
              className="flex flex-col overflow-hidden rounded-xl border border-border bg-card"
            >
              <img
                src={item.src}
                alt={item.alt}
                loading="lazy"
                className="aspect-4/3 w-full object-cover"
              />
              <div className="flex flex-1 flex-col p-5">
                <div className="flex items-baseline justify-between gap-4">
                  <h3 className="font-heading font-medium">{item.name}</h3>
                  <span className="shrink-0 font-medium tabular-nums">
                    {item.price}
                  </span>
                </div>
                <p className="mt-1.5 text-sm text-muted-foreground">
                  {item.detail}
                </p>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  )
}