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

const events = [
  {
    id: "mahmut-orhan",
    title: "Mahmut Orhan - Sunset Session",
    date: "15 Ağustos 2026",
    time: "18:00 - 23:30",
    location: "Kite Beach Akyaka, Beach Club",
    category: "Elektronik Müzik / DJ Performans",
    price: "Biletler Yakında",
    image: "https://images.unsplash.com/photo-1540039155732-680c74f07599?q=80&w=2832&auto=format&fit=crop",
    description: "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. Bilet detayları çok yakında açıklanacaktır.",
    featured: true,
  },
  {
    id: "kite-festival",
    title: "Akyaka Kitesurf Festivali '26",
    date: "20-22 Eylül 2026",
    time: "Tüm Gün",
    location: "Kite Beach Sahili",
    category: "Spor & Festival",
    price: "Ücretsiz Katılım",
    image: "https://images.unsplash.com/photo-1533000756353-909d73d2a3c7?q=80&w=2940&auto=format&fit=crop",
    description: "Geleneksel Kitesurf festivalimiz bu yıl daha da büyük! Profesyonel yarışçılar, amatör denemeler, gün boyu müzik ve sahil etkinlikleri ile rüzgarın tadını çıkarın.",
    featured: false,
  },
  {
    id: "yoga-retreat",
    title: "Dolunay Yoga & Meditasyon",
    date: "28 Ekim 2026",
    time: "19:00 - 21:00",
    location: "Nehir Platformu",
    category: "Wellness",
    price: "₺450",
    image: "https://images.unsplash.com/photo-1599901860904-17e08627c271?q=80&w=2940&auto=format&fit=crop",
    description: "Dolunayın büyüleyici enerjisinde, Azmak Nehri'nin sessizliğinde özel bir yoga ve ses banyosu meditasyonu. Tüm seviyeler için uygundur. Matlar tarafımızdan temin edilir.",
    featured: false,
  }
];

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 function EventsPage() {
  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.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.featured && (
                      <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" />
                        Öne Çıkan
                      </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">
                    <span className="text-primary text-[10px] tracking-[0.2em] font-bold uppercase mb-3 block">
                      {event.category}
                    </span>
                    <h2 className="font-serif text-3xl md:text-4xl font-bold text-dark mb-6 leading-tight">
                      {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">
                      <span className="font-bold text-dark text-lg">{event.price}</span>
                      <Link 
                        href="/iletisim" 
                        className={`inline-flex items-center gap-2 text-xs font-bold tracking-widest uppercase transition-colors ${
                          event.featured ? 'bg-accent text-white px-6 py-3 rounded-full hover:bg-accent/90' : 'text-primary hover:text-accent'
                        }`}
                      >
                        Bilet / Bilgi <ArrowRight className="w-4 h-4" />
                      </Link>
                    </div>
                  </div>

                </div>
              </ScrollReveal>
            ))}
          </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>
  );
}