<script lang="ts">
    import { base as b, assets as a } from '$app/paths'
    import type { PageData } from './$types'
    import { onMount } from 'svelte'
    import '../app.scss'
    import { email } from '../stores'
    import Coturnix from './Coturnix.svelte'
    import Grain from './Grain.svelte'
    import Donnees from './Donnees.svelte'
    export let data: PageData & {
        donnees?: {
            projets: number
            puissance: number
            economies: number
        }
    }
    export let base = b
    export let assets: string = a
    onMount(() => {
        email.set(data.email || null)
    })
</script>

<div>
    <div class="img" style="background-image: url({assets}/trace.svg);">
        <div style="padding-top:100px" class="container-md">
            <h1 class="text-uppercase lh-1" style="font-size:4rem;width:50%">
                No GRAIN,<br />No gain.
            </h1>
            <h2 class="sub">
                L'outil <span class="text-primary">gratuit</span> de faisabilité
                d'autoconsommation.
            </h2>
            <a class="mt-3 btn btn-primary" href="{base}/projet/nouveau"
                >Lancer ma simulation</a>
            <a
                class="ms-3 mt-3 btn btn-primary"
                href="https://coturnix.fr/communaute/debut"
                >Créer ma communauté</a>
            {#if data.projets?.length}
                <div
                    class="card border-primary my-5 mx-auto overflow-scroll"
                    style="max-width:400px;max-height:300px">
                    <div class="list-group list-group-flush">
                        {#each data.projets as p}
                            <a
                                href="{base}/projet/{p.id}"
                                class="list-group-item d-flex justify-content-between align-items-center">
                                {p.nom}
                                <span class="badge bg-primary rounded-pill"
                                    >{p.puissance}kWc</span>
                            </a>
                        {/each}
                    </div>
                </div>
            {/if}
        </div>
    </div>
</div>
<div class="border-primary border-bottom border-5" />
<div class="container-md">
    <Donnees donnees={data.donnees} />
    <h1 class="my-5 lh-1 text-center">
        Simulez <span class="text-primary fw-bold">gratuitement</span> vos
        <span class="text-primary fw-bold">revenus</span> photovoltaïques.
    </h1>

    <div class="row p-5">
        <div class="col-sm-0 col-md-1" />
        <div class="col-12 col-md-6 me-auto">
            <h2>
                <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">local</span>
                et <span class="text-primary fw-bold">de saison</span>.
            </p>
        </div>
    </div>

    <div class="row p-5">
        <div class="col-12 col-md-6 text-md-end ms-md-auto">
            <h2>
                Reprenez <span class="text-primary fw-bold">les rennes</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 fw-bold"> Simplement*</span>,
                <span class="text-primary fw-bold">rapidement</span>
                et <span class="text-primary fw-bold">gratuitement</span>.<br />
            </p>
            <a
                class="mt-3 btn btn-sm btn-outline-primary"
                href="{base}/projet/nouveau">Je lance ma simulation</a>
        </div>
        <div class=" col-sm-0 col-md-1" />
    </div>

    <div class="row p-5">
        <div class="col-sm-0 col-md-1" />
        <div class="col-12 col-md-6 me-auto">
            <h2>Et <span class="text-primary fw-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 fw-bold">on fait tout ça.</span>.
            </p>
            <a class="mt-3 btn btn-primary" href="/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(max(1200px, 100vh - 105px));
        background-size: calc(min(75vw, (180/70) * 50vh))
            calc(min(50vh, (70/180) * 75vw));
        width: 100%;
        background-position: bottom 0px right 0px;
        background-repeat: no-repeat;
    }

    @media (min-width: 480px) {
        .img {
            height: calc(max(800px, 100vh - 105px));
        }
    }

    @media not (prefers-color-scheme: dark) {
        .card {
            background-color: color-mix(
                in srgb,
                var(--bs-body-bg),
                transparent 30%
            );
        }
    }

    @media (prefers-color-scheme: dark) {
        .card {
            background-color: color-mix(
                in srgb,
                var(--bs-body-bg),
                transparent 30%
            );
        }
    }
</style>