<script>
    import { onMount } from 'svelte'
    import {
        site,
        currentLocation,
        currentPhotos
    } from '../store'
    import AOS from 'aos'

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

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


    /*
    ** Run code on browser only
    */
    onMount(() => {
        // Scroll apparitions
        if (process.browser) {
            AOS.init()
        }
    })
</script>

<svelte:head>
	<title>Houses Of - Beautiful houses of planet Earth</title>
</svelte:head>

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

            <TitleSite />
        </div>

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

    <Globe />

    <Locations />
</section>

<Footer />
