---
import { getCollection, render } from 'astro:content';
import MarketingLayout from '../layouts/MarketingLayout.astro';

const entries = (await getCollection('changelog')).sort((a, b) =>
  new Date(b.data.date).getTime() - new Date(a.data.date).getTime()
);

// Pre-render all entries in frontmatter to avoid async .map() in template
const rendered = [];
for (const entry of entries) {
  const { Content } = await render(entry);
  rendered.push({ entry, Content });
}
---
<MarketingLayout title="Changelog">
  <section class="mx-auto max-w-3xl px-6 py-16">
    <h1 class="font-heading text-4xl font-bold mb-12">Changelog</h1>
    <div class="space-y-12">
      {rendered.map(({ entry, Content }) => (
        <article class="border-b border-[var(--color-border)] pb-8">
          <div class="flex items-center gap-3 mb-4">
            <span class="px-3 py-1 bg-[var(--accent-soft)] text-[var(--accent-text)] text-sm font-mono rounded-full">{entry.data.version}</span>
            <time class="text-sm text-[var(--color-text-secondary)]" datetime={entry.data.date.toISOString()}>
              {entry.data.date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
            </time>
          </div>
          <h2 class="font-heading text-xl font-semibold mb-4">{entry.data.title}</h2>
          <div class="prose prose-slate max-w-none">
            <Content />
          </div>
        </article>
      ))}
    </div>
  </section>
</MarketingLayout>
