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

const settings = await getSettings();
const featuredProjects = await getFeaturedProjects();

// --- Platzhalter, damit die Seite auch ohne CMS lebendig wirkt ---
const stats = {
  members: settings?.stats_members ?? 120,
  funded: settings?.stats_funded ?? 14500,
};

const momente = [
  { src: "/img/momente/m1.jpg", cap: "Sommerfest",   tone: "var(--color-rb-red)" },
  { src: "/img/momente/m2.jpg", cap: "Malwerkstatt", tone: "var(--color-rb-orange)" },
  { src: "/img/momente/m3.jpg", cap: "Naturtag",     tone: "var(--color-rb-green)" },
  { src: "/img/momente/m4.jpg", cap: "Freispiel",    tone: "var(--color-rb-cyan)" },
  { src: "/img/momente/m5.jpg", cap: "Musikstunde",  tone: "var(--color-rb-violet)" },
  { src: "/img/momente/m6.jpg", cap: "Gartenprojekt",tone: "var(--color-rb-blue)" },
];

const fallbackProjects = [
  { title: "Theaterwoche für alle Gruppen", slug: "#", date: "Frühjahr 2026", img: "/img/momente/m5.jpg", chip: "Kultur", summary: "Eine Woche Bühne, Kostüme und Mut — ein Theaterpädagoge zu Gast in der Kita." },
  { title: "Naschgarten im Hof", slug: "#", date: "Laufend", img: "/img/momente/m6.jpg", chip: "Natur", summary: "Hochbeete, Beeren und Kräuter. Die Kinder säen, pflegen und ernten selbst." },
  { title: "Inklusions-Ausflüge", slug: "#", date: "Ganzjährig", img: "/img/momente/m3.jpg", chip: "Teilhabe", summary: "Damit wirklich jedes Kind mitkommt — wir übernehmen Eintritt und Fahrt." },
];
const projectsToShow = featuredProjects.length > 0 ? null : fallbackProjects;
---

<Layout
  title="Mehr als Kita. Mehr als genug."
  description="Der Kitafreunde Regenbogen e.V. ist der Förderverein der Kita Regenbogen in Berlin-Heiligensee. Für das Besondere. Für alle Kinder."
