(function() {
const { useState: useStateModal } = React;
const { X: XModal, Play: PlayModal, Heart: HeartModal, Share2: Share2Modal, MapPin: MapPinModal, Clock: ClockModal, Users: UsersModal, Award: AwardModal, Globe: GlobeModal, Music: MusicModal } = window;

const ArtistModal = ({ artist, isOpen, onClose }) => {
  const [isVideoModalOpen, setIsVideoModalOpen] = useStateModal(false);
  const [currentVideoUrl, setCurrentVideoUrl] = useStateModal('');

  if (!isOpen || !artist) return null;

  const getArtistDetails = (artistName) => {
    const details = {
      'TROPICAL GEM': {
        fullName: 'TROPICAL GEM',
        country: 'Italie',
        biography: "TROPICAL GEM est une troupe créée et dirigée par Fernando Sosa. C'est l'une des plus célèbres compagnies de salsa au monde. Avec une équipe composée de danseurs italiens et d'un danseur uruguayen, leur énergie sur scène et leur virtuosité musicale en font des incontournables des plus grands festivals : Puerto Rico, New York, Londres, Los Angeles, Cuba, Lisbonne, Miami, Séoul, Sydney… Leur création \"Fantasia\", premier music-hall latino-américain en Europe, a connu un immense succès en 2007. TROPICAL GEM apporte une fusion unique entre la salsa traditionnelle cubaine et les influences méditerranéennes.",
        achievements: [
          'Plus de 20 ans de carrière internationale',
          'Performances dans plus de 30 pays',
          'Collaboration avec les plus grands salseros cubains',
          "1er prix au congrès mondial de salsa de Porto Rico pendant trois années consécutives",
          "1ère place dans la division \"Mega Salsa Team\" à l'Ultimate Latin Dance Championship (ULDC) de Las Vegas en 2016, 2017 et 2018"
        ],
        performances: [
          { date: '7 Nov', time: '21:30', stage: 'Scène Principale' },
          { date: '8 Nov', time: '21:30', stage: 'Scène Principale' }
        ],
        socialMedia: { instagram: '@tropicalgemofficial', facebook: 'https://www.facebook.com/tropicalgemdancecompany', youtube: '@fernandososatropicalgem4024' },
        musicStyle: 'Salsa, Musicalité',
        instruments: ['Piano', 'Trompette', 'Trombone', 'Congas', 'Timbales'],
        videoUrl: 'https://www.youtube.com/watch?v=I1G-yxyZTno'
      },
      'Adonis Santiago': {
        fullName: 'Adonis Santiago',
        country: 'Cuba | Slovénie | Russie',
        biography: "Adonis Santiago, danseur, chorégraphe et formateur, est diplômé de l'École Nationale des Arts de Cuba. Il dirige l'Académie ArtWay en Slovénie. Il intervient régulièrement dans des festivals en Europe, Asie et Amérique latine, et est considéré comme l'un des meilleurs pédagogues en danses cubaines à l'échelle internationale.",
        achievements: [
          "Diplômé de l'École Nationale des Arts de Cuba",
          "Directeur de l'Académie Artway"
        ],
        performances: [
          { date: '7 Nov', time: '20:00', stage: 'Scène Principale' },
          { date: '8 Nov', time: '20:00', stage: 'Scène Principale' }
        ],
        socialMedia: { instagram: '@adonis_santiago_official', facebook: 'https://www.facebook.com/adonissantiago.baezfernandez', youtube: '@SalsaAdonisSantiago' },
        musicStyle: 'Danses cubaines',
        instruments: ['Piano', 'Claviers', 'Composition'],
        videoUrl: 'https://drive.google.com/file/d/1eY96hB9ZEzk2WfNNJ_01H0ufHJsQTQc7/view?usp=sharing'
      },
      'James & Peiwei Cobo': {
        fullName: 'James & Peiwei Cobo',
        country: 'États-Unis',
        biography: "Ce couple de danseurs américains est reconnu mondialement pour leur style élégant et leur connexion exceptionnelle. James, d'origine portoricaine, et Peiwei, d'origine chinoise, représentent parfaitement la diversité de la communauté salsa internationale. Ce duo, fondateurs de la CoboBrothers Dance Co., est reconnu mondialement. Peiwei Li, 1ère au classement mondial en Salsa Ladies Solo (SUMMIT 2023, New York) et en Pro-Am Ladies Team Shines (SUMMIT 2025), est une ancienne gymnaste rythmique et musicienne plusieurs fois primée. James Cobo a enseigné et performé sur 4 continents, dans les plus grands congrès : États-Unis, Europe, Asie, Océanie. Tous deux sont également les chorégraphes du spectacle In the Heights (Raleigh Little Theatre, 2022). Leur parcours témoigne d'un engagement artistique de haut niveau et d'une reconnaissance mondiale.",
        achievements: [
          'Champions du Salsanama North America',
          'championne en solo au The Summit Championship 2023',
          'finaliste du Ultimate Latin Dance Championship (ULDC)',
          'Instructeurs dans les plus grands congrès mondiaux',
          'Créateurs de la méthode "Cobo Connection"',
          'Plus de 50 workshops internationaux par an'
        ],
        performances: [
          { date: '7 Nov', time: '20:00', stage: 'Scène Principale' },
          { date: '7 Nov', time: '15:00', stage: 'Espace Formation' },
          { date: '8 Nov', time: '20:00', stage: 'Scène Principale' },
          { date: '8 Nov', time: '09:30', stage: 'Espace Formation' }
        ],
        socialMedia: { instagram: '@cobobrothers_danceco', web: 'https://www.cobobrothers.com/', facebook: 'https://www.facebook.com/CoboBrothersDanceCo/' },
        musicStyle: 'Salsa On1, Salsa On2, Bachata',
        specialties: ['Danse en couple', 'Technique avancée', 'Styling'],
        videoUrl: 'https://www.youtube.com/watch?v=aplw-aKKHZE'
      },
      'Jacob & Erica (Yamulee)': {
        fullName: 'Jacob & Erica (Yamulee Dance Company)',
        country: 'États-Unis',
        biography: "Jacob & Erica représentent la célèbre Yamulee Dance Company, groupe de danseuses professionnelles basé à New York. Yamulee est reconnu pour ses chorégraphies innovantes et son style féminin puissant. Dirigé par des danseuses de renommée mondiale, le groupe apporte une énergie unique et une technique irréprochable. Jacob & Erica apportent cette excellence au GSM 2025.",
        achievements: [
          'Performances dans les plus grands théâtres de New York',
          'Collaborations avec des artistes de renommée internationale',
          'Plus de 2 millions de vues sur leurs vidéos'
        ],
        performances: [
          { date: '7 Nov', time: '21:00', stage: 'Scène Principale' },
          { date: '8 Nov', time: '20:30', stage: 'Scène Principale' }
        ],
        socialMedia: { instagram: '@yamuleedancecompany', facebook: 'https://www.facebook.com/YamuleeDanceCompany', youtube: '@YamuleeDanceCompany' },
        musicStyle: 'Salsa, Mambo, Latin Jazz',
        specialties: ['Chorégraphie de groupe', 'Styling féminin', 'Performance scénique'],
        videoUrl: ''
      },
      'Falco & Leti': {
        fullName: 'Falco & Leticia',
        country: 'Paraguay | Espagne',
        biography: "Le duo de danseurs Falco Sura (aussi connu sous le nom de Falco Benalcázar) et Leticia Mujica est un couple de danseurs professionnels de salsa et mambo reconnu sur la scène internationale. Falco et Leti se sont fait connaître grâce à leurs performances dynamiques et à leurs ateliers d'enseignement dans de nombreux festivals à travers le monde. Ils se spécialisent dans la salsa On2 et le mambo, en mettant l'accent sur les shines (jeux de jambes) et le social dancing. Leur style est apprécié pour sa musicalité, sa fluidité et son énergie communicative. Le duo est un habitué des plus grands congrès et événements de danse latine, ce qui témoigne de leur influence et de leur popularité. Ils ont été invités à se produire et à enseigner dans des festivals majeurs tels que : Le World Stars Salsa Festival, Le Paris International Salsa Congress, Le Live 2 Mambo Budapest, Le Latin Beach BOOM. Leurs vidéos de danse sociale et de spectacles sont visionnées par des milliers de personnes, faisant d'eux des figures respectées et inspirantes pour la communauté de la danse.",
        achievements: [
          "Champions d'Europe de bachata sensual 2022",
          'Créateurs de la fusion "Guarani-Flamenco"',
          'Instructeurs certifiés dans 15 pays',
          "Fondateurs de l'école \"Pasión Internacional\""
        ],
        performances: [
          { date: '7 Nov', time: '20:00', stage: 'Scène Principale' },
          { date: '7 Nov', time: '15:30', stage: 'Espace Formation' },
          { date: '8 Nov', time: '20:00', stage: 'Scène Principale' }
        ],
        socialMedia: { instagram: 'leti.mujica', facebook: 'https://www.facebook.com/profile.php?id=100050255721090', youtube: '@leticiamujicagonzalez1251' },
        musicStyle: 'Salsa, Bachata Sensual',
        specialties: ['Fusion culturelle', 'Mambo Fusion', 'Musicalité', 'Bachata sensual', 'Connexion émotionnelle'],
        videoUrl: 'https://www.youtube.com/watch?v=r78LbZiX9n4'
      },
      'Jarianny Valera': {
        fullName: 'Jarianny Valera',
        country: 'Venezuela | Chili',
        biography: "Jarianny Valera est une danseuse vénézuélienne exceptionnelle qui vit actuellement au Chili. Elle s'est imposée comme l'une des références mondiales de la salsa solo féminine grâce à sa technique impeccable, sa musicalité remarquable et son charisme sur scène. Ses performances allient la passion latine de ses origines vénézuéliennes à l'élégance qu'elle a développée au Chili. Jarianny représente la nouvelle génération de danseuses qui repoussent les limites de la salsa solo avec créativité et excellence technique.",
        achievements: [
          '🥇 CAMPEONA SALSA SOLISTA PRO 2025',
          '🥈 WORLD SALSA CONTEST 2024',
          '🥈 SUBCAMPEONA SULACO 2024',
          'Référence mondiale en salsa solo féminine',
          'Ambassadrice de la salsa vénézuélienne au Chili'
        ],
        performances: [
          { date: '7 Nov', time: '20:00', stage: 'Scène Principale' },
          { date: '8 Nov', time: '20:00', stage: 'Scène Principale' }
        ],
        socialMedia: { instagram: '@jarianny_valera', facebook: '', youtube: '' },
        musicStyle: 'Salsa Solo, Salsa On1, Salsa On2',
        specialties: ['Salsa Solo Féminine', 'Technique avancée', 'Musicalité', 'Performance scénique'],
        videoUrl: ''
      },
      'Alessandra Codraro': {
        fullName: 'Alessandra Codraro',
        country: 'Italie',
        biography: "Danseuse et instructrice italienne de renommée internationale, Alessandra est reconnue pour sa technique impeccable et son charisme sur scène. Plusieurs fois championne d'Italie, Alessandra est une véritable référence dans le monde de la danse. En 2018, elle a fondé le Hashtag Dance Studio à Turin, un lieu incontournable pour les passionnés. Elle représente l'excellence de l'école européenne de salsa. Alessandra était juge au Championnat de France FFD SBK, pour l'édition du 24 mai 2025.",
        achievements: [
          "Championne d'Italie de salsa 2020, 2021, 2022",
          'Instructrice dans de nombreux congrès internationaux',
          'Créatrice de la méthode "Italian Salsa Style"',
          'Ambassadrice de la salsa italienne dans le monde'
        ],
        performances: [
          { date: '6 Nov', time: '20:00', stage: 'Scène Inuagurale' },
          { date: '7 Nov', time: '20:00', stage: 'Scène Principale' },
          { date: '8 Nov', time: '20:00', stage: 'Scène Principale' }
        ],
        socialMedia: { instagram: '@alessandrabubu_' },
        musicStyle: 'Bachata, Merengue, Reggaeton, Salsa',
        specialties: ['Bachata', 'Reggaeton', 'Merengue', 'Technique féminine', 'Styling avancé']
      },
      'Noemi Dovico': {
        fullName: 'Noemi Dovico',
        country: 'Italie',
        biography: "10 ans. Danseuse et performeuse italienne de renommée internationale. Elève d'Alessandra Codrado.",
        achievements: [
          'CHAMPIONNATS ITALIENS 2025',
          '🥈 Vice-championne italienne Salsa Showcase 8/11 classe A',
          '🥈 Vice-championne italienne Bachata Showcase 8/11 classe A',
          '🥈 Vice-championne italienne Merengue Shine 8/11 classe A',
          '🥉 Bachata Shine 8/11 ans',
          '🏅 5* Salsa Shine 8/11 ans',
          '✨ 10* Modern Contemporary 8/12 ans',
          " 1ère @thesummitchampionship_ 🇺🇸, compétition la plus importante au monde",
          "Championne d'Italie absolue @fidesmofficial 🇮🇹",
          'Gagnate des 5 disciplines de la classe A dans le classement @latindanceleague 🇮🇹',
          'Gagnate du @universal_dance_league_ 🥇 pour la deuxième année consécutive'
        ],
        performances: [
          { date: '6 Nov', time: '20:00', stage: 'Scène Inuagurale' },
          { date: '7 Nov', time: '20:00', stage: 'Scène Principale' },
          { date: '8 Nov', time: '20:00', stage: 'Scène Principale' }
        ],
        socialMedia: { instagram: '@noemi.dovico_' },
        musicStyle: 'Bachata, Salsa, Reggaeton',
        specialties: ['Bachata', 'Reggaeton', 'Salsa', 'Merengue', 'Technique féminine', 'Styling avancé']
      },
      'Yalili & Ivan': {
        fullName: 'Yalili Rodriguez & Ivan Martinez',
        country: 'Cuba | Paris',
        biography: "Ce couple cubain authentique apporte la pure essence de la salsa cubaine au GSM 2025. Formés dans les rues de La Havane et perfectionnés dans les meilleures écoles de danse de Cuba, ils incarnent la tradition et la passion de leur île natale. Yalili Rodriguez : Née à Santiago de Cuba, Yalili Rodriguez est une danseuse et instructrice diplômée de deux écoles d'art cubaines. En 2002, elle arrive en Guadeloupe. Elle enseigne la salsa à partir de 2003, puis s'installe à Paris. Elle est aujourd'hui titulaire d'un Diplôme d'État de Danse. Ivan Martinez : Né à La Havane, Ivan Martinez est un professeur de salsa autodidacte. Il a développé son propre style en fusionnant la salsa avec des danses variées comme le jazz, le rock and roll, le swing, le tango, le flamenco et les danses afro-cubaines. Il est reconnu comme l'un des plus grands danseurs cubains à Paris.",
        achievements: [
          'Gardiens de la tradition cubaine authentique'
        ],
        performances: [
          { date: '7 Nov', time: '20:00', stage: 'Scène Principale' },
          { date: '8 Nov', time: '20:00', stage: 'Scène Principale' },
          { date: '7 Nov', time: '15:00', stage: 'Espace Formation' },
          { date: '8 Nov', time: '15:00', stage: 'Espace Formation' }
        ],
        socialMedia: { instagram: 'salsason_paris_', facebook: 'https://www.facebook.com/salsason.ivan' },
        musicStyle: 'Son Cubano, Salsa Casino, Rumba',
        specialties: ['Son', 'Salsa Casino authentique', 'Rueda de Casino', 'Culture cubaine'],
        videoUrl: 'https://www.youtube.com/watch?v=iPKFoUMBIKY'
      },
      'Didier & Mayssane': {
        fullName: 'Didier Galvani & Mayssane Assaf',
        country: 'Paris',
        biography: "Didier Galvani et Mayssane Assaf sont des figures emblématiques de la danse latine à Paris et en France, indissociables de l'école Salsabor. Ils sont reconnus pour leur rôle de chorégraphes, professeurs et artistes, ainsi que pour leur style de danse fusionnant plusieurs influences. Didier Galvani est le cofondateur et directeur artistique de Salsabor. Mayssane Assaf est une danseuse et chorégraphe reconnue pour sa créativité et sa technicité. Son style est une fusion de plusieurs disciplines, qu'elle enseigne à travers le concept du SMAC (Solo Mambo Afro Contemporain). Ensemble, ils ont notamment chorégraphié le spectacle Mambo King avec l'Atelier Perfectionnement de Salsabor qui a remporté le titre de Champions de France aux Championnats de France SBK FFdanse 2018.",
        achievements: [
          'Didier Galvani est administrateur de la Fédération Française de danse',
          'Champions de France SBK FFdanse 2018'
        ],
        performances: [
          { date: '7 Nov', time: '20:00', stage: 'Scène Principale' },
          { date: '8 Nov', time: '20:00', stage: 'Scène Principale' },
          { date: '7 Nov', time: '15:00', stage: 'Espace Formation' },
          { date: '8 Nov', time: '15:00', stage: 'Espace Formation' }
        ],
        socialMedia: { instagram: '@didier.galvani', facebook: 'galvanididier' },
        musicStyle: 'Salsa Porto, Cha Cha Cha',
        specialties: ['Salsa Porto', 'Cha Cha Cha', 'Styling', 'Salsa Cubaine', 'Bachata'],
        videoUrl: 'https://www.youtube.com/watch?v=0atiYaOSocI'
      },
      'Son De Corazon': {
        fullName: 'Son De Corazón',
        country: 'Guadeloupe',
        biography: "Orchestre emblématique de la Guadeloupe, Son De Corazón fusionne les rythmes caribéens avec la salsa traditionnelle. Composé de musiciens hispano-caribéens talentueux, ils apportent la couleur tropicale unique des Antilles françaises au festival. Son de Corazón saura faire battre votre cœur en Guadeloupe !",
        achievements: [
          'Plus de 15 ans de présence sur la scène caribéenne',
          'Ambassadeurs de la musique latine en Guadeloupe'
        ],
        performances: [
          { date: '8 Nov', time: '21:30', stage: 'Scène Musicale' }
        ],
        socialMedia: { instagram: '@son_de_corazon', facebook: 'https://www.facebook.com/SonDeCorazon' },
        musicStyle: 'Salsa, Son, Bolero, Guajira, Cha Cha Cha, Timba, Merengue, Bachata',
        instruments: ['Trompette', 'Saxophone', 'Piano', 'Basse', 'Percussions caribéennes']
      },
      'DJ Conti': {
        fullName: 'DJ Conti',
        country: 'Guadeloupe',
        biography: "DJ Conti est une figure emblématique de la scène Bachata guadeloupéenne. Spécialisé dans les musiques latines et caribéennes, il maîtrise parfaitement l'art de faire vibrer les pistes de danse avec ses sélections musicales. Il accompagne les plus grands événements Salsa & Bachata de l'archipel et sait créer une ambiance qui transcende les générations. Conti (alias Aurel) enseigne aussi la Bachata et évolue en tant que danseur dans les différentes manifestations de l'île. Il est le co-fondateur de l'association Mass Alla avec Ju Ju.",
        achievements: ['Spécialiste des musiques latines et particulièrement la Bachata'],
        performances: [{ date: '7 Nov', time: '22:00', stage: 'DJ Set - CBC' }],
        socialMedia: { instagram: 'https://www.instagram.com/masalla971/', facebook: 'https://www.facebook.com/JuetAurelBachata' },
        musicStyle: 'Bachata, Salsa, Reggaeton, Zouk',
        specialties: ['Mix salsa-bachata', 'Ambiance tropicale', 'Transitions fluides'],
        videoUrl: ''
      },
      'DJ Camino': {
        fullName: 'DJ Camino',
        country: 'Guadeloupe',
        biography: "DJ Camino est reconnu pour son style unique qui fusionne les sonorités traditionnelles avec les tendances contemporaines. A chaque performance, il nous propose un retour aux sources des musiques latines. Sa sélection musicale pointue en font un artiste très apprécié de la communauté des danseurs de porto locaux. DJ Camino est aussi formateur et accompagne certaines écoles dans la création chorégraphique.",
        achievements: [
          'DJ régulier des Unity de Salsamania en Guadeloupe',
          'Spécialiste du mix salsa moderne et traditionnelle',
          'DJ officiel des plusieurs événements Salsa en Guadeloupe'
        ],
        performances: [
          { date: '6 Nov', time: '19:30', stage: 'DJ Set - Créole Beach' },
          { date: '7 Nov', time: '20:00', stage: 'DJ Set - CBC' },
          { date: '8 Nov', time: '20:00', stage: 'DJ Set - CBC' },
          { date: '9 Nov', time: '16:00', stage: 'DJ Set - Beach Party' }
        ],
        socialMedia: { instagram: '', facebook: '' },
        musicStyle: 'Salsa Portoricaine, Bachata Moderna, Mambo, Son, Salsa Cubaine, Cha Cha Cha',
        specialties: ['Sonorités modernes'],
        videoUrl: ''
      },
      'DJ Cédric': {
        fullName: 'DJ Cédric',
        country: 'Guadeloupe',
        biography: "DJ Cédric est un véritable passionné de musiques latines qui a su se faire une place de choix dans le paysage musical guadeloupéen. Avec une approche respectueuse des traditions tout en embrassant l'innovation, il crée des sets mémorables qui racontent une histoire musicale. Sa connaissance encyclopédique des classiques de la salsa, combinée à sa capacité à intégrer les nouveautés, fait de lui un DJ complet. DJ Cédric transforme chaque soirée en voyage musical.",
        achievements: [
          "Plus de 12 ans d'expérience dans l'animation musicale",
          'Spécialiste des classiques de la salsa',
          'DJ officiel des plusieurs événements en Guadeloupe',
          'Expert en musiques traditionnelles caribéennes',
          'Créateur d\'ambiances authentiques et chaleureuses'
        ],
        performances: [
          { date: '6 Nov', time: '20:30', stage: 'DJ Set - Créole Beach' },
          { date: '7 Nov', time: '21:00', stage: 'DJ Set - CBC' }
        ],
        socialMedia: { instagram: '', facebook: '' },
        musicStyle: 'Salsa Clásica, Mambo, Bolero, Cha Cha Cha, Mambo',
        specialties: ['Classiques de la salsa', 'Timba'],
        videoUrl: ''
      },
      'DJ Diaz': {
        fullName: 'DJ Diaz',
        country: 'Guadeloupe',
        biography: "DJ Diaz apporte un style cosmopolite et sa vision globale des musiques latines. Influencé par de grands DJ, il a développé une approche unique qui mélange les sonorités à consonnance cubaines. Sa technique irréprochable et sa capacité à créer des transitions surprenantes font de lui un dj recherché pour les grands événements. Sa recherche perpétuelle des nouveautés et de l'innovation font de lui un dj incontournable. Il officie dans plusieurs lieux et plusieurs fois par semaine dans l'archipel.",
        achievements: [
          'Spécialiste des sonorités salsa cubaine',
          'DJ dans les plus grandes manifestations de Guadeloupe',
          'Expert en salsa salsa cubaine'
        ],
        performances: [{ date: '8 Nov', time: '20:00', stage: 'DJ Set - CBC' }],
        socialMedia: { instagram: '', facebook: '' },
        musicStyle: 'Salsa NY, Timba, Reggaeton, Mambo, Bachata',
        specialties: ['Salsa internationale'],
        videoUrl: ''
      },
      'DJ Eddy': {
        fullName: 'DJ Eddy',
        country: 'Guadeloupe',
        biography: "DJ Eddy est reconnu comme l'un des DJs les plus polyvalents de la scène guadeloupéenne. Sa capacité à naviguer entre tous les styles de musiques latines et les musiques caribéennes avec une aisance en fait un dj complet et apprécié. Que ce soit pour faire danser sur de la salsa endiablée, de la bachata sensuelle ou du zouk, DJ Eddy sait adapter son style à chaque moment de la soirée. Son sens du rythme et sa générosité sur scène créent une connexion immédiate avec le public.",
        achievements: [
          'DJ polyvalent maîtrisant tous les styles',
          'Animateur des plus grandes soirées salsa de Guadeloupe'
        ],
        performances: [{ date: '8 Nov', time: '23:30', stage: 'DJ Set - CBC' }],
        socialMedia: { instagram: '', facebook: '' },
        musicStyle: 'Salsa, Bachata, Timba, Kizomba, Reggaeton, Zouk',
        specialties: ["Polyvalence musicale", "Adaptation d'ambiance"],
        videoUrl: ''
      },
      'DJ Lô': {
        fullName: 'DJ Lô',
        country: 'Guadeloupe',
        biography: "DJ Lô est une figure incontournable de la scène Unity Salsamania et l'un des DJs les plus appréciés de la communauté salsa guadeloupéenne. Reconnu pour son style authentique et sa passion communicative, il a su créer sa propre signature musicale qui mélange respect des traditions et ouverture vers les nouvelles tendances. DJ Lô possède cette rare capacité à créer une atmosphère magique où chaque danseur se sent transporté par la musique.",
        achievements: [
          'DJ résident officiel des soirées Unity Salsamania',
          'DJ officiel de la Croisière Salsamania de mars 2026',
          'Spécialiste des musiques latines authentiques'
        ],
        performances: [{ date: '8 Nov', time: '22:00', stage: 'DJ Set - CBC' }],
        socialMedia: { instagram: '', facebook: '' },
        musicStyle: 'Salsa , Bachata, Timba, Mambo',
        specialties: ['Musiques authentiques'],
        videoUrl: ''
      },
      'DJ Uno': {
        fullName: 'DJ Uno',
        country: 'Guadeloupe',
        biography: "DJ Uno est une valeur sûre de la scène salsa en Guadeloupe. Reconnu pour sa générosité, il repousse constamment les frontières de ce qu'un DJ peut accomplir. Sa capacité à créer des mixes uniques et surprenants, tout en respectant l'essence de chaque style musical, fait de lui un très bon dj. DJ Uno transforme chaque performance en une œuvre sonore où la technique rencontre la passion.",
        achievements: ['Créateur de mixes uniques et signature personnelle'],
        performances: [{ date: '8 Nov', time: '24:00', stage: 'DJ Set - After Party CBC' }],
        socialMedia: { instagram: '', facebook: '' },
        musicStyle: 'Salsa, Timba, Bachata',
        specialties: ['Signature unique'],
        videoUrl: ''
      }
    };

    return details[artistName] || {
      fullName: artistName,
      country: 'International',
      biography: 'Artiste de renommée internationale spécialisé dans les musiques et danses latines.',
      achievements: ['Performances internationales', 'Expertise reconnue'],
      performances: [{ date: 'TBD', time: 'TBD', stage: 'À confirmer' }],
      socialMedia: { instagram: '', facebook: '', youtube: '' },
      musicStyle: 'Salsa, Bachata, Merengue',
      specialties: ['Performance', 'Enseignement'],
      videoUrl: ''
    };
  };

  const details = getArtistDetails(artist.name);

  const isYouTubeUrl = (url) => url.includes('youtube.com') || url.includes('youtu.be');

  const getEmbedUrl = (url) => {
    if (url.includes('youtube.com/watch?v=')) {
      const videoId = url.split('v=')[1]?.split('&')[0];
      return `https://www.youtube.com/embed/${videoId}`;
    } else if (url.includes('youtu.be/')) {
      const videoId = url.split('youtu.be/')[1]?.split('?')[0];
      return `https://www.youtube.com/embed/${videoId}`;
    }
    return url;
  };

  const handleVideoClick = (videoUrl) => {
    if (videoUrl) {
      if (isYouTubeUrl(videoUrl)) {
        window.open(videoUrl, '_blank', 'noopener,noreferrer');
      } else {
        setCurrentVideoUrl(getEmbedUrl(videoUrl));
        setIsVideoModalOpen(true);
      }
    }
  };

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

  return (
    <>
      <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
        <div className="relative w-full max-w-4xl max-h-[90vh] bg-gradient-to-br from-gray-900 to-black rounded-3xl border border-orange-500/30 overflow-hidden">
          <button
            onClick={onClose}
            className="absolute top-6 right-6 z-10 w-12 h-12 bg-black/50 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-red-500 transition-colors"
          >
            <XModal className="h-6 w-6 text-white" />
          </button>

          <div className="overflow-y-auto max-h-[90vh]">
            <div className="relative">
              <div className="absolute inset-0">
                <img src={artist.image} alt={artist.name} className="w-full h-80 object-cover" />
                <div className="absolute inset-0 bg-gradient-to-t from-black via-black/60 to-transparent"></div>
              </div>
              <div className="relative p-8 pt-20">
                <div className="flex flex-col lg:flex-row gap-8 items-start">
                  <div className="flex-1">
                    {artist.isHeadliner && (
                      <div className="inline-flex items-center gap-2 bg-gradient-to-r from-orange-500 to-red-500 px-4 py-2 rounded-full mb-4">
                        <AwardModal className="h-4 w-4 text-white" />
                        <span className="text-white font-bold text-sm">TÊTE D'AFFICHE</span>
                      </div>
                    )}
                    <h1 className="text-4xl lg:text-6xl font-black text-white mb-4 leading-tight">{details.fullName}</h1>
                    <div className="flex items-center gap-4 mb-6 flex-wrap">
                      <div className="flex items-center gap-2">
                        <GlobeModal className="h-5 w-5 text-orange-500" />
                        <span className="text-white font-semibold">{details.country}</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <MusicModal className="h-5 w-5 text-orange-500" />
                        <span className="text-gray-300">{details.musicStyle}</span>
                      </div>
                    </div>
                    <div className="flex gap-4 flex-wrap">
                      {details.videoUrl && details.videoUrl.trim() !== '' ? (
                        <button
                          onClick={() => handleVideoClick(details.videoUrl)}
                          onTouchEnd={(e) => { e.preventDefault(); handleVideoClick(details.videoUrl); }}
                          className="bg-gradient-to-r from-orange-500 to-red-600 px-6 py-3 rounded-full text-white font-bold hover:from-orange-600 hover:to-red-700 transition-all duration-300 flex items-center gap-2"
                          style={{ WebkitTapHighlightColor: 'transparent' }}
                        >
                          <PlayModal className="h-4 w-4" />
                          Voir Vidéo
                        </button>
                      ) : (
                        <button disabled className="bg-gray-600 px-6 py-3 rounded-full text-gray-400 font-bold cursor-not-allowed flex items-center gap-2">
                          <PlayModal className="h-4 w-4" />
                          Vidéo Indisponible
                        </button>
                      )}
                      <button className="bg-white/10 backdrop-blur-sm border border-white/30 px-6 py-3 rounded-full text-white font-bold hover:bg-white/20 transition-all duration-300 flex items-center gap-2">
                        <HeartModal className="h-4 w-4" />
                        Favoris
                      </button>
                      <button className="bg-white/10 backdrop-blur-sm border border-white/30 px-6 py-3 rounded-full text-white font-bold hover:bg-white/20 transition-all duration-300 flex items-center gap-2">
                        <Share2Modal className="h-4 w-4" />
                        Partager
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div className="p-8 space-y-8">
              <div className="bg-gradient-to-r from-gray-900/50 to-black/50 backdrop-blur-xl rounded-2xl p-6 border border-orange-500/20">
                <h3 className="text-2xl font-bold text-white mb-4 flex items-center gap-2">
                  <UsersModal className="h-6 w-6 text-orange-500" />
                  Biographie
                </h3>
                <p className="text-gray-300 leading-relaxed text-lg">{details.biography}</p>
              </div>

              <div className="bg-gradient-to-r from-gray-900/50 to-black/50 backdrop-blur-xl rounded-2xl p-6 border border-orange-500/20">
                <h3 className="text-2xl font-bold text-white mb-4 flex items-center gap-2">
                  <AwardModal className="h-6 w-6 text-orange-500" />
                  Réalisations
                </h3>
                <ul className="space-y-3">
                  {details.achievements.map((achievement, 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">{achievement}</span>
                    </li>
                  ))}
                </ul>
              </div>

              <div className="bg-gradient-to-r from-gray-900/50 to-black/50 backdrop-blur-xl rounded-2xl p-6 border border-orange-500/20">
                <h3 className="text-2xl font-bold text-white mb-4 flex items-center gap-2">
                  <ClockModal className="h-6 w-6 text-orange-500" />
                  Programmation GSM 2025
                </h3>
                <div className="space-y-4">
                  {details.performances.map((perf, index) => (
                    <div key={index} className="flex items-center justify-between bg-black/30 rounded-xl p-4">
                      <div className="flex items-center gap-4">
                        <div className="text-orange-500 font-bold text-lg">{perf.date}</div>
                        <div className="text-white font-semibold">{perf.time}</div>
                      </div>
                      <div className="flex items-center gap-2">
                        <MapPinModal className="h-4 w-4 text-gray-400" />
                        <span className="text-gray-300">{perf.stage}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              <div className="bg-gradient-to-r from-gray-900/50 to-black/50 backdrop-blur-xl rounded-2xl p-6 border border-orange-500/20">
                <h3 className="text-2xl font-bold text-white mb-4">Suivez {artist.name}</h3>
                <div className="flex gap-4 flex-wrap">
                  {details.socialMedia.instagram && (
                    <a href="#" className="bg-gradient-to-r from-pink-500 to-purple-600 px-4 py-2 rounded-full text-white font-semibold hover:from-pink-600 hover:to-purple-700 transition-all duration-300">
                      Instagram: {details.socialMedia.instagram}
                    </a>
                  )}
                  {details.socialMedia.facebook && (
                    <a href="#" className="bg-gradient-to-r from-blue-500 to-blue-600 px-4 py-2 rounded-full text-white font-semibold hover:from-blue-600 hover:to-blue-700 transition-all duration-300">
                      Facebook: {details.socialMedia.facebook}
                    </a>
                  )}
                  {details.socialMedia.youtube && (
                    <a href="#" className="bg-gradient-to-r from-red-500 to-red-600 px-4 py-2 rounded-full text-white font-semibold hover:from-red-600 hover:to-red-700 transition-all duration-300">
                      YouTube: {details.socialMedia.youtube}
                    </a>
                  )}
                </div>
              </div>

              {(details.specialties || details.instruments) && (
                <div className="bg-gradient-to-r from-gray-900/50 to-black/50 backdrop-blur-xl rounded-2xl p-6 border border-orange-500/20">
                  <h3 className="text-2xl font-bold text-white mb-4">
                    {details.specialties ? 'Spécialités' : 'Instruments'}
                  </h3>
                  <div className="flex flex-wrap gap-2">
                    {(details.specialties || details.instruments).map((item, index) => (
                      <span key={index} className="bg-gradient-to-r from-orange-500/20 to-red-500/20 border border-orange-500/30 px-3 py-1 rounded-full text-orange-400 text-sm font-semibold">
                        {item}
                      </span>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>

        {isVideoModalOpen && (
          <div className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-black/90 backdrop-blur-sm">
            <div className="relative w-full max-w-4xl bg-black rounded-2xl overflow-hidden">
              <button
                onClick={closeVideoModal}
                className="absolute top-4 right-4 z-10 w-10 h-10 bg-black/50 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-red-500 transition-colors"
              >
                <XModal className="h-5 w-5 text-white" />
              </button>
              <div className="relative w-full" style={{ paddingBottom: '56.25%' }}>
                <iframe
                  src={currentVideoUrl}
                  className="absolute inset-0 w-full h-full"
                  frameBorder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowFullScreen
                  title="Vidéo de l'artiste"
                />
              </div>
              <div className="p-4 bg-gradient-to-r from-gray-900 to-black">
                <h3 className="text-white font-bold text-lg">{artist.name}</h3>
                <p className="text-gray-300">Performance vidéo</p>
              </div>
            </div>
          </div>
        )}
      </div>
    </>
  );
};

window.ArtistModal = ArtistModal;
})();
