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

export async function getStaticPaths() {
  const posts = await getAllPosts();
  return posts.map((p: any) => ({ params: { slug: p.slug } }));
}

const { slug } = Astro.params;
const post = await getPost(slug!);

if (!post) return Astro.redirect("/aktuelles");

const bodyHtml = post.body ?? "";
const dateFormatted = new Date(post.published_at).toLocaleDateString("de-DE", {
  day: "numeric", month: "long", year: "numeric",
});
---

<Layout
  title={post.title}
  description={post.excerpt}
  ogImage={post.cover_image ? imageUrl(post.cover_image) : undefined}
>
  <div class="max-w-6xl mx-auto px-4 pt-6">
    <a href="/aktuelles" class="text-sm text-[var(--color-text-muted)] hover:text-[var(--color-primary)]">← Alle Beiträge</a>
  </div>

  {post.cover_image && (
    <div class="max-w-6xl mx-auto px-4 mt-6">
      <div class="aspect-video rounded-3xl overflow-hidden">
        <img src={imageUrl(post.cover_image, 1200)} alt={post.title} class="w-full h-full object-cover" />
      </div>
    </div>
  )}

  <article class="section max-w-3xl">
    <time class="chip" datetime={post.published_at}>📅 {dateFormatted}</time>
    <h1 class="text-4xl md:text-5xl font-black text-[var(--color-text)] mt-4 mb-6 leading-[1.05]">{post.title}</h1>
    {post.excerpt && <p class="text-xl text-[var(--color-text-muted)] mb-8 leading-relaxed">{post.excerpt}</p>}
    {bodyHtml && (
      <div class="prose prose-lg max-w-none text-[var(--color-text-muted)]" set:html={bodyHtml} />
    )}
  </article>

  <div class="max-w-3xl mx-auto px-4 pb-16">
    <div class="rainbow-bar rounded-full mb-8"></div>
    <div class="flex flex-col sm:flex-row gap-4">
      <a href="/mitglied-werden" class="btn-primary">Mitglied werden</a>
      <a href="/aktuelles" class="btn-secondary">Mehr Beiträge</a>
    </div>
  </div>
</Layout>
