@extends('front.layout.master')
@section('title', "FAQ's | ")

@section('body')

<div class="max-w-[1400px] mx-auto px-4 lg:px-6 pt-5">
    <nav class="breadcrumb-row text-[12px] text-slate-500 flex items-center gap-1.5 leading-none">
        <a href="{{ url('/') }}" class="hover:text-brand-600">{{ __('Home') }}</a>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-slate-300 shrink-0"><path d="m9 6 6 6-6 6"/></svg>
        <span class="text-deep font-medium">{{ __("FAQ's") }}</span>
    </nav>

    <div class="mt-6 mb-8 text-center">
        <div class="w-16 h-16 mx-auto bg-brand-50 rounded-2xl grid place-items-center text-brand-600 mb-4">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01"/></svg>
        </div>
        <h1 class="font-display font-extrabold text-3xl lg:text-4xl">{{ __('staticwords.AllFAQs') }}</h1>
        <p class="text-slate-500 text-[15px] mt-2 max-w-xl mx-auto">{{ __('Find answers to the most common questions about our service.') }}</p>
    </div>
</div>

<section class="max-w-3xl mx-auto px-4 lg:px-6 pb-12">
    <div class="space-y-3" id="faqAccordion">
        @foreach($faqs as $key => $faq)
            <div class="bg-white rounded-2xl shadow-card overflow-hidden">
                <button type="button" class="faq-toggle w-full flex items-center justify-between gap-3 p-5 text-left hover:bg-slate-50 transition-colors" aria-expanded="{{ $key == 0 ? 'true' : 'false' }}" data-target="faq{{ $faq->id }}">
                    <span class="flex items-center gap-3 flex-1">
                        <span class="w-8 h-8 bg-brand-50 text-brand-600 rounded-lg grid place-items-center font-bold text-[13px] shrink-0">{{ $key + 1 }}</span>
                        <span class="font-semibold text-[15px]">{{ $faq->que }}</span>
                    </span>
                    <svg class="faq-chevron transition-transform shrink-0 {{ $key == 0 ? 'rotate-180' : '' }}" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
                </button>
                <div id="faq{{ $faq->id }}" class="faq-content {{ $key == 0 ? '' : 'hidden' }}">
                    <div class="px-5 pb-5 pt-1 text-[14px] text-slate-600 leading-relaxed border-t border-slate-100">{!! $faq->ans !!}</div>
                </div>
            </div>
        @endforeach
    </div>

    {{-- Still need help? --}}
    <div class="mt-8 bg-gradient-to-br from-brand-500 to-brand-700 text-white rounded-2xl p-7 text-center">
        <h3 class="font-display font-extrabold text-xl">{{ __('Still have questions?') }}</h3>
        <p class="text-white/80 mt-2 text-[14px]">{{ __("Can't find the answer you're looking for? We're here to help.") }}</p>
        <a href="{{ route('contact.us') }}" class="inline-flex items-center gap-2 mt-4 bg-white text-deep px-6 py-2.5 rounded-full font-semibold hover:bg-saffron transition-colors">
            {{ __('Contact us') }}
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
        </a>
    </div>
</section>

@endsection

@section('script')
<script>
document.querySelectorAll('.faq-toggle').forEach(function(btn){
    btn.addEventListener('click', function(){
        var targetId = this.getAttribute('data-target');
        var targetEl = document.getElementById(targetId);
        var chev = this.querySelector('.faq-chevron');
        var isOpen = !targetEl.classList.contains('hidden');

        // Close all
        document.querySelectorAll('.faq-content').forEach(function(c){ c.classList.add('hidden'); });
        document.querySelectorAll('.faq-chevron').forEach(function(c){ c.classList.remove('rotate-180'); });

        // Open clicked
        if (!isOpen) {
            targetEl.classList.remove('hidden');
            chev.classList.add('rotate-180');
        }
    });
});
</script>
@endsection