@extends('layouts.public')
@section('title', 'Buscar — Centro de Ayuda')

@section('content')
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    {{-- Breadcrumb --}}
    <nav class="flex items-center gap-2 text-sm text-gray-500 mb-6">
        <a href="{{ route('kb.index') }}" class="hover:text-brand-400 transition">Centro de Ayuda</a>
        <i class="fas fa-chevron-right text-xs"></i>
        <span class="text-white">Búsqueda</span>
    </nav>

    {{-- Search --}}
    <form action="{{ route('kb.search') }}" method="GET" class="mb-8">
        <div class="glass rounded-2xl p-2 flex gap-2">
            <input type="text" name="q" value="{{ $query ?? '' }}" placeholder="Escribe tu pregunta..."
                class="flex-1 bg-dark-900/80 rounded-xl px-5 py-3 text-white placeholder-gray-500 border border-white/10 focus:border-brand-400" autofocus>
            <button type="submit" class="px-6 py-3 bg-gradient-to-r from-brand-600 to-accent-600 rounded-xl font-bold hover:from-brand-500 hover:to-accent-500 transition-all">
                Buscar
            </button>
        </div>
    </form>

    @if(!empty($query))
    <h2 class="text-lg font-bold mb-4">
        {{ $results->count() }} resultado{{ $results->count() !== 1 ? 's' : '' }} para "<span class="text-brand-400">{{ $query }}</span>"
    </h2>

    <div class="space-y-3">
        @forelse($results as $article)
        <a href="{{ route('kb.article', [$article->kbCategory->slug ?? 'general', $article->slug]) }}"
           class="glass rounded-xl p-4 hover:bg-white/10 transition-all block group">
            <h3 class="font-medium group-hover:text-brand-400 transition">{{ $article->title }}</h3>
            <p class="text-sm text-gray-500 mt-1 line-clamp-2">{{ Str::limit(strip_tags($article->content), 200) }}</p>
            <div class="flex items-center gap-3 mt-2 text-xs text-gray-600">
                @if($article->kbCategory)
                <span class="px-2 py-0.5 rounded-full bg-brand-600/20 text-brand-400">{{ $article->kbCategory->name }}</span>
                @endif
                <span><i class="fas fa-eye mr-1"></i>{{ $article->visits }}</span>
            </div>
        </a>
        @empty
        <div class="text-center py-12 text-gray-600">
            <i class="fas fa-search text-3xl mb-3"></i>
            <p>No se encontraron resultados</p>
            <p class="text-sm mt-2">Intenta con otros términos o <a href="{{ route('kb.index') }}" class="text-brand-400 hover:underline">explora las categorías</a></p>
        </div>
        @endforelse
    </div>
    @else
    <div class="text-center py-12 text-gray-500">
        <i class="fas fa-search text-3xl mb-3"></i>
        <p>Escribe tu pregunta para buscar en la base de conocimientos</p>
    </div>
    @endif
</div>
@endsection