---
import { getCollection } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';
import { formatDate, guidesByReview } from '../../lib/content';

const entries = guidesByReview(await getCollection('guides', ({ data }) => !data.draft));
---

<BaseLayout title="Field guides" description="Maintained explanations of systems that mediate identity, authority, and trust.">
  <section class="shell archive-head">
    <p class="eyebrow">Documentation written by journalists</p>
    <h1 class="display">Field guides</h1>
    <p>The page a smart newcomer needs after reading three contradictory accounts: what the system is, who must trust whom, what it knows, and what happens when access is lost.</p>
  </section>
  <section class="shell guide-list">
    {entries.length > 0 ? entries.map((entry, index) => (
      <article>
        <span>0{index + 1}</span>
        <div>
          <h2><a href={`/guides/${entry.id}`}>{entry.data.title}</a></h2>
          <p>{entry.data.description}</p>
        </div>
        <small>Last reviewed<br />{formatDate(entry.data.reviewed)}</small>
      </article>
    )) : <p class="empty-state">The first guides are in editorial review. Staleness will be visible once they publish.</p>}
  </section>
</BaseLayout>

<style>
  .archive-head { padding: clamp(4rem, 9vw, 8rem) 0; }
  .archive-head > p:last-child { max-width: 62ch; color: var(--muted); }
  .guide-list article { display: grid; grid-template-columns: 5rem 1fr 10rem; gap: 2rem; padding: 2rem 0; border-top: 1px solid var(--rule); }
  .guide-list > article > span { color: var(--amend); font-family: 'IBM Plex Mono', monospace; font-size: .72rem; }
  h2 { margin: 0; font-family: 'Newsreader Variable', Georgia, serif; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1; }
  h2 a { text-decoration: none; }
  p, small { color: var(--muted); }
  small { font-family: 'IBM Plex Mono', monospace; font-size: .66rem; text-transform: uppercase; }
  @media (max-width: 650px) { .guide-list article { grid-template-columns: 2rem 1fr; } small { grid-column: 2; } }
</style>