import Image from "next/image";
import Link from "next/link";
import { ArrowRight, Wind, Anchor, Utensils, BedDouble, Sun, Star } from "lucide-react";
import ScrollReveal from "@/components/ScrollReveal";

import HeroVideo from "@/components/HeroVideo";

const features = [
  { icon: Wind, label: "Kitesurf Okulu", sub: "IKO Sertifikalı" },
  { icon: Anchor, label: "Yoga Platformu", sub: "Nehir Kenarı" },
  { icon: Utensils, label: "Restoran & Bar", sub: "Ege Mutfağı" },
  { icon: BedDouble, label: "Butik Odalar", sub: "3 Tip Konaklama" },
  { icon: Sun, label: "Gün Batımı Terası", sub: "Gökova Manzarası" },
];

const rooms = [
  {
    img: "https://images.unsplash.com/photo-1582719478250-c89404bb8a0e?q=80&w=2940&auto=format&fit=crop",
    badge: "Standart",
    badgeStyle: "bg-white/90 text-dark",
    name: "Standart Oda",
    desc: "Konforlu ve modern tasarımlı odamızda huzurlu bir konaklama.",
    price: "₺4.500",
    cta: "primary" as const,
  },
  {
    img: "https://images.unsplash.com/photo-1566665797739-1674de7a421a?q=80&w=2874&auto=format&fit=crop",
    badge: "Popüler",
    badgeStyle: "bg-accent text-white",
    name: "Nehir Manzaralı Oda",
    desc: "Azmak nehrinin eşsiz manzarası eşliğinde güne uyanın.",
    price: "₺5.500",
    cta: "accent" as const,
  },
  {
    img: "https://images.unsplash.com/photo-1499955085172-a104c9463ece?q=80&w=2940&auto=format&fit=crop",
    badge: "Premium",
    badgeStyle: "bg-white/90 text-dark",
    name: "Ahşap Bungalow",
    desc: "Doğayla tamamen iç içe, teraslı ve bağımsız girişli.",
    price: "₺7.000",
    cta: "primary" as const,
  },
];

const testimonials = [
  {
    text: "Akyaka'da pek çok yerde kaldım ama Kite Beach bambaşka bir deneyimdi. Nehrin sesi, kitesurf dersleri ve muhteşem kahvaltı — her şey mükemmeldi.",
    name: "Ayşe K.",
    from: "İstanbul",
  },
  {
    text: "Yoga seansları ahşap platformda, sabah erken saatte, nehir manzarası eşliğinde. Kelimelerle anlatmak zor — mutlaka yaşanmalı.",
    name: "Marco B.",
    from: "İtalya",
  },
  {
    text: "Eğitmenler son derece ilgili. Kitesurf derslerimden sonra bağımlısı oldum. Önümüzdeki yaz mutlaka döneceğim.",
    name: "Mehmet Ö.",
    from: "Ankara",
  },
];

