import { motion } from 'motion/react';
import { Mail, Instagram, Facebook, Youtube, Send, Sparkles, Star } from 'lucide-react';
import { companyInfo } from '../data';

export default function Contact() {
  return (
    <div className="pt-32 pb-24 min-h-screen bg-cloud relative overflow-hidden">
      {/* Background Magic */}
      <div className="absolute top-0 right-0 w-96 h-96 bg-dream-purple/10 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">Contact</span>
          </div>
          <h1 className="font-display text-5xl md:text-8xl text-night mb-8">Nous <span className="text-dream-coral italic">Joindre</span></h1>
          <p className="font-sans text-night/60 max-w-2xl mx-auto text-lg md:text-xl leading-relaxed">
            Une question ? Un projet ? N'hésitez pas à nous contacter, <br className="hidden sm:block" />nous vous répondrons avec plaisir.
          </p>
        </motion.div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 md:gap-16">
          {/* Email Cards */}
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="space-y-6 md:space-y-8"
          >
            <div className="bg-white p-8 md:p-10 rounded-[32px] md:rounded-[40px] border border-white shadow-xl shadow-night/5 hover:shadow-dream-purple/10 transition-all group">
              <div className="w-14 h-14 rounded-2xl bg-night text-cloud flex items-center justify-center mb-8 group-hover:scale-110 transition-transform">
                <Mail size={28} />
              </div>
              <h3 className="font-display text-2xl md:text-3xl text-night mb-3">Diffusion & Programmation</h3>
              <p className="font-sans text-night/50 font-bold uppercase tracking-widest text-xs mb-8">Pour toute demande concernant nos spectacles.</p>
              <a
                href={`mailto:${companyInfo.emails.pro}`}
                className="inline-flex items-center gap-3 text-night font-sans font-bold hover:text-dream-coral transition-colors break-all"
              >
                {companyInfo.emails.pro}
                <Send size={16} className="text-dream-coral" />
              </a>
            </div>

            <div className="bg-white p-8 md:p-10 rounded-[32px] md:rounded-[40px] border border-white shadow-xl shadow-night/5 hover:shadow-dream-blue/10 transition-all group">
              <div className="w-14 h-14 rounded-2xl bg-dream-blue text-white flex items-center justify-center mb-8 group-hover:scale-110 transition-transform">
                <Mail size={28} />
              </div>
              <h3 className="font-display text-2xl md:text-3xl text-night mb-3">Ateliers & Pédagogie</h3>
              <p className="font-sans text-night/50 font-bold uppercase tracking-widest text-xs mb-8">Pour les inscriptions et renseignements ateliers.</p>
              <a
                href={`mailto:${companyInfo.emails.ateliers}`}
                className="inline-flex items-center gap-3 text-night font-sans font-bold hover:text-dream-blue transition-colors break-all"
              >
                {companyInfo.emails.ateliers}
                <Send size={16} className="text-dream-blue" />
              </a>
            </div>
          </motion.div>

          {/* Social & Info */}
          <motion.div
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
            className="bg-night text-cloud p-10 md:p-16 rounded-[40px] md:rounded-[60px] flex flex-col justify-between relative overflow-hidden"
          >
            <div className="absolute top-0 right-0 w-64 h-64 bg-dream-purple/20 rounded-full filter blur-[80px] -translate-y-1/2 translate-x-1/2"></div>
            
            <div className="relative z-10">
              <h3 className="font-display text-4xl md:text-5xl mb-8">Suivez nos <br /><span className="text-dream-coral">aventures</span></h3>
              <p className="font-sans text-cloud/60 text-lg md:text-xl mb-12 leading-relaxed">
                Rejoignez-nous sur les réseaux sociaux pour découvrir les coulisses, les photos de tournée et les actualités de la compagnie.
              </p>
              
              <div className="space-y-6">
                <a href={companyInfo.socials.instagram} target="_blank" rel="noreferrer" className="flex items-center gap-6 group">
                  <div className="w-14 h-14 rounded-2xl border-2 border-cloud/10 flex items-center justify-center group-hover:border-dream-pink group-hover:text-dream-pink transition-all">
                    <Instagram size={24} />
                  </div>
                  <span className="font-sans text-xl font-bold tracking-wide group-hover:text-dream-pink transition-colors">Instagram</span>
                </a>
                <a href={companyInfo.socials.facebook} target="_blank" rel="noreferrer" className="flex items-center gap-6 group">
                  <div className="w-14 h-14 rounded-2xl border-2 border-cloud/10 flex items-center justify-center group-hover:border-dream-blue group-hover:text-dream-blue transition-all">
                    <Facebook size={24} />
                  </div>
                  <span className="font-sans text-xl font-bold tracking-wide group-hover:text-dream-blue transition-colors">Facebook</span>
                </a>
                <a href={companyInfo.socials.youtube} target="_blank" rel="noreferrer" className="flex items-center gap-6 group">
                  <div className="w-14 h-14 rounded-2xl border-2 border-cloud/10 flex items-center justify-center group-hover:border-dream-coral group-hover:text-dream-coral transition-all">
                    <Youtube size={24} />
                  </div>
                  <span className="font-sans text-xl font-bold tracking-wide group-hover:text-dream-coral transition-colors">YouTube</span>
                </a>
              </div>
            </div>

            <div className="mt-16 pt-12 border-t border-cloud/10 relative z-10">
              <p className="font-display text-2xl italic text-cloud/40 leading-relaxed">
                "Le théâtre est une nourriture aussi indispensable que le pain et le vin."
              </p>
            </div>
            
            <div className="absolute bottom-10 right-10 text-star opacity-20 animate-float">
              <Star size={48} fill="currentColor" />
            </div>
          </motion.div>
        </div>
      </div>
    </div>
  );
}