@extends('layouts.app')
@section('title','Help Center')
@section('header-left')
<div><h3 class="text-lg font-bold">Help Center & FAQ</h3></div>
@endsection
@section('content')
<div class="max-w-2xl mx-auto">
    <div class="glass-card rounded-3xl p-8 mb-8">
        <div class="text-center mb-10">
            <div class="w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <span class="material-symbols-outlined text-primary text-3xl">help</span>
            </div>
            <h2 class="text-2xl font-black text-white">How can we help you?</h2>
            <p class="text-slate-400 text-sm mt-2">Everything you need to know about Vicdan Exchange</p>
        </div>
        <div class="space-y-3">
            @foreach($faqs as $i => $faq)
            <div x-data="{open:false}" class="border border-white/10 rounded-2xl overflow-hidden">
                <button @click="open=!open" class="w-full flex items-center justify-between px-5 py-4 text-left hover:bg-white/3 transition-colors">
                    <span class="font-medium text-sm text-white">{{ $faq['q'] }}</span>
                    <span class="material-symbols-outlined text-slate-400 transition-transform duration-200" :class="open ? 'rotate-180' : ''">expand_more</span>
                </button>
                <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 transform -translate-y-1" x-transition:enter-end="opacity-100 transform translate-y-0" class="px-5 pb-4 text-slate-400 text-sm leading-relaxed">
                    {{ $faq['a'] }}
                </div>
            </div>
            @endforeach
        </div>
    </div>
    <div class="glass-card rounded-2xl p-8 text-center bg-gradient-to-br from-primary/10 to-transparent">
        <h4 class="font-bold text-lg text-white mb-2">Still have questions?</h4>
        <p class="text-slate-400 text-sm mb-5">Start a support chat on any of your active orders.</p>
        <a href="{{ route('user_dashboard') }}" class="px-6 py-3 bg-primary text-white rounded-xl font-bold text-sm hover:bg-primary/90 transition-all inline-flex items-center gap-2">
            <span class="material-symbols-outlined text-sm">chat_bubble</span> Go to Dashboard
        </a>
    </div>
</div>
@endsection
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
@endpush