@extends('layouts.site')

@section('title', __('Search') . ($query ? ": {$query}" : ''))

@section('content')
<div>
    <h1 class="text-2xl font-bold text-primary dark:text-primary-dark mb-4">{{ __('Search') }}</h1>

    <form action="{{ route('search', $locale) }}" method="GET" class="mb-6">
        <div class="flex gap-2">
            <input type="text" name="q" value="{{ $query }}" placeholder="{{ __('Search...') }}"
                   class="flex-1 rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 focus:border-primary focus:ring-primary">
            <button type="submit" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-secondary transition-colors">
                {{ __('Search') }}
            </button>
        </div>
    </form>

    @if($query)
    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
        {{ $results->count() }} {{ __('results for') }} "<strong>{{ $query }}</strong>"
    </p>
    @endif

    <div class="space-y-4">
        @foreach($results as $result)
        <a href="{{ $result['url'] }}" class="flex gap-4 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-primary/50 hover:shadow-sm transition-all">
            @if($result['og_image'])
            <div class="shrink-0 w-24 h-24 rounded overflow-hidden bg-gradient-to-br from-primary/20 to-secondary/20">
                <img src="{{ $result['og_image'] }}" alt="{{ $result['title'] }}" loading="lazy" decoding="async" class="w-full h-full object-cover">
            </div>
            @endif
            <div class="flex-1 min-w-0">
                <h3 class="font-semibold text-secondary dark:text-secondary-dark mb-1">{{ $result['title'] }}</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">{!! $result['excerpt'] !!}</p>
            </div>
        </a>
        @endforeach
    </div>

    @if($query && $results->isEmpty())
    <p class="text-gray-500 dark:text-gray-400 text-center py-12">{{ __('No results found.') }}</p>
    @endif
</div>
@endsection