<!DOCTYPE html>
<html lang="{{ .Site.Language.Locale }}" dir="{{ or .Site.Language.Direction `ltr` }}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#060b10">
  <title>404 — {{ .Site.Title }}</title>

  <script>
    (function() {
      const theme = localStorage.getItem('theme') || 'dark';
      if (theme === 'light') {
        document.documentElement.classList.add('theme-light');
      }
    })();
  </script>

  {{ partialCached "head/css.html" . }}
  {{ partialCached "head/js.html" . }}
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.css">
  {{ $notfound := resources.Get "css/components/404.css" | fingerprint }}
  <link rel="stylesheet" href="{{ $notfound.RelPermalink }}">
</head>
<body>
  <a href="#main-content" class="skip-link">Skip to content</a>
  <canvas id="matrix-canvas" aria-hidden="true" data-mode="background"></canvas>

  {{ partial "header.html" . }}

  <main id="main-content" class="hero--404">
    <div class="content-wrapper">
      <!-- Left: Quote + Search -->
      <div class="hero-left-404">
        <div class="quote-section">
          <div class="quote-mark">"</div>
          <p class="quote-text" id="quote-text">The page you're looking for doesn't exist. But that's okay, nothing exists until you find it.</p>
          <p class="quote-author" id="quote-author">— 404 Philosopher</p>
        </div>

        <div class="search-box">
          <input type="text" placeholder="Search articles..." aria-label="Search">
          <button aria-label="Search">
            <svg data-feather="search"></svg>
          </button>
        </div>

        <nav class="quick-nav">
          <h3>Quick Links</h3>
          <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/articles/">Articles</a></li>
            <li><a href="/is/">About</a></li>
            <li><a href="/is/here">Contact</a></li>
          </ul>
        </nav>
      </div>

      <!-- Right: Recent Articles + Terminal -->
      <div class="hero-right-404">
        <div class="recent-articles">
          <h3>Recent Articles</h3>
          <ul>
            {{ range first 5 (.Site.RegularPages.ByDate.Reverse) }}
              <li>
                <a href="{{ .RelPermalink }}" class="article-link" data-type="{{ .Params.type }}">
                  {{ .Title }}
                </a>
              </li>
            {{ end }}
          </ul>
        </div>

        <div class="terminal-widget">
          <div class="terminal-bar">
            <span class="terminal-dot" style="background: #ff6b6b;"></span>
            <span class="terminal-dot" style="background: #ffd93d;"></span>
            <span class="terminal-dot" style="background: #6bcf7f;"></span>
          </div>
          <div class="terminal-content">
            <div>$ <span class="terminal-prompt">curl https://danix.xyz/lost</span></div>
            <div>404: Not Found</div>
            <div>$ <span class="terminal-prompt">ls /articles</span></div>
            <div id="terminal-files"></div>
          </div>
        </div>
      </div>
    </div>
  </main>

  {{ partial "footer.html" . }}

  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
  <script>feather.replace();</script>

  {{ $notFoundJS := resources.Get "js/404.js" | fingerprint }}
  <script src="{{ $notFoundJS.RelPermalink }}"></script>
</body>
</html>
