<script>
    import { onMount } from 'svelte'
    import { stores } from '@sapper/app'
    import {
        site,
        currentLocation,
        currentPhotos,
        pageReady,
        pageAnimation
    } from 'utils/store'
    // Dependencies
    import Lazy from 'svelte-lazy'
    // Components
    import IconArrow from 'atoms/IconArrow'
    import TitleSite from 'atoms/TitleSite'
    import InteractiveGlobe from 'molecules/InteractiveGlobe'
    import Locations from 'organisms/Locations'
    import Footer from 'organisms/Footer'
    import Transition from 'utils/Transition'
    import SocialMetas from 'utils/SocialMetas'
    // Animations
    import { animateIn } from 'animations/page'

    // Variables
    const { page } = stores()
    pageAnimation.set(animateIn)
    const pageTitle = `${$site.seo_name} - ${$site.seo_title_default} across the globe`

    // Reset current location
    currentLocation.set()
    currentPhotos.set()


    /*
    ** Run code when mounted
    */
    onMount(() => {
        // Page is loaded
        pageReady.set(true)
    })
</script>

<svelte:head>
	<title>{pageTitle}</title>
    <meta name="description" content={$site.seo_description_default}>
    <SocialMetas
        url="{process.env.CONFIG.PROD_URL}{$page.path}"
        title="{pageTitle}"
        description={$site.seo_description_default}
        image={$site.seo_share_image.full_url}
    />
</svelte:head>

<main class="housesof" class:is-transitioning={!$pageReady}>
    <section class="page explore">
        <div class="wrap">
            <div class="page__top">
                <a href="/" class="button-control button-control--lightpink dir-left" aria-label="Back to homepage" rel="prefetch">
                    <IconArrow direction="left" color="#fff" class="icon" />
                    <IconArrow direction="left" color="#fff" class="icon" hidden="true" />
                </a>

                <TitleSite />
            </div>

            <div class="explore__description page__description page__part style-description">
                <p>{$site.explore_globe}</p>
            </div>
        </div>

        {#if process.browser}
        <Lazy offset={window.innerHeight} fadeOption={null}>
            <InteractiveGlobe />
        </Lazy>
        {/if}

        <Locations />
    </section>

    <Footer />
</main>