<script lang="ts">
    import { getContext } from 'svelte'
    import { page } from '$app/stores'
    // Components
    import Metas from '$components/Metas.svelte'
    import Button from '$components/atoms/Button.svelte'
    import BoxCTA from '$components/atoms/BoxCTA.svelte'
    import PhotoCard from '$components/molecules/PhotoCard.svelte'
    import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
    import Locations from '$components/organisms/Locations.svelte'
    import Shop from '$components/organisms/Shop.svelte'
    import Newsletter from '$components/organisms/Newsletter.svelte'

    export let photos: any

    const { settings, location, count }: any = getContext('global')
    const { path } = $page
</script>

<Metas
    title="Houses Of"
    description=""
    image=""
/>

<main class="homepage">
    <section class="homepage__intro">
        <h1 class="title-huge">Houses</h1>

        <p class="text-medium">{settings.description}</p>

        <Button text="Explore locations" url="{path}#locations">
            <img src="/images/icons/earth.svg" alt="explore globe">
        </Button>
    </section>

    <section class="homepage__photos">
        <div class="homepage__collage">
            {#each photos as { image: { id, title } }}
                <PhotoCard id={id} alt={title} />
            {/each}
        </div>
    </section>

    <div class="homepage__ctas" id="ctas">
        <p class="discover">
            Discover <strong>{count.photos} homes</strong><br>
            from <strong>{count.locations} cities</strong>
            of <strong>{count.countries} countries</strong>
        </p>

        <div class="cards">
            <BoxCTA
                url="{path}#locations"
                icon="/images/icons/globe.svg"
                label="Discover locations"
                alt="Globe"
            />
            <BoxCTA
                url="/photos"
                icon="/images/icons/photos.svg"
                label="Browse all photos"
                alt="Photos"
            />
            <BoxCTA
                url="/shop"
                icon="/images/icons/bag.svg"
                label="Shop our products"
                alt="Shopping bag"
            />
        </div>
    </div>

    <section class="homepage__locations" id="locations">
        <InteractiveGlobe />

        <Locations
            locations={location}
        />
    </section>

    <div class="grid-modules">
        <div class="container grid">
            <div class="wrap">
                <Shop />
                <Newsletter />
            </div>
        </div>
    </div>
</main>


<script context="module" lang="ts">
    import { fetchAPI } from '$utils/api'

    export async function load ({ page, session, fetch, context }) {
        const res = await fetchAPI(`
            query {
                photo (limit: 11, sort: ["-date_created"]) {
                    image {
                        id
                        title
                    }
                }
            }
        `)

        const { data } = res

        return {
            props: {
                photos: data.photo,
            }
        }
    }
</script>
