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

const projects = await getAllProjects();

const statusLabel: Record<string, string> = {
  planned: "Geplant",
  running: "Laufend",
  done: "Abgeschlossen",
};
const statusColor: Record<string, string> = {
  planned: "var(--color-rb-blue)",
  running: "var(--color-rb-green)",
  done: "var(--color-text-muted)",
};
---

<Layout
  title="Projekte"
  description="Aktuelle und vergangene Projekte des Kitafreunde Regenbogen e.V.: Theater, Natur, Musik, Ausflüge — für alle Kinder der Integrationskita Regenbogen Berlin."
>
  <PageHeader eyebrow="Projekte">
    Was wir schon gemacht haben.<br><span class="squiggle rainbow-text">Was als nächstes kommt.</span>
    <Fragment slot="lead">
      Jedes Projekt erzählt, warum der Verein existiert. Konkret, sichtbar, für alle.
    </Fragment>
  </PageHeader>

  {projects.length === 0 ? (
    <section class="section pt-6">
      <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">Projekte folgen</h2>
        <p class="text-[var(--color-text-muted)]">Wir befüllen den Bereich gerade. Schau bald wieder vorbei!</p>
      </div>
    </section>
  ) : (
    <section class="section pt-0">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {projects.map((p: any) => (
          <a href={`/projekte/${p.slug}`} class="card group">
            {p.image ? (
              <div class="aspect-video rounded-xl overflow-hidden mb-4 bg-[var(--color-surface-alt)]">
                <img src={imageUrl(p.image, 600)} alt={p.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">
              <span class="text-xs font-semibold px-2 py-0.5 rounded-full bg-current/10"
                style={`color: ${statusColor[p.status ?? "done"]}`}>
                {statusLabel[p.status ?? "done"]}
              </span>
              {p.date && <span class="text-xs text-[var(--color-text-muted)]">{p.date}</span>}
            </div>
            <h3 class="font-bold text-lg mb-2 group-hover:text-[var(--color-primary)] transition-colors">{p.title}</h3>
            <p class="text-sm text-[var(--color-text-muted)] line-clamp-3">{p.summary}</p>
            {p.target_group && (
              <p class="text-xs text-[var(--color-text-muted)] mt-3">👥 {p.target_group}</p>
            )}
          </a>
        ))}
      </div>
    </section>
  )}

  <!-- Idee einbringen -->
  <section class="section text-center">
    <div class="card max-w-lg mx-auto bg-[var(--color-surface-alt)] border-0 py-10">
      <p class="text-2xl mb-3">💡</p>
      <h2 class="font-bold text-xl mb-2">Du hast eine Idee?</h2>
      <p class="text-[var(--color-text-muted)] text-sm mb-4">Neue Projektvorschläge sind immer willkommen.</p>
      <a href="/kontakt" class="btn-primary text-sm">Idee einbringen →</a>
    </div>
  </section>
</Layout>