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

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    {{-- Hero Search --}}
    <section class="py-16 text-center relative">
        <div class="absolute top-10 left-10 w-60 h-60 bg-brand-500/10 rounded-full blur-3xl float"></div>
        <div class="relative z-10 slide-up">
            <h1 class="text-4xl md:text-5xl font-black mb-4">
                ¿Cómo podemos <span class="text-brand-400">ayudarte</span>?
            </h1>
            <p class="text-gray-400 mb-8">Busca en nuestra base de conocimientos o explora las categorías</p>
            <form action="{{ route('kb.search') }}" method="GET" class="max-w-xl mx-auto">
                <div class="glass rounded-2xl p-2 flex gap-2 glow">
                    <input type="text" name="q" placeholder="Escribe tu pregunta..." value="{{ request('q') }}"
                        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">
                    <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">
                        <i class="fas fa-search mr-1"></i> Buscar
                    </button>
                </div>
            </form>
        </div>
    </section>

    {{-- Categories Grid --}}
    <section class="pb-16">
        <h2 class="text-2xl font-bold mb-8">Categorías</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
            @forelse($categories as $cat)
            <a href="{{ route('kb.category', $cat->slug) }}"
               class="glass rounded-2xl p-6 hover:bg-white/10 transition-all duration-300 group border border-white/5 hover:border-brand-500/30">
                <div class="flex items-center gap-4 mb-3">
                    <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500 to-accent-600 flex items-center justify-center group-hover:scale-110 transition-transform">
                        <i class="fas {{ $cat->iconClass() }} text-xl text-white"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold group-hover:text-brand-400 transition">{{ $cat->name }}</h3>
                        <span class="text-xs text-gray-500">{{ $cat->articles()->count() }} artículos</span>
                    </div>
                </div>
                @if($cat->description)
                <p class="text-sm text-gray-400 line-clamp-2">{{ $cat->description }}</p>
                @endif
            </a>
            @empty
            <div class="col-span-3 text-center py-12 text-gray-600">
                <i class="fas fa-folder-open text-4xl mb-3"></i>
                <p>No hay categorías disponibles</p>
            </div>
            @endforelse
        </div>
    </section>

    {{-- Popular Articles --}}
    @if($popular->isNotEmpty())
    <section class="pb-16">
        <h2 class="text-2xl font-bold mb-6">Artículos populares</h2>
        <div class="grid md:grid-cols-2 gap-4">
            @foreach($popular 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 group flex items-start gap-3">
                <div class="w-8 h-8 rounded-lg bg-brand-500/20 flex items-center justify-center flex-shrink-0 mt-0.5">
                    <i class="fas fa-file-alt text-brand-400 text-sm"></i>
                </div>
                <div>
                    <h3 class="font-medium group-hover:text-brand-400 transition text-sm">{{ $article->title }}</h3>
                    <span class="text-xs text-gray-500"><i class="fas fa-eye mr-1"></i>{{ $article->visits }} visitas</span>
                </div>
            </a>
            @endforeach
        </div>
    </section>
    @endif
</div>
@endsection