<script>
    import { onMount } from 'svelte'
    import { stores } from '@sapper/app'
    import {
        site,
        currentLocation,
        currentPhotos,
        pageReady,
        pageTransition
    } from 'utils/store'

    // Components
    import IconArrow from 'atoms/IconArrow'
    import TitleSite from 'atoms/TitleSite'
    import Globe from 'molecules/InteractiveGlobe'
    import Locations from 'organisms/Locations'
    import Footer from 'organisms/Footer'
    import SocialMetas from 'utils/SocialMetas'

    // Animations
    import { animateIn } from 'animations/page'
    pageTransition.onAnimationEnd = animateIn

    // Variables
    const { page } = stores()


    // Reset current location if existing
    $: {
        if ($currentLocation) currentLocation.set()
        if ($currentPhotos) currentPhotos.set()
    }


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

<svelte:head>
	<title>{$site.seo_name} - {$site.seo_title_default} of planet Earth</title>
    <meta name="description" content={$site.description}>
    <SocialMetas
        url="https://{$page.host}/choose"
        title="{$site.seo_name} - {$site.seo_title_default} planet Earth"
        description={$site.seo_description_default}
        image={$site.seo_share_image.full_url}
    />
</svelte:head>

<section class="page explore">
    <div class="wrap">
        <div class="page__top">
            <a href="/" class="button-control button-control--pink dir-left" rel="prefetch">
                <IconArrow direction="left" color="#fff" class="icon" />
                <IconArrow direction="left" color="#fff" class="icon" hidden="true" />
            </a>

            <TitleSite />
        </div>

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

    <Globe />

    <Locations />
</section>

<Footer />
