<template>
    <main id="contact">
        <div>
            <img 
                :src="`/api/assets/${globalData.contact_image}.webp`"
                :alt="globalData.contact_image_titre"
            />
        </div>
        <div>
            <p>{{ globalData.contact_texte }}</p>
            <a :href="'mailto:' + globalData.email">{{ globalData.email }}</a>
        </div>
    </main>
</template>

<script>
export default {
    setup() {
        let globalData = useState('globalData');
        globalData = globalData.value.data;
    
        return {
            globalData
        }
    }
}
</script>

<style lang="scss">
    #contact {
        display: flex;
        flex-direction: column;
        > div:first-of-type {
            width: 40vw;
            > img {
                width: 100%;
            }
        }
        > div:last-of-type {
            margin-top: 2rem;
            > p {
                line-height: 1.2;
                margin-bottom: 1.5rem;
            }
        }
    }

    @media screen and (min-width: 800px) {
        #contact {
            flex-direction: row;
            > div:first-of-type {
                width: 30vw;
            }
            > div:last-of-type {
                width: 40vw;
                margin-left: 2rem;
                align-self: flex-end;
            }
        }
    }

    @media screen and (min-width: 1200px) {
        #contact {
            > div:first-of-type {
                width: 15vw;
            }
            > div:last-of-type {
                width: 30vw;
            }
        }
    }
</style>