@aware(['page'])
@props([
    'sobrancelha',
    'titulo',
    'descricao',
    'imagem' => null,
    'imagem_alt' => null,
    'mobile' => null,
    'imagem2' => null,
    'imagem2_alt' => null,
    'imagem2_mobile' => null,
    'sobreposicao' => false,
    'show_search' => false,
    'align_start' => false,
    'align_start_mobile' => false,
    'decoracao' => true,
])
<div
    {{ $attributes->class([
        'hero overflow-hidden relative w-full bg-deepblue flex items-stretch max-sm:pt-[100px] max-lg:pt-[150px]',
        'max-lg:min-h-[800px]' => !empty($mobile),
        'lg:h-[728px]' => !empty($imagem),
        'max-lg:pb-24' => empty($mobile),
        'lg:pb-32 lg:pt-24' => empty($imagem),
    ]) }}>
    @if ($decoracao)
        <x-tuff-heart
            class="absolute w-[300px] h-[300px] left-[-50px] bottom-[-140px] rotate-[-20deg] text-[#1b5ea1] max-sm:scale-75 max-sm:rotate-[20deg] max-sm:bottom-[-80px] max-sm:left-auto max-sm:right-[-80px]" />
        <x-tuff-heart
            class="absolute w-[300px] h-[300px] top-[80px] right-[-40px] rotate-[20deg] text-[#1b5ea1] max-sm:hidden" />
    @endif
    @if ($imagem)
        <picture class="absolute inset-0 w-full h-full z-[-1]">
            @if ($mobile)
                <source media="(max-width: 768px)" srcset="{{ asset('/storage/' . $mobile) }}">
            @endif
            <img class="w-full h-full object-cover" src="{{ asset('/storage/' . $imagem) }}"
                alt="{{ $imagem_alt ?? 'background' }}" width="1920" height="728" />
        </picture>
    @elseif($mobile)
        <img class="absolute inset-0 w-full h-full object-cover block lg:hidden" src="{{ asset('/storage/' . $mobile) }}"
            alt="{{ $imagem_alt ?? 'background' }}" width="840" height="1356" />
    @endif
    <div class="h-auto w-full flex justify-center items-center min-h-[24rem]">
        {{ $slot ?? '' }}
        @if ($sobreposicao)
            <div class="bg-black/50 absolute inset-0"></div>
        @endif
        <div
            class="grid items-center max-xl:px-8 {{ !empty($imagem2) ? 'xl:grid-cols-2 gap-x-8' : 'grid-cols-1' }} max-w-[85.375rem] w-full">
            <div
                class="relative box-border flex flex-col xl:pl-14 {{ $align_start_mobile ? 'max-sm:text-start max-sm:items-start' : '' }} {{ $align_start ? 'sm:text-start sm:items-start sm:pl-8 xl:max-w-[60%]' : 'max-xl:text-center' }} {{ !empty($imagem2) ? '' : 'items-center text-center' }}">
                @isset($sobrancelha)
                    <div class="m-0 text-white tracking-36 uppercase text-xs sm:text-sm">
                        {!! str(html_entity_decode($sobrancelha))->sanitizeHtml() !!}
                    </div>
                @endisset
                @isset($titulo)
                    <h1
                        class="font-bold text-balance text-13xl {{ $align_start_mobile ? '' : 'max-sm:mx-auto' }} {{ $align_start ? '' : 'sm:mx-auto' }} leading-tight sm:leading-none my-3 text-white sm:text-41xl font-headline max-w-[50rem] {{ !empty($images2) ?: 'xl:mx-0' }}">
                        {!! str(html_entity_decode($titulo))->sanitizeHtml() !!}
                    </h1>
                @endisset
                @isset($descricao)
                    <div
                        class="max-sm:!leading-loose max-sm:!text-white/80 !text-white/90 text-base mt-2 {{ $align_start_mobile ? '' : 'max-sm:mx-auto' }} {{ $align_start ? '' : 'sm:mx-auto' }} {{ !empty($images2) ?: 'xl:mx-0' }} {{ strlen($descricao) > 100 ? 'max-w-[38rem]' : 'max-w-[30rem]' }} start-conteudo text-pretty">
                        {!! str(html_entity_decode($descricao))->sanitizeHtml() !!}
                    </div>
                @endisset
                {{ $aposTitulo ?? '' }}
            </div>
            @if (!empty($imagem2_mobile))
                <div class="relative m-auto mt-8 w-72 h-72 block lg:hidden">
                    <img alt="{{ $imagem2_alt ?? 'destaque' }}" width="600" height="600" src="{{ asset('/storage/' . $imagem2_mobile) }}"
                        class="w-full h-full rounded-full object-cover shadow-2xl" />
                    <x-icons.heart class="absolute -top-4 -left-4 text-pink w-14 h-14 rotate-[-15deg]" />
                    <x-icons.heart class="absolute -bottom-4 -right-4 text-white w-10 h-10 rotate-[15deg] opacity-80" />
                </div>
            @endif
            @if (!empty($imagem2))
                <img alt="{{ $imagem2_alt ?? 'destaque' }}" width="600" height="600" src="{{ asset('/storage/' . $imagem2) }}"
                    class="w-full m-auto mt-8 sm:w-[600px] sm:h-[600px] justify-self-end object-contain hidden lg:block xl:m-0" />
            @endif
            @if ($show_search)
                <x-search class="w-full md:hidden mt-6"></x-search>
            @endif
        </div>
    </div>
</div>