'use client';

import { useState } from 'react';

const features = [
  {
    id: 1,
    icon: '📡',
    title: 'Multistreaming Avanzado',
    description: 'Transmite simultáneamente a YouTube, Twitch, Facebook, LinkedIn y más de 15 plataformas con un solo click.',
    benefits: ['Sin límites de plataformas', 'Configuración automática', 'Calidad HD/4K'],
  },
  {
    id: 2,
    icon: '☁️',
    title: 'Grabación en la Nube',
    description: 'Todas tus transmisiones se guardan automáticamente en la nube con almacenamiento ilimitado.',
    benefits: ['Almacenamiento ilimitado', 'Respaldo automático', 'Descarga instantánea'],
  },
  {
    id: 3,
    icon: '👥',
    title: 'Invitados Remotos',
    description: 'Invita hasta 10 participantes simultáneos con video HD y audio profesional de baja latencia.',
    benefits: ['Hasta 10 invitados', 'Baja latencia', 'Sin instalación'],
  },
  {
    id: 4,
    icon: '🎨',
    title: 'Branding Personalizado',
    description: 'Crea overlays, logos, banners y escenas personalizadas con nuestro editor de arrastrar y soltar.',
    benefits: ['Editor visual', 'Plantillas profesionales', 'Sin marca de agua'],
  },
  {
    id: 5,
    icon: '💬',
    title: 'Chat Unificado',
    description: 'Gestiona todos los chats de tus plataformas en un solo lugar con moderación automática.',
    benefits: ['Chat unificado', 'Moderación IA', 'Respuestas rápidas'],
  },
  {
    id: 6,
    icon: '📊',
    title: 'Analytics en Tiempo Real',
    description: 'Monitorea espectadores, engagement, comentarios y estadísticas detalladas durante el stream.',
    benefits: ['Métricas en vivo', 'Reportes detallados', 'Exportación de datos'],
  },
];

export default function StreamingFeatures() {
  const [activeFeature, setActiveFeature] = useState(1);

  return (
    <section className="py-20 bg-white dark:bg-gray-900">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <span className="inline-flex items-center gap-2 text-purple-600 dark:text-purple-400 font-semibold mb-4">
            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
              <path d="M10 3.5a1.5 1.5 0 013 0V4a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-.5a1.5 1.5 0 000 3h.5a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-.5a1.5 1.5 0 00-3 0v.5a1 1 0 01-1 1H6a1 1 0 01-1-1v-3a1 1 0 00-1-1h-.5a1.5 1.5 0 010-3H4a1 1 0 001-1V6a1 1 0 011-1h3a1 1 0 001-1v-.5z" />
            </svg>
            Características Poderosas
          </span>
          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
            Todo lo que Necesitas para Transmitir
          </h2>
          <p className="text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
            Herramientas profesionales diseñadas para creadores de contenido, empresas y educadores
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {features.map((feature) => (
            <div
              key={feature.id}
              className={`group bg-gradient-to-br ${
                activeFeature === feature.id
                  ? 'from-purple-50 to-blue-50 dark:from-purple-900/20 dark:to-blue-900/20 border-purple-500 shadow-xl shadow-purple-500/20'
                  : 'from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-800/50 border-gray-200 dark:border-gray-700'
              } rounded-2xl p-8 border-2 transition-all duration-300 hover:shadow-2xl hover:transform hover:-translate-y-2 cursor-pointer`}
              onMouseEnter={() => setActiveFeature(feature.id)}
            >
              <div className="text-6xl mb-4 transform group-hover:scale-110 transition-transform duration-300">
                {feature.icon}
              </div>
              <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-3">
                {feature.title}
              </h3>
              <p className="text-gray-600 dark:text-gray-400 mb-6">
                {feature.description}
              </p>
              <ul className="space-y-2">
                {feature.benefits.map((benefit, index) => (
                  <li
                    key={index}
                    className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300"
                  >
                    <svg
                      className="w-5 h-5 text-green-500 flex-shrink-0"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M5 13l4 4L19 7"
                      />
                    </svg>
                    {benefit}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* CTA Button */}
        <div className="text-center mt-12">
          <button className="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white font-bold py-4 px-8 rounded-full text-lg shadow-xl hover:shadow-2xl transform hover:scale-105 transition-all duration-300">
            Comienza Gratis Hoy
            <svg
              className="inline-block ml-2 w-5 h-5"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M14 5l7 7m0 0l-7 7m7-7H3"
              />
            </svg>
          </button>
        </div>
      </div>
    </section>
  );
}
