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

export default function Spectacles() {
  return (
    <div className="pt-32 pb-24 min-h-screen">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="text-center mb-20"
        >
          <h1 className="font-serif text-5xl md:text-7xl text-night mb-6">Nos Spectacles</h1>
          <p className="font-sans text-night/60 max-w-2xl mx-auto text-lg">
            Des créations originales pour petits et grands, mêlant poésie, humour et burlesque.
          </p>
        </motion.div>

        <div className="space-y-32">
          {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-12 items-center`}
            >
              {/* Image Side */}
              <div className="w-full md:w-1/2">
                <div className="relative aspect-[4/3] overflow-hidden rounded-3xl shadow-2xl shadow-night/10 group">
                  <img
                    src={spectacle.image}
                    alt={spectacle.title}
                    className="object-cover w-full h-full transition-transform duration-700 group-hover:scale-105"
                    referrerPolicy="no-referrer"
                  />
                  <div className="absolute inset-0 bg-night/10 group-hover:bg-transparent transition-colors duration-300" />
                </div>
              </div>

              {/* Content Side */}
              <div className="w-full md:w-1/2 space-y-6">
                <h2 className="font-serif text-4xl md:text-5xl text-night">{spectacle.title}</h2>
                
                <div className="flex flex-wrap gap-4">
                  <div className="flex items-center gap-2 bg-night/5 px-4 py-2 rounded-full text-sm font-sans text-night/70">
                    <Users size={16} />
                    <span>{spectacle.age}</span>
                  </div>
                  <div className="flex items-center gap-2 bg-night/5 px-4 py-2 rounded-full text-sm font-sans text-night/70">
                    <Clock size={16} />
                    <span>{spectacle.duration}</span>
                  </div>
                </div>

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

                <div className="pt-6 flex flex-wrap gap-4">
                  <button className="bg-night text-cloud px-8 py-3 rounded-full font-sans font-medium hover:bg-night/90 transition-all">
                    Dossier Pédagogique
                  </button>
                  <button className="border border-night/20 text-night px-8 py-3 rounded-full font-sans font-medium hover:bg-night/5 transition-all flex items-center gap-2">
                    Voir les photos <ExternalLink size={16} />
                  </button>
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );
}