@aware(['page'])
@props([
    'titulo',
    'sobrancelha' => null,
    'descricao',
    'imagem',
    'imagem_alt' => 'Imagem de Fundo',
    'imagem_title' => '',
    'mobile' => null,
    'imagem2' => null,
    'imagem2_mobile' => null,
    'sobreposicao' => false,
    'show_search' => false,
    'align_start' => false,
    'align_start_mobile' => false,
    'decoracao' => null, // sobre-nos, produtos, marcas, fale-conosco, segmentos
])

<div
    {{ $attributes->class([
        'hero overflow-hidden relative w-full bg-brand-brown flex items-stretch pt-[100px] sm:pt-[150px] lg:pt-[90px] pb-[40px]',
        'max-lg:min-h-[500px]' => !empty($mobile),
        'lg:h-[675px]' => !empty($imagem),
    ]) }}>
    @if (!empty($decoracao))
        <div
            class="mix-blend-overlay bg-[radial-gradient(closest-side_at_50%_50%,#FFFFFF_0%,#FFFFFF00_100%)] absolute w-full left-0 right-0 bottom-[-100px] h-[200px]">
        </div>
    @endif
    @if ($imagem)
        <img class="absolute inset-0 w-full h-full object-cover hidden lg:block" src="{{ asset('/storage/' . $imagem) }}"
            alt="{{ $imagem_alt }}" title="{{ $imagem_title }}" />
    @endif
    @if ($mobile)
        <img class="absolute inset-0 w-full h-full object-cover block lg:hidden" src="{{ asset('/storage/' . $mobile) }}"
            alt="background" />
    @endif
    @switch($decoracao)
        @case('sobre-nos')
            <x-quadrado
                class="absolute left-[-300px] bottom-[-180px] w-[800px] h-[200px] rotate-[-10deg] bg-brand-yellow hidden md:block animate-[slide-up-1_0.5s_ease-out_forwards] translate-y-[100px] hidden md:block" />
        @break

        @case('fale-conosco')
            <x-quadrado
                class="absolute left-[-300px] bottom-[-180px] w-[800px] h-[200px] rotate-[-10deg] hidden md:block animate-[slide-up-1_0.5s_ease-out_forwards] translate-y-[100px] hidden md:block" />
            <x-quadrado
                class="absolute right-[-80px] bottom-0 w-[400px] h-[300px] rotate-[-10deg] hidden md:block animate-[slide-up-1_0.5s_ease-out_forwards] translate-y-[100px] hidden md:block" />
            <x-quadrado
                class="absolute right-[-80px] bottom-[-180px] w-[500px] h-[320px] rotate-[-10deg] bg-brand-yellow hidden md:block animate-[slide-up-1_0.5s_ease-out_forwards_0.1s] translate-y-[100px] hidden md:block" />
            <x-quadrado
                class="absolute right-[-80px] bottom-[-260px] w-[100vw] h-[320px] rotate-[-5deg] md:hidden animate-[slide-up-1_0.5s_ease-out_forwards_0.1s] translate-y-[100px]" />
        @break

        @case('marcas')
            <x-quadrado
                class="absolute left-[-300px] bottom-[-180px] w-[800px] h-[200px] rotate-[-10deg] hidden md:block animate-[slide-up-1_0.5s_ease-out_forwards] translate-y-[100px] hidden md:block" />
        @break

        @case('produtos')
            <x-quadrado
                class="absolute left-[-300px] bottom-[-180px] w-[800px] h-[200px] rotate-[-10deg] hidden md:block animate-[slide-up-1_0.5s_ease-out_forwards] translate-y-[100px] hidden md:block" />
        @case('segmentos')
            <x-quadrado
                class="absolute left-[-300px] bottom-[-180px] w-[800px] h-[200px] rotate-[-10deg] bg-brand-yellow hidden md:block animate-[slide-up-1_0.5s_ease-out_forwards] translate-y-[100px] hidden md:block" />
            <x-quadrado
                class="absolute right-[-300px] bottom-[-20px] w-[800px] h-[420px] rotate-[-10deg] bg-brand-yellow hidden md:block animate-[slide-up-1_0.5s_ease-out_forwards] translate-y-[100px] hidden md:block" />
        @break
    @endswitch

    <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="lg:-mt-16 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-[0.5em] uppercase font-main text-xs sm:text-base">
                        {!! str(html_entity_decode($sobrancelha))->sanitizeHtml() !!}
                    </div>
                @endisset
                @isset($titulo)
                    <h1
                        class="sm:px-0 font-extrabold text-balance text-[2rem] {{ $align_start ? 'max-sm:mx-auto' : 'mx-auto' }} leading-tight sm:leading-none my-3 text-white sm:text-41xl font-main 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 ? 'max-sm:mx-auto' : '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>
                    @endif
                    {{ $aposTitulo ?? '' }}
                </div>
                @if (!empty($imagem2_mobile))
                    <img alt="destaque" width="600" height="600" src="{{ asset('/storage/' . $imagem2_mobile) }}"
                        class="w-full m-auto mt-8 sm:w-[600px] sm:h-[600px] justify-self-end object-contain block lg:hidden xl:m-0" />
                @endif
                @if (!empty($imagem2))
                    <img 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-10 mb-8"></x-search>
                @endif
            </div>
        </div>
    </div>