import Image from "next/image";
import Link from "next/link";
import {
  ArrowRight, Star, Wind, Anchor, Utensils, BedDouble, Sun,
  Waves, Bike, Coffee, Music, MapPin, Camera, Heart, Compass,
  Fish, Mountain, Dumbbell, Leaf, Shield, Umbrella, Flame,
  type LucideIcon,
} from "lucide-react";
import ScrollReveal from "@/components/ScrollReveal";

export const revalidate = 3600;

const ICON_MAP: Record<string, LucideIcon> = {
  Wind, Anchor, Utensils, BedDouble, Sun, Star, Waves, Bike,
  Coffee, Music, MapPin, Camera, Heart, Compass, Fish, Mountain,
  Dumbbell, Leaf, Shield, Umbrella, Flame,
};

import HeroVideo from "@/components/HeroVideo";

const defaultFeatures = [
  { 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-1618773928121-c32242e63f39?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",
  },
];

const testimonialsEn = [
  {
    text: "I've stayed in many places in Akyaka, but Kite Beach was a completely different experience. The sound of the river, kitesurf lessons, and the amazing breakfast — everything was perfect.",
    name: "Ayse K.",
    from: "Istanbul",
  },
  {
    text: "Yoga sessions on the wooden platform, early in the morning with a river view. Hard to put into words — a must-try.",
    name: "Marco B.",
    from: "Italy",
  },
  {
    text: "The instructors are very caring. After my kitesurf lessons, I became addicted. I will definitely return next summer.",
    name: "Mehmet O.",
    from: "Ankara",
  },
];

import { getDictionary, Locale } from "./dictionaries";
import prisma from "@/lib/prisma";
import { buildMeta } from "@/lib/metadata";
import type { Metadata } from "next";

export async function generateMetadata(
  { params }: { params: Promise<{ lang: string }> }
): Promise<Metadata> {
  const { lang } = await params;
  return buildMeta(lang, "", {
    title: "Kite Beach Akyaka | Kitesurf & Butik Otel",
    description: "Nehrin huzuru, denizin enerjisi — tek bir noktada. Akyaka'nın kalbinde kitesurf ve butik otel deneyimi.",
  }, {
    title: "Kite Beach Akyaka | Kitesurf & Boutique Hotel",
    description: "Tranquility of the river, energy of the sea — in one spot. Kitesurf and boutique hotel experience in the heart of Akyaka.",
  });
}

async function getInstagramData() {
  if (!process.env.RAPIDAPI_KEY) {
    return [];
  }

  const url = 'https://instagram120.p.rapidapi.com/api/instagram/posts';
  const options = {
    method: 'POST',
    headers: {
      'x-rapidapi-key': process.env.RAPIDAPI_KEY,
      'x-rapidapi-host': 'instagram120.p.rapidapi.com',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      username: 'kitebeachakyaka',
      maxId: ''
    }),
    next: { revalidate: 86400 }
  };

  try {
    const res = await fetch(url, options);
    if (!res.ok) {
      console.warn('Instagram API error or missing limits. Status:', res.status);
      return [];
    }
    const data = await res.json();
    return data.result?.edges?.slice(0, 4).map((edge: any) => edge.node) || [];
  } catch (err) {
    console.warn("Instagram fetch error:", err);
    return [];
  }
}

