@props([
    'titulo',
    'subtitulo',
    'descricao',
    'imagem',
    'botao_texto',
    'botao_url',
    'exibir_botao'
])

<div class="py-10 sm:py-20 bg-white">
    <div class="flex flex-col gap-10 sm:gap-4 sm:flex-row sm:items-center">
        <div class="flex-1 px-8 sm:px-16">
            <div class="text-midnightblue-100 text-xs tracking-36 uppercase"> {{ $titulo }}</div>
            <h2 class="min-w-[min(430px,60vw)] text-balance font-bricolage mt-2 text-midnightblue-100 leading-10 font-bold text-13xl sm:text-[3.25rem] sm:leading-[3.75rem]">
                {{ $subtitulo }}
            </h2>
            <p class="leading-8 mt-5 text-base text-darkslateblue-300 text-pretty">
                {{ strip_tags($descricao) }}
            </p>

            @if($exibir_botao)
                <x-botao-principal :href="$botao_url" class="hidden mt-12 text-center sm:inline-flex sm:text-left">
                    {{ $botao_texto }}
                </x-botao-principal>
            @endif
        </div>
        <div class="relative max-w-[746px] flex-shrink-0">
            <div class="border rounded-full p-1 sm:p-3 border-black/20 mx-2 sm:m-0">
                <img src="{{ '/storage/' . $imagem }}" alt="Imagem dinâmica"
                     class="object-cover w-full rounded-full h-[250px] sm:min-h-[400px]">
            </div>
            <x-star class="absolute left-[2%] top-[0%] pointer-events-none" stroke="#003ca5" opacity="0.5"
                    width="48" heigh="48" color="transparent"/>
            <x-star class="absolute left-[15%] top-[-8%] pointer-events-none sm:w-10 sm:h-10" width="24" height="24" color="blue"/>
            <x-star class="absolute right-[5%] bottom-[5%] pointer-events-none sm:w-32 sm:h-32 sm:bottom-[-5%]" width="64" height="64"
                    color="yellow"/>
        </div>
        @if($exibir_botao)
            <x-botao-principal href="{{ $botao_url }}" class="sm:mt-12 mx-auto text-center sm:text-left sm:hidden">
                {{ $botao_texto }}
            </x-botao-principal>
        @endif
    </div>
</div>