import Link from "next/link";

export default function NotFoundContent() {
    return (
        <main className="flex-grow flex flex-col items-center justify-center py-16 px-4 relative overflow-hidden min-h-[80vh]">
            {/* Abstract Tech Background Decoration */}
            <div className="absolute inset-0 pointer-events-none opacity-5">
                <div className="absolute top-20 left-10 w-64 h-64 border-2 border-text-main rounded-full border-dashed animate-[spin_60s_linear_infinite]" />
                <div className="absolute bottom-20 right-10 w-96 h-96 border-2 border-primary rounded-full border-dotted animate-[spin_45s_linear_infinite_reverse]" />
            </div>
            <div className="w-full max-w-[960px] flex flex-col items-center gap-12 relative z-10">
                {/* Hero Section */}
                <div className="flex flex-col items-center text-center gap-6">
                    {/* Visual Element: Tech Illustration + 404 */}
                    <div className="relative mb-4">
                        <h1 className="text-[120px] md:text-[180px] font-black leading-none text-text-main drop-shadow-[6px_6px_0px_rgba(19,236,146,0.5)] select-none">
                            404
                        </h1>
                        {/* Broken Circuit Decoration Overlay */}
                        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full flex items-center justify-center pointer-events-none opacity-80 mix-blend-multiply">
                            <svg
                                className="w-[120%] h-auto"
                                fill="none"
                                height="150"
                                viewBox="0 0 300 150"
                                width="300"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <path
                                    d="M10 75 H 80 L 90 55 L 110 95 L 120 75 H 180"
                                    stroke="#13ec92"
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth="4"
                                />
                                <path
                                    d="M220 75 H 290"
                                    stroke="#94a3b8"
                                    strokeDasharray="8 8"
                                    strokeLinecap="round"
                                    strokeWidth="4"
                                />
                                <circle
                                    cx="200"
                                    cy="75"
                                    fill="white"
                                    r="12"
                                    stroke="#111815"
                                    strokeWidth="4"
                                />
                                <path d="M192 67 L 208 83" stroke="#111815" strokeWidth="3" />
                                <path d="M208 67 L 192 83" stroke="#111815" strokeWidth="3" />
                            </svg>
                        </div>
                    </div>
                    <div className="space-y-4 max-w-[600px]">
                        <h2 className="text-3xl md:text-4xl font-bold text-404-primary-dark tracking-tight">
                            Oops! This Page is Off the Map.
                        </h2>
                        <p className="text-text-main/70 text-lg md:text-xl font-medium leading-relaxed">
                            We can't seem to find the page you're looking for. It might have
                            been removed, renamed, or is temporarily disconnected from our
                            server grid.
                        </p>
                    </div>
                    {/* Primary CTA */}
                    <div className="pt-4">
                        <Link
                            className="inline-flex items-center justify-center h-12 px-8 bg-primary hover:bg-404-primary-dark transition-all duration-300 rounded-xl text-text-main text-base font-bold shadow-[4px_4px_0px_0px_rgba(17,24,21,1)] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_0px_rgba(17,24,21,1)] active:translate-y-[4px] active:shadow-none"
                            href="/"
                        >
                            <span className="material-symbols-outlined mr-2 text-[20px]">
                                home
                            </span>
                            Back to Homepage
                        </Link>
                    </div>
                    {/* Secondary Links */}
                    <div className="mt-8 pt-8 border-t border-gray-100 w-full max-w-md">
                        <p className="text-sm font-semibold text-text-main/50 mb-4 uppercase tracking-wider">
                            Helpful Links
                        </p>
                        <div className="flex flex-wrap justify-center gap-6">
                            <Link
                                className="group flex items-center text-text-main font-semibold transition-colors hover:text-404-accent-orange"
                                href="/services"
                            >
                                <span className="material-symbols-outlined mr-1 text-[18px] text-primary group-hover:text-404-accent-orange transition-colors">
                                    design_services
                                </span>
                                Our Services
                            </Link>
                            <Link
                                className="group flex items-center text-text-main font-semibold transition-colors hover:text-404-accent-orange"
                                href="/faq"
                            >
                                <span className="material-symbols-outlined mr-1 text-[18px] text-primary group-hover:text-404-accent-orange transition-colors">
                                    help_center
                                </span>
                                FAQ
                            </Link>
                            <Link
                                className="group flex items-center text-text-main font-semibold transition-colors hover:text-404-accent-orange"
                                href="/contact"
                            >
                                <span className="material-symbols-outlined mr-1 text-[18px] text-primary group-hover:text-404-accent-orange transition-colors">
                                    support_agent
                                </span>
                                Contact Support
                            </Link>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    );
}
