<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: menuData } = await apiFetch<ApiMenuType>(`menu/1/?ordering=order`)
const pagesData = menuData.value ? menuData.value.pages : []

const { data: reviewsData } = await apiFetch<ApiReviewsType[]>(`review/`)
const { data: calculatorData } = await apiFetch(`calculator/5/`)

const about = pagesData.find(el => el.slug == 'about')
const reviews = pagesData.find(el => el.slug == 'clients')
const delivery = pagesData.find(el => el.slug == 'how_to')
const advantages = pagesData.find(el => el.slug == 'advantages')

const roubleSign = new Intl.NumberFormat('ru-RU', {
    style: 'currency',
    currency: 'RUB',
});

const aboutText = computed(() => marked.parse(about?.content || ''))
const deliveryText = computed(() => delivery?.content.split('[col]').map(el => marked.parse(el || '')))
const advantagesText = computed(() => {
    let c = advantages?.content || ''
    Object.entries(calculatorData.value || {}).map(item => {
        c = c.replaceAll(`[${item[0]}]`, roubleSign.format(item[1]))
    })
    return marked.parse(c)
})

const { data: advData } = await apiFetch<ApiAdvantageType[]>(`advantage/`)
</script>
<template>
    <div>
        <div class="siteblock bg-white" :id="about?.slug" v-if="about">
            <div class="container">
                <h1 class="siteblock-title">{{ about?.title }}</h1>
                <div class="siteblock-content">
                    <div class="siteblock-text">
                        <span v-html="aboutText"></span>
                    </div>
                </div>
                <div class="siteblock-image">
                    <NuxtImg :src="[imgBase, about?.image].join('/')" alt="разные цвета забора" title=""
                        format="webp" />
                </div>
                <div class="feature">
                    <template v-for="item in advData">
                        <div class="feature-item">
                            <div class="feature-name">{{ item.title }}</div> {{ item.content }}
                        </div>
                    </template>
                </div>
            </div>
        </div>
        <div class="siteblock siteblock_imgbg bg-slate-500"
            :style="[{ backgroundImage: `url(${[imgBase, reviews?.image].join('/')})` }]" v-if="reviews">
            <NuxtImg :src="[imgBase, reviews?.image].join('/')" class="invisible" alt="отзыв" title="" format="webp"
                loading="lazy" />
        </div>
        <div class="siteblock bg-white" :id="reviews?.slug" v-if="reviews">
            <div class="container">
                <template v-for="item in reviewsData?.slice(0, 3)">
                    <div class="review">
                        <div class="review-image">
                            <NuxtImg :src="[imgBase, item.image].join('/')" :alt="item.text" title="" format="webp"
                                loading="lazy" />
                        </div>
                        <div class="review-content">
                            {{ item.comment }}
                        </div>
                        <div class="review-title">
                            {{ item.text }}
                        </div>
                    </div>
                </template>
            </div>
        </div>
        <div class="siteblock bg-white" :id="advantages?.slug">
            <div class="container gap-4">
                <div class="col-span-full xl:col-span-8">
                    <ExpDiagram />
                </div>
                <div class="col-span-full xl:col-span-4 prose">
                    <span v-html="advantagesText"></span>
                </div>
            </div>
        </div>
        <div class="siteblock siteblock_imgbg bg-slate-500"
            :style="[{ backgroundImage: `url(${[imgBase, delivery?.image].join('/')})` }]">
            <NuxtImg :src="[imgBase, delivery?.image].join('/')" class="invisible" v-if="delivery"
                alt="коричневый забор" title="" format="webp" loading="lazy" />
        </div>
        <div class="siteblock siteblock_calc bg-white">
            <LazyCalcValues />
            <Suspense>
                <LazyCalcModels />
            </Suspense>
        </div>
        <div class="siteblock bg-white siteblock_content" :id="delivery?.slug" v-if="deliveryText">
            <div class="container">
                <div class="prose col-span-12 xl:col-span-6">
                    <span v-html="deliveryText[0]"></span>
                </div>
                <div class="prose col-span-12 xl:col-span-6">
                    <span v-html="deliveryText[1]"></span>
                </div>
            </div>
        </div>
    </div>
</template>