---
import Base from '../layouts/Base.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
import { getCollection } from 'astro:content';

const entries = (await getCollection('entries'))
  .sort((a, b) => (b.data.updatedDate ?? b.data.pubDate ?? new Date(0)).valueOf()
                - (a.data.updatedDate ?? a.data.pubDate ?? new Date(0)).valueOf())
  .slice(0, 10);
---

<Base title={SITE_TITLE} description={SITE_DESCRIPTION}>
  <div class="max-w-3xl mx-auto">
    <div class="mb-8">
      <h1 class="text-3xl font-bold mb-2" style="color: var(--text-primary)">
        Bincio<span style="color: var(--accent)">Wiki</span>
      </h1>
      <p style="color: var(--text-4)">The collective memory of the Bincio group.</p>
    </div>

    {entries.length > 0 && (
      <section>
        <h2 class="text-lg font-semibold mb-4" style="color: var(--text-2)">Recent pages</h2>
        <ul class="space-y-2">
          {entries.map(entry => (
            <li>
              <a
                href={`/entries/${entry.id}/`}
                class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-zinc-800 transition-colors group"
                style="background: var(--bg-card)"
              >
                <span class="text-sm font-medium group-hover:text-white transition-colors" style="color: var(--text-2)">
                  {entry.data.title}
                </span>
              </a>
            </li>
          ))}
        </ul>
        <p class="mt-4 text-sm">
          <a href="/entries" style="color: var(--accent)" class="hover:opacity-80 transition-opacity">All pages →</a>
        </p>
      </section>
    )}
  </div>
</Base>
