---
import Layout from "../layouts/Layout.astro";
import PageHeader from "../components/PageHeader.astro";
import Decor from "../components/Decor.astro";
---

<Layout
  title="Was wir tun"
  description="Nicht das Pflichtprogramm — das Besondere. Kulturelle Bildung, Naturerfahrungen, Chancengleichheit für alle Kinder der Kita Regenbogen."
>
  <PageHeader eyebrow="Was wir tun">
    Nicht das Pflichtprogramm.<br>
    <span class="squiggle rainbow-text">Das Besondere.</span>
    <Fragment slot="lead">
      Der Staat finanziert die Grundversorgung. Der Träger stellt den Rahmen.
      Der Förderverein füllt den Raum, der danach kommt.
    </Fragment>
  </PageHeader>

  <!-- Erleben -->
  <section id="erleben" class="section pt-6 scroll-mt-24">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
      <div>
        <div class="blob w-16 h-16 grid place-items-center text-3xl mb-5" style="background: rgba(107,63,160,0.12); box-shadow: inset 0 0 0 2px rgba(107,63,160,0.25);">🎭</div>
        <p class="eyebrow !text-[var(--color-rb-violet)]">Staunen</p>
        <h2 class="mt-1 text-3xl md:text-4xl font-bold mb-4" style="color: var(--color-rb-violet)">Erleben</h2>
        <p class="text-[var(--color-text-muted)] leading-relaxed mb-4">
          Kinder brauchen mehr als Struktur. Sie brauchen Staunen.
        </p>
        <p class="text-[var(--color-text-muted)] leading-relaxed mb-4">
          Der Verein ermöglicht Projekte, die im normalen Kitaalltag keinen Platz finden:
          Theaterprojekte, bei denen Kinder selbst auf der Bühne stehen. Musikworkshops ohne
          Vorkenntnisse. Naturerfahrungen, die zeigen, dass Erde nicht nur Schmutz ist, sondern
          Leben. Ausflüge in Museen, Theater, Parks und Orte, die Berliner Kinder kennen sollten.
        </p>
        <p class="font-semibold text-[var(--color-text)]">
          Das sind keine Extras für besondere Kinder. Das ist das, was alle Kinder brauchen.
        </p>
      </div>
      <div class="grid grid-cols-2 gap-4">
        {[
          { icon: "🎪", label: "Theaterprojekte & Besuche" },
          { icon: "🎵", label: "Musik, Tanz & Kreativworkshops" },
          { icon: "🌱", label: "Garten- & Naturprojekte" },
          { icon: "🚌", label: "Ausflüge & Tagesreisen" },
          { icon: "🤸", label: "Zirkus & Bewegung" },
          { icon: "📚", label: "Lesungen & Kunst" },
        ].map(({ icon, label }) => (
          <div class="card text-center py-4">
            <div class="text-3xl mb-2">{icon}</div>
            <p class="text-sm font-medium">{label}</p>
          </div>
        ))}
      </div>
    </div>
  </section>

  <div class="rainbow-bar w-20 mx-auto rounded-full my-6"></div>

  <!-- Teilhabe -->
  <section id="teilhabe" class="section py-0">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
      <div class="order-2 md:order-1 bg-[var(--color-surface-alt)] rounded-3xl p-8">
        <blockquote class="text-2xl font-semibold text-[var(--color-text)] leading-snug mb-6">
          „Kein Kind fragt. Kein Kind wird gefragt."
        </blockquote>
        <div class="space-y-4">
          {[
            "Übernahme von Beiträgen für Ausflüge und Veranstaltungen",
            "Unterstützung bei Materialien und Bedarf",
            "Diskret, unbürokratisch, selbstverständlich",
          ].map((item) => (
            <div class="flex gap-3 items-start">
              <span class="text-[var(--color-rb-green)] text-xl font-bold mt-0.5">✓</span>
              <p class="text-[var(--color-text-muted)]">{item}</p>
            </div>
          ))}
        </div>
      </div>
      <div class="order-1 md:order-2">
        <div class="blob w-16 h-16 grid place-items-center text-3xl mb-5" style="background: rgba(0,166,81,0.12); box-shadow: inset 0 0 0 2px rgba(0,166,81,0.25);">🤝</div>
        <p class="eyebrow !text-[var(--color-rb-green)]">Für alle</p>
        <h2 class="mt-1 text-3xl md:text-4xl font-bold mb-4" style="color: var(--color-rb-green)">Teilhabe</h2>
        <p class="text-[var(--color-text-muted)] leading-relaxed mb-4">
          Manche Familien können sich den Ausflugsbeitrag nicht leisten. Manche können das
          Kostüm fürs Theaterstück nicht kaufen. Manche möchten nicht, dass ihr Kind angefragt
          wird, ob das Budget reicht.
        </p>
        <p class="text-[var(--color-text-muted)] leading-relaxed mb-4">
          Der Förderverein schließt diese Lücken — diskret, unbürokratisch und ohne dass ein
          Kind erklären muss, warum.
        </p>
        <p class="font-semibold text-[var(--color-text)]">
          Das ist kein Sozialprogramm. Das ist Selbstverständlichkeit.
        </p>
      </div>
    </div>
  </section>

  <div class="rainbow-bar w-20 mx-auto rounded-full my-6"></div>

  <!-- Gemeinschaft -->
  <section id="gemeinschaft" class="section py-0">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
      <div>
        <div class="blob w-16 h-16 grid place-items-center text-3xl mb-5" style="background: rgba(245,130,13,0.12); box-shadow: inset 0 0 0 2px rgba(245,130,13,0.25);">🌍</div>
        <p class="eyebrow">Zusammen</p>
        <h2 class="mt-1 text-3xl md:text-4xl font-bold mb-4" style="color: var(--color-rb-orange)">Gemeinschaft</h2>
        <p class="text-[var(--color-text-muted)] leading-relaxed mb-4">
          Eine Kita ist stärker, wenn das Umfeld sie trägt. Der Förderverein baut diese
          Verbindung: zwischen Eltern, Erzieher*innen, Nachbarschaft und lokalen Unternehmen.
        </p>
        <p class="text-[var(--color-text-muted)] leading-relaxed mb-6">
          Das bedeutet: gemeinsame Feste, die Menschen zusammenbringen. Kooperationen mit
          lokalen Partnern. Eine Öffentlichkeit, die weiß, was hier passiert und warum es sich
          lohnt, dabei zu sein.
        </p>
        <div class="space-y-3">
          {[
            "🎉 Sommer- und Frühlingsfeste",
            "🛍️ Basare und Gemeinschaftsevents",
            "🏢 Kooperationen mit lokalen Unternehmen",
            "📣 Öffentlichkeitsarbeit für die Kita",
          ].map((item) => (
            <p class="text-[var(--color-text-muted)]">{item}</p>
          ))}
        </div>
      </div>
      <div class="card bg-[var(--color-accent-light)] border-0 p-8 text-center">
        <p class="font-brand text-6xl text-[var(--color-accent)] mb-4">+</p>
        <p class="text-lg font-semibold text-[var(--color-text)] mb-2">Du hast eine Idee?</p>
        <p class="text-[var(--color-text-muted)] mb-6">
          Der Verein ist offen für neue Projekte, Kooperationsideen und Initiativen.
        </p>
        <a href="/kontakt" class="btn-primary" style="background: var(--color-accent)">Idee einbringen</a>
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="section">
    <div class="relative overflow-hidden rounded-[2.5rem] bg-[var(--color-primary)] text-white text-center px-6 py-16">
      <div class="absolute inset-0 opacity-30 bg-gradient-to-br from-[var(--color-rb-violet)] via-[var(--color-rb-blue)] to-[var(--color-rb-cyan)]"></div>
      <Decor type="sun" class="w-20 absolute -top-3 -left-3 opacity-80 anim-spin-slow" />
      <Decor type="rainbow" class="w-24 absolute -bottom-1 right-6 opacity-90 anim-float" />
      <div class="relative max-w-2xl mx-auto">
        <p class="eyebrow !text-[var(--color-rb-yellow)]">Schon ab 1 € im Monat</p>
        <h2 class="mt-2 text-4xl md:text-5xl font-black">Dabei sein.</h2>
        <p class="mt-4 text-white/85 mb-8">Keine Verpflichtungen. Nur Kinder, die mehr bekommen.</p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <a href="/mitglied-werden" class="btn-primary !bg-white !text-[var(--color-primary)] !shadow-[0_6px_0_0_rgba(0,0,0,0.25)]"><span aria-hidden="true">♥</span> Mitglied werden</a>
          <a href="/unterstuetzen" class="btn-secondary !bg-transparent !text-white !border-white !shadow-[0_6px_0_0_rgba(0,0,0,0.25)]">Einmalig spenden</a>
        </div>
      </div>
    </div>
  </section>
</Layout>
