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

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

    const { locations }: any = getContext('global')
    const text = "Explore the globe to discover unique locations across the world"
</script>

<Metas
    title="Locations – Houses Of"
    description={text}
/>


<PageTransition>
    <main class="explore">
        <Heading {text} />

        <section class="explore__locations">
            <InteractiveGlobe />
            <Locations {locations} />
        </section>

        <section class="grid-modules is-spaced grid">
            <div class="wrap">
                <ShopModule />
                <NewsletterModule />
            </div>
        </section>
    </main>
</PageTransition>