import React from 'react';
import { Button } from '../components/ui/Button.tsx';

const NotFoundPage: React.FC = () => {
  return (
    <div className="container mx-auto px-4 py-24 text-center">
      <div className="max-w-md mx-auto">
        <h1 className="text-6xl font-display font-bold text-[var(--brand-500)] mb-4">404</h1>
        <p className="text-xl text-[var(--ink-muted)] mb-2 font-mono">Route not mounted.</p>
        <p className="text-[var(--ink-muted)] mb-8">
          The page you're looking for doesn't exist or has been removed.
        </p>
        <div className="flex gap-4 justify-center">
          <Button variant="primary" onClick={() => window.location.hash = '#/'}>
            Return Home
          </Button>
          <Button variant="secondary" onClick={() => window.location.hash = '#/diagnostics'}>
            Diagnostics
          </Button>
        </div>
      </div>
    </div>
  );
};

export default NotFoundPage;