---
import Decor from "./Decor.astro";
const year = new Date().getFullYear();
---

<footer class="relative mt-28 overflow-hidden bg-[var(--color-paper-2)]">
  <div class="rainbow-bar"></div>

  <!-- Deko -->
  <Decor type="cloud" class="hidden md:block w-28 absolute top-10 right-[8%] opacity-70 anim-float" />
  <Decor type="sun" class="w-24 absolute -bottom-6 -left-6 opacity-50" />

  <div class="relative max-w-6xl mx-auto px-4 py-16 grid grid-cols-1 md:grid-cols-3 gap-10">
    <div class="md:col-span-1">
      <img src="/logo/logo.png" alt="Kitafreunde Regenbogen" class="h-24 w-auto mb-4" width="744" height="745" />
      <p class="text-sm text-[var(--color-text-muted)] leading-relaxed">
        Förderverein der Kita Regenbogen<br>
        Keilerstraße 23 · 13503 Berlin-Heiligensee
      </p>
      <p class="eyebrow mt-5 !text-[var(--color-rb-violet)]">Mit Herz für alle Kinder</p>
    </div>

    <div>
      <p class="font-display font-semibold text-lg mb-4">Verein</p>
      <ul class="text-[15px] text-[var(--color-text-muted)] space-y-2.5">
        <li><a href="/ueber-uns" class="hover:text-[var(--color-primary)]">Über uns</a></li>
        <li><a href="/was-wir-tun" class="hover:text-[var(--color-primary)]">Was wir tun</a></li>
        <li><a href="/projekte" class="hover:text-[var(--color-primary)]">Projekte</a></li>
        <li><a href="/aktuelles" class="hover:text-[var(--color-primary)]">Aktuelles</a></li>
        <li><a href="/presse" class="hover:text-[var(--color-primary)]">Presse</a></li>
        <li><a href="/satzung" class="hover:text-[var(--color-primary)]">Satzung</a></li>
      </ul>
    </div>

    <div>
      <p class="font-display font-semibold text-lg mb-4">Mitmachen</p>
      <ul class="text-[15px] text-[var(--color-text-muted)] space-y-2.5">
        <li><a href="/mitglied-werden" class="hover:text-[var(--color-primary)]">Mitglied werden</a></li>
        <li><a href="/unterstuetzen" class="hover:text-[var(--color-primary)]">Spenden</a></li>
        <li><a href="/kontakt" class="hover:text-[var(--color-primary)]">Kontakt</a></li>
      </ul>
      <a href="/mitglied-werden" class="btn-primary text-sm mt-6"><span aria-hidden="true">♥</span> Jetzt unterstützen</a>
    </div>
  </div>

  <div class="relative border-t border-[var(--color-border)]">
    <div class="max-w-6xl mx-auto px-4 py-5 flex flex-col md:flex-row justify-between gap-2 text-xs text-[var(--color-text-muted)]">
      <span>© {year} Kitafreunde Regenbogen e.V. · Gemeinnützig anerkannt</span>
      <div class="flex gap-5">
        <a href="/impressum" class="hover:text-[var(--color-primary)]">Impressum</a>
        <a href="/datenschutz" class="hover:text-[var(--color-primary)]">Datenschutz</a>
      </div>
    </div>
  </div>
</footer>
