<template>
    <section class="services pb-4">
        <img v-if="image_src" :src="image_src" alt="wave" loading="lazy" style="margin-top: -5px;"/>
        <div class="container mt-5 pb-5">
            <div class="row d-flex justify-content-center justify-content-md-between
             flex-wrap g-4">
                <ServicesCard 
                    v-for="(service, index) in services_list"
                    :key="index"
                    :item="service"
                />
            </div>
        </div>
    </section>
</template>

<script setup lang="ts">
const image_src = ref('');

const services_list = ref([
    {
        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',
    },
    {
        image: '/images/services/service_5.webp',
        title: 'Limpieza artesanal de basura inorgánica en áreas de nado de hoteles',
    },
    {
        image: '/images/services/service_6.webp',
        title: 'Limpieza de juegos inflables de playa',
    },
    {
        image: '/images/services/service_7.webp',
        title: 'Limpieza de muelles flotantes',
    },
    {
        image: '/images/services/service_8.webp',
        title: 'Instalación artesanal de anclajes para boyeo',
    },
]);

onMounted(() => {
    image_src.value = '/images/wave-list.svg';
});



</script>

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