<x-layouts.site>
    <x-slot:title>Articles &amp; Guides</x-slot:title>
    <x-slot:description>Practical money articles for African life, budgeting, debt freedom, saving and investing, in plain language. Search, filter, read.</x-slot:description>

    <section class="relative overflow-hidden bg-mesh">
        <div class="blob -left-32 top-0 h-80 w-80 bg-wise-300/40" data-parallax="0.2" aria-hidden="true"></div>
        <div class="container-site relative py-16 md:py-20" data-hero>
            <div class="mx-auto max-w-2xl text-center">
                <p class="eyebrow justify-center" data-hero-item>Insights &amp; articles</p>
                <h1 class="mt-3 font-display text-display-sm font-bold text-navy-900 md:text-display" data-hero-item>Read something useful today</h1>
            </div>

            {{-- Search --}}
            <form method="GET" action="{{ route('blog') }}" class="mx-auto mt-8 max-w-3xl" data-hero-item>
                <div class="flex overflow-hidden rounded-full bg-white p-1.5 shadow-brand ring-1 ring-navy-100 transition focus-within:ring-wise-400">
                    <span class="grid w-12 place-items-center text-navy-400"><x-icon name="search" class="h-5 w-5" /></span>
                    <input type="search" name="q" value="{{ request('q') }}" placeholder="Search articles, debt, budget, investing…"
                           class="min-w-0 flex-1 border-0 bg-transparent text-navy-900 placeholder:text-navy-400 focus:ring-0">
                    @if (request('category'))<input type="hidden" name="category" value="{{ request('category') }}">@endif
                    <button type="submit" class="btn-accent btn-sm shrink-0">Search</button>
                </div>
            </form>

            {{-- Category chips + view toggle --}}
            <div class="mt-5 flex flex-wrap items-center justify-center gap-2" data-hero-item
                 x-data="{ view: localStorage.getItem('mw-blog-view') || 'grid', set(v) { this.view = v; localStorage.setItem('mw-blog-view', v); window.dispatchEvent(new CustomEvent('blog-view', { detail: v })) } }"
                 x-init="$nextTick(() => window.dispatchEvent(new CustomEvent('blog-view', { detail: view })))">
                <a href="{{ route('blog', request('q') ? ['q' => request('q')] : []) }}"
                   class="rounded-full px-4 py-1.5 text-sm font-bold transition {{ ! request('category') ? 'bg-navy-900 text-white' : 'bg-white text-navy-600 ring-1 ring-navy-200 hover:ring-wise-300' }}">All</a>
                @foreach ($categories as $cat)
                    <a href="{{ route('blog', array_filter(['category' => $cat, 'q' => request('q')])) }}"
                       class="rounded-full px-4 py-1.5 text-sm font-bold transition {{ request('category') === $cat ? 'bg-navy-900 text-white' : 'bg-white text-navy-600 ring-1 ring-navy-200 hover:ring-wise-300' }}">{{ $cat }}</a>
                @endforeach

                <span class="mx-2 hidden h-6 w-px bg-navy-200 sm:block"></span>
                <div class="flex items-center gap-1 rounded-full bg-white p-1 ring-1 ring-navy-200">
                    <button @click="set('grid')" :class="view === 'grid' ? 'bg-navy-900 text-white' : 'text-navy-400 hover:text-navy-700'"
                            class="grid h-8 w-8 place-items-center rounded-full transition" aria-label="Grid view">
                        <x-icon name="grid" class="h-4 w-4" />
                    </button>
                    <button @click="set('list')" :class="view === 'list' ? 'bg-navy-900 text-white' : 'text-navy-400 hover:text-navy-700'"
                            class="grid h-8 w-8 place-items-center rounded-full transition" aria-label="List view">
                        <x-icon name="list" class="h-4 w-4" />
                    </button>
                </div>
            </div>
        </div>
    </section>

    <section class="section bg-white pt-2" x-data="{ view: localStorage.getItem('mw-blog-view') || 'grid' }" @blog-view.window="view = $event.detail">
        <div class="container-site">
            @if ($posts->isEmpty())
                <div class="mx-auto max-w-md rounded-brand border-2 border-dashed border-navy-200 p-10 text-center">
                    <x-icon name="search" class="mx-auto h-8 w-8 text-navy-300" />
                    <p class="mt-3 font-display font-bold text-navy-700">Nothing matched{{ request('q') ? ' "'.request('q').'"' : '' }}</p>
                    <a href="{{ route('blog') }}" class="btn-ghost btn-sm mt-4">Clear filters</a>
                </div>
            @else
                {{-- GRID view --}}
                <div x-show="view === 'grid'" class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                    @foreach ($posts as $post)
                        <a href="{{ route('blog.show', $post) }}" class="card-glow group flex flex-col overflow-hidden p-0">
                            <div class="relative h-48 overflow-hidden">
                                <img src="{{ $post->coverUrl() }}" alt=""
                                     class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105">
                                @if ($post->category)
                                    <span class="absolute left-4 top-4 chip bg-white/90 backdrop-blur">{{ $post->category }}</span>
                                @endif
                            </div>
                            <div class="flex flex-1 flex-col p-7">
                                <h2 class="font-display text-lg font-bold leading-snug text-navy-900 transition group-hover:text-wise-600">{{ $post->title }}</h2>
                                <p class="mt-2 flex-1 text-sm leading-relaxed text-navy-600">{{ \Illuminate\Support\Str::limit($post->excerpt, 110) }}</p>
                                <div class="mt-4 flex items-center justify-between text-xs font-semibold text-navy-400">
                                    <span class="flex items-center gap-1.5"><x-icon name="calendar" class="h-3.5 w-3.5" /> {{ $post->published_at->format('j M Y') }}</span>
                                    <span class="inline-flex items-center gap-1 font-bold text-wise-600">
                                        Read <x-icon name="arrow-right" class="h-3.5 w-3.5 transition-transform group-hover:translate-x-1" />
                                    </span>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>

                {{-- LIST view --}}
                <div x-show="view === 'list'" x-cloak class="mx-auto max-w-4xl space-y-4">
                    @foreach ($posts as $post)
                        <a href="{{ route('blog.show', $post) }}" class="card-glow group flex gap-5 overflow-hidden p-0">
                            <div class="relative hidden w-52 shrink-0 overflow-hidden sm:block">
                                <img src="{{ $post->coverUrl() }}" alt=""
                                     class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105">
                            </div>
                            <div class="flex flex-1 flex-col justify-center p-6">
                                <div class="flex items-center gap-3 text-xs font-semibold text-navy-400">
                                    @if ($post->category)<span class="chip">{{ $post->category }}</span>@endif
                                    <span class="flex items-center gap-1.5"><x-icon name="calendar" class="h-3.5 w-3.5" /> {{ $post->published_at->format('j M Y') }}</span>
                                </div>
                                <h2 class="mt-2 font-display text-xl font-bold leading-snug text-navy-900 transition group-hover:text-wise-600">{{ $post->title }}</h2>
                                <p class="mt-1.5 text-sm leading-relaxed text-navy-600">{{ \Illuminate\Support\Str::limit($post->excerpt, 160) }}</p>
                            </div>
                            <div class="hidden items-center pr-6 md:flex">
                                <span class="grid h-10 w-10 place-items-center rounded-full bg-wise-50 text-wise-600 transition-transform group-hover:translate-x-1">
                                    <x-icon name="arrow-right" class="h-4 w-4" />
                                </span>
                            </div>
                        </a>
                    @endforeach
                </div>

                <div class="mt-10">{{ $posts->links() }}</div>
            @endif
        </div>
    </section>
</x-layouts.site>
