'use client';

import { useState } from 'react';

export default function StudioPreview() {
  const [activeScene, setActiveScene] = useState('main');

  return (
    <section className="py-20 bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900 relative overflow-hidden">
      {/* Animated Background */}
      <div className="absolute inset-0 opacity-30">
        <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-purple-500 rounded-full filter blur-3xl animate-pulse"></div>
        <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-blue-500 rounded-full filter blur-3xl animate-pulse" style={{ animationDelay: '1s' }}></div>
      </div>

      <div className="container mx-auto px-4 relative z-10">
        <div className="text-center mb-12">
          <span className="inline-flex items-center gap-2 text-purple-300 font-semibold mb-4">
            <svg className="w-5 h-5" 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>
            Estudio Virtual Profesional
          </span>
          <h2 className="text-4xl md:text-5xl font-bold text-white mb-4">
            Tu Estudio de Broadcasting Completo
          </h2>
          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
            Control total de tu transmisión desde el navegador, sin software adicional
          </p>
        </div>

        {/* Studio Interface Preview */}
        <div className="max-w-6xl mx-auto">
          <div className="bg-gray-800/50 backdrop-blur-xl rounded-3xl border border-gray-700 shadow-2xl overflow-hidden">
            {/* Studio Header */}
            <div className="bg-gradient-to-r from-gray-800 to-gray-900 px-6 py-4 border-b border-gray-700">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-4">
                  <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>
                  <span className="text-white font-semibold">AvanzaCast Studio</span>
                </div>
                <div className="flex items-center gap-3">
                  <div className="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>
                  <span className="text-gray-400 text-sm">1,234 espectadores</span>
                </div>
              </div>
            </div>

            {/* Main Preview Area */}
            <div className="relative bg-black aspect-video">
              <div className="absolute inset-0 flex items-center justify-center">
                <div className="text-center">
                  <div className="w-32 h-32 mx-auto mb-4 bg-gradient-to-br from-purple-500 to-blue-500 rounded-full flex items-center justify-center animate-float">
                    <svg className="w-16 h-16 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
                    </svg>
                  </div>
                  <p className="text-gray-400 text-lg">Vista previa de tu cámara</p>
                </div>
              </div>

              {/* Overlays */}
              <div className="absolute top-6 left-6 bg-black/80 backdrop-blur-sm px-4 py-2 rounded-lg border border-purple-500">
                <p className="text-white font-bold">Mi Transmisión Profesional</p>
              </div>
              <div className="absolute bottom-6 left-6 bg-black/80 backdrop-blur-sm px-6 py-3 rounded-xl border border-blue-500">
                <p className="text-blue-400 text-sm mb-1">Nombre del Invitado</p>
                <p className="text-white font-semibold">CEO, Empresa Tech</p>
              </div>

              {/* Scene Indicators */}
              <div className="absolute bottom-6 right-6 flex gap-2">
                <div className="w-20 h-12 bg-purple-500/30 border-2 border-purple-500 rounded-lg"></div>
                <div className="w-20 h-12 bg-gray-700/50 border border-gray-600 rounded-lg"></div>
                <div className="w-20 h-12 bg-gray-700/50 border border-gray-600 rounded-lg"></div>
              </div>
            </div>

            {/* Controls Panel */}
            <div className="bg-gradient-to-r from-gray-800 to-gray-900 px-6 py-6 border-t border-gray-700">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                {/* Scene Selector */}
                <div>
                  <h4 className="text-white font-semibold mb-3 flex items-center gap-2">
                    <svg className="w-5 h-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                    Escenas
                  </h4>
                  <div className="space-y-2">
                    {['Cámara Principal', 'Pantalla Compartida', 'Multi-invitados'].map((scene, i) => (
                      <button
                        key={i}
                        className={`w-full text-left px-3 py-2 rounded-lg transition-all ${
                          i === 0
                            ? 'bg-purple-500 text-white'
                            : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
                        }`}
                      >
                        {scene}
                      </button>
                    ))}
                  </div>
                </div>

                {/* Streaming Destinations */}
                <div>
                  <h4 className="text-white font-semibold mb-3 flex items-center gap-2">
                    <svg className="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z" />
                    </svg>
                    Destinos Activos
                  </h4>
                  <div className="space-y-2">
                    {[
                      { name: 'YouTube', status: 'live', viewers: 856 },
                      { name: 'Twitch', status: 'live', viewers: 234 },
                      { name: 'Facebook', status: 'live', viewers: 144 },
                    ].map((dest, i) => (
                      <div
                        key={i}
                        className="flex items-center justify-between bg-gray-700 px-3 py-2 rounded-lg"
                      >
                        <div className="flex items-center gap-2">
                          <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
                          <span className="text-white text-sm">{dest.name}</span>
                        </div>
                        <span className="text-gray-400 text-xs">{dest.viewers} 👁️</span>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Quick Actions */}
                <div>
                  <h4 className="text-white font-semibold mb-3 flex items-center gap-2">
                    <svg className="w-5 h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                    </svg>
                    Acciones Rápidas
                  </h4>
                  <div className="grid grid-cols-2 gap-2">
                    {[
                      { icon: '🎤', label: 'Audio' },
                      { icon: '📹', label: 'Video' },
                      { icon: '🖥️', label: 'Pantalla' },
                      { icon: '💬', label: 'Chat' },
                    ].map((action, i) => (
                      <button
                        key={i}
                        className="bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded-lg transition-all text-white text-sm flex items-center justify-center gap-2"
                      >
                        <span>{action.icon}</span>
                        <span>{action.label}</span>
                      </button>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Feature Badges */}
          <div className="mt-8 flex flex-wrap justify-center gap-4">
            {[
              '✨ Sin software adicional',
              '🔒 Conexión segura',
              '⚡ Latencia ultra baja',
              '📊 Analytics en vivo',
            ].map((badge, i) => (
              <div
                key={i}
                className="bg-white/10 backdrop-blur-lg px-4 py-2 rounded-full border border-white/20 text-white text-sm"
              >
                {badge}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
