---
import Base from "../layouts/Base.astro";

const path = Astro.url.pathname;
const file = `zach${path}.md`;
const routes = ["projects", "notes", "contact"];
---

<Base title="404 — not found" description="that page doesn't exist.">
  <section class="fof" aria-labelledby="fof-heading">
    <h1 id="fof-heading" class="sr-only">404 — page not found</h1>

    <p class="fof__cmd">
      <span class="fof__sig">$</span> cat {file}<span
        class="fof__caret"
        aria-hidden="true"></span>
    </p>
    <p class="fof__err">cat: {file}: No such file or directory</p>

    <p class="fof__cmd fof__cmd--2"><span class="fof__sig">$</span> ls zach/</p>
    <nav class="fof__ls" aria-label="pages">
      <a href="/">~/</a>
      {routes.map((r) => <a href={`/${r}`}>{r}/</a>)}
    </nav>
  </section>
</Base>

<script>
  const fof = document.querySelector<HTMLElement>(".fof");
  const reduce = window.matchMedia("(prefers-reduced-motion: reduce)");
  if (fof && !reduce.matches) {
    fof.classList.add("fof--running");
    window.setTimeout(() => fof.classList.remove("fof--running"), 550);
  }
</script>

<style>
  .fof {
    min-height: 44vh;
    display: grid;
    align-content: center;
    gap: 0.2rem;
  }

  .fof__cmd {
    margin: 0;
    font-family: var(--mono);
    font-size: clamp(1.05rem, 4.4vw, 1.55rem);
    line-height: 1.4;
    color: var(--ink);
    overflow-wrap: anywhere;
  }
  .fof__sig {
    color: var(--accent);
    margin-right: 0.7ch;
  }
  .fof__caret {
    display: inline-block;
    width: 0.5ch;
    height: 1.05em;
    margin-left: 0.12ch;
    vertical-align: -0.16em;
    background: var(--faint);
    animation: fof-blink 1.1s steps(1) infinite;
  }
  @keyframes fof-blink {
    50% {
      opacity: 0;
    }
  }

  .fof__err {
    margin: 0.6rem 0 0;
    font-family: var(--mono);
    font-size: clamp(0.82rem, 3vw, 1.05rem);
    line-height: 1.5;
    color: var(--faint);
    overflow-wrap: anywhere;
  }

  .fof__cmd--2 {
    margin-top: 1.7rem;
  }
  .fof__ls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.7rem;
    margin: 0.55rem 0 0;
    font-family: var(--mono);
    font-size: clamp(0.85rem, 3vw, 1.05rem);
  }
  .fof__ls a {
    color: var(--muted);
    text-decoration: none;
    transition: color 0.16s ease;
  }
  .fof__ls a:hover {
    color: var(--accent);
  }

  .fof__err,
  .fof__cmd--2,
  .fof__ls {
    transition:
      opacity 0.25s ease,
      transform 0.3s ease;
  }
  .fof--running .fof__err,
  .fof--running .fof__cmd--2,
  .fof--running .fof__ls {
    opacity: 0;
    transform: translateY(-3px);
  }

  @media (prefers-reduced-motion: reduce) {
    .fof__caret {
      animation: none;
    }
  }
</style>