---
import Layout from "../../layouts/Layout.astro";
import PageHeader from "../../components/PageHeader.astro";
import { getAllPosts, imageUrl } from "../../lib/directus";

const posts = await getAllPosts();

const categoryLabel: Record<string, string> = {
  news: "Vereinsnews",
  event: "Veranstaltung",
  report: "Bericht",
};
---

<Layout title="Aktuelles" description="Neuigkeiten vom Kitafreunde Regenbogen e.V. — Projekte, Veranstaltungen, Vereinsleben.">
  <PageHeader eyebrow="Aktuelles">
    Was gerade<br><span class="squiggle rainbow-text">bei uns passiert.</span>
    <Fragment slot="lead">
      Projekte, Veranstaltungen, Vereinsleben — Neuigkeiten von den Kitafreunden.
    </Fragment>
  </PageHeader>

  <section class="section pt-6">
    {posts.length === 0 ? (
      <div class="card text-center py-16 bg-[var(--color-surface-alt)]">
        <p class="text-4xl mb-4">✍️</p>
        <h2 class="text-xl font-bold mb-2">Bald mehr hier</h2>
        <p class="text-[var(--color-text-muted)]">Wir befüllen den Blog gerade. Schau bald wieder rein!</p>
      </div>
    ) : (
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {posts.map((post: any) => (
          <a href={`/aktuelles/${post.slug}`} class="card group">
            {post.cover_image ? (
              <div class="aspect-video rounded-xl overflow-hidden mb-4 bg-[var(--color-surface-alt)]">
                <img src={imageUrl(post.cover_image, 600)} alt={post.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
              </div>
            ) : (
              <div class="aspect-video rounded-xl mb-4 bg-[var(--color-surface-alt)] flex items-center justify-center text-4xl">📰</div>
            )}
            <div class="flex items-center gap-2 mb-2">
              {post.category && (
                <span class="text-xs font-semibold text-[var(--color-primary)] bg-[var(--color-surface-alt)] px-2 py-0.5 rounded-full">
                  {categoryLabel[post.category] ?? post.category}
                </span>
              )}
              <time class="text-xs text-[var(--color-text-muted)]" datetime={post.published_at}>
                {new Date(post.published_at).toLocaleDateString("de-DE", { day: "numeric", month: "long", year: "numeric" })}
              </time>
            </div>
            <h3 class="font-bold leading-snug group-hover:text-[var(--color-primary)] transition-colors">{post.title}</h3>
            {post.excerpt && <p class="text-sm text-[var(--color-text-muted)] mt-2 line-clamp-3">{post.excerpt}</p>}
          </a>
        ))}
      </div>
    )}
  </section>
</Layout>
