 'use client';

import { useState } from 'react';
import Reveal from './Reveal'

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-slate-900 transition-colors duration-500">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 pb-8 text-center">
          <h3 className="mb-6 md:text-3xl text-2xl md:leading-normal leading-normal font-semibold text-slate-900 dark:text-white transition-colors duration-500">
            Características Clave
          </h3>
          <p className="text-slate-400 dark:text-slate-500 max-w-xl mx-auto transition-colors duration-500">
            Comienza a trabajar con AvanzaCast que puede proporcionarte todo lo que necesitas para generar conciencia, impulsar tráfico y conectar.
          </p>
        </div>

        <div className="grid md:grid-cols-12 grid-cols-1 gap-[30px] mt-8">
          {features.map((feature, index) => (
            <div key={feature.id} className="lg:col-span-4 md:col-span-6">
              <Reveal durationMs={600} distance={16} threshold={0.08} delayMs={index * 80}>
                <div className="flex duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900 transition-all">
                  <div className="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 dark:text-indigo-400 text-center rounded-full me-3 transition-colors duration-500">
                    <span className="text-2xl rotate-45">{feature.icon}</span>
                  </div>
                  <div className="flex-1">
                    <h4 className="mb-0 text-lg font-medium text-slate-900 dark:text-white transition-colors duration-500">
                      {feature.title}
                    </h4>
                  </div>
                </div>
              </Reveal>
            </div>
          ))}
        </div>

        <div className="grid grid-cols-1 justify-center mt-6">
          <div className="text-center">
            <a
              href="/features"
              className="relative inline-block font-semibold tracking-wide align-middle text-base text-center border-none after:content-[''] after:absolute after:h-px after:w-0 hover:after:w-full after:end-0 hover:after:end-auto after:bottom-0 after:start-0 after:duration-500 text-slate-400 hover:text-indigo-600 dark:hover:text-indigo-400 after:bg-indigo-600 dark:after:bg-indigo-400 duration-500 ease-in-out transition-colors"
            >
              Ver Más <i className="uil uil-arrow-right"></i>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}
