<script setup lang="ts">
import SocialBtn from "./SocialBtn.vue";
import {ref} from "vue";
import ISocialBtn from "../ISocialBtn.ts";
const socialBtns = ref<ISocialBtn[]>([
    { id: 0, name: "github", link: "https://github.com/Mootfrost777", color: "#c9510c"},
    { id: 1, name: "telegram", link: "https://t.me/mootfrost", color: "#1f9bda"},
    { id: 2, name: "gitea", link: "https://git.mootfrost.dev/Mootfrost777", color: "#609926"}
])

</script>

<template>
  <div class="d-flex flex-column min-vh-100 justify-content-center align-items-center overlay pe-none">
    <div class="main-title text-uppercase text-wrap">
        <span>mootfrost</span>
        <p class="btm">Development</p>
    </div>
    <div class="social pe-auto">
        <div class="social-icons flex-row justify-content-center align-items-center">
            <SocialBtn v-for="el in socialBtns"
                       :btn="el"
                       :key="el.id"/>
        </div>

        <div class="email flex-column flex-wrap pe-auto thin text-uppercase">
            <a href="mailto:hello@mootfrost.dev">hello@mootfrost.dev</a>
        </div>
        <hr class="divider">
        <div class="lower-buttons flex-column flex-wrap thin text-uppercase">
            <router-link to="/about" class="pe-auto">Обо мне</router-link>
            <router-link to="/projects" class="pe-auto">Проекты</router-link>
        </div>
    </div>
  </div>
</template>

<style scoped>
.main-title {
    text-align: center;
    font-size: 3em;
    font-weight: 800;
    color: white;
    line-height: 0.9em;
    letter-spacing: 0.1em;
    margin: 5vh;
}

.thin {
    font-weight: 200;
    line-height: 1.2em;
}
.btm {
    line-height: 0.9;
    font-family: Raleway;
    font-weight: 200;
}

.btn-social {
    margin-left: 5px;
    margin-right: 5px;
    text-decoration: none;
}

.lower-buttons {
    font-weight: 300;
    font-size: 1.3em;
    margin-top: 15px;
    display: flex;
    text-align: center;
    font-family: Comfortaa, sans-serif;
}

.lower-buttons a {
    text-decoration: none;
    color: lightgray;
    margin-bottom: 3px;
    margin-top: 3px;
    transition: 0.3s;
}

.lower-buttons a:hover {
    transition: 0.3s;
}

.email {
    margin-top: 10px;
    display: flex;
    text-align: center;
    font-family: Comfortaa, sans-serif;
}

.email a{
    text-decoration: none;
    color: lightgray;
    margin-bottom: 3px;
    margin-top: 3px;
    transition: 0.3s;
}

.email a:hover {
    color: #e6ca1c;
    transition: 0.3s;
}

.lower-buttons a:hover {
    color: white;
}

.lower-buttons a::before {
    position: relative;
    margin-right: 7px;
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: white;
    background-repeat: no-repeat;
    transition: 0.3s;
    opacity: 0.4;
    vertical-align: 13%;
}

.lower-buttons a::after {
    position: relative;
    margin-left: 7px;
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: white;
    background-repeat: no-repeat;
    transition: 0.3s;
    opacity: 0.4;
    vertical-align: 13%;
}
.lower-buttons a:hover::before {
    transform: translateX(-10px);
    opacity: 1;
    transition: 0.3s;
}

.lower-buttons a:hover::after {
    transform: translateX(10px);
    opacity: 1;
    transition: 0.3s;
}

.divider {
    background-color: white;
    width: 100%;
    border-top: 3px solid #bbb;
    border-radius: 8px;
    opacity: 0.5;
}


.lower-buttons a.email:hover::before {
    background-color: #e6ca1c;
}

.lower-buttons a.email:hover::after {
    background-color: #e6ca1c;
}
</style>