@props(['class' => '', 'abas'])
@php
    $selecionada = 0;
    foreach ($abas as $indice => $segmento)
        if ($segmento['inicial']) {
            $selecionada = $indice;
            break;
        }
@endphp
<div x-data="{
    selecionada: {{ $selecionada }},
    total: {{ count($abas) }},
}">
    <div class="mt-12">
        <div class="bg-gainsboro px-1 sm:px-2 flex font-bold items-center justify-between mx-auto relative rounded-46xl
            text-base sm:text-xl text-midnightblue-100 whitespace-nowrap w-fit border-2 border-transparent">
            @foreach ($abas as $aba)
                <button
                    x-on:click="'startViewTransition' in document ? document.startViewTransition(() => selecionada = {{ $loop->index }}) : selecionada = {{ $loop->index }}"
                    x-bind:class="selecionada == {{ $loop->index }}
                        ? 'bg-white border-midnightblue-100'
                        : 'border-transparent'"
                    class="pointer my-1.5 px-2 py-1 sm:px-8 sm:py-4 border-2 border-solid rounded-full">{{ $aba['nome'] }}
                </button>
            @endforeach
        </div>
    </div>
    {{-- Corpo de uma aba --}}
    <div class="relative lg:px-32">
        @php
            $hasLongTitle = false;
            foreach ($abas as $index => $aba) {
                if (strlen($aba['titulo']) > 25) {
                    $hasLongTitle = true;
                    break;
                }
            }
        @endphp
        @foreach($abas as $aba)
            <div class="mt-8 place-items-center grid gap-8 px-8 lg:px-0 lg:grid-cols-2"
                 x-show="selecionada == {{ $loop->index }}">
                {{-- imagem desktop --}}
                <div class="hidden lg:block border border-gainsboro p-1 sm:p-3 relative rounded-full">
                    <img alt="{{ $aba['titulo'] }}" class="object-cover w-full h-auto rounded-full lg:w-[520px] aspect-[520/350]"
                         src="/storage/{{ $aba['imagem'] }}"/>
                    <img class="absolute -top-5 sm:top-0 right-4 scale-75 sm:scale-100"
                         src="{{ asset('images/star2.svg') }}" alt="Estrela azulada."/>
                    <img class="absolute right-5 top-auto bottom-[-40px] sm:bottom-auto sm:top-[270px] scale-50 sm:scale-100"
                         src="{{ asset('images/star1.svg') }}" alt="Estrela dourada."/>
                </div>
                {{-- cartão --}}
                <div class="lg:justify-self-start">
                    <div
                        class="font-bricolage font-bold text-left text-midnightblue-100 text-13xl {{ $hasLongTitle ? '' : 'sm:text-33xl' }} sm:mb-4">
                        {{ $aba['titulo'] }}
                    </div>
                    <div class="max-sm:my-5 mx-auto text-lef text-darkslateblue-300 leading-relaxed">
                        {!! str($aba['descricao'])->sanitizeHtml() !!}
                    </div>

                    {{-- imagem mobile --}}
                    <div class="block lg:hidden border border-gainsboro p-1 sm:p-3 relative rounded-full">
                        <img alt="{{ $aba['titulo'] }}" class="object-cover w-full h-auto rounded-full lg:w-[520px] aspect-[520/350]"
                             src="/storage/{{ $aba['imagem'] }}"/>
                        <img class="absolute -top-5 sm:top-0 right-4 scale-75 sm:scale-100"
                             src="{{ asset('images/star2.svg') }}" alt="Estrela azulada."/>
                        <img class="absolute right-5 top-auto bottom-[-40px] sm:bottom-auto sm:top-[270px] scale-50 sm:scale-100"
                             src="{{ asset('images/star1.svg') }}" alt="Estrela dourada."/>
                    </div>

                    @isset($aba['botaoUrl'])
                        @isset($aba['botaoTexto'])
                            <a href="{{ $aba['botaoUrl'] }}"
                               class="bg-midnightblue-100 mt-5 text-white rounded-full py-4 px-10 font-bold text-center inline-flex self-start shadow-md"
                            >{{ $aba['botaoTexto'] }}</a>
                        @endisset
                    @endisset
                </div>
            </div>
        @endforeach
    </div>
</div>