<template>
  <div class="space-y-5">
    <div class="rounded-[24px] border border-violet-100 bg-violet-50/50 p-4 text-sm leading-6 text-slate-600">
      Diese Texte steuern direkt die beiden Landingpage-Bereiche <strong class="text-slate-900">Die Awards</strong> und
      <strong class="text-slate-900">Unterkategorien</strong>.
    </div>

    <section class="rounded-[24px] border border-violet-100 bg-white/86 p-5">
      <div class="mb-4">
        <p class="text-xs font-semibold uppercase tracking-[0.2em] text-violet-500">Landingpage</p>
        <h3 class="mt-1 text-lg font-bold text-slate-900">Die Awards</h3>
      </div>
      <div class="grid gap-4">
        <label class="space-y-2">
          <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Titel</span>
          <input
            v-model="form.awardsSectionTitle"
            type="text"
            class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
            placeholder="Titel für den Awards-Bereich"
          />
        </label>
        <label class="space-y-2">
          <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Beschreibung</span>
          <textarea
            v-model="form.awardsSectionDescription"
            class="min-h-28 w-full rounded-2xl border border-violet-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
            placeholder="Einleitungstext für die Hauptkategorien"
          />
        </label>
      </div>
    </section>

    <section class="rounded-[24px] border border-violet-100 bg-white/86 p-5">
      <div class="mb-4">
        <p class="text-xs font-semibold uppercase tracking-[0.2em] text-violet-500">Landingpage</p>
        <h3 class="mt-1 text-lg font-bold text-slate-900">Unterkategorien</h3>
      </div>
      <div class="grid gap-4">
        <label class="space-y-2">
          <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Titel</span>
          <input
            v-model="form.subcategoriesSectionTitle"
            type="text"
            class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
            placeholder="Titel für den Unterkategorien-Bereich"
          />
        </label>
        <label class="space-y-2">
          <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Beschreibung</span>
          <textarea
            v-model="form.subcategoriesSectionDescription"
            class="min-h-28 w-full rounded-2xl border border-violet-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
            placeholder="Einleitungstext für die Unterkategorien"
          />
        </label>
      </div>
    </section>

    <div class="flex justify-end">
      <Button :disabled="saving" size="sm" class="gap-2 rounded-2xl bg-gradient-to-r from-violet-600 to-fuchsia-500 shadow-violet-500/20" @click="onSave">
        <Save class="h-4 w-4" />
        {{ saving ? 'Speichert ...' : 'Awards-Bereich speichern' }}
      </Button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Save } from '@lucide/vue'

import Button from '../ui/Button.vue'
import type { AdminContentForm } from './adminContentTypes'

const props = defineProps<{
  form: AdminContentForm
  saving: boolean
  saveSiteSettings: (sectionLabel?: string) => Promise<void>
}>()

function onSave() {
  return props.saveSiteSettings('Awards & Unterkategorien')
}
</script>
