/**
 * Modern SaaS Footer - Estilo Techwind
 * Footer completo con newsletter, links y redes sociales
 */

import React, { useState } from 'react'
import { Logo } from '../../../../shared/components/Logo'

const ModernSaasFooter: React.FC = () => {
  const [newsletter, setNewsletter] = useState('')

  const handleNewsletterSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    console.log('Newsletter subscription:', newsletter)
    setNewsletter('')
  }

  return (
    <footer className="footer bg-slate-900 relative text-gray-200 dark:text-gray-200">
      {/* Newsletter Section */}
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1">
          <div className="relative py-16">
            {/* Newsletter Card */}
            <div className="relative w-full">
              <div className="grid md:grid-cols-12 grid-cols-1 items-center gap-[30px]">
                <div className="lg:col-span-8 md:col-span-7">
                  <div className="lg:text-start text-center">
                    <h3 className="mb-4 md:text-3xl text-2xl md:leading-normal leading-normal font-semibold text-white">
                      Suscríbete a nuestro newsletter
                    </h3>
                    <p className="text-slate-300 max-w-xl">
                      Recibe las últimas noticias, tutoriales y ofertas especiales directamente en tu bandeja de entrada.
                    </p>
                  </div>
                </div>

                <div className="lg:col-span-4 md:col-span-5">
                  <form className="text-end" onSubmit={handleNewsletterSubmit}>
                    <div className="relative">
                      <input
                        type="email"
                        id="newsletter"
                        name="email"
                        value={newsletter}
                        onChange={(e) => setNewsletter(e.target.value)}
                        className="py-4 pe-40 ps-6 w-full h-[50px] outline-none text-black dark:text-white rounded-full bg-white dark:bg-slate-900 shadow dark:shadow-gray-800"
                        placeholder="Tu email..."
                        required
                      />
                      <button
                        type="submit"
                        className="py-2 px-5 inline-block font-semibold tracking-wide align-middle duration-500 text-base text-center absolute top-[2px] end-[3px] h-[46px] bg-indigo-600 hover:bg-indigo-700 border border-indigo-600 hover:border-indigo-700 text-white rounded-full"
                      >
                        Suscribirse <i className="uil uil-arrow-right"></i>
                      </button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Footer Content */}
      <div className="py-[30px] px-0 border-t border-slate-800">
        <div className="container mx-auto px-4">
          <div className="grid md:grid-cols-12 grid-cols-1 gap-[30px]">
            {/* Company Info */}
            <div className="lg:col-span-4 md:col-span-12">
              <Logo 
                size="sm" 
                showText={true}
                className="mb-4 text-white"
                href="/"
              />
              <p className="text-slate-300 mb-6">
                La plataforma profesional de multistreaming que transforma la manera en que creas y compartes contenido en vivo.
              </p>
              <ul className="list-none flex items-center space-x-2">
                <li>
                  <a href="#" className="size-10 inline-flex items-center justify-center tracking-wide align-middle duration-500 text-base text-center border border-gray-700 rounded-md hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600">
                    <i className="uil uil-facebook-f align-middle"></i>
                  </a>
                </li>
                <li>
                  <a href="#" className="size-10 inline-flex items-center justify-center tracking-wide align-middle duration-500 text-base text-center border border-gray-700 rounded-md hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600">
                    <i className="uil uil-instagram align-middle"></i>
                  </a>
                </li>
                <li>
                  <a href="#" className="size-10 inline-flex items-center justify-center tracking-wide align-middle duration-500 text-base text-center border border-gray-700 rounded-md hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600">
                    <i className="uil uil-twitter align-middle"></i>
                  </a>
                </li>
                <li>
                  <a href="#" className="size-10 inline-flex items-center justify-center tracking-wide align-middle duration-500 text-base text-center border border-gray-700 rounded-md hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600">
                    <i className="uil uil-linkedin align-middle"></i>
                  </a>
                </li>
                <li>
                  <a href="#" className="size-10 inline-flex items-center justify-center tracking-wide align-middle duration-500 text-base text-center border border-gray-700 rounded-md hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600">
                    <i className="uil uil-youtube align-middle"></i>
                  </a>
                </li>
              </ul>
            </div>

            {/* Company Links */}
            <div className="lg:col-span-2 md:col-span-4">
              <h5 className="tracking-[1px] text-white font-semibold mb-4">Compañía</h5>
              <ul className="list-none footer-list space-y-3">
                <li>
                  <a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
                    <i className="uil uil-angle-right-b me-1"></i> Acerca de
                  </a>
                </li>
                <li>
                  <a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
                    <i className="uil uil-angle-right-b me-1"></i> Servicios
                  </a>
                </li>
                <li>
                  <a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
                    <i className="uil uil-angle-right-b me-1"></i> Equipo
                  </a>
                </li>
                <li>
                  <a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
                    <i className="uil uil-angle-right-b me-1"></i> Precios
                  </a>
                </li>
                <li>
                  <a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
                    <i className="uil uil-angle-right-b me-1"></i> Proyecto
                  </a>
                </li>
                <li>
                  <a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
                    <i className="uil uil-angle-right-b me-1"></i> Carreras
                  </a>
                </li>
              </ul>
            </div>

            {/* Useful Links */}
            <div className="lg:col-span-3 md:col-span-4">
              <h5 className="tracking-[1px] text-white font-semibold mb-4">Enlaces Útiles</h5>
              <ul className="list-none footer-list space-y-3">
                <li>
                  <a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
                    <i className="uil uil-angle-right-b me-1"></i> Términos de Servicio
                  </a>
                </li>
                <li>
                  <a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
                    <i className="uil uil-angle-right-b me-1"></i> Política de Privacidad
                  </a>
                </li>
                <li>
                  <a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
                    <i className="uil uil-angle-right-b me-1"></i> Documentación
                  </a>
                </li>
                <li>
                  <a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
                    <i className="uil uil-angle-right-b me-1"></i> Changelog
                  </a>
                </li>
                <li>
                  <a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
                    <i className="uil uil-angle-right-b me-1"></i> Componentes
                  </a>
                </li>
              </ul>
            </div>

            {/* Newsletter Info */}
            <div className="lg:col-span-3 md:col-span-4">
              <h5 className="tracking-[1px] text-white font-semibold mb-4">Recursos</h5>
              <ul className="list-none footer-list space-y-3">
                <li>
                  <a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
                    <i className="uil uil-angle-right-b me-1"></i> Blog
                  </a>
                </li>
                <li>
                  <a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
                    <i className="uil uil-angle-right-b me-1"></i> Tutoriales
                  </a>
                </li>
                <li>
                  <a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
                    <i className="uil uil-angle-right-b me-1"></i> Centro de Ayuda
                  </a>
                </li>
                <li>
                  <a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
                    <i className="uil uil-angle-right-b me-1"></i> Soporte
                  </a>
                </li>
                <li>
                  <a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
                    <i className="uil uil-angle-right-b me-1"></i> API
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      {/* Footer Bottom */}
      <div className="py-[30px] px-0 border-t border-slate-800">
        <div className="container mx-auto px-4">
          <div className="grid md:grid-cols-2 items-center gap-6">
            <div className="md:text-start text-center">
              <p className="mb-0 text-slate-300">
                © {new Date().getFullYear()} AvanzaCast. Diseñado con <i className="mdi mdi-heart text-red-600"></i> por{' '}
                <a href="#" target="_blank" rel="noopener noreferrer" className="text-reset">
                  Nextream
                </a>
              </p>
            </div>

            <ul className="list-none md:text-end text-center space-x-2 md:space-x-4">
              <li className="inline">
                <a href="#">
                  <img src="/images/payments/american-ex.png" className="max-h-6 inline" title="American Express" alt="American Express" />
                </a>
              </li>
              <li className="inline">
                <a href="#">
                  <img src="/images/payments/discover.png" className="max-h-6 inline" title="Discover" alt="Discover" />
                </a>
              </li>
              <li className="inline">
                <a href="#">
                  <img src="/images/payments/master-card.png" className="max-h-6 inline" title="Master Card" alt="Master Card" />
                </a>
              </li>
              <li className="inline">
                <a href="#">
                  <img src="/images/payments/paypal.png" className="max-h-6 inline" title="Paypal" alt="Paypal" />
                </a>
              </li>
              <li className="inline">
                <a href="#">
                  <img src="/images/payments/visa.png" className="max-h-6 inline" title="Visa" alt="Visa" />
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </footer>
  )
}

export default ModernSaasFooter