import Image from "next/image";
import Link from "next/link";
import { Coffee, Wine, UtensilsCrossed, Clock } from "lucide-react";
import ScrollReveal from "@/components/ScrollReveal";
import { buildMeta } from "@/lib/metadata";
import type { Metadata } from "next";

export const revalidate = 3600;

export async function generateMetadata({ params }: { params: Promise<{ lang: string }> }): Promise<Metadata> {
  const { lang } = await params;
  return buildMeta(lang, "/restoran", {
    title: "Restoran & Bar | Kite Beach Akyaka",
    description: "Ege mutfağının taze lezzetleri, gün batımı kokteyller ve Azmak nehri manzarası. Serpme kahvaltı, Ege mezeleri ve akşam yemekleri.",
  }, {
    title: "Restaurant & Bar | Kite Beach Akyaka",
    description: "Fresh flavors of Aegean cuisine, sunset cocktails and views of the Azmak river. Breakfast spread, Aegean meze and dinner.",
  });
}

const menuCategoriesTr = [
  {
    icon: Coffee,
    name: "Serpme Kahvaltı",
    desc: "Yöresel peynirler, ev yapımı reçeller, organik zeytinyağı ve taze pişmiş köy ekmeği ile güne enerjik başlayın.",
    hours: "08:30 – 11:30",
    highlight: "Yöresel Ürünler",
  },
  {
    icon: UtensilsCrossed,
    name: "Öğle & Akşam",
    desc: "Günlük taze deniz ürünleri, zeytinyağlı Ege mezeleri ve İtalyan mutfağından seçkin makarnalar ile akşam yemeği.",
    hours: "12:00 – 23:00",
    highlight: "Taze Ege Mutfağı",
  },
  {
    icon: Wine,
    name: "Lounge & Bar",
    desc: "Gün batımına karşı mixologist'lerimizin hazırladığı imza kokteyller, yerel şaraplar ve Türk rakısı ile keyifli anlar.",
    hours: "16:00 – 01:00",
    highlight: "Gün Batımı Manzarası",
  },
];

const menuCategoriesEn = [
  {
    icon: Coffee,
    name: "Breakfast Spread",
    desc: "Start the day energized with local cheeses, homemade jams, organic olive oil, and freshly baked village bread.",
    hours: "08:30 – 11:30",
    highlight: "Local Products",
  },
  {
    icon: UtensilsCrossed,
    name: "Lunch & Dinner",
    desc: "Daily fresh seafood, Aegean olive oil appetizers (meze), and select pasta from Italian cuisine for dinner.",
    hours: "12:00 – 23:00",
    highlight: "Fresh Aegean Cuisine",
  },
  {
    icon: Wine,
    name: "Lounge & Bar",
    desc: "Delightful moments against the sunset with signature cocktails prepared by our mixologists, local wines, and Turkish raki.",
    hours: "16:00 – 01:00",
    highlight: "Sunset View",
  },
];

