---
import Layout from "../../layouts/Layout.astro";
import { getAllProjects, getProject } from "../../lib/sanity";
import { toHTML } from "@portabletext/to-html";

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

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

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

const bodyHtml = project.body ? toHTML(project.body) : "";
---

<Layout
  title={project.title}
  description={project.summary}
  ogImage={project.image?.asset?.url}
>
  <!-- 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?.asset?.url && (
    <div class="max-w-6xl mx-auto px-4 mt-6">
      <div class="aspect-video rounded-3xl overflow-hidden">
        <img src={`${project.image.asset.url}?w=1200&auto=format`} alt={project.title} class="w-full h-full object-cover" />
      </div>
    </div>
  )}

  <section class="section">
    <div class="max-w-3xl">
      <div class="flex items-center gap-3 mb-4 text-sm text-[var(--color-text-muted)]">
        {project.date && <span>📅 {project.date}</span>}
        {project.targetGroup && <span>👥 {project.targetGroup}</span>}
      </div>
      <h1 class="font-brand text-4xl md:text-5xl text-[var(--color-text)] mb-6">{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>