<style lang="scss" src="../../../style/pages/subscribe.scss"></style>

<script lang="ts">
    import { navigating } from '$app/stores'
    import { onMount } from 'svelte'
    import { stagger, timeline } from 'motion'
    import { DELAY } from '$utils/constants'
    import { quartOut } from '$animations/easings'
    // Components
    import Metas from '$components/Metas.svelte'
    import Heading from '$components/molecules/Heading/Heading.svelte'
    import EmailForm from '$components/molecules/EmailForm/EmailForm.svelte'
    import NewsletterIssue from '$components/molecules/NewsletterIssue/NewsletterIssue.svelte'
    import InteractiveGlobe from '$components/organisms/InteractiveGlobe/InteractiveGlobe.svelte'

    let { data } = $props()

    const latestIssue = $derived(data.issues[0])


    onMount(() => {
        /**
         * Animations
         */
        const animation = timeline([
            // Elements
            ['.heading .text, .subscribe__top .newsletter-form', {
                y: [24, 0],
                opacity: [0, 1],
            }, {
                at: 0.5,
                delay: stagger(0.35),
            }],

            // Reveal each issue
            ['.subscribe__issues h2, .subscribe__issues > .issue-container, .subscribe__issues > ul', {
                y: [16, 0],
                opacity: [0, 1],
            }, {
                duration: 1,
                at: 1.5,
                delay: stagger(0.15),
            }],
        ], {
            delay: $navigating ? DELAY.PAGE_LOADING / 1000 : 0,
            defaultOptions: {
                duration: 1.6,
                easing: quartOut,
            },
        })
        animation.stop()

        // Run animation
        requestAnimationFrame(animation.play)
    })
</script>

<Metas
    title="Subscribe – Houses Of"
    description="Subscribe to the Houses Of newsletter to be notified when new photos or locations are added to the site and when more prints are available on our shop"
/>


<main class="subscribe">
    <div class="subscribe__top">
        <Heading
            text={data.newsletter_page_text}
        />

        <EmailForm />
    </div>

    <section class="subscribe__issues">
        <h2 class="title-small">Latest Issue</h2>
        <div class="issue-container">
            <NewsletterIssue size="large" date={latestIssue.date_sent} {...latestIssue} />
        </div>

        {#if data.issues.length > 1}
            <h2 class="title-small">Past Issues</h2>
            <ul>
                {#each data.issues.slice(1) as { issue, title, date_sent: date, link, thumbnail }}
                    <li class="issue-container">
                        <NewsletterIssue {issue} {title} {link} {thumbnail} {date} />
                    </li>
                {/each}
            </ul>
        {/if}
    </section>

    <InteractiveGlobe type="cropped" />
</main>
