import Head from "next/head";
import Link from "next/link";
import styles from "@/styles/Home.module.css";

export default function NotFound() {
  return (
    <>
      <Head>
        <title>404 — Page Not Found | Bone Lord Bob</title>
        <meta name="robots" content="noindex" />
      </Head>
      <div className={styles.page}>
        <nav className={styles.nav}>
          <span className={styles.navLogo}>
            Bone Lord <span>Bob</span>
          </span>
        </nav>

        <section className={styles.hero} style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div className={styles.heroContent} style={{ textAlign: 'center' }}>
            <span className={styles.eyebrow}>404</span>
            <h1 className={styles.heroTitle}>
              Lost in the <em>Bone Kingdom</em>
            </h1>
            <p className={styles.heroSub}>
              This page doesn&apos;t exist. Even the dead couldn&apos;t find it.
            </p>
            <div className={styles.heroCtas}>
              <Link href="/" className={styles.btnPrimary}>
                Return to the World
              </Link>
            </div>
          </div>
        </section>

        <footer className={styles.footer}>
          <span className={styles.footerLogo}>Bone Lord <span>Bob</span></span>
          <span className={styles.footerNote}>© {new Date().getFullYear()} Mathison Projects Inc.</span>
        </footer>
      </div>
    </>
  );
}
