<script lang="ts">
    import { serviceNavigation, content } from "../store"
    import { navigateWrapper } from "../functions/utils"
</script>

<div class="footer">
    <div class="infos">
        <h3>webmakers Erfurt</h3>
        <div class="infos-inner">
            <div class="upper">
                <p>Inh. Marc Oschmann</p>
                <p>Marktstraße 34</p>
                <p>99084 Erfurt</p>
            </div>
            <div class="lower">
                <p>Tel.: 0361 6021502</p>
                <p>Fax.: 0361 6021502</p>
                <p>Email: webmakers@gmail.de</p>
            </div>
        </div>
        <div class="social">
            <a href="">
                <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M11.7 3h12.6c4.8 0 8.7 3.9 8.7 8.7v12.6a8.7 8.7 0 0 1-8.7 8.7H11.7C6.9 33 3 29.1 3 24.3V11.7A8.7 8.7 0 0 1 11.7 3zm-.3 3A5.4 5.4 0 0 0 6 11.4v13.2c0 2.985 2.415 5.4 5.4 5.4h13.2a5.4 5.4 0 0 0 5.4-5.4V11.4C30 8.415 27.585 6 24.6 6H11.4zm14.475 2.25a1.875 1.875 0 1 1 0 3.75 1.875 1.875 0 0 1 0-3.75zM18 10.5a7.5 7.5 0 1 1 0 15 7.5 7.5 0 0 1 0-15zm0 3a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9z"
                        fill="#333333"
                    ></path>
                </svg>
            </a>
            <a href="">
                <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="#333333"
                    ></path>
                </svg>
            </a>
        </div>
    </div>
    <nav class="services">
        <ul>
            {#each $serviceNavigation || [] as service, i (i)}
                <li>
                    <button
                        on:click="{() => {
                            navigateWrapper(`${$content[service?.page || '']?.path}`)
                        }}"
                        ><a class="nav-title-m" href="{$content?.[service?.page || '']?.path}" on:click|preventDefault
                            >{service?.name}</a
                        ></button
                    >
                </li>
            {/each}
        </ul>
    </nav>
</div>

<style lang="less">
    @import "../assets/css/variables.less";
    a {
        text-decoration: none;
    }
    .social {
        margin-top: 20px;
    }
    .footer {
        margin-top: 60px;
        width: 100vw;
        min-height: fit-content;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        max-width: calc(@body-maxwidth - min(9vw, 200px));
        background-color: @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;
            }
            .infos-inner {
                flex-direction: column;
            }
        }
        .footer {
        }
    }
    @media @desktop {
        .footer {
            height: 350px;
            .infos-inner {
                gap: 5vw;
                flex-direction: row;
            }
        }
    }
</style>
