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

<BaseLayout title="404 - Not Found">
  <div class="not-found-container">
    <h1>404</h1>
  </div>
</BaseLayout>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const base = (window && window.TERMINAL_PROMPT) || "barrett@ruth:~$ ";
    const el = document.querySelector(".terminal-prompt");
    if (!el) return;

    const type = () => {
      const target = "/not-found";
      let i = 0;
      el.textContent = base;
      (function step() {
        if (i < target.length) {
          el.textContent += target.charAt(i++);
          setTimeout(step, 250 / target.length);
        }
      })();
    };

    if (window && typeof window.clearPrompt === "function") {
      window.clearPrompt(250, type);
    } else {
      type();
    }
  });
</script>

<style>
  .not-found-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 60vh;
  }

  h1 {
    font-size: 5em;
    font-weight: normal;
    margin: 0;
  }
</style>
