<template>
  <AppFlatSection>
    <section class="prose mx-auto max-w-3xl p-4 lg:p-8">
      <article
          v-for="block in tm('legal')"
          :key="rt(block.id)"
          :id="rt(block.id)"
          class="mb-12"
      >
        <h1 class="text-3xl font-bold mb-6 whitespace-pre-line">{{ rt(block.title) }}</h1>

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

          <p v-for="p in sec.paragraphs" :key="p" class="mb-3 leading-relaxed whitespace-pre-line">
            {{ rt(p) }}
          </p>
        </section>
      </article>
    </section>
  </AppFlatSection>
</template>

<script setup lang="ts">
const {t, tm, rt} = useVariantData()
</script>