import React from 'react';
import { Mail } from 'lucide-react';

const CallToAction: React.FC = () => {
  return (
    <section className="py-20 bg-background-dark">
      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="relative rounded-3xl overflow-hidden bg-primary text-gray-900 p-12 text-center shadow-2xl">
          {/* Subtle patterned overlay */}
          <div className="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-white via-transparent to-transparent"></div>
          
          <div className="relative z-10">
            <h2 className="text-3xl md:text-5xl font-display font-bold mb-6">
              Ready to boost your focus?
            </h2>
            <p className="text-lg md:text-xl text-gray-900/80 mb-10 max-w-2xl mx-auto">
              Join thousands of students and lifelong learners mastering new topics every day with Nemia.
            </p>
            
            <form 
              action="https://getlaunchlist.com/s/pAqdup" 
              method="POST"
              className="flex flex-col sm:flex-row justify-center gap-3 max-w-lg mx-auto"
            >
              <div className="relative flex-grow">
                <Mail className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400" size={20} />
                <input 
                  type="email" 
                  name="email"
                  placeholder="Enter your email" 
                  required
                  className="w-full bg-gray-900/10 border border-gray-900/20 rounded-xl py-4 pl-12 pr-4 text-gray-900 placeholder:text-gray-900/50 focus:outline-none focus:border-gray-900 transition-colors"
                />
              </div>
              <button 
                type="submit"
                className="bg-gray-900 text-white px-8 py-4 rounded-xl font-bold text-lg hover:scale-105 transition-transform flex items-center justify-center gap-2 whitespace-nowrap"
              >
                <span>Join Waitlist</span>
              </button>
            </form>
            
            <p className="mt-6 text-sm font-medium opacity-60 text-gray-900">
              No credit card required.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

export default CallToAction;