@aware([
    'titulo',
    'descricao',
    'ondeEncontrar',
    'botaoTexto',
    'stores',
])
<div {{ $attributes }} x-data="ondeEncontrarMapa({ apiURL: 'https://redeunishop.com.br/retorno-api/', lang: @js(app()->currentLocale()) })">
    <div class="relative bg-neutral-100 h-[min(50rem,100vh)] sm:h-[min(70rem,100vh)]">
        <div class="w-full h-full" x-ref="mapa"></div>
        <div class="absolute top-[10rem] left-4 xl:left-[max(3rem,10vw)] w-[27rem] h-full flex flex-col hidden md:block">
            <x-desktop.onde-encontrar-lista class="rounded-3xl p-6 shadow w-full bg-white" />
        </div>
    </div>
    <x-corpo>
        <x-desktop.onde-encontrar-lista class="px-6 w-full md:hidden mb-8 mt-[-2rem]" />
        <div class="relative z-10 bg-white px-6 sm:px-16">
            <div class="grid md:grid-cols-[40%_1fr] gap-x-16 xl:gap-x-32">
                <div class="mb-8">
                    <h3 class="font-bricolage text-midnightblue-100 text-2xl md:text-5xl font-extrabold pr-8 mb-5">
                        {{ $titulo }}</h3>
                    <p class="leading-6 text-darkslateblue-300">
                        {{ $descricao }}
                    </p>
                </div>
                <livewire:contact-form/>
            </div>
        </div>
    </x-corpo>
</div>
<style>
    .header-menu {
        background-color: #003ca5;
    }
</style>