(function() {
const { useState, useEffect } = React;
const { Menu, X, Ticket } = window;

const Header = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 50);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <header className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
      scrolled ? 'bg-black/95 backdrop-blur-xl border-b border-orange-500/20' : 'bg-transparent'
    }`}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-20">
          <div className="flex items-center">
            <div className="relative">
              <span className="text-3xl font-black text-white tracking-wider">
                GSM 2025
              </span>
              <div className="absolute -bottom-1 left-0 w-full h-0.5 bg-gradient-to-r from-orange-500 to-red-500"></div>
            </div>
            <span className="text-orange-500 text-sm font-semibold ml-2">2025</span>
          </div>

          <nav className="hidden lg:flex items-center space-x-12">
            <a href="#home" className="text-white hover:text-orange-500 transition-all duration-300 font-medium relative group">
              ACCUEIL
              <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-orange-500 transition-all duration-300 group-hover:w-full"></span>
            </a>
            <a href="#about" className="text-white hover:text-orange-500 transition-all duration-300 font-medium relative group">
              A PROPOS
              <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-orange-500 transition-all duration-300 group-hover:w-full"></span>
            </a>
            <a href="#lineup" className="text-white hover:text-orange-500 transition-all duration-300 font-medium relative group">
              PROGRAMMATION
              <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-orange-500 transition-all duration-300 group-hover:w-full"></span>
            </a>
            <a href="#schedule" className="text-white hover:text-orange-500 transition-all duration-300 font-medium relative group">
              HORAIRES
              <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-orange-500 transition-all duration-300 group-hover:w-full"></span>
            </a>
            <a href="#hotel" className="text-white hover:text-orange-500 transition-all duration-300 font-medium relative group">
              HÔTELS
              <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-orange-500 transition-all duration-300 group-hover:w-full"></span>
            </a>
            <a href="#gallery" className="text-white hover:text-orange-500 transition-all duration-300 font-medium relative group">
              GALERIE
              <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-orange-500 transition-all duration-300 group-hover:w-full"></span>
            </a>
            <a href="#partners" className="text-white hover:text-orange-500 transition-all duration-300 font-medium relative group">
              PARTENAIRES
              <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-orange-500 transition-all duration-300 group-hover:w-full"></span>
            </a>
            <a
              href="https://www.billetweb.fr/guadeloupe-salsamania-meeting"
              target="_blank"
              rel="noopener noreferrer"
              className="bg-gradient-to-r from-orange-500 to-red-600 text-white px-8 py-3 rounded-full font-bold hover:from-orange-600 hover:to-red-700 transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-orange-500/25 flex items-center gap-2"
            >
              <Ticket className="h-4 w-4" />
              BILLETS
            </a>
          </nav>

          <button
            className="lg:hidden text-white p-2"
            onClick={() => setIsMenuOpen(!isMenuOpen)}
          >
            {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
          </button>
        </div>

        {isMenuOpen && (
          <div className="lg:hidden py-6 border-t border-orange-500/20 bg-black/95 backdrop-blur-xl">
            <div className="flex flex-col space-y-6">
              <a href="#home" className="text-white hover:text-orange-500 transition-colors font-medium">ACCUEIL</a>
              <a href="#about" className="text-white hover:text-orange-500 transition-colors font-medium">A PROPOS</a>
              <a href="#lineup" className="text-white hover:text-orange-500 transition-colors font-medium">PROGRAMMATION</a>
              <a href="#schedule" className="text-white hover:text-orange-500 transition-colors font-medium">HORAIRES</a>
              <a href="#hotel" className="text-white hover:text-orange-500 transition-colors font-medium">HÔTELS</a>
              <a href="#gallery" className="text-white hover:text-orange-500 transition-colors font-medium">GALERIE</a>
              <a href="#partners" className="text-white hover:text-orange-500 transition-colors font-medium">PARTENAIRES</a>
              <a
                href="https://www.billetweb.fr/guadeloupe-salsamania-meeting"
                target="_blank"
                rel="noopener noreferrer"
                className="bg-gradient-to-r from-orange-500 to-red-600 text-white px-8 py-3 rounded-full font-bold w-full text-center block"
              >
                BILLETS
              </a>
            </div>
          </div>
        )}
      </div>
    </header>
  );
};

window.Header = Header;
})();