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

const menuCategories = [
  {
    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ı",
  },
];

export default function RestoranPage() {
  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="Restoran & Bar"
            fill
            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">
            Lezzetler
          </span>
          <h1 className="font-serif text-5xl md:text-7xl text-white font-bold animate-fade-up delay-100">
            Restoran & Bar
          </h1>
          <p className="text-white/60 text-lg mt-3 font-light animate-fade-up delay-200">
            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">
              Mutfağımız
            </span>
            <h2 className="font-serif text-4xl font-bold text-dark mb-6">
              Tazeden, Yerelden, Sevgiyle
            </h2>
            <p className="text-gray-500 leading-relaxed text-[15px]">
              Ş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">
            {menuCategories.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">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="Restoran atmosferi"
                  fill
                  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="Kahvaltı"
                  fill
                  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">
              Özel Günler
            </span>
            <h3 className="font-serif text-4xl font-bold mb-5">
              Özel Etkinlikler & Rezervasyonlar
            </h3>
            <p className="text-white/50 mb-8 leading-relaxed">
              Doğum günü, yıl dönümü veya özel grup yemekleriniz için nehir manzaralı
              terasımızı rezerve edebilirsiniz. Ekibimiz organizasyonunuzu özel kılmak için burada.
            </p>
            <Link
              href="/iletisim"
              className="btn-shimmer inline-block bg-accent text-white px-10 py-4 rounded-full text-xs font-bold tracking-[0.15em] uppercase"
            >
              Masa Rezervasyonu Yap
            </Link>
          </ScrollReveal>
        </div>
      </section>
    </div>
  );
}