@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')

    @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