<template>
  <main>
    <header class="site-header">
      <NuxtLink class="brand" to="/" aria-label="FEDEO Startseite">
        <img src="/Logo.png" alt="FEDEO" />
      </NuxtLink>

      <nav aria-label="Hauptnavigation">
        <NuxtLink to="/zielgruppen">Zielgruppen</NuxtLink>
        <NuxtLink to="/#funktionen">Funktionen</NuxtLink>
        <NuxtLink to="/#open-source">Open Source</NuxtLink>
        <NuxtLink to="/#selfhost">Selfhost</NuxtLink>
        <NuxtLink to="/#matrix">Matrix</NuxtLink>
        <NuxtLink to="/kontakt">Kontakt</NuxtLink>
        <a class="login-link" href="https://app.fedeo.de">Einloggen</a>
      </nav>
    </header>

    <section class="contact-page">
      <div class="contact-heading">
        <p class="eyebrow">Kontakt</p>
        <h1>Sprich mit uns über FEDEO.</h1>
        <p>
          Ob Demo, Selfhosting, Integrationen oder ein konkreter Ablauf im Betrieb: Schreib uns kurz, worum es geht.
        </p>
      </div>

      <form class="contact-form" @submit.prevent="submitForm">
        <div class="form-grid">
          <label>
            Name
            <input v-model="form.name" name="name" autocomplete="name" required>
          </label>
          <label>
            E-Mail
            <input v-model="form.email" name="email" autocomplete="email" required type="email">
          </label>
        </div>

        <label>
          Unternehmen
          <input v-model="form.company" name="company" autocomplete="organization">
        </label>

        <label class="honeypot">
          Website
          <input v-model="form.website" name="website" tabindex="-1" autocomplete="off">
        </label>

        <label>
          Nachricht
          <textarea v-model="form.message" name="message" required rows="8"></textarea>
        </label>

        <label class="check-row">
          <input v-model="form.privacy" type="checkbox" required>
          <span>
            Ich habe die <NuxtLink to="/datenschutz">Datenschutzerklärung</NuxtLink> gelesen und bin mit der Verarbeitung meiner Angaben zur Kontaktaufnahme einverstanden.
          </span>
        </label>

        <div class="form-actions">
          <button class="primary-action" :disabled="pending" type="submit">
            {{ pending ? 'Wird gesendet' : 'Anfrage senden' }}
          </button>
          <p v-if="statusMessage" :class="['form-status', statusType]">{{ statusMessage }}</p>
        </div>
      </form>
    </section>

    <footer>
      <img src="/Logo.png" alt="FEDEO" />
      <div>
        <NuxtLink to="/zielgruppen">Zielgruppen</NuxtLink>
        <NuxtLink to="/kontakt">Kontakt</NuxtLink>
        <NuxtLink to="/impressum">Impressum</NuxtLink>
        <NuxtLink to="/datenschutz">Datenschutz</NuxtLink>
        <a href="https://app.fedeo.de">Einloggen</a>
      </div>
      <p>Copyright © 2026 Federspiel Technology UG haftungsbeschränkt.</p>
    </footer>
  </main>
</template>

<script setup lang="ts">
const form = reactive({
  company: '',
  email: '',
  message: '',
  name: '',
  privacy: false,
  website: ''
})

const pending = ref(false)
const statusMessage = ref('')
const statusType = ref<'error' | 'success'>('success')

const submitForm = async () => {
  pending.value = true
  statusMessage.value = ''

  try {
    await $fetch('/api/contact', {
      body: form,
      method: 'POST'
    })

    form.company = ''
    form.email = ''
    form.message = ''
    form.name = ''
    form.privacy = false
    form.website = ''
    statusType.value = 'success'
    statusMessage.value = 'Danke, deine Nachricht wurde gesendet.'
  } catch (error: any) {
    statusType.value = 'error'
    statusMessage.value = error?.statusMessage || 'Die Nachricht konnte gerade nicht gesendet werden.'
  } finally {
    pending.value = false
  }
}
</script>
