<script setup lang="ts">
/**
 * Правовые документы: оферта, политика конфиденциальности, политика возврата.
 *
 * Контент — из content/legalDocs.ts (рабочая редакция, вычитка владельца).
 * Доступны публично без логина (layout 'public'). Требование ЮKassa —
 * оферта/политика/возврат должны быть на сайте.
 *
 * Маршрут /legal/:doc(offer|privacy|refund); иные значения отсекает
 * regex-constraint роута, уходя в catch-all 404.
 */
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { LEGAL_DOCS, type LegalDoc } from '../../content/legalDocs';

const route = useRoute();
const doc = computed<LegalDoc>(() => {
    const key = String(route.params.doc);
    return key === 'privacy' ? LEGAL_DOCS.privacy : key === 'refund' ? LEGAL_DOCS.refund : LEGAL_DOCS.offer;
});
</script>

<template>
    <article class="legal-doc">
        <header class="legal-head">
            <h1 class="text-h4 mb-2">{{ doc.title }}</h1>
            <p class="text-body-1 text-medium-emphasis ma-0">{{ doc.intro }}</p>
            <p class="text-caption text-medium-emphasis mt-1 mb-0">Редакция от {{ doc.updated }}</p>
        </header>
        <section v-for="s in doc.sections" :key="s.heading" class="legal-section">
            <h2 class="text-h6 mb-2">{{ s.heading }}</h2>
            <p v-for="(p, i) in s.paragraphs" :key="i" class="text-body-2 mb-2">{{ p }}</p>
        </section>
    </article>
</template>

<style scoped>
.legal-doc {
    max-width: 760px;
    margin: 0 auto;
    padding: 8px 4px 40px;
}
.legal-head {
    margin-bottom: 24px;
}
.legal-section {
    margin-bottom: 20px;
}
.legal-section h2 {
    font-variation-settings: 'opsz' 18;
}
</style>
