{{-- Detalhe produto --}}
{{-- copiado e adaptado de marcas --}}
<div class="bg-white py-16 sm:pt-10 px-10 sm:px-16">
    @foreach($linhas as $linha)
        <div class="grid gap-8 md:gap-4 md:grid-cols-2 mt-12 first:mt-0">
            <div
                class="border border-gainsboro self-center justify-self-center {{ $loop->index % 2 !== 0 ? 'md:justify-self-start md:order-none' : 'md:justify-self-end md:order-1' }} relative rounded-full">
                <img class="block object-cover h-[300px] lg:h-[480px] w-[300px] lg:w-[480px] rounded-full"
                     src="{{ asset('storage/' . $linha['imagem']) }}"/>
                <img class="absolute -top-4 -right-2 scale-50 sm:scale-100"
                     src="{{ asset('images/star1.svg') }}"
                     alt="Estrela dourada."/>
                <img class="absolute -bottom-2 right-[42px] scale-75 sm:scale-100"
                     src="{{ asset('images/star2.svg') }}"
                     alt="Estrela azulada."/>
            </div>
            <div class="max-w-xl self-center">
                <h2 class="font-bricolage font-extrabold text-midnightblue-100 text-13xl max-w-lg leading-tight text-balance sm:text-33xl">
                    {{ $linha['titulo'] }}
                </h2>
                @if(!empty($linha['descricao']))
                    <div class="leading-6 mt-5 text-darkslateblue-300 text-base">
                        {!! str($linha['descricao'])->sanitizeHtml() !!}
                    </div>
                @endif
                @if(!empty($linha['blocos']))
                    <div class="flex flex-col gap-4 mt-4">
                        @foreach($linha['blocos'] as $b)
                            <div>
                                <h3 class="font-bold mt-4 text-midnightblue-100">
                                    {{ $b['titulo'] }}
                                </h3>
                                <p class="leading-6 mt-2 text-darkslateblue-300 text-base">
                                    {{ $b['descricao'] }}
                                </p>
                            </div>
                        @endforeach
                    </div>
                @endif
                @if(!empty($linha['botaoUrl']) && !empty($linha['botaoTexto']) )
                    <x-botao-principal href="{{ $linha['botaoUrl'] }}"
                                       class="inline-flex bg-midnightblue-100 rounded-full mt-6 sm:mt-8 mb-6 px-10 py-4 font-bold text-sm text-white">
                        {{ $linha['botaoTexto'] }}
                    </x-botao-principal>
                @endif
            </div>
        </div>
    @endforeach
</div>