@extends('layouts.site')

@section('content')
<section class="on-dark section !pb-12"><div class="wrap max-w-4xl">
    <p class="eyebrow">Search</p>
    <h1 class="display !text-5xl">{{ \App\Support\Text::accent('What are you *looking for*?') }}</h1>
    <form method="get" action="{{ route('search') }}" role="search" class="mt-8 flex gap-3">
        <label for="q" class="sr-only">Search the site</label>
        <input id="q" name="q" value="{{ $q }}" maxlength="80" autocomplete="off" class="field flex-1 !bg-white" placeholder="For example automation, portal, CRM">
        @if ($type)<input type="hidden" name="type" value="{{ $type }}">@endif
        <button class="btn btn-primary">Search</button>
    </form>
</div></section>

<section class="on-light section !py-12"><div class="wrap max-w-4xl">
    @if ($q === '')
        <p class="text-lg text-muted">Type a few words. We search services, work, insights, courses and common questions.</p>
        <p class="eyebrow mt-10">Popular</p>
        <div class="flex flex-wrap gap-2">@foreach ($services->take(8) as $s)<a class="chip hover:bg-ink hover:text-ice" href="{{ route('services.show', $s->slug) }}">{{ $s->name }}</a>@endforeach</div>
    @elseif ($short)
        <p class="text-lg text-muted">Please use at least two letters in a word.</p>
    @else
        <p class="mb-6 text-muted" aria-live="polite">{{ $res['total'] }} {{ \Illuminate\Support\Str::plural('result', $res['total']) }} for &ldquo;{{ $q }}&rdquo;</p>

        @if ($res['total'] > 0 || $type)
            <div class="mb-8 flex flex-wrap gap-2" aria-label="Filter by type">
                <a class="chip {{ ! $type ? 'bg-ink text-ice' : '' }}" href="{{ route('search', ['q' => $q]) }}">All</a>
                @foreach ($types as $key => $label)
                    @if (($res['counts'][$key] ?? 0) > 0 || $type === $key)
                        <a class="chip {{ $type === $key ? 'bg-ink text-ice' : '' }}" href="{{ route('search', ['q' => $q, 'type' => $key]) }}">{{ $label }} {{ $res['counts'][$key] ?? '' }}</a>
                    @endif
                @endforeach
            </div>
        @endif

        @forelse ($res['results'] as $r)
            <a href="{{ $r['url'] }}" class="rule-row !items-start group">
                <span class="w-24 shrink-0 pt-1 text-xs uppercase tracking-widest text-violet">{{ $r['label'] }}</span>
                <span class="flex-1"><span class="font-display text-xl tracking-tight">{{ $r['title'] }}</span>@if ($r['snippet'])<span class="mt-1 block text-muted [&_mark]:rounded-sm [&_mark]:bg-lilac/50 [&_mark]:px-0.5">{!! $r['snippet'] !!}</span>@endif</span>
            </a>
        @empty
            <div class="max-w-xl">
                <p class="text-lg">Nothing found for &ldquo;{{ $q }}&rdquo;.</p>
                <p class="mt-2 text-muted">Try fewer or simpler words. If it is a problem you want solved rather than a page you want found, describe it to us.</p>
                <a class="btn btn-primary mt-6" href="{{ route('start-project.show') }}">Start a Project</a>
            </div>
        @endforelse
    @endif
</div></section>
@endsection