import React from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { appConfig, scanPath } from '@/lib/appConfig';

export default function PageNotFound() {
  const location = useLocation();
  const navigate = useNavigate();
  const home = appConfig.mode === 'SHIRE_MODULE' ? scanPath('') : '/';

  return (
    <div className="flex min-h-[55vh] items-center justify-center p-6 text-zinc-100">
      <div className="w-full max-w-md rounded-2xl border border-white/10 bg-[#111114] p-8 text-center">
        <p className="text-6xl font-light text-zinc-700">404</p>
        <h1 className="mt-5 text-2xl font-semibold">ScanForge page not found</h1>
        <p className="mt-3 text-sm leading-6 text-zinc-500">The route <span className="font-mono text-zinc-300">{location.pathname}</span> is not registered in this ScanForge build.</p>
        <button onClick={() => navigate(home)} className="mt-6 rounded-xl bg-[#7dff72] px-5 py-3 text-sm font-bold text-black">Return to Scanner Dashboard</button>
      </div>
    </div>
  );
}
