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

import { getSettings } from "../lib/directus";

const settings = await getSettings();
---

<Layout
  title="Mitglied werden"
  description="Mitglied beim Kitafreunde Regenbogen e.V. werden. Steuerlich absetzbar. Keine Verpflichtungen. Direkte Wirkung für Kinder in Berlin-Heiligensee."
>
  <PageHeader eyebrow="Mitglied werden">
    Dabei sein.<br><span class="squiggle rainbow-text">So einfach wie möglich.</span>
    <Fragment slot="lead">
      Steuerlich absetzbar, keine Verpflichtungen — und direkte Wirkung für Kinder in deiner Nachbarschaft.
    </Fragment>
  </PageHeader>

  <!-- Warum -->
  <section class="section pt-6">
    <div class="max-w-2xl">
      <p class="text-2xl text-[var(--color-text)] leading-relaxed mb-2">Du musst keine Zeit haben.</p>
      <p class="text-2xl text-[var(--color-text)] leading-relaxed mb-2">Du musst nicht auf Sitzungen kommen.</p>
      <p class="text-2xl text-[var(--color-text)] leading-relaxed mb-8">Du musst nicht tischlern, backen oder organisieren können.</p>
      <p class="text-2xl font-bold text-[var(--color-primary)] leading-relaxed">
        Du musst nur wollen, dass die Kita in deiner Nachbarschaft ein bisschen mehr kann als ohne dich.
      </p>
      <p class="text-3xl font-brand text-[var(--color-text)] mt-6">Das ist alles.</p>
    </div>
  </section>

  <!-- Mitgliedschaftstypen -->
  <section class="section">
    <h2 class="text-3xl font-bold mb-8">Drei Wege mitzumachen</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="card border-2 border-[var(--color-primary)]">
        <p class="text-sm font-semibold text-[var(--color-primary)] uppercase tracking-wide mb-2">Aktives Mitglied</p>
        <p class="font-brand text-4xl text-[var(--color-text)] mb-1">
          ab {settings?.member_fee_active ?? 12} €<span class="text-lg font-normal">/Jahr</span>
        </p>
        <p class="text-sm text-[var(--color-text-muted)] mb-4">zzgl. einmalig 5 € Aufnahmegebühr</p>
        <ul class="text-sm text-[var(--color-text-muted)] space-y-2 mb-6">
          <li class="flex gap-2"><span class="text-[var(--color-rb-green)] font-bold">✓</span> Stimmrecht auf der Mitgliederversammlung</li>
          <li class="flex gap-2"><span class="text-[var(--color-rb-green)] font-bold">✓</span> Mitgestaltung von Projekten und Zielen</li>
          <li class="flex gap-2"><span class="text-[var(--color-rb-green)] font-bold">✓</span> Voller Überblick über Vereinsgeschehen</li>
        </ul>
        <p class="text-xs text-[var(--color-text-muted)]">Für alle, die mitentscheiden wollen.</p>
      </div>

      <div class="card">
        <p class="text-sm font-semibold text-[var(--color-accent)] uppercase tracking-wide mb-2">Fördermitglied</p>
        <p class="font-brand text-4xl text-[var(--color-text)] mb-1">
          ab {settings?.member_fee_supporting ?? 6} €<span class="text-lg font-normal">/Jahr</span>
        </p>
        <p class="text-sm text-[var(--color-text-muted)] mb-4">keine Aufnahmegebühr</p>
        <ul class="text-sm text-[var(--color-text-muted)] space-y-2 mb-6">
          <li class="flex gap-2"><span class="text-[var(--color-rb-green)] font-bold">✓</span> Beitrag geht direkt an die Projekte</li>
          <li class="flex gap-2"><span class="text-[var(--color-rb-green)] font-bold">✓</span> Kein Aufwand, keine Verpflichtung</li>
          <li class="flex gap-2"><span class="text-[var(--color-rb-green)] font-bold">✓</span> Volle Wirkung, null Bürokratie</li>
        </ul>
        <p class="text-xs text-[var(--color-text-muted)]">Für alle, die einfach dabei sein wollen.</p>
      </div>

      <div class="card bg-[var(--color-surface-alt)]">
        <p class="text-sm font-semibold text-[var(--color-rb-blue)] uppercase tracking-wide mb-2">Unternehmen</p>
        <p class="font-brand text-4xl text-[var(--color-text)] mb-4">Auf Anfrage</p>
        <ul class="text-sm text-[var(--color-text-muted)] space-y-2 mb-6">
          <li class="flex gap-2"><span class="text-[var(--color-rb-green)] font-bold">✓</span> Sichtbare lokale Verantwortung</li>
          <li class="flex gap-2"><span class="text-[var(--color-rb-green)] font-bold">✓</span> Projektpatenschaften möglich</li>
          <li class="flex gap-2"><span class="text-[var(--color-rb-green)] font-bold">✓</span> Erwähnung in Kommunikation</li>
        </ul>
        <a href="/kontakt" class="btn-secondary text-sm w-full justify-center">Gespräch anfragen →</a>
      </div>
    </div>
  </section>

  <!-- So geht's -->
  <section class="section bg-[var(--color-surface-alt)] rounded-3xl">
    <h2 class="text-3xl font-bold mb-8">So wirst du Mitglied</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      {[
        { step: "1", title: "Beitrittserklärung ausfüllen", text: "Als PDF ausdrucken und unterschreiben — oder im Kitabüro abholen." },
        { step: "2", title: "Beitrag überweisen", text: "Jahresbeitrag + einmalige Aufnahmegebühr (5 €) auf unser Vereinskonto." },
        { step: "3", title: "Fertig — du bist dabei.", text: "Willkommen bei den Kitafreunden. Wir freuen uns." },
      ].map(({ step, title, text }) => (
        <div class="text-center">
          <div class="w-14 h-14 rounded-full bg-[var(--color-primary)] text-white font-brand text-2xl flex items-center justify-center mx-auto mb-4">{step}</div>
          <h3 class="font-bold mb-2">{title}</h3>
          <p class="text-sm text-[var(--color-text-muted)]">{text}</p>
        </div>
      ))}
    </div>
    <div class="mt-10 flex flex-col sm:flex-row flex-wrap gap-3 justify-center">
      <a href="/dokumente/aufnahmeantrag.pdf" class="btn-primary" download>
        <span aria-hidden="true">⬇</span> Aufnahmeantrag als PDF
      </a>
      <a href="/dokumente/beitragsordnung.pdf" class="btn-secondary" download>Beitragsordnung (PDF)</a>
      <a href="/satzung" class="btn-secondary">Satzung lesen</a>
    </div>
  </section>

  <!-- Bank -->
  {settings?.iban && (
    <section class="section">
      <div class="card max-w-xl">
        <h3 class="font-bold mb-4">Bankverbindung</h3>
        <dl class="text-sm space-y-2 text-[var(--color-text-muted)]">
          <div class="flex gap-2"><dt class="font-medium text-[var(--color-text)] w-32">Empfänger</dt><dd>Kitafreunde Regenbogen e.V.</dd></div>
          <div class="flex gap-2"><dt class="font-medium text-[var(--color-text)] w-32">IBAN</dt><dd class="font-mono">{settings.iban}</dd></div>
          {settings.bic && <div class="flex gap-2"><dt class="font-medium text-[var(--color-text)] w-32">BIC</dt><dd class="font-mono">{settings.bic}</dd></div>}
          {settings.bank_name && <div class="flex gap-2"><dt class="font-medium text-[var(--color-text)] w-32">Bank</dt><dd>{settings.bank_name}</dd></div>}
          <div class="flex gap-2"><dt class="font-medium text-[var(--color-text)] w-32">Verwendung</dt><dd>Mitgliedsbeitrag [Dein Name]</dd></div>
        </dl>
      </div>
      <p class="text-sm text-[var(--color-text-muted)] mt-4">
        Mitgliedsbeiträge und Spenden sind steuerlich absetzbar (gemeinnützig anerkannt).
        Spendenquittung auf Anfrage.
      </p>
    </section>
  )}
</Layout>
