@extends('layout.v2.app')

@section('og_title', $category->name . ' — Indonesia Travel Advice')
@section('og_description', $category->description ?: 'Discover a wide range of engaging articles on travel destinations, travel tips, and the latest updates to help you plan an unforgettable vacation in Indonesia.')

@section('content')

{{-- Hero --}}
<section class="relative bg-[#0A1F35] overflow-hidden">
    <div class="absolute inset-0 opacity-[0.06]"
        style="background-image: radial-gradient(circle, #ffffff 1px, transparent 1px); background-size: 22px 22px;"></div>

    <div class="relative max-w-6xl mx-auto px-4 sm:px-6 pt-24 pb-20">
        {{-- Breadcrumb --}}
        <nav class="flex items-center gap-2 text-sm text-slate-400 mb-6">
            <a href="{{ route('articles.index') }}" class="hover:text-white transition-colors">Articles</a>
            <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
            <span class="text-white font-medium">{{ $category->name }}</span>
        </nav>

        <span class="inline-flex items-center gap-2 text-[#C9A227] text-xs font-semibold tracking-[0.2em] uppercase mb-4">
            <span class="w-6 h-px bg-[#C9A227]"></span>
            Category
        </span>
        <h1 class="text-4xl sm:text-5xl font-semibold text-white leading-tight mb-4">
            {{ $category->name }}
        </h1>
        @if ($category->description)
            <p class="text-slate-300 text-base leading-relaxed max-w-2xl">{{ $category->description }}</p>
        @endif
        <p class="text-slate-400 text-sm mt-3">{{ $articles->total() }} articles</p>
    </div>

    <svg class="relative block w-full text-[#F5F6F8]" viewBox="0 0 1440 48" fill="currentColor" preserveAspectRatio="none" style="height: 32px;">
        <path d="M0 48 C 480 0, 960 0, 1440 48 Z"></path>
    </svg>
</section>

<div class="bg-[#F5F6F8] min-h-screen">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 py-12">
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-10">

            {{-- Main --}}
            <div class="lg:col-span-3">
                @if ($articles->count())
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        @foreach ($articles as $article)
                            @include('articles.partials.card', ['article' => $article])
                        @endforeach
                    </div>
                @else
                    <div class="bg-white border border-slate-200 rounded-2xl py-16 text-center">
                        <svg class="w-12 h-12 mx-auto mb-3 text-slate-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                        </svg>
                        <p class="text-slate-500 text-sm">Belum ada artikel dalam kategori ini.</p>
                    </div>
                @endif

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

            {{-- Sidebar --}}
            <aside class="lg:col-span-1">
                <div class="bg-white border border-slate-200 rounded-2xl p-6 sticky top-6">
                    <h3 class="text-sm font-semibold text-[#0A1F35] uppercase tracking-wide mb-4">Kategori Lain</h3>
                    <ul class="space-y-1">
                        @foreach ($categories as $cat)
                            <li>
                                <a href="{{ route('articles.category', $cat->slug) }}"
                                    class="flex items-center justify-between px-3 py-2.5 rounded-lg text-sm transition-colors group {{ $cat->slug === $category->slug ? 'bg-[#0A1F35] text-white' : 'text-slate-600 hover:bg-[#F5F6F8] hover:text-[#0A1F35]' }}">
                                    <span class="flex items-center gap-2">
                                        <span class="w-1.5 h-1.5 rounded-full bg-[#C9A227] {{ $cat->slug === $category->slug ? 'opacity-100' : 'opacity-0 group-hover:opacity-100' }} transition-opacity"></span>
                                        {{ $cat->name }}
                                    </span>
                                    <span class="text-xs {{ $cat->slug === $category->slug ? 'text-slate-300' : 'text-slate-400' }}">{{ $cat->articles_count }}</span>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </aside>
        </div>
    </div>
</div>
@endsection