@if(count($articles) > 0)
<div class="mx-auto container mt-8">
    @php
    $onIndexPage = Route::currentRouteName() === 'knowledgebase.index';
    $displayedArticles = $onIndexPage ? $articles : $articles->take(3);
    @endphp

    {{-- Header Section --}}
    <div class="flex items-center justify-between mb-6">
        <div class="flex items-center gap-4">
            <div class="bg-success/10 text-success p-3 rounded-full shadow-md">
                <x-ri-book-open-fill class="size-6" />
            </div>
            <div>
                <h1 class="text-3xl font-bold text-color-base">{{ __('Documentation') }}</h1>
                <p class="text-color-muted text-sm">{{ __('Explore guides, runbooks, and product tutorials.') }}</p>
            </div>
        </div>
        <div class="hidden md:flex items-center gap-2 text-color-muted">
            <x-ri-time-fill class="size-4" />
            <span class="text-sm">{{ count($articles) }} {{ Str::plural('article', count($articles)) }}</span>
        </div>
    </div>

    {{-- Documentation Grid --}}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach($displayedArticles as $index => $article)
        <div class="relative group bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 border border-neutral/50 rounded-2xl shadow-lg hover:shadow-xl transform transition-all duration-300 hover:scale-[1.02] overflow-hidden animate-fade-in-up" style="animation-delay: {{ $index * 0.1 }}s;">
            {{-- Card Header --}}
            <div class="p-6 pb-4">
                <div class="flex items-start justify-between mb-3">
                    <div class="flex items-center gap-2">
                        <div class="size-2 bg-success rounded-full animate-pulse"></div>
                        <span class="inline-flex items-center gap-1 text-xs font-medium text-success uppercase tracking-wide">
                            <x-ri-book-open-fill class="size-3" />
                            {{ $article->category->name ?? __('General') }}
                        </span>
                    </div>
                    <div class="text-color-muted group-hover:text-success transition-colors duration-300">
                        <x-ri-arrow-right-up-fill class="size-4 transform transition-transform duration-300 group-hover:scale-110" />
                    </div>
                </div>

                <h2 class="text-xl font-bold text-color-base mb-3 group-hover:text-success transition-colors duration-300 line-clamp-2">
                    {{ $article->title }}
                </h2>

                <div class="text-color-muted text-sm mb-4 line-clamp-3 leading-relaxed">
                    {{ $article->description }}
                </div>
            </div>

            {{-- Card Footer --}}
            <div class="px-6 pb-6">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-2 text-color-muted text-xs">
                        <x-ri-calendar-fill class="size-3" />
                        <span>{{ optional($article->published_at)->format('M d, Y') ?? $article->created_at->format('M d, Y') }}</span>
                    </div>

                    <a href="{{ route('knowledgebase.show', $article) }}" wire:navigate class="group/btn inline-flex items-center gap-2 bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300 hover:shadow-lg hover:scale-105">
                        {{ __('general.view') }}
                        <x-ri-arrow-right-fill class="size-4 transform transition-transform duration-300 group-hover/btn:translate-x-1" />
                    </a>
                </div>
            </div>

            {{-- Hover Overlay --}}
            <div class="absolute inset-0 bg-gradient-to-br from-success/5 to-success/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        </div>
        @endforeach
    </div>

    @if(!$onIndexPage)
    {{-- View More Button --}}
    <div class="mt-10 text-center">
        <a href="{{ route('knowledgebase.index') }}" class="inline-flex items-center gap-2 bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:shadow-lg hover:scale-105">
            {{ __('View More Articles') }}
            <x-ri-arrow-right-line class="size-5 transform transition-transform duration-300 hover:translate-x-1" />
        </a>
    </div>
    @endif

    <style>
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fade-in-up {
            animation: fadeInUp 0.6s ease-out forwards;
            opacity: 0;
        }

        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .line-clamp-3 {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    </style>
</div>
@endif