<template>
  <section class="max-w-[960px] mx-auto px-6 pt-24 pb-16">
    <h1 class="text-2xl text-olive leading-[2] mb-4 font-pixel">{{ t('contact.title') }}</h1>
    <p class="text-orange mb-10">{{ t('contact.subtitle') }}</p>

    <div class="section max-w-xl">
      <form @submit.prevent="sendForm" class="space-y-4">
        <div>
          <label class="block text-[8px] text-olive font-pixel mb-1">{{ t('contact.name') }}</label>
          <input v-model="form.name" required class="pixel-input" />
        </div>
        <div>
          <label class="block text-[8px] text-olive font-pixel mb-1">{{ t('contact.email') }}</label>
          <input v-model="form.email" type="email" required class="pixel-input" />
        </div>
        <div>
          <label class="block text-[8px] text-olive font-pixel mb-1">{{ t('contact.message') }}</label>
          <textarea v-model="form.message" required rows="6" class="pixel-input" />
        </div>
        <button type="submit" class="pixel-btn active text-[8px] px-6 py-3">{{ t('contact.send') }}</button>
      </form>
      <p v-if="success" class="text-olive text-sm mt-4 font-pixel">✅ {{ t('contact.success') }}</p>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { t } from '../i18n'

const form = ref({ name: '', email: '', message: '' })
const success = ref(false)

const sendForm = () => {
  // TODO: Backend anbindung
  success.value = true
  form.value = { name: '', email: '', message: '' }
  setTimeout(() => success.value = false, 4000)
}
</script>

<style scoped>
.section {
  border: 4px solid var(--color-olive);
  padding: 2rem;
  background: var(--color-beige);
}
[data-theme="dark"] .section { background: var(--color-beige-dark); }
.pixel-input {
  font-family: 'Silkscreen', sans-serif;
  border: 3px solid var(--color-olive);
  padding: 12px;
  background: var(--color-beige-light);
  font-size: 13px;
  outline: none;
  width: 100%;
  display: block;
}
.pixel-input:focus { border-color: var(--color-orange); box-shadow: 2px 2px 0 var(--color-orange); }
[data-theme="dark"] .pixel-input { background: var(--color-beige); }
</style>
