@extends('layouts.app')

@section('title', 'Frequently Asked Questions – Japanese Car Imports & Auctions | MotoSolution')

@section('content')
<div class="bg-[#0B0F19] py-12 text-slate-100" x-data="faqFilter()">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Header -->
        <div class="text-center max-w-3xl mx-auto mb-12">
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-widest bg-red-600/15 text-red-400 border border-red-500/30 mb-4">
                <i class="fa-solid fa-circle-question"></i> Knowledge Hub
            </span>
            <h1 class="text-3xl sm:text-5xl font-extrabold text-white tracking-tight font-heading leading-tight">
                Frequently Asked <span class="text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-amber-400">Questions</span>
            </h1>
            <p class="mt-4 text-slate-400 text-sm sm:text-base leading-relaxed">
                Everything you need to know about Japan live auctions, NBR customs tariffs, odometer certifications, and pre-order delivery timelines in Bangladesh.
            </p>

            <!-- Search Input -->
            <div class="mt-8 max-w-xl mx-auto relative">
                <i class="fa-solid fa-magnifying-glass absolute left-4 top-3.5 text-slate-400"></i>
                <input type="text" x-model="searchQuery" placeholder="Search questions (e.g. customs duty, auction sheet, warranty, hybrid)..." class="w-full bg-slate-900 border border-white/10 rounded-2xl pl-11 pr-4 py-3 text-white text-sm font-medium focus:border-red-500 focus:outline-none focus:ring-1 focus:ring-red-500 transition">
            </div>
        </div>

        <!-- Categories Filter -->
        <div class="flex flex-wrap justify-center gap-2 mb-10">
            <button type="button" @click="selectedCategory = 'all'" :class="selectedCategory === 'all' ? 'bg-red-600 text-white' : 'bg-slate-900 text-slate-300 border border-white/10 hover:bg-white/5'" class="px-4 py-2 rounded-xl text-xs font-bold transition">
                All Topics
            </button>
            <button type="button" @click="selectedCategory = 'auctions'" :class="selectedCategory === 'auctions' ? 'bg-red-600 text-white' : 'bg-slate-900 text-slate-300 border border-white/10 hover:bg-white/5'" class="px-4 py-2 rounded-xl text-xs font-bold transition">
                Japanese Auctions
            </button>
            <button type="button" @click="selectedCategory = 'costs'" :class="selectedCategory === 'costs' ? 'bg-red-600 text-white' : 'bg-slate-900 text-slate-300 border border-white/10 hover:bg-white/5'" class="px-4 py-2 rounded-xl text-xs font-bold transition">
                Customs & Landed Costs
            </button>
            <button type="button" @click="selectedCategory = 'shipping'" :class="selectedCategory === 'shipping' ? 'bg-red-600 text-white' : 'bg-slate-900 text-slate-300 border border-white/10 hover:bg-white/5'" class="px-4 py-2 rounded-xl text-xs font-bold transition">
                Shipping & Delivery
            </button>
            <button type="button" @click="selectedCategory = 'warranty'" :class="selectedCategory === 'warranty' ? 'bg-red-600 text-white' : 'bg-slate-900 text-slate-300 border border-white/10 hover:bg-white/5'" class="px-4 py-2 rounded-xl text-xs font-bold transition">
                Warranty & Registration
            </button>
        </div>

        <!-- Accordion FAQ Items -->
        <div class="space-y-3 mb-16">
            @foreach($faqs as $index => $faq)
                <div class="bg-slate-900 border border-white/10 rounded-2xl overflow-hidden transition" 
                     x-show="matchesFilter('{{ strtolower($faq->question . ' ' . $faq->answer . ' ' . $faq->category) }}', '{{ strtolower($faq->category) }}')"
                     x-data="{ open: {{ $index === 0 ? 'true' : 'false' }} }">
                    <button type="button" @click="open = !open" class="w-full px-6 py-4 text-left flex items-center justify-between gap-4 hover:bg-white/5 transition">
                        <div class="flex items-center gap-3">
                            <span class="w-6 h-6 rounded-lg bg-red-600/20 text-red-400 font-bold text-xs flex items-center justify-center shrink-0">
                                Q
                            </span>
                            <span class="font-bold text-white text-sm sm:text-base">{{ $faq->question }}</span>
                        </div>
                        <i class="fa-solid fa-chevron-down text-xs text-slate-400 transition-transform duration-300 shrink-0" :class="{'rotate-180': open}"></i>
                    </button>
                    <div x-show="open" x-collapse class="px-6 pb-5 pt-1 border-t border-white/5 text-slate-300 text-xs sm:text-sm leading-relaxed">
                        <p>{{ $faq->answer }}</p>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Still have questions? -->
        <div class="bg-gradient-to-r from-[#121826] to-[#1c1421] border border-white/10 rounded-3xl p-8 sm:p-10 text-center max-w-3xl mx-auto shadow-2xl">
            <h3 class="text-xl sm:text-2xl font-bold text-white font-heading mb-2">Have a question not listed here?</h3>
            <p class="text-slate-400 text-xs sm:text-sm max-w-md mx-auto mb-6">
                Our senior import specialists in Niketan are available right now to explain Japanese auction rules and evaluate specific vehicle options.
            </p>
            <div class="flex flex-wrap justify-center gap-4">
                <a href="https://wa.me/{{ config('motosolution.contact.whatsapp') }}?text=Hello%20MotoSolution,%20I%20have%20a%20question%20regarding%20Japanese%20car%20imports." target="_blank" class="px-6 py-3 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs shadow-lg transition flex items-center gap-2">
                    <i class="fa-brands fa-whatsapp text-sm"></i>
                    <span>Chat With Specialist</span>
                </a>
                <a href="{{ route('contact') }}" class="px-6 py-3 rounded-xl bg-white/10 hover:bg-white/15 text-white font-bold text-xs transition flex items-center gap-2">
                    <i class="fa-solid fa-envelope text-sm"></i>
                    <span>Contact Showroom</span>
                </a>
            </div>
        </div>

    </div>
</div>
@endsection

@section('scripts')
<script>
function faqFilter() {
    return {
        searchQuery: '',
        selectedCategory: 'all',

        matchesFilter(text, category) {
            // Check text search
            const queryMatch = !this.searchQuery || text.includes(this.searchQuery.toLowerCase());
            
            // Check category filter
            if (this.selectedCategory === 'all') {
                return queryMatch;
            }
            
            const categoryMatch = category.includes(this.selectedCategory);
            return queryMatch && categoryMatch;
        }
    };
}
</script>
@endsection