<script lang="ts" setup>
// import

import useHomeData from "~/composables/api/home/useHomeData";
import ProductsGrid from "~/components/global/ProductsGrid.vue";

import { useStorage } from "@vueuse/core";

// state

const { data: homeData, suspense } = useHomeData();

// ssr

const response = await suspense();

if (response.isError) {
    throw createError({
        statusCode: 500,
        statusMessage: `Landing error : ${response.error.message}`,
    });
}

// lifecycle

onMounted(() => {
    window.scrollTo(0, 0);
});
</script>

<template>
    <div class="w-full">
        <LoadingOverlay />
        <Hero class="mb-20 max-md:mt-[80px]" />
        <Preview />
        <ProductsShowcase class="mb-40" />
        <ProductsGrid
            title="محصولات پرفروش"
            :products="[...homeData!.products,...homeData!.products]"
        />
        <Categories class="mt-40" />
        <Brands />
        <LatestStories class="mb-20" />
    </div>
</template>
