<template>
    <div class="layout">
        <suspense>
            <site-header />
        </suspense>

        <main class="main-content">
            <mosaic-scroll :items="mosaicItems" />
        </main>
    </div>
</template>

<script setup>
import { useStrapiSingle } from '@/composables/useStrapi'
import useStrapiHead from '@/composables/useStrapiHead'
import { computed } from 'vue'

const { data } = await useStrapiSingle('home')
useStrapiHead()

const mosaicItems = computed(() => data.value?.mosaic_items || [])
</script>

<style lang="scss" scoped>
.layout {
    position: relative;
    min-height: 100vh;

    .main-content {
        position: relative;
        width: 100%;
    }

    div {
        background: var(--theme-bg);
        color: var(--theme-fg);

        code {
            background: var(--grey);
        }
    }
}
</style>
