<template>
  <section class="py-16">
    <div class="container mx-auto px-4">
      <h2 class="mb-8 text-center text-3xl font-bold md:text-4xl">
        {{ t("Featured Dishes") }}
      </h2>

      <div class="grid gap-8 md:grid-cols-3">
        <div
          v-for="item in featuredItems"
          :key="item.name"
          class="group relative overflow-hidden"
        >
          <img
            :src="item.image"
            :alt="item.name"
            class="h-64 w-full object-cover transition-transform duration-300 group-hover:scale-105"
          />

          <div
            class="absolute inset-0 flex flex-col items-center justify-center bg-black/50 p-4 text-center opacity-0 transition-opacity duration-300 group-hover:opacity-100"
          >
            <h3 class="mb-2 text-xl font-bold text-white">
              {{ item.name }}
            </h3>

            <p class="text-sm text-white">
              {{ item.desc }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const featuredItems = [
  {
    name: "Müco Burger",
    desc: "Bol lezzetli özel burger.",
    image: "/images/featured/muco-burger.jpg",
  },
  {
    name: "Tavuk Menü",
    desc: "Doyurucu ve çıtır tavuk lezzeti.",
    image: "/images/featured/chicken-menu.jpg",
  },
  {
    name: "Patates Kızartması",
    desc: "Sıcak, çıtır ve paylaşmalık.",
    image: "/images/featured/fries.jpg",
  },
];
</script>
