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

const settings = await getSettings();
---

<Layout title="Kontakt" description="Kontakt zum Kitafreunde Regenbogen e.V. — schreib uns, werde Mitglied oder bring eine Idee ein.">
  <PageHeader eyebrow="Kontakt">
    Schreib <span class="squiggle rainbow-text">uns.</span>
    <Fragment slot="lead">Fragen, Ideen, Mitmachen — wir freuen uns über jede Nachricht.</Fragment>
  </PageHeader>

  <section class="section pt-6">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
      <!-- Kontaktinfos -->
      <div class="space-y-6">
        <div class="card">
          <h2 class="font-bold mb-3">Kitafreunde Regenbogen e.V.</h2>
          <p class="text-sm text-[var(--color-text-muted)] leading-relaxed">
            c/o Kita Regenbogen<br>
            Keilerstraße 23<br>
            13503 Berlin
          </p>
        </div>
        {settings?.contact_email && (
          <div class="card">
            <h3 class="font-bold mb-2 text-sm uppercase tracking-wide text-[var(--color-text-muted)]">E-Mail</h3>
            <a href={`mailto:${settings.contact_email}`} class="text-[var(--color-primary)] font-medium text-lg">
              {settings.contact_email}
            </a>
          </div>
        )}
        <div class="card">
          <h3 class="font-bold mb-3">Mitglied werden?</h3>
          <p class="text-sm text-[var(--color-text-muted)] mb-3">
            Beitrittserklärung herunterladen und ausgefüllt im Kitabüro abgeben oder per Mail schicken.
          </p>
          <a href="/mitglied-werden" class="btn-primary text-sm">Zur Mitgliedschaftsseite →</a>
        </div>
        {(settings?.social_instagram || settings?.social_facebook) && (
          <div class="card">
            <h3 class="font-bold mb-3">Social Media</h3>
            <div class="flex gap-3">
              {settings.social_instagram && (
                <a href={`https://instagram.com/${settings.social_instagram}`} target="_blank" rel="noopener" class="btn-secondary text-sm">Instagram</a>
              )}
              {settings.social_facebook && (
                <a href={settings.social_facebook} target="_blank" rel="noopener" class="btn-secondary text-sm">Facebook</a>
              )}
            </div>
          </div>
        )}
      </div>

      <!-- Formular (statisches HTML, ohne Backend) -->
      <div class="card">
        <h2 class="font-bold mb-4">Direkte Nachricht</h2>
        <p class="text-sm text-[var(--color-text-muted)] mb-6">
          Dieses Formular öffnet deinen E-Mail-Client.
        </p>
        <form
          action={`mailto:${settings?.contact_email ?? "info@kitafreunde-regenbogen.de"}`}
          method="get"
          enctype="text/plain"
          class="space-y-4"
        >
          <div>
            <label for="subject" class="block text-sm font-medium mb-1">Betreff</label>
            <select id="subject" name="subject" class="w-full border border-[var(--color-border)] rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:border-[var(--color-primary)]">
              <option value="Mitgliedschaft">Mitgliedschaft</option>
              <option value="Projektidee">Projektidee einbringen</option>
              <option value="Spende/Kooperation">Spende / Kooperation</option>
              <option value="Presseanfrage">Presseanfrage</option>
              <option value="Allgemeine Anfrage">Allgemeine Anfrage</option>
            </select>
          </div>
          <div>
            <label for="body" class="block text-sm font-medium mb-1">Nachricht</label>
            <textarea id="body" name="body" rows="5"
              class="w-full border border-[var(--color-border)] rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:border-[var(--color-primary)] resize-none"
              placeholder="Deine Nachricht..."></textarea>
          </div>
          <button type="submit" class="btn-primary w-full justify-center">
            E-Mail öffnen →
          </button>
        </form>
      </div>
    </div>
  </section>
</Layout>