<x-layout title="Search" description="Search Brokam International services, projects, and news.">

    <x-page-hero kicker="Search"
                 title="Find what you need."
                 :crumbs="['Home' => route('home'), 'Search' => null]">
        <form method="GET" action="{{ route('search') }}" class="mt-8 max-w-xl">
            <div class="relative">
                <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"><x-icon name="search" class="w-5 h-5"/></span>
                <input type="search" name="q" value="{{ $query }}" autofocus placeholder="Search services, projects, news…"
                       class="w-full rounded-full border border-slate-200 bg-white text-slate-ink placeholder:text-slate-400 shadow-sm pl-12 pr-32 py-4 focus:border-brand-500 focus:ring-0">
                <button type="submit" class="btn btn-primary absolute right-1.5 top-1/2 -translate-y-1/2 !py-2.5 !px-5 text-sm">Search</button>
            </div>
        </form>
    </x-page-hero>

    <section class="section">
        <div class="shell max-w-3xl">
            @if (strlen($query) < 2)
                <p class="text-slate-500">Enter a search term above to find services, projects, and articles.</p>
            @elseif ($results->isEmpty())
                <div class="card p-10 text-center">
                    <p class="text-slate-ink font-semibold text-lg">No results for "{{ $query }}"</p>
                    <p class="text-slate-500 mt-2">Try a different term, or <a href="{{ route('contact') }}" class="text-brand-600 font-semibold">contact us</a> directly.</p>
                </div>
            @else
                <p class="text-sm text-slate-400 mb-6">{{ $results->count() }} result{{ $results->count() === 1 ? '' : 's' }} for "{{ $query }}"</p>
                <div class="space-y-4">
                    @foreach ($results as $r)
                        <a href="{{ $r['url'] }}" class="card group p-6 flex items-start justify-between gap-4">
                            <div>
                                <span class="text-xs font-semibold uppercase tracking-wider text-brand-600">{{ $r['type'] }}</span>
                                <h2 class="text-lg font-semibold text-slate-ink group-hover:text-brand-600 transition-colors">{{ $r['title'] }}</h2>
                                <p class="mt-1 text-sm text-slate-500">{{ $r['excerpt'] }}</p>
                            </div>
                            <x-icon name="arrow" class="w-5 h-5 text-slate-300 group-hover:text-brand-500 group-hover:translate-x-1 transition mt-1 shrink-0"/>
                        </a>
                    @endforeach
                </div>
            @endif
        </div>
    </section>
</x-layout>
