(function() {
const { useState: useStateFooter } = React;
const { Facebook: FacebookFooter, Twitter: TwitterFooter, Instagram: InstagramFooter, Youtube: YoutubeFooter, Mail: MailFooter, Phone: PhoneFooter, MapPin: MapPinFooter, Music: MusicFooter } = window;

const Footer = () => {
  const [email, setEmail] = useStateFooter('');
  const [isSubmitting, setIsSubmitting] = useStateFooter(false);
  const [message, setMessage] = useStateFooter('');

  const handleNewsletterSubmit = async (e) => {
    e.preventDefault();
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
      setMessage('Veuillez entrer une adresse email valide');
      setTimeout(() => setMessage(''), 3000);
      return;
    }
    setIsSubmitting(true);
    try {
      const subject = encodeURIComponent('Nouvelle inscription newsletter GSM 2025');
      const body = encodeURIComponent(`
Nouvelle inscription à la newsletter GSM 2025

Email: ${email}
Date: ${new Date().toLocaleString('fr-FR')}
Source: Site web GSM 2025

Cette personne souhaite recevoir les informations sur le Guadeloupe Salsamania Meeting 2025.
      `);
      window.location.href = `mailto:ayorumba@gmail.com?subject=${subject}&body=${body}`;
      setMessage("Votre demande d'inscription a été envoyée !");
      setEmail('');
      setTimeout(() => setMessage(''), 5000);
    } catch (error) {
      setMessage('Erreur lors de l\'envoi. Veuillez réessayer.');
      setTimeout(() => setMessage(''), 3000);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <footer className="bg-gradient-to-b from-gray-900 to-black relative overflow-hidden">
      <div className="absolute inset-0">
        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-orange-500/5 rounded-full blur-3xl"></div>
        <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-red-500/5 rounded-full blur-3xl"></div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 relative z-10">
        <div className="grid lg:grid-cols-4 gap-12">
          {/* Brand Section */}
          <div className="lg:col-span-2">
            <div className="flex items-center mb-6">
              <div className="relative">
                <span className="text-4xl font-black text-white tracking-wider">GSM</span>
                <div className="absolute -bottom-1 left-0 w-full h-1 bg-gradient-to-r from-orange-500 to-red-500"></div>
              </div>
              <span className="text-orange-500 text-lg font-semibold ml-3">2025</span>
            </div>
            <p className="text-gray-300 text-lg leading-relaxed mb-8 max-w-md">
              Le festival de salsa et musiques latines premier des Antilles revient en Guadeloupe
              pour quatre jours de performances exceptionnelles, d'ateliers de danse et de passion tropicale.
            </p>

            {/* Social Media */}
            <div className="flex space-x-4 mb-8">
              <a href="https://www.facebook.com/Salsamaniaguadeloupe" className="group w-12 h-12 bg-gradient-to-r from-orange-500/20 to-red-500/20 border border-orange-500/30 rounded-full flex items-center justify-center hover:bg-gradient-to-r hover:from-orange-500 hover:to-red-500 transition-all duration-300">
                <FacebookFooter className="h-5 w-5 text-orange-500 group-hover:text-white" />
              </a>
              <a href="" className="group w-12 h-12 bg-gradient-to-r from-orange-500/20 to-red-500/20 border border-orange-500/30 rounded-full flex items-center justify-center hover:bg-gradient-to-r hover:from-orange-500 hover:to-red-500 transition-all duration-300">
                <TwitterFooter className="h-5 w-5 text-orange-500 group-hover:text-white" />
              </a>
              <a href="https://www.instagram.com/association_salsamania/" className="group w-12 h-12 bg-gradient-to-r from-orange-500/20 to-red-500/20 border border-orange-500/30 rounded-full flex items-center justify-center hover:bg-gradient-to-r hover:from-orange-500 hover:to-red-500 transition-all duration-300">
                <InstagramFooter className="h-5 w-5 text-orange-500 group-hover:text-white" />
              </a>
              <a href="https://www.youtube.com/@associationsalsamania" className="group w-12 h-12 bg-gradient-to-r from-orange-500/20 to-red-500/20 border border-orange-500/30 rounded-full flex items-center justify-center hover:bg-gradient-to-r hover:from-orange-500 hover:to-red-500 transition-all duration-300">
                <YoutubeFooter className="h-5 w-5 text-orange-500 group-hover:text-white" />
              </a>
            </div>

            {/* Newsletter */}
            <div className="bg-gradient-to-r from-gray-900/50 to-black/50 backdrop-blur-xl rounded-2xl p-6 border border-orange-500/20">
              <h3 className="text-white font-bold text-base sm:text-lg mb-4">Restez Informé</h3>
              <form onSubmit={handleNewsletterSubmit} className="space-y-3">
                <div className="flex flex-col sm:flex-row gap-2">
                  <input
                    type="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="Entrez votre email"
                    className="flex-1 bg-black/50 border border-gray-700 rounded-xl px-3 sm:px-4 py-2 sm:py-3 text-sm sm:text-base text-white placeholder-gray-400 focus:outline-none focus:border-orange-500 transition-colors w-full"
                    required
                  />
                  <button
                    type="submit"
                    disabled={isSubmitting}
                    className={`px-4 sm:px-6 py-2 sm:py-3 rounded-xl transition-all duration-300 w-full sm:w-auto ${
                      isSubmitting
                        ? 'bg-gray-600 cursor-not-allowed'
                        : 'bg-gradient-to-r from-orange-500 to-red-600 hover:from-orange-600 hover:to-red-700'
                    }`}
                  >
                    {isSubmitting ? (
                      <div className="w-4 h-4 sm:w-5 sm:h-5 border-2 border-white border-t-transparent rounded-full animate-spin mx-auto"></div>
                    ) : (
                      <div className="flex items-center justify-center gap-2">
                        <MailFooter className="h-4 w-4 sm:h-5 sm:w-5 text-white" />
                        <span className="text-sm sm:text-base font-semibold sm:hidden">S'inscrire</span>
                      </div>
                    )}
                  </button>
                </div>
                {message && (
                  <div className={`text-xs sm:text-sm font-medium ${message.includes('Erreur') ? 'text-red-400' : 'text-green-400'}`}>
                    {message}
                  </div>
                )}
              </form>
            </div>
          </div>

          {/* Quick Links */}
          <div>
            <h3 className="text-white font-bold text-xl mb-6">Liens Rapides</h3>
            <ul className="space-y-4">
              <li><a href="#home"     className="text-gray-300 hover:text-orange-500 transition-colors">Accueil</a></li>
              <li><a href="#about"    className="text-gray-300 hover:text-orange-500 transition-colors">A Propos de GSM</a></li>
              <li><a href="#lineup"   className="text-gray-300 hover:text-orange-500 transition-colors">Programmation</a></li>
              <li><a href="#schedule" className="text-gray-300 hover:text-orange-500 transition-colors">Horaires</a></li>
              <li><a href="#hotel"    className="text-gray-300 hover:text-orange-500 transition-colors">Hôtels</a></li>
              <li><a href="#gallery"  className="text-gray-300 hover:text-orange-500 transition-colors">Galerie</a></li>
              <li><a href="#partners" className="text-gray-300 hover:text-orange-500 transition-colors">Partenaires</a></li>
              <li><a href="#"         className="text-gray-300 hover:text-orange-500 transition-colors">Billets</a></li>
              <li><a href="#"         className="text-gray-300 hover:text-orange-500 transition-colors">Ateliers de Danse</a></li>
              <li><a href="#"         className="text-gray-300 hover:text-orange-500 transition-colors">Hébergement</a></li>
            </ul>
          </div>

          {/* Contact Info */}
          <div>
            <h3 className="text-white font-bold text-xl mb-6">Informations Contact</h3>
            <div className="space-y-4">
              <div className="flex items-start gap-3">
                <MapPinFooter className="h-5 w-5 text-orange-500 mt-1 flex-shrink-0" />
                <div>
                  <p className="text-white font-semibold">Créole Beach Hôtel & SPA</p>
                  <p className="text-gray-300">Le Gosier</p>
                  <p className="text-gray-300">Guadeloupe, 97190</p>
                </div>
              </div>
              <div className="flex items-center gap-3">
                <PhoneFooter className="h-5 w-5 text-orange-500" />
                <p className="text-gray-300">+590690553515</p>
              </div>
              <div className="flex items-center gap-3">
                <MailFooter className="h-5 w-5 text-orange-500" />
                <p className="text-gray-300">president@salsamaniaguadeloupe.fr</p>
              </div>
            </div>
            <div className="mt-8 bg-gradient-to-r from-orange-500/10 to-red-500/10 rounded-2xl p-4 border border-orange-500/20">
              <div className="flex items-center gap-2 mb-2">
                <MusicFooter className="h-5 w-5 text-orange-500" />
                <span className="text-orange-500 font-semibold">Dates du Festival</span>
              </div>
              <p className="text-white font-bold">6-9 Novembre 2025</p>
              <p className="text-gray-300 text-sm">Ouverture des portes à 20h chaque jour</p>
            </div>
          </div>
        </div>

        <div className="border-t border-gray-800 mt-16 pt-8">
          <div className="flex flex-col lg:flex-row justify-between items-center gap-4">
            <p className="text-gray-400">© 2025 Salsamania | Tous droits réservés.</p>
            <div className="flex flex-wrap gap-6 text-sm">
              <a href="#" className="text-gray-400 hover:text-orange-500 transition-colors">Politique de Confidentialité</a>
              <a href="#" className="text-gray-400 hover:text-orange-500 transition-colors">Conditions d'Utilisation</a>
              <a href="#" className="text-gray-400 hover:text-orange-500 transition-colors">Politique des Cookies</a>
              <a href="#" className="text-gray-400 hover:text-orange-500 transition-colors">Accessibilité</a>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
};

window.Footer = Footer;
})();