@php
    $topics = [
        ['icon' => 'fa-id-card', 'title' => 'Card Issues', 'desc' => 'Lost, damaged, or not reading correctly.', 'theme' => 'blue'],
        ['icon' => 'fa-money-bill-transfer', 'title' => 'Transaction Issues', 'desc' => 'Wrong fare deducted or failed recharge.', 'theme' => 'gold'],
        ['icon' => 'fa-user-check', 'title' => 'Account Verification', 'desc' => 'KYC status and document uploads.', 'theme' => 'teal'],
        ['icon' => 'fa-wallet', 'title' => 'Recharge & Wallet', 'desc' => 'Top-up methods and auto-reload.', 'theme' => 'purple'],
    ];
@endphp

@component('layouts.app', [
    'title' => 'Help Center',
    'metaDescription' => 'Fintech Help Center — guides, live chat, ticket support, and answers for card, transaction, and account issues.',
])
    @include('partials.page-hero', [
        'eyebrow' => 'Support',
        'title' => 'How Can We Help?',
        'subtitle' => 'Search our knowledge base, browse a topic, or reach a real person in minutes.',
    ])

    <section class="-mt-6 pb-16" x-data="{ topicSearch: '' }">
        <div class="reveal mx-auto max-w-xl px-6">
            <div class="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white px-5 py-4 shadow-lg dark:border-white/10 dark:bg-panel">
                <i class="fa-solid fa-magnifying-glass text-slate-400"></i>
                <input type="text" x-model="topicSearch" placeholder="Search for help articles..."
                       class="w-full bg-transparent text-sm text-slate-800 outline-none placeholder:text-slate-400 dark:text-white">
            </div>
        </div>

        <div class="mx-auto mt-10 max-w-7xl px-6 pb-4 dark:bg-ink">
            <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
                @foreach ($topics as $i => $topic)
                    <a href="#faq"
                       x-show="topicSearch === '' || '{{ strtolower(addslashes($topic['title'].' '.$topic['desc'])) }}'.includes(topicSearch.toLowerCase())"
                       class="glow-card glow-card--{{ $topic['theme'] }} reveal-scale group block"
                       style="transition-delay: {{ $i * 90 }}ms">
                        <span class="glow-card__glow" aria-hidden="true"></span>
                        <div class="glow-card__icon">
                            <i class="fa-solid {{ $topic['icon'] }}"></i>
                        </div>
                        <h3 class="glow-card__title mb-1 text-sm text-slate-900 dark:text-white">{{ $topic['title'] }}</h3>
                        <p class="text-xs leading-relaxed text-slate-500 dark:text-slate-400">{{ $topic['desc'] }}</p>
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    <section class="pb-20 dark:bg-ink lg:pb-28">
        <div class="mx-auto max-w-7xl px-6">
            <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                <button type="button"
                        data-toast-title="Live Chat Connecting..."
                        data-toast-message="An agent will be with you in under 2 minutes."
                        data-toast-icon="fa-comments"
                        class="flex items-center gap-4 rounded-2xl bg-gradient-to-br from-primary to-secondary p-6 text-left text-white shadow-lg transition duration-300 hover:scale-[1.02]">
                    <span class="grid h-12 w-12 flex-shrink-0 place-items-center rounded-xl bg-white/15"><i class="fa-solid fa-comments text-lg"></i></span>
                    <span>
                        <span class="block font-heading text-base font-bold">Start Live Chat</span>
                        <span class="block text-xs text-white/80">Average response time: 90 seconds</span>
                    </span>
                </button>
                <button type="button"
                        data-toast-title="Ticket Raised"
                        data-toast-message="Reference #YC-{{ rand(10000, 99999) }}. We'll email you an update within 24 hours."
                        data-toast-icon="fa-ticket"
                        class="flex items-center gap-4 rounded-2xl border border-slate-200 bg-white p-6 text-left shadow-sm transition duration-300 hover:-translate-y-0.5 hover:shadow-lg dark:border-white/10 dark:bg-panel">
                    <span class="grid h-12 w-12 flex-shrink-0 place-items-center rounded-xl bg-secondary/10 text-secondary-a11y dark:text-secondary"><i class="fa-solid fa-ticket text-lg"></i></span>
                    <span>
                        <span class="block font-heading text-base font-bold text-slate-900 dark:text-white">Raise a Ticket</span>
                        <span class="block text-xs text-slate-500 dark:text-slate-400">For issues that need investigation</span>
                    </span>
                </button>
            </div>
        </div>
    </section>

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