<template>
    <section class="services pb-4">
        <svg class="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 300">
            <path fill="#ffffff" fill-opacity="1"
                d="M0,128L40,133.3C80,139,160,149,240,133.3C320,117,400,75,480,58.7C560,43,640,53,720,90.7C800,128,880,192,960,202.7C1040,213,1120,171,1200,149.3C1280,128,1360,128,1400,128L1440,128L1440,0L1400,0C1360,0,1280,0,1200,0C1120,0,1040,0,960,0C880,0,800,0,720,0C640,0,560,0,480,0C400,0,320,0,240,0C160,0,80,0,40,0L0,0Z">
            </path>
        </svg>
        <div class="container mb-3">
            <div class="mb-5">
                <h2 class="text-white text-center mb-5">Nuestros servicios</h2>
                <div class="row justify-content-evenly flex-wrap gap-4">
                    <div class="card card-bg px-0 shadow-lg border-0" style="width: 18rem;" v-for="(service, index) in data" :key="index">
                        <img :src="service.image" :alt="service.title" class="card-img-top" style="background-color: transparent;" width="100%" height="100%">
                        <div class="card-body my-3 d-flex flex-column justify-content-between">
                            <h3>{{ service.title }}</h3>
                            <div class="d-flex justify-content-center">
                                <NuxtLink :to="'/contacto?message='+encodeURIComponent(service.title)" class="btn-contact mt-3" @click="changeActualPage('Contacto')">
                                    <span>Me interesa</span>
                                    <i class="bi bi-arrow-right-circle"></i>
                                </NuxtLink>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="d-flex justify-content-center">
                <NuxtLink to="/servicios" class="btn btn-more-services" @click="changeActualPage('Servicios')">Todos los servicios</NuxtLink>
            </div>
        </div>

    </section>
</template>

<script setup lang="ts">
const menuStore = useMenuStore();
const { changeActualPage } = menuStore;
const data = ref<{image: string, title: string}[]>([]);

data.value = [
    {
        image: '/images/services/service_1.webp',
        title: 'Limpieza de cascos y tren motor de embarcaciones (flechas, propelas y palas)',
    },
    {
        image: '/images/services/service_2.webp',
        title: 'Limpieza y prospección de rosarios de boyas',
    },
    {
        image: '/images/services/service_3.webp',
        title: 'Limpieza de boyas de amarre',
    },
    {
        image: '/images/services/service_4.webp',
        title: 'Limpieza y prospección de anclajes de boyeo',
    },
]

</script>

<style scoped lang="scss">
.card-bg {
    background: rgba($color: #202A34, $alpha: 0.5);
    h3 {
        font-size: 17px;
        color: white;
    }
    .btn-contact {
        border: 1px solid #ccc;
        padding: 5px 10px;
        border-radius: 20px;
        text-decoration: none;
        color: #fff;
        text-align: center;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        transition: all 300ms ease;


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

.btn-more-services {
    background: #B4590A;
    color: #FFF;
    padding: 10px 20px;
    font-size: 17px;
    transition: all 300ms ease-in-out;

    &:hover {
        cursor: pointer;
        background: #ea740e;
    }
}
</style>