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

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

const { slug } = Astro.params;
const project = await getProject(slug!);

if (!project) return Astro.redirect("/projekte");

const bodyHtml = project.body ?? "";
---

<Layout
  title={project.title}
  description={project.summary}
  ogImage={project.image ? imageUrl(project.image) : undefined}
>
  <!-- Breadcrumb -->
  <div class="max-w-6xl mx-auto px-4 pt-6">
    <a href="/projekte" class="text-sm text-[var(--color-text-muted)] hover:text-[var(--color-primary)]">← Alle Projekte</a>
  </div>

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

  <section class="section">
    <div class="max-w-3xl">
      <div class="flex flex-wrap items-center gap-2 mb-5">
        {project.date && <span class="chip">📅 {project.date}</span>}
        {project.target_group && <span class="chip">👥 {project.target_group}</span>}
      </div>
      <h1 class="text-4xl md:text-5xl font-black text-[var(--color-text)] mb-6 leading-[1.05]">{project.title}</h1>
      <p class="text-xl text-[var(--color-text-muted)] leading-relaxed mb-8">{project.summary}</p>
      {bodyHtml && (
        <div class="prose prose-lg max-w-none text-[var(--color-text-muted)]" set:html={bodyHtml} />
      )}
    </div>
  </section>

  <section class="section text-center border-t border-[var(--color-border)] pt-12">
    <p class="text-[var(--color-text-muted)] mb-4">Solche Projekte werden durch Mitgliedsbeiträge und Spenden möglich.</p>
    <div class="flex flex-col sm:flex-row gap-4 justify-center">
      <a href="/mitglied-werden" class="btn-primary">Mitglied werden</a>
      <a href="/unterstuetzen" class="btn-secondary">Spenden</a>
    </div>
  </section>
</Layout>