import Link from 'next/link';
import type { Metadata } from 'next';
import { Navbar, Footer } from './components';
import { getAppUrl } from './lib/utils';

export const metadata: Metadata = {
  title: 'Page Not Found - Uniwor',
  description: 'The page you are looking for does not exist.',
};

const APP_URL = getAppUrl();

export default function NotFound() {
  return (
    <main className="min-h-screen bg-white flex flex-col">
      <Navbar hideNavLinks />
      
      <div className="flex-grow flex items-center justify-center px-6 py-16">
        <div className="max-w-2xl text-center">
          <h1 className="text-9xl font-bold text-[#0077B6] mb-4">404</h1>
          <h2 className="text-4xl font-bold text-[#0A1931] mb-6">Page Not Found</h2>
          <p className="text-lg text-gray-600 mb-8">
            Sorry, we couldn't find the page you're looking for. 
            The page might have been moved or deleted.
          </p>
          <div className="flex gap-4 justify-center">
            <Link 
              href="/"
              className="px-8 py-3 bg-[#0077B6] text-white rounded-full text-base font-semibold hover:bg-[#005a8d] transition-colors"
            >
              Go to Homepage
            </Link>
            <Link 
              href={`${APP_URL}/login`}
              className="px-8 py-3 border-2 border-[#0077B6] text-[#0077B6] rounded-full text-base font-semibold hover:bg-[#0077B6] hover:text-white transition-colors"
            >
              Go to App
            </Link>
          </div>
        </div>
      </div>

      <Footer />
    </main>
  );
}