<div>
    {{-- Hero Section --}}
    <section class="relative h-[500px] flex items-center justify-center overflow-hidden">
        {{-- Background Image --}}
        <div class="absolute inset-0 z-0">
            <img src="https://images.pexels.com/photos/4057663/pexels-photo-4057663.jpeg" alt="Article Background"
                class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-black/40"></div>
        </div>

        {{-- Content --}}
        <div class="relative z-10 container mx-auto px-6 text-center">
            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">{{ $pageTitle }}</h1>
            <p class="text-white/80 text-lg md:text-xl max-w-2xl mx-auto mb-10">
                {{ $pageDesc }}
            </p>

            {{-- Search Bar --}}
            <div class="max-w-xl mx-auto relative group">
                <input wire:model.live.debounce.500="search" type="search" placeholder="Cari artikel..."
                    aria-label="Cari artikel"
                    class="w-full py-4 pl-6 pr-14 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-home-primary focus:bg-white/20 transition-all shadow-lg text-lg">
                <button
                    class="absolute right-2 top-2 bottom-2 w-10 h-10 bg-home-primary rounded-full flex items-center justify-center text-white hover:bg-white hover:text-home-primary transition-all duration-300">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </button>
            </div>
        </div>
    </section>

    <main class="px-6 lg:px-32 xl:px-48 py-24 bg-white text-black font-sans">
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-12">
            <section class="lg:col-span-3">
                {{-- Toolbar (Sort Only) --}}
                <div class="flex justify-start mb-10">
                    <div class="relative w-full md:w-auto">
                        <select wire:model.live="sort" aria-label="Urutkan Artikel"
                            class="appearance-none px-6 py-3 pr-10 rounded-xl border border-home-foreground/10 bg-white text-home-foreground font-medium focus:outline-none focus:ring-2 focus:ring-home-primary focus:border-transparent transition cursor-pointer min-w-[160px] shadow-sm">
                            <option value="">Urutkan</option>
                            <option value="latest">Terbaru</option>
                            <option value="Alphabetic">Alfabet</option>
                            <option value="views">Terpopuler</option>
                        </select>
                        <svg class="absolute right-4 top-4 w-4 h-4 text-home-foreground/50 pointer-events-none"
                            fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7">
                            </path>
                        </svg>
                    </div>
                </div>

                <div class="space-y-8">
                    @forelse($articles as $article)
                        <article
                            class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-xl hover:shadow-home-primary/5 hover:border-home-primary/20 transition-all duration-300 group">
                            <div class="flex flex-col sm:flex-row h-full">
                                <div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden relative">
                                    <img src="{{ $article->thumbnail }}" alt="{{ $article->title }}" loading="lazy"
                                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                    <div
                                        class="absolute inset-0 bg-home-primary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                    </div>
                                </div>
                                <div class="p-8 sm:w-3/5 flex flex-col justify-between">
                                    <div>
                                        <div class="flex items-center gap-3 mb-4 flex-wrap">
                                            @foreach ($article->categories->take(3) as $category)
                                                <span
                                                    class="text-xs font-bold text-home-primary bg-home-primary/10 px-3 py-1 rounded-full border border-home-primary/10 uppercase tracking-wider">
                                                    {{ $category->name }}
                                                </span>
                                            @endforeach

                                            @if ($article->categories->count() > 3)
                                                <span
                                                    class="text-xs font-bold text-home-foreground/50 px-3 py-1 rounded-full border border-home-foreground/10">
                                                    +{{ $article->categories->count() - 3 }}
                                                </span>
                                            @endif

                                            <span class="text-xs text-home-foreground/50 flex items-center gap-1">
                                                <svg class="w-3 h-3" fill="none" stroke="currentColor"
                                                    viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="2"
                                                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                                </svg>
                                                {{ ceil(str_word_count(strip_tags($article->content)) / 200) }} menit
                                                baca
                                            </span>
                                        </div>

                                        <h3
                                            class="text-2xl font-bold text-home-foreground mb-3 group-hover:text-home-primary transition-colors line-clamp-2 leading-tight">
                                            <a href="{{ route('article.show', $article->slug) }}" wire:navigate>
                                                {{ $article->title }}
                                            </a>
                                        </h3>
                                        <div class="text-base text-home-foreground/60 mb-4 line-clamp-6 leading-relaxed"
                                            style="text-align: justify !important;">
                                            {!! $article->excerpt !!}
                                        </div>
                                    </div>

                                    <div
                                        class="flex items-center justify-between pt-6 border-t border-home-foreground/5">
                                        <div class="flex items-center gap-3">
                                            <img src="https://ui-avatars.com/api/?name={{ urlencode($article->author?->employee?->full_name) }}&background=random&color=fff"
                                                alt="{{ $article->author?->employee?->full_name }}"
                                                class="w-9 h-9 rounded-full ring-2 ring-white shadow-sm">
                                            <div>
                                                <p class="text-sm font-bold text-home-foreground">
                                                    {{ $article->author?->employee?->full_name }}</p>
                                                <p class="text-xs text-home-foreground/50">
                                                    {{ formatDateLocalized($article->published_at) }}
                                                </p>
                                            </div>
                                        </div>
                                        <a href="{{ route('article.show', $article->slug) }}" wire:navigate
                                            class="w-10 h-10 rounded-full bg-home-foreground/5 flex items-center justify-center group-hover:bg-home-primary group-hover:text-white transition-all duration-300">
                                            <svg class="w-5 h-5 transition-transform group-hover:translate-x-0.5"
                                                fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                                            </svg>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </article>
                    @empty
                        @include('components.animations.lottie.not-found')
                    @endforelse
                </div>

                <div class="mt-16">
                    {{ $articles->links('livewire::custom-pagination') }}
                </div>
            </section>

            <aside class="lg:col-span-1">
                <div class="sticky top-32 space-y-8">

                    <nav class="bg-white rounded-2xl border border-home-foreground/10 p-8 shadow-sm">
                        <h3 class="text-lg font-bold text-home-primary mb-6 border-b border-home-foreground/5 pb-4">
                            Kategori</h3>
                        <div class="space-y-1">
                            <button wire:click="setCategory(null)"
                                class="w-full text-left px-4 py-3 rounded-xl transition-all text-sm font-medium flex justify-between items-center group {{ !$categorySlug ? 'bg-home-primary/10 text-home-primary' : 'text-home-foreground/70 hover:bg-home-primary/5 hover:text-home-primary' }}">
                                Semua Artikel
                                <span
                                    class="text-home-primary transition-all duration-300 {{ !$categorySlug ? 'translate-x-0 opacity-100' : '-translate-x-2 opacity-0 group-hover:translate-x-0 group-hover:opacity-100' }}">→</span>
                            </button>
                            @foreach ($categories as $category)
                                <button wire:click="setCategory('{{ $category['slug'] }}')"
                                    class="w-full text-left px-4 py-3 rounded-xl transition-all text-sm font-medium flex justify-between items-center group {{ $categorySlug === $category['slug'] ? 'bg-home-primary/10 text-home-primary' : 'text-home-foreground/70 hover:bg-home-primary/5 hover:text-home-primary' }}">
                                    {{ $category['name'] }}
                                    <span
                                        class="text-home-primary transition-all duration-300 {{ $categorySlug === $category['slug'] ? 'translate-x-0 opacity-100' : '-translate-x-2 opacity-0 group-hover:translate-x-0 group-hover:opacity-100' }}">→</span>
                                </button>
                            @endforeach
                        </div>
                    </nav>

                    <nav class="bg-white rounded-2xl border border-home-foreground/10 p-8 shadow-sm">
                        <h3 class="text-lg font-bold text-home-primary mb-6 border-b border-home-foreground/5 pb-4">
                            Populer</h3>
                        <div class="space-y-5">
                            @foreach ($popularArticles as $popular)
                                <a href="{{ route('article.show', $popular['slug']) }}" class="block group">
                                    <p
                                        class="text-sm font-bold text-home-foreground group-hover:text-home-primary transition-colors line-clamp-2 leading-snug">
                                        {{ $popular['title'] }}
                                    </p>
                                    <p
                                        class="text-xs text-home-foreground/40 mt-2 font-medium flex items-center gap-1">
                                        <svg class="w-3 h-3" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
                                            </path>
                                        </svg>
                                        {{ $popular['views'] }}x dilihat
                                    </p>
                                </a>
                                <div class="border-t border-home-foreground/5"></div>
                            @endforeach
                        </div>
                    </nav>

                    {{-- <section
                        class="bg-home-primary rounded-2xl p-8 text-center relative overflow-hidden group shadow-lg shadow-home-primary/20">
                        <div
                            class="absolute top-0 right-0 w-32 h-32 bg-home-secondary/20 rounded-full blur-2xl -mr-10 -mt-10">
                        </div>

                        <div class="relative z-10">
                            <div
                                class="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-4 text-white">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
                                    </path>
                                </svg>
                            </div>
                            <h3 class="text-xl font-bold text-white mb-2">Newsletter</h3>
                            <p class="text-sm text-white/80 mb-6 leading-relaxed">Dapatkan tips eksklusif dan artikel
                                terbaru langsung ke email Anda.</p>

                            <form onsubmit="event.preventDefault();" class="space-y-3">
                                <input type="email" placeholder="Email Anda..." required aria-label="Alamat Email"
                                    class="w-full py-3 px-4 rounded-xl border border-white/20 bg-white/10 text-white placeholder-white/50 text-sm focus:outline-none focus:bg-white/20 focus:border-home-secondary transition-all">
                                <button type="submit"
                                    class="w-full bg-home-secondary text-home-primary font-bold py-3 rounded-xl hover:bg-white transition-all duration-300 text-sm shadow-lg">Subscribe</button>
                            </form>
                        </div>
                    </section> --}}

                </div>
            </aside>

        </div>

    </main>
</div>

@assets
    <script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.8.5/dist/dotlottie-wc.js" type="module"></script>
@endassets
