<x-layouts.site>
    <x-slot:title>Free Guides &amp; Resources</x-slot:title>
    <x-slot:description>Free downloadable money guides, debt freedom, first investments, emergency funds and group investing. Read like a book, download as PDF.</x-slot:description>

    <section class="relative overflow-hidden bg-mesh">
        <div class="blob -right-32 -top-20 h-96 w-96 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>The library</p>
                <h1 class="mt-3 font-display text-display-sm font-bold text-navy-900 md:text-display" data-hero-item>
                    Guides you can <span class="text-gradient">flip through</span>
                </h1>
                <p class="mx-auto mt-4 max-w-xl text-lg text-navy-600" data-hero-item>
                    Short, honest playbooks. Read them like a book right here, or take the PDF with you.
                </p>
            </div>

            {{-- Search + filters --}}
            <form method="GET" action="{{ route('resources') }}" 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 guides, debt, investing, chama…"
                           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>

            <div class="mt-5 flex flex-wrap items-center justify-center gap-2" data-hero-item>
                <a href="{{ route('resources', 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('resources', 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
            </div>
        </div>
    </section>

    <section class="section bg-white pt-2">
        <div class="container-site">
            @if ($guides->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') }}"</p>
                    <a href="{{ route('resources') }}" class="btn-ghost btn-sm mt-4">Clear search</a>
                </div>
            @else
                <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-4" data-gsap-stagger>
                    @foreach ($guides as $guide)
                        <a href="{{ route('resources.show', $guide) }}" class="group block" data-tilt="6">
                            {{-- Book cover --}}
                            <div class="relative aspect-[3/4] overflow-hidden rounded-r-2xl rounded-l-md shadow-brand-lg transition-all duration-300 group-hover:-translate-y-2 group-hover:shadow-2xl"
                                 style="box-shadow: -4px 0 0 0 #1c2b5f, -8px 0 0 0 #58b9e6, 0 25px 50px -12px rgb(28 43 95 / .3)">
                                <img src="{{ $guide->coverUrl() }}" alt="" class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105">
                                <div class="absolute inset-0 bg-gradient-to-t from-navy-950/90 via-navy-900/30 to-navy-950/20"></div>
                                <div class="absolute inset-x-0 top-0 p-4">
                                    <span class="text-[10px] font-extrabold uppercase tracking-[0.2em] text-wise-300">moneywise guides</span>
                                </div>
                                <div class="absolute inset-x-0 bottom-0 p-5">
                                    @if ($guide->category)
                                        <span class="chip mb-2 bg-wise-400 text-navy-950">{{ $guide->category }}</span>
                                    @endif
                                    <h2 class="font-display text-xl font-extrabold leading-tight text-white">{{ $guide->title }}</h2>
                                    <p class="mt-1.5 flex items-center gap-2 text-[11px] font-bold text-navy-200">
                                        <x-icon name="book-open" class="h-3.5 w-3.5 text-wise-300" /> {{ count($guide->pages) }} pages
                                        <x-icon name="download" class="ml-1 h-3.5 w-3.5 text-wise-300" /> {{ number_format($guide->download_count) }}
                                    </p>
                                </div>
                            </div>
                            <p class="mt-3 line-clamp-2 px-1 text-sm leading-relaxed text-navy-600">{{ $guide->description }}</p>
                            <span class="mt-2 inline-flex items-center gap-1 px-1 text-sm font-bold text-wise-600">
                                Read it <x-icon name="arrow-right" class="h-3.5 w-3.5 transition-transform group-hover:translate-x-1" />
                            </span>
                        </a>
                    @endforeach
                </div>
            @endif
        </div>
    </section>
</x-layouts.site>