export default async function RestoranPage({ params }: { params: Promise<{ lang: string }> }) {
  const { lang } = await params;
  const isEn = lang === "en";
  const displayMenuCategories = isEn ? menuCategoriesEn : menuCategoriesTr;

  return (
    <div className="min-h-screen bg-background">

      {/* Page Header */}
      <section className="relative h-[55vh] w-full flex items-end overflow-hidden">
        <div className="absolute inset-0">
          <Image
            src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?q=80&w=2940&auto=format&fit=crop"
            alt={isEn ? "Restaurant & Bar" : "Restoran & Bar"}
            fill
            sizes="100vw"
            className="object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-dark/85 via-dark/30 to-black/20" />
        </div>
        <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-14 w-full">
          <span className="block text-accent text-xs tracking-[0.3em] uppercase font-semibold mb-3 animate-fade-up">
            {isEn ? "Flavors" : "Lezzetler"}
          </span>
          <h1 className="font-serif text-5xl md:text-7xl text-white font-bold animate-fade-up delay-100">
            {isEn ? "Restaurant & Bar" : "Restoran & Bar"}
          </h1>
          <p className="text-white/60 text-lg mt-3 font-light animate-fade-up delay-200">
            {isEn ? "Aegean flavors and river view." : "Ege lezzetleri ve nehir manzarası."}
          </p>
        </div>
      </section>

      {/* Intro */}
      <section className="py-20 bg-white">
        <div className="max-w-3xl mx-auto px-4 sm:px-6 text-center">
          <ScrollReveal>
            <span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-5">
              {isEn ? "Our Kitchen" : "Mutfağımız"}
            </span>
            <h2 className="font-serif text-4xl font-bold text-dark mb-6">
              {isEn ? "Fresh, Local, With Love" : "Tazeden, Yerelden, Sevgiyle"}
            </h2>
            <p className="text-gray-500 leading-relaxed text-[15px]">
              {isEn ? (
                "Pamper yourself at any time of the day at Kite Beach Restaurant with fresh Aegean cuisine flavors carefully prepared by our chefs, organic breakfast items, and our signature cocktails. Enjoy your meal on our wooden terrace, right by the Azmak River."
              ) : (
                "Şeflerimizin özenle hazırladığı taze Ege mutfağı lezzetleri, organik kahvaltılıklar ve imza kokteyllerimizle Kite Beach Restoran'da günün her saati kendinizi şımartın. Azmak nehrinin hemen kenarında, ahşap terasımızda yemeğinizin tadını çıkarın."
              )}
            </p>
          </ScrollReveal>
        </div>
      </section>

      {/* Menu Categories */}
      <section className="pb-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <ScrollReveal stagger className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {displayMenuCategories.map((cat, i) => {
              const Icon = cat.icon;
              return (
                <div
                  key={i}
                  className="card-lift bg-background rounded-2xl p-8 border border-sand flex flex-col"
                >
                  <div className="w-12 h-12 bg-primary/8 rounded-xl flex items-center justify-center mb-6">
                    <Icon className="text-primary" size={22} />
                  </div>
                  <span className="text-accent text-[10px] font-bold tracking-[0.2em] uppercase mb-2">
                    {cat.highlight}
                  </span>
                  <h3 className="font-serif text-xl font-bold text-dark mb-3">{cat.name}</h3>
                  <p className="text-gray-500 text-[13px] leading-relaxed flex-grow mb-6">{cat.desc}</p>
                  <div className="flex items-center gap-2 text-primary text-[12px] font-semibold">
                    <Clock size={12} />
                    {cat.hours}
                  </div>
                </div>
              );
            })}
          </ScrollReveal>
        </div>
      </section>

      {/* Atmosphere Photos */}
      <section className="py-20 bg-background">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <ScrollReveal className="text-center mb-12">
            <h2 className="font-serif text-4xl font-bold text-dark">{isEn ? "Atmosphere" : "Atmosfer"}</h2>
          </ScrollReveal>
          <ScrollReveal>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="relative h-80 rounded-2xl overflow-hidden md:col-span-2 group">
                <Image
                  src="https://images.unsplash.com/photo-1544148103-0773bf10d330?q=80&w=2940&auto=format&fit=crop"
                  alt={isEn ? "Restaurant atmosphere" : "Restoran atmosferi"}
                  fill
                  sizes="(max-width: 768px) 100vw, 66vw"
                  className="object-cover group-hover:scale-105 transition-transform duration-700"
                />
              </div>
              <div className="relative h-80 rounded-2xl overflow-hidden group">
                <Image
                  src="https://images.unsplash.com/photo-1551504734-5ee1c4a1479b?q=80&w=2940&auto=format&fit=crop"
                  alt={isEn ? "Breakfast" : "Kahvaltı"}
                  fill
                  sizes="(max-width: 768px) 100vw, 33vw"
                  className="object-cover group-hover:scale-105 transition-transform duration-700"
                />
              </div>
            </div>
          </ScrollReveal>
        </div>
      </section>

      {/* Special Events */}
      <section className="py-20 bg-dark text-white">
        <div className="max-w-3xl mx-auto px-4 text-center">
          <ScrollReveal>
            <span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-5">
              {isEn ? "Special Days" : "Özel Günler"}
            </span>
            <h3 className="font-serif text-4xl font-bold mb-5">
              {isEn ? "Special Events & Contact" : "Özel Etkinlikler & İletişim"}
            </h3>
            <p className="text-white/50 mb-8 leading-relaxed">
              {isEn ? (
                "You can contact us about our terrace with a river view for your birthday, anniversary, or special group dinners. Our team is here to make your organization special."
              ) : (
                "Doğum günü, yıl dönümü veya özel grup yemekleriniz için nehir manzaralı terasımızla ilgili bizimle iletişime geçebilirsiniz. Ekibimiz organizasyonunuzu özel kılmak için burada."
              )}
            </p>
            <Link
              href={`/${lang}/iletisim`}
              className="btn-shimmer inline-block bg-accent text-white px-10 py-4 rounded-full text-xs font-bold tracking-[0.15em] uppercase"
            >
              {isEn ? "Contact Us" : "Bize Ulaşın"}
            </Link>
          </ScrollReveal>
        </div>
      </section>
    </div>
  );
}