<script lang="ts">
    import { asset, resolve } from '$app/paths'
    import { getContext, onMount } from 'svelte'
    import '../../app.scss'
    import Coturnix from './Coturnix.svelte'
    import Grain from './Grain.svelte'
    import Donnees from './Donnees.svelte'
    import type { Writable } from 'svelte/store'
    export type Data = {
        email: string
        projets: [{ id: string; nom: string; puissance: number }]
        donnees: {
            projets: number
            puissance: number
            economies: number
        }
    }
    let {
        data,
    }: {
        data: Data
    } = $props()

    const email: Writable<string | undefined> = getContext('email')
    onMount(() => {
        email.set(data.email)
    })
</script>

<div
    class="img absolute border-primary border-b-10 z-0"
    style="background-image: url('{asset('/static/trace.svg')}')">
</div>
<div class="flex flex-col img relative z-1">
    <div class="my-auto pb-80">
        <div class="mx-10">
            <h1
                class="uppercase"
                style="font-size:4rem;width:50%;line-height:1em">
                No GRAIN,<br />No gain.
            </h1>
            <h2 class="sub">
                L'outil <span class="text-primary">gratuit</span> et
                <span class="text-primary">open source</span> de faisabilité d'autoconsommation.
            </h2>
            <div class="flex flex-wrap gap-5 mt-3">
                <a
                    class="btn btn-primary"
                    data-testid="a-projet-nouveau"
                    href={resolve('/grain/projet/[id]', { id: 'nouveau' })}
                    >Lancer ma simulation</a>
                <a
                    class="btn btn-primary"
                    href="https://coturnix.fr/communaute/debut"
                    >Créer ma communauté</a>
            </div>
            {#if data?.projets?.length}
                <div
                    class="card shadow-sm border-primary my-5 mx-auto overflow-auto"
                    style="max-width:400px;max-height:300px">
                    <div class="card-body bg-base-100">
                        <ul class="list">
                            {#each data.projets as p (p.id)}
                                <li class="list-row flex justify-between">
                                    <a
                                        href={resolve('/grain/projet/[pid]', {
                                            pid: p.id,
                                        })}>
                                        {p.nom}
                                    </a>
                                    <div class="badge badge-primary">
                                        {p.puissance}kWc
                                    </div>
                                </li>
                            {/each}
                        </ul>
                    </div>
                </div>
            {/if}
        </div>
    </div>
</div>
<div class="mx-10 my-10 relative z-1">
    <Donnees donnees={data.donnees} />
    <h1 class="text-4xl text-balance my-5 lh-1 text-center">
        Simulez <span class="text-primary font-bold">gratuitement</span> vos
        <span class="text-primary font-bold">revenus</span> photovoltaïques.
    </h1>

    <div class="flex py-5 mt-10 mx-auto text-balance">
        <div class="w-full sm:ps-5 sm:w-1/2 sm:ms-auto">
            <h2 class="text-2xl mb-5">
                <span class="text-primary fw-bold">Faisabilité</span> et
                <span class="text-primary fw-bold">optimisation</span>
            </h2>
            <p>
                <Grain />
                vous donne l'ensemble des informations économique de votre projet
                d'auto-consommation et d'auto-consommation collective pour
                <span class="text-primary fw-bold">prévoir</span>,
                <span class="text-primary fw-bold">choisir</span>,
                <span class="text-primary fw-bold">optimiser</span>
                votre installation photovoltaïque et son utilisation.
                <br />Partagez une énergie
                <span class="text-primary fw-bold">moins cher</span>,
                <span class="text-primary fw-bold">locale</span>
                et <span class="text-primary fw-bold">de saison</span>.
            </p>
        </div>
    </div>

    <div class="flex py-5 mx-auto text-balance">
        <div class="w-full sm:pe-5 sm:w-1/2 sm:text-end sm:me-auto">
            <h2 class="text-2xl mb-5 mt-10">
                Reprenez <span class="text-primary font-bold">les rênes</span>.
            </h2>
            <p>
                Avec toutes les informations, simulez le futur de votre
                production d'énergie et reprennez le pouvoir sur votre énergie.<br />
                <span class="text-primary font-bold">Simplement</span>,
                <span class="text-primary font-bold">rapidement</span>
                et
                <span class="text-primary font-bold">gratuitement</span>.
            </p>
            <a
                class="mt-3 btn btn-primary"
                href={resolve('/grain/projet/[id]', { id: 'nouveau' })}
                >Je lance ma simulation</a>
        </div>
    </div>

    <div class="flex py-5 mx-auto text-balance">
        <div class="w-full sm:ps-5 sm:w-1/2 sm:ms-auto">
            <h2 class="text-2xl mb-5 mt-10">
                Et <span class="text-primary font-bold">ensuite</span> ?
            </h2>
            <p>
                Ensuite, passez sur <Coturnix />
                pour créer votre communauté et partager l'énergie de vos panneaux
                photovoltaïque avec vos voisins. Au fait, <Coturnix />
                gère aussi les flux financiers entre les participants.
                <br />Oui,
                <span class="text-primary font-bold">on fait tout ça.</span>.
            </p>
            <a
                class="mt-10 btn btn-primary"
                href="https://coturnix.fr/communaute/debut"
                >Créer ma communauté</a>
        </div>
    </div>
</div>

<style lang="scss">
    .sub {
        font-size: 1.4rem;
        font-weight: bold;
        margin: 20px 0;
    }
    .img {
        height: calc(min(1200px, 100vh - 64px));
        width: 100%;
        background-size: 100vw calc((70 / 180) * 100vw);
        background-position: bottom 0px right 0px;
        background-repeat: no-repeat;
    }

    @media (min-width: 480px) {
        .img {
            height: calc(max(800px, 100vh - 64px));
            background-size: calc(min(75vw, (180/70) * 50vh))
                calc(min(50vh, (70/180) * 75vw));
        }
    }
    p {
        text-wrap: balance;
    }
</style>