export default async function Home({ params }: { params: Promise<{ lang: string }> }) {
  const { lang } = await params;
  const dict = await getDictionary(lang as Locale);

  const [heroDb, activities, events, dbFeatures, aboutDb, instagramPosts] = await Promise.all([
    prisma.heroSection.findUnique({ where: { lang } }),
    prisma.activity.findMany({ where: { lang }, orderBy: { order: "asc" } }),
    prisma.event.findMany({ where: { lang }, orderBy: { date: "asc" } }),
    prisma.feature.findMany({ where: { lang }, orderBy: { order: "asc" } }),
    prisma.aboutSection.findUnique({ where: { lang } }),
    getInstagramData(),
  ]);

  const displayTestimonials = lang === "en" ? testimonialsEn : testimonials;

  const heroData = heroDb || {
    location: dict.home.location,
    welcome: dict.home.welcome,
    title: dict.home.title,
    subtitle: dict.home.subtitle,
    bookNow: dict.home.bookNow,
    exploreActivities: dict.home.exploreActivities,
    scroll: dict.home.scroll,
  };

  const aboutData = aboutDb || {
    badge: lang === "en" ? "Our Story" : "Hikayemiz",
    titleLine1: lang === "en" ? "In the" : "Doğanın",
    titleLine2: lang === "en" ? "Heart of Nature" : "Kalbinde",
    titleHighlight: lang === "en" ? "A Special Escape" : "Özel Bir Kaçış",
    description1: lang === "en"
      ? "Located right on the banks of the Azmak River flowing into the crystal waters of the Gulf of Gokova, we are in a unique location where the wind never ceases."
      : "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.",
    description2: lang === "en"
      ? "Kite Beach Akyaka offers a unique living space that integrates the passion for kitesurfing with nature, comfort, and local flavors."
      : "Kite Beach Akyaka; kitesurf tutkusunu doğayla, konforla ve yerel lezzetlerle bütünleştiren benzersiz bir yaşam alanı sunar.",
    image: "https://images.unsplash.com/photo-1544551763-46a013bb70d5?q=80&w=2940&auto=format&fit=crop",
    statsGuestCount: "500+",
    statsGuestLabel: lang === "en" ? "Happy Guests" : "Mutlu Misafir",
    statsYearCount: "10+",
    statsYearLabel: lang === "en" ? "Years Experience" : "Yıl Deneyim",
    badgeIkoTitle: "IKO",
    badgeIkoLabel: lang === "en" ? "Certified" : "Sertifikalı"
  };

  const displayFeatures = dbFeatures.length > 0 ? dbFeatures : defaultFeatures;

  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">
              {heroData.location}
            </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)' }}
            >
              {heroData.welcome}
            </span>
            <h1 className="font-sans font-black text-white leading-none tracking-tighter text-[clamp(4rem,10vw,10rem)] uppercase">
              {heroData.title}
            </h1>
          </div>

          <p className="animate-fade-up delay-500 text-white/75 text-base md:text-xl mb-10 font-light italic tracking-wide">
            {heroData.subtitle}
          </p>

          <div className="animate-fade-up delay-600 flex flex-col sm:flex-row items-center justify-center gap-4">

            <Link
              href={`/${lang}/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"
            >
              {heroData.exploreActivities}
            </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">{heroData.scroll}</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">
            {displayFeatures.map(({ icon, label, sub }, i) => {
              const IconComponent = ICON_MAP[icon as string] || Star;
              return (
                <div
                  key={i}
                  className={`flex flex-col items-center justify-center gap-2 py-6 px-4 group ${i >= 2 ? "hidden md:flex" : ""}`}
                >
                  <IconComponent 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={aboutData.image}
                  alt={aboutData.badge}
                  fill
                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                  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">{aboutData.statsGuestCount}</span>
                    <span className="block text-[10px] text-muted uppercase tracking-wider mt-1">{aboutData.statsGuestLabel}</span>
                  </div>
                  <div className="text-center pl-6">
                    <span className="block font-serif text-3xl font-bold text-primary">{aboutData.statsYearCount}</span>
                    <span className="block text-[10px] text-muted uppercase tracking-wider mt-1">{aboutData.statsYearLabel}</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">{aboutData.badgeIkoTitle}</span>
                <span className="block text-[10px] opacity-80 mt-0.5">{aboutData.badgeIkoLabel}</span>
              </div>
            </ScrollReveal>

            <ScrollReveal delay={200}>
              <span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-5">
                {aboutData.badge}
              </span>
              <h2 className="font-serif text-4xl md:text-5xl lg:text-6xl font-bold text-dark leading-[1.05] mb-8">
                {aboutData.titleLine1}<br />{aboutData.titleLine2}<br />
                <span className="text-primary italic">{aboutData.titleHighlight}</span>
              </h2>
              <p className="text-gray-600 leading-relaxed mb-5">
                {aboutData.description1}
              </p>
              <p className="text-gray-600 leading-relaxed mb-10">
                {aboutData.description2}
              </p>
              <div className="section-line mb-8" />
              <Link
                href={`/${lang}/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">
                  {lang === "en" ? "Read Our Story" : "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
                    sizes="(max-width: 768px) 100vw, 33vw"
                    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">
                {lang === "en" ? "What Will You Do?" : "Ne Yapacaksınız?"}
              </span>
              <h2 className="font-serif text-5xl font-bold text-dark">
                {lang === "en" ? "Activities" : "Aktiviteler"}
              </h2>
            </div>
            <Link
              href={`/${lang}/aktiviteler`}
              className="inline-flex items-center gap-2 text-sm font-semibold text-primary hover:text-accent transition-colors"
            >
              {lang === "en" ? "See All" : "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">
            {activities.length > 0 ? (
              activities.map((act, i) => (
                <ScrollReveal
                  key={act.id}
                  className={i === 0 || i === 3 ? "md:col-span-2" : ""}
                  delay={i * 50}
                >
                  <Link href={`/${lang}/aktiviteler`} className={`group relative block rounded-3xl overflow-hidden ${activities.length === 1 ? "aspect-[4/3] md:aspect-video" : i < 2 ? "h-[400px]" : "h-[280px]"}`}>
                    <Image
                      src={act.image}
                      alt={act.title}
                      fill
                      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                      className="object-cover group-hover:scale-105 transition-transform duration-700"
                    />
                    <div className={`absolute inset-0 bg-gradient-to-t ${i === 0 ? "from-dark/90 via-dark/20" : "from-dark/80"} to-transparent`} />
                    <div className={`absolute bottom-0 ${i === 0 || i === 3 ? "p-8" : "p-7"}`}>
                      {act.badge && (
                        <span className="block text-accent text-[10px] tracking-[0.25em] uppercase font-bold mb-2">{act.badge}</span>
                      )}
                      <h3 className={`font-serif text-white font-bold mb-1 ${i === 0 ? "text-4xl mb-2" : i === 1 || i === 3 ? "text-3xl" : "text-2xl"}`}>{act.title}</h3>
                      {i === 0 && (
                        <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">
                          {act.description}
                        </p>
                      )}
                      {i === 0 && (
                        <span className="inline-flex items-center gap-2 text-white text-sm font-semibold hover:text-accent transition-colors">
                          <ArrowRight className="w-3.5 h-3.5" />
                        </span>
                      )}
                    </div>
                  </Link>
                </ScrollReveal>
              ))
            ) : (
              <div className="md:col-span-3 py-10 text-center text-gray-500">
                {lang === "en" ? "No activities added yet." : "Henüz aktivite eklenmedi."}
              </div>
            )}
          </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">
                {lang === "en" ? "Calendar" : "Takvim"}
              </span>
              <h2 className="font-serif text-5xl font-bold">
                {lang === "en" ? "Events" : "Etkinlikler"}
              </h2>
            </div>
            <Link
              href={`/${lang}/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"
            >
              {lang === "en" ? "All Events" : "Tüm Etkinlikler"} <ArrowRight className="w-4 h-4" />
            </Link>
          </ScrollReveal>

          <ScrollReveal delay={100}>
            {events.length > 0 ? (
              events.map((ev) => (
                <div key={ev.id} 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 mb-6">
                  <div className="relative w-full md:w-1/3 h-[250px] md:h-auto rounded-2xl overflow-hidden shrink-0">
                    <Image
                      src={ev.image}
                      alt={ev.title}
                      fill
                      sizes="(max-width: 768px) 100vw, 33vw"
                      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">
                    {ev.badge && (
                      <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">
                        {ev.badge}
                      </div>
                    )}
                    <h3 className="font-serif text-3xl md:text-4xl font-bold mb-4">{ev.title}</h3>
                    <p className="text-white/60 leading-relaxed mb-6 max-w-xl">
                      {ev.description}
                    </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" /> {ev.date}
                      </span>
                      <span className="flex items-center gap-2">
                        <span className="w-2 h-2 rounded-full bg-accent" /> {ev.time}
                      </span>
                      <span className="flex items-center gap-2">
                        <span className="w-2 h-2 rounded-full bg-accent" /> {ev.location}
                      </span>
                    </div>
                    <Link
                      href={`/${lang}/etkinlikler`}
                      className="inline-flex items-center gap-2 text-xs font-bold tracking-widest uppercase text-accent hover:text-white transition-colors w-max"
                    >
                      {lang === "en" ? "View Details" : "Detayları İncele"} <ArrowRight className="w-4 h-4" />
                    </Link>
                  </div>
                </div>
              ))
            ) : (
              <div className="py-10 text-center text-white/50">
                {lang === "en" ? "No events added yet." : "Henüz etkinlik eklenmedi."}
              </div>
            )}
          </ScrollReveal>
        </div>
      </section>

      {/* ──────────────────────────────────────────
          INSTAGRAM FEED
      ────────────────────────────────────────── */}
      {instagramPosts.length > 0 && (
        <section className="py-28 bg-background">
          <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">
                @kitebeachakyaka
              </span>
              <h2 className="font-serif text-5xl font-bold text-dark">Instagram</h2>
            </ScrollReveal>

            <ScrollReveal stagger className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
              {instagramPosts.map((post: any) => (
                <a
                  key={post.id}
                  href={`https://instagram.com/p/${post.code}`}
                  target="_blank"
                  rel="noreferrer"
                  className="group block relative rounded-2xl overflow-hidden aspect-[4/5] border border-sand"
                >
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img
                    src={post.image_versions2?.candidates[0]?.url}
                    alt={post.caption?.text?.substring(0, 100) || "Instagram post"}
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                  />
                  <div className="absolute inset-0 bg-dark/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col items-center justify-center text-white p-6 text-center">
                    <Camera className="w-8 h-8 mb-3" />
                    <p className="text-xs line-clamp-3">
                      {post.caption?.text}
                    </p>
                  </div>
                </a>
              ))}
            </ScrollReveal>

            <div className="text-center mt-12">
              <a
                href="https://instagram.com/kitebeachakyaka"
                target="_blank"
                rel="noreferrer"
                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"
              >
                {lang === "en" ? "Follow Us" : "Bizi Takip Edin"}
                <ArrowRight className="w-3.5 h-3.5" />
              </a>
            </div>
          </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">
              {lang === "en" ? "Guest Reviews" : "Misafir Yorumları"}
            </span>
            <h2 className="font-serif text-5xl font-bold text-dark">
              {lang === "en" ? "Experiences" : "Deneyimler"}
            </h2>
          </ScrollReveal>

          <ScrollReveal stagger className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {displayTestimonials.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
            sizes="100vw"
            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">
              {lang === "en" ? "Get Started" : "Hemen Başlayın"}
            </span>
            <h2 className="font-serif text-5xl md:text-6xl font-bold text-white leading-tight mb-6">
              {lang === "en" ? (
                <>Are you ready to plan<br />your dream vacation?</>
              ) : (
                <>Hayalindeki tatili<br />planlamaya hazır mısın?</>
              )}
            </h2>
            <p className="text-white/50 mb-10 text-base leading-relaxed">
              {lang === "en"
                ? "The wind is calling you. Book your spot now and become a part of this unique experience."
                : "Rüzgar seni çağırıyor. Hemen yerini ayırt ve bu eşsiz deneyimin bir parçası ol."}
            </p>

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

    </div>
  );
}