import Image from "next/image";
import Link from "next/link";
import { ArrowRight, Calendar, Clock, MapPin, Music } from "lucide-react";
import ScrollReveal from "@/components/ScrollReveal";

import prisma from "@/lib/prisma";

export const metadata = {
  title: "Etkinlikler | Kite Beach Akyaka",
  description: "Mahmut Orhan konserinden Kitesurf festivallerine, Akyaka'daki en özel etkinlikler ve gün batımı partileri.",
};

export default async function EventsPage({ params }: { params: Promise<{ lang: string }> }) {
  const { lang } = await params;
  const events = await prisma.event.findMany({ where: { lang }, orderBy: { date: "asc" } });

  return (
    <div className="flex flex-col min-h-screen bg-background">
      
      {/* ──────────────────────────────────────────
          HERO
      ────────────────────────────────────────── */}
      <section className="relative h-[60vh] min-h-[500px] w-full flex items-center justify-center overflow-hidden">
        <div className="absolute inset-0 z-0">
          <Image
            src="https://images.unsplash.com/photo-1514525253161-7a46d19cd819?q=80&w=2874&auto=format&fit=crop"
            alt="Kite Beach Akyaka Etkinlikler"
            fill
            className="object-cover"
            priority
          />
          <div className="absolute inset-0 bg-dark/60" />
        </div>

        <div className="relative z-10 text-center px-4 max-w-4xl mx-auto mt-16">
          <ScrollReveal>
            <span className="inline-block text-accent text-xs tracking-[0.35em] uppercase mb-4 font-bold">
              Kite Beach Akyaka
            </span>
            <h1 className="font-serif text-5xl md:text-7xl font-bold text-white mb-6">
              Etkinlikler
            </h1>
            <p className="text-white/80 text-lg md:text-xl font-light max-w-2xl mx-auto leading-relaxed">
              Müzik, spor ve doğanın iç içe geçtiği unutulmaz deneyimler.
            </p>
          </ScrollReveal>
        </div>
      </section>

      {/* ──────────────────────────────────────────
          EVENTS LIST
      ────────────────────────────────────────── */}
      <section className="py-24">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          
          <div className="space-y-16">
            {events.length > 0 ? events.map((event, index) => (
              <ScrollReveal key={event.id} delay={index * 100}>
                <div className={`flex flex-col ${index % 2 === 1 ? 'md:flex-row-reverse' : 'md:flex-row'} gap-8 lg:gap-12 bg-white rounded-3xl overflow-hidden shadow-sm border border-sand transition-all hover:shadow-xl`}>
                  
                  {/* Image Container */}
                  <div className="w-full md:w-1/2 lg:w-[55%] relative h-[300px] md:h-auto min-h-[400px]">
                    <Image
                      src={event.image}
                      alt={event.title}
                      fill
                      className="object-cover"
                    />
                    {event.badge && (
                      <div className="absolute top-4 left-4 bg-accent text-white px-4 py-1.5 rounded-full text-xs font-bold tracking-widest uppercase flex items-center gap-2 shadow-lg backdrop-blur-md">
                        <Music className="w-3.5 h-3.5" />
                        {event.badge}
                      </div>
                    )}
                  </div>

                  {/* Content Container */}
                  <div className="w-full md:w-1/2 lg:w-[45%] p-8 md:p-10 flex flex-col justify-center">
                    <h2 className="font-serif text-3xl md:text-4xl font-bold text-dark mb-6 leading-tight mt-4">
                      {event.title}
                    </h2>
                    
                    <div className="space-y-3 mb-6">
                      <div className="flex items-center gap-3 text-sm text-gray-600">
                        <Calendar className="w-4 h-4 text-accent" />
                        <span>{event.date}</span>
                      </div>
                      <div className="flex items-center gap-3 text-sm text-gray-600">
                        <Clock className="w-4 h-4 text-accent" />
                        <span>{event.time}</span>
                      </div>
                      <div className="flex items-center gap-3 text-sm text-gray-600">
                        <MapPin className="w-4 h-4 text-accent" />
                        <span>{event.location}</span>
                      </div>
                    </div>

                    <p className="text-muted text-sm leading-relaxed mb-8">
                      {event.description}
                    </p>

                    <div className="flex items-center justify-between mt-auto pt-6 border-t border-sand">
                      <Link 
                        href={`/${lang}/iletisim`} 
                        className="inline-flex items-center gap-2 text-xs font-bold tracking-widest uppercase transition-colors bg-accent text-white px-6 py-3 rounded-full hover:bg-accent/90"
                      >
                        Bize Ulaşın <ArrowRight className="w-4 h-4" />
                      </Link>
                    </div>
                  </div>

                </div>
              </ScrollReveal>
            )) : (
              <div className="text-center py-20 text-gray-500">Henüz etkinlik eklenmedi.</div>
            )}
          </div>

        </div>
      </section>

      {/* CTA BAND */}
      <section className="bg-dark text-white py-24 text-center px-4">
        <ScrollReveal>
          <span className="block text-accent text-xs font-bold tracking-[0.25em] uppercase mb-4">Organizasyon</span>
          <h2 className="font-serif text-4xl md:text-5xl font-bold mb-6">Kendi Etkinliğinizi Planlayın</h2>
          <p className="text-white/60 max-w-xl mx-auto mb-10 leading-relaxed text-sm">
            Özel partiler, düğünler veya kurumsal etkinlikler için Kite Beach Akyaka'nın eşsiz atmosferini kiralayabilirsiniz. Detaylar için bizimle iletişime geçin.
          </p>
          <Link
            href="/iletisim"
            className="inline-block border-2 border-white/20 hover:border-white px-10 py-4 rounded-full text-xs font-bold tracking-[0.15em] uppercase transition-all"
          >
            Bize Ulaşın
          </Link>
        </ScrollReveal>
      </section>

    </div>
  );
}