import React from 'react';

const NewCallToAction: React.FC = () => {
  return (
    <section className="py-24 bg-gradient-to-r from-blue-600 to-purple-600 relative overflow-hidden">
      {/* Decorative circles */}
      <div className="absolute top-0 left-0 w-96 h-96 bg-white opacity-5 rounded-full -translate-x-1/2 -translate-y-1/2"></div>
      <div className="absolute bottom-0 right-0 w-96 h-96 bg-white opacity-5 rounded-full translate-x-1/2 translate-y-1/2"></div>

      <div className="max-w-[1280px] mx-auto px-5 relative z-10">
        <div className="text-center max-w-3xl mx-auto">
          <h2 className="text-4xl lg:text-5xl font-bold text-white mb-6">
            ¿Listo para comenzar tu próxima transmisión?
          </h2>
          <p className="text-xl text-blue-100 mb-10">
            Únete a miles de creadores que ya están transmitiendo con AvanzaCast. Es gratis para comenzar.
          </p>
          
          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
            <a
              href="/auth/register"
              className="bg-white text-blue-600 px-10 py-5 rounded-lg hover:bg-gray-100 transition-all font-bold text-lg shadow-xl hover:shadow-2xl hover:-translate-y-1 no-underline"
            >
              Comienza gratis
            </a>
            <a
              href="#features"
              className="bg-transparent border-2 border-white text-white px-10 py-5 rounded-lg hover:bg-white hover:text-blue-600 transition-all font-bold text-lg no-underline"
            >
              Ver características
            </a>
          </div>

          <p className="text-sm text-blue-100 mt-8">
            No se requiere tarjeta de crédito • Configura en menos de 2 minutos
          </p>
        </div>
      </div>
    </section>
  );
};

export default NewCallToAction;