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

    // Variables
    const { page } = stores()
    pageAnimation.set(animateIn)
    const pageTitle = `${$site.seo_name} - Keep Updated`


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

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

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

                <TitleSite />
            </div>

            <div class="newsletter newsletter--column">
                <div class="newsletter__text style-description page__part">
                    <p>{$site.newsletter_text}</p>
                </div>

                <div class="page__part">
                    <NewsletterForm title={true} />
                </div>
            </div>
        </div>

        {#if process.browser}
        <Lazy offset={window.innerHeight} fadeOption={null}>
            <InteractiveGlobe type="part" opacity="0.5" />
        </Lazy>
        {/if}

        <Footer />
    </section>
</main>