(function() {
const { useState: useStateGallery } = React;
const { Play: PlayGallery, Heart: HeartGallery, Share2: Share2Gallery, ZoomIn: ZoomInGallery } = window;

const Gallery = () => {
  const [selectedCategory, setSelectedCategory] = useStateGallery('all');

  const categories = [
    { id: 'all',           label: 'Tous les Médias' },
    { id: 'photos',        label: 'Photos' },
    { id: 'videos',        label: 'Vidéos' },
    { id: 'behind-scenes', label: 'Coulisses' }
  ];

  const galleryItems = [
    {
      id: 1,
      type: 'photo',
      category: 'photos',
      image: 'uploads/GSM_2025/project/public/Logo GSM2025.png',
      title: 'Logo Officiel GSM 2025',
      description: 'Logo emblématique du Guadeloupe Salsamania Meeting 2025'
    },
    {
      id: 2,
      type: 'photo',
      category: 'photos',
      image: 'uploads/GSM_2025/project/public/GSM2025-Flyer-A4.jpg',
      title: 'Flyer Officiel GSM 2025',
      description: 'Affiche nue du festival'
    },
    {
      id: 3,
      type: 'photo',
      category: 'photos',
      image: 'uploads/GSM_2025/project/public/Unity-2025-09.jpeg',
      title: 'Unity Salsamania - Septembre 2025',
      description: "Soirée Unity Salsamania avec DJ LO - Let's Dance!"
    },
    {
      id: 4,
      type: 'video',
      category: 'videos',
      image: 'https://images.pexels.com/photos/1763075/pexels-photo-1763075.jpeg?auto=compress&cs=tinysrgb&w=800&h=600&fit=crop',
      title: 'Unity Salsamania',
      description: 'Édition Short et Sandales !☀️',
      videoUrl: 'https://www.instagram.com/reel/DOGLkhfjlPe/'
    },
    {
      id: 5,
      type: 'photo',
      category: 'photos',
      image: 'uploads/GSM_2025/project/public/BiG-S2.jpg',
      title: 'BiG S2',
      description: 'Flyer de la BiG S2 du 30 août 2025'
    },
    {
      id: 6,
      type: 'photo',
      category: 'behind-scenes',
      image: 'uploads/GSM_2025/project/public/GSM2025-Flyer-A4-Artiste.jpg',
      title: 'Flyer',
      description: 'Notre 1er flyer'
    },
    {
      id: 7,
      type: 'video',
      category: 'videos',
      image: 'https://images.pexels.com/photos/1763075/pexels-photo-1763075.jpeg?auto=compress&cs=tinysrgb&w=800&h=600&fit=crop',
      title: 'Présentation GSM 2025',
      description: "Découvrez l'ambiance du Guadeloupe Salsamania Meeting",
      videoUrl: 'https://www.instagram.com/p/DOd4KrcDrFJ/'
    }
  ];

  const filteredItems = selectedCategory === 'all'
    ? galleryItems
    : galleryItems.filter(item => item.category === selectedCategory);

  const handleVideoPlay = (videoUrl) => {
    if (videoUrl) {
      window.open(videoUrl, '_blank', 'noopener,noreferrer');
    }
  };

  return (
    <section id="gallery" 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/4 left-1/4 w-96 h-96 bg-orange-500/5 rounded-full blur-3xl"></div>
        <div className="absolute bottom-1/4 right-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-16">
          <div className="inline-block mb-6">
            <span className="text-orange-500 text-lg font-bold tracking-[0.3em] uppercase">Galerie Média</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">
            VIVEZ LA
            <br />
            <span className="bg-gradient-to-r from-orange-500 to-red-500 bg-clip-text text-transparent">
              MAGIE GSM 2025
            </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>

        {/* Gallery Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {filteredItems.map((item) => (
            <div key={item.id} 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">
              <div className="relative overflow-hidden">
                <img
                  src={item.image}
                  alt={item.title}
                  className="w-full h-80 object-cover group-hover:scale-110 transition-transform duration-700"
                />
                {item.type === 'video' && (
                  <div className="absolute inset-0 flex items-center justify-center">
                    <div
                      className="w-20 h-20 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center group-hover:bg-orange-500/80 transition-all duration-300 cursor-pointer hover:scale-110"
                      onClick={() => handleVideoPlay(item.videoUrl || '')}
                    >
                      <PlayGallery className="h-8 w-8 text-white ml-1" />
                    </div>
                  </div>
                )}
                <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                  <div className="absolute bottom-4 left-4 right-4">
                    <div className="flex justify-between items-end">
                      <div>
                        <h3 className="text-xl font-bold text-white mb-1">{item.title}</h3>
                        <p className="text-gray-300 text-sm">{item.description}</p>
                      </div>
                      <div className="flex gap-2">
                        {item.type === 'video' ? (
                          <button
                            className="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-orange-500 transition-colors"
                            onClick={() => handleVideoPlay(item.videoUrl || '')}
                          >
                            <PlayGallery className="h-4 w-4 text-white" />
                          </button>
                        ) : (
                          <button className="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-orange-500 transition-colors">
                            <ZoomInGallery className="h-4 w-4 text-white" />
                          </button>
                        )}
                        <button className="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-red-500 transition-colors">
                          <HeartGallery className="h-4 w-4 text-white" />
                        </button>
                        <button className="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-blue-500 transition-colors">
                          <Share2Gallery className="h-4 w-4 text-white" />
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="text-center mt-16">
          <button className="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">
            Voir la Galerie Complète
          </button>
        </div>
      </div>
    </section>
  );
};

window.Gallery = Gallery;
})();