@aware(['page'])
@props([
    'imagem_posicao' => 'left', // left, right, left-bottom, right-top
    'titulo',
    'imagem',
    'descricao',
    'sobrancelha' => null,
    'botao_texto' => null,
    'botao_url' => null,
    'imagem_tamanho' => 'md',
    'preset_star' => 'home-1', # home-1, home-2, sobre-1, sobre-2, sobre-3
    'imagem_estilo' => 'capsula', # capsula, normal
    'is_compact' => false,
    'selo',
    'selo_posicao',
    'hamburguer' => false,
    'imagem_alt' => null,
    'selo_alt' => null,
])
@php
    $is_left = str_starts_with($imagem_posicao, 'left');
    $is_bottom = str_ends_with($imagem_posicao, 'bottom') || $imagem_posicao === 'right';
@endphp
<div class="{{ $is_compact ? 'my-4' : 'my-10 sm:my-32' }} max-sm:px-8">
    <div @class([
        'flex xl:justify-between xl:items-center gap-8 xl:gap-12',
        'flex-col max-xl:text-center max-xl:justify-center max-xl:items-center xl:flex-row-reverse' => $is_compact,
        'xl:flex-row-reverse' => !$is_compact && $is_left,
        'xl:flex-row' => !$is_compact && !$is_left,
        'flex-col' => !$is_compact && $is_bottom,
        'flex-col-reverse' => !$is_compact && !$is_bottom,
    ])>
        <div class=" text-balance sm:flex sm:flex-col">
            <div>
                @if (!empty($sobrancelha))
                    <x-typography.sobrancelha class="mb-2">{{ $sobrancelha }}</x-typography.sobrancelha>
                @endif
                <x-typography.titulo>
                    {{ $titulo }}
                </x-typography.titulo>
                <div
                    class="leading-8 mb-0 mt-5 lg:mt-10 text-base text-darkslateblue-300 start-conteudo {{ $hamburguer ? 'max-xl:hidden' : '' }}">
                    {!! str($descricao)->sanitizeHtml() !!}
                </div>
            </div>
            @if (!empty($botao_texto) && !empty($botao_url))
                <div
                    class="{{ $imagem_posicao === 'left' ? '' : 'hidden text-center' }} mt-4 sm:mt-12 sm:block sm:text-left">
                    <x-botao-principal href="{{ $botao_url }}">
                        {{ $botao_texto }}
                    </x-botao-principal>
                </div>
            @endif
        </div>
        <div @class([
            'w-full flex-shrink-0',
            'max-w-[746px]' => $imagem_tamanho === 'lg',
            'max-w-[670px]' => $imagem_tamanho === 'md',
            'max-w-[560px]' => $imagem_tamanho === 'sm',
        ])>
            <div class="relative">
                @if ($imagem_estilo === 'capsula')
                    <div class="border rounded-full p-1 sm:p-3 border-babyblue max-sm:-mx-4">
                        <img alt="{{ $imagem_alt ?? $titulo }}" src="{{ asset('storage/' . $imagem) }}"
                            class="block w-full h-auto aspect-[726/480] object-cover rounded-full">
                    </div>
                    @if (!empty($selo))
                        <img alt="{{ $selo_alt ?? 'selo' }}" src="{{ asset('storage/' . $selo) }}"
                            class="absolute max-w-[228px] w-[30%] {{ isset($selo_posicao) && $selo_posicao == 'end' ? 'left-0 bottom-0' : 'left-[-14px] top-[50%] translate-y-[-50%]' }}">
                    @endif
                @else
                    <img alt="{{ $imagem_alt ?? $titulo }}" src="{{ asset('storage/' . $imagem) }}"
                        class="block w-full h-auto object-contain rounded-full">
                @endif
                @if ($preset_star === 'home-1')
                    <x-star class="absolute bottom-[24px] right-[32px] hidden md:block" width="40px" height="40px"
                        color="blue" />
                    <x-icons.heart class="absolute bottom-0 right-[-8px] md:hidden text-pink" width="64px"
                        height="64px" />
                    <x-icons.heart class="absolute left-[24px] top-[24px] text-pink hidden md:block" width="100"
                        height="100" />
                @elseif($preset_star === 'home-2')
                    <x-star class="absolute top-[24px] right-[40px] hidden md:block" width="48px" height="48px"
                        color="blue" />
                    <x-icons.heart class="absolute bottom-0 right-[-8px] md:hidden text-pink" width="64px"
                        height="64px" />
                    <x-icons.heart class="absolute right-[24px] bottom-[24px] text-pink hidden md:block" width="100"
                        height="100" />
                @elseif($preset_star === 'sobre-1')
                    <x-star class="absolute top-0 left-0 hidden md:block" width="48" height="48"
                        color="pink" />
                    <x-star class="absolute bottom-0 right-0 md:hidden" width="48px" height="48px" color="pink" />
                    <x-star class="absolute top-[4px] left-[4px] md:hidden" width="24px" height="24px"
                        color="babyblue" />
                    <x-icons.heart class="absolute right-[24px] top-[24px] text-pink hidden md:block" width="100"
                        height="100" />
                @elseif($preset_star === 'sobre-2')
                    <x-icons.heart class="absolute left-[24px] top-[24px] text-pink hidden md:block" width="100"
                        height="100" />
                    <x-star class="absolute bottom-0 right-0 md:hidden" width="48px" height="48px" color="pink" />
                @elseif($preset_star === 'sobre-3')
                    <x-star class="absolute left-[16px] top-[140px] max-sm:scale-75" width="40px" height="40px"
                        color="babyblue" />
                    <x-star class="absolute right-[16px] bottom-[64px] max-sm:scale-75" width="40px" height="40px"
                        color="pink" />
                    <x-icons.heart class="absolute left-[48px] top-[64px] text-pink hidden md:block" width="100"
                        height="100" />
                @endif
            </div>
            @if ($hamburguer)
                <div class="leading-8 mb-0 mt-5 lg:mt-10 text-base text-darkslateblue-300 start-conteudo xl:hidden">
                    {!! str($descricao)->sanitizeHtml() !!}
                </div>
            @endif
            @if (!empty($botao_texto) && !empty($botao_url))
                <div
                    class="{{ $imagem_posicao === 'left' ? 'hidden' : '' }} mt-4 sm:mt-12 text-center sm:text-left sm:hidden">
                    <x-botao-principal href="{{ $botao_url }}">
                        {{ $botao_texto }}
                    </x-botao-principal>
                </div>
            @endif
        </div>
    </div>
</div>