@php
    $fmtCategory = fn ($c) => (string) ($c['label'] ?? ($c['key'] ?? ''));
    $categoryCounts = [];
    foreach ($grouped as $g) {
        $categoryCounts[(string) ($g['category'] ?? '')] = count((array) ($g['items'] ?? []));
    }
@endphp

<div class="space-y-6">
    <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
            <div class="space-y-1">
                <h2 class="text-xl font-bold text-gray-800 dark:text-white/90">Buku Panduan</h2>
                <p class="text-sm text-gray-500 dark:text-gray-400">Panduan operasional yang rapi, singkat, dan mudah dipakai saat jam ramai.</p>
            </div>

            <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
                <div class="relative">
                    <span class="absolute top-1/2 left-4 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                        <svg class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M3.04199 9.37363C3.04199 5.87693 5.87735 3.04199 9.37533 3.04199C12.8733 3.04199 15.7087 5.87693 15.7087 9.37363C15.7087 12.8703 12.8733 15.7053 9.37533 15.7053C5.87735 15.7053 3.04199 12.8703 3.04199 9.37363ZM9.37533 1.54199C5.04926 1.54199 1.54199 5.04817 1.54199 9.37363C1.54199 13.6991 5.04926 17.2053 9.37533 17.2053C11.2676 17.2053 13.0032 16.5344 14.3572 15.4176L17.1773 18.238C17.4702 18.5309 17.945 18.5309 18.2379 18.238C18.5308 17.9451 18.5309 17.4703 18.238 17.1773L15.4182 14.3573C16.5367 13.0033 17.2087 11.2669 17.2087 9.37363C17.2087 5.04817 13.7014 1.54199 9.37533 1.54199Z" fill="" />
                        </svg>
                    </span>
                    <input wire:model.live.debounce.300ms="q" type="text" placeholder="Cari panduan (contoh: refund, tutup kas, HPP)..." class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent py-2.5 pr-4 pl-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden sm:w-[420px] dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30" />
                </div>
                <select wire:model.live="category" class="shadow-theme-xs h-11 rounded-lg border border-gray-300 bg-white px-4 text-sm text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
                    <option value="">Semua Kategori</option>
                    @foreach ($categories as $c)
                        <option value="{{ (string) $c['key'] }}">{{ $fmtCategory($c) }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>

    @if (($term ?? '') !== '')
        <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="text-sm font-semibold text-gray-800 dark:text-white/90">Hasil pencarian: “{{ $term }}”</div>
            <div class="mt-3 space-y-2">
                @forelse ($results as $r)
                    <a href="{{ route('guides.show', ['slug' => (string) $r['slug']]) }}" wire:navigate class="block rounded-xl border border-gray-200 bg-white p-4 hover:bg-gray-50 dark:border-gray-800 dark:bg-gray-900/30 dark:hover:bg-white/[0.03]">
                        <div class="flex items-start justify-between gap-3">
                            <div class="min-w-0">
                                <div class="text-sm font-semibold text-gray-800 dark:text-white/90">{{ (string) $r['title'] }}</div>
                                <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ (string) ($r['category_label'] ?? '') }}</div>
                            </div>
                            <span class="shrink-0 rounded-full border border-gray-200 bg-white px-2 py-0.5 text-xs font-medium text-gray-700 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300">
                                Buka
                            </span>
                        </div>
                    </a>
                @empty
                    <div class="text-sm text-gray-600 dark:text-gray-400">Tidak ada artikel yang cocok.</div>
                @endforelse
            </div>
        </div>
    @else
        <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
            <div class="lg:col-span-2 space-y-4">
                <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
                    <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                        <div>
                            <div class="text-sm font-semibold text-gray-800 dark:text-white/90">Mulai dari sini</div>
                            <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">Rekomendasi urutan baca untuk owner & tim.</div>
                        </div>
                    </div>
                    <div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
                        @foreach ($featured as $a)
                            @php
                                $summary = (string) ($a['summary'] ?? '');
                            @endphp
                            <a href="{{ route('guides.show', ['slug' => (string) $a['slug']]) }}" wire:navigate class="group rounded-xl border border-gray-200 bg-white p-4 hover:bg-gray-50 dark:border-gray-800 dark:bg-gray-900/30 dark:hover:bg-white/[0.03]">
                                <div class="flex items-start justify-between gap-3">
                                    <div class="min-w-0">
                                        <div class="text-sm font-semibold text-gray-800 group-hover:text-gray-900 dark:text-white/90">{{ (string) $a['title'] }}</div>
                                        <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ (string) ($a['category_label'] ?? '') }}</div>
                                    </div>
                                    <span class="shrink-0 rounded-full border border-gray-200 bg-white px-2 py-0.5 text-xs font-semibold text-gray-700 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300">
                                        Buka
                                    </span>
                                </div>
                                @if ($summary !== '')
                                    <div class="mt-3 text-sm text-gray-600 dark:text-gray-300">{{ $summary }}</div>
                                @endif
                            </a>
                        @endforeach
                    </div>
                </div>

                @foreach ($grouped as $g)
                    @php
                        $catKey = (string) ($g['category'] ?? '');
                        $count = (int) ($categoryCounts[$catKey] ?? 0);
                    @endphp
                    <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
                        <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                            <div class="flex items-center gap-2">
                                <div class="text-sm font-semibold text-gray-800 dark:text-white/90">{{ (string) ($g['label'] ?? '-') }}</div>
                                <span class="rounded-full border border-gray-200 bg-white px-2 py-0.5 text-xs font-semibold text-gray-700 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300">
                                    {{ number_format($count, 0, ',', '.') }} artikel
                                </span>
                            </div>
                        </div>
                        <div class="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
                            @foreach ((array) ($g['items'] ?? []) as $a)
                                <a href="{{ route('guides.show', ['slug' => (string) $a['slug']]) }}" wire:navigate class="rounded-xl border border-gray-200 bg-white px-4 py-3 text-sm font-semibold text-gray-800 hover:bg-gray-50 dark:border-gray-800 dark:bg-gray-900/30 dark:text-white/90 dark:hover:bg-white/[0.03]">
                                    {{ (string) $a['title'] }}
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="space-y-4">
                <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
                    <div class="text-sm font-semibold text-gray-800 dark:text-white/90">Panduan singkat pemakaian</div>
                    <div class="mt-3 space-y-2 text-sm text-gray-700 dark:text-gray-300">
                        <div class="rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-800 dark:bg-gray-900/40">
                            Gunakan pencarian saat operasional (mis. “refund”, “printer”).
                        </div>
                        <div class="rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-800 dark:bg-gray-900/40">
                            Ikuti SOP Ringkas untuk mengurangi selisih kas dan stok.
                        </div>
                        <div class="rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-800 dark:bg-gray-900/40">
                            Jika bingung angka laporan, mulai dari glosarium finansial.
                        </div>
                    </div>
                </div>

                <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
                    <div class="text-sm font-semibold text-gray-800 dark:text-white/90">Akses cepat</div>
                    <div class="mt-3 grid grid-cols-1 gap-2">
                        <a href="{{ route('guides.show', ['slug' => 'sop-harian']) }}" wire:navigate class="rounded-xl border border-gray-200 bg-white px-4 py-3 text-sm font-semibold text-gray-800 hover:bg-gray-50 dark:border-gray-800 dark:bg-gray-900/30 dark:text-white/90 dark:hover:bg-white/[0.03]">
                            SOP Harian (wajib)
                        </a>
                        <a href="{{ route('guides.show', ['slug' => 'refund-void-dan-aturan-aman']) }}" wire:navigate class="rounded-xl border border-gray-200 bg-white px-4 py-3 text-sm font-semibold text-gray-800 hover:bg-gray-50 dark:border-gray-800 dark:bg-gray-900/30 dark:text-white/90 dark:hover:bg-white/[0.03]">
                            Refund & Void (anti bocor)
                        </a>
                        <a href="{{ route('guides.show', ['slug' => 'glosarium-angka-finansial']) }}" wire:navigate class="rounded-xl border border-gray-200 bg-white px-4 py-3 text-sm font-semibold text-gray-800 hover:bg-gray-50 dark:border-gray-800 dark:bg-gray-900/30 dark:text-white/90 dark:hover:bg-white/[0.03]">
                            Glosarium Angka Finansial
                        </a>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>