<template>
  <div>
    <AppFlatSection>
      <section v-for="block in l.blocks"
               :key="block.anchor"
               :id="block.anchor"
               class="prose mx-auto max-w-3xl p-4 lg:p-8">
        <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>
    </AppFlatSection>
  </div>
</template>

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