@php
    $documents = [
        ['icon' => 'fa-id-card', 'title' => 'Personalized Card Application (KYC)', 'size' => '240 KB · PDF', 'cat' => 'Applications'],
        ['icon' => 'fa-building', 'title' => 'Corporate / Bulk Card Application', 'size' => '310 KB · PDF', 'cat' => 'Applications'],
        ['icon' => 'fa-triangle-exclamation', 'title' => 'Lost / Stolen Card Report Form', 'size' => '180 KB · PDF', 'cat' => 'Forms'],
        ['icon' => 'fa-rotate-left', 'title' => 'Refund Request Form', 'size' => '150 KB · PDF', 'cat' => 'Forms'],
        ['icon' => 'fa-user-graduate', 'title' => 'Student Discount Verification Form', 'size' => '120 KB · PDF', 'cat' => 'Forms'],
        ['icon' => 'fa-book', 'title' => 'Yatra Card User Guide', 'size' => '1.2 MB · PDF', 'cat' => 'Guides'],
        ['icon' => 'fa-map', 'title' => 'Partner Route Map', 'size' => '860 KB · PDF', 'cat' => 'Guides'],
        ['icon' => 'fa-file-contract', 'title' => 'Terms & Conditions', 'size' => '95 KB · PDF', 'cat' => 'Legal'],
        ['icon' => 'fa-shield-halved', 'title' => 'Privacy Policy', 'size' => '80 KB · PDF', 'cat' => 'Legal'],
    ];
    $docCategories = ['All', 'Applications', 'Forms', 'Guides', 'Legal'];
@endphp

@component('layouts.app', [
    'title' => 'Download Forms',
    'metaDescription' => 'Download Yatra Card forms and guides — KYC application, lost card report, refund request, and the user guide.',
])
    @include('partials.page-hero', [
        'eyebrow' => 'Support',
        'title' => 'Forms & Guides',
        'subtitle' => 'Everything you need on paper, in case you prefer it that way.',
    ])

    <section class="py-20 dark:bg-ink lg:py-28" x-data="{ activeCat: 'All', search: '' }">
        <div class="mx-auto max-w-4xl px-6">
            <div class="reveal mb-6">
                <div class="relative">
                    <i class="fa-solid fa-magnifying-glass absolute left-4 top-1/2 -translate-y-1/2 text-sm text-slate-400"></i>
                    <input type="text" x-model="search" placeholder="Search documents..."
                           class="w-full rounded-xl border border-slate-200 bg-white py-2.5 pl-10 pr-4 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-panel dark:text-white dark:focus:border-secondary">
                </div>
            </div>

            <div class="reveal mb-8 flex flex-wrap gap-2">
                @foreach ($docCategories as $cat)
                    <button type="button" @click="activeCat = '{{ $cat }}'"
                            :class="activeCat === '{{ $cat }}'
                                ? 'bg-primary text-white dark:bg-secondary'
                                : 'text-slate-500 hover:bg-primary/5 hover:text-primary dark:text-slate-400 dark:hover:bg-white/5 dark:hover:text-secondary'"
                            class="rounded-xl px-4 py-2 text-xs font-semibold transition duration-300">
                        {{ $cat }}
                    </button>
                @endforeach
            </div>

            <div class="reveal space-y-3">
                @foreach ($documents as $i => $doc)
                    <div x-show="(activeCat === 'All' || activeCat === '{{ $doc['cat'] }}') && '{{ strtolower(addslashes($doc['title'])) }}'.includes(search.toLowerCase())"
                         class="flex items-center justify-between gap-4 rounded-2xl border border-slate-100 bg-white p-5 shadow-sm transition duration-300 hover:-translate-y-0.5 hover:shadow-lg dark:border-white/10 dark:bg-panel"
                         style="transition-delay: {{ $i * 60 }}ms">
                        <div class="flex items-center gap-4">
                            <span class="grid h-11 w-11 flex-shrink-0 place-items-center rounded-xl bg-primary/10 text-primary dark:bg-secondary/10 dark:text-secondary">
                                <i class="fa-solid {{ $doc['icon'] }}"></i>
                            </span>
                            <div>
                                <p class="font-heading text-sm font-bold text-slate-900 dark:text-white">{{ $doc['title'] }}</p>
                                <p class="text-xs text-slate-500 dark:text-slate-400">{{ $doc['size'] }} &middot; {{ $doc['cat'] }}</p>
                            </div>
                        </div>
                        <button type="button"
                                data-toast-title="Download Started"
                                data-toast-message="{{ $doc['title'] }} will save to your device shortly."
                                data-toast-icon="fa-download"
                                class="flex-shrink-0 rounded-xl border border-slate-200 px-4 py-2.5 text-sm font-semibold text-slate-700 transition duration-300 hover:border-primary hover:text-primary dark:border-white/10 dark:text-slate-200 dark:hover:border-secondary dark:hover:text-secondary">
                            <i class="fa-solid fa-download mr-1.5"></i>Download
                        </button>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    @include('partials.home.cta')
@endcomponent