(function() {
const { useState: useStateLineup } = React;
const { Star: StarLineup, Play: PlayLineup, Heart: HeartLineup, Share2: Share2Lineup } = window;

const Lineup = () => {
  const [selectedCategory, setSelectedCategory] = useStateLineup('all');
  const [selectedArtist, setSelectedArtist] = useStateLineup(null);
  const [isModalOpen, setIsModalOpen] = useStateLineup(false);

  const categories = [
    { id: 'all', label: 'Tous les Artistes' },
    { id: 'headliners', label: "Têtes d'Affiche" },
    { id: 'salsa', label: 'Salsa' },
    { id: 'bachata', label: 'Bachata' },
    { id: 'orchestre', label: 'Orchestre' },
    { id: 'dj', label: 'DJs' }
  ];

  const artists = [
    {
      name: 'TROPICAL GEM',
      genre: 'Italie',
      category: ['headliners', 'salsa'],
      image: 'https://i.postimg.cc/k484C7Zj/Tropical-GEM.jpg',
      isHeadliner: true,
      stage: 'Salsa',
      time: 'Confirmé'
    },
    {
      name: 'Adonis Santiago',
      genre: 'Cuba / Slovénie / Russie',
      category: ['headliners', 'salsa'],
      image: 'https://i.postimg.cc/pddnzT0B/FDGDF-png.webp',
      isHeadliner: true,
      stage: 'Salsa',
      time: 'Confirmé'
    },
    {
      name: 'Noemi Dovico',
      genre: 'Italie',
      category: ['headliners', 'salsa', 'bachata'],
      image: 'https://i.postimg.cc/WbSpcZBh/Noemie-Dovico.jpg',
      isHeadliner: true,
      stage: 'Bachata',
      time: 'Confirmée'
    },
    {
      name: 'James & Peiwei Cobo',
      genre: 'Etats-Unis',
      category: ['headliners', 'salsa', 'Bachata'],
      image: 'https://i.postimg.cc/dQkybV0Z/James-peiwi-Cobo-carr-v2.png',
      isHeadliner: true,
      stage: 'Salsa',
      time: 'Confirmés'
    },
    {
      name: 'Jacob & Erica (Yamulee)',
      genre: 'Etats-Unis',
      category: ['headliners', 'salsa'],
      image: 'https://i.postimg.cc/HjGLNW4F/Yamulee-Girls.png',
      isHeadliner: true,
      stage: 'Salsa',
      time: 'Confirmé'
    },
    {
      name: 'Falco & Leti',
      genre: 'Paraguay | Espagne',
      category: ['headliners', 'salsa', 'bachata'],
      image: 'https://i.postimg.cc/hGjQ0JNW/Falco-Leti-1.png',
      isHeadliner: true,
      stage: 'Salsa',
      time: 'Confirmés'
    },
    {
      name: 'Jarianny Valera',
      genre: 'Venezuela / Chili',
      category: ['headliners', 'salsa'],
      image: 'https://i.postimg.cc/fTfkK0HG/88f9cd69-0bf1-4acc-972e-9184604cd9d3.jpg&w=800&h=600&fit=crop',
      isHeadliner: true,
      stage: 'Salsa',
      time: 'Confirmée'
    },
    {
      name: 'Alessandra Codraro',
      genre: 'Italie',
      category: ['headliners', 'bachata'],
      image: 'https://i.postimg.cc/mZJPHHLc/de0ad131-1d2f-4a9c-b0a5-0a23e133e891.jpg&w=800&h=600&fit=crop',
      isHeadliner: true,
      stage: 'Bachata',
      time: 'Confirmée'
    },
    {
      name: 'Yalili & Ivan',
      genre: 'Cuba / Paris',
      category: 'salsa',
      image: 'https://i.postimg.cc/6p1gWtLN/466520055-10234358315968902-8524428752375989045-n.jpg',
      isHeadliner: true,
      stage: 'Salsa',
      time: 'Confirmés'
    },
    {
      name: 'Didier & Mayssane',
      genre: 'Paris',
      category: 'salsa',
      image: 'https://i.postimg.cc/ZKNjDqmW/Salsabor.jpg',
      isHeadliner: true,
      stage: 'Salsa',
      time: 'Confirmés'
    },
    {
      name: 'Son De Corazon',
      genre: 'Guadeloupe',
      category: 'orchestre',
      image: 'https://i.postimg.cc/MGZ15tGV/Son-De-Corazon-2025-03-30-at-12-58-14.jpg',
      isHeadliner: false,
      stage: 'Orchestre',
      time: 'Confirmé'
    },
    {
      name: 'DJ Conti',
      genre: 'Guadeloupe',
      category: 'dj',
      image: 'https://i.postimg.cc/xdrtvQTX/DJ-Conti.jpg&w=800&h=600&fit=crop',
      isHeadliner: false,
      stage: 'DJ Set',
      time: 'Confirmé'
    },
    {
      name: 'DJ Camino',
      genre: 'Guadeloupe',
      category: 'dj',
      image: 'https://i.postimg.cc/nrZ0mXpC/DJ-Camino-x6.jpg&w=800&h=600&fit=crop',
      isHeadliner: false,
      stage: 'DJ Set',
      time: 'Confirmé'
    },
    {
      name: 'DJ Cédric',
      genre: 'Guadeloupe',
      category: 'dj',
      image: 'https://i.postimg.cc/L5RNPJ2J/DJ-Cedric-x6.jpg&w=800&h=600&fit=crop',
      isHeadliner: false,
      stage: 'DJ Set',
      time: 'Confirmé'
    },
    {
      name: 'DJ Diaz',
      genre: 'Guadeloupe',
      category: 'dj',
      image: 'https://i.postimg.cc/CLvtDstL/DJ-Diaz-x6-v2.jpg&w=800&h=600&fit=crop',
      isHeadliner: false,
      stage: 'DJ Set',
      time: 'Confirmé'
    },
    {
      name: 'DJ Eddy',
      genre: 'Guadeloupe',
      category: 'dj',
      image: 'https://i.postimg.cc/cLVTZSp4/3-x6-ai-filters.jpg&w=800&h=600&fit=crop',
      isHeadliner: false,
      stage: 'DJ Set',
      time: 'Confirmé'
    },
    {
      name: 'DJ Lô',
      genre: 'Guadeloupe',
      category: 'dj',
      image: 'https://i.postimg.cc/C5Ym8RSd/DJ-L-x6.jpg&w=800&h=600&fit=crop',
      isHeadliner: false,
      stage: 'DJ Set',
      time: 'Confirmé'
    },
    {
      name: 'DJ Uno',
      genre: 'Guadeloupe',
      category: 'dj',
      image: 'https://i.postimg.cc/NjWbYc3s/6-x6-ai-filters.jpg&w=800&h=600&fit=crop',
      isHeadliner: false,
      stage: 'DJ Set',
      time: 'Confirmé'
    }
  ];

  const filteredArtists = selectedCategory === 'all'
    ? artists
    : artists.filter(artist =>
        Array.isArray(artist.category)
          ? artist.category.includes(selectedCategory)
          : artist.category === selectedCategory
      );

  const handleArtistDetails = (artist) => {
    setSelectedArtist(artist);
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
    setSelectedArtist(null);
  };

  const ArtistModalComp = window.ArtistModal;

  return (
    <section id="lineup" 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/3 left-1/3 w-96 h-96 bg-orange-500/5 rounded-full blur-3xl"></div>
        <div className="absolute bottom-1/3 right-1/3 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-lg font-bold tracking-[0.3em] uppercase">Programmation Artistes</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-5xl sm:text-7xl font-black text-white mb-8 leading-tight">
            DES ARTISTES
            <br />
            <span className="bg-gradient-to-r from-orange-500 to-red-500 bg-clip-text text-transparent">
              DE RENOMMÉE MONDIALE
            </span>
          </h2>
        </div>

        {/* Category Filter */}
        <div className="flex justify-center mb-16">
          <div className="bg-black/50 backdrop-blur-xl rounded-2xl p-2 border border-orange-500/20">
            {categories.map((category) => (
              <button
                key={category.id}
                onClick={() => setSelectedCategory(category.id)}
                className={`px-8 py-3 rounded-xl font-semibold transition-all duration-300 ${
                  selectedCategory === category.id
                    ? 'bg-gradient-to-r from-orange-500 to-red-500 text-white shadow-lg'
                    : 'text-gray-300 hover:text-white hover:bg-white/10'
                }`}
              >
                {category.label}
              </button>
            ))}
          </div>
        </div>

        {/* Artists Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {filteredArtists.map((artist, index) => (
            <div key={index} className="group relative bg-gradient-to-br from-gray-900/50 to-black/50 backdrop-blur-xl rounded-3xl overflow-hidden border border-orange-500/20 hover:border-orange-500/40 transition-all duration-500 hover:transform hover:scale-105">
              {artist.isHeadliner && (
                <div className="absolute top-4 left-4 z-20">
                  <div className="bg-gradient-to-r from-orange-500 to-red-500 px-3 py-1 rounded-full flex items-center gap-1">
                    <StarLineup className="h-3 w-3 text-white" />
                    <span className="text-white text-xs font-bold">TÊTE D'AFFICHE</span>
                  </div>
                </div>
              )}
              <div className="relative overflow-hidden">
                <img
                  src={artist.image}
                  alt={artist.name}
                  className="w-full h-80 object-cover group-hover:scale-110 transition-transform duration-700"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-60"></div>
                <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                  <div className="flex gap-4">
                    <button className="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-orange-500 transition-colors">
                      <PlayLineup className="h-5 w-5 text-white" />
                    </button>
                    <button className="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-red-500 transition-colors">
                      <HeartLineup className="h-5 w-5 text-white" />
                    </button>
                    <button className="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-blue-500 transition-colors">
                      <Share2Lineup className="h-5 w-5 text-white" />
                    </button>
                  </div>
                </div>
              </div>
              <div className="p-6">
                <h3 className="text-2xl font-bold text-white mb-2 group-hover:text-orange-500 transition-colors">
                  {artist.name}
                </h3>
                <p className="text-gray-400 mb-4 font-medium">{artist.genre}</p>
                <div className="flex justify-between items-center text-sm">
                  <div>
                    <p className="text-orange-500 font-semibold">{artist.stage}</p>
                    <p className="text-gray-400">{artist.time}</p>
                  </div>
                  <button
                    onClick={() => handleArtistDetails(artist)}
                    className="bg-gradient-to-r from-orange-500/20 to-red-500/20 border border-orange-500/30 px-4 py-2 rounded-full text-orange-500 font-semibold hover:bg-gradient-to-r hover:from-orange-500 hover:to-red-500 hover:text-white transition-all duration-300"
                  >
                    Voir Détails
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>

        <ArtistModalComp
          artist={selectedArtist}
          isOpen={isModalOpen}
          onClose={closeModal}
        />
      </div>
    </section>
  );
};

window.Lineup = Lineup;
})();