@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
    'imagem_estilo' => 'capsula', # capsula, normal
    'is_compact' => false,
    'selo',
    'selo_posicao'
])
@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' }} px-8 sm:px-16 bg-white">
    <div
        @class([
            'flex xl:justify-between xl:items-center gap-8 xl:gap-16',
            'flex-col-reverse 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 max-w-[31.75rem]">
            <div class="max-w-[42.5rem]">
                @if(!empty($sobrancelha))
                    <x-typography.sobrancelha class="mb-2">{{ $sobrancelha }}</x-typography.sobrancelha>
                @endif
                <x-typography.titulo>
                    {{ $titulo }}
                </x-typography.titulo>
                <div class="mb-0 mt-5 text-base text-brand-brown start-conteudo !leading-relaxed">
                    {!! 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-black/20 max-sm:-mx-4">
                        <img alt="{{ $imagem_alt ?? $titulo }}" title="{{ $imagem_title ?? '' }}" 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' }}" title="{{ $selo_title ?? '' }}" 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 }}" title="{{ $imagem_title ?? '' }}" 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="aquamarine"/>
                    <x-star class="absolute bottom-[8px] right-[8px] md:hidden" width="48px" height="48px"
                            color="aquamarine"/>
                @elseif($preset_star === 'home-2')
                    <x-star class="absolute bottom-[24px] right-[24px] hidden md:block" width="100" height="100"
                            color="aquamarine"/>
                    <x-star class="absolute top-[24px] right-[40px] hidden md:block" width="48px" height="48px"
                            color="yellow"/>
                    <x-star class="absolute bottom-[8px] right-[8px] md:hidden" width="48px" height="48px"
                            color="aquamarine"/>
                @elseif($preset_star === 'sobre-1')
                    <x-star class="absolute top-[36px] left-[36px] hidden md:block" width="64" height="64"
                            color="aquamarine"/>
                    <x-star class="absolute bottom-[16px] right-[16px] md:hidden" width="48px" height="48px"
                            color="aquamarine"/>
                @elseif($preset_star === 'sobre-2')
                    <x-star class="absolute left-[48px] top-[64px] max-sm:scale-75" width="80px" height="80px"
                            color="aquamarine"/>
                    <x-star class="absolute left-[16px] top-[140px] max-sm:scale-75" width="40px" height="40px"
                            color="aquamarine"/>
                    <x-star class="absolute right-[16px] bottom-[64px] max-sm:scale-75" width="40px" height="40px"
                            color="aquamarine"/>
                @endif
            </div>
            @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>