---
// Docs 404 — mirrors the 404 on cocoindex-io.github.io (same copy, same
// typography) so a visitor hitting a broken /docs/ link sees a consistent
// "coconut rolled off the tree" experience across the two sites.
import '../styles/globals.css';
import Topbar from '../components/Topbar.astro';
import MobileSheet from '../components/MobileSheet.astro';
import { THEME_COLOR, SITE_MAIN, SITE_BLOG, SITE_EXAMPLES } from '../consts';

const base = import.meta.env.BASE_URL.replace(/\/$/, '') || '/';
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="color-scheme" content="light" />
    <meta name="theme-color" content={THEME_COLOR} />
    <meta name="robots" content="noindex, nofollow" />
    <title>404 · Page not found · Coconut rolled away</title>
    <meta name="description" content="That page wandered off. Let's get you back to something that exists." />
    <link rel="icon" href={`${base}/img/favicon.ico`} />
    <!-- Fonts self-hosted via @fontsource in src/styles/globals.css (GUIDELINE §5.2). -->
  </head>
  <body>
    <Topbar mobileSheetId="mobileSheet" />
    <MobileSheet sidebarItems={null} />
    <main class="nf">
      <section class="nf-hero">
        <div class="wrap nf-grid">
          <div class="nf-copy">
            <div class="nf-eyebrow">
              <span class="dot" aria-hidden="true"></span>
              <span>Error · 404 · Page not found</span>
            </div>

            <h1 class="nf-title">
              This coconut<br />
              <em>rolled off the tree.</em>
            </h1>

            <p class="nf-lead">
              We looked under every leaf — nothing here. Maybe the URL had a typo,
              or the page retired to the beach.
            </p>

            <div class="nf-ctas">
              <a href={SITE_MAIN} class="btn btn-primary btn-xl">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                  <path d="M3 11.5 12 4l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1v-8.5Z"
                        stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
                </svg>
                Back to cocoindex.io
              </a>
              <a href={base} class="btn btn-outline-muted">Read the docs</a>
              <a href={SITE_BLOG} class="btn btn-outline-muted">Visit the blog</a>
              <a href={SITE_EXAMPLES} class="btn btn-outline-muted">Browse examples</a>
            </div>

            <div class="nf-tip">
              <span class="caps">Pro tip</span>
              <span>Incremental indexing can't find what was never indexed. Try one of the links above.</span>
            </div>
          </div>
        </div>
      </section>
    </main>

    <style is:global>
      /* Shared with the main-site 404: @cocoindex/brand/not-found.css. */
      @import '@cocoindex/brand/not-found.css';
    </style>
  </body>
</html>
