---
import { getCollection } from 'astro:content';
import AppLayout from '../../layouts/AppLayout.astro';
import { fmtDate } from '../../lib/markdown';

const user = Astro.locals.user;

const allUpdates = await getCollection('updates');
const updates = allUpdates.sort(
  (a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime()
);
---
<AppLayout title="Updates" user={user}>
  <div class="page">

    <header class="page-header">
      <p class="label-sm eyebrow">Updates</p>
      <h1 class="display-md page-title">What we have built.</h1>
      <p class="lead subtitle">
        Progress notes from Fenja — what shipped, what shifted, what is next.
        Posted after each sprint.
      </p>
    </header>

    <ol class="update-list" reversed>
      {updates.map((update) => (
        <li class="update-item">
          <time class="label-sm update-date" datetime={String(update.data.date)}>
            {fmtDate(String(update.data.date))}
          </time>
          <div class="update-content">
            <a href={`/updates/${update.slug}`} class="update-link">
              <h2 class="headline-md update-title">{update.data.title}</h2>
            </a>
            <p class="body-md update-summary">{update.data.summary}</p>
            <a href={`/updates/${update.slug}`} class="read-more label-sm">
              Read update ↗
            </a>
          </div>
        </li>
      ))}
    </ol>

    <footer class="feed-footer">
      <a href="/updates/feed.xml" class="rss-link label-sm">RSS feed</a>
    </footer>

  </div>
</AppLayout>

<style>
  .page {
    padding: var(--space-12) var(--space-20) var(--space-16);
    max-width: var(--content-max);
    margin: 0 auto;
  }

  /* ── Header ──────────────────────────────────────────────────────── */
  .page-header {
    max-width: 44rem;
    margin-bottom: var(--space-12);
  }

  .eyebrow {
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--on-surface-muted);
    margin-bottom: var(--space-3);
  }

  .page-title {
    margin-bottom: var(--space-5);
  }

  .subtitle {
    color: var(--on-surface-variant);
    max-width: var(--reading-max);
    margin: 0;
  }

  /* ── List ────────────────────────────────────────────────────────── */
  .update-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 52rem;
  }

  .update-item {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: var(--space-6);
    padding: var(--space-8) 0;
    border-top: var(--ghost-border);
    align-items: start;
  }
  .update-item:last-child {
    border-bottom: var(--ghost-border);
  }

  .update-date {
    color: var(--on-surface-muted);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    padding-top: 0.25rem;
  }

  .update-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .update-link {
    text-decoration: none;
    border-bottom: none;
    display: block;
  }
  .update-link:hover .update-title {
    color: var(--secondary);
  }
  .update-link:hover {
    border-bottom: none;
  }

  .update-title {
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: var(--tracking-snug);
    margin: 0;
    color: var(--on-surface);
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .update-summary {
    color: var(--on-surface-variant);
    margin: 0;
    line-height: var(--leading-relaxed);
    max-width: var(--reading-max);
  }

  .read-more {
    color: var(--secondary);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: none;
    transition: color var(--duration-fast) var(--ease-standard);
  }
  .read-more:hover {
    color: var(--secondary-dim);
    border-bottom: none;
  }

  /* ── Footer ──────────────────────────────────────────────────────── */
  .feed-footer {
    margin-top: var(--space-8);
  }

  .rss-link {
    color: var(--on-surface-muted);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: none;
  }
  .rss-link:hover {
    color: var(--on-surface-variant);
    border-bottom: none;
  }
</style>
