---
import Layout from "../../../layouts/Layout.astro";
import type { Locale } from "../../../i18n/config";
import { useTranslations } from "../../../i18n/ui";

const lang: Locale = "ch";
const t = useTranslations(lang);
---
<Layout title="Kontakt" description="Kontaktier Van's DIY & Bastelbedarf." lang={lang} path="/kontakt/">
  <section class="section-tight">
    <div class="container">
      <span class="eyebrow">{t.nav.contact}</span>
      <h1>{t.contact.title}</h1>
      <p class="lead">{t.contact.lead}</p>
    </div>
  </section>

  <section class="section-tight">
    <div class="container grid grid-2 contact-layout">
      <form class="frm card" id="contact-form">
        <div>
          <label for="name">{t.contact.name}</label>
          <input id="name" name="name" type="text" required />
        </div>
        <div>
          <label for="email">{t.contact.email}</label>
          <input id="email" name="email" type="email" required />
        </div>
        <div>
          <label for="betreff">{t.contact.subject}</label>
          <input id="betreff" name="betreff" type="text" />
        </div>
        <div>
          <label for="nachricht">{t.contact.message}</label>
          <textarea id="nachricht" name="nachricht" rows="5" required></textarea>
        </div>
        <div class="checkbox-row">
          <input id="dsgvo" type="checkbox" required />
          <label for="dsgvo">{t.contact.gdprPrefix} <a href="/datenschutz/">{t.contact.gdprLink}</a> {t.contact.gdprSuffix}</label>
        </div>
        <button class="btn btn-primary btn-block" type="submit">{t.contact.send}</button>
        <p class="small" id="form-status" role="status"></p>
        <p class="todo-note">{t.contact.todoNote}</p>
      </form>

      <div>
        <h3>{t.contact.directTitle}</h3>
        <p class="small">E-Mail: <a href="mailto:info@vans-diy-bastelbedarf.de">info@vans-diy-bastelbedarf.de</a> <span class="small">{t.contact.emailPlaceholderNote}</span></p>
        <p class="small">{t.contact.orderNote}</p>
        <h3>{t.contact.responseTitle}</h3>
        <p class="small">{t.contact.responseNote}</p>
      </div>
    </div>
  </section>
</Layout>

<script define:vars={{ sentDemo: t.contact.sentDemo }}>
  const form = document.getElementById("contact-form");
  const status = document.getElementById("form-status");
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    status.textContent = sentDemo;
    status.style.color = "var(--c-accent)";
    form.reset();
  });
</script>
