import React from 'react'

const platforms = ['YouTube', 'Twitch', 'Facebook', 'LinkedIn', 'TikTok']

const companies = [
  { name: 'Microsoft', logo: '🏢' },
  { name: 'Adobe', logo: '🎨' },
  { name: 'Netflix', logo: '🎬' },
  { name: 'Spotify', logo: '🎵' },
  { name: 'Google', logo: '🔍' },
  { name: 'Meta', logo: '📘' }
]

export default function CTAAndFooter() {
  return (
    <>
      {/* Final CTA Section */}
      <section className="bg-white py-20">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl lg:text-5xl font-bold text-gray-900 mb-8">
            Transmite profesionalmente desde el primer día
          </h2>
          <p className="text-xl text-gray-600 mb-10 leading-relaxed">
            Con AvanzaCast, no necesitas ser un experto en tecnología para crear transmisiones de alta calidad. 
            Comienza en minutos y crece con nosotros.
          </p>
          
          <div className="flex flex-col sm:flex-row gap-6 justify-center items-center mb-8">
            <a href="/auth/register">
              <button className="bg-gradient-to-r from-teal-600 to-teal-700 hover:from-teal-700 hover:to-teal-800 text-white px-10 py-5 text-xl font-bold rounded-xl transition-all duration-200 transform hover:scale-105 hover:shadow-xl active:scale-95 shadow-lg">
                Comenzar prueba gratuita
              </button>
            </a>
            <button className="text-gray-600 hover:text-gray-800 font-semibold underline transition-colors text-lg hover:bg-white px-4 py-3 rounded-lg hover:shadow-sm">
              Ver demos en vivo
            </button>
          </div>

          <p className="text-sm text-gray-500">
            ✓ Sin tarjeta de crédito requerida • ✓ Configuración en 2 minutos • ✓ Soporte 24/7
          </p>
        </div>
      </section>

      {/* Trusted By Section */}
      <section className="bg-gray-50 py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <p className="text-gray-500 text-lg mb-8">Confiado por más de 4 millones de creadores</p>
          
          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 items-center opacity-60">
            {companies.map((company, index) => (
              <div key={index} className="flex flex-col items-center space-y-2 hover:opacity-100 transition-opacity">
                <div className="text-3xl">{company.logo}</div>
                <span className="text-sm font-medium text-gray-400">{company.name}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Additional CTA Section */}
      <section className="py-20 bg-gradient-to-r from-blue-50 to-indigo-50">
        <div className="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
            ¿Listo para elevar tu contenido?
          </h2>
          <p className="text-xl text-gray-600 mb-8">
            Únete a miles de creadores que ya confían en AvanzaCast para sus transmisiones profesionales
          </p>
          
          <div className="flex flex-col sm:flex-row gap-6 justify-center mb-8">
            <a href="/auth/register">
              <button className="w-full sm:w-auto bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white px-10 py-5 text-xl font-bold rounded-xl transition-all duration-200 transform hover:scale-105 hover:shadow-xl active:scale-95 shadow-lg">
                🚀 Crear Cuenta Gratis
              </button>
            </a>
            <button className="w-full sm:w-auto border-2 border-gray-300 hover:border-gray-400 bg-white hover:bg-gray-50 text-gray-700 px-10 py-5 text-xl font-bold rounded-xl transition-all duration-200 transform hover:scale-105 hover:shadow-lg active:scale-95">
              📞 Contactar Ventas
            </button>
          </div>

          {/* Trust indicators */}
          <div className="pt-8 border-t border-gray-200">
            <p className="text-sm text-gray-500 mb-4">Confiado por creadores en todo el mundo</p>
            <div className="flex justify-center items-center space-x-8 opacity-60">
              {platforms.map((platform, index) => (
                <div 
                  key={platform} 
                  className="text-gray-400 font-medium hover:text-gray-600 hover:-translate-y-0.5 transition-all duration-200 cursor-pointer"
                >
                  {platform}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-4 gap-8">
            {/* Logo and description */}
            <div>
              <div className="mb-4">
                <img src="/images/logoavanzacast_white.png" alt="AvanzaCast" className="h-12 w-auto" />
              </div>
              <p className="text-gray-400 mb-6">
                La plataforma profesional de streaming que necesitas para crear contenido de calidad.
              </p>
              <div className="flex space-x-4">
                {/* Social links */}
                <a href="#" className="text-gray-400 hover:text-white transition-colors">
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
                  </svg>
                </a>
                <a href="#" className="text-gray-400 hover:text-white transition-colors">
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
                  </svg>
                </a>
                <a href="#" className="text-gray-400 hover:text-white transition-colors">
                  <svg className="w-5 h-5" 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>
            </div>
            
            {/* Footer sections */}
            {['Producto','Soporte','Empresa'].map((section, idx) => (
              <div key={idx}>
                <h4 className="font-semibold mb-4">{section}</h4>
                <ul className="space-y-2 text-gray-400">
                  <li><a href="#" className="hover:text-white transition-colors">Enlace 1</a></li>
                  <li><a href="#" className="hover:text-white transition-colors">Enlace 2</a></li>
                  <li><a href="#" className="hover:text-white transition-colors">Enlace 3</a></li>
                  <li><a href="#" className="hover:text-white transition-colors">Enlace 4</a></li>
                </ul>
              </div>
            ))}
          </div>
          
          <div className="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center text-gray-400">
            <p>© 2024 AvanzaCast. Todos los derechos reservados.</p>
            <div className="flex space-x-6 mt-4 md:mt-0">
              <a href="/privacy" className="hover:text-white transition-colors">Política de Privacidad</a>
              <a href="/terms" className="hover:text-white transition-colors">Términos de Servicio</a>
              <a href="/cookies" className="hover:text-white transition-colors">Cookies</a>
            </div>
          </div>
        </div>
      </footer>
    </>
  )
}
