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

export default function Footer() {
  return (
    <footer className="bg-night text-cloud py-16 border-t border-cloud/10">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-12 md:gap-8">
          
          {/* Brand */}
          <div className="col-span-1 md:col-span-2">
            <div className="flex items-center gap-3 mb-6">
              <div className="w-10 h-10 rounded-full bg-cloud flex items-center justify-center overflow-hidden">
                <span className="text-night font-serif italic text-xl">A</span>
              </div>
              <span className="font-serif text-2xl font-medium tracking-wide text-cloud">
                AspiRêves
              </span>
            </div>
            <p className="font-sans text-cloud/60 max-w-sm leading-relaxed mb-8">
              {companyInfo.description}
            </p>
            <div className="flex gap-4">
              <a href={companyInfo.socials.instagram} target="_blank" rel="noreferrer" className="w-10 h-10 rounded-full border border-cloud/20 flex items-center justify-center text-cloud/60 hover:text-cloud hover:border-cloud transition-colors">
                <span className="sr-only">Instagram</span>
                <Instagram size={18} />
              </a>
              <a href={companyInfo.socials.facebook} target="_blank" rel="noreferrer" className="w-10 h-10 rounded-full border border-cloud/20 flex items-center justify-center text-cloud/60 hover:text-cloud hover:border-cloud transition-colors">
                <span className="sr-only">Facebook</span>
                <Facebook size={18} />
              </a>
              <a href={companyInfo.socials.youtube} target="_blank" rel="noreferrer" className="w-10 h-10 rounded-full border border-cloud/20 flex items-center justify-center text-cloud/60 hover:text-cloud hover:border-cloud transition-colors">
                <span className="sr-only">YouTube</span>
                <Youtube size={18} />
              </a>
            </div>
          </div>

          {/* Contact */}
          <div>
            <h4 className="font-sans text-sm uppercase tracking-widest text-cloud/40 mb-6">Contact</h4>
            <ul className="space-y-4 font-sans text-cloud/80">
              <li>
                <span className="block text-xs text-cloud/50 uppercase tracking-wider mb-1">Professionnels</span>
                <a href={`mailto:${companyInfo.emails.pro}`} className="hover:text-star transition-colors flex items-center gap-2">
                  <Mail size={14} />
                  {companyInfo.emails.pro}
                </a>
              </li>
              <li>
                <span className="block text-xs text-cloud/50 uppercase tracking-wider mb-1">Ateliers Théâtre</span>
                <a href={`mailto:${companyInfo.emails.ateliers}`} className="hover:text-star transition-colors flex items-center gap-2">
                  <Mail size={14} />
                  {companyInfo.emails.ateliers}
                </a>
              </li>
            </ul>
          </div>

          {/* Legal */}
          <div>
            <h4 className="font-sans text-sm uppercase tracking-widest text-cloud/40 mb-6">Informations</h4>
            <ul className="space-y-3 font-sans text-cloud/80 text-sm">
              <li><a href="#" className="hover:text-cloud transition-colors">Mentions légales</a></li>
              <li><a href="#" className="hover:text-cloud transition-colors">Politique de confidentialité</a></li>
              <li className="pt-4 text-cloud/40">
                © {new Date().getFullYear()} Compagnie AspiRêves. Tous droits réservés.
              </li>
            </ul>
          </div>

        </div>
      </div>
    </footer>
  );
}