>
  <!-- ===================== HERO ===================== -->
  <section class="relative overflow-hidden">
    <!-- schwebende Deko -->
    <Decor type="sparkle" class="w-10 absolute top-24 left-[6%] anim-float opacity-80" />
    <Decor type="cloud"   class="w-24 absolute top-16 right-[10%] anim-float-slow opacity-80" />
    <Decor type="loop"    class="w-28 absolute bottom-24 left-[4%] opacity-60 anim-wiggle" />

    <div class="section grid lg:grid-cols-2 gap-12 items-center pt-14 pb-24 md:pt-20">
      <!-- Text -->
      <div class="text-center lg:text-left">
        <p class="eyebrow reveal d1">Berlin-Heiligensee · Förderverein seit 2019</p>
        <h1 class="reveal d2 mt-3 text-[clamp(2.6rem,7vw,4.7rem)] text-[var(--color-text)] font-black leading-[0.98]">
          Mehr als Kita.<br>
          <span class="squiggle rainbow-text">Mehr als genug.</span>
        </h1>
        <p class="reveal d3 mt-6 text-lg md:text-xl text-[var(--color-text-muted)] max-w-xl mx-auto lg:mx-0 leading-relaxed">
          Wir schaffen die Momente, die Kinder ihr Leben lang mit sich tragen —
          Kultur, Natur, Gemeinschaft. Und dafür, dass <strong class="text-[var(--color-text)] font-semibold">kein Kind außen vor bleibt</strong>.
        </p>
        <div class="reveal d4 mt-9 flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
          <a href="/mitglied-werden" class="btn-primary text-base"><span aria-hidden="true">♥</span> Jetzt Mitglied werden</a>
          <a href="/was-wir-tun" class="btn-secondary text-base">Was wir tun</a>
        </div>
        <div class="reveal d5 mt-7 flex flex-wrap gap-x-6 gap-y-2 justify-center lg:justify-start text-sm text-[var(--color-text-muted)]">
          <span class="inline-flex items-center gap-2"><span class="text-[var(--color-rb-green)]">✓</span> Ab 1 € im Monat</span>
          <span class="inline-flex items-center gap-2"><span class="text-[var(--color-rb-green)]">✓</span> Steuerlich absetzbar</span>
          <span class="inline-flex items-center gap-2"><span class="text-[var(--color-rb-green)]">✓</span> Kein Ehrenamt nötig</span>
        </div>
      </div>

      <!-- Logo-Bühne -->
      <div class="reveal d3 relative mx-auto w-full max-w-md aspect-square">
        <!-- weicher Farb-Halo -->
        <div class="absolute inset-6 rounded-[42%_58%_63%_37%/41%_44%_56%_59%] bg-white/70 backdrop-blur-sm shadow-[0_40px_80px_-30px_rgba(42,36,51,0.4)]"></div>
        <div class="absolute inset-0 rounded-[42%_58%_63%_37%/41%_44%_56%_59%] bg-gradient-to-br from-[var(--color-accent-light)] via-transparent to-[rgba(0,174,239,0.15)]"></div>
        <Decor type="sun"     class="w-28 absolute -top-2 -right-2 anim-spin-slow" />
        <Decor type="rainbow" class="w-32 absolute bottom-4 -left-4 opacity-90 anim-float" />
        <Decor type="sparkle" class="w-8 absolute top-10 left-6 anim-wiggle" />
        <!-- DAS Logo, groß und schön -->
        <img src="/logo/logo.png" alt="Kitafreunde Regenbogen Logo"
             class="relative z-10 w-[78%] h-[78%] object-contain mx-auto mt-[11%] drop-shadow-[0_18px_30px_rgba(42,36,51,0.18)] anim-float" />
      </div>
    </div>

    <Wave color="var(--color-paper-2)" />
  </section>

  <!-- ===================== MANIFEST ===================== -->
  <section class="bg-[var(--color-paper-2)]">
    <div class="section-sm text-center max-w-3xl">
      <Decor type="heart" class="w-12 mx-auto mb-5 anim-float" />
      <p class="font-display text-2xl md:text-4xl font-semibold text-[var(--color-text)] leading-snug">
        Die Kita sichert die Grundversorgung. Das Land zahlt das Nötige.
        <span class="squiggle text-[var(--color-primary)]">Wir bezahlen das Besondere.</span>
      </p>
    </div>
  </section>
  <Wave color="var(--color-paper)" flip={true} />

  <!-- ===================== DREI SÄULEN ===================== -->
  <section class="section">
    <div class="text-center mb-12">
      <p class="eyebrow">Wofür wir da sind</p>
      <h2 class="mt-2 text-4xl md:text-5xl font-bold">Drei Versprechen.</h2>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-7">
      {[
        { emoji: "🎭", color: "var(--color-rb-violet)", title: "Erleben", text: "Theater, Musik, Natur, Kunst. Erlebnisse, die kein Lehrplan vorschreibt — und die man nie vergisst.", href: "/was-wir-tun#erleben", tilt: "tilt-l" },
        { emoji: "🤝", color: "var(--color-rb-green)",  title: "Teilhabe", text: "Kein Kind bleibt beim Ausflug zuhause, weil die Familie den Beitrag nicht stemmen kann. Punkt.", href: "/was-wir-tun#teilhabe", tilt: "" },
        { emoji: "🌍", color: "var(--color-rb-orange)", title: "Gemeinschaft", text: "Eltern, Erzieher*innen, Nachbarschaft, lokale Betriebe. Der Verein verbindet, wer die Kita trägt.", href: "/was-wir-tun#gemeinschaft", tilt: "tilt-r" },
      ].map(({ emoji, color, title, text, href, tilt }) => (
        <a href={href} class={`sticker group ${tilt}`}>
          <div class="blob w-16 h-16 grid place-items-center text-3xl mb-5"
               style={`background:${color}20; box-shadow: inset 0 0 0 2px ${color}40;`}>
            <span>{emoji}</span>
          </div>
          <h3 class="font-display text-2xl font-bold mb-2 transition-colors" style={`color:${color}`}>{title}</h3>
          <p class="text-[var(--color-text-muted)] leading-relaxed">{text}</p>
          <p class="mt-5 text-sm font-semibold text-[var(--color-primary)] group-hover:gap-2 inline-flex items-center gap-1 transition-all">
            Mehr erfahren <span aria-hidden="true">→</span>
          </p>
        </a>
      ))}
    </div>
  </section>

  <!-- ===================== MOMENTE (Galerie) ===================== -->
  <Wave color="var(--color-paper-2)" />
  <section class="bg-[var(--color-paper-2)]">
    <div class="section">
      <div class="flex flex-wrap items-end justify-between gap-4 mb-10">
        <div>
          <p class="eyebrow">Aus dem Alltag</p>
          <h2 class="mt-2 text-4xl md:text-5xl font-bold">Momente, die zählen.</h2>
        </div>
        <span class="chip" title="Platzhalterbilder">📷 Beispielbilder</span>
      </div>
      <div class="grid grid-cols-2 md:grid-cols-3 gap-5">
        {momente.map((m, i) => (
          <figure class={`photo-frame relative ${i % 3 === 0 ? "tilt-l" : i % 3 === 2 ? "tilt-r" : ""} transition-transform duration-300 hover:rotate-0 hover:-translate-y-1 ${i === 0 || i === 4 ? "md:row-span-2" : ""}`}>
            <div class={`relative overflow-hidden rounded-[0.6rem] ${i === 0 || i === 4 ? "aspect-[3/4]" : "aspect-[4/3]"}`}>
              <img src={m.src} alt={m.cap} loading="lazy" style="filter: saturate(0.9) contrast(1.03);" />
              <!-- Markenfärbung, damit Platzhalter on-brand wirken -->
              <div class="absolute inset-0" style={`background:${m.tone}; mix-blend-mode: soft-light; opacity:.6;`}></div>
              <div class="absolute inset-0 bg-gradient-to-t from-black/35 via-transparent to-transparent"></div>
            </div>
            <figcaption class="absolute bottom-3 left-3">
              <span class="chip" style={`background:${m.tone}; color:#fff;`}>{m.cap}</span>
            </figcaption>
          </figure>
        ))}
      </div>
    </div>
  </section>
  <Wave color="var(--color-paper-3)" />

  <!-- ===================== ZAHLEN ===================== -->
  <section class="relative overflow-hidden bg-[var(--color-paper-3)] text-white">
    <Decor type="sparkle" class="w-12 absolute top-8 right-[12%] opacity-70 anim-wiggle" />
    <Decor type="sparkle" class="w-7 absolute bottom-10 left-[14%] opacity-60 anim-float" />
    <div class="max-w-5xl mx-auto px-4 py-20 grid grid-cols-1 sm:grid-cols-3 gap-10 text-center">
      <div>
        <p class="font-display text-6xl font-black rainbow-text">{stats.members}</p>
        <p class="text-white/70 mt-2">Mitglieder tragen den Verein</p>
      </div>
      <div>
        <p class="font-display text-6xl font-black rainbow-text">{stats.funded.toLocaleString("de")}&nbsp;€</p>
        <p class="text-white/70 mt-2">in Projekte geflossen</p>
      </div>
      <div>
        <p class="font-display text-6xl font-black rainbow-text">100%</p>
        <p class="text-white/70 mt-2">der Mittel kommen bei den Kindern an</p>
      </div>
    </div>
  </section>
  <Wave color="var(--color-paper)" />

  <!-- ===================== PROJEKTE ===================== -->
  <section class="section">
    <div class="flex flex-wrap items-end justify-between gap-4 mb-10">
      <div>
        <p class="eyebrow">Was gerade läuft</p>
        <h2 class="mt-2 text-4xl md:text-5xl font-bold">Aktuelle Projekte</h2>
      </div>
      <a href="/projekte" class="btn-secondary text-sm">Alle Projekte →</a>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-7">
      {featuredProjects.length > 0
        ? featuredProjects.map((p: any) => (
            <a href={`/projekte/${p.slug}`} class="sticker group !p-0 overflow-hidden">
              {p.image && (
                <div class="aspect-video overflow-hidden">
                  <img src={imageUrl(p.image, 600)} alt={p.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                </div>
              )}
              <div class="p-6">
                <p class="text-xs text-[var(--color-text-muted)] mb-1">{p.date}</p>
                <h3 class="font-display font-bold text-xl group-hover:text-[var(--color-primary)] transition-colors">{p.title}</h3>
                <p class="text-sm text-[var(--color-text-muted)] mt-2 line-clamp-2">{p.summary}</p>
              </div>
            </a>
          ))
        : projectsToShow!.map((p) => (
            <a href={p.slug} class="sticker group !p-0 overflow-hidden">
              <div class="aspect-video overflow-hidden relative">
                <img src={p.img} alt={p.title} loading="lazy" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                <span class="chip absolute top-3 left-3 bg-white/90">{p.chip}</span>
              </div>
              <div class="p-6">
                <p class="text-xs text-[var(--color-text-muted)] mb-1">{p.date}</p>
                <h3 class="font-display font-bold text-xl group-hover:text-[var(--color-primary)] transition-colors">{p.title}</h3>
                <p class="text-sm text-[var(--color-text-muted)] mt-2">{p.summary}</p>
              </div>
            </a>
          ))}
    </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 md:py-20">
      <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-24 absolute -top-4 -left-4 opacity-80 anim-spin-slow" />
      <Decor type="rainbow" class="w-28 absolute -bottom-2 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-3 text-4xl md:text-6xl font-black">Werde Kitafreund*in.</h2>
        <p class="mt-5 text-lg text-white/85">
          Kein Aufwand. Kein verpflichtendes Ehrenamt.<br class="hidden sm:block">
          Nur Kinder, die mehr bekommen.
        </p>
        <a href="/mitglied-werden" class="btn-primary text-lg mt-9 !bg-white !text-[var(--color-primary)] !shadow-[0_6px_0_0_rgba(0,0,0,0.25)]">
          <span aria-hidden="true">♥</span> Jetzt Mitglied werden
        </a>
        <p class="text-sm text-white/70 mt-4">Gemeinnützig anerkannt · Beiträge steuerlich absetzbar</p>
      </div>
    </div>
  </section>
</Layout>