<template>
    <NuxtLayout :name="device" :config="config">
        <main class="home">
            <HomeTopSlider />
            <HomeMainCategories />
            <HomeBanners />
            <HomeAmazingOffers />
            <HomeReviews />
            <HomeEstProducts />
            <HomePopularCategories />
            <HomeLatestPosts />
            <HomeProducers :title="$t('producers')" />
        </main>
    </NuxtLayout>
</template>

<script setup>
import init from '../initialize/home'
provide('init', init)

const { device } = inject('service')
const config = reactive({
    mobile: { header: { search: true, menu: true } },
})

const { status, data, error } = await useFetch('/api/pages/landing')

if (status.value == 'success') {
    useSeoMeta(data.value.meta || {})
    provide('data', data.value)
}
else throw createError(error.value)
</script>

<style lang="scss">
.home {
    @apply flex flex-col max-lg:pb-24;
}
</style>