import React, { useState } 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="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <polyline points="6 9 12 15 18 9"></polyline>
  </svg>
);

const IconMic = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
    <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
    <line x1="12" y1="19" x2="12" y2="23"></line>
    <line x1="8" y1="23" x2="16" y2="23"></line>
  </svg>
);

const IconUsers = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
    <circle cx="9" cy="7" r="4"></circle>
    <path d="M23 21v-2a4 4 0 0 0-3-3.87m-3-12a4 4 0 0 1 0 7.75"></path>
  </svg>
);

const IconVideo = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <path d="M23 7l-7 5 7 5V7z"></path>
    <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
  </svg>
);

const NewHeader: React.FC = () => {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [isProductDropdownOpen, setIsProductDropdownOpen] = useState(false);
  const [isBusinessDropdownOpen, setIsBusinessDropdownOpen] = useState(false);

  const toggleMobileMenu = () => setIsMobileMenuOpen(!isMobileMenuOpen);

  return (
    <header className="sticky top-0 bg-white border-b border-gray-200 z-50 shadow-sm">
      <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">
            <img src="/images/logo.svg" alt="AvanzaCast" className="h-10 w-auto" />
          </a>

          {/* Desktop Navigation */}
          <nav className="hidden lg:flex items-center gap-8">
            <ul className="flex items-center gap-8 list-none m-0 p-0">
              {/* Producto Dropdown */}
              <li 
                className="relative"
                onMouseEnter={() => setIsProductDropdownOpen(true)}
                onMouseLeave={() => setIsProductDropdownOpen(false)}
              >
                <a href="#" className="flex items-center gap-1 text-gray-700 hover:text-blue-600 transition-colors no-underline">
                  Producto
                  <ChevronDown />
                </a>
                {isProductDropdownOpen && (
                  <ul className="absolute top-full left-0 mt-2 bg-white border border-gray-200 rounded-lg shadow-lg min-w-[220px] p-2">
                    <li>
                      <a href="#" className="flex items-center gap-3 px-4 py-3 hover:bg-gray-50 rounded text-gray-700 no-underline">
                        <IconMic />
                        <span>Grabación</span>
                      </a>
                    </li>
                    <li>
                      <a href="#" className="flex items-center gap-3 px-4 py-3 hover:bg-gray-50 rounded text-gray-700 no-underline">
                        <IconVideo />
                        <span>Multistream</span>
                      </a>
                    </li>
                    <li>
                      <a href="#" className="flex items-center gap-3 px-4 py-3 hover:bg-gray-50 rounded text-gray-700 no-underline">
                        <IconUsers />
                        <span>Invitados</span>
                      </a>
                    </li>
                  </ul>
                )}
              </li>

              <li><a href="#" className="text-gray-700 hover:text-blue-600 transition-colors no-underline">Contacto</a></li>
              <li><a href="#" className="text-gray-700 hover:text-blue-600 transition-colors no-underline">Precios</a></li>
              <li><a href="#" className="text-gray-700 hover:text-blue-600 transition-colors no-underline">Novedades</a></li>
              
              {/* Para Empresas Dropdown */}
              <li 
                className="relative"
                onMouseEnter={() => setIsBusinessDropdownOpen(true)}
                onMouseLeave={() => setIsBusinessDropdownOpen(false)}
              >
                <a href="#" className="flex items-center gap-1 text-gray-700 hover:text-blue-600 transition-colors no-underline">
                  Para empresas
                  <ChevronDown />
                </a>
                {isBusinessDropdownOpen && (
                  <ul className="absolute top-full left-0 mt-2 bg-white border border-gray-200 rounded-lg shadow-lg min-w-[220px] p-2">
                    <li>
                      <a href="#" className="flex items-center gap-3 px-4 py-3 hover:bg-gray-50 rounded text-gray-700 no-underline">
                        Soluciones empresariales
                      </a>
                    </li>
                    <li>
                      <a href="#" className="flex items-center gap-3 px-4 py-3 hover:bg-gray-50 rounded text-gray-700 no-underline">
                        Casos de uso
                      </a>
                    </li>
                  </ul>
                )}
              </li>

              <li><a href="/auth/login" className="text-gray-700 hover:text-blue-600 transition-colors no-underline">Accede</a></li>
            </ul>

            <a 
              href="/auth/register" 
              className="bg-blue-600 text-white px-8 py-4 rounded-lg hover:bg-blue-700 transition-colors no-underline font-medium"
            >
              Empecemos
            </a>
          </nav>

          {/* Mobile Menu Toggle */}
          <button 
            className="lg:hidden p-2 text-gray-700 hover:text-blue-600"
            onClick={toggleMobileMenu}
            aria-label="Toggle menu"
          >
            {isMobileMenuOpen ? <CloseIcon /> : <MenuIcon />}
          </button>
        </div>

        {/* Mobile Menu */}
        {isMobileMenuOpen && (
          <nav className="lg:hidden py-4 border-t border-gray-200">
            <ul className="flex flex-col gap-4 list-none m-0 p-0">
              <li><a href="#" className="block py-2 text-gray-700 hover:text-blue-600 no-underline">Producto</a></li>
              <li><a href="#" className="block py-2 text-gray-700 hover:text-blue-600 no-underline">Contacto</a></li>
              <li><a href="#" className="block py-2 text-gray-700 hover:text-blue-600 no-underline">Precios</a></li>
              <li><a href="#" className="block py-2 text-gray-700 hover:text-blue-600 no-underline">Novedades</a></li>
              <li><a href="#" className="block py-2 text-gray-700 hover:text-blue-600 no-underline">Para empresas</a></li>
              <li><a href="/auth/login" className="block py-2 text-gray-700 hover:text-blue-600 no-underline">Accede</a></li>
              <li>
                <a 
                  href="/auth/register" 
                  className="block bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors no-underline text-center font-medium"
                >
                  Empecemos
                </a>
              </li>
            </ul>
          </nav>
        )}
      </div>
    </header>
  );
};

export default NewHeader;