<template>
    <section class="container">
        <div class="row mb-5 mt-5 px-4">
            <div class="slogan d-flex flex-wrap justify-content-center px-3 py-4 rounded-3">
                <!-- IMAGE -->
                <div class="slogan-image col-12 col-md-6 d-flex justify-content-center">
                    <img src="/images/leviathan.png" alt="Leviathan-logo" class="w-75" loading="lazy">
                </div>
                <!-- text-slogan -->
                <div class="slogan-text col-12 col-md-6">
                    <h2 class="text-white">Profundidad y excelencia en cada limpieza</h2>
                    <div>
                        <NuxtLink to="/contacto" class="btn btn-contact" @click="changeActualPage('Contacto')">Contáctanos</NuxtLink>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

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

</script>

<style scoped lang="scss">
.slogan {
    background-image: url('/images/secondary.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    .slogan-image {
        img {
            object-fit: contain;
        }
    }

    .slogan-text {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        h2 {
            font-size: 30px;
            text-align: center;
        }

        .btn-contact {
            margin: 20px;
            display: inline-block;
            background: #B4590A;
            color: #FFF;
            padding: 10px 20px;
            font-size: 17px;
            transition: all 300ms ease-in-out;

            &:hover {
                cursor: pointer;
                background: #ea740e;
            }
        }
    }
}

@media (min-width: 998px) {
    .slogan {
        .slogan-text {
            h2 {
                font-size: 45px;
            }
        }
    }
}

</style>