@extends('layouts.public')
@section('title', $category->name . ' — Centro de Ayuda')

@section('content')
<div class="max-w-7xl 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">{{ $category->name }}</span>
    </nav>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
        {{-- Sidebar --}}
        <aside class="lg:col-span-1">
            <div class="glass rounded-xl p-4 sticky top-24">
                <h3 class="text-xs font-semibold uppercase text-gray-500 mb-3">Categorías</h3>
                <nav class="space-y-1">
                    @foreach($categories as $cat)
                    <a href="{{ route('kb.category', $cat->slug) }}"
                       class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition
                              {{ $cat->id === $category->id ? 'bg-brand-600/20 text-brand-400' : 'text-gray-400 hover:bg-white/5 hover:text-white' }}">
                        <i class="fas {{ $cat->iconClass() }} w-4 text-center text-xs"></i>
                        {{ $cat->name }}
                        <span class="ml-auto text-xs text-gray-600">{{ $cat->articles()->count() }}</span>
                    </a>
                    @endforeach
                </nav>
            </div>
        </aside>

        {{-- Content --}}
        <div class="lg:col-span-3">
            <div class="flex items-center gap-4 mb-6">
                <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-brand-500 to-accent-600 flex items-center justify-center">
                    <i class="fas {{ $category->iconClass() }} text-2xl text-white"></i>
                </div>
                <div>
                    <h1 class="text-2xl font-bold">{{ $category->name }}</h1>
                    @if($category->description)
                    <p class="text-gray-400 text-sm">{{ $category->description }}</p>
                    @endif
                </div>
            </div>

            <div class="space-y-3">
                @forelse($articles as $article)
                <a href="{{ route('kb.article', [$category->slug, $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), 150) }}</p>
                    <div class="flex items-center gap-4 mt-2 text-xs text-gray-600">
                        <span><i class="fas fa-eye mr-1"></i>{{ $article->visits }} visitas</span>
                        <span><i class="fas fa-clock mr-1"></i>{{ $article->updated_at->diffForHumans() }}</span>
                    </div>
                </a>
                @empty
                <div class="text-center py-12 text-gray-600">
                    <i class="fas fa-folder-open text-3xl mb-3"></i>
                    <p>No hay artículos en esta categoría</p>
                </div>
                @endforelse
            </div>

            <div class="mt-6">{{ $articles->links() }}</div>
        </div>
    </div>
</div>
@endsection