---
import { getCollection } from 'astro:content';
import BaseLayout from '../layouts/BaseLayout.astro';

const reviews = (await getCollection('reviews')).sort(
  (a, b) => b.data.date.valueOf() - a.data.date.valueOf()
);
const recent = reviews.slice(0, 6);
---

<BaseLayout
  title="Not found"
  description="That page doesn't exist on Unique."
  subheader="That page doesn't exist."
  noindex
>
  <article>
    <p>The page you were looking for isn't here. Maybe one of these will do:</p>

    <h2>Recent reviews</h2>
    <ul class="recent">
      {recent.map((r) => (
        <li>
          <a href={`/reviews/${r.id}/`}>{r.data.name}</a>
          {r.data.subtitle && <span class="subtitle"> — {r.data.subtitle}</span>}
        </li>
      ))}
    </ul>

    <h2>Browse</h2>
    <ul class="nav">
      <li><a href="/">Home</a></li>
      <li><a href="/grid/">Grid</a></li>
      <li><a href="/sources/">Sources</a></li>
      <li><a href="/blog/">Blog</a></li>
      <li><a href="/about/">About</a></li>
    </ul>
  </article>

  <style>
    article h2 {
      margin: 2rem 0 0.6rem;
      font-size: 1.05rem;
    }
    .recent, .nav {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .recent li, .nav li {
      padding: 0.35rem 0;
      border-bottom: 1px solid var(--rule);
    }
    .recent .subtitle { color: var(--muted); }
  </style>
</BaseLayout>
