@php
    $registry = app(\App\Services\Tools\ToolRegistry::class);

    $haystackFor = fn ($item): string => strtolower(implode(' ', [
        $item->name,
        $item->summary,
        implode(' ', $item->keywords),
        implode(' ', $item->accepts),
    ]));

    $allHaystacks = $grouped->flatten()->map($haystackFor)->values();
@endphp

<x-layouts.app title="All Tools — Convert, Compress and Edit Any File"
               description="Browse every {{ $brand['name'] }} tool: PDF, Office documents, images, audio, video, archives, data and handy utilities. All free, all in your browser."
               :canonical="route('tools.index')">

    <div class="container-page pt-8 pb-16 sm:pb-24">
        <x-breadcrumbs :items="[['label' => 'Home', 'url' => route('home')], ['label' => 'Tools', 'url' => null]]" class="mb-5" />

        <div class="mx-auto max-w-2xl text-center">
            <h1 class="text-3xl sm:text-4xl">Every tool in one place</h1>
            <p class="mt-3 text-ink-500">
                {{ $total }} tools across {{ $categories->count() }} categories. Filter below or jump straight to a category.
            </p>
        </div>

        {{-- Client-side filter over the rendered grid: instant, no requests. --}}
        <div x-data="toolFilter()" class="mt-8">
            <div class="mx-auto max-w-xl">
                <div class="relative">
                    <x-icon name="magnifying-glass" class="pointer-events-none absolute top-1/2 left-4 h-5 w-5 -translate-y-1/2 text-ink-400" />
                    <input type="search"
                           x-model="query"
                           value="{{ $query }}"
                           x-init="query = @js($query)"
                           placeholder="Filter tools — try “pdf”, “compress”, “mp4”…"
                           class="field h-13 rounded-2xl pl-12 text-base">
                </div>
            </div>

            {{-- Category jump links --}}
            <div class="no-scrollbar mt-6 flex gap-2 overflow-x-auto pb-1">
                @foreach ($categories as $category)
                    <a href="#cat-{{ $category->slug }}"
                       class="btn btn-secondary btn-sm shrink-0">
                        <x-icon :name="$category->icon" class="h-3.5 w-3.5" />
                        {{ $category->name }}
                        <span class="text-ink-400">{{ $category->toolCount }}</span>
                    </a>
                @endforeach
            </div>

            <div class="mt-10 space-y-12">
                @foreach ($grouped as $categorySlug => $tools)
                    @php
                        $category = $registry->category($categorySlug);

                        // Pre-computed search text per tool, reused for both the
                        // card filter and the section's own visibility.
                        $haystacks = $tools->map($haystackFor)->values();
                    @endphp
                    @continue($category === null)

                    <section id="cat-{{ $categorySlug }}" class="scroll-mt-24"
                             x-show="@js($haystacks).some((h) => matches(h))">
                        <div class="mb-4 flex flex-wrap items-end justify-between gap-3">
                            <div>
                                <h2 class="flex items-center gap-2.5 text-xl sm:text-2xl">
                                    <span class="bg-brand-100 text-brand-700 dark:bg-brand-950/60 dark:text-brand-300 grid h-8 w-8 place-items-center rounded-lg">
                                        <x-icon :name="$category->icon" class="h-4 w-4" />
                                    </span>
                                    {{ $category->name }}
                                </h2>
                                <p class="mt-1.5 text-sm text-ink-500">{{ $category->tagline }}</p>
                            </div>
                            <a href="{{ $category->url() }}" class="btn btn-ghost btn-sm">
                                Category page <x-icon name="arrow-right" class="h-3.5 w-3.5" />
                            </a>
                        </div>

                        <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                            @foreach ($tools as $tool)
                                <x-tool-card :tool="$tool" x-show="matches(@js($haystacks[$loop->index]))" />
                            @endforeach
                        </div>
                    </section>
                @endforeach
            </div>

            <p x-show="query !== '' && !@js($allHaystacks).some((h) => matches(h))"
               x-cloak
               class="py-14 text-center text-ink-500">
                No tool matches “<span x-text="query" class="font-semibold"></span>”. Try a file extension such as
                <button type="button" @click="query = 'pdf'" class="link">pdf</button> or
                <button type="button" @click="query = 'mp4'" class="link">mp4</button>.
            </p>
        </div>
    </div>
</x-layouts.app>