import Link from "next/link";

export default function PrivacyHero() {
    return (
        <section className="bg-section-dark pt-32 pb-20 relative overflow-hidden border-b border-white/5">
            {/* Background Effects */}
            <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-primary/20 rounded-full blur-[100px] -translate-y-1/2 translate-x-1/2 pointer-events-none" />
            <div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-accent/10 rounded-full blur-[100px] translate-y-1/2 -translate-x-1/3 pointer-events-none" />

            <div className="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                <div className="flex flex-col gap-6 max-w-3xl text-center md:text-left mx-auto md:mx-0">
                    <div className="flex items-center justify-center md:justify-start gap-2 text-primary font-bold text-sm mb-2 tracking-widest uppercase">
                        <Link className="hover:color-primary-dark transition-colors" href="/">Home</Link>
                        <span className="material-symbols-outlined text-xs">chevron_right</span>
                        <span className="text-primary-dark">Legal</span>
                    </div>
                    <h1 className="text-4xl md:text-6xl font-black color-primary-dark tracking-tight leading-tight gsap-fade-up">
                        Privacy <span className="text-primary">Policy</span>
                    </h1>
                    <p className="text-text-muted text-lg md:text-xl font-normal leading-relaxed gsap-fade-up" style={{ animationDelay: '0.1s' }}>
                        Last Updated: January 1, 2026
                    </p>
                </div>
            </div>
        </section>
    );
}
