import Link from "next/link";

export default function ThankYouHero() {
    return (
        <section className="relative bg-white pt-16 pb-20 px-4 overflow-hidden">
            {/* Background Decorations */}
            <div className="absolute top-0 left-0 w-64 h-64 bg-slate-50 rounded-br-full opacity-50 -z-10 pointer-events-none transform -translate-x-1/2 -translate-y-1/2"></div>
            <div className="absolute top-20 right-0 w-48 h-48 border-[20px] border-slate-50 rounded-full opacity-50 -z-10 pointer-events-none transform translate-x-1/3"></div>

            <div className="max-w-3xl mx-auto flex flex-col items-center text-center">
                {/* Success Icon */}
                <div className="w-20 h-20 bg-thankyou-primary/10 rounded-full flex items-center justify-center mb-8 animate-[fade-in-up_0.5s_ease-out]">
                    <span className="material-symbols-outlined text-5xl text-thankyou-primary">
                        check_circle
                    </span>
                </div>

                {/* Headline */}
                <h1 className="text-4xl md:text-5xl font-extrabold text-thankyou-slate-900 mb-6 tracking-tight">
                    Thank You for Reaching Out!
                </h1>

                {/* Subheadline */}
                <p className="text-lg text-thankyou-slate-600 max-w-xl mb-10 leading-relaxed">
                    We’ve received your message and our team will get back to you within 24 hours. We appreciate your interest in AASI Technologies.
                </p>

                {/* Primary CTA */}
                <Link
                    href="/"
                    className="bg-thankyou-primary hover:bg-thankyou-primary-dark hover:shadow-lg transition-all transform hover:-translate-y-0.5 text-thankyou-slate-900 text-base font-bold px-8 py-3 rounded-xl shadow-md flex items-center gap-2"
                >
                    <span className="material-symbols-outlined text-xl">arrow_back</span>
                    Back to Homepage
                </Link>
            </div>
        </section>
    );
}
