---
import Base from "../../layouts/Base.astro";
---
<Base path="/en/kontakt" title="Contact – Valtrix">
  <h1 class="text-3xl font-bold mt-8">Contact</h1>
  <form id="contactForm" class="mt-6 grid gap-4 max-w-xl">
    <input class="border rounded-brand p-3" name="name" placeholder="Your 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="Your message" required></textarea>
    <button class="px-5 py-3 rounded-brand bg-primary text-white w-fit">Send</button>
  </form>
  <p class="text-xs text-textMuted mt-2">We don't use external services. Your request will open in your e‑mail client.</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 = `Contact request – ${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>
