"use client";

import { motion } from "framer-motion";
import { Calendar, Clock } from "lucide-react";
import { MagicCard } from "@/components/ui/MagicCard";

const events = [
  {
    id: 1,
    title: "Canlı Konser Gecesi",
    artist: "Evrencan Gündüz & Uzaylılar",
    date: "12 Temmuz Cuma",
    time: "21:30 - 02:00",
    category: "Live Music",
    image: "https://images.unsplash.com/photo-1540039155732-680e7c58ed8a?q=80&w=2070&auto=format&fit=crop"
  },
  {
    id: 2,
    title: "Sunset DJ Party",
    artist: "DJ Soul",
    date: "14 Temmuz Pazar",
    time: "18:00 - 23:00",
    category: "Sunset",
    image: "https://images.unsplash.com/photo-1571266028243-3716f02d2d2e?q=80&w=2070&auto=format&fit=crop"
  },
  {
    id: 3,
    title: "Latin Gecesi",
    artist: "Havana Vibes",
    date: "20 Temmuz Cumartesi",
    time: "22:00 - 03:00",
    category: "Dance",
    image: "https://images.unsplash.com/photo-1508215885820-4585e5610924?q=80&w=2058&auto=format&fit=crop"
  }
];

export default function Events() {
  return (
    <section id="events" className="py-24 md:py-32 bg-[#0d0d0d] relative">
      <div className="container mx-auto px-6 md:px-12">
        
        <div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
          >
            <h2 className="font-serif text-4xl md:text-5xl text-text-main mb-4">Yaklaşan Etkinlikler</h2>
            <p className="text-text-main/60 font-light text-lg">No talk, just music. Geceye yön veren performanslar.</p>
          </motion.div>
          <motion.a 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.2 }}
            href="#contact" 
            className="text-accent1 hover:text-text-main transition-colors uppercase tracking-widest text-sm font-semibold flex items-center gap-2"
          >
            Tüm Programı Gör <span aria-hidden="true">&rarr;</span>
          </motion.a>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {events.map((event, index) => (
            <motion.div
              key={event.id}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-50px" }}
              transition={{ duration: 0.6, delay: index * 0.2 }}
            >
            <MagicCard className="group relative bg-primary overflow-hidden border border-white/5 hover:border-accent1/50 transition-colors h-full">
              <div className="aspect-[4/3] overflow-hidden relative">
                <div className="absolute inset-0 bg-primary/40 group-hover:bg-transparent transition-colors duration-500 z-10" />
                <img 
                  src={event.image} 
                  alt={event.title} 
                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                />
                <div className="absolute top-4 left-4 z-20 bg-primary/80 backdrop-blur border border-white/10 px-3 py-1 uppercase text-[10px] tracking-widest text-accent1 font-semibold">
                  {event.category}
                </div>
              </div>
              
              <div className="p-8">
                <h3 className="font-serif text-2xl text-text-main mb-1 group-hover:text-accent1 transition-colors">{event.title}</h3>
                <p className="text-text-main/70 font-light mb-6">{event.artist}</p>
                
                <div className="space-y-3 mb-8">
                  <div className="flex items-center text-sm text-text-main/60 font-light">
                    <Calendar size={16} className="text-accent2 mr-3" />
                    {event.date}
                  </div>
                  <div className="flex items-center text-sm text-text-main/60 font-light">
                    <Clock size={16} className="text-accent2 mr-3" />
                    {event.time}
                  </div>
                </div>
                
                <a 
                  href="#contact" 
                  className="block w-full py-3 text-center border border-white/10 hover:bg-accent1 hover:text-primary hover:border-accent1 transition-all uppercase tracking-widest text-xs font-bold"
                >
                  Rezervasyon
                </a>
              </div>
            </MagicCard>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}