<template>
  <main class="flex-1 px-6 py-24">
    <div class="max-w-3xl mx-auto w-full">
      <div class="flex items-center justify-between mb-12">
        <NuxtLink
          to="/"
          class="inline-flex items-center gap-2 font-mono text-sm text-white/40 hover:text-white transition-colors duration-200"
        >
          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
          </svg>
          Back
        </NuxtLink>
        <LangSwitcher />
      </div>

      <article v-if="doc" class="opacity-0 animate-fade-in prose-legal">
        <ContentRenderer :value="doc" class="legal-content" />
      </article>
    </div>
  </main>
</template>

<script setup lang="ts">
const route = useRoute()
const lang = computed(() => {
  const l = route.query.lang as string
  return l === 'de' ? 'de' : 'en'
})

const { data: doc } = await useAsyncData(
  () => `privacy-policy-${lang.value}`,
  () => queryCollection('legal').path(`/${lang.value}/privacy-policy`).first(),
  { watch: [lang] },
)

useHead({
  title: computed(() => `${doc.value?.title ?? 'Privacy Policy'} – Bennet Gallein IT Solutions`),
})
</script>
