<script lang="ts">
    import { navigate } from "svelte-routing"
    import { serviceNavigation, sites, darkMode } from "../stores"
</script>

<div class="footer">
    <div class="infos">
        <h3>AllKids Erfurt</h3>
        <div class="infos-inner">
            <div class="upper">
                <p>Inh. Grit Grenzdörfer</p>
                <p>Eichenstraße 8</p>
                <p>99084 Erfurt</p>
            </div>
            <div class="lower">
                <p>Tel.: <a href="tel:+491784124555">0178 4124555</a></p>
                <p>Email: <a href="mailto:kiro0206@icloud.com">kiro0206@icloud.com</a></p>
            </div>
        </div>
        <div class="social">
            <a href="https://www.facebook.com/allkids.erfurt/">
                <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M18 3.06c-8.25 0-15 6.735-15 15.03 0 7.5 5.49 13.725 12.66 14.85v-10.5h-3.81v-4.35h3.81v-3.315c0-3.765 2.235-5.835 5.67-5.835 1.635 0 3.345.285 3.345.285v3.705h-1.89c-1.86 0-2.445 1.155-2.445 2.34v2.82h4.17l-.675 4.35H20.34v10.5A15 15 0 0 0 33 18.09c0-8.295-6.75-15.03-15-15.03z"
                        fill="var(--normal-font-color)"></path>
                </svg>
            </a>
        </div>
    </div>
    <div class="services">
        {#each $serviceNavigation?.elemente || [] as service, i (i)}
            <button
                on:click="{() => {
                    navigate(`${$sites[service.seite || '']?.path}`)
                }}">{service?.name}</button
            >
        {/each}
    </div>
    <button
        class="darklight"
        on:click="{() => {
            const body = document.querySelector('body')
            if (body) {
                body.classList.toggle('darkTheme')
            }
            $darkMode = !$darkMode
        }}"
    >
        {#if !$darkMode}
            <img src="/media/dark.svg" alt="darkmode" />
        {:else}
            <img src="/media/light.svg" alt="lightmode" />
        {/if}
    </button>
</div>

<style lang="less">
    @import "../assets/css/variables.less";
    .social {
        margin-top: 20px;
    }
    .darklight {
        width: 36px;
        height: 36px;
        object-fit: contain;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .footer {
        margin-top: 60px;
        width: 100vw;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        max-width: calc(@body-maxwidth - min(9vw, 200px));
        background-color: var(--hover-color);
        padding: min(4.5vw, 100px) min(4.5vw, 100px) 0px min(4.5vw, 100px);
    }
    .infos {
        display: flex;
        height: 70%;
        .infos-inner {
            gap: 10px;
            display: flex;
        }
    }

    .services {
        display: flex;
        flex-direction: column;
        button {
            font-size: inherit;
            padding: 6px 0px;
            text-align: start;
        }
    }

    @media @mobile {
        .infos {
            flex-direction: column;
            justify-content: start;

            @media @mobile {
                gap: 20px;
            }
            @media @tablet {
                gap: 40px;
            }
            min-height: 350px;
            .infos-inner {
                flex-direction: column;
            }
        }
    }
    @media @desktop {
        .footer {
            min-height: 350px;
            .infos-inner {
                gap: 5vw;
                flex-direction: row;
            }
        }
    }
</style>
