@props(['produto'])

<div x-data="ondeAplicarMobile({
        imagens: [
            { url: '{{ asset('images/imagem13@2x.webp') }}', label: 'Nas mãos' },
            { url: '{{ asset('images/imagem2@2x.webp') }}', label: 'Limpeza' },
            { url: '{{ asset('images/imagem1@2x.webp') }}', label: 'Higienização' }
        ]
    })" class="relative flex flex-col items-center">

    <div class="flex justify-center px-4">
        <div class="relative w-[300px] h-[345px] rounded-2xl shadow-lg overflow-hidden">
            <img :src="imagens[atual].url" alt="Slide Atual" class="w-full h-full object-cover">
            <div class="absolute bottom-0 w-full bg-gradient-to-t from-black/70 p-4 text-white text-lg font-bold">
                <span x-text="imagens[atual].label"></span>
            </div>
        </div>
    </div>

    <div class="flex justify-center space-x-4 mt-4">
        <button @click="anterior" class="bg-white border-2 border-solid border-midnightblue-100 flex items-center justify-center rounded-full w-10 h-10 cursor-pointer">
            <img src="{{ asset('images/arrow-left1.svg') }}" class="w-4 h-4">
        </button>
        <button @click="proximo" class="bg-white border-2 border-solid border-midnightblue-100 flex items-center justify-center rounded-full w-10 h-10 cursor-pointer">
            <img src="{{ asset('images/arrow-right1.svg') }}" class="w-4 h-4">
        </button>
    </div>
</div>

<script>
    function ondeAplicarMobile({ imagens }) {
        return {
            imagens,
            atual: 0,
            proximo() {
                this.atual = (this.atual + 1) % this.imagens.length;
            },
            anterior() {
                this.atual = (this.atual - 1 + this.imagens.length) % this.imagens.length;
            }
        };
    }
</script>