import Link from "next/link";

export default function SitemapCTA() {
    return (
        <section className="bg-light-bg py-20 border-t border-gray-100">
            <div className="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8">
                <div className="relative bg-section-dark rounded-[40px] p-10 md:p-16 overflow-hidden group shadow-2xl">
                    {/* Decorative Background */}
                    <div className="absolute top-0 right-0 w-[400px] h-[400px] bg-primary/20 rounded-full blur-[100px] -translate-y-1/2 translate-x-1/2 group-hover:bg-primary/30 transition-colors duration-700" />
                    <div className="absolute bottom-0 left-0 w-[400px] h-[400px] bg-accent/10 rounded-full blur-[100px] translate-y-1/2 -translate-x-1/2" />

                    <div className="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-12">
                        <div className="max-w-2xl text-center lg:text-left">
                            <h2 className="text-3xl md:text-5xl font-black text-white tracking-tight leading-tight mb-6">
                                Still can't find <span className="text-primary italic">exactly</span> what you need?
                            </h2>
                            <p className="text-text-muted text-lg md:text-xl leading-relaxed">
                                Our technical strategy team is available 24/7 to help you navigate our enterprise solutions or provide a custom walkthrough of our capabilities.
                            </p>
                        </div>

                        <div className="flex flex-col sm:flex-row items-center gap-6 shrink-0 w-full lg:w-auto">
                            <Link href="/contact" className="btn-primary w-full sm:w-auto inline-flex items-center justify-center rounded-full px-10 py-5 text-white font-bold shadow-glow-green hover:shadow-xl transition-all btn-hover-lift">
                                Contact Support
                                <span className="material-symbols-outlined ml-2">support_agent</span>
                            </Link>
                            <Link href="/faq" className="w-full sm:w-auto inline-flex items-center justify-center rounded-full px-10 py-5 border border-white/20 text-white font-bold hover:bg-white/10 transition-all">
                                Visit Help Center
                            </Link>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}
