import React, { useState } from 'react';

const NewFooter: React.FC = () => {
  const [selectedLanguage, setSelectedLanguage] = useState('es');

  return (
    <footer className="bg-gray-900 text-gray-300 py-16">
      <div className="max-w-[1280px] mx-auto px-5">
        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 mb-12">
          {/* Logo y descripción */}
          <div className="col-span-2 md:col-span-4 lg:col-span-1">
            <img src="/images/logo-white.svg" alt="AvanzaCast" className="h-10 mb-4" />
            <p className="text-sm text-gray-400">
              La plataforma de streaming profesional para creadores y empresas.
            </p>
          </div>

          {/* Producto */}
          <div>
            <h3 className="text-white font-bold mb-4">Producto</h3>
            <ul className="space-y-3 text-sm">
              <li><a href="/features" className="hover:text-white transition-colors no-underline">Características</a></li>
              <li><a href="/pricing" className="hover:text-white transition-colors no-underline">Precios</a></li>
              <li><a href="/integrations" className="hover:text-white transition-colors no-underline">Integraciones</a></li>
              <li><a href="/updates" className="hover:text-white transition-colors no-underline">Novedades</a></li>
            </ul>
          </div>

          {/* Comunidad */}
          <div>
            <h3 className="text-white font-bold mb-4">Comunidad</h3>
            <ul className="space-y-3 text-sm">
              <li><a href="/blog" className="hover:text-white transition-colors no-underline">Blog</a></li>
              <li><a href="/tutorials" className="hover:text-white transition-colors no-underline">Tutoriales</a></li>
              <li><a href="/forum" className="hover:text-white transition-colors no-underline">Foro</a></li>
              <li><a href="/events" className="hover:text-white transition-colors no-underline">Eventos</a></li>
            </ul>
          </div>

          {/* Empresa */}
          <div>
            <h3 className="text-white font-bold mb-4">Empresa</h3>
            <ul className="space-y-3 text-sm">
              <li><a href="/about" className="hover:text-white transition-colors no-underline">Acerca de</a></li>
              <li><a href="/careers" className="hover:text-white transition-colors no-underline">Carreras</a></li>
              <li><a href="/contact" className="hover:text-white transition-colors no-underline">Contacto</a></li>
              <li><a href="/partners" className="hover:text-white transition-colors no-underline">Partners</a></li>
            </ul>
          </div>

          {/* Legal */}
          <div>
            <h3 className="text-white font-bold mb-4">Legal</h3>
            <ul className="space-y-3 text-sm">
              <li><a href="/terms" className="hover:text-white transition-colors no-underline">Términos de Servicio</a></li>
              <li><a href="/privacy" className="hover:text-white transition-colors no-underline">Política de Privacidad</a></li>
              <li><a href="/cookies" className="hover:text-white transition-colors no-underline">Cookies</a></li>
              <li><a href="/dmca" className="hover:text-white transition-colors no-underline">DMCA</a></li>
            </ul>
          </div>
        </div>

        {/* Bottom bar */}
        <div className="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
          <p className="text-sm text-gray-400">
            © 2025 AvanzaCast. Todos los derechos reservados.
          </p>

          {/* Social links */}
          <div className="flex gap-6">
            <a href="https://twitter.com/avanzacast" className="text-gray-400 hover:text-white transition-colors" aria-label="Twitter">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"/>
              </svg>
            </a>
            <a href="https://facebook.com/avanzacast" className="text-gray-400 hover:text-white transition-colors" aria-label="Facebook">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/>
              </svg>
            </a>
            <a href="https://youtube.com/avanzacast" className="text-gray-400 hover:text-white transition-colors" aria-label="YouTube">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path d="M22.54 6.42a2.78 2.78 0 00-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 00-1.94 2A29 29 0 001 11.75a29 29 0 00.46 5.33A2.78 2.78 0 003.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 001.94-2 29 29 0 00.46-5.25 29 29 0 00-.46-5.33z"/>
                <polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02" fill="#fff"/>
              </svg>
            </a>
            <a href="https://linkedin.com/company/avanzacast" className="text-gray-400 hover:text-white transition-colors" aria-label="LinkedIn">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"/>
                <circle cx="4" cy="4" r="2"/>
              </svg>
            </a>
          </div>

          {/* Language selector */}
          <div className="relative">
            <select
              value={selectedLanguage}
              onChange={(e) => setSelectedLanguage(e.target.value)}
              className="bg-gray-800 border border-gray-700 text-gray-300 px-4 py-2 rounded-lg appearance-none cursor-pointer hover:bg-gray-700 transition-colors pr-10"
            >
              <option value="es">🇪🇸 Español</option>
              <option value="en">🇺🇸 English</option>
              <option value="pt">🇧🇷 Português</option>
              <option value="fr">🇫🇷 Français</option>
            </select>
            <svg 
              className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-gray-400" 
              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>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default NewFooter;