---
import '@fontsource-variable/space-grotesk';
import '@fontsource-variable/inter';
import '@fontsource-variable/jetbrains-mono';
import '@styles/global.css';
import ThemeScript from '@components/core/ThemeScript.astro';
import { en } from '@i18n/dictionary.en';
import { no } from '@i18n/dictionary.no';
---

<!doctype html>
<html lang="en" data-theme="dark">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>404 — Connor Babbington</title>
    <meta name="robots" content="noindex,follow" />
    <ThemeScript />
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
  </head>
  <body>
    <main class="mx-auto flex min-h-screen max-w-2xl flex-col justify-center px-6">
      {/* Trace motif frays at the break (A10) */}
      <svg width="320" height="40" viewBox="0 0 320 40" fill="none" aria-hidden="true">
        <path d="M2 20 H140" stroke="var(--accent)" stroke-width="1.5" />
        <path
          d="M150 20 H318"
          stroke="var(--accent)"
          stroke-width="1.5"
          stroke-dasharray="2 6"
          opacity="0.6"
        ></path>
      </svg>

      <p class="mt-6 font-mono text-mono-label uppercase tracking-[0.08em] text-accent">
        {en.notFound.code} · {no.notFound.code}
      </p>
      <h1 class="mt-3 text-h1">{en.notFound.title}</h1>
      <p class="mt-2 text-body-lg text-ink-muted">{en.notFound.body}</p>

      <h2 class="mt-8 text-h3 text-ink-muted">{no.notFound.title}</h2>
      <p class="mt-1 text-body text-ink-muted">{no.notFound.body}</p>

      <div class="mt-8 flex flex-wrap gap-3">
        <a href="/" class="rounded-sm bg-accent px-4 py-2.5 font-semibold text-accent-ink">
          {en.notFound.home}
        </a>
        <a href="/no/" class="rounded-sm border border-line-strong px-4 py-2.5 text-ink">
          {no.notFound.home}
        </a>
        <a href="/projects/" class="rounded-sm border border-line-strong px-4 py-2.5 text-ink">
          {en.notFound.projects}
        </a>
      </div>
    </main>
  </body>
</html>
