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";
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, "/etkinlikler", {
    title: "Etkinlikler | Kite Beach Akyaka",
    description: "Mahmut Orhan konserinden Kitesurf festivallerine, Akyaka'daki en özel etkinlikler ve gün batımı partileri.",
  }, {
    title: "Events | Kite Beach Akyaka",
    description: "From Mahmut Orhan concerts to Kitesurf festivals, the most special events and sunset parties in Akyaka.",
  });
}

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

  return (
    <div className="flex flex-col min-h-screen bg-background">
      
      {/* ──────────────────────────────────────────
          HERO
      ────────────────────────────────────────── */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center mb-16 pt-40">
        <span className="inline-block text-accent text-xs tracking-[0.35em] uppercase font-bold mb-4 animate-fade-up">
          Kite Beach Akyaka
        </span>
        <h1 className="font-serif text-5xl md:text-6xl text-dark font-bold animate-fade-up delay-100 mb-6">
          {isEn ? "Events" : "Etkinlikler"}
        </h1>
        <p className="text-muted text-lg max-w-2xl mx-auto animate-fade-up delay-200">
          {isEn 
            ? "Unforgettable experiences where music, sports, and nature intertwine." 
            : "Müzik, spor ve doğanın iç içe geçtiği unutulmaz deneyimler."}
        </p>
      </div>

      {/* ──────────────────────────────────────────
          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
                      sizes="(max-width: 768px) 100vw, 50vw"
                      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"
                      >
                        {isEn ? "Contact Us" : "Bize Ulaşın"} <ArrowRight className="w-4 h-4" />
                      </Link>
                    </div>
                  </div>

                </div>
              </ScrollReveal>
            )) : (
              <div className="text-center py-20 text-gray-500">
                {isEn ? "No events added yet." : "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">
            {isEn ? "Organization" : "Organizasyon"}
          </span>
          <h2 className="font-serif text-4xl md:text-5xl font-bold mb-6">
            {isEn ? "Plan Your Own Event" : "Kendi Etkinliğinizi Planlayın"}
          </h2>
          <p className="text-white/60 max-w-xl mx-auto mb-10 leading-relaxed text-sm">
            {isEn 
              ? "You can rent the unique atmosphere of Kite Beach Akyaka for private parties, weddings, or corporate events. Contact us for details." 
              : "Ö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={`/${lang}/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"
          >
            {isEn ? "Contact Us" : "Bize Ulaşın"}
          </Link>
        </ScrollReveal>
      </section>

    </div>
  );
}