import { motion } from 'motion/react';
import { Mail, Clock, MapPin, Users } from 'lucide-react';
import { companyInfo } from '../data';

export default function Ateliers() {
  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">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
          >
            <h1 className="font-serif text-5xl md:text-7xl text-night mb-8">Ateliers Théâtre</h1>
            <div className="space-y-6 font-sans text-lg text-night/70 leading-relaxed">
              <p>
                La Compagnie AspiRêves propose des ateliers pour petits et grands enfants, pour que vous aussi vous voliez sur votre petit nuage.
              </p>
              <p>
                Nos ateliers sont basés sur le jeu, l'expression corporelle, la découverte du clown et la pratique théâtrale dans la bienveillance et le plaisir.
              </p>
            </div>

            <div className="mt-12 space-y-6">
              <div className="flex items-start gap-4">
                <div className="w-12 h-12 rounded-2xl bg-star/10 flex items-center justify-center text-star flex-shrink-0">
                  <Users size={24} />
                </div>
                <div>
                  <h3 className="font-serif text-xl text-night">Pour tous les âges</h3>
                  <p className="font-sans text-night/60">Enfants, adolescents et adultes.</p>
                </div>
              </div>
              
              <div className="flex items-start gap-4">
                <div className="w-12 h-12 rounded-2xl bg-star/10 flex items-center justify-center text-star flex-shrink-0">
                  <Clock size={24} />
                </div>
                <div>
                  <h3 className="font-serif text-xl text-night">Horaires & Tarifs</h3>
                  <p className="font-sans text-night/60">Contactez-nous pour recevoir la plaquette complète.</p>
                </div>
              </div>

              <div className="flex items-start gap-4">
                <div className="w-12 h-12 rounded-2xl bg-star/10 flex items-center justify-center text-star flex-shrink-0">
                  <MapPin size={24} />
                </div>
                <div>
                  <h3 className="font-serif text-xl text-night">Lieux</h3>
                  <p className="font-sans text-night/60">Interventions dans le Tarn et l'Hérault.</p>
                </div>
              </div>
            </div>

            <div className="mt-12">
              <a
                href={`mailto:${companyInfo.emails.ateliers}`}
                className="inline-flex items-center gap-3 bg-night text-cloud px-8 py-4 rounded-full font-sans font-medium hover:bg-night/90 transition-all"
              >
                <Mail size={18} />
                S'inscrire ou se renseigner
              </a>
            </div>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="relative"
          >
            <div className="aspect-square rounded-full overflow-hidden border-8 border-white shadow-2xl">
              <img
                src="https://picsum.photos/seed/theater-workshop/800/800"
                alt="Atelier Théâtre"
                className="w-full h-full object-cover"
                referrerPolicy="no-referrer"
              />
            </div>
            {/* Decorative element */}
            <div className="absolute -bottom-10 -right-10 w-40 h-40 bg-star rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse"></div>
          </motion.div>
        </div>
      </div>
    </div>
  );
}