@extends('layouts.public')

@section('title', $term ? __('Search: :term', ['term' => $term]) : __('Search'))

@section('content')
    <x-page-hero :title="__('Search')"
                 :subtitle="$term ? trans_choice(':count result|:count results for “:term”', $total, ['count' => $total, 'term' => $term]) : null"
                 :breadcrumbs="[__('Search') => null]" />

    <section class="section">
        <div class="container-page max-w-4xl">
            <form method="GET" class="relative mb-12">
                <label for="search-term" class="sr-only">{{ __('Search') }}</label>
                <x-icon name="search" class="pointer-events-none absolute left-4 top-1/2 size-5 -translate-y-1/2 text-text-muted" />
                <input id="search-term" type="search" name="q" value="{{ $term }}"
                       required minlength="{{ $minLength }}" autofocus
                       placeholder="{{ __('Search projects, sectors, notices, team…') }}"
                       class="form-input py-3.5 pl-12 text-base">
            </form>

            @if ($term === '')
                <x-empty-state icon="search"
                               :title="__('Type at least two characters to search')"
                               :message="__('Search covers projects, sectors, media, team members, downloads, careers, gallery albums and FAQs.')" />
            @elseif ($total === 0)
                <x-empty-state icon="search"
                               :title="__('No results found')"
                               :message="__('Try a broader term — a sector name, a district, or a client — or browse the sections directly.')">
                    <div class="mt-6 flex flex-wrap justify-center gap-2">
                        <a href="{{ route('projects.index') }}" class="pill-idle">{{ __('All projects') }}</a>
                        <a href="{{ route('sectors.index') }}" class="pill-idle">{{ __('Sectors') }}</a>
                        <a href="{{ route('media.index') }}" class="pill-idle">{{ __('Media & notices') }}</a>
                    </div>
                </x-empty-state>
            @else
                @foreach ($results as $group => $items)
                    <section class="mb-12" data-reveal>
                        <div class="mb-4 flex items-baseline gap-4">
                            <h2 class="text-title">{{ $group }}</h2>
                            <span class="h-px flex-1 bg-border"></span>
                            <span class="meta-label">{{ $items->count() }}</span>
                        </div>

                        <ul class="divide-y divide-border overflow-hidden rounded-xl border border-border bg-surface">
                            @foreach ($items as $item)
                                <li>
                                    <a href="{{ $item['url'] }}" class="group block px-5 py-4 transition hover:bg-surface-muted">
                                        <span class="flex items-start justify-between gap-4">
                                            <span class="min-w-0">
                                                <span class="block font-medium text-text">
                                                    {!! \App\Services\SiteSearch::highlight($item['title'], $term, 110) !!}
                                                </span>

                                                @if (filled($item['excerpt']))
                                                    <span class="mt-1 block text-sm text-text-secondary">
                                                        {!! \App\Services\SiteSearch::highlight($item['excerpt'], $term) !!}
                                                    </span>
                                                @endif

                                                @if (filled($item['meta']))
                                                    <span class="meta-label mt-2 block">{{ $item['meta'] }}</span>
                                                @endif
                                            </span>

                                            <x-icon name="arrow-right" class="mt-1 size-4 shrink-0 text-text-muted transition group-hover:translate-x-1 group-hover:text-text-brand" />
                                        </span>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </section>
                @endforeach
            @endif
        </div>
    </section>
@endsection