components/CTA.jsx

import { ArrowRight, Github, Twitter } from 'lucide-react';

export default function CTA() {
  return (
    <section className="py-24">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="bg-gradient-to-r from-primary-600 to-accent-600 rounded-3xl p-12 text-center relative overflow-hidden">
          {/* Background decoration */}
          <div className="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full blur-3xl" />
          <div className="absolute bottom-0 left-0 w-48 h-48 bg-white/10 rounded-full blur-3xl" />

          <div className="relative z-10">
            <h2 className="text-4xl font-bold mb-4 text-white">
              Ready to Build the Future?
            </h2>
            <p className="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
              Join thousands of developers, researchers, and innovators using Reachy Mini to bring their ideas to life.
            </p>

            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-8">
              <button className="bg-white text-gray-900 px-8 py-4 rounded-xl font-semibold hover:bg-gray-100 transition-all duration-300 flex items-center space-x-2">
                <span>Get Started Now</span>
                <ArrowRight className="w-5 h-5" />
              </button>
              
              <button className="bg-white/20 backdrop-blur text-white px-8 py-4 rounded-xl font-semibold hover:bg-white/30 transition-all duration-300 flex items-center space-x-2 border border-white/30">
                <Github className="w-5 h-5" />
                <span>View on GitHub</span>
              </button>
            </div>

            <div className="flex justify-center items-center space-x-8">
              <a href="#" className="text-white/80 hover:text-white transition-colors flex items-center space-x-2">
                <Twitter className="w-5 h-5" />
                <span>Follow Updates</span>
              </a>
              <a href="#" className="text-white/80 hover:text-white transition-colors">
                Join Discord
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}