<template>

    <section class="bg-white pb-4">
        <div class="container">
            <div class="row g-4 align-items-center">
                <div class="col-12 col-lg-6 about-description">
                    <h2 class="fw-bold mb-4">Sobre nosotros</h2>
                    <p class="pe-3">
                        En <b>Leviathán</b>, nos dedicamos a la limpieza subacuática <b>sostenible</b>. Utilizamos tecnología avanzada
                        <b>para proteger los ecosistemas marinos</b> y mantener nuestros océanos saludables. Únete a nuestra misión
                        de preservar el mundo submarino.
                    </p>
                </div>
                <div class="col-12 col-lg-6">
                    <div class="card shadow border-0">
                        <iframe class="rounded-3" width="100%" height="315" src="https://www.youtube.com/embed/GjmdwKH4VZs?si=WmEDWhikVk9WAwdO" title="Leviathán video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="d-flex justify-content-end my-3">
                    <NuxtLink to="/nosotros" class="link d-flex gap-2 align-items-center" @click="changeActualPage('Nosotros')">
                        <span>Ver más</span>
                        <i class="bi bi-arrow-right-circle fs-5"></i>
                    </NuxtLink>
                </div>
            </div>
        </div>
    </section>


</template>

<script setup lang="ts">
const menuStore = useMenuStore();
const { changeActualPage } = menuStore;
</script>

<style scoped lang="scss">

.link {
    font-weight: bold;
    color: #B4590A;
    text-decoration: none;

    &:hover {
        cursor: pointer;
    }
}

.about-description {
    p {
        font-size: 17px;
    }
}

</style>