<style lang="scss">
    @import "../../style/pages/credits";
</style>

<script lang="ts">
    import { navigating } from '$app/stores'
    import type { PageData } from './$types'
    import { onMount } from 'svelte'
    import { stagger, timeline } from 'motion'
    import { DELAY } from '$utils/contants'
    import { quartOut } from 'svelte/easing'
    // Components
    import Metas from '$components/Metas.svelte'
    import PageTransition from '$components/PageTransition.svelte'
    import Image from '$components/atoms/Image.svelte'
    import Heading from '$components/molecules/Heading.svelte'
    import InteractiveGlobe2 from '$components/organisms/InteractiveGlobe2.svelte'

    export let data: PageData
    const { credits, credit } = data


    onMount(() => {
        /**
         * Animations
         */
        const animation = timeline([
            // Heading
            ['.heading .text', {
                y: [24, 0],
                opacity: [0, 1],
            }],

            // Categories
            ['.credits__category', {
                opacity: [0, 1],
            }, {
                at: 0,
                delay: stagger(0.35, { start: 0.5 }),
            }],

            // Names
            ['.credits__category > ul > li', {
                y: [24, 0],
                opacity: [0, 1],
            }, {
                at: 1.1,
                delay: stagger(0.35),
            }],
        ], {
            delay: $navigating ? DELAY.PAGE_LOADING / 1000 : 0,
            defaultOptions: {
                duration: 1.6,
                easing: quartOut,
            },
        })
        animation.stop()

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

<Metas
    title="Credits – Houses Of"
    description={credits.text}
/>


<PageTransition name="credits">
    <Heading
        text={credits.text}
    />

    <section class="credits__list">
        <div class="grid container">
            {#each credits.list as { title, credits }}
                <div class="credits__category grid">
                    <h2 class="title-small">{title}</h2>
                    <ul>
                        {#each credits as { name, role, website }}
                        <li>
                            <dl>
                                <dt>
                                    {#if website}
                                        <h3>
                                            <a href={website} rel="noopener external" target="_blank" tabindex="0">{name}</a>
                                        </h3>
                                    {:else}
                                        <h3>{name}</h3>
                                    {/if}
                                </dt>
                                <dd>
                                    {role}
                                </dd>
                            </dl>
                        </li>
                        {/each}
                    </ul>
                </div>
            {/each}

            <div class="credits__category grid">
                <h2 class="title-small">Photography</h2>
                <ul>
                    {#each credit as { name, website, location }}
                    <li>
                        <dl>
                            <dt>
                                {#if website}
                                    <h3>
                                        <a href={website} rel="noopener external" target="_blank" tabindex="0">{name}</a>
                                    </h3>
                                {:else}
                                    <h3>{name}</h3>
                                {/if}
                            </dt>
                            <dd>
                                <ul data-sveltekit-noscroll>
                                    {#each location as loc}
                                        {#if loc.location_id}
                                            <li>
                                                <a href="/{loc.location_id.country.slug}/{loc.location_id.slug}" tabindex="0">
                                                    <Image
                                                        id={loc.location_id.country.flag.id}
                                                        sizeKey="square-small"
                                                        width={16}
                                                        height={16}
                                                        alt="Flag of {loc.location_id.country.slug}"
                                                    />
                                                    <span>{loc.location_id.name}</span>
                                                </a>
                                            </li>
                                        {/if}
                                    {/each}
                                </ul>
                            </dd>
                        </dl>
                    </li>
                    {/each}
                </ul>
            </div>
        </div>
    </section>

    <InteractiveGlobe2 type="cropped" />
</PageTransition>