@props(['chave'])

@php
    $texto = \App\Visual\Explicacoes::de($chave);
    $id = 'explicacao-'.$chave.'-'.substr(md5($chave.serialize($texto)), 0, 6);
@endphp

@if ($texto)
    {{-- De onde vem o número, numa janela aberta pelo clique.

         A janela é montada no fim da página (`x-teleport`) e fica sobre ela:
         um painel dentro do cartão empurrava a altura da página, fazia a barra
         de rolagem aparecer e a tela dava um pulo a cada passagem do mouse. --}}
    <span class="inline-flex" x-data="{ aberto: false }">
        <button type="button" x-on:click="aberto = true" :aria-expanded="aberto ? 'true' : 'false'"
                aria-label="Como este número é calculado" aria-haspopup="dialog"
                class="grid size-4 place-items-center rounded-sm border border-fio text-[0.6rem] font-bold text-suave transition-colors hover:border-marca-200 hover:bg-marca-50 hover:text-marca-700">
            ?
        </button>

        <template x-teleport="body">
            <div x-show="aberto" x-cloak x-transition.opacity.duration.150ms
                 x-on:click.self="aberto = false" x-on:keydown.escape.window="aberto = false"
                 class="fixed inset-0 z-50 flex items-end justify-center bg-marca-900/50 p-0 sm:items-center sm:p-6"
                 role="dialog" aria-modal="true" aria-labelledby="{{ $id }}">
                <div x-trap.noscroll="aberto"
                     class="w-full max-w-md rounded-t-xl border border-fio bg-superficie shadow-xl sm:rounded-xl">
                    <header class="flex items-start justify-between gap-4 border-b border-fio px-5 py-4">
                        <h2 id="{{ $id }}" class="font-display text-base font-semibold tracking-tight text-tinta">{{ $texto['titulo'] }}</h2>
                        <button type="button" x-on:click="aberto = false" aria-label="Fechar"
                                class="-mr-1.5 shrink-0 rounded-md p-1.5 text-suave transition-colors hover:bg-chao hover:text-tinta">
                            <svg class="size-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
                                <path stroke-linecap="round" d="M6 18 18 6M6 6l12 12"/>
                            </svg>
                        </button>
                    </header>

                    <ul class="space-y-2 px-5 py-4 text-sm leading-relaxed text-suave">
                        @foreach ($texto['linhas'] as $linha)
                            <li class="flex gap-2">
                                <span class="mt-2 size-1.5 shrink-0 rounded-full bg-marca-600" aria-hidden="true"></span>
                                <span>{{ $linha }}</span>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </template>
    </span>
@endif