'use client';

import { useState } from 'react';

export default function StreamingHeroSection() {
  const [email, setEmail] = useState('');

  const handleGetStarted = (e: React.FormEvent) => {
    e.preventDefault();
    // Aquí se implementará la lógica de registro
    console.log('Email:', email);
  };

  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900">
      {/* Animated Background */}
      <div className="absolute inset-0 opacity-20">
        <div className="absolute top-20 left-20 w-72 h-72 bg-purple-500 rounded-full filter blur-3xl animate-float"></div>
        <div className="absolute bottom-20 right-20 w-96 h-96 bg-blue-500 rounded-full filter blur-3xl animate-float-delayed"></div>
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-pink-500 rounded-full filter blur-3xl animate-pulse"></div>
      </div>

      {/* Grid Pattern Overlay */}
      <div className="absolute inset-0 bg-grid-pattern opacity-10"></div>

      <div className="container mx-auto px-4 relative z-10">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          {/* Left Content */}
          <div className="text-left space-y-8 animate-fadeInUp">
            <div className="inline-flex items-center gap-2 bg-purple-500/20 backdrop-blur-sm px-4 py-2 rounded-full border border-purple-400/30">
              <span className="relative flex h-3 w-3">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
                <span className="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
              </span>
              <span className="text-white text-sm font-semibold">
                🔴 50,000+ transmisiones en vivo ahora
              </span>
            </div>

            <h1 className="text-5xl md:text-7xl font-bold text-white leading-tight">
              Transmite
              <span className="block bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
                Multistreaming
              </span>
              Profesional
            </h1>

            <p className="text-xl md:text-2xl text-gray-300 max-w-2xl">
              La plataforma todo-en-uno para creadores de contenido. Transmite a YouTube, Twitch, Facebook y más de 15 plataformas simultáneamente. Sin software, desde tu navegador.
            </p>

            {/* Key Features */}
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              {[
                { icon: '📡', text: 'Multistreaming ilimitado' },
                { icon: '☁️', text: 'Grabación en la nube' },
                { icon: '👥', text: 'Hasta 10 invitados remotos' },
                { icon: '🎨', text: 'Branding personalizado' },
              ].map((feature, i) => (
                <div
                  key={i}
                  className="flex items-center gap-3 bg-white/10 backdrop-blur-sm px-4 py-3 rounded-xl border border-white/20"
                >
                  <span className="text-2xl">{feature.icon}</span>
                  <span className="text-white font-medium">{feature.text}</span>
                </div>
              ))}
            </div>

            {/* CTA Form */}
            <form onSubmit={handleGetStarted} className="flex flex-col sm:flex-row gap-4 max-w-xl">
              <input
                type="email"
                placeholder="tu@email.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="flex-1 px-6 py-4 rounded-xl bg-white/10 backdrop-blur-sm border border-white/20 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500"
                required
              />
              <button
                type="submit"
                className="px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-bold rounded-xl shadow-xl hover:shadow-2xl transform hover:scale-105 transition-all duration-300 flex items-center justify-center gap-2"
              >
                Comenzar Gratis
                <svg className="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>
            </form>

            <p className="text-gray-400 text-sm">
              ✓ Sin tarjeta de crédito &nbsp;&nbsp; ✓ 14 días de prueba gratis &nbsp;&nbsp; ✓ Cancela cuando quieras
            </p>

            {/* Trust Indicators */}
            <div className="flex items-center gap-6 pt-4">
              <div className="flex items-center gap-2">
                <div className="flex -space-x-2">
                  {['👨', '👩', '🧑', '👨‍💼'].map((avatar, i) => (
                    <div
                      key={i}
                      className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-xl border-2 border-white"
                    >
                      {avatar}
                    </div>
                  ))}
                </div>
                <div className="ml-2">
                  <div className="flex gap-1">
                    {[...Array(5)].map((_, i) => (
                      <svg key={i} className="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                      </svg>
                    ))}
                  </div>
                  <p className="text-white text-sm font-semibold">50,000+ usuarios activos</p>
                </div>
              </div>
            </div>
          </div>

          {/* Right Content - Studio Preview */}
          <div className="relative animate-fadeInUp" style={{ animationDelay: '0.2s' }}>
            <div className="relative">
              {/* Studio Interface Mockup */}
              <div className="bg-gray-900/50 backdrop-blur-xl rounded-3xl border border-gray-700 shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-500">
                {/* Browser Bar */}
                <div className="bg-gray-800 px-4 py-3 flex items-center gap-2 border-b border-gray-700">
                  <div className="flex gap-2">
                    <div className="w-3 h-3 rounded-full bg-red-500"></div>
                    <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
                    <div className="w-3 h-3 rounded-full bg-green-500"></div>
                  </div>
                  <div className="flex-1 text-center text-gray-400 text-sm">
                    studio.avanzacast.com
                  </div>
                </div>

                {/* Video Preview */}
                <div className="aspect-video bg-black relative">
                  <div className="absolute inset-0 flex items-center justify-center">
                    <div className="text-center">
                      <div className="w-24 h-24 mx-auto mb-4 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center animate-pulse">
                        <svg className="w-12 h-12 text-white" fill="currentColor" viewBox="0 0 20 20">
                          <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z" />
                        </svg>
                      </div>
                      <p className="text-gray-400">Vista previa de tu transmisión</p>
                    </div>
                  </div>

                  {/* Live Indicator */}
                  <div className="absolute top-4 left-4 flex items-center gap-2 bg-red-500 px-4 py-2 rounded-full animate-pulse">
                    <div className="w-2 h-2 rounded-full bg-white"></div>
                    <span className="text-white text-sm font-bold">EN VIVO</span>
                  </div>

                  {/* Viewer Count */}
                  <div className="absolute top-4 right-4 bg-black/80 backdrop-blur-sm px-4 py-2 rounded-full">
                    <span className="text-white text-sm">👁️ 1,234 espectadores</span>
                  </div>

                  {/* Platform Indicators */}
                  <div className="absolute bottom-4 right-4 flex gap-2">
                    {['🎥', '🟣', '👥'].map((emoji, i) => (
                      <div
                        key={i}
                        className="w-10 h-10 bg-black/80 backdrop-blur-sm rounded-lg flex items-center justify-center border border-green-500"
                      >
                        <span className="text-lg">{emoji}</span>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Controls */}
                <div className="bg-gray-800 px-6 py-4 flex items-center justify-between">
                  <div className="flex gap-3">
                    {[
                      { icon: '🎤', label: 'Mic' },
                      { icon: '📹', label: 'Cam' },
                      { icon: '🖥️', label: 'Screen' },
                    ].map((ctrl, i) => (
                      <button
                        key={i}
                        className="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors text-white text-sm flex items-center gap-2"
                      >
                        <span>{ctrl.icon}</span>
                        <span>{ctrl.label}</span>
                      </button>
                    ))}
                  </div>
                  <button className="px-6 py-2 bg-red-500 hover:bg-red-600 rounded-lg text-white font-semibold transition-colors">
                    Finalizar Stream
                  </button>
                </div>
              </div>

              {/* Floating Elements */}
              <div className="absolute -top-6 -right-6 bg-green-500 text-white px-4 py-2 rounded-full shadow-lg animate-bounce">
                ✓ Conectado a 3 plataformas
              </div>
              <div className="absolute -bottom-6 -left-6 bg-blue-500 text-white px-4 py-2 rounded-full shadow-lg animate-float">
                📊 Analytics en tiempo real
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
