<template>
    <div class="overflow-x-hidden">
        <div class="header">
            <div class="header-content">
                <SharedHeader />
            </div>
            <div class="header-content-slogan container d-flex justify-content-center align-items-center flex-column">
                <h1 v-if="actual_page == 'Servicios'">Servicios</h1>
                <h1 v-if="actual_page == 'Nosotros'">¿Quiénes somos?</h1>
                <h1 v-if="actual_page == 'Contacto'">Contacto</h1>
                <div class="container-breadcrumb">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <NuxtLink to="/">Inicio</NuxtLink>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">{{ actual_page }}</li>
                        </ol>
                    </nav>
                </div>
            </div>
            <svg class="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
                <path fill="#FFFFFF" fill-opacity="1"
                    d="M0,224L120,234.7C240,245,480,267,720,266.7C960,267,1200,245,1320,234.7L1440,224L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z">
                </path>
            </svg>
        </div>

        <main>
            <NuxtPage />
        </main>
        <SharedFooter />
        <SharedWhatsapp />
    </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';

const menuStore = useMenuStore();
const { changeActualPage } = menuStore;
const { actual_page } = storeToRefs(menuStore);

const route = useRoute();

const pages = ref(['/servicios', '/nosotros', '/contacto']);

if(pages.value.includes(route.path)){
    const first_letter = route.path.split('/')[1][0].toUpperCase();
    const rest_name = route.path.split('/')[1].substring(1);
    changeActualPage(first_letter+rest_name)
}

</script>

<style scoped lang="scss">
.header {
    background-image: url('/images/secondary.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    height: calc(50vh - 10px);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;

    .header-content {
        z-index: 1;
        text-align: center;
    }

    .header-content-slogan {
        h1 {
            font-size: 45px;
            margin-bottom: 20px;
        }

        .container-breadcrumb {
            z-index: 0;

            nav ol {
                .breadcrumb-item {
                    text-decoration: none;
                    color: white;

                    a {
                        color: rgb(211, 211, 211);
                        text-decoration: none;
                        transition: all 300ms ease;

                        &:hover {
                            color: white;
                        }
                    }
                }
            }
        }

        button {
            background: #B4590A;
            color: #FFF;
        }
    }
}

.wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 0;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: white;
}

@media (min-width: 992px) {
    .header {
        align-items: flex-end;
    }

}

@media (min-width: 768px) {
    .header-content-slogan {
        height: calc(100% - 60%);
    }
}
</style>