export default function Home() {
  return (
    <div className="flex flex-col min-h-screen">

      {/* ──────────────────────────────────────────
          HERO
      ────────────────────────────────────────── */}
      <section className="relative h-screen w-full flex items-center justify-center overflow-hidden">
        <HeroVideo />

        {/* Floating season badge
        <div className="absolute top-32 right-6 md:right-16 z-20 animate-float hidden sm:block">
          <div className="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl px-5 py-4 text-white">
            <span className="block text-accent font-bold text-[10px] tracking-[0.25em] uppercase mb-1">Sezon</span>
            <span className="font-serif text-xl font-medium">Nisan — Ekim</span>
          </div>
        </div>
 */}
        <div className="relative z-10 text-center px-4 max-w-5xl mx-auto">
          <div className="animate-fade-up delay-100">
            <span className="inline-block text-white/60 text-xs tracking-[0.35em] uppercase mb-8 font-light">
              Akyaka · Muğla · Türkiye
            </span>
          </div>

          <div className="flex items-center justify-center gap-4 md:gap-6 mb-6 animate-fade-up delay-200">
            <span
              className="text-xs md:text-sm tracking-[0.4em] font-bold uppercase whitespace-nowrap text-white/90"
              style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}
            >
              WELCOME TO
            </span>
            <h1 className="font-sans font-black text-white leading-none tracking-tighter text-[clamp(4rem,10vw,10rem)] uppercase">
              KITE BEACH
            </h1>
          </div>

          <p className="animate-fade-up delay-500 text-white/75 text-base md:text-xl mb-10 font-light italic tracking-wide">
            "Nehrin huzuru, denizin enerjisi — tek bir noktada."
          </p>

          <div className="animate-fade-up delay-600 flex flex-col sm:flex-row items-center justify-center gap-4">
            <Link
              href="/iletisim"
              className="btn-shimmer bg-accent text-white px-10 py-4 rounded-full text-xs font-bold tracking-[0.15em] uppercase shadow-2xl hover:bg-accent/90 transition-colors w-full sm:w-auto text-center"
            >
              Rezervasyon Yap
            </Link>
            <Link
              href="/aktiviteler"
              className="bg-white/10 backdrop-blur-sm border border-white/30 text-white px-10 py-4 rounded-full text-xs font-bold tracking-[0.15em] uppercase hover:bg-white/20 transition-colors w-full sm:w-auto text-center"
            >
              Aktiviteleri Keşfet
            </Link>
          </div>
        </div>

        {/* Scroll indicator */}
        <div className="absolute bottom-10 left-1/2 -translate-x-1/2 z-20 flex flex-col items-center gap-3">
          <span className="text-white/40 text-[10px] tracking-[0.3em] uppercase">Keşfet</span>
          <div className="w-px h-12 bg-gradient-to-b from-white/40 to-transparent animate-scroll-bounce" />
        </div>
      </section>

      {/* ──────────────────────────────────────────
          FEATURES STRIP
      ────────────────────────────────────────── */}
      <section className="bg-dark text-white py-8">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 md:grid-cols-5 divide-x divide-white/8">
            {features.map(({ icon: Icon, label, sub }, i) => (
              <div
                key={i}
                className={`flex flex-col items-center justify-center gap-2 py-6 px-4 group ${i >= 2 ? "hidden md:flex" : ""}`}
              >
                <Icon className="w-5 h-5 text-accent group-hover:scale-110 transition-transform duration-300" />
                <span className="text-[13px] font-semibold text-center">{label}</span>
                <span className="text-[11px] text-white/40 text-center">{sub}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ──────────────────────────────────────────
          ABOUT
      ────────────────────────────────────────── */}
      <section className="py-28 bg-background overflow-hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24 items-center">

            <ScrollReveal className="relative">
              <div className="relative h-[540px] lg:h-[660px] rounded-3xl overflow-hidden shadow-2xl">
                <Image
                  src="https://images.unsplash.com/photo-1544551763-46a013bb70d5?q=80&w=2940&auto=format&fit=crop"
                  alt="Akyaka Doğa"
                  fill
                  className="object-cover"
                />
              </div>
              {/* Stats card */}
              <div className="absolute -bottom-5 -right-4 md:-right-8 bg-white rounded-2xl p-6 shadow-xl border border-sand">
                <div className="grid grid-cols-2 gap-6 divide-x divide-sand">
                  <div className="text-center">
                    <span className="block font-serif text-3xl font-bold text-primary">500+</span>
                    <span className="block text-[10px] text-muted uppercase tracking-wider mt-1">Mutlu Misafir</span>
                  </div>
                  <div className="text-center pl-6">
                    <span className="block font-serif text-3xl font-bold text-primary">10+</span>
                    <span className="block text-[10px] text-muted uppercase tracking-wider mt-1">Yıl Deneyim</span>
                  </div>
                </div>
              </div>
              {/* IKO badge */}
              <div className="absolute -top-4 -left-4 bg-accent text-white rounded-2xl p-4 shadow-lg">
                <Star className="w-4 h-4 mb-1" fill="white" />
                <span className="block text-xs font-bold leading-none">IKO</span>
                <span className="block text-[10px] opacity-80 mt-0.5">Sertifikalı</span>
              </div>
            </ScrollReveal>

            <ScrollReveal delay={200}>
              <span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-5">
                Hikayemiz
              </span>
              <h2 className="font-serif text-4xl md:text-5xl lg:text-6xl font-bold text-dark leading-[1.05] mb-8">
                Doğanın<br />Kalbinde<br />
                <span className="text-primary italic">Özel Bir Kaçış</span>
              </h2>
              <p className="text-gray-600 leading-relaxed mb-5">
                Gökova Körfezi'nin kristal sularına dökülen Azmak Nehri'nin hemen kıyısında,
                rüzgarın hiç eksik olmadığı eşsiz bir konumda yer alıyoruz.
              </p>
              <p className="text-gray-600 leading-relaxed mb-10">
                Kite Beach Akyaka; kitesurf tutkusunu doğayla, konforla ve yerel lezzetlerle
                bütünleştiren benzersiz bir yaşam alanı sunar.
              </p>
              <div className="section-line mb-8" />
              <Link
                href="/hakkimizda"
                className="inline-flex items-center gap-2 text-dark font-bold text-sm tracking-wide group"
              >
                <span className="border-b-2 border-accent pb-0.5">Hikayemizi Okuyun</span>
                <ArrowRight className="w-4 h-4 group-hover:translate-x-1.5 transition-transform" />
              </Link>
            </ScrollReveal>

          </div>
        </div>
      </section>

      {/* ──────────────────────────────────────────
          ROOMS
      ────────────────────────────────────────── */}
      {/* 
      <section className="py-28 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <ScrollReveal className="text-center mb-16">
            <span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
              Konaklama
            </span>
            <h2 className="font-serif text-4xl md:text-5xl font-bold text-dark mb-6">Kite Beach Akyaka Otel</h2>
            <p className="text-muted max-w-3xl mx-auto text-sm leading-relaxed">
              Akyaka’nın en güzel köşesinde, nehrin dinginliği ile denizin sonsuz maviliğinin kucaklaştığı o özel noktadayız. Kapınızı açtığınız anda sizi karşılayan nehir kıyısının sessizliği, güne başlamak için en huzurlu davetiniz olacak. Doğanın kalbinde, nehir manzarasına karşı yaptığınız bir yoga seansıyla ruhunuzu dengelerken; hemen ardından Akyaka’nın meşhur rüzgarlarında Kite Surf ile adrenalini zirveye taşıyabilirsiniz. Günün yorgunluğunu ise, restoranımızın mutfağından çıkan lezzetlerle, Ege’nin kendine has o büyüleyici gün batımını izleyerek geride bırakın. Burada zaman, sadece sizin istediğiniz hızda akıyor.
            </p>
          </ScrollReveal>

          <ScrollReveal stagger className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
            {rooms.map((room, i) => (
              <div
                key={i}
                className={`card-lift group rounded-2xl overflow-hidden bg-sand border border-sand ${i === 1 ? "md:-mt-4 md:shadow-xl" : ""
                  }`}
              >
                <div className="relative h-64 overflow-hidden">
                  <Image
                    src={room.img}
                    alt={room.name}
                    fill
                    className="object-cover group-hover:scale-105 transition-transform duration-700"
                  />
                  <span className={`absolute top-4 left-4 text-[10px] font-bold px-3 py-1.5 rounded-full tracking-wider uppercase ${room.badgeStyle} backdrop-blur-sm`}>
                    {room.badge}
                  </span>
                </div>
                <div className="p-7">
                  <h3 className="font-serif text-xl font-bold text-dark mb-2">{room.name}</h3>
                  <p className="text-muted mb-6 text-[13px] leading-relaxed">{room.desc}</p>
                  <div className="flex justify-between items-center pt-5 border-t border-sand">
                    <div>
                      <span className="text-2xl font-bold text-dark">{room.price}</span>
                      <span className="text-muted text-xs ml-1">/gece</span>
                    </div>
                    <Link
                      href="/odalar"
                      className={`text-[11px] px-5 py-2.5 rounded-full font-bold tracking-wider uppercase transition-colors ${room.cta === "accent"
                          ? "bg-accent text-white hover:bg-accent/90"
                          : "bg-primary text-white hover:bg-primary/90"
                        }`}
                    >
                      İncele
                    </Link>
                  </div>
                </div>
              </div>
            ))}
          </ScrollReveal>

          <div className="text-center mt-12">
            <Link
              href="/odalar"
              className="inline-flex items-center gap-2 border-2 border-dark text-dark text-xs px-8 py-3.5 rounded-full font-bold uppercase tracking-widest hover:bg-dark hover:text-white transition-colors"
            >
              Tüm Odaları Gör
              <ArrowRight className="w-3.5 h-3.5" />
            </Link>
          </div>
        </div>
      </section>
      */}

      {/* ──────────────────────────────────────────
          ACTIVITIES — BENTO GRID
      ────────────────────────────────────────── */}
      <section className="py-28 bg-background">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <ScrollReveal className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-10">
            <div>
              <span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
                Ne Yapacaksınız?
              </span>
              <h2 className="font-serif text-5xl font-bold text-dark">Aktiviteler</h2>
            </div>
            <Link
              href="/aktiviteler"
              className="inline-flex items-center gap-2 text-sm font-semibold text-primary hover:text-accent transition-colors"
            >
              Tümünü Gör <ArrowRight className="w-4 h-4" />
            </Link>
          </ScrollReveal>

          {/* Bento rows */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {/* Row 1 */}
            <ScrollReveal className="md:col-span-2">
              <Link href="/aktiviteler" className="group relative block h-[400px] rounded-3xl overflow-hidden">
                <Image
                  src="https://images.unsplash.com/photo-1533000756353-909d73d2a3c7?q=80&w=2940&auto=format&fit=crop"
                  alt="Kitesurf"
                  fill
                  className="object-cover group-hover:scale-105 transition-transform duration-700"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-dark/90 via-dark/20 to-transparent" />
                <div className="absolute bottom-0 p-8">
                  <span className="block text-accent text-[10px] tracking-[0.25em] uppercase font-bold mb-2">IKO Sertifikalı</span>
                  <h3 className="font-serif text-4xl text-white font-bold mb-2">Kitesurf</h3>
                  <p className="text-white/60 text-sm mb-4 max-w-xs opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-400">
                    Başlangıçtan ileri seviyeye. Akyaka'nın ünlü termik rüzgarında uçun.
                  </p>
                  <span className="inline-flex items-center gap-2 text-white text-sm font-semibold">
                    ₺2.000/Saat <ArrowRight className="w-3.5 h-3.5" />
                  </span>
                </div>
              </Link>
            </ScrollReveal>

            <ScrollReveal delay={100}>
              <Link href="/aktiviteler" className="group relative block h-[400px] rounded-3xl overflow-hidden">
                <Image
                  src="https://images.unsplash.com/photo-1599901860904-17e08627c271?q=80&w=2940&auto=format&fit=crop"
                  alt="Yoga"
                  fill
                  className="object-cover group-hover:scale-105 transition-transform duration-700"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent" />
                <div className="absolute bottom-0 p-7">
                  <h3 className="font-serif text-3xl text-white font-bold mb-1">Yoga</h3>
                  <span className="text-white/60 text-xs">₺400/Seans</span>
                </div>
              </Link>
            </ScrollReveal>

            {/* Row 2 */}
            <ScrollReveal delay={150}>
              <Link href="/aktiviteler" className="group relative block h-[280px] rounded-3xl overflow-hidden">
                <Image
                  src="https://images.unsplash.com/photo-1544606771-46abcf9dbb83?q=80&w=2924&auto=format&fit=crop"
                  alt="SUP"
                  fill
                  className="object-cover group-hover:scale-105 transition-transform duration-700"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent" />
                <div className="absolute bottom-0 p-7">
                  <h3 className="font-serif text-2xl text-white font-bold mb-1">Stand-Up Paddle</h3>
                  <span className="text-white/60 text-xs">₺300/Saat</span>
                </div>
              </Link>
            </ScrollReveal>

            <ScrollReveal className="md:col-span-2" delay={200}>
              <Link href="/aktiviteler" className="group relative block h-[280px] rounded-3xl overflow-hidden">
                <Image
                  src="https://images.unsplash.com/photo-1511994298241-608e28f14fde?q=80&w=2940&auto=format&fit=crop"
                  alt="Bisiklet"
                  fill
                  className="object-cover group-hover:scale-105 transition-transform duration-700"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent" />
                <div className="absolute bottom-0 p-8">
                  <h3 className="font-serif text-3xl text-white font-bold mb-1">Bisiklet Kiralama</h3>
                  <span className="text-white/60 text-xs">₺250/Gün · Akyaka Köy Turu</span>
                </div>
              </Link>
            </ScrollReveal>
          </div>
        </div>
      </section>

      {/* ──────────────────────────────────────────
          EVENTS (PREVIEW)
      ────────────────────────────────────────── */}
      <section className="py-28 bg-dark text-white relative overflow-hidden">
        {/* Background glow */}
        <div className="absolute top-0 right-0 w-96 h-96 bg-accent/20 rounded-full blur-[120px] pointer-events-none" />
        <div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-primary/20 rounded-full blur-[150px] pointer-events-none" />

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <ScrollReveal className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-16">
            <div>
              <span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
                Takvim
              </span>
              <h2 className="font-serif text-5xl font-bold">Etkinlikler</h2>
            </div>
            <Link
              href="/etkinlikler"
              className="inline-flex items-center gap-2 text-sm font-semibold text-white/70 hover:text-white transition-colors border border-white/20 hover:border-white px-6 py-2.5 rounded-full"
            >
              Tüm Etkinlikler <ArrowRight className="w-4 h-4" />
            </Link>
          </ScrollReveal>

          <ScrollReveal delay={100}>
            <div className="group relative flex flex-col md:flex-row gap-8 bg-white/5 border border-white/10 rounded-3xl p-6 md:p-10 hover:bg-white/10 transition-colors backdrop-blur-sm">
              <div className="relative w-full md:w-1/3 h-[250px] md:h-auto rounded-2xl overflow-hidden shrink-0">
                <Image
                  src="https://images.unsplash.com/photo-1540039155732-680c74f07599?q=80&w=2832&auto=format&fit=crop"
                  alt="Mahmut Orhan Konseri"
                  fill
                  className="object-cover group-hover:scale-105 transition-transform duration-700"
                />
              </div>
              <div className="flex flex-col justify-center w-full md:w-2/3">
                <div className="inline-block bg-accent/20 text-accent text-[10px] font-bold px-3 py-1.5 rounded-full tracking-widest uppercase mb-4 w-max">
                  Yaklaşan Etkinlik
                </div>
                <h3 className="font-serif text-3xl md:text-4xl font-bold mb-4">Mahmut Orhan - Sunset Session</h3>
                <p className="text-white/60 leading-relaxed mb-6 max-w-xl">
                  Dünyaca ünlü DJ Mahmut Orhan, unutulmaz bir gün batımı performansı için Kite Beach Akyaka'da! Ege'nin muhteşem manzarasına karşı elektronik müziğin ritmini hissedeceğiniz bu özel geceyi kaçırmayın.
                </p>
                <div className="flex flex-wrap items-center gap-6 mb-8 text-sm text-white/80">
                  <span className="flex items-center gap-2">
                    <span className="w-2 h-2 rounded-full bg-accent" /> 15 Ağustos 2026
                  </span>
                  <span className="flex items-center gap-2">
                    <span className="w-2 h-2 rounded-full bg-accent" /> 18:00
                  </span>
                  <span className="flex items-center gap-2">
                    <span className="w-2 h-2 rounded-full bg-accent" /> Beach Club
                  </span>
                </div>
                <Link
                  href="/etkinlikler"
                  className="inline-flex items-center gap-2 text-xs font-bold tracking-widest uppercase text-accent hover:text-white transition-colors w-max"
                >
                  Detayları İncele <ArrowRight className="w-4 h-4" />
                </Link>
              </div>
            </div>
          </ScrollReveal>
        </div>
      </section>

      {/* ──────────────────────────────────────────
          TESTIMONIALS
      ────────────────────────────────────────── */}
      <section className="py-28 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <ScrollReveal className="text-center mb-16">
            <span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
              Misafir Yorumları
            </span>
            <h2 className="font-serif text-5xl font-bold text-dark">Deneyimler</h2>
          </ScrollReveal>

          <ScrollReveal stagger className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {testimonials.map((t, i) => (
              <div key={i} className="relative bg-sand rounded-2xl p-8 border border-sand overflow-hidden">
                {/* Large decorative quote */}
                <span className="absolute top-3 right-5 font-serif text-[8rem] leading-none text-primary/8 select-none">
                  "
                </span>
                {/* Stars */}
                <div className="flex gap-1 mb-5 relative z-10">
                  {Array.from({ length: 5 }).map((_, j) => (
                    <Star key={j} className="w-3.5 h-3.5 text-accent" fill="#E87040" />
                  ))}
                </div>
                <p className="text-foreground/75 text-[13px] leading-relaxed mb-6 relative z-10 italic">
                  "{t.text}"
                </p>
                <div className="flex items-center gap-3 relative z-10">
                  <div className="w-9 h-9 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
                    <span className="text-primary font-bold text-sm">{t.name[0]}</span>
                  </div>
                  <div>
                    <span className="block font-semibold text-dark text-sm">{t.name}</span>
                    <span className="text-muted text-xs">{t.from}</span>
                  </div>
                </div>
              </div>
            ))}
          </ScrollReveal>
        </div>
      </section>

      {/* ──────────────────────────────────────────
          CTA BAND
      ────────────────────────────────────────── */}
      <section className="relative py-28 overflow-hidden">
        <div
          className="absolute inset-0 animate-gradient-pan"
          style={{
            background:
              "linear-gradient(135deg, #0D3D50 0%, #1A6B8A 35%, #0E1A24 60%, #1A4A60 100%)",
          }}
        />
        <div className="absolute inset-0 opacity-[0.04]">
          <Image
            src="https://images.unsplash.com/photo-1498623116890-37e912163d5d?q=80&w=2940&auto=format&fit=crop"
            alt=""
            fill
            className="object-cover"
          />
        </div>

        <div className="relative z-10 max-w-3xl mx-auto px-4 text-center">
          <ScrollReveal>
            <span className="inline-block text-accent text-xs tracking-[0.3em] uppercase font-semibold mb-6">
              Hemen Başlayın
            </span>
            <h2 className="font-serif text-5xl md:text-6xl font-bold text-white leading-tight mb-6">
              Hayalindeki tatili<br />planlamaya hazır mısın?
            </h2>
            <p className="text-white/50 mb-10 text-base leading-relaxed">
              Rüzgar seni çağırıyor. Hemen yerini ayırt ve bu eşsiz deneyimin bir parçası ol.
            </p>
            <Link
              href="/iletisim"
              className="btn-shimmer inline-block bg-accent text-white px-12 py-4 rounded-full text-xs font-bold tracking-[0.2em] uppercase shadow-2xl hover:bg-white hover:text-dark transition-colors"
            >
              Hemen Rezervasyon Yap
            </Link>
          </ScrollReveal>
        </div>
      </section>

    </div>
  );
}