import menu1 from "@/public/menu1.png";
import menu2 from "@/public/menu2.png";
import menu3 from "@/public/menu3.png";
import menu4 from "@/public/menu4.png";

const menuItems = [
  {
    name: "Gulyásleves",
    description: "Gazdag marhahúsos és zöldséges pörkölt, fűszerpaprikával ízesítve.",
    price: "4 990 Ft",
    image: menu1,
  },
  {
    name: "Rántott csirke burgonyapürével",
    description: "Ropogós panírozott csirke, krémes burgonyapürével és friss salátával.",
    price: "5 900 Ft",
    image: menu2,
  },
  {
    name: "Csirkepaprikás nokedlivel",
    description: "Tejfölös paprikás csirke friss házi galuskával tálalva.",
    price: "5 500 Ft",
    image: menu3,
  },
  {
    name: "Sült csülök káposztával",
    description: "Ropogósra sült csülök, párolt savanyú káposztával és tört burgonyával.",
    price: "6 500 Ft",
    image: menu4,
  },
];

export default function Menu() {
  return (
    <section id="menu" className="py-24 sm:py-32">
      <div className="container mx-auto px-6">
        <div className="text-center">
          <h2 className="text-4xl font-bold tracking-tight text-amber-400">Konyhánkból</h2>
          <p className="mt-4 text-lg text-slate-300">A legkedveltebb ételeink válogatása.</p>
        </div>
        <div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
          {menuItems.map((item) => (
            <div key={item.name} className="group relative overflow-hidden rounded-lg shadow-lg">
              <img src={item.image} alt={item.name} className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-110" />
              <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent" />
              <div className="absolute bottom-0 left-0 p-6 text-white">
                <h3 className="text-2xl font-bold">{item.name}</h3>
                <p className="text-slate-300">{item.description}</p>
                <p className="mt-4 text-xl font-semibold text-amber-400">{item.price}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
