(function() {
const { Music: MusicAbout, Award: AwardAbout, Globe: GlobeAbout, Heart: HeartAbout } = window;

const About = () => {
  const stats = [
    { icon: MusicAbout, number: '10+', label: 'Artistes Internationaux', color: 'from-orange-500 to-red-500' },
    { icon: AwardAbout, number: '800+', label: 'Danseurs Passionnés', color: 'from-red-500 to-pink-500' },
    { icon: GlobeAbout, number: '7', label: 'Pays Représentés', color: 'from-pink-500 to-purple-500' },
    { icon: HeartAbout, number: '4', label: 'Jours de Festivités', color: 'from-purple-500 to-blue-500' }
  ];

  return (
    <section id="about" className="py-32 bg-gradient-to-b from-black via-gray-900 to-black relative overflow-hidden">
      {/* Background Elements */}
      <div className="absolute inset-0">
        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-orange-500/10 rounded-full blur-3xl"></div>
        <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-red-500/10 rounded-full blur-3xl"></div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div className="text-center mb-20">
          <div className="inline-block mb-6">
            <span className="text-orange-500 text-lg font-bold tracking-[0.3em] uppercase">A Propos du GSM 2025</span>
            <div className="w-24 h-1 bg-gradient-to-r from-orange-500 to-red-500 mx-auto mt-2"></div>
          </div>
          <h2 className="text-5xl sm:text-7xl font-black text-white mb-8 leading-tight">
            LE FESTIVAL SALSA
            <br />
            <span className="bg-gradient-to-r from-orange-500 to-red-500 bg-clip-text text-transparent">
              #1 DES ANTILLES
            </span>
          </h2>
          <p className="text-xl text-gray-300 max-w-4xl mx-auto leading-relaxed font-light">
            Depuis sa création, le Guadeloupe Salsamania Meeting est un événement incontournable de la salsa dans les Caraïbes et singulièrement de la guadeloupe.
            Ce festival unique rassemble les plus grands artistes de salsa, bachata et musiques latines avec des danseurs passionnés
            venus du monde entier, dans le cadre paradisiaque de la Guadeloupe.
          </p>
        </div>

        {/* Stats Grid */}
        <div className="grid md:grid-cols-4 gap-8 mb-20">
          {stats.map((stat, index) => (
            <div key={index} className="group text-center">
              <div className="relative mb-6">
                <div className={`w-24 h-24 mx-auto rounded-full bg-gradient-to-r ${stat.color} p-0.5 group-hover:scale-110 transition-transform duration-300`}>
                  <div className="w-full h-full bg-black rounded-full flex items-center justify-center">
                    <stat.icon className="h-10 w-10 text-white" />
                  </div>
                </div>
              </div>
              <h3 className="text-5xl font-black text-white mb-2 group-hover:text-orange-500 transition-colors">
                {stat.number}
              </h3>
              <p className="text-gray-400 font-medium tracking-wide">{stat.label}</p>
            </div>
          ))}
        </div>

        {/* Feature Cards */}
        <div className="grid lg:grid-cols-3 gap-8">
          <div className="group bg-gradient-to-br from-gray-900/50 to-black/50 backdrop-blur-xl rounded-3xl p-8 border border-orange-500/20 hover:border-orange-500/40 transition-all duration-500 hover:transform hover:scale-105">
            <div className="w-16 h-16 bg-gradient-to-r from-orange-500 to-red-500 rounded-2xl flex items-center justify-center mb-6 group-hover:rotate-6 transition-transform duration-300">
              <MusicAbout className="h-8 w-8 text-white" />
            </div>
            <h3 className="text-2xl font-bold text-white mb-4">Programmation Exceptionnelle</h3>
            <p className="text-gray-300 leading-relaxed">
              Découvrez les performances des meilleurs orchestres de salsa, bachata et musiques latines,
              avec des concerts live et des shows spectaculaires sur plusieurs scènes.
            </p>
          </div>

          <div className="group bg-gradient-to-br from-gray-900/50 to-black/50 backdrop-blur-xl rounded-3xl p-8 border border-red-500/20 hover:border-red-500/40 transition-all duration-500 hover:transform hover:scale-105">
            <div className="w-16 h-16 bg-gradient-to-r from-red-500 to-pink-500 rounded-2xl flex items-center justify-center mb-6 group-hover:rotate-6 transition-transform duration-300">
              <GlobeAbout className="h-8 w-8 text-white" />
            </div>
            <h3 className="text-2xl font-bold text-white mb-4">Communauté Internationale</h3>
            <p className="text-gray-300 leading-relaxed">
              Rejoignez des danseurs passionnés venus de plus d'une dizaine de pays pour célébrer la richesse
              de la culture latine dans le cadre enchanteur de la Guadeloupe, jouyau des Antilles françaises.
            </p>
          </div>

          <div className="group bg-gradient-to-br from-gray-900/50 to-black/50 backdrop-blur-xl rounded-3xl p-8 border border-pink-500/20 hover:border-pink-500/40 transition-all duration-500 hover:transform hover:scale-105">
            <div className="w-16 h-16 bg-gradient-to-r from-pink-500 to-purple-500 rounded-2xl flex items-center justify-center mb-6 group-hover:rotate-6 transition-transform duration-300">
              <AwardAbout className="h-8 w-8 text-white" />
            </div>
            <h3 className="text-2xl font-bold text-white mb-4">Expérience Tropicale</h3>
            <p className="text-gray-300 leading-relaxed">
              Vivez une expérience unique alliant passion de la danse, musique envoûtante et
              beauté naturelle de la Guadeloupe, avec des activités et excursions exceptionnelles.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

window.About = About;
})();