<script setup lang="ts">
const config = useRuntimeConfig()
const imgBase = config.public.imgBase

import { apiFetch } from '~/utils/apiFetch';
import { marked } from 'marked';

import og_img from '/og_img.png'

const { data: seoData } = await apiFetch<ApiKpType>(`kp/1`)
useSeoMeta({
    title: seoData.value?.title,
    ogTitle: seoData.value?.title,
    description: seoData.value?.content,
    ogDescription: seoData.value?.content,
    ogImage: config.public.baseUrl + og_img,
    // twitterCard: 'summary_large_image',
})

const { data: policyData } = await apiFetch<ApiPagesType[]>(`pages/1`)
const policyText = computed(() => {
    let c = policyData?.value.content || ''
    return marked.parse(c)
})

</script>
<template>
    <div>
        <div class="siteblock bg-white">
            <div class="container">
                <h1 class="siteblock-title">{{ policyData.title }}</h1>
                <div class="col-span-full prose max-w-full" v-html="policyText" />
            </div>
        </div>
        <div class="siteblock siteblock_calc bg-white">
            <Suspense>
                <CalcModels />
            </Suspense>
        </div>
    </div>
</template>