import Link from 'next/link';
import Header from '@/components/ui/header';
import Footer from '@/components/ui/footer';
import { Ghost } from 'lucide-react';
import { BRAND } from '@/lib/white-label/constants';

export default function NotFound() {
  return (
    <main className="min-h-screen bg-brand-bg flex flex-col">
      <Header />
      <div className="flex-1 flex items-center justify-center px-4">
        <div className="text-center max-w-lg" data-continuity="theSpacesBetweenTheWords">
          <Ghost className="w-20 h-20 text-brand mx-auto mb-6 opacity-60" />
          <h1 className="text-6xl font-bold text-white mb-3">404</h1>
          <h2 className="text-xl text-gray-300 mb-2">Page Not Found</h2>
          <p className="text-gray-400 mb-8">
            The page you&apos;re looking for doesn&apos;t exist or has been moved.
            Even our AI agents couldn&apos;t track it down.
          </p>
          <Link
            href="/"
            className="inline-flex items-center gap-2 px-6 py-3 bg-brand hover:bg-brand-light text-white font-medium rounded-lg transition-colors"
          >
            Back to {BRAND.productName}
          </Link>
        </div>
      </div>
      <Footer />
    </main>
  );
}
