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

const team = await getTeam();

const roleLabel: Record<string, string> = {
  chair: "Vorsitzende/r",
  deputy: "Stellvertretung",
  treasurer: "Kassenwart/in",
  board: "Beisitz",
};
---

<Layout
  title="Über uns"
  description="Wer sind die Kitafreunde Regenbogen? Der Förderverein der Kita Regenbogen Berlin — gegründet von Eltern, getragen von einer Gemeinschaft."
>
  <!-- Hero -->
  <PageHeader eyebrow="Über uns">
    Wir sind die <span class="squiggle rainbow-text">Kitafreunde.</span>
    <Fragment slot="lead">
      Gegründet von Eltern, getragen von einer Gemeinschaft — für eine Kita,
      die mehr kann als das Minimum.
    </Fragment>
  </PageHeader>

  <!-- Geschichte -->
  <section class="section pt-6">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-16 items-start">
      <div class="prose prose-lg max-w-none text-[var(--color-text-muted)] leading-relaxed space-y-5">
        <p>
          Irgendwann haben Eltern angefangen zu fragen: Was bräuchte die Kita, wenn sie dürfte?
          Was würde den Kindern gut tun, wenn das Budget keine Rolle spielt?
        </p>
        <p>
          Die Antworten waren überraschend konkret. Ein Theaterstück. Eine Woche Garten und Kompost.
          Trommelkurse. Ein Ausflug zum See für alle — wirklich für alle. Und dafür, dass kein Kind
          fehlt, weil zuhause gerade kein Geld da ist.
        </p>
        <p>
          Der Kitafreunde Regenbogen e.V. wurde gegründet, weil diese Antworten umsetzbar sind.
          Nicht durch das Land. Nicht durch den Träger. Durch uns.
        </p>
        <p>
          Die Kita Regenbogen ist ein Ort, an dem Kinder gemeinsam spielen, lernen und
          wachsen — und der Förderverein trägt diese Haltung nach außen:
          Alle sind dabei. Alle zählen. Kein Abstrich, kein Sonderfall.
        </p>
        <p>
          Zwischenzeitlich war der Verein ruhiger geworden. Jetzt erwacht er neu — mit frischen
          Mitgliedern, klaren Zielen und dem Willen, der Kita Regenbogen den Rücken zu stärken,
          den sie verdient.
        </p>
      </div>

      <!-- Leitbild -->
      <div class="space-y-6">
        <div class="card bg-[var(--color-surface-alt)]">
          <h2 class="text-xl font-bold mb-4 text-[var(--color-primary)]">Unser Leitbild</h2>
          <p class="font-semibold text-[var(--color-text)] mb-3">
            Wir sind nicht für das Alltägliche zuständig. Das ist Aufgabe des Landes.
          </p>
          <p class="text-[var(--color-text-muted)] text-sm leading-relaxed">
            Wir sind für das, was darüber hinausgeht. Das i-Tüpfelchen. Die Erinnerung.
            Die Chance, die sonst keine Chance hätte.
          </p>
        </div>
        <div class="space-y-4">
          {[
            { icon: "🌈", text: "Jedes Kind zählt — unabhängig von Herkunft, Behinderung oder dem Kontostand der Eltern" },
            { icon: "🎯", text: "Wirkung vor Verwaltung — jeder Euro geht an die Kinder, nicht in den Apparat" },
            { icon: "🤝", text: "Gemeinschaft ist kein Ziel, sie ist das Mittel" },
          ].map(({ icon, text }) => (
            <div class="flex gap-4 items-start">
              <span class="blob shrink-0 w-11 h-11 grid place-items-center text-xl" style="background: var(--color-accent-light); box-shadow: inset 0 0 0 2px rgba(245,130,13,0.25);">{icon}</span>
              <p class="text-[var(--color-text)] leading-relaxed pt-1.5">{text}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>

  <!-- Team -->
  {team.length > 0 && (
    <Fragment>
      <Wave color="var(--color-paper-2)" />
      <section class="bg-[var(--color-paper-2)]">
        <div class="section">
          <p class="eyebrow">Wer dahintersteckt</p>
          <h2 class="mt-2 text-3xl md:text-4xl font-bold mb-3">Der Vorstand</h2>
          <p class="text-[var(--color-text-muted)] mb-10 max-w-2xl">
            Wir sind Eltern. Wir haben Kinder in der Kita. Wir kennen den Unterschied zwischen dem, was ist, und dem, was sein könnte.
          </p>
          <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
            {team.map((member: any) => (
              <div class="text-center">
                <div class="w-24 h-24 mx-auto mb-3 blob bg-[var(--color-primary-light)] flex items-center justify-center text-white text-2xl overflow-hidden ring-4 ring-white shadow-[0_14px_30px_-16px_rgba(42,36,51,0.5)]">
                  {member.photo
                    ? <img src={imageUrl(member.photo, 96)} alt={member.name} class="w-full h-full object-cover" />
                    : "👤"}
                </div>
                <p class="font-semibold">{member.name}</p>
                <p class="text-sm text-[var(--color-primary)]">{roleLabel[member.role] ?? member.role}</p>
                {member.bio && <p class="text-xs text-[var(--color-text-muted)] mt-1">{member.bio}</p>}
              </div>
            ))}
          </div>
        </div>
      </section>
      <Wave color="var(--color-paper)" flip={true} />
    </Fragment>
  )}

  <!-- FAQ -->
  <section class="section">
    <p class="eyebrow">Gut zu wissen</p>
    <h2 class="mt-2 text-3xl md:text-4xl font-bold mb-8">Häufige Fragen</h2>
    <div class="space-y-4 max-w-3xl">
      {[
        {
          q: "Was ist ein Förderverein eigentlich?",
          a: "Ein eingetragener, gemeinnütziger Verein, der eine Einrichtung unterstützt — nicht als Ersatz für staatliche Leistungen, sondern als Ergänzung für das, was darüber hinaus geht.",
        },
        {
          q: "Wer kann Mitglied werden?",
          a: "Alle. Eltern, Großeltern, Nachbar*innen, ehemalige Kitafamilien, Menschen ohne jeden Kita-Bezug. Natürliche und juristische Personen.",
        },
        {
          q: "Muss ich aktiv mitarbeiten?",
          a: "Nein. Wer möchte, kann — wer nicht möchte oder kann, zahlt einfach den Beitrag. Beides hilft.",
        },
        {
          q: "Wofür wird mein Beitrag verwendet?",
          a: "Ausschließlich für Vereinszwecke: Projekte, Veranstaltungen, Materialien und die finanzielle Unterstützung von Kindern, die es brauchen. Kein Vorstandsmitglied erhält eine Vergütung.",
        },
      ].map(({ q, a }) => (
        <div class="card">
          <h3 class="font-bold mb-2">{q}</h3>
          <p class="text-[var(--color-text-muted)] text-sm leading-relaxed">{a}</p>
        </div>
      ))}
    </div>
  </section>

  <!-- CTA -->
  <section class="section">
    <div class="relative overflow-hidden rounded-[2.5rem] bg-[var(--color-paper-2)] text-center px-6 py-14">
      <Decor type="heart" class="w-12 mx-auto mb-4 anim-float" />
      <h2 class="text-3xl md:text-4xl font-bold mb-2">Werd Teil davon.</h2>
      <p class="text-[var(--color-text-muted)] mb-8">Ab 1 € im Monat. Kein Aufwand, große Wirkung.</p>
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <a href="/mitglied-werden" class="btn-primary text-base"><span aria-hidden="true">♥</span> Jetzt Mitglied werden</a>
        <a href="/kontakt" class="btn-secondary text-base">Schreib uns</a>
      </div>
    </div>
  </section>
</Layout>
