<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 route = useRoute()
const { data } = await apiFetch<ApiPagesType>(`pages/${route.params.slug}/`)
if (!data.value) {
    throw createError({
        statusCode: 404,
    })
}
const policyText = computed(() => {
    if (!data?.value) return ''
    let c = data?.value.content || ''
    return marked.parse(c)
})

</script>
<template>
    <div>
        <div class="siteblock bg-white">
            <div class="container">
                <h1 class="siteblock-title">{{ data?.title || '404' }}</h1>
                <div class="col-span-full prose max-w-full" v-html="policyText" />
            </div>
        </div>
        <div class="siteblock siteblock_imgbg bg-slate-500" v-if="data?.image"
            :style="[{ backgroundImage: `url(${[imgBase, data?.image].join('/')})` }]">
            <NuxtImg :src="[imgBase, data?.image].join('/')" class="invisible" alt="data.title || 'фоновая картинка'" title="" format="webp"
                loading="lazy" />
        </div>
        <div class="siteblock siteblock_calc bg-white">
            <Suspense>
                <CalcModels />
            </Suspense>
        </div>
    </div>
</template>