import Link from "next/link";

export default function ServicesCTA() {
    return (
        <section className="py-24 bg-light-bg relative overflow-hidden">
            <div className="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                <div className="section-dark rounded-[2.5rem] p-10 md:p-16 text-center border border-white/10 shadow-2xl relative overflow-hidden group gsap-fade-up">
                    {/* Background Accents */}
                    <div className="absolute top-0 right-0 w-[400px] h-[400px] bg-primary/20 rounded-full blur-[80px] -translate-y-1/2 translate-x-1/2 pointer-events-none group-hover:bg-primary/30 transition-colors duration-700" />
                    <div className="absolute bottom-0 left-0 w-[300px] h-[300px] bg-accent/20 rounded-full blur-[60px] translate-y-1/2 -translate-x-1/2 pointer-events-none group-hover:bg-accent/30 transition-colors duration-700" />

                    <div className="relative z-10">
                        <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 w-fit backdrop-blur-sm mb-6 text-xs font-bold uppercase tracking-widest text-primary">
                            Next Steps
                        </span>
                        <h2 className="text-3xl md:text-5xl font-bold text-white mb-6">Ready to Transform <span className="text-primary">Your Business?</span></h2>
                        <p className="text-lg md:text-xl text-text-muted mb-10 max-w-2xl mx-auto leading-relaxed">
                            Let's discuss your project. Our team of technical experts is ready to build the custom solution you need to succeed and scale.
                        </p>
                        <Link href="/contact" className="btn-primary inline-flex items-center justify-center rounded-full px-10 py-4 text-white text-lg font-bold shadow-glow-green hover:shadow-lg transition-all btn-hover-lift">
                            Request a Technical Consultation
                            <span className="material-symbols-outlined ml-2">arrow_forward</span>
                        </Link>
                    </div>
                </div>
            </div>
        </section>
    );
}
