(function() {
const { useState: useStateSchedule } = React;
const { Clock: ClockSched, MapPin: MapPinSched, Calendar: CalendarSched, Music: MusicSched } = window;

const Schedule = () => {
  const [selectedDay, setSelectedDay] = useStateSchedule('thursday');

  const days = [
    { id: 'thursday', label: 'Jeudi',    date: '6 Nov', color: 'from-orange-500 to-red-500' },
    { id: 'friday',   label: 'Vendredi', date: '7 Nov', color: 'from-red-500 to-pink-500' },
    { id: 'saturday', label: 'Samedi',   date: '8 Nov', color: 'from-pink-500 to-purple-500' },
    { id: 'sunday',   label: 'Dimanche', date: '9 Nov', color: 'from-purple-500 to-blue-500' }
  ];

  const scheduleData = {
    thursday: [
      { time: '18:00', artist: "Cérémonie d'Ouverture du Festival", stage: 'Créole Beach Hôtel & SPA', type: 'special', image: 'https://i.postimg.cc/mgv8T7MX/Logo-GSM2025.png' },
      { time: '18:30', artist: 'Ouverture de la Soirée des Partenaires', stage: 'Créole Beach Hôtel & SPA', type: 'Animation', image: 'https://i.postimg.cc/mgv8T7MX/Logo-GSM2025.png' },
      { time: '20:30', artist: 'Présentation des artistes & DJ', stage: 'Créole Beach Hôtel & SPA', type: 'performance', image: 'https://i.postimg.cc/mgv8T7MX/Logo-GSM2025.png' },
      { time: '21:00', artist: 'Soirée dansante', stage: 'Créole Beach Hôtel & SPA', type: 'performance', image: 'https://i.postimg.cc/mgv8T7MX/Logo-GSM2025.png' }
    ],
    friday: [
      { time: '09:00', artist: 'Ateliers de danses latines', stage: 'Créole Beach Hôtel & SPA', type: 'workshop', duration: '9h à 11h30', description: "Atelier #1 : Classe Ulis\nAtelier #2 : Association Libellule (personnes en situation de handicap)\nAtelier #3 : Cours de Quadrille", image: 'https://i.postimg.cc/mgv8T7MX/Logo-GSM2025.png' },
      { time: '12:00', artist: 'Conférence thématique "Professionalisation des arts de la danse"', stage: 'Créole Beach Hôtel & SPA', type: 'conference', duration: '12h à 14h', description: "Conférence sur la professionnalisation et les enjeux des arts de la danse dans le secteur culturel\n\nIntervenants :\n\n- M. Didier Galvani : Directeur de l'école de danse Salsabor de Paris et administrateur de la FFD\n\n- Mme Idania Miranda Cruz : Professeure diplômée de danse de l'Ecole Professionnelle d'Instructeurs des Arts Carlos Hidalgo de Pinar del Rio, et de danses folkloriques cubaines au Centre Supérieur d'Enseignement Artistique de Cuba\n\n- Simone Texeraud : Directrice de l'École de Danse Scherer avec l'Association Format'Danse, centre de formation dédié aux enseignants en danse classique, jazz et contemporaine.\n", image: 'https://i.postimg.cc/mgv8T7MX/Logo-GSM2025.png' },
      { time: '14:00', artist: 'Ateliers de danse', stage: 'Créole Beach Hôtel & SPA', type: 'workshop', image: 'https://i.postimg.cc/mgv8T7MX/Logo-GSM2025.png' },
      { time: '20:00', artist: 'Ouverture des portes', stage: 'Caribbean Business Center (CBC) - ex. CWTC', type: 'performance', image: 'https://i.postimg.cc/mgv8T7MX/Logo-GSM2025.png' },
      { time: '20:30', artist: 'Spectacle Scénique', stage: 'Caribbean Business Center (CBC) - ex. CWTC', type: 'performance', image: 'https://i.postimg.cc/mgv8T7MX/Logo-GSM2025.png' },
      { time: '22:00', artist: 'Soirée Dansante', stage: 'Caribbean Business Center (CBC) - ex. CWTC', type: 'social dancing', image: 'https://i.postimg.cc/mgv8T7MX/Logo-GSM2025.png' }
    ],
    saturday: [
      { time: '9:00',  artist: 'Ateliers de danse', stage: 'Créole Beach Hôtel & SPA', type: 'workshop', image: 'https://i.postimg.cc/mgv8T7MX/Logo-GSM2025.png' },
      { time: '14:00', artist: 'Ateliers de danse', stage: 'Créole Beach Hôtel & SPA', type: 'workshop', image: 'https://i.postimg.cc/mgv8T7MX/Logo-GSM2025.png' },
      { time: '20:00', artist: 'Ouverture des portes', stage: 'Caribbean Business Center (CBC) - ex. CWTC', type: 'performance', image: 'https://i.postimg.cc/mgv8T7MX/Logo-GSM2025.png' },
      { time: '20:30', artist: 'Spectacle Scénique', stage: 'Caribbean Business Center (CBC) - ex. CWTC', type: 'Performance', image: 'https://i.postimg.cc/mgv8T7MX/Logo-GSM2025.png' },
      { time: '22:00', artist: 'Soirée Dansante', stage: 'Caribbean Business Center (CBC) - ex. CWTC', type: 'social dancing', image: 'https://i.postimg.cc/mgv8T7MX/Logo-GSM2025.png' }
    ],
    sunday: [
      { time: '9:00',  artist: 'Ateliers de danse', stage: 'Créole Beach Hôtel & SPA', type: 'workshop', image: 'https://i.postimg.cc/mgv8T7MX/Logo-GSM2025.png' },
      { time: '14:00', artist: 'Beach Party', stage: 'Créole Beach Hôtel & SPA', type: 'special', image: 'https://i.postimg.cc/mgv8T7MX/Logo-GSM2025.png' },
      { time: '18:00', artist: 'Soirée Dansante', stage: 'Créole Beach Hôtel & SPA', type: 'social dancing', image: 'https://i.postimg.cc/mgv8T7MX/Logo-GSM2025.png' }
    ]
  };

  const getEventTypeColor = (type) => {
    switch (type) {
      case 'headliner':    return 'from-orange-500 to-red-500';
      case 'performance':  return 'from-blue-500 to-purple-500';
      case 'workshop':     return 'from-green-500 to-teal-500';
      case 'special':      return 'from-pink-500 to-purple-500';
      default:             return 'from-gray-500 to-gray-600';
    }
  };

  const getStageColor = (stage) => {
    switch (stage) {
      case 'Scène Principale':    return 'bg-gradient-to-r from-orange-500 to-red-500';
      case 'Scène Caraïbes':      return 'bg-gradient-to-r from-blue-500 to-cyan-500';
      case 'Scène Tropicale':     return 'bg-gradient-to-r from-green-500 to-teal-500';
      case 'Scène Fusion':        return 'bg-gradient-to-r from-purple-500 to-pink-500';
      case 'Scène Dominicaine':   return 'bg-gradient-to-r from-red-500 to-orange-500';
      case 'Espace Formation':    return 'bg-gradient-to-r from-indigo-500 to-purple-500';
      case 'Scène Compétition':   return 'bg-gradient-to-r from-yellow-500 to-orange-500';
      case 'Terrasse Panoramique':return 'bg-gradient-to-r from-teal-500 to-blue-500';
      default:                    return 'bg-gradient-to-r from-gray-500 to-gray-600';
    }
  };

  return (
    <section id="schedule" className="py-16 sm: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 right-1/4 w-96 h-96 bg-orange-500/5 rounded-full blur-3xl"></div>
        <div className="absolute bottom-1/4 left-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-12 sm:mb-16">
          <div className="inline-block mb-6">
            <span className="text-orange-500 text-sm sm:text-lg font-bold tracking-[0.3em] uppercase">Programme Événement</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">
            4 JOURS DE
            <br />
            <span className="bg-gradient-to-r from-orange-500 to-red-500 bg-clip-text text-transparent">
              PASSION LATINE
            </span>
          </h2>
        </div>

        {/* Day Selector */}
        <div className="flex justify-center mb-12 sm:mb-16 overflow-x-auto">
          <div className="bg-black/50 backdrop-blur-xl rounded-2xl p-2 border border-orange-500/20 min-w-max">
            <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
              {days.map((day) => (
                <button
                  key={day.id}
                  onClick={() => setSelectedDay(day.id)}
                  className={`px-4 sm:px-8 py-3 sm:py-4 rounded-xl font-semibold transition-all duration-300 whitespace-nowrap ${
                    selectedDay === day.id
                      ? `bg-gradient-to-r ${day.color} text-white shadow-lg transform scale-105`
                      : 'text-gray-300 hover:text-white hover:bg-white/10'
                  }`}
                >
                  <div className="flex flex-col sm:flex-row items-center gap-1 sm:gap-2">
                    <CalendarSched className="h-3 w-3 sm:h-4 sm:w-4" />
                    <div>
                      <div className="text-sm sm:text-lg font-bold">{day.label}</div>
                      <div className="text-xs sm:text-sm opacity-80">{day.date}</div>
                    </div>
                  </div>
                </button>
              ))}
            </div>
          </div>
        </div>

        {/* Schedule Timeline */}
        <div className="max-w-5xl mx-auto">
          <div className="relative">
            <div className="hidden sm:block absolute left-20 top-0 bottom-0 w-1 bg-gradient-to-b from-orange-500 via-red-500 to-pink-500 rounded-full"></div>
            <div className="space-y-6 sm:space-y-8">
              {scheduleData[selectedDay].map((event, index) => (
                <div key={index} className="relative group">
                  {/* Desktop Layout */}
                  <div className="hidden sm:flex items-start">
                    <div className={`absolute left-16 w-8 h-8 rounded-full bg-gradient-to-r ${getEventTypeColor(event.type)} border-4 border-black shadow-lg group-hover:scale-125 transition-transform duration-300`}></div>
                    <div className="w-32 flex-shrink-0 text-right pr-8">
                      <div className="text-2xl font-bold text-orange-500">{event.time}</div>
                    </div>
                    <div className="flex-1 bg-gradient-to-br from-gray-900/50 to-black/50 backdrop-blur-xl rounded-2xl p-6 ml-12 border border-orange-500/20 hover:border-orange-500/40 transition-all duration-500 group-hover:transform group-hover:scale-105">
                      <div className="flex items-start gap-6">
                        {event.image && (
                          <div className="relative">
                            <img
                              src={event.image}
                              alt={event.artist}
                              className="w-16 h-16 sm:w-20 sm:h-20 rounded-2xl object-contain border-2 border-orange-500/30 bg-white/10 p-1"
                            />
                            <div className="absolute inset-0 bg-black/20 rounded-2xl"></div>
                          </div>
                        )}
                        <div className="flex-1">
                          <div className="flex items-start justify-between mb-4">
                            <div>
                              <h3 className="text-2xl font-bold text-white mb-2 group-hover:text-orange-500 transition-colors">
                                {event.artist}
                              </h3>
                              {event.description && (
                                <p className="text-gray-300 text-sm mb-3 leading-relaxed whitespace-pre-line">
                                  {event.description}
                                </p>
                              )}
                              <div className="flex items-center gap-4 flex-wrap">
                                {event.duration && (
                                  <div className="flex items-center gap-2">
                                    <ClockSched className="h-4 w-4 text-gray-400" />
                                    <span className="text-gray-300 text-sm font-medium">{event.duration}</span>
                                  </div>
                                )}
                                <div className="flex items-center gap-2">
                                  <MapPinSched className="h-4 w-4 text-gray-400" />
                                  <span className={`px-3 py-1 rounded-full text-white text-sm font-semibold ${getStageColor(event.stage)}`}>
                                    {event.stage}
                                  </span>
                                </div>
                                {event.type === 'headliner' && (
                                  <div className="flex items-center gap-1 bg-gradient-to-r from-orange-500/20 to-red-500/20 px-3 py-1 rounded-full border border-orange-500/30">
                                    <MusicSched className="h-3 w-3 text-orange-500" />
                                    <span className="text-orange-500 text-xs font-bold">TÊTE D'AFFICHE</span>
                                  </div>
                                )}
                                {event.type === 'workshop' && (
                                  <div className="flex items-center gap-1 bg-gradient-to-r from-green-500/20 to-teal-500/20 px-3 py-1 rounded-full border border-green-500/30">
                                    <MusicSched className="h-3 w-3 text-green-500" />
                                    <span className="text-green-500 text-xs font-bold">ATELIER</span>
                                  </div>
                                )}
                                {event.type === 'conference' && (
                                  <div className="flex items-center gap-1 bg-gradient-to-r from-indigo-500/20 to-blue-500/20 px-3 py-1 rounded-full border border-indigo-500/30">
                                    <MusicSched className="h-3 w-3 text-indigo-500" />
                                    <span className="text-indigo-500 text-xs font-bold">CONFÉRENCE</span>
                                  </div>
                                )}
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Mobile Layout */}
                  <div className="sm:hidden bg-gradient-to-br from-gray-900/50 to-black/50 backdrop-blur-xl rounded-2xl p-4 border border-orange-500/20">
                    <div className="flex items-center justify-between mb-4">
                      <div className="flex items-center gap-3">
                        <div className={`w-6 h-6 rounded-full bg-gradient-to-r ${getEventTypeColor(event.type)}`}></div>
                        <div>
                          <div className="text-xl font-bold text-orange-500">{event.time}</div>
                          <div className="text-sm text-gray-400">{event.duration}</div>
                        </div>
                      </div>
                      {event.image && (
                        <img src={event.image} alt={event.artist} className="w-12 h-12 rounded-xl object-contain bg-white/10 p-1" />
                      )}
                    </div>
                    <div className="mb-4">
                      <h3 className="text-lg font-bold text-white mb-2">{event.artist}</h3>
                      {event.description && (
                        <p className="text-gray-300 text-sm mb-3 leading-relaxed whitespace-pre-line">{event.description}</p>
                      )}
                      {event.duration && (
                        <div className="flex items-center gap-2 mb-3">
                          <ClockSched className="h-4 w-4 text-gray-400" />
                          <span className="text-gray-300 text-sm font-medium">{event.duration}</span>
                        </div>
                      )}
                      <div className="flex items-center gap-2 mb-3">
                        <MapPinSched className="h-4 w-4 text-gray-400" />
                        <span className={`px-3 py-1 rounded-full text-white text-xs font-semibold ${getStageColor(event.stage)}`}>
                          {event.stage}
                        </span>
                      </div>
                      <div className="flex gap-2 flex-wrap">
                        {event.type === 'headliner' && (
                          <div className="flex items-center gap-1 bg-gradient-to-r from-orange-500/20 to-red-500/20 px-2 py-1 rounded-full border border-orange-500/30">
                            <MusicSched className="h-3 w-3 text-orange-500" />
                            <span className="text-orange-500 text-xs font-bold">TÊTE D'AFFICHE</span>
                          </div>
                        )}
                        {event.type === 'workshop' && (
                          <div className="flex items-center gap-1 bg-gradient-to-r from-green-500/20 to-teal-500/20 px-2 py-1 rounded-full border border-green-500/30">
                            <MusicSched className="h-3 w-3 text-green-500" />
                            <span className="text-green-500 text-xs font-bold">ATELIER</span>
                          </div>
                        )}
                        {event.type === 'conference' && (
                          <div className="flex items-center gap-1 bg-gradient-to-r from-indigo-500/20 to-blue-500/20 px-2 py-1 rounded-full border border-indigo-500/30">
                            <MusicSched className="h-3 w-3 text-indigo-500" />
                            <span className="text-indigo-500 text-xs font-bold">CONFÉRENCE</span>
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Planning des cours */}
        <div className="text-center mt-12 sm:mt-16 mb-8">
          <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">Ateliers & Formations</span>
            <div className="w-24 h-1 bg-gradient-to-r from-orange-500 to-red-500 mx-auto mt-2"></div>
          </div>
          <h3 className="text-2xl sm:text-4xl lg:text-5xl font-black text-white mb-8 leading-tight">
            PLANNING DES
            <br />
            <span className="bg-gradient-to-r from-orange-500 to-red-500 bg-clip-text text-transparent">
              COURS
            </span>
          </h3>
        </div>

        <div className="text-center mt-12 sm:mt-16 mb-8">
          <div className="max-w-4xl mx-auto px-4">
            <img
              src="https://i.postimg.cc/tRKgvNtd/Programme-des-ateliers-du-GSM2025.jpg"
              alt="Workshops GSM 2025"
              className="w-full h-auto rounded-2xl shadow-2xl border border-orange-500/20 hover:border-orange-500/40 transition-all duration-300 hover:scale-105"
            />
          </div>
        </div>

        <div className="text-center mt-12 sm:mt-16">
          <a
            href="https://drive.google.com/uc?export=download&id=1TplEy2sf-nzXUNBHMXFaEoT3sKjflGxB"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-block bg-gradient-to-r from-orange-500 to-red-600 px-8 sm:px-12 py-3 sm:py-4 rounded-full text-white font-bold text-base 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"
          >
            📄 Télécharger le Programme Complet
          </a>
        </div>
      </div>
    </section>
  );
};

window.Schedule = Schedule;
})();