@extends('layouts.app')

@section('title', 'Search')
@section('page-title', '🔍 Search Results')
@section('page-subtitle', $q ? "Results for \"" . e($q) . "\"" : 'Enter a search term')

@section('content')

<form method="GET" action="{{ route('search.index') }}" class="mb-6">
    <div class="relative max-w-xl">
        <span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400">🔍</span>
        <input
            type="text"
            name="q"
            value="{{ e($q) }}"
            placeholder="Search clients, events, invoices, content…"
            class="input-soft pl-11 py-3 text-base w-full"
            autofocus
        >
    </div>
</form>

@if(! $q)
    <div class="text-center py-20 text-gray-400">
        <span class="text-5xl block mb-3">🔍</span>
        <p class="text-base font-medium">Start typing to search across everything</p>
        <p class="text-sm mt-1">Clients, events, invoices, content briefs, rate cards</p>
    </div>
@elseif(empty($results))
    <div class="text-center py-20 text-gray-400">
        <span class="text-5xl block mb-3">😿</span>
        <p class="text-base font-medium">No results for "{{ e($q) }}"</p>
        <p class="text-sm mt-1">Try a different keyword</p>
    </div>
@else
    <div class="space-y-6">
        @foreach($results as $group)
            <div class="cat-card overflow-hidden">
                <div class="px-5 py-3 bg-pink-50/60 border-b border-pink-100">
                    <h2 class="text-sm font-bold text-gray-600">{{ $group['label'] }}</h2>
                </div>
                <div class="divide-y divide-pink-50">
                    @foreach($group['items'] as $item)
                        <a href="{{ $item['url'] }}"
                           class="flex items-center gap-4 px-5 py-3 hover:bg-pink-50/40 transition-colors">
                            <span class="text-2xl shrink-0">{{ $item['icon'] }}</span>
                            <div class="min-w-0">
                                <div class="font-semibold text-gray-800 text-sm truncate">{{ $item['title'] }}</div>
                                @if($item['subtitle'])
                                    <div class="text-xs text-gray-400 truncate mt-0.5">{{ $item['subtitle'] }}</div>
                                @endif
                            </div>
                            <span class="ml-auto text-gray-300 text-sm shrink-0">→</span>
                        </a>
                    @endforeach
                </div>
            </div>
        @endforeach
    </div>
@endif

@endsection