<template>
    <footer class="footer pt-5">
        <div class="container">
            <div class="row">
                <!-- NAVEGACIÓN -->
                <div class="col-12 col-md-6 col-lg-4">
                    <div class="container-navigation">
                        <h2 class="fw-bold text-white">Leviathán</h2>
                        <nav class="nav">
                            <div class="nav-item col-6">
                                <NuxtLink to="/" class="nav-link text-white px-0" :class="route.path == '/' ? 'active':''" @click="changeActualPage('')">Inicio</NuxtLink>
                            </div>
                            <div class="nav-item col-6">
                                <NuxtLink to="/servicios" class="nav-link text-white px-0" :class="route.path.includes('/servicios') ? 'active':''" @click="changeActualPage('Servicios')">Servicios</NuxtLink>
                            </div>
                            <div class="nav-item col-6">
                                <NuxtLink to="/nosotros" class="nav-link text-white px-0" :class="route.path.includes('/nosotros') ? 'active':''" @click="changeActualPage('Nosotros')">Nosotros</NuxtLink>
                            </div>
                            <div class="nav-item col-6">
                                <NuxtLink to="/contacto" class="nav-link text-white px-0" :class="route.path.includes('/contacto') ? 'active':''" @click="changeActualPage('Contacto')">Contacto</NuxtLink>
                            </div>
                        </nav>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-lg-4">
                    <h4 class="fw-bold text-white text-center">Teléfonos de contacto</h4>
                    <div class="py-3 contact-phones">
                        <div class="nav-item text-center" v-for="(phone, index) in phones" :key="index">
                            <a :href="'tel:'+phone.number" class="text-center nav-link mb-3 d-inline-block">{{ phone.label }}</a>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-lg-4">
                    <div class="container-email">
                        <h4 class="fw-bold text-white">Mándanos un mensaje</h4>
                        <a href="mailto:leviathansoluciones@gmail.com"
                            class="nav-link">{{runtime_config.public.email}}</a>
                    </div>
                    <div class="container-socials">
                        <h4 class="fw-bold">Síguenos:</h4>
                        <div class="socials">
                            <NuxtLink :to="runtime_config.public.facebook" target="_blank" class="nav-link"><i class="bi bi-facebook"></i></NuxtLink>
                            <NuxtLink :to="runtime_config.public.instagram" target="_blank" class="nav-link"><i class="bi bi-instagram"></i></NuxtLink>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="credits">
            <div>
                <p class="mb-2">Leviathán {{ new Date().getFullYear() }}<sup>&copy;</sup> Todos los derechos reservados</p>
                <p>
                    Made by
                    <NuxtLink to="https://techmind.com.mx" target="_blank"> TECHMIND<sup>&copy;</sup></NuxtLink>
                    with <i class="bi bi-heart"></i>
                </p>
            </div>
        </div>
    </footer>
</template>

<script setup lang="ts">
import { useMenuStore } from '~/stores/menu.store';
const menuStore = useMenuStore();
const { changeActualPage } = menuStore;
const route = useRoute();
const runtime_config = useRuntimeConfig();

const phones = ref<any>(runtime_config.public.phones);

</script>

<style scoped lang="scss">
.footer {
    background: #090B1A;
}

.container-navigation {
    text-align: center;
    margin-bottom: 30px;

    h2 {
        margin-bottom: 20px;
    }

    .nav .nav-item a {
        text-align: center;
    }
}

.contact-phones {
    .nav-item {
        a {
            color: white;
            transition: all 300ms ease;

            &:hover {
                color: rgb(211, 211, 211);
            }
        }
    }
}

.container-email {
    text-align: center;
    margin-bottom: 20px;
    a {
        color: white;
        transition: all 300ms ease;

        &:hover {
            color: rgb(211, 211, 211);
        }
    }
}

.credits {
    border-top: 1px solid #444;
    color: white;
    text-align: center;
    padding-top: 25px;
    padding-bottom: 20px;
    p {
        margin-bottom: 0;
    }
    a {
        color: white;
        text-decoration: none;
    }
}

.container-socials {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    gap: 10px;
    margin-bottom: 15px;
    h4 {
        margin-bottom: 0px;
    }
    .socials {
        display: flex;
        gap: 20px;
        a {
            font-size: 25px;
            transition: all 300ms ease;

            &:hover {
                cursor: pointer;
                color: rgb(211, 211, 211);
            }
        }
    }
}
</style>