@if($help)
    @php($dialogId = 'contextual-help-'.str_replace(['.', ':'], '-', $help['key']))
    <span
        class="inline-flex"
        x-data="{
            open: false,
            trigger: null,
            openHelp() {
                this.trigger = document.activeElement;
                this.open = true;
                this.$nextTick(() => this.$refs.closeButton.focus());
            },
            closeHelp() {
                this.open = false;
                this.$nextTick(() => this.trigger?.focus());
            },
            destroy() {
                document.body.classList.remove('overflow-hidden');
            },
            trapTab(event) {
                const items = [...this.$refs.panel.querySelectorAll(`button, a[href], input, select, textarea, [tabindex]:not([tabindex='-1'])`)].filter((item) => !item.disabled && item.offsetParent !== null);
                if (items.length === 0) return;
                const first = items[0];
                const last = items[items.length - 1];
                if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus(); }
                if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); }
            }
        }"
        x-effect="document.body.classList.toggle('overflow-hidden', open)"
        @keydown.escape.window="if (open) closeHelp()"
    >
        <button
            type="button"
            @click="openHelp()"
            title="Ajuda desta tela"
            aria-label="Ajuda desta tela"
            :aria-expanded="open"
            aria-controls="{{ $dialogId }}"
            class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full border text-base font-black transition {{ $tone === 'dark' ? 'border-white/30 text-white hover:border-brand-400 hover:bg-white/10' : 'border-zinc-300 bg-white text-zinc-700 shadow-sm hover:border-brand-400 hover:bg-brand-50 hover:text-zinc-950' }}"
        >?</button>

        <template x-teleport="body">
            <div
                x-cloak
                x-show="open"
                x-transition.opacity
                id="{{ $dialogId }}"
                class="fixed inset-0 z-[90] flex items-end justify-center bg-zinc-950/70 p-0 sm:items-center sm:p-6"
                role="dialog"
                aria-modal="true"
                aria-labelledby="{{ $dialogId }}-title"
                @click.self="closeHelp()"
            >
                <section
                    x-ref="panel"
                    @keydown.tab="trapTab($event)"
                    class="flex max-h-[92dvh] w-full max-w-2xl flex-col overflow-hidden rounded-t-3xl bg-white shadow-2xl sm:max-h-[85vh] sm:rounded-2xl"
                >
                    <header class="sticky top-0 z-10 flex items-start justify-between gap-4 border-b border-zinc-200 bg-white px-5 py-4 sm:px-6">
                        <div>
                            <p class="text-xs font-bold uppercase tracking-[0.14em] text-brand-500">Como usar esta tela</p>
                            <h2 id="{{ $dialogId }}-title" class="mt-1 text-xl font-black text-zinc-950">{{ $help['title'] }}</h2>
                        </div>
                        <button x-ref="closeButton" type="button" @click="closeHelp()" class="rounded-lg p-2 text-zinc-600 hover:bg-zinc-100" aria-label="Fechar ajuda">
                            <x-ui.icon name="x" />
                        </button>
                    </header>

                    <div class="overflow-y-auto overscroll-contain px-5 py-5 sm:px-6 sm:py-6">
                        <div class="space-y-6 text-sm leading-6 text-zinc-700">
                            <section>
                                <h3 class="font-extrabold text-zinc-950">1. Para que serve</h3>
                                <p class="mt-1">{{ $help['purpose'] }}</p>
                            </section>

                            @if(($help['actions'] ?? []) !== [])
                                <section>
                                    <h3 class="font-extrabold text-zinc-950">2. O que você pode fazer</h3>
                                    <ul class="mt-2 list-disc space-y-1 pl-5">
                                        @foreach($help['actions'] as $action)<li>{{ $action }}</li>@endforeach
                                    </ul>
                                </section>
                            @endif

                            @if(($help['fields'] ?? []) !== [])
                                <section>
                                    <h3 class="font-extrabold text-zinc-950">3. Campos principais</h3>
                                    <dl class="mt-2 space-y-2">
                                        @foreach($help['fields'] as $field => $description)
                                            <div class="rounded-xl bg-zinc-50 px-3 py-2"><dt class="font-bold text-zinc-900">{{ $field }}</dt><dd>{{ $description }}</dd></div>
                                        @endforeach
                                    </dl>
                                </section>
                            @endif

                            @if(($help['buttons'] ?? []) !== [])
                                <section>
                                    <h3 class="font-extrabold text-zinc-950">4. Botões e ações</h3>
                                    <dl class="mt-2 space-y-2">
                                        @foreach($help['buttons'] as $button => $description)
                                            <div><dt class="font-bold text-zinc-900">{{ $button }}</dt><dd>{{ $description }}</dd></div>
                                        @endforeach
                                    </dl>
                                </section>
                            @endif

                            @if(($help['workflow'] ?? []) !== [])
                                <section>
                                    <h3 class="font-extrabold text-zinc-950">5. Fluxo recomendado</h3>
                                    <ol class="mt-2 list-decimal space-y-1 pl-5">
                                        @foreach($help['workflow'] as $step)<li>{{ $step }}</li>@endforeach
                                    </ol>
                                </section>
                            @endif

                            @if(($help['attention'] ?? []) !== [])
                                <section class="rounded-xl border border-amber-200 bg-amber-50 p-4 text-amber-950">
                                    <h3 class="font-extrabold">6. Atenção</h3>
                                    <ul class="mt-2 list-disc space-y-1 pl-5">
                                        @foreach($help['attention'] as $warning)<li>{{ $warning }}</li>@endforeach
                                    </ul>
                                </section>
                            @endif

                            @if(! empty($help['permissions']))
                                <p class="rounded-xl border border-zinc-200 p-3 text-xs text-zinc-600"><strong>Permissões:</strong> {{ $help['permissions'] }}</p>
                            @endif
                        </div>
                    </div>
                </section>
            </div>
        </template>
    </span>
@endif