import type { Metadata } from "next";
import Link from "next/link";
import styles from "./not-found.module.css";
import { ArrowLeftIcon } from "@phosphor-icons/react/dist/ssr";

export const metadata: Metadata = {
  title: "Seite nicht gefunden",
  description: "Die gesuchte Seite existiert nicht.",
};

export default function NotFound() {
  return (
    <main className={styles.wrapper}>
      <span className={styles.ghost} aria-hidden="true">
        404
      </span>

      <div className={styles.content}>
        <p className={styles.label}>Fehler 404</p>
        <h1 className={styles.heading}>Seite nicht gefunden</h1>
        <p className={styles.description}>
          Die gesuchte Seite existiert leider nicht oder wurde verschoben.
        </p>

        <Link href="/" className={`btn btn--filled ${styles.cta}`}>
          <ArrowLeftIcon className="btn-icon" size={18} />
          Zurück zur Startseite
        </Link>
      </div>
    </main>
  );
}