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

export default function Contact() {
  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">Nous Joindre</h1>
          <p className="font-sans text-night/60 max-w-2xl mx-auto text-lg">
            Une question ? Un projet ? N'hésitez pas à nous contacter, nous vous répondrons avec plaisir.
          </p>
        </motion.div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
          {/* 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"
          >
            <div className="bg-white p-8 rounded-3xl border border-night/5 shadow-sm hover:shadow-xl hover:shadow-night/5 transition-all">
              <div className="w-12 h-12 rounded-2xl bg-night text-cloud flex items-center justify-center mb-6">
                <Mail size={24} />
              </div>
              <h3 className="font-serif text-2xl text-night mb-2">Diffusion & Programmation</h3>
              <p className="font-sans text-night/60 mb-6">Pour toute demande concernant nos spectacles.</p>
              <a
                href={`mailto:${companyInfo.emails.pro}`}
                className="inline-flex items-center gap-2 text-night font-sans font-semibold hover:text-star transition-colors"
              >
                {companyInfo.emails.pro}
                <Send size={14} />
              </a>
            </div>

            <div className="bg-white p-8 rounded-3xl border border-night/5 shadow-sm hover:shadow-xl hover:shadow-night/5 transition-all">
              <div className="w-12 h-12 rounded-2xl bg-star text-night flex items-center justify-center mb-6">
                <Mail size={24} />
              </div>
              <h3 className="font-serif text-2xl text-night mb-2">Ateliers & Pédagogie</h3>
              <p className="font-sans text-night/60 mb-6">Pour les inscriptions et renseignements ateliers.</p>
              <a
                href={`mailto:${companyInfo.emails.ateliers}`}
                className="inline-flex items-center gap-2 text-night font-sans font-semibold hover:text-star transition-colors"
              >
                {companyInfo.emails.ateliers}
                <Send size={14} />
              </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-12 rounded-3xl flex flex-col justify-between"
          >
            <div>
              <h3 className="font-serif text-4xl mb-8">Suivez nos aventures</h3>
              <p className="font-sans text-cloud/60 text-lg 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-4 group">
                  <div className="w-12 h-12 rounded-full border border-cloud/20 flex items-center justify-center group-hover:border-star group-hover:text-star transition-all">
                    <Instagram size={20} />
                  </div>
                  <span className="font-sans text-lg group-hover:text-star transition-colors">Instagram</span>
                </a>
                <a href={companyInfo.socials.facebook} target="_blank" rel="noreferrer" className="flex items-center gap-4 group">
                  <div className="w-12 h-12 rounded-full border border-cloud/20 flex items-center justify-center group-hover:border-star group-hover:text-star transition-all">
                    <Facebook size={20} />
                  </div>
                  <span className="font-sans text-lg group-hover:text-star transition-colors">Facebook</span>
                </a>
                <a href={companyInfo.socials.youtube} target="_blank" rel="noreferrer" className="flex items-center gap-4 group">
                  <div className="w-12 h-12 rounded-full border border-cloud/20 flex items-center justify-center group-hover:border-star group-hover:text-star transition-all">
                    <Youtube size={20} />
                  </div>
                  <span className="font-sans text-lg group-hover:text-star transition-colors">YouTube</span>
                </a>
              </div>
            </div>

            <div className="mt-12 pt-12 border-t border-cloud/10">
              <p className="font-serif text-xl italic text-cloud/40">
                "Le théâtre est une nourriture aussi indispensable que le pain et le vin."
              </p>
            </div>
          </motion.div>
        </div>
      </div>
    </div>
  );
}