import React, { useState, useEffect } from 'react';

// Iconos SVG
const MenuIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <line x1="3" y1="12" x2="21" y2="12"></line>
    <line x1="3" y1="6" x2="21" y2="6"></line>
    <line x1="3" y1="18" x2="21" y2="18"></line>
  </svg>
);

const CloseIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <line x1="18" y1="6" x2="6" y2="18"></line>
    <line x1="6" y1="6" x2="18" y2="18"></line>
  </svg>
);

const ChevronDown = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
    <polyline points="6 9 12 15 18 9"></polyline>
  </svg>
);

const PhoneIcon = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
  </svg>
);

const EmailIcon = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
    <polyline points="22,6 12,13 2,6"></polyline>
  </svg>
);

const SearchIcon = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <circle cx="11" cy="11" r="8"></circle>
    <path d="m21 21-4.35-4.35"></path>
  </svg>
);

const NextreamHeader: React.FC = () => {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);
  const [activeDropdown, setActiveDropdown] = useState<string | null>(null);

  // Detectar scroll para cambiar el header
  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const handleDropdownToggle = (dropdown: string) => {
    setActiveDropdown(activeDropdown === dropdown ? null : dropdown);
  };

  return (
    <>
      {/* Top Bar - Info superior */}
      <div className="bg-[#0A0E27] text-white py-2.5 hidden lg:block">
        <div className="max-w-[1280px] mx-auto px-5">
          <div className="flex justify-between items-center text-sm">
            {/* Información de contacto */}
            <div className="flex items-center gap-6">
              <div className="flex items-center gap-2 hover:text-blue-400 transition-colors cursor-pointer">
                <PhoneIcon />
                <span>+1 (555) 123-4567</span>
              </div>
              <div className="flex items-center gap-2 hover:text-blue-400 transition-colors cursor-pointer">
                <EmailIcon />
                <span>contact@avanzacast.com</span>
              </div>
            </div>

            {/* Social icons y Language */}
            <div className="flex items-center gap-4">
              <div className="flex items-center gap-3">
                {/* Facebook */}
                <a href="#" className="w-8 h-8 flex items-center justify-center rounded-full bg-white/10 hover:bg-blue-600 transition-all duration-300">
                  <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                  </svg>
                </a>
                {/* Twitter */}
                <a href="#" className="w-8 h-8 flex items-center justify-center rounded-full bg-white/10 hover:bg-blue-400 transition-all duration-300">
                  <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                  </svg>
                </a>
                {/* LinkedIn */}
                <a href="#" className="w-8 h-8 flex items-center justify-center rounded-full bg-white/10 hover:bg-blue-700 transition-all duration-300">
                  <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                  </svg>
                </a>
              </div>
              
              {/* Language Selector */}
              <div className="flex items-center gap-2 text-sm border-l border-white/20 pl-4">
                <span className="text-white/70">🇪🇸</span>
                <select className="bg-transparent text-white text-sm cursor-pointer outline-none">
                  <option value="es" className="bg-[#0A0E27]">ES</option>
                  <option value="en" className="bg-[#0A0E27]">EN</option>
                  <option value="pt" className="bg-[#0A0E27]">PT</option>
                  <option value="fr" className="bg-[#0A0E27]">FR</option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Main Header - Navegación principal */}
      <header 
        className={`sticky top-0 z-50 transition-all duration-300 ${
          isScrolled 
            ? 'bg-white shadow-lg' 
            : 'bg-white'
        }`}
      >
        <div className="max-w-[1280px] mx-auto px-5">
          <div className="flex items-center justify-between h-20">
            {/* Logo */}
            <a href="/" className="flex items-center gap-3 group">
              <div className="relative">
                <div className="w-12 h-12 bg-gradient-to-br from-blue-600 via-blue-500 to-purple-600 rounded-lg flex items-center justify-center transform group-hover:scale-110 transition-transform duration-300 shadow-lg">
                  <svg width="28" height="28" viewBox="0 0 24 24" fill="white">
                    <path d="M23 7l-7 5 7 5V7z"></path>
                    <rect x="1" y="5" width="15" height="14" rx="2" ry="2" fill="white"></rect>
                  </svg>
                </div>
                <div className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full animate-pulse"></div>
              </div>
              <div className="flex flex-col">
                <span className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                  AvanzaCast
                </span>
                <span className="text-[10px] text-gray-500 -mt-1">Professional Streaming</span>
              </div>
            </a>

            {/* Desktop Navigation */}
            <nav className="hidden lg:flex items-center gap-8">
              <a href="/" className="text-gray-700 hover:text-blue-600 font-medium transition-colors duration-200 relative group">
                Inicio
                <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 group-hover:w-full transition-all duration-300"></span>
              </a>

              {/* Producto Dropdown */}
              <div 
                className="relative"
                onMouseEnter={() => setActiveDropdown('producto')}
                onMouseLeave={() => setActiveDropdown(null)}
              >
                <button className="flex items-center gap-1 text-gray-700 hover:text-blue-600 font-medium transition-colors duration-200">
                  Producto
                  <ChevronDown />
                </button>
                
                {activeDropdown === 'producto' && (
                  <div className="absolute top-full left-0 mt-4 w-64 bg-white rounded-xl shadow-2xl border border-gray-100 py-3 animate-fadeIn">
                    <div className="absolute -top-2 left-8 w-4 h-4 bg-white border-l border-t border-gray-100 transform rotate-45"></div>
                    <a href="#" className="flex items-center gap-3 px-5 py-3 hover:bg-blue-50 transition-colors group">
                      <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center group-hover:bg-blue-600 transition-colors">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="group-hover:stroke-white">
                          <circle cx="12" cy="12" r="10"></circle>
                          <polygon points="10 8 16 12 10 16 10 8"></polygon>
                        </svg>
                      </div>
                      <div>
                        <div className="font-medium text-gray-900">Streaming en Vivo</div>
                        <div className="text-xs text-gray-500">Transmite a múltiples plataformas</div>
                      </div>
                    </a>
                    <a href="#" className="flex items-center gap-3 px-5 py-3 hover:bg-blue-50 transition-colors group">
                      <div className="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center group-hover:bg-purple-600 transition-colors">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="group-hover:stroke-white">
                          <rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect>
                          <line x1="7" y1="2" x2="7" y2="22"></line>
                          <line x1="17" y1="2" x2="17" y2="22"></line>
                          <line x1="2" y1="12" x2="22" y2="12"></line>
                          <line x1="2" y1="7" x2="7" y2="7"></line>
                          <line x1="2" y1="17" x2="7" y2="17"></line>
                          <line x1="17" y1="17" x2="22" y2="17"></line>
                          <line x1="17" y1="7" x2="22" y2="7"></line>
                        </svg>
                      </div>
                      <div>
                        <div className="font-medium text-gray-900">Estudio Virtual</div>
                        <div className="text-xs text-gray-500">Editor profesional en vivo</div>
                      </div>
                    </a>
                    <a href="#" className="flex items-center gap-3 px-5 py-3 hover:bg-blue-50 transition-colors group">
                      <div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center group-hover:bg-green-600 transition-colors">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="group-hover:stroke-white">
                          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                          <polyline points="7 10 12 15 17 10"></polyline>
                          <line x1="12" y1="15" x2="12" y2="3"></line>
                        </svg>
                      </div>
                      <div>
                        <div className="font-medium text-gray-900">Grabación</div>
                        <div className="text-xs text-gray-500">Graba y almacena en HD</div>
                      </div>
                    </a>
                  </div>
                )}
              </div>

              {/* Soluciones Dropdown */}
              <div 
                className="relative"
                onMouseEnter={() => setActiveDropdown('soluciones')}
                onMouseLeave={() => setActiveDropdown(null)}
              >
                <button className="flex items-center gap-1 text-gray-700 hover:text-blue-600 font-medium transition-colors duration-200">
                  Soluciones
                  <ChevronDown />
                </button>
                
                {activeDropdown === 'soluciones' && (
                  <div className="absolute top-full left-0 mt-4 w-64 bg-white rounded-xl shadow-2xl border border-gray-100 py-3 animate-fadeIn">
                    <div className="absolute -top-2 left-8 w-4 h-4 bg-white border-l border-t border-gray-100 transform rotate-45"></div>
                    <a href="#" className="flex items-center gap-3 px-5 py-3 hover:bg-blue-50 transition-colors">
                      <span className="text-2xl">🎓</span>
                      <div>
                        <div className="font-medium text-gray-900">Educación</div>
                        <div className="text-xs text-gray-500">Clases en vivo interactivas</div>
                      </div>
                    </a>
                    <a href="#" className="flex items-center gap-3 px-5 py-3 hover:bg-blue-50 transition-colors">
                      <span className="text-2xl">🏢</span>
                      <div>
                        <div className="font-medium text-gray-900">Empresas</div>
                        <div className="text-xs text-gray-500">Webinars corporativos</div>
                      </div>
                    </a>
                    <a href="#" className="flex items-center gap-3 px-5 py-3 hover:bg-blue-50 transition-colors">
                      <span className="text-2xl">🎮</span>
                      <div>
                        <div className="font-medium text-gray-900">Gaming</div>
                        <div className="text-xs text-gray-500">Streaming para gamers</div>
                      </div>
                    </a>
                    <a href="#" className="flex items-center gap-3 px-5 py-3 hover:bg-blue-50 transition-colors">
                      <span className="text-2xl">📺</span>
                      <div>
                        <div className="font-medium text-gray-900">Eventos</div>
                        <div className="text-xs text-gray-500">Conferencias y eventos</div>
                      </div>
                    </a>
                  </div>
                )}
              </div>

              <a href="/pricing" className="text-gray-700 hover:text-blue-600 font-medium transition-colors duration-200 relative group">
                Precios
                <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 group-hover:w-full transition-all duration-300"></span>
              </a>

              <a href="/about" className="text-gray-700 hover:text-blue-600 font-medium transition-colors duration-200 relative group">
                Nosotros
                <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 group-hover:w-full transition-all duration-300"></span>
              </a>

              <a href="/contact" className="text-gray-700 hover:text-blue-600 font-medium transition-colors duration-200 relative group">
                Contacto
                <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 group-hover:w-full transition-all duration-300"></span>
              </a>
            </nav>

            {/* CTA Buttons */}
            <div className="hidden lg:flex items-center gap-4">
              {/* Search Button */}
              <button className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors">
                <SearchIcon />
              </button>

              {/* Login */}
              <a 
                href="/auth/login" 
                className="px-5 py-2.5 text-gray-700 font-medium hover:text-blue-600 transition-colors"
              >
                Iniciar sesión
              </a>

              {/* Get Started Button */}
              <a 
                href="/auth/register" 
                className="px-6 py-2.5 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-medium rounded-lg hover:shadow-lg hover:scale-105 transition-all duration-300 flex items-center gap-2"
              >
                Empezar Gratis
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <line x1="5" y1="12" x2="19" y2="12"></line>
                  <polyline points="12 5 19 12 12 19"></polyline>
                </svg>
              </a>
            </div>

            {/* Mobile Menu Button */}
            <button
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              className="lg:hidden p-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
              aria-label="Toggle menu"
            >
              {isMobileMenuOpen ? <CloseIcon /> : <MenuIcon />}
            </button>
          </div>
        </div>

        {/* Mobile Menu */}
        {isMobileMenuOpen && (
          <div className="lg:hidden bg-white border-t border-gray-200 animate-slideDown">
            <div className="max-w-[1280px] mx-auto px-5 py-6 space-y-4">
              <a href="/" className="block py-3 text-gray-700 hover:text-blue-600 font-medium border-b border-gray-100">
                Inicio
              </a>
              
              <div className="border-b border-gray-100">
                <button 
                  onClick={() => handleDropdownToggle('producto-mobile')}
                  className="w-full flex items-center justify-between py-3 text-gray-700 hover:text-blue-600 font-medium"
                >
                  Producto
                  <ChevronDown />
                </button>
                {activeDropdown === 'producto-mobile' && (
                  <div className="pl-4 pb-3 space-y-2">
                    <a href="#" className="block py-2 text-gray-600 hover:text-blue-600">Streaming en Vivo</a>
                    <a href="#" className="block py-2 text-gray-600 hover:text-blue-600">Estudio Virtual</a>
                    <a href="#" className="block py-2 text-gray-600 hover:text-blue-600">Grabación</a>
                  </div>
                )}
              </div>

              <div className="border-b border-gray-100">
                <button 
                  onClick={() => handleDropdownToggle('soluciones-mobile')}
                  className="w-full flex items-center justify-between py-3 text-gray-700 hover:text-blue-600 font-medium"
                >
                  Soluciones
                  <ChevronDown />
                </button>
                {activeDropdown === 'soluciones-mobile' && (
                  <div className="pl-4 pb-3 space-y-2">
                    <a href="#" className="block py-2 text-gray-600 hover:text-blue-600">Educación</a>
                    <a href="#" className="block py-2 text-gray-600 hover:text-blue-600">Empresas</a>
                    <a href="#" className="block py-2 text-gray-600 hover:text-blue-600">Gaming</a>
                    <a href="#" className="block py-2 text-gray-600 hover:text-blue-600">Eventos</a>
                  </div>
                )}
              </div>

              <a href="/pricing" className="block py-3 text-gray-700 hover:text-blue-600 font-medium border-b border-gray-100">
                Precios
              </a>
              <a href="/about" className="block py-3 text-gray-700 hover:text-blue-600 font-medium border-b border-gray-100">
                Nosotros
              </a>
              <a href="/contact" className="block py-3 text-gray-700 hover:text-blue-600 font-medium border-b border-gray-100">
                Contacto
              </a>

              <div className="pt-4 space-y-3">
                <a 
                  href="/auth/login" 
                  className="block w-full px-6 py-3 text-center text-gray-700 font-medium border-2 border-gray-300 rounded-lg hover:border-blue-600 hover:text-blue-600 transition-colors"
                >
                  Iniciar sesión
                </a>
                <a 
                  href="/auth/register" 
                  className="block w-full px-6 py-3 text-center bg-gradient-to-r from-blue-600 to-purple-600 text-white font-medium rounded-lg hover:shadow-lg transition-all"
                >
                  Empezar Gratis
                </a>
              </div>
            </div>
          </div>
        )}
      </header>
    </>
  );
};

export default NextreamHeader;
