(function() {
const { useState: useStateHotel } = React;
const { MapPin: MapPinHotel, Phone: PhoneHotel, Mail: MailHotel, Star: StarHotel, Calendar: CalendarHotel, Users: UsersHotel, Check: CheckHotel, ExternalLink: ExternalLinkHotel, Car: CarHotel } = window;

const Hotel = () => {
  const [selectedHotel, setSelectedHotel] = useStateHotel('creole');

  const hotels = [
    {
      id: 'creole',
      name: 'La Créole Beach Hôtel & SPA',
      category: 'Hôtel Principal du Festival',
      rating: 4,
      image: 'https://images.pexels.com/photos/258154/pexels-photo-258154.jpeg?auto=compress&cs=tinysrgb&w=1200&h=800&fit=crop',
      location: 'Pointe de la Verdure, Le Gosier',
      description: 'Hôtel emblématique de la Guadeloupe, La Créole Beach est le lieu principal du GSM 2025. Cet établissement 4 étoiles offre un cadre tropical exceptionnel.',
      features: [
        'Plage privée de sable blanc',
        'SPA avec soins créoles',
        'Piscine avec vue mer',
        'Restaurant gastronomique',
        'Bar lounge en bord de mer',
        'Salles de conférence',
        'Wifi gratuit',
        'Parking gratuit',
        'Navette aéroport',
        'Service de conciergerie'
      ],
      contact: { phone: '+590 590 90 46 46', email: 'reservation@creolebeach.com', website: 'www.creolebeach.com' },
      advantages: [
        'Lieu principal des événements GSM 2025',
        'Accès direct aux ateliers et spectacles',
        'Tarifs préférentiels pour les festivaliers',
        'Possibilité de navettes gratuites vers le CBC (ex. CWTC)'
      ],
      rooms: []
    },
    {
      id: 'canella',
      name: 'Hôtel Canella Beach',
      category: 'Hôtel Partenaire',
      rating: 3,
      image: 'https://images.pexels.com/photos/1134176/pexels-photo-1134176.jpeg?auto=compress&cs=tinysrgb&w=1200&h=800&fit=crop',
      location: 'Pointe de la Verdure, Le Gosier',
      description: "Hôtel de charme situé à proximité immédiate de La Créole Beach, le Canella Beach offre un hébergement confortable dans un cadre tropical authentique. Idéal pour les festivaliers recherchant un excellent rapport qualité-prix.",
      features: [
        'Plage de sable blanc à 50m',
        'Piscine tropicale',
        'Restaurant créole',
        'Bar avec terrasse',
        'Wifi gratuit',
        'Parking gratuit',
        'Climatisation',
        'Coffre-fort',
        'Service de ménage quotidien'
      ],
      contact: { phone: '+590 590 90 44 00', email: 'info@canellabeach.com', website: 'www.canellabeach.com' },
      advantages: [
        'À 2 minutes à pied de La Créole Beach',
        'Tarifs avantageux pour les participants GSM',
        'Possibilité de navettes gratuites vers le CBC (ex. CWTC)',
        'Ambiance familiale et conviviale'
      ],
      rooms: []
    }
  ];

  const selectedHotelData = hotels.find(hotel => hotel.id === selectedHotel);

  return (
    <section id="hotel" 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-16">
          <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">Hébergement 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-3xl sm:text-5xl lg:text-7xl font-black text-white mb-8 leading-tight px-4">
            NOS HÔTELS
            <br />
            <span className="bg-gradient-to-r from-orange-500 to-red-500 bg-clip-text text-transparent">
              PARTENAIRES
            </span>
          </h2>
          <p className="text-base sm:text-xl text-gray-300 max-w-4xl mx-auto leading-relaxed px-4">
            Séjournez dans nos hôtels partenaires situés au cœur de l'action, sur la magnifique
            Pointe de la Verdure au Gosier. Profitez de tarifs préférentiels et d'un accès privilégié
            aux événements du festival.
          </p>
        </div>

        {/* Hotel Selector */}
        <div className="flex justify-center mb-16">
          <div className="bg-black/50 backdrop-blur-xl rounded-2xl p-2 border border-orange-500/20 mx-4 w-full max-w-4xl">
            {hotels.map((hotel) => (
              <button
                key={hotel.id}
                onClick={() => setSelectedHotel(hotel.id)}
                className={`px-3 sm:px-8 py-3 sm:py-4 rounded-xl font-semibold transition-all duration-300 text-xs sm:text-base w-full sm:w-auto ${
                  selectedHotel === hotel.id
                    ? 'bg-gradient-to-r from-orange-500 to-red-500 text-white shadow-lg transform scale-105'
                    : 'text-gray-300 hover:text-white hover:bg-white/10'
                }`}
              >
                <div className="text-center px-1">
                  <div className="font-bold text-sm sm:text-lg leading-tight">{hotel.name}</div>
                  <div className="text-xs sm:text-sm opacity-80 mt-1">{hotel.category}</div>
                </div>
              </button>
            ))}
          </div>
        </div>

        {selectedHotelData && (
          <div className="max-w-6xl mx-auto px-4">
            <div className="bg-gradient-to-br from-gray-900/50 to-black/50 backdrop-blur-xl rounded-3xl overflow-hidden border border-orange-500/20 mb-8">
              <div className="relative">
                <img src={selectedHotelData.image} alt={selectedHotelData.name} className="w-full h-80 object-cover" />
                <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
                <div className="absolute bottom-0 left-0 right-0 p-4 sm:p-8">
                  <div className="flex items-start justify-between">
                    <div>
                      <div className="flex items-center gap-2 mb-2">
                        {[...Array(selectedHotelData.rating)].map((_, i) => (
                          <StarHotel key={i} className="h-5 w-5 text-orange-500 fill-current" />
                        ))}
                        <span className="text-orange-500 font-semibold ml-2">{selectedHotelData.category}</span>
                      </div>
                      <h3 className="text-2xl sm:text-4xl font-black text-white mb-2 leading-tight">{selectedHotelData.name}</h3>
                      <div className="flex items-center gap-2 text-gray-300">
                        <MapPinHotel className="h-4 w-4" />
                        <span className="text-sm sm:text-base">{selectedHotelData.location}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div className="grid lg:grid-cols-2 gap-6 sm:gap-8">
              <div className="space-y-8">
                <div className="bg-gradient-to-br from-gray-900/50 to-black/50 backdrop-blur-xl rounded-2xl p-4 sm:p-6 border border-orange-500/20">
                  <h4 className="text-xl sm:text-2xl font-bold text-white mb-4">Description</h4>
                  <p className="text-sm sm:text-base text-gray-300 leading-relaxed mb-6">{selectedHotelData.description}</p>
                  <h5 className="text-lg sm:text-xl font-bold text-white mb-4">Équipements & Services</h5>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    {selectedHotelData.features.map((feature, index) => (
                      <div key={index} className="flex items-center gap-2">
                        <CheckHotel className="h-4 w-4 text-orange-500 flex-shrink-0" />
                        <span className="text-gray-300 text-xs sm:text-sm">{feature}</span>
                      </div>
                    ))}
                  </div>
                </div>
                <div className="bg-gradient-to-br from-orange-500/10 to-red-500/10 backdrop-blur-xl rounded-2xl p-4 sm:p-6 border border-orange-500/30">
                  <h4 className="text-xl sm:text-2xl font-bold text-white mb-4 flex items-center gap-2">
                    <StarHotel className="h-6 w-6 text-orange-500" />
                    Avantages Festival
                  </h4>
                  <ul className="space-y-3">
                    {selectedHotelData.advantages.map((advantage, index) => (
                      <li key={index} className="flex items-start gap-3">
                        <div className="w-2 h-2 bg-orange-500 rounded-full mt-2 flex-shrink-0"></div>
                        <span className="text-gray-300 text-sm sm:text-base">{advantage}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>

              <div className="space-y-8">
                <div className="bg-gradient-to-br from-gray-900/50 to-black/50 backdrop-blur-xl rounded-2xl p-4 sm:p-6 border border-orange-500/20">
                  <h4 className="text-xl sm:text-2xl font-bold text-white mb-6">Chambres & Tarifs</h4>
                  <div className="space-y-4">
                    {selectedHotelData.rooms.map((room, index) => (
                      <div key={index} className="bg-black/30 rounded-xl p-4 border border-gray-700/50">
                        <div className="flex justify-between items-start mb-3">
                          <div>
                            <h5 className="text-base sm:text-lg font-bold text-white">{room.type}</h5>
                            <div className="flex items-center gap-2 text-gray-400 text-sm">
                              <UsersHotel className="h-4 w-4" />
                              <span>{room.capacity}</span>
                            </div>
                          </div>
                          <div className="text-right">
                            <div className="text-xl sm:text-2xl font-black text-orange-500">{room.price}</div>
                            <div className="text-gray-400 text-sm">par nuit</div>
                          </div>
                        </div>
                        <p className="text-gray-300 text-xs sm:text-sm">{room.description}</p>
                      </div>
                    ))}
                  </div>
                  <div className="mt-6 p-4 bg-gradient-to-r from-orange-500/20 to-red-500/20 rounded-xl border border-orange-500/30">
                    <div className="flex items-center gap-2 mb-2">
                      <CalendarHotel className="h-4 w-4 text-orange-500" />
                      <span className="text-orange-500 font-semibold text-sm">Dates du Festival</span>
                    </div>
                    <p className="text-white font-bold">6-9 Novembre 2025</p>
                    <p className="text-gray-300 text-sm">Réservation recommandée dès maintenant</p>
                  </div>
                </div>

                <div className="bg-gradient-to-br from-gray-900/50 to-black/50 backdrop-blur-xl rounded-2xl p-4 sm:p-6 border border-orange-500/20">
                  <h4 className="text-xl sm:text-2xl font-bold text-white mb-6">Contact & Réservation</h4>
                  <div className="space-y-4">
                    <div className="flex items-center gap-3">
                      <PhoneHotel className="h-5 w-5 text-orange-500" />
                      <span className="text-white font-semibold text-sm sm:text-base break-all">{selectedHotelData.contact.phone}</span>
                    </div>
                    <div className="flex items-center gap-3">
                      <MailHotel className="h-5 w-5 text-orange-500" />
                      <span className="text-white font-semibold text-sm sm:text-base break-all">{selectedHotelData.contact.email}</span>
                    </div>
                    <div className="flex items-center gap-3">
                      <ExternalLinkHotel className="h-5 w-5 text-orange-500" />
                      <span className="text-white font-semibold text-sm sm:text-base break-all">{selectedHotelData.contact.website}</span>
                    </div>
                    {selectedHotel === 'canella' && (
                      <div className="mt-4 p-3 bg-gradient-to-r from-orange-500/20 to-red-500/20 rounded-xl border border-orange-500/30">
                        <p className="text-orange-400 font-semibold text-xs sm:text-sm">
                          💡 Préciser le code promo <span className="text-orange-300 font-bold">Salsa</span> lors de la réservation
                        </p>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </div>

            <div className="mt-12 bg-gradient-to-br from-gray-900/50 to-black/50 backdrop-blur-xl rounded-2xl p-4 sm:p-8 border border-orange-500/20">
              <h4 className="text-xl sm:text-2xl font-bold text-white mb-6 text-center">Informations Importantes</h4>
              <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 text-center">
                <div>
                  <div className="w-16 h-16 bg-gradient-to-r from-orange-500 to-red-500 rounded-full flex items-center justify-center mx-auto mb-4">
                    <CalendarHotel className="h-8 w-8 text-white" />
                  </div>
                  <h5 className="text-base sm:text-lg font-bold text-white mb-2">Réservation Anticipée</h5>
                  <p className="text-gray-300 text-xs sm:text-sm">Réservez dès maintenant pour bénéficier des meilleurs tarifs et garantir votre hébergement.</p>
                </div>
                <div>
                  <div className="w-16 h-16 bg-gradient-to-r from-red-500 to-pink-500 rounded-full flex items-center justify-center mx-auto mb-4">
                    <CarHotel className="h-8 w-8 text-white" />
                  </div>
                  <h5 className="text-base sm:text-lg font-bold text-white mb-2">Transport Inclus</h5>
                  <p className="text-gray-300 text-xs sm:text-sm">Navettes gratuites entre les hôtels et le CBC (ex. CWTC).</p>
                </div>
                <div>
                  <div className="w-16 h-16 bg-gradient-to-r from-pink-500 to-purple-500 rounded-full flex items-center justify-center mx-auto mb-4">
                    <StarHotel className="h-8 w-8 text-white" />
                  </div>
                  <h5 className="text-base sm:text-lg font-bold text-white mb-2">Tarifs Préférentiels</h5>
                  <p className="text-gray-300 text-xs sm:text-sm">Bénéficiez de tarifs spéciaux négociés exclusivement pour les participants du GSM 2025.</p>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </section>
  );
};

window.Hotel = Hotel;
})();