<script setup lang="ts">
useSeoLinking()
const { l } = useContentInjected()
useSeoMeta({
  title: () => l.value.meta.title,
  description: () => l.value.meta.description,
})
definePageMeta({
  scaffoldHeaderHeroMainFooter: {
    hero: false,
  },
})
</script>

<template>
  <XScaffoldGridPage>
    <AppSection mode="flat">
      <section
        v-for="block in l.blocks"
        :key="block.anchor"
        :id="block.anchor"
        class="prose mx-auto scroll-mt-[50rem]"
      >
        <article class="mb-12">
          <h1 class="text-3xl font-bold mb-6 whitespace-pre-line">{{ block.title }}</h1>

          <section v-for="s in block.sections" :key="s.title" class="mb-8 whitespace-pre-line">
            <h2 class="text-2xl font-semibold mb-4">{{ s.title }}</h2>

            <p v-for="p in s.paragraphs" :key="p" class="mb-3 leading-relaxed whitespace-pre-line">
              {{ p }}
            </p>
          </section>
        </article>
      </section>
    </AppSection>
  </XScaffoldGridPage>
</template>
