import { Link } from 'react-router-dom';

import { Panel } from '@/components/ui/Panel';
import { usePageMetadata } from '@/hooks/usePageMetadata';

export function NotFoundPage() {
  usePageMetadata({
    title: 'Page not found',
    description: 'The requested Mechanica page could not be found.'
  });

  return (
    <div className="flex min-h-[62vh] items-center justify-center py-12">
      <Panel className="max-w-2xl text-center">
        <div className="mx-auto flex size-16 items-center justify-center rounded-3xl border border-warm/35 bg-warm/12 text-warm shadow-warm">
          <svg className="size-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
            <path d="M12 9v4" strokeLinecap="round" />
            <path d="M12 17h.01" strokeLinecap="round" />
            <path d="M10.3 3.9 2.7 17.1A3.2 3.2 0 0 0 5.5 22h13a3.2 3.2 0 0 0 2.8-4.9L13.7 3.9a2 2 0 0 0-3.4 0Z" strokeLinejoin="round" />
          </svg>
        </div>

        <p className="mt-6 text-xs font-black uppercase tracking-[0.24em] text-warm">404</p>
        <h1 className="mt-2 text-3xl font-black tracking-[-0.04em] text-foreground">
          This mechanism is outside the current assembly.
        </h1>
        <p className="mt-4 text-sm leading-6 text-muted">
          The page may have moved, or the machine slug does not exist in the registry. Return to
          the catalogue to continue exploring the mechanical systems library.
        </p>

        <Link
          to="/"
          className="interactive-ring mt-6 inline-flex min-h-11 items-center justify-center rounded-2xl border border-accent/70 bg-accent px-5 text-sm font-bold text-white shadow-glow transition hover:bg-accent/90"
        >
          Open catalogue
        </Link>
      </Panel>
    </div>
  );
}