@extends('layouts.app')

@section('title', block('faq.hero.title_meta', $isRtl ? 'الأسئلة الشائعة' : 'FAQ'))

@php
    $categoryMeta = [
        'general' => [
            'label'  => $isRtl ? 'أسئلة عامة' : 'General Questions',
            'icon'   => 'fa-solid fa-circle-info',
            'accent' => 'cat-blue',
        ],
        'eligibility' => [
            'label'  => $isRtl ? 'شروط الأهلية' : 'Eligibility',
            'icon'   => 'fa-solid fa-user-check',
            'accent' => 'cat-green',
        ],
        'personal' => [
            'label'  => $isRtl ? 'التمويل الشخصي' : 'Personal Finance',
            'icon'   => 'fa-solid fa-wallet',
            'accent' => 'cat-amber',
        ],
        'auto' => [
            'label'  => $isRtl ? 'تمويل السيارات' : 'Auto Finance',
            'icon'   => 'fa-solid fa-car',
            'accent' => 'cat-red',
        ],
        'mortgage' => [
            'label'  => $isRtl ? 'التمويل العقاري' : 'Mortgage',
            'icon'   => 'fa-solid fa-house',
            'accent' => 'cat-purple',
        ],
        'sme' => [
            'label'  => $isRtl ? 'تمويل الأعمال' : 'Business Finance',
            'icon'   => 'fa-solid fa-briefcase',
            'accent' => 'cat-teal',
        ],
        'security' => [
            'label'  => $isRtl ? 'الأمان والخصوصية' : 'Security & Privacy',
            'icon'   => 'fa-solid fa-shield-halved',
            'accent' => 'cat-dark',
        ],
    ];
    $defaultMeta = [
        'label'  => $isRtl ? 'عام' : 'General',
        'icon'   => 'fa-solid fa-circle-question',
        'accent' => 'cat-blue',
    ];
    $faqTotal = collect($faqs ?? [])->flatten()->count();
@endphp

@section('content')
<section class="page-header about-hero faq-hero">
    <div class="hero-shape hero-shape-1"></div>
    <div class="hero-shape hero-shape-2"></div>
    <div class="container">
        <div class="sama-license-row sama-license-row--hero mb-3" style="justify-content: center;">
            <img src="{{ asset('assets/img/central-bank.png') }}" alt="{{ $isRtl ? 'البنك المركزي السعودي (ساما)' : 'Saudi Central Bank (SAMA)' }}" class="sama-license-logo">
            <span class="badge badge-primary sama-pulse">
                <i class="fa-solid fa-bolt"></i>
                {{ $isRtl ? 'مرخص من البنك المركزي السعودي (ساما)' : 'Licensed by the Saudi Central Bank (SAMA)' }}
            </span>
        </div>
        <h1 class="font-weight-bold" style="font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.2;">
            {{ $page?->title ?? block('faq.hero.title', $isRtl ? 'إجاباتك بين يديك' : 'Your Answers, Right Here') }}
        </h1>
        <p class="text-muted" style="max-width: 720px; margin: 1.25rem auto 0; font-size: clamp(1.1rem, 2.2vw, 1.3rem); line-height: 1.8;">
            {{ block('faq.hero.subtitle', $isRtl
                ? 'إجابات واضحة لأكثر الأسئلة شيوعًا حول خدمات هوت سبوت لمقارنة التمويل.'
                : 'Clear answers to the most common questions about Hotspot’s financing comparison services.') }}
        </p>

    </div>
</section>

<section class="faq-section section">
    <div class="container">
        @forelse($faqs ?? [] as $category => $items)
            @php
                $key  = $category ?: 'general';
                $meta = $categoryMeta[$key] ?? $defaultMeta;
            @endphp
            <div class="faq-category faq-category--{{ $meta['accent'] }}" data-faq-group>
                <div class="faq-category-header">
                    <div class="faq-category-icon {{ $meta['accent'] }}">
                        <i class="{{ $meta['icon'] }}"></i>
                    </div>
                    <div>
                        <h2>{{ $meta['label'] }}</h2>
                        <span class="faq-category-count">{{ $items->count() }} {{ $isRtl ? ($items->count() === 1 ? 'سؤال' : 'أسئلة') : ($items->count() === 1 ? 'question' : 'questions') }}</span>
                    </div>
                </div>

                <div class="faq-list">
                    @foreach($items as $faq)
                        <div class="faq-item" data-faq-item>
                            <button class="faq-question" type="button">
                                <span data-faq-question>{{ $faq->question }}</span>
                                <i class="fa-solid fa-chevron-down faq-icon"></i>
                            </button>
                            <div class="faq-answer">
                                <div data-faq-answer>{!! $faq->answer !!}</div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @empty
            <div class="faq-empty">
                <i class="fa-solid fa-circle-question"></i>
                <p class="text-muted">
                    {{ block('faq.list.empty', $isRtl ? 'لا توجد أسئلة متاحة حاليًا.' : 'No FAQs available at the moment.') }}
                </p>
            </div>
        @endforelse

        <div id="faq-no-results" class="faq-empty" style="display:none;">
            <i class="fa-solid fa-face-meh"></i>
            <p class="text-muted">{{ $isRtl ? 'لم نجد نتائج مطابقة لبحثك.' : 'We couldn’t find any matching results.' }}</p>
        </div>

        <div class="faq-cta">
            <div class="faq-cta-icon"><i class="fa-solid fa-headset"></i></div>
            <h3>{{ block('faq.cta.title', $isRtl ? 'لا تزال لديك أسئلة؟' : 'Still have questions?') }}</h3>
            <p class="text-muted">
                {{ block('faq.cta.subtitle', $isRtl ? 'لم تجد ما تبحث عنه؟ فريقنا هنا لمساعدتك في أي وقت.' : "Can't find what you're looking for? Our team is here to help anytime.") }}
            </p>
            <div class="faq-cta-actions">
                <a href="{{ url('/contact') }}" class="btn btn-primary">
                    <i class="fa-solid fa-envelope"></i>
                    {{ block('faq.cta.button', $isRtl ? 'اتصل بنا' : 'Contact Us') }}
                </a>
                <a href="{{ route('financing-request') }}" class="hero-cta-main mid-cta-bar faq-cta-main">
                    <span class="mid-cta-glow"></span>
                    <span class="mid-cta-content">
                        <i class="fa-solid fa-hand-pointer mid-cta-icon"></i>
                        <span class="mid-cta-text">{{ block('home.hero.cta_compare', $isRtl ? 'اطلب تمويلك الآن' : 'Request Your Financing Now') }}</span>
                        <i class="fa-solid fa-arrow-{{ $isRtl ? 'left' : 'right' }} mid-cta-arrow"></i>
                    </span>
                </a>
            </div>
        </div>
    </div>
</section>

<script>
(function () {
    var input = document.getElementById('faq-search');
    if (!input) return;
    var noResults = document.getElementById('faq-no-results');
    var groups = document.querySelectorAll('[data-faq-group]');

    input.addEventListener('input', function () {
        var term = this.value.trim().toLowerCase();
        var anyVisible = false;

        groups.forEach(function (group) {
            var items = group.querySelectorAll('[data-faq-item]');
            var groupHas = false;
            items.forEach(function (item) {
                var q = (item.querySelector('[data-faq-question]')?.textContent || '').toLowerCase();
                var a = (item.querySelector('[data-faq-answer]')?.textContent || '').toLowerCase();
                var match = !term || q.indexOf(term) !== -1 || a.indexOf(term) !== -1;
                item.style.display = match ? '' : 'none';
                if (match) groupHas = true;
            });
            group.style.display = groupHas ? '' : 'none';
            if (groupHas) anyVisible = true;
        });

        if (noResults) noResults.style.display = anyVisible ? 'none' : 'flex';
    });
})();
</script>
@endsection