<style lang="scss">
    @import "../style/pages/error";
</style>

<script lang="ts">
    import { getContext } from 'svelte'
    import { page } from '$app/stores'
    // Components
    import Metas from '$components/Metas.svelte'
    import PageTransition from '$components/PageTransition.svelte'
    import BoxCTA from '$components/atoms/BoxCTA.svelte'
    import Heading from '$components/molecules/Heading.svelte'
    import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
    import ListCTAs from '$components/organisms/ListCTAs.svelte'
    import Locations from '$components/organisms/Locations.svelte'
    import ShopModule from '$components/organisms/ShopModule.svelte'
    import NewsletterModule from '$components/organisms/NewsletterModule.svelte'

    const { locations }: any = getContext('global')
    const errors = {
        404: {
            title: 'Page not found',
            message: 'You seem lost…',
        },
        500: {
            title: 'Error',
            message: 'Server error…',
        },
    }
    const defaultMessage = 'You are welcome to explore our locations or discover our shop.'
</script>

<Metas
    title="{errors[$page.status].title} – Houses Of"
/>


<PageTransition>
    <main class="page-error">
        <div class="page-error__top">
            <Heading
                text="{$page.error.message ?? errors[$page.status].message} <br>{defaultMessage}"
            />

            <ListCTAs>
                <li>
                    <BoxCTA
                        url="/photos"
                        icon="photos"
                        label="Browse all photos"
                        alt="Photos"
                    />
                </li>
                <li>
                    <BoxCTA
                        url="/shop"
                        icon="bag"
                        label="Shop our products"
                        alt="Shopping bag"
                    />
                </li>
                <li>
                    <BoxCTA
                        url="/about"
                        icon="compass"
                        label="Learn about the project"
                        alt="Compass"
                    />
                </li>
            </ListCTAs>
        </div>

        <InteractiveGlobe />
        <Locations {locations} />

        <div class="grid-modules">
            <div class="container grid">
                <div class="wrap">
                    <ShopModule />
                    <NewsletterModule />
                </div>
            </div>
        </div>
    </main>
</PageTransition>