@extends('layouts.public')

@section('title', 'AI Tools Directory — Boss Of AI')
@section('meta_description', 'A working directory of AI tools for writing, video, coding, automation, marketing, sales and research.')

@section('content')
<section class="border-b border-graphite-200 py-14 md:py-20">
    <div class="shell">
        <h1 class="max-w-[18ch] text-4xl leading-[1.02] md:text-[3.25rem]">AI tools, sorted by the job</h1>
        <p class="mt-5 max-w-[58ch] text-lg leading-relaxed text-graphite-600">
            Every tool here is listed with what it is genuinely good at, what it costs and who it suits.
            No affiliate ranking.
        </p>

        <form method="GET" action="{{ route('tools.index') }}" class="mt-8 flex flex-col gap-2.5 sm:flex-row sm:max-w-xl">
            <label for="q" class="sr-only">Search tools</label>
            <input id="q" type="search" name="q" value="{{ $filters['q'] ?? '' }}"
                   placeholder="Search by name or what it does" class="field flex-1">
            @if (! empty($filters['category']))
                <input type="hidden" name="category" value="{{ $filters['category'] }}">
            @endif
            <button type="submit" class="btn btn-primary shrink-0">Search</button>
        </form>
    </div>
</section>

<section class="py-12 md:py-16">
    <div class="shell grid gap-10 lg:grid-cols-[15rem_1fr] lg:gap-14">
        <aside>
            <h2 class="text-sm font-semibold">Categories</h2>
            <ul class="mt-4 space-y-1">
                <li>
                    <a href="{{ route('tools.index', request()->only('q')) }}"
                       @class([
                           'flex items-center justify-between rounded px-3 py-2 text-[15px]',
                           'bg-ink text-paper' => empty($filters['category']),
                           'text-graphite-600 hover:bg-graphite-50' => ! empty($filters['category']),
                       ])>
                        <span>All tools</span>
                    </a>
                </li>
                @foreach ($categories as $category)
                    <li>
                        <a href="{{ route('tools.index', array_filter(['category' => $category->slug, 'q' => $filters['q'] ?? null])) }}"
                           @class([
                               'flex items-center justify-between gap-3 rounded px-3 py-2 text-[15px]',
                               'bg-ink text-paper' => ($filters['category'] ?? null) === $category->slug,
                               'text-graphite-600 hover:bg-graphite-50' => ($filters['category'] ?? null) !== $category->slug,
                           ])>
                            <span>{{ $category->name }}</span>
                            <span class="font-mono text-[13px] opacity-60">{{ $category->tools_count }}</span>
                        </a>
                    </li>
                @endforeach
            </ul>
        </aside>

        <div>
            @if ($tools->isEmpty())
                <div class="rounded-lg border border-dashed border-graphite-300 p-10 text-center">
                    <h2 class="text-xl">Nothing matches that search</h2>
                    <p class="mx-auto mt-3 max-w-[46ch] text-graphite-600">
                        Try a broader term, or clear the filters to see the full directory.
                    </p>
                    <a href="{{ route('tools.index') }}" class="btn btn-outline mt-6">Clear filters</a>
                </div>
            @else
                <p class="text-sm text-graphite-500">{{ $tools->total() }} {{ Str::plural('tool', $tools->total()) }}</p>

                <div class="mt-5 grid gap-4 sm:grid-cols-2">
                    @foreach ($tools as $tool)
                        <a href="{{ route('tools.show', $tool) }}"
                           class="group flex flex-col rounded-lg border border-graphite-200 p-5 transition-colors hover:border-ink">
                            <div class="flex items-start justify-between gap-3">
                                <h2 class="text-lg">{{ $tool->name }}</h2>
                                @if ($tool->is_featured)
                                    <span class="shrink-0 rounded-full bg-signal px-2.5 py-1 text-[13px] font-medium">Featured</span>
                                @endif
                            </div>
                            <p class="mt-2.5 flex-1 text-[15px] leading-relaxed text-graphite-600">{{ $tool->summary }}</p>
                            <div class="mt-5 flex flex-wrap items-center gap-2 text-[13px] text-graphite-500">
                                <span class="rounded-full bg-graphite-100 px-2.5 py-1 text-graphite-600">{{ $tool->category->name }}</span>
                                <span>{{ $tool->pricingLabel() }}</span>
                            </div>
                        </a>
                    @endforeach
                </div>

                <div class="mt-10">{{ $tools->links() }}</div>
            @endif
        </div>
    </div>
</section>

@include('partials.lead-finder-cta')
@endsection