---
import Layout from "../layouts/Layout.astro";
import PageHeader from "../components/PageHeader.astro";
import { getSettings } from "../lib/directus";

const settings = await getSettings();
---

<Layout
  title="Unterstützen & Spenden"
  description="Einmalspende, Projektpatenschaft oder Unternehmenspartnerschaft — jede Unterstützung kommt direkt bei den Kindern der Kita Regenbogen an."
>
  <PageHeader eyebrow="Unterstützen">
    Du musst kein Mitglied sein,<br>
    <span class="squiggle rainbow-text">um zu helfen.</span>
    <Fragment slot="lead">
      Einmalspenden, Sachspenden, Projektpatenschaften — jede Form der Unterstützung
      landet direkt bei den Kindern.
    </Fragment>
  </PageHeader>

  <section class="section pt-6">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

      <!-- Einmalspende -->
      <div class="card">
        <div class="text-4xl mb-4">💸</div>
        <h2 class="text-xl font-bold mb-3">Einmalspende</h2>
        <p class="text-[var(--color-text-muted)] text-sm leading-relaxed mb-4">
          Überweise direkt auf unser Vereinskonto. Kein Formular, kein Aufwand.
          Spendenquittung auf Wunsch.
        </p>
        {settings?.iban ? (
          <div class="bg-[var(--color-surface-alt)] rounded-xl p-4 text-sm space-y-1">
            <p><span class="font-medium">Empfänger:</span> Kitafreunde Regenbogen e.V.</p>
            <p><span class="font-medium">IBAN:</span> <span class="font-mono">{settings.iban}</span></p>
            {settings.bic && <p><span class="font-medium">BIC:</span> <span class="font-mono">{settings.bic}</span></p>}
            <p><span class="font-medium">Verwendung:</span> Spende Kitafreunde Regenbogen</p>
          </div>
        ) : (
          <p class="text-sm text-[var(--color-text-muted)] italic">Bankverbindung folgt</p>
        )}
      </div>

      <!-- Projektpatenschaft -->
      <div class="card">
        <div class="text-4xl mb-4">🎯</div>
        <h2 class="text-xl font-bold mb-3">Projektpatenschaft</h2>
        <p class="text-[var(--color-text-muted)] text-sm leading-relaxed mb-4">
          Du willst, dass ein konkretes Projekt stattfindet? Finanziere es gezielt.
          Wir dokumentieren die Wirkung und berichten dir zurück — mit echten Fotos
          und echter Geschichte.
        </p>
        <a href="/kontakt" class="btn-primary text-sm">Projekt anfragen →</a>
      </div>

      <!-- Sachspenden -->
      <div class="card">
        <div class="text-4xl mb-4">🎁</div>
        <h2 class="text-xl font-bold mb-3">Sachspenden</h2>
        <p class="text-[var(--color-text-muted)] text-sm leading-relaxed mb-4">
          Spielzeug, Bücher, Materialien, Werkzeug, Pflanzen für den Garten —
          frag uns, was gerade gebraucht wird. Wir stimmen mit der Kita ab.
        </p>
        {settings?.contact_email && (
          <a href={`mailto:${settings.contact_email}?subject=Sachspende`} class="btn-secondary text-sm">
            {settings.contact_email}
          </a>
        )}
      </div>

      <!-- Unternehmenspartnerschaft -->
      <div class="card bg-[var(--color-surface-alt)]">
        <div class="text-4xl mb-4">🏢</div>
        <h2 class="text-xl font-bold mb-3">Unternehmenspartnerschaft</h2>
        <p class="text-[var(--color-text-muted)] text-sm leading-relaxed mb-4">
          Lokale Verantwortung, sichtbare Wirkung. Als Vereinspartner oder Sponsor
          unterstützt du konkrete Projekte — und wir machen das sichtbar: auf der Website,
          bei Veranstaltungen und in unserer Kommunikation.
        </p>
        <a href="/kontakt" class="btn-secondary text-sm">Gespräch anfragen →</a>
      </div>
    </div>
  </section>

  <!-- Transparenz -->
  <section class="section">
    <div class="card bg-[var(--color-primary)] text-white border-0 text-center py-12">
      <h2 class="font-brand text-3xl mb-4">Wo dein Geld landet.</h2>
      <p class="text-white/80 max-w-xl mx-auto leading-relaxed">
        Jeder Euro geht an die Kinder — für Projekte, Ausflüge und Teilhabe.
        Kein Vorstandsmitglied erhält eine Vergütung. Wir veröffentlichen regelmäßig,
        was wir mit den Mitteln gemacht haben.
      </p>
      <p class="text-white/60 text-sm mt-4">Gemeinnützig anerkannt · Spenden steuerlich absetzbar</p>
    </div>
  </section>
</Layout>
