@extends('layouts.public')
@section('title', $article->title . ' — 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 flex-wrap">
        <a href="{{ route('kb.index') }}" class="hover:text-brand-400 transition">Centro de Ayuda</a>
        <i class="fas fa-chevron-right text-xs"></i>
        @if($article->kbCategory)
        <a href="{{ route('kb.category', $article->kbCategory->slug) }}" class="hover:text-brand-400 transition">{{ $article->kbCategory->name }}</a>
        <i class="fas fa-chevron-right text-xs"></i>
        @endif
        <span class="text-gray-300">{{ Str::limit($article->title, 60) }}</span>
    </nav>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
        {{-- Sidebar --}}
        <aside class="lg:col-span-1 order-2 lg:order-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
                              {{ $article->kbCategory && $cat->id === $article->kbCategory->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 order-1 lg:order-2">
            <article class="glass rounded-2xl p-6 md:p-8">
                <h1 class="text-2xl md:text-3xl font-bold mb-4">{{ $article->title }}</h1>
                <div class="flex items-center gap-4 text-xs text-gray-500 mb-6 border-b border-white/10 pb-4">
                    @if($article->kbCategory)
                    <span class="px-2 py-1 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 }} visitas</span>
                    <span><i class="fas fa-clock mr-1"></i>{{ $article->updated_at->diffForHumans() }}</span>
                </div>

                <div class="prose prose-invert max-w-none text-gray-300 leading-relaxed
                            [&_h2]:text-xl [&_h2]:font-bold [&_h2]:text-white [&_h2]:mt-6 [&_h2]:mb-3
                            [&_h3]:text-lg [&_h3]:font-semibold [&_h3]:text-white [&_h3]:mt-4 [&_h3]:mb-2
                            [&_p]:mb-3
                            [&_ul]:list-disc [&_ul]:pl-6 [&_ul]:mb-4
                            [&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:mb-4
                            [&_li]:mb-1
                            [&_a]:text-brand-400 [&_a]:underline
                            [&_img]:rounded-xl [&_img]:my-4 [&_img]:max-w-full
                            [&_strong]:text-white
                            [&_code]:bg-white/10 [&_code]:px-1 [&_code]:rounded [&_code]:text-sm">
                    {!! $article->content !!}
                </div>
            </article>

            {{-- Related Articles --}}
            @if(isset($related) && $related->isNotEmpty())
            <div class="mt-8">
                <h3 class="text-lg font-bold mb-4">Artículos relacionados</h3>
                <div class="grid gap-3">
                    @foreach($related as $rel)
                    <a href="{{ route('kb.article', [$rel->kbCategory->slug ?? 'general', $rel->slug]) }}"
                       class="glass rounded-xl p-4 hover:bg-white/10 transition-all group flex items-center gap-3">
                        <i class="fas fa-file-alt text-brand-400/50"></i>
                        <span class="group-hover:text-brand-400 transition text-sm">{{ $rel->title }}</span>
                    </a>
                    @endforeach
                </div>
            </div>
            @endif

            {{-- CTA --}}
            <div class="mt-8 glass rounded-2xl p-6 text-center">
                <p class="text-gray-400 mb-3">¿No encontraste lo que buscabas?</p>
                <a href="https://wa.me/18099818880" target="_blank"
                   class="inline-block px-6 py-3 bg-gradient-to-r from-green-600 to-green-700 rounded-xl font-medium hover:from-green-500 hover:to-green-600 transition-all">
                    <i class="fab fa-whatsapp mr-2"></i> Contactar Soporte
                </a>
            </div>
        </div>
    </div>
</div>
@endsection