<script setup>
import { motion } from 'motion-v'
import { usePrivacyContent, buildLegalPageSeo } from '~/content/legal'
import { splitHeadline } from '~/content/utils'
import { buildPublicSeoLinks } from '~/utils/public-seo'

definePageMeta({
  siteHeaderTheme: 'light',
})

const { page: privacyPage, content: privacyContent } = usePrivacyContent()
const runtimeConfig = useRuntimeConfig()
const pageOrigin = computed(() => String(runtimeConfig.public.siteBaseUrl || '').replace(/\/+$/, ''))
const privacyPageSeo = computed(() => buildLegalPageSeo(privacyPage.value, pageOrigin.value))
const heroHeadline = computed(() => splitHeadline(privacyContent.value.title))

useSeoMeta({
  title: () => privacyPageSeo.value.title,
  description: () => privacyPageSeo.value.description,
  ogTitle: () => privacyPageSeo.value.ogTitle,
  ogDescription: () => privacyPageSeo.value.ogDescription,
  ogImage: () => privacyPageSeo.value.ogImage || undefined,
  robots: () => privacyPageSeo.value.robots,
})

useHead(() => ({
  link: buildPublicSeoLinks(privacyPageSeo.value),
}))
</script>

<template>
  <div class="min-h-screen font-sans text-slate-900 pb-24 relative flex flex-col">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 mt-16 w-full">
      <div class="text-center mb-16">
        <motion.h1
          :initial="{ opacity: 0, y: 20 }"
          :animate="{ opacity: 1, y: 0 }"
          class="text-4xl md:text-5xl font-black uppercase tracking-tight text-slate-900 mb-6"
        >
          {{ heroHeadline.leading }} <span class="text-brand-orange">{{ heroHeadline.accent }}</span>
        </motion.h1>

        <motion.p
          :initial="{ opacity: 0, y: 20 }"
          :animate="{ opacity: 1, y: 0 }"
          :transition="{ delay: 0.1 }"
          class="text-lg text-slate-600 max-w-2xl mx-auto"
        >
          {{ privacyContent.excerpt || privacyContent.intro || privacyContent.emptyIntro }}
        </motion.p>

        <motion.p
          :initial="{ opacity: 0, y: 20 }"
          :animate="{ opacity: 1, y: 0 }"
          :transition="{ delay: 0.15 }"
          class="text-slate-500 font-medium mt-6"
        >
          {{ privacyContent.lastUpdatedLabel }}: {{ privacyContent.lastUpdatedValue }}
        </motion.p>
      </div>

      <motion.div
        :initial="{ opacity: 0, y: 20 }"
        :animate="{ opacity: 1, y: 0 }"
        :transition="{ delay: 0.2 }"
        class="bg-white rounded-2xl p-8 shadow-sm mb-12 text-slate-600 leading-relaxed"
      >
        <p>
          {{ privacyContent.intro || privacyContent.emptyIntro }}
        </p>
      </motion.div>

      <div class="space-y-8">
        <motion.div
          v-for="(section, index) in privacyContent.sections"
          :key="section.title"
          :initial="{ opacity: 0, y: 20 }"
          :while-in-view="{ opacity: 1, y: 0 }"
          :viewport="{ once: true }"
          :transition="{ delay: index * 0.05 }"
          class="bg-white rounded-2xl p-8 shadow-sm"
        >
          <h2 class="text-xl font-bold text-slate-900 mb-4">{{ section.title }}</h2>
          <div class="text-slate-600 leading-relaxed whitespace-pre-line">{{ section.content }}</div>
        </motion.div>
      </div>

      <motion.div
        :initial="{ opacity: 0, y: 20 }"
        :while-in-view="{ opacity: 1, y: 0 }"
        :viewport="{ once: true }"
        class="mt-16 text-center text-sm text-slate-500"
      >
        <p>{{ privacyContent.footerCopy }}</p>
      </motion.div>
    </div>
  </div>
</template>
