@props([
    'titulo',
    'subtitulo',
    'descricao',
    'botao_texto',
    'botao_url',
    'exibir_botao',
    'imagens' => null,
    'tagembed_id',
    'aplicar_estilo'
])
<div class="bg-white py-10 sm:py-20 px-8">
    <p class="m-0 text-midnightblue-100 text-xs text-center tracking-36 sm:tracking-33 uppercase"> {{ $titulo }}</p>
    <h2 class="mb-6 max-w-5xl text-balance mx-auto text-center font-bricolage text-midnightblue-100 leading-10 font-bold text-13xl sm:text-[3.25rem] sm:leading-[3.75rem]">
        {{ $descricao }}
    </h2>

    @if(!empty($tagembed_id))
        <x-tagembed :tagembed_id="$tagembed_id" :aplicar_estilo="$aplicar_estilo ?? false"/>
    @elseif(!empty($imagens))
        <div class="flex flex-col sm:flex-row gap-6 justify-between mt-8 sm:mt-0 sm:px-0">
            @foreach ($imagens as $imagem)
                <img src="{{ asset('storage/' . $imagem['imagem']) }}" alt="Imagens Instagram"
                     class="flex-1 rounded-3xl aspect-square object-cover sm:w-[286px] sm:h-[286px]">
            @endforeach
        </div>
    @endif

    @if ($exibir_botao)
        <div class="flex items-center justify-center mt-12">
            <x-botao-principal href="{{ $botao_url }}" class="gap-2" target="_blank">
                <img class="w-7 h-7" alt="Rede social Instagram." src="{{ asset('images/instagram.webp') }}">
                {{ $botao_texto }}
            </x-botao-principal>
        </div>
   @endif
</div>