(function() {
const { useState: useStateHero, useEffect: useEffectHero } = React;
const { Play: PlayIcon, Calendar: CalendarIcon, MapPin: MapPinIcon, Users: UsersIcon, Ticket: TicketIcon, X: XIcon } = window;

const Hero = () => {
  const [currentSlide, setCurrentSlide] = useStateHero(0);
  const [isVideoModalOpen, setIsVideoModalOpen] = useStateHero(false);
  const [timeLeft, setTimeLeft] = useStateHero({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0
  });

  const slides = [
    {
      image: 'https://images.pexels.com/photos/1190298/pexels-photo-1190298.jpeg?auto=compress&cs=tinysrgb&w=1920&h=1080&fit=crop',
      title: 'GUADELOUPE SALSAMANIA MEETING',
      subtitle: "L'EXPÉRIENCE SALSA ULTIME"
    },
    {
      image: 'https://images.pexels.com/photos/1763075/pexels-photo-1763075.jpeg?auto=compress&cs=tinysrgb&w=1920&h=1080&fit=crop',
      title: 'ARTISTES INTERNATIONAUX',
      subtitle: 'QUATRE JOURS DE PASSION LATINE'
    },
    {
      image: 'https://images.pexels.com/photos/1105666/pexels-photo-1105666.jpeg?auto=compress&cs=tinysrgb&w=1920&h=1080&fit=crop',
      title: 'GUADELOUPE PARADIS TROPICAL',
      subtitle: 'LIEU MAGIQUE, MOMENTS INOUBLIABLES'
    }
  ];

  useEffectHero(() => {
    const timer = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % slides.length);
    }, 6000);
    return () => clearInterval(timer);
  }, []);

  useEffectHero(() => {
    const targetDate = new Date('2025-11-06T18:00:00').getTime();
    const interval = setInterval(() => {
      const now = new Date().getTime();
      const difference = targetDate - now;
      if (difference > 0) {
        setTimeLeft({
          days: Math.floor(difference / (1000 * 60 * 60 * 24)),
          hours: Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
          minutes: Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)),
          seconds: Math.floor((difference % (1000 * 60)) / 1000)
        });
      }
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  const openVideoModal = () => {
    window.open('https://youtu.be/5LlvcCCtFkA', '_blank', 'noopener,noreferrer');
  };

  const closeVideoModal = () => {
    setIsVideoModalOpen(false);
  };

  return (
    <>
      <section id="home" className="relative min-h-screen flex items-center justify-center overflow-hidden">
        {/* Background Slideshow */}
        <div className="absolute inset-0">
          {slides.map((slide, index) => (
            <div
              key={index}
              className={`absolute inset-0 transition-opacity duration-2000 ${
                index === currentSlide ? 'opacity-100' : 'opacity-0'
              }`}
            >
              <div
                className="absolute inset-0 bg-cover bg-center bg-no-repeat transform scale-110"
                style={{ backgroundImage: `url(${slide.image})` }}
              />
              <div className="absolute inset-0 bg-gradient-to-b from-black/40 via-black/60 to-black/80"></div>
            </div>
          ))}
        </div>

        {/* Animated particles */}
        <div className="absolute inset-0">
          {[...Array(20)].map((_, i) => (
            <div
              key={i}
              className="absolute w-2 h-2 bg-orange-500/30 rounded-full animate-pulse"
              style={{
                left: `${Math.random() * 100}%`,
                top: `${Math.random() * 100}%`,
                animationDelay: `${Math.random() * 3}s`,
                animationDuration: `${3 + Math.random() * 2}s`
              }}
            />
          ))}
        </div>

        <div className="relative z-10 text-center px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
          {/* Main Title */}
          <div className="mb-12">
            <h1 className="text-6xl sm:text-8xl lg:text-9xl font-black mb-6 leading-none">
              <span className="bg-gradient-to-r from-orange-500 via-red-500 to-pink-500 bg-clip-text text-transparent animate-pulse">
                GSM 2025
              </span>
            </h1>
            <h2 className="text-2xl sm:text-4xl lg:text-5xl font-bold text-white mb-4 tracking-wider">
              GUADELOUPE SALSAMANIA MEETING 2025
            </h2>
            <div className="flex flex-col sm:flex-row items-center justify-center gap-8 text-white/90 text-lg">
              <div className="flex items-center gap-2">
                <CalendarIcon className="h-5 w-5 text-orange-500" />
                <span>6-9 Novembre 2025</span>
              </div>
              <div className="flex items-center gap-2">
                <MapPinIcon className="h-5 w-5 text-orange-500" />
                <span>Guadeloupe, Antilles Françaises</span>
              </div>
              <div className="flex items-center gap-2">
                <UsersIcon className="h-5 w-5 text-orange-500" />
                <span>800+ Festivaliers</span>
              </div>
            </div>
          </div>

          {/* Countdown Timer */}
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-12 max-w-2xl mx-auto">
            {Object.entries(timeLeft).map(([unit, value]) => {
              const unitLabels = {
                days: 'jours',
                hours: 'heures',
                minutes: 'minutes',
                seconds: 'secondes'
              };
              return (
                <div key={unit} className="bg-black/50 backdrop-blur-xl rounded-2xl p-6 border border-orange-500/30 hover:border-orange-500/50 transition-all duration-300">
                  <div className="text-4xl sm:text-5xl font-black text-white mb-2">
                    {value.toString().padStart(2, '0')}
                  </div>
                  <div className="text-sm text-orange-400 uppercase font-semibold tracking-wider">
                    {unitLabels[unit]}
                  </div>
                </div>
              );
            })}
          </div>

          {/* CTA Buttons */}
          <div className="flex flex-col sm:flex-row gap-6 justify-center items-center">
            <a
              href="https://www.billetweb.fr/guadeloupe-salsamania-meeting"
              target="_blank"
              rel="noopener noreferrer"
              className="group bg-gradient-to-r from-orange-500 to-red-600 px-12 py-4 rounded-full text-white font-bold 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 flex items-center gap-3"
            >
              <TicketIcon className="h-5 w-5 group-hover:rotate-12 transition-transform" />
              ACHETER BILLETS
            </a>
            <button
              onClick={openVideoModal}
              className="group border-2 border-white/50 px-12 py-4 rounded-full text-white font-bold text-lg hover:bg-white hover:text-black transition-all duration-300 backdrop-blur-sm flex items-center gap-3"
            >
              <PlayIcon className="h-5 w-5 group-hover:scale-110 transition-transform" />
              BANDE-ANNONCE
            </button>
          </div>

          {/* Scroll Indicator */}
          <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
            <div className="w-6 h-10 border-2 border-white/50 rounded-full flex justify-center">
              <div className="w-1 h-3 bg-white/70 rounded-full mt-2 animate-pulse"></div>
            </div>
          </div>
        </div>

        {/* Slide Indicators */}
        <div className="absolute bottom-8 right-8 flex space-x-2">
          {slides.map((_, index) => (
            <button
              key={index}
              onClick={() => setCurrentSlide(index)}
              className={`w-3 h-3 rounded-full transition-all duration-300 ${
                index === currentSlide ? 'bg-orange-500' : 'bg-white/30 hover:bg-white/50'
              }`}
            />
          ))}
        </div>
      </section>
    </>
  );
};

window.Hero = Hero;
})();