@php
    /** @var array $payload */
    $categorias = $payload['categorias'];
    $locais = $payload['locais'];
    $contato = $payload['contato'];
@endphp

<x-layouts.app :og="$og ?? null">

    <div id="app"
         data-selecionado="{{ $selecionado ?? '' }}"
         data-base="{{ rtrim((string) (parse_url((string) config('app.url'), PHP_URL_PATH) ?: ''), '/') }}">

        @include('locais.partials.header')

        <main class="wrap">
            <section class="hero">
                <h1 class="hero__title">Descubra o Santa Mônica</h1>
                <p class="hero__lead">Todos os espaços do clube, com horários, telefone e como chegar.</p>

                <div class="busca">
                    <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="M16.5 16.5L21 21"></path></svg>
                    <input type="search"
                           id="busca"
                           placeholder="Buscar por nome ou espaço…"
                           autocomplete="off"
                           aria-label="Buscar locais do clube">
                    <button type="button" id="busca-limpar" aria-label="Limpar busca" hidden>
                        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"></path></svg>
                    </button>
                </div>
            </section>

            {{--
                Filtro de categoria: um único lugar na página.
                Fica FORA do <section class="hero"> de propósito — no mobile ele
                é sticky, e um sticky só gruda dentro do próprio pai: dentro do
                hero ele rolava para fora junto com o título.
            --}}
            <div class="filtros" role="group" aria-label="Filtrar por categoria">
                @foreach ($categorias as $c)
                    <button type="button"
                            class="chip"
                            data-cat="{{ $c['id'] }}"
                            aria-pressed="{{ $c['id'] === 'todos' ? 'true' : 'false' }}">
                        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="{{ $c['icon'] }}"></path></svg>
                        @if ($c['id'] === 'todos')
                            {{-- no mobile o sufixo some: "Todos os locais" é o chip mais
                                 largo e empurrava as outras categorias para fora da tela --}}
                            <span class="chip__label">Todos<span class="chip__sufixo"> os locais</span></span>
                        @else
                            <span class="chip__label">{{ $c['label'] }}</span>
                        @endif
                        <span class="chip__count">{{ $c['count'] }}</span>
                    </button>
                @endforeach
            </div>

            <p class="resultado" id="resultado" aria-live="polite">{{ count($locais) }} locais</p>

            <div class="grade" id="grade">
                @foreach ($locais as $l)
                    @include('locais.partials.card', ['l' => $l])
                @endforeach
            </div>

            <div class="vazio" id="vazio" hidden>
                <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="M16.5 16.5L21 21"></path></svg>
                <p class="vazio__title">Nenhum local encontrado</p>
                <p class="vazio__sub">Tente outro termo ou volte para <button type="button" class="vazio__reset" id="vazio-reset">todos os locais</button>.</p>
            </div>
        </main>

        @include('locais.partials.footer')
        @include('locais.partials.ficha')

        <div class="toast" id="toast" role="status" aria-live="polite" hidden></div>
    </div>

    <script type="application/json" id="mapa-payload">@json($payload)</script>

</x-layouts.app>