{{--
    Public Knowledge Base Landing Page
    ====================================
    Features:
    - 60-word pitch paragraph in hero
    - Inline responsive stat tab cards
    - Real-time Alpine.js search dropdown (2+ chars)
    - Real-time sort/filter (auto-submit on change)
    - Branded hero headers
    - Inward-styled divider
    - RBAC: @can/@auth guards on all action buttons
    Layout: Site Layout (public)
--}}
<x-site-layout
    title="{{ $seoMetadata['title'] ?? 'Knowledge Base - FAQs, Guides & Documentation' }}"
    meta-description="{{ $seoMetadata['description'] ?? '' }}"
>

    {{-- ===== HERO ===== --}}
    <div class="bg-gradient-to-br from-slate-800 via-blue-900 to-indigo-900 relative overflow-hidden">
        <div class="absolute inset-0 pointer-events-none">
            <div class="absolute -top-24 -left-24 w-96 h-96 bg-blue-500 opacity-10 rounded-full blur-3xl"></div>
            <div class="absolute -bottom-24 -right-24 w-96 h-96 bg-indigo-500 opacity-10 rounded-full blur-3xl"></div>
        </div>

        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">

            {{-- Header row --}}
            <div class="flex flex-col md:flex-row md:items-start md:justify-between mb-6">
                <div class="flex items-center mb-4 md:mb-0">
                    <div class="w-14 h-14 rounded-2xl bg-white bg-opacity-10 flex items-center justify-center mr-4 shadow-lg flex-shrink-0">
                        <i class="fas fa-book-open text-white text-2xl"></i>
                    </div>
                    <div>
                        <h1 class="text-3xl md:text-4xl font-extrabold text-white tracking-tight">Knowledge Base</h1>
                        <p class="text-blue-200 mt-1 text-sm">Find answers, guides, and documentation</p>
                    </div>
                </div>
                @auth
                    @can('create knowledge base questions')
                    <a href="{{ route('knowledge-sharing.knowledge-base.create') }}"
                       class="inline-flex items-center px-5 py-2.5 bg-white text-blue-800 font-semibold rounded-xl hover:bg-blue-50 transition shadow-md text-sm">
                        <i class="fas fa-plus mr-2"></i>Add Question
                    </a>
                    @endcan
                @else
                    <div class="flex flex-col sm:flex-row gap-3">
                        <a href="{{ route('register.role.contributor') }}"
                           class="inline-flex items-center justify-center px-5 py-2.5 bg-white text-blue-800 font-bold rounded-xl hover:bg-blue-50 transition shadow-md text-sm">
                            <i class="fas fa-user-plus mr-2"></i>Register to Contribute
                        </a>
                        <a href="{{ route('public.contributor.login') }}"
                           class="inline-flex items-center justify-center px-5 py-2.5 bg-transparent border-2 border-white text-white font-semibold rounded-xl hover:bg-white hover:bg-opacity-10 transition text-sm">
                            <i class="fas fa-sign-in-alt mr-2"></i>Sign In
                        </a>
                    </div>
                @endauth
            </div>

            {{-- 60-word pitch paragraph --}}
            <div class="max-w-3xl mb-8">
                <p class="text-blue-100 text-sm md:text-base leading-relaxed">
                    Explore our curated knowledge base built by health informatics experts across South Sudan. Find authoritative answers to clinical, technical, and policy questions. Browse by category, difficulty, or topic — and if you have expertise to share, contribute your own answers to help colleagues navigate complex challenges in health information management.
                </p>
            </div>

            {{-- Inline responsive stat tab cards --}}
            <div class="flex flex-wrap gap-2 mb-8">
                <div class="flex items-center gap-2 bg-white bg-opacity-15 backdrop-blur-sm border border-white border-opacity-20 rounded-xl px-4 py-2 text-white">
                    <i class="fas fa-question-circle text-blue-200 text-sm"></i>
                    <span class="text-lg font-extrabold leading-none">{{ number_format($statistics['published_questions'] ?? 0) }}</span>
                    <span class="text-blue-200 text-xs">Questions</span>
                </div>
                <div class="flex items-center gap-2 bg-white bg-opacity-15 backdrop-blur-sm border border-white border-opacity-20 rounded-xl px-4 py-2 text-white">
                    <i class="fas fa-folder-open text-purple-200 text-sm"></i>
                    <span class="text-lg font-extrabold leading-none">{{ number_format($statistics['total_categories'] ?? 0) }}</span>
                    <span class="text-purple-200 text-xs">Categories</span>
                </div>
                <div class="flex items-center gap-2 bg-white bg-opacity-15 backdrop-blur-sm border border-white border-opacity-20 rounded-xl px-4 py-2 text-white">
                    <i class="fas fa-lightbulb text-emerald-200 text-sm"></i>
                    <span class="text-lg font-extrabold leading-none">{{ number_format($statistics['total_answers'] ?? 0) }}</span>
                    <span class="text-emerald-200 text-xs">Answers</span>
                </div>
                <div class="flex items-center gap-2 bg-white bg-opacity-15 backdrop-blur-sm border border-white border-opacity-20 rounded-xl px-4 py-2 text-white">
                    <i class="fas fa-check-circle text-green-200 text-sm"></i>
                    <span class="text-lg font-extrabold leading-none">{{ number_format($statistics['accepted_answers'] ?? 0) }}</span>
                    <span class="text-green-200 text-xs">Accepted</span>
                </div>
                <div class="flex items-center gap-2 bg-white bg-opacity-15 backdrop-blur-sm border border-white border-opacity-20 rounded-xl px-4 py-2 text-white">
                    <i class="fas fa-eye text-orange-200 text-sm"></i>
                    <span class="text-lg font-extrabold leading-none">{{ number_format($statistics['total_views'] ?? 0) }}</span>
                    <span class="text-orange-200 text-xs">Views</span>
                </div>
            </div>

            {{-- Real-time search bar --}}
            <div x-data="kbSearch()"
                 class="relative max-w-5xl mx-auto"
                 @click.outside="showDropdown = false">

                <form method="GET" action="{{ route('public.knowledge-base.search') }}" @submit="showDropdown = false">
                    <div class="relative">
                        <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 text-lg z-10"></i>
                        <input type="text"
                               name="q"
                               x-model="query"
                               @input.debounce.300ms="search()"
                               @focus="query.length >= 2 && (showDropdown = true)"
                               placeholder="Search for answers, guides, topics…"
                               class="w-full pl-12 pr-28 py-4 text-base rounded-2xl shadow-xl border-0 focus:ring-2 focus:ring-blue-400 bg-white text-gray-800">
                        <button type="submit"
                                class="absolute right-2 top-1/2 -translate-y-1/2 px-5 py-2 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition text-sm font-semibold">
                            Search
                        </button>
                    </div>
                </form>

                {{-- Dropdown results --}}
                <div x-show="showDropdown"
                     x-transition:enter="transition ease-out duration-150"
                     x-transition:enter-start="opacity-0 -translate-y-1"
                     x-transition:enter-end="opacity-100 translate-y-0"
                     class="absolute z-50 w-full bg-white rounded-2xl shadow-2xl mt-2 overflow-hidden border border-gray-100">
                    <div x-show="loading" class="p-4 text-center text-gray-400 text-sm">
                        <i class="fas fa-spinner fa-spin mr-2"></i>Searching…
                    </div>
                    <template x-if="!loading && results.length > 0">
                        <ul class="divide-y divide-gray-100 max-h-80 overflow-y-auto">
                            <template x-for="item in results" :key="item.url">
                                <li>
                                    <a :href="item.url" class="flex items-start gap-3 px-4 py-3 hover:bg-blue-50 transition">
                                        <div class="mt-0.5 w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center flex-shrink-0">
                                            <i class="fas fa-question text-blue-600 text-xs"></i>
                                        </div>
                                        <div class="min-w-0">
                                            <p class="text-sm font-semibold text-gray-800 truncate" x-text="item.title"></p>
                                            <p class="text-xs text-gray-500 mt-0.5 line-clamp-1" x-text="item.excerpt"></p>
                                            <span class="inline-block mt-1 text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full" x-text="item.category"></span>
                                        </div>
                                    </a>
                                </li>
                            </template>
                        </ul>
                    </template>
                    <template x-if="!loading && results.length === 0 && query.length >= 2">
                        <div class="p-5 text-center text-gray-500 text-sm">
                            <i class="fas fa-search text-gray-300 text-2xl mb-2 block"></i>
                            No results for "<span class="font-medium text-gray-700" x-text="query"></span>"
                        </div>
                    </template>
                </div>
            </div>

        </div>
    </div>

    {{-- Breadcrumb --}}
    <div class="bg-gray-50 border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
            <nav class="flex items-center space-x-2 text-sm text-gray-600" aria-label="Breadcrumb">
                <a href="{{ url('/') }}" class="hover:text-blue-600 transition flex items-center">
                    <i class="fas fa-home mr-1"></i>Home
                </a>
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <span class="text-gray-900 font-medium">Knowledge Base</span>
            </nav>
        </div>
    </div>

    {{-- ===== MAIN CONTENT ===== --}}
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">

            {{-- Left Sidebar — Categories --}}
            <div class="lg:col-span-1 order-2 lg:order-1">
                <div class="sticky top-4 space-y-6">

                    <div class="bg-theme-card rounded-2xl shadow-sm overflow-hidden">
                        <div class="bg-gradient-to-r from-purple-600 to-purple-700 px-4 py-3">
                            <h3 class="text-sm font-bold text-white flex items-center gap-2">
                                <i class="fas fa-folder-open"></i>Categories
                            </h3>
                        </div>
                        <ul class="divide-y divide-gray-100">
                            @forelse($categories as $category)
                                <li>
                                    <a href="{{ route('public.knowledge-base.category', $category->slug) }}"
                                       class="flex items-center justify-between p-3 hover:bg-theme-body transition {{ request('category_slug') === $category->slug ? 'bg-purple-50 border-l-4 border-purple-600' : '' }}">
                                        <div class="flex items-center gap-2">
                                            <i class="fas {{ $category->icon ?? 'fa-folder' }} {{ $category->color ? "text-{$category->color}-500" : 'text-purple-500' }} text-xs w-4"></i>
                                            <span class="text-theme-heading text-sm">{{ $category->name }}</span>
                                        </div>
                                        <span class="text-xs bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">
                                            {{ $category->questions_count ?? 0 }}
                                        </span>
                                    </a>
                                    @if($category->children->isNotEmpty())
                                        <ul class="ml-6 divide-y divide-gray-100 border-l border-gray-100">
                                            @foreach($category->children as $child)
                                                <li>
                                                    <a href="{{ route('public.knowledge-base.category', $child->slug) }}"
                                                       class="flex items-center justify-between p-2 text-sm hover:bg-theme-body transition">
                                                        <span class="text-theme-body text-xs">{{ $child->name }}</span>
                                                        <span class="text-xs text-gray-400">{{ $child->questions_count ?? 0 }}</span>
                                                    </a>
                                                </li>
                                            @endforeach
                                        </ul>
                                    @endif
                                </li>
                            @empty
                                <li class="p-4 text-center text-theme-body text-sm">No categories available</li>
                            @endforelse
                        </ul>
                    </div>

                    {{-- Difficulty Filter --}}
                    <div class="bg-theme-card rounded-2xl shadow-sm p-4">
                        <h3 class="text-sm font-bold text-theme-heading mb-3 flex items-center gap-2">
                            <i class="fas fa-signal text-blue-600"></i>Difficulty
                        </h3>
                        <div class="space-y-1">
                            @foreach(['beginner' => ['bg-green-500','green'], 'intermediate' => ['bg-yellow-500','yellow'], 'advanced' => ['bg-red-500','red']] as $level => [$dot, $color])
                                <a href="{{ route('public.knowledge-base.index', ['difficulty' => $level]) }}"
                                   class="flex items-center p-2 rounded-lg hover:bg-theme-body transition text-sm {{ request('difficulty') === $level ? "bg-{$color}-50 text-{$color}-700 font-semibold" : 'text-theme-body' }}">
                                    <span class="w-2.5 h-2.5 rounded-full {{ $dot }} mr-2"></span>
                                    {{ ucfirst($level) }}
                                </a>
                            @endforeach
                        </div>
                    </div>

                </div>
            </div>

            {{-- Main — Questions --}}
            <div class="lg:col-span-2 order-1 lg:order-2">

                @if($featuredQuestions->isNotEmpty() && !request()->has('q'))
                    <div class="mb-6">
                        <h2 class="text-sm font-bold text-theme-heading mb-3 flex items-center gap-2">
                            <span class="w-6 h-6 bg-yellow-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-star text-yellow-500 text-xs"></i>
                            </span>
                            Featured Questions
                        </h2>
                        <div class="space-y-3">
                            @foreach($featuredQuestions as $question)
                                @include('public.knowledge-base.partials.question-card', ['question' => $question, 'featured' => true])
                            @endforeach
                        </div>
                    </div>

                    {{-- Inward divider --}}
                    <div class="relative my-6">
                        <div class="absolute inset-0 flex items-center">
                            <div class="w-full border-t-2 border-gray-200" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);"></div>
                        </div>
                        <div class="relative flex justify-center">
                            <span class="bg-gray-50 px-4 py-1 text-xs font-semibold text-gray-400 uppercase tracking-widest rounded-full border border-gray-200 shadow-inner">
                                All Questions
                            </span>
                        </div>
                    </div>
                @endif

                {{-- Sort tabs (real-time — auto-submit on click) --}}
                <div class="bg-theme-card rounded-2xl shadow-sm mb-5 p-3">
                    <form method="GET" id="kbSortForm">
                        <input type="hidden" name="difficulty" value="{{ request('difficulty') }}">
                        <input type="hidden" name="category_slug" value="{{ request('category_slug') }}">
                        <div class="flex flex-wrap gap-2">
                            @foreach(['recent' => ['fa-clock','Recent'], 'popular' => ['fa-fire','Popular'], 'helpful' => ['fa-thumbs-up','Most Helpful'], 'unanswered' => ['fa-question','Unanswered']] as $key => [$icon, $label])
                                <button type="submit" name="sort" value="{{ $key }}"
                                        class="px-4 py-2 rounded-xl text-sm font-medium transition {{ request('sort', 'recent') === $key ? 'bg-blue-600 text-white shadow' : 'bg-theme-body text-theme-body hover:bg-opacity-80' }}">
                                    <i class="fas {{ $icon }} mr-1.5"></i>{{ $label }}
                                </button>
                            @endforeach
                        </div>
                    </form>
                </div>

                {{-- Questions list --}}
                <div class="space-y-4">
                    @forelse($questions as $question)
                        @include('public.knowledge-base.partials.question-card', ['question' => $question])
                    @empty
                        <div class="bg-theme-card rounded-2xl shadow-sm p-10 text-center">
                            <i class="fas fa-book text-5xl text-gray-200 mb-4 block"></i>
                            <h3 class="text-base font-semibold text-theme-heading mb-2">No questions found</h3>
                            <p class="text-theme-body text-sm mb-4">
                                @if(request('q'))
                                    No questions match your search. Try different keywords.
                                @elseif(request('category_slug'))
                                    No questions in this category yet.
                                @else
                                    Be the first to add a question!
                                @endif
                            </p>
                            @auth
                                @can('create knowledge base questions')
                                <a href="{{ route('knowledge-sharing.knowledge-base.create') }}"
                                   class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition text-sm font-semibold">
                                    <i class="fas fa-plus mr-2"></i>Add Question
                                </a>
                                @endcan
                            @endauth
                        </div>
                    @endforelse
                </div>

                @if($questions->hasPages())
                    <div class="mt-6">{{ $questions->links() }}</div>
                @endif
            </div>

            {{-- Right Sidebar --}}
            <div class="lg:col-span-1 order-3">
                <div class="sticky top-4 space-y-6">

                    {{-- Popular Questions --}}
                    <div class="bg-theme-card rounded-2xl shadow-sm overflow-hidden">
                        <div class="bg-gradient-to-r from-orange-500 to-orange-600 px-4 py-3">
                            <h3 class="text-sm font-bold text-white flex items-center gap-2">
                                <i class="fas fa-fire"></i>Popular Questions
                            </h3>
                        </div>
                        <ul class="divide-y divide-gray-100">
                            @foreach($popularQuestions as $question)
                                <li>
                                    <a href="{{ route('public.knowledge-base.show', $question->slug) }}"
                                       class="block p-3 hover:bg-theme-body transition">
                                        <h4 class="text-xs font-semibold text-theme-heading line-clamp-2 mb-1">{{ $question->title }}</h4>
                                        <div class="flex items-center text-xs text-gray-400 gap-3">
                                            <span><i class="fas fa-eye mr-1"></i>{{ number_format($question->view_count) }}</span>
                                            <span><i class="fas fa-thumbs-up mr-1"></i>{{ $question->helpful_count }}</span>
                                        </div>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>

                    {{-- Popular Tags --}}
                    <div class="bg-theme-card rounded-2xl shadow-sm p-4">
                        <h3 class="text-sm font-bold text-theme-heading mb-3 flex items-center gap-2">
                            <i class="fas fa-tags text-blue-600"></i>Popular Tags
                        </h3>
                        <div class="flex flex-wrap gap-2">
                            @foreach($tags as $tag => $count)
                                @if($count > 0)
                                    <a href="{{ route('public.knowledge-base.tag', $tag) }}"
                                       class="px-3 py-1 bg-theme-body text-theme-body rounded-full text-xs hover:bg-blue-100 hover:text-blue-700 transition">
                                        {{ $tag }} <span class="text-gray-400 ml-0.5">{{ $count }}</span>
                                    </a>
                                @endif
                            @endforeach
                        </div>
                    </div>

                    {{-- Quick Stats --}}
                    <div class="bg-theme-card rounded-2xl shadow-sm p-4">
                        <h3 class="text-sm font-bold text-theme-heading mb-3 flex items-center gap-2">
                            <i class="fas fa-chart-bar text-blue-600"></i>Quick Stats
                        </h3>
                        <div class="space-y-2 text-sm">
                            <div class="flex items-center justify-between">
                                <span class="text-theme-body text-xs">Questions this week</span>
                                <span class="font-semibold text-theme-heading">{{ $statistics['recent_questions'] ?? 0 }}</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-theme-body text-xs">Accepted answers</span>
                                <span class="font-semibold text-theme-heading">{{ $statistics['accepted_answers'] ?? 0 }}</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-theme-body text-xs">Featured content</span>
                                <span class="font-semibold text-theme-heading">{{ $statistics['featured_questions'] ?? 0 }}</span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>

    @push('scripts')
    <script>
    function kbSearch() {
        return {
            query: '{{ request('q', '') }}',
            results: [],
            showDropdown: false,
            loading: false,
            async search() {
                if (this.query.length < 2) {
                    this.results = [];
                    this.showDropdown = false;
                    return;
                }
                this.loading = true;
                this.showDropdown = true;
                try {
                    const res = await fetch(
                        `{{ route('public.knowledge-base.ajax-search') }}?q=${encodeURIComponent(this.query)}`,
                        { headers: { 'Accept': 'application/json' } }
                    );
                    const data = await res.json();
                    this.results = data.results ?? [];
                } catch(e) {
                    this.results = [];
                } finally {
                    this.loading = false;
                }
            }
        };
    }
    </script>
    @endpush

</x-site-layout>
