(function() {
const { Award: AwardPartners, MapPin: MapPinPartners, Building: BuildingPartners, Star: StarPartners, Crown: CrownPartners, Globe: GlobePartners } = window;

const Partners = () => {
  const officialSponsors = [
    {
      name: 'La Créole Beach Hôtel & SPA',
      description: 'Hôtel principal du festival - Lieu emblématique du GSM 2025',
      logo: 'https://i.postimg.cc/28gxFhgB/Creole-Beach.jpg',
      type: 'venue',
      website: 'www.creolebeach.com'
    },
    {
      name: 'Caribbean Business Center',
      description: 'Centre de congrès principal du festival',
      logo: 'https://i.postimg.cc/ZKWcdV7G/CBC.jpg',
      type: 'venue',
      website: 'https://www.facebook.com/CCIGuadeloupe/'
    },
    {
      name: 'Air Caraïbes',
      description: 'Compagnie aérienne partenaire officielle',
      logo: 'https://i.postimg.cc/9FDp7J8J/Air-Caraibes.png',
      type: 'transport',
      website: 'www.aircaraibes.com'
    }
  ];

  const otherPartners = [
    {
      category: 'Hôtels Partenaires',
      icon: BuildingPartners,
      color: 'from-blue-500 to-cyan-500',
      items: [
        { name: 'La Canella Beach', description: 'Hôtel partenaire', logo: 'https://i.postimg.cc/PrC4w23V/Canella-Beach.jpg', type: 'hotel' }
      ]
    },
    {
      category: 'Partenaires Institutionnels',
      icon: AwardPartners,
      color: 'from-purple-500 to-pink-500',
      items: [
        { name: 'Comité du Tourisme des Îles de Guadeloupe', description: 'Partenaire officiel du tourisme', logo: 'https://i.postimg.cc/y89yfWzX/CTIG-Fond-clair.png', type: 'institutional' },
        { name: 'Aéroport International Guadeloupe Maryse Condé', description: 'Aéroport international de la Guadeloupe', logo: 'https://i.postimg.cc/tRSkJL5m/A-roport-Maryse-Cond.png', type: 'transport' },
        { name: 'CCI Îles de Guadeloupe', description: "Chambre de Commerce et d'Industrie", logo: 'https://i.postimg.cc/tC8ztW8g/CCI-IG-bleu-WEB-Simple.png', type: 'institutional' },
        { name: 'Ville de baie-Mahault', description: 'Ville de Baie-Mahault', logo: 'https://i.postimg.cc/x1rKbYbC/Ville-de-baie-mahault-1024x1024.png', type: 'institutional' },
        { name: 'Fédération Française de Danse', description: 'Fédération officielle de la danse', logo: 'https://i.postimg.cc/zfrS45JP/F-d-ration.jpg', type: 'institutional' }
      ]
    },
    {
      category: 'Partenaires Communication',
      icon: GlobePartners,
      color: 'from-indigo-500 to-blue-500',
      items: [
        { name: 'Guadeloupe La 1ère', description: 'Télévision publique de Guadeloupe', logo: 'https://i.postimg.cc/sXnYBh5k/Guadeloupe-1re-TV-svg.png', type: 'media' },
        { name: 'RCI Guadeloupe', description: 'Radio Caraïbes International', logo: 'https://i.postimg.cc/wxG5gDqZ/RCI-2020.png', type: 'media' }
      ]
    },
    {
      category: 'Partenaires Éducatifs',
      icon: GlobePartners,
      color: 'from-green-500 to-teal-500',
      items: [
        { name: 'Lycée Chevalier de Saint-Georges', description: "Établissement d'enseignement partenaire", logo: 'https://i.postimg.cc/qMNL3jDv/Chevalier-St-Georges.jpg', type: 'educational' },
        { name: 'Université des Antilles', description: 'Partenaire académique', logo: 'https://i.postimg.cc/kXRQ4DDm/Universit-des-Antilles-logo-RVB.png', type: 'institutional' }
      ]
    },
    {
      category: 'Partenaires Services',
      icon: MapPinPartners,
      color: 'from-yellow-500 to-orange-500',
      items: [
        { name: 'Hertz', description: 'Location de véhicules partenaire', logo: 'https://i.postimg.cc/GtHkvmQt/Hertz-No-Bkgrnd-H-Primary-Logo-Black-Yellow-Line-RGB.png', type: 'services' },
        { name: 'Karauto', description: 'Concessionnaire automobile', logo: 'https://i.postimg.cc/5yT8gW7Z/Karu-Auto.jpg', type: 'services' }
      ]
    }
  ];

  return (
    <section id="partners" className="py-32 bg-gradient-to-b from-black via-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 relative z-10">
        <div className="text-center mb-20">
          <div className="inline-block mb-6">
            <span className="text-orange-500 text-sm sm:text-lg font-bold tracking-[0.2em] sm:tracking-[0.3em] uppercase">Nos Partenaires</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-3xl sm:text-5xl lg:text-7xl font-black text-white mb-8 leading-tight px-4">
            ILS NOUS
            <br />
            <span className="bg-gradient-to-r from-orange-500 to-red-500 bg-clip-text text-transparent">
              FONT CONFIANCE
            </span>
          </h2>
          <p className="text-base sm:text-xl text-gray-300 max-w-4xl mx-auto leading-relaxed px-4">
            Le GSM 2025 est rendu possible grâce au soutien de nos partenaires prestigieux
            qui partagent notre passion pour la culture latine et l'excellence événementielle.
          </p>
        </div>

        {/* SPONSORS OFFICIELS */}
        <div className="mb-24">
          <div className="text-center mb-16">
            <div className="inline-flex items-center gap-2 sm:gap-3 bg-gradient-to-r from-orange-500/20 to-red-500/20 backdrop-blur-xl rounded-2xl px-4 sm:px-8 py-3 sm:py-4 border-2 border-orange-500/40 mb-8 mx-4">
              <CrownPartners className="h-8 w-8 text-orange-500" />
              <h3 className="text-2xl sm:text-4xl font-black text-white text-center">SPONSORS OFFICIELS</h3>
              <CrownPartners className="h-8 w-8 text-orange-500" />
            </div>
            <p className="text-sm sm:text-lg text-gray-300 max-w-2xl mx-auto px-4">
              Nos partenaires stratégiques qui rendent possible cette expérience exceptionnelle
            </p>
          </div>

          <div className="grid sm:grid-cols-1 lg:grid-cols-2 gap-8 sm:gap-12 max-w-5xl mx-auto px-4">
            {officialSponsors.map((sponsor, index) => (
              <div
                key={index}
                className="group relative bg-gradient-to-br from-orange-500/10 via-red-500/10 to-pink-500/10 backdrop-blur-xl rounded-3xl p-4 sm:p-8 border-2 border-orange-500/30 hover:border-orange-500/60 transition-all duration-500 hover:transform hover:scale-105 shadow-2xl hover:shadow-orange-500/20"
              >
                <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
                  <div className="bg-gradient-to-r from-orange-500 to-red-600 px-3 sm:px-6 py-2 rounded-full flex items-center gap-2 shadow-lg">
                    <StarPartners className="h-4 w-4 text-white fill-current" />
                    <span className="text-white font-bold text-xs sm:text-sm">SPONSOR OFFICIEL</span>
                    <StarPartners className="h-4 w-4 text-white fill-current" />
                  </div>
                </div>
                <div className="mb-6 sm:mb-8 flex items-center justify-center pt-6">
                  <div className="bg-white rounded-3xl p-4 sm:p-8 shadow-2xl group-hover:shadow-orange-500/30 transition-all duration-300 transform group-hover:scale-105 w-full max-w-xs">
                    <img
                      src={sponsor.logo}
                      alt={sponsor.name}
                      className="max-h-16 sm:max-h-24 max-w-full object-contain mx-auto"
                      onError={(e) => { e.target.style.display = 'none'; }}
                    />
                  </div>
                </div>
                <div className="text-center">
                  <h4 className="text-lg sm:text-2xl font-black text-white mb-4 group-hover:text-orange-500 transition-colors leading-tight">{sponsor.name}</h4>
                  <p className="text-gray-300 text-sm sm:text-lg leading-relaxed mb-6">{sponsor.description}</p>
                  <div className="text-orange-400 font-semibold text-xs sm:text-sm break-all">{sponsor.website}</div>
                </div>
                <div className="absolute top-4 right-4 w-6 h-6 bg-gradient-to-r from-orange-500 to-red-500 rounded-full opacity-20 group-hover:opacity-40 transition-opacity"></div>
                <div className="absolute bottom-4 left-4 w-4 h-4 bg-gradient-to-r from-red-500 to-pink-500 rounded-full opacity-20 group-hover:opacity-40 transition-opacity"></div>
              </div>
            ))}
          </div>
        </div>

        {/* AUTRES PARTENAIRES */}
        <div className="space-y-20">
          <div className="text-center mb-16">
            <div className="inline-flex items-center gap-2 sm:gap-3 bg-gradient-to-r from-gray-800/50 to-black/50 backdrop-blur-xl rounded-2xl px-4 sm:px-6 py-3 border border-gray-600/30 mb-6 mx-4">
              <BuildingPartners className="h-6 w-6 text-gray-400" />
              <h3 className="text-lg sm:text-2xl font-bold text-gray-300">AUTRES PARTENAIRES</h3>
            </div>
          </div>

          {otherPartners.map((category, categoryIndex) => (
            <div key={categoryIndex}>
              <div className="text-center mb-12">
                <div className="flex items-center justify-center gap-2 sm:gap-3 mb-4 px-4">
                  <div className={`w-10 h-10 rounded-full bg-gradient-to-r ${category.color} flex items-center justify-center`}>
                    <category.icon className="h-5 w-5 text-white" />
                  </div>
                  <h4 className="text-lg sm:text-2xl font-bold text-white text-center">{category.category}</h4>
                </div>
              </div>
              <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 justify-items-center px-4">
                {category.items.map((partner, partnerIndex) => (
                  <div
                    key={partnerIndex}
                    className="group bg-gradient-to-br from-gray-900/50 to-black/50 backdrop-blur-xl rounded-2xl p-4 sm:p-6 border border-gray-700/30 hover:border-gray-600/50 transition-all duration-500 hover:transform hover:scale-105 max-w-sm w-full"
                  >
                    <div className="mb-6 flex items-center justify-center">
                      <div className="bg-white rounded-xl p-3 sm:p-4 shadow-lg group-hover:shadow-gray-500/20 transition-all duration-300 w-full max-w-[200px]">
                        <img
                          src={partner.logo}
                          alt={partner.name}
                          className="max-h-12 sm:max-h-16 max-w-full object-contain mx-auto"
                          onError={(e) => { e.target.style.display = 'none'; }}
                        />
                      </div>
                    </div>
                    <div className="text-center">
                      <h5 className="text-sm sm:text-lg font-bold text-white mb-3 group-hover:text-gray-300 transition-colors leading-tight">{partner.name}</h5>
                      <p className="text-gray-400 text-xs sm:text-sm leading-relaxed">{partner.description}</p>
                    </div>
                    <div className="mt-4 flex justify-center">
                      <span className={`px-3 py-1 rounded-full text-xs font-semibold bg-gradient-to-r ${category.color} text-white`}>
                        {partner.type === 'venue' && 'Lieu'}
                        {partner.type === 'hotel' && 'Hébergement'}
                        {partner.type === 'transport' && 'Transport'}
                        {partner.type === 'institutional' && 'Institutionnel'}
                        {partner.type === 'educational' && 'Éducatif'}
                        {partner.type === 'services' && 'Services'}
                        {partner.type === 'media' && 'Média'}
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>

        <div className="text-center mt-24">
          <div className="bg-gradient-to-r from-gray-900/50 to-black/50 backdrop-blur-xl rounded-3xl p-4 sm:p-8 border border-orange-500/20 max-w-4xl mx-auto">
            <h3 className="text-xl sm:text-3xl font-bold text-white mb-4">Vous souhaitez devenir partenaire ?</h3>
            <p className="text-gray-300 mb-6 text-sm sm:text-lg px-4">
              Rejoignez-nous pour faire du GSM 2025 un événement exceptionnel et bénéficiez
              d'une visibilité unique auprès de notre communauté internationale.
            </p>
            <button className="bg-gradient-to-r from-orange-500 to-red-600 px-6 sm:px-8 py-3 sm:py-4 rounded-full text-white font-bold text-sm sm:text-lg hover:from-orange-600 hover:to-red-700 transform hover:scale-105 transition-all duration-300 shadow-2xl hover:shadow-orange-500/25">
              Devenir Partenaire
            </button>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Partners = Partners;
})();