'use client';

const platforms = [
  { name: 'YouTube', logo: '🎥', color: 'from-red-500 to-red-600' },
  { name: 'Twitch', logo: '🟣', color: 'from-purple-500 to-purple-600' },
  { name: 'Facebook Live', logo: '👥', color: 'from-blue-500 to-blue-600' },
  { name: 'LinkedIn Live', logo: '💼', color: 'from-blue-700 to-blue-800' },
  { name: 'TikTok Live', logo: '🎵', color: 'from-pink-500 to-rose-600' },
  { name: 'Instagram Live', logo: '📸', color: 'from-purple-400 to-pink-500' },
  { name: 'Twitter/X', logo: '🐦', color: 'from-sky-400 to-sky-600' },
  { name: 'Vimeo', logo: '▶️', color: 'from-cyan-500 to-cyan-600' },
];

export default function PlatformLogos() {
  return (
    <section className="py-16 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 relative overflow-hidden">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <div className="inline-flex items-center justify-center gap-2 mb-4">
            <div className="h-1 w-12 bg-gradient-to-r from-purple-500 to-blue-500 rounded"></div>
            <span className="text-purple-600 dark:text-purple-400 font-semibold">
              Integraciones Nativas
            </span>
            <div className="h-1 w-12 bg-gradient-to-r from-blue-500 to-purple-500 rounded"></div>
          </div>
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
            Multistreaming a Todas Tus Plataformas
          </h2>
          <p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
            Transmite simultáneamente a más de <span className="font-bold text-purple-600">15+ plataformas</span> con un solo click
          </p>
        </div>

        {/* Logos Grid */}
        <div className="relative">
          {/* Gradient Overlays */}
          <div className="absolute left-0 top-0 bottom-0 w-20 bg-gradient-to-r from-gray-50 dark:from-gray-900 to-transparent z-10"></div>
          <div className="absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-gray-50 dark:from-gray-900 to-transparent z-10"></div>

          {/* Marquee Animation */}
          <div className="overflow-hidden">
            <div className="flex animate-marquee hover:pause-animation">
              {[...platforms, ...platforms].map((platform, index) => (
                <div
                  key={`${platform.name}-${index}`}
                  className="flex-shrink-0 mx-6 group"
                >
                  <div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 border border-gray-200 dark:border-gray-700 w-40 h-32 flex flex-col items-center justify-center">
                    <div className={`text-5xl mb-2 transform group-hover:scale-110 transition-transform duration-300`}>
                      {platform.logo}
                    </div>
                    <p className="text-sm font-semibold text-gray-700 dark:text-gray-300 text-center">
                      {platform.name}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Stats Row */}
        <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
          <div className="text-center">
            <div className="text-4xl font-bold bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent mb-2">
              15+
            </div>
            <p className="text-gray-600 dark:text-gray-400">Plataformas Soportadas</p>
          </div>
          <div className="text-center">
            <div className="text-4xl font-bold bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent mb-2">
              1-Click
            </div>
            <p className="text-gray-600 dark:text-gray-400">Conexión Instantánea</p>
          </div>
          <div className="text-center">
            <div className="text-4xl font-bold bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent mb-2">
              100%
            </div>
            <p className="text-gray-600 dark:text-gray-400">Sincronización Perfecta</p>
          </div>
        </div>
      </div>
    </section>
  );
}
