<script setup lang="ts">
const config = useRuntimeConfig()
const apiBase = config.public.apiBase
import '@/assets/main.scss'

import { apiFetch } from './utils/apiFetch';
import type { NuxtError } from '#app'
import og_img from '/og_img.png'

const { data: seoData } = await apiFetch<ApiKpType>(`kp/2`)
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 props = defineProps({
    error: Object as () => NuxtError
})

</script>

<template>
    <div>
        <Header />
        <div class="siteblock bg-white">
            <div class="container prose">
                <div class="col-span-full">
                    <h1>Вы ищете страницу, которой не существует. Вернитесь на главную страницу сайта</h1>
                    <p>Извините, но мы не можем найти запрашиваемую страницу. К сожалению, мы не можем помочь вам с
                        покупкой забора здесь.</p>
                    <button @click="navigateTo('/')" class="not-prose">Вернуться на главную</button>
                </div>
            </div>
        </div>
        <div class="siteblock siteblock_calc bg-white">
            <Suspense>
                <CalcModels />
            </Suspense>
        </div>
        <Footer />
        <Modal />
    </div>
</template>
