import Link from "next/link";

export default function FAQSupport() {
    return (
        <div className="mt-16 card-glass-dark rounded-3xl p-8 md:p-12 text-center relative overflow-hidden gsap-fade-up">
            <div className="absolute top-0 right-0 w-64 h-64 bg-primary/10 blur-[80px] rounded-full"></div>
            <div className="absolute bottom-0 left-0 w-64 h-64 bg-primary-light/5 blur-[80px] rounded-full"></div>

            <div className="relative z-10">
                <div className="inline-flex items-center justify-center size-16 bg-gradient-to-br from-primary to-primary-light rounded-2xl shadow-lg mb-6 text-white overflow-hidden group">
                    <span className="material-symbols-outlined text-3xl group-hover:scale-110 transition-transform">
                        support_agent
                    </span>
                </div>
                <h3 className="text-2xl font-bold text-light-surface mb-3">
                    Still have questions?
                </h3>
                <p className="text-text-light-muted mb-8 max-w-lg mx-auto text-lg">
                    Can't find the answer you're looking for? Please chat to our friendly team of experts.
                </p>
                <div className="flex flex-col sm:flex-row gap-4 justify-center">
                    <Link
                        href="/contact"
                        className="btn-primary w-full sm:w-auto px-8"
                    >
                        Contact Support
                    </Link>
                    <Link
                        href="/services"
                        className="inline-flex items-center justify-center h-12 px-8 bg-white/5 border border-white/10 hover:border-primary/40 hover:bg-white/10 text-light-surface font-bold rounded-xl transition-all w-full sm:w-auto"
                    >
                        Explore Our Services
                    </Link>
                </div>
            </div>
        </div>
    );
}
