@extends('layout.v2.app')

@section('og_title', 'Indonesia Travel Advice')
@section('og_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-20 pb-24">
        <div class="max-w-2xl">
            <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>
                Azra Insights
            </span>
            <h1 class="text-4xl sm:text-5xl font-semibold text-white leading-tight mb-4">
                Indonesia Travel Advice
            </h1>
            <p class="text-slate-300 text-base leading-relaxed">
                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.
            </p>
        </div>
 
        {{-- Search --}}
        <form method="GET" class="mt-8 max-w-lg">
            <div class="relative">
                <svg class="w-4 h-4 text-slate-400 absolute left-4 top-1/2 -translate-y-1/2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M17 11a6 6 0 11-12 0 6 6 0 0112 0z"/>
                </svg>
                <input type="text" name="search" value="{{ $search }}" placeholder="Search articles..."
                    class="w-full pl-11 pr-4 py-3 text-sm rounded-full border-0 bg-white/95 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-[#C9A227]">
            </div>
        </form>
    </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">
 
        {{-- Featured article --}}
        @if ($featured && !$search)
            <a href="{{ route('articles.show', $featured->slug) }}"
                class="group grid grid-cols-1 md:grid-cols-2 gap-0 bg-white rounded-2xl overflow-hidden border border-slate-200 hover:shadow-xl hover:shadow-slate-200/60 transition-shadow mb-12">
                <div class="relative aspect-[16/10] md:aspect-auto overflow-hidden bg-slate-100">
                    @if ($featured->thumbnail)
                        <img src="{{ asset($featured->thumbnail) }}" alt="{{ $featured->title }}"
                            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                    @endif
 
                    {{-- Stamp-style badge --}}
                    <div class="absolute bottom-4 left-4 w-16 h-16 rounded-full border-2 border-dashed border-white/80 flex items-center justify-center text-white bg-[#0A1F35]/70 backdrop-blur-sm">
                        <span class="text-[9px] font-bold tracking-widest uppercase leading-tight text-center">Featured</span>
                    </div>
                </div>
                <div class="p-8 flex flex-col justify-center">
                    @if ($featured->category_name)
                        <span class="inline-flex w-fit items-center gap-1.5 text-[11px] font-semibold tracking-wide text-[#8a6d1d] mb-3">
                            <span class="w-1.5 h-1.5 rounded-full bg-[#C9A227]"></span>
                            {{ strtoupper($featured->category_name) }}
                        </span>
                    @endif
                    <h2 class="text-2xl sm:text-3xl font-semibold text-[#0A1F35] leading-snug mb-3 group-hover:text-[#8a6d1d] transition-colors">
                        {{ $featured->title }}
                    </h2>
                    <p class="text-sm text-slate-500 leading-relaxed mb-4 line-clamp-3">
                        {{ $featured->excerpt ?: \Illuminate\Support\Str::limit(strip_tags($featured->content), 180) }}
                    </p>
                    <p class="text-xs text-slate-400 font-medium uppercase tracking-wide">
                        {{ \Carbon\Carbon::parse($featured->published_at ?? $featured->created_at)->translatedFormat('d M Y') }}
                    </p>
                </div>
            </a>
        @endif
 
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-10">
 
            {{-- Main --}}
            <div class="lg:col-span-3">
                @if ($search)
                    <p class="text-sm text-slate-500 mb-6">
                        Showing "<span class="font-semibold text-[#0A1F35]">{{ $search }}</span>"
                    </p>
                @endif
 
                @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="M21 21l-4.35-4.35M17 11a6 6 0 11-12 0 6 6 0 0112 0z"/>
                        </svg>
                        <p class="text-slate-500 text-sm">No articles found.</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">Categories</h3>
                    <ul class="space-y-1">
                        @foreach ($categories as $category)
                            <li>
                                <a href="{{ route('articles.category', $category->slug) }}"
                                    class="flex items-center justify-between px-3 py-2.5 rounded-lg text-sm text-slate-600 hover:bg-[#F5F6F8] hover:text-[#0A1F35] transition-colors group">
                                    <span class="flex items-center gap-2">
                                        <span class="w-1.5 h-1.5 rounded-full bg-[#C9A227] opacity-0 group-hover:opacity-100 transition-opacity"></span>
                                        {{ $category->name }}
                                    </span>
                                    <span class="text-xs text-slate-400">{{ $category->articles_count }}</span>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </aside>
        </div>
    </div>
</div>

@endsection