import { motion } from 'motion/react';
import { spectacles } from '../data';
import { ExternalLink, Clock, Users, Star, Sparkles } from 'lucide-react';

export default function Spectacles() {
  return (
    <div className="pt-32 pb-24 min-h-screen bg-cloud overflow-hidden relative">
      {/* Background Magic */}
      <div className="absolute top-0 right-0 w-96 h-96 bg-dream-purple/20 rounded-full filter blur-[100px] -translate-y-1/2 translate-x-1/2"></div>
      <div className="absolute bottom-0 left-0 w-96 h-96 bg-dream-blue/20 rounded-full filter blur-[100px] translate-y-1/2 -translate-x-1/2"></div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="text-center mb-16 md:mb-24"
        >
          <div className="inline-flex items-center gap-2 mb-6 px-4 py-1 rounded-full bg-white/50 border border-white/20 text-dream-coral">
            <Sparkles size={16} />
            <span className="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest">Le Répertoire</span>
          </div>
          <h1 className="font-display text-4xl sm:text-6xl md:text-8xl text-night mb-8">Nos <span className="text-dream-purple italic">Spectacles</span></h1>
          <p className="font-sans text-night/60 max-w-2xl mx-auto text-lg md:text-xl leading-relaxed">
            Des bulles de poésie et d'humour pour s'évader, <br className="hidden sm:block" />apprendre et grandir ensemble.
          </p>
        </motion.div>

        <div className="space-y-24 md:space-y-40">
          {spectacles.map((spectacle, index) => (
            <motion.div
              key={spectacle.id}
              initial={{ opacity: 0, y: 40 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-100px" }}
              transition={{ duration: 0.8 }}
              className={`flex flex-col ${index % 2 === 1 ? 'md:flex-row-reverse' : 'md:flex-row'} gap-10 md:gap-16 items-center`}
            >
              {/* Image Side - Dream Bubble Look */}
              <div className="w-full md:w-1/2 relative">
                <div className="absolute -top-4 -left-4 md:-top-6 md:-left-6 w-16 h-16 md:w-24 md:h-24 bg-star/20 rounded-full filter blur-xl md:blur-2xl animate-pulse"></div>
                <div className="absolute -bottom-4 -right-4 md:-bottom-6 md:-right-6 w-20 h-20 md:w-32 md:h-32 bg-dream-blue/30 rounded-full filter blur-xl md:blur-2xl animate-pulse animation-delay-2000"></div>
                
                <div className="relative aspect-[4/3] overflow-hidden rounded-[32px] md:rounded-[60px] shadow-2xl shadow-night/10 group border-4 md:border-8 border-white">
                  <img
                    src={spectacle.image}
                    alt={spectacle.title}
                    className="object-cover w-full h-full transition-transform duration-1000 group-hover:scale-110"
                    referrerPolicy="no-referrer"
                  />
                  <div className="absolute inset-0 bg-gradient-to-tr from-dream-purple/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                </div>
              </div>

              {/* Content Side */}
              <div className="w-full md:w-1/2 space-y-6 md:space-y-8 text-center md:text-left">
                <div className="flex items-center justify-center md:justify-start gap-3">
                  <div className="h-px w-8 md:w-12 bg-dream-coral"></div>
                  <span className="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest text-dream-coral">Création Originale</span>
                </div>
                
                <h2 className="font-display text-4xl md:text-6xl text-night group-hover:text-dream-purple transition-colors">{spectacle.title}</h2>
                
                <div className="flex flex-wrap justify-center md:justify-start gap-3 md:gap-4">
                  <div className="flex items-center gap-2 bg-dream-blue/20 px-4 py-1.5 md:px-5 md:py-2 rounded-xl md:rounded-2xl text-xs md:text-sm font-sans font-bold text-dream-blue-dark">
                    <Users size={16} className="text-dream-blue" />
                    <span>{spectacle.age}</span>
                  </div>
                  <div className="flex items-center gap-2 bg-dream-pink/20 px-4 py-1.5 md:px-5 md:py-2 rounded-xl md:rounded-2xl text-xs md:text-sm font-sans font-bold text-dream-pink-dark">
                    <Clock size={16} className="text-dream-pink" />
                    <span>{spectacle.duration}</span>
                  </div>
                </div>

                <p className="font-sans text-lg md:text-xl text-night/70 leading-relaxed">
                  {spectacle.summary}
                </p>

                <div className="pt-4 md:pt-8 flex flex-wrap justify-center md:justify-start gap-4 md:gap-6">
                  <button className="w-full sm:w-auto bg-night text-cloud px-8 py-4 md:px-10 md:py-4 rounded-full font-sans font-bold tracking-wide hover:bg-night/90 transition-all hover:scale-105 shadow-lg shadow-night/20">
                    Dossier Pédagogique
                  </button>
                  <button className="group flex items-center gap-3 text-night font-sans font-bold hover:text-dream-purple transition-colors">
                    <div className="w-10 h-10 md:w-12 md:h-12 rounded-full border-2 border-night/10 flex items-center justify-center group-hover:border-dream-purple group-hover:bg-dream-purple/10 transition-all">
                      <ExternalLink size={16} />
                    </div>
                    Voir les photos
                  </button>
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
      
      {/* Decorative Floating Elements */}
      <div className="absolute top-1/4 left-10 text-dream-pink opacity-20 animate-float"><Star size={60} fill="currentColor" /></div>
      <div className="absolute bottom-1/4 right-10 text-dream-blue opacity-20 animate-float animation-delay-2000"><Star size={40} fill="currentColor" /></div>
    </div>
  );
}