---
import Base from "../layouts/Base.astro";
---
<Base path="/kontakt" title="Kontakt – Valtrix">
  <h1 class="text-3xl font-bold mt-8">Kontakt</h1>
  <form id="contactForm" class="mt-6 grid gap-4 max-w-xl">
    <input class="border rounded-brand p-3" name="name" placeholder="Ihr Name" required>
    <input class="border rounded-brand p-3" type="email" name="_replyto" placeholder="E-Mail" required>
    <textarea class="border rounded-brand p-3" name="message" rows="5" placeholder="Ihre Nachricht" required></textarea>
    <button class="px-5 py-3 rounded-brand bg-primary text-white w-fit">Senden</button>
  </form>
  <p class="text-xs text-textMuted mt-2">Wir verwenden keine externen Dienste. Ihre Anfrage wird in Ihrem E‑Mail‑Programm geöffnet.</p>
  <script>
    const form = document.getElementById('contactForm');
    form?.addEventListener('submit', (e) => {
      e.preventDefault();
      const data = new FormData(form);
      const name = (data.get('name')||'').toString();
      const email = (data.get('_replyto')||'').toString();
      const message = (data.get('message')||'').toString();
      const subject = `Kontaktanfrage – ${name}`;
      const body = `Name: ${name}\nE-Mail: ${email}\n\n${message}`;
  const mail = `mailto:kontakt@valtrix.systems?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
      window.location.href = mail;
    });
  </script>
</Base>
