<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 InteractiveGlobe2 from '$components/organisms/InteractiveGlobe2.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')
</script>

<Metas
    title="Locations"
    description=""
    image=""
/>

<PageTransition name="explore">
    <Heading
        text="Explore the globe to discover unique locations across the world"
    />

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

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