@php
    use Mcamara\LaravelLocalization\Facades\LaravelLocalization;
@endphp
<div>
    @if (!empty($titulo))
        <div class="text-brand-brown text-3xl font-semibold my-4 text-center px-6 block">
            {{ $titulo }}
        </div>
    @endif
    <div id="segmentos-lista">
        @forelse ($marcas as $index => $marca)
            @php
                $invert = $index % 2 == 0;
            @endphp
            <div @class([
                'flex flex-col md:flex-row items-center rounded-29xl gap-4 py-8 sm:py-16 sm:gap-20 sm:rounded-39xl',
                'mx-6 sm:mx-12 lg:mx-20 xl:mx-32 lg:px-16' => $invert,
                'rounded bg-[#eee] mx-4 px-8 sm:px-32 sm:mx-8 relative' => !$invert,
            ])>
                <div
                    class="aspect-square w-full flex justify-center md:justify-end mt-6 md:order-2 md:mt-0 border-solid border-[1px] border-black/20 rounded-full">
                    <div class="relative">
                        <div
                            class="rounded-full border-2 sm:border-4 border-transparent sm:w-56 sm:h-56 md:w-[22rem] md:h-[22rem] lg:w-[480px] lg:h-[480px] object-contain object-center p-2 sm:p-4 aspect-square">
                            <img src="{{ asset('storage/' . ($marca->banner ?? $marca->imagem)) }}"
                                alt="{{ $marca->nome }}" class="p-8 w-full h-full object-contain">
                        </div>
                        <x-star class="absolute top-[-48px] right-[-48px] md:right-8 max-md:scale-75 origin-bottom-left"
                            color="aquamarine" width="80" height="80" />
                        <x-star class="absolute bottom-[-10px] right-[-10px] md:right-8 max-md:scale-50" color="yellow"
                            width="40" height="40" />
                    </div>
                </div>
                <div class="w-full text-left pb-2 {{ $invert ? 'md:order-1' : 'md:order-2' }}">
                    <h2 id="{{ $marca->slug }}"
                        class="text-2xl md:text-5xl font-extrabold leading-tight mt-2 font-main scroll-mt-80 max-w-96">
                        {{ $marca->nome }}
                    </h2>
                    <p class="text-base md:text-lg leading-relaxed mt-4 sm:mt-8">
                        {{ $marca->descricao }}
                    </p>
                    <x-botao-principal
                        href="{{ \App\Helpers\TranslationHelper::getPageUrl('produtos') . '?marca' . '=' . $marca->id }}"
                        class="mt-4 sm:mt-8 {{ !$invert ? '!shadow-xl' : '' }}">
                        {{ $botaoTexto }}
                    </x-botao-principal>
                </div>
            </div>
        @empty
            <div class="grid place-items-center mx-auto font-main text-xl font-extrabold text-brand-brown">
                {{ __('messages._search.nenhum_resultado') }}
            </div>
        @endforelse
    </div>
    <x-voltar-ao-topo />
</div>
<style>
    html {
        scroll-behavior: smooth;
    }
</style>