import { Link } from 'react-router-dom';
import Header from '../components/Header';
import Footer from '../components/Footer';

export default function ErrorPage() {
  return (
    <div className="min-h-screen flex flex-col">
      <Header />
      <main id="main-content" className="flex-1" role="main">
        <div className="max-w-md mx-auto px-4 py-24 text-center">
          <div className="text-8xl font-bold mb-4" style={{ color: 'var(--secondary)' }}>404</div>
          <h1 className="text-2xl font-semibold mb-2" style={{ color: 'var(--text)' }}>Seite nicht gefunden</h1>
          <p className="mb-8" style={{ color: 'var(--secondary)' }}>Die angeforderte Seite existiert nicht.</p>
          <Link to="/" className="hms-btn hms-btn-primary">Zur Startseite</Link>
        </div>
      </main>
      <Footer />
    </div>
  );
}
