---
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",
};

// Werte-Akrostichon der Kita Regenbogen (aus dem Kita-Leitbild)
const kitaAkrostichon = [
  "Kreativ", "Individuell", "Transparent", "Authentisch",
  "Ressourcenorientiert", "Energiegeladen", "Großzügig", "Engagiert",
  "Neugierig", "Bedürfnisorientiert", "Offen", "Gelassen", "Einfühlsam", "Nachhaltig",
];
const rbCycle = [
  "var(--color-rb-red)", "var(--color-rb-orange)", "var(--color-rb-yellow)",
  "var(--color-rb-green)", "var(--color-rb-cyan)", "var(--color-rb-blue)", "var(--color-rb-violet)",
];
const kitaHaus = [
  "Voller Respekt und Wertschätzung",
  "mit Platz für Individualität",
  "mit Ritualen, die Orientierung bieten",
  "mit Freiraum für eigene Ideen und Gedanken",
  "mit der Möglichkeit, Fehler zu machen",
  "mit viel Zeit zum Spielen",
];
---

<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>

  <!-- Unsere Kita -->
  <Wave color="var(--color-paper-2)" />
  <section class="bg-[var(--color-paper-2)]">
    <div class="section">
      <div class="max-w-3xl mb-12">
        <p class="eyebrow">Unsere Kita</p>
        <h2 class="mt-2 text-3xl md:text-4xl font-bold">Wofür die Kita steht.</h2>
        <p class="mt-4 text-[var(--color-text-muted)] leading-relaxed">
          Die bewegungsfreundliche Kita „Regenbogen" (Träger: EJF) in Berlin-Heiligensee — in ihren eigenen Worten.
        </p>
      </div>

      <div class="grid md:grid-cols-2 gap-7 items-start">
        <!-- Credo -->
        <div class="sticker tilt-l">
          <Decor type="heart" class="w-10 mb-4 anim-float" />
          <p class="font-display text-xl md:text-2xl font-semibold text-[var(--color-text)] mb-5 leading-snug">
            „Wie muss ein Haus sein, in dem Kinder groß werden?"
          </p>
          <ul class="space-y-3">
            {kitaHaus.map((item) => (
              <li class="flex gap-3 items-start">
                <span class="text-[var(--color-rb-green)] font-bold mt-0.5">✓</span>
                <span class="text-[var(--color-text)] leading-relaxed">{item}</span>
              </li>
            ))}
          </ul>
        </div>

        <!-- Akrostichon -->
        <div class="sticker">
          <p class="eyebrow !text-[var(--color-rb-violet)] mb-4">Kita Regenbogen</p>
          <ul class="space-y-1.5">
            {kitaAkrostichon.map((word, i) => (
              <li class:list={["flex items-baseline gap-3", i === 3 && "mb-3"]}>
                <span class="font-display font-black text-2xl md:text-3xl leading-none w-7 shrink-0 text-center" style={`color:${rbCycle[i % 7]}`}>{word.charAt(0)}</span>
                <span class="text-[var(--color-text)] text-lg">{word.slice(1)}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  </section>
  <Wave color="var(--color-paper)" flip={true} />

  <!-- 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>
