@props(['marca'])

<div x-data="conhecaMaisProdutosMobile({
    produtos: [
        { url: '{{ asset('images/produtos-01.webp') }}', nome: 'Asseptgel Higienizador de mãos cristal 1,7kg s/válvula' },
        { url: '{{ asset('images/produtos-02.webp') }}', nome: 'Asseptgel Higienizador de mãos cristal 4,3kg' },
        { url: '{{ asset('images/produtos-03.webp') }}', nome: 'Asseptgel Higienizador de mãos cristal 3g' },
        { url: '{{ asset('images/produtos-04.webp') }}', nome: 'Asseptgel Pró Higienizador de mãos 420g c/válvula' },
    ]
})" class="relative flex flex-col font-bold items-center font-bricolage">

    <div class="relative w-64 h-64 rounded-full overflow-hidden border-2 border-blue-800 ">
        <img :src="produtos[atual].url" alt="Produto" class="object-contain h-full w-full">
    </div>
    <p class="mt-4 text-blue-800 font-semibold text-center px-10" x-text="produtos[atual].nome"></p>

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

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