@php
    use App\Models\Faq;

    $faqs = Faq::whereNotNull('title')
        ->orderBy('id', 'asc')
        ->get();
@endphp

<!-- faq start -->
<div class="wc-faq-section container-fluid my-5">
    <div class="section-title text-center mb-5 wow fadeInUp" data-wow-delay="0.1s">
        <div class="sub-style">
            <h5 class="sub-title text-primary px-3">FREQUENTLY ASKED QUESTIONS</h5>
        </div>
        <h3 class="display-7 mb-4">Common Business & Compliance Queries</h3>
        <p class="mb-0 text-muted fs-6">
            Get answers to your most common questions about company registration, GST filing, tax compliance, and
            business setup.
        </p>
    </div>

    <div class="accordion wc-faq-accordion" id="wcFaqAccordion">
        @forelse($faqs as $key => $faq)
            <div class="card wc-faq-card">
                <div class="card-header wc-faq-header" id="faqHeading{{ $key }}">
                    <h5 class="mb-0">
                        <button class="btn btn-link wc-faq-btn {{ $key == 0 ? '' : 'collapsed' }}" data-bs-toggle="collapse"
                            data-bs-target="#collapse{{ $key }}" aria-expanded="{{ $key == 0 ? 'true' : 'false' }}"
                            aria-controls="collapse{{ $key }}">
                            {{ $faq->title ?? 'No Question Provided' }}
                        </button>
                    </h5>
                </div>
                <div id="collapse{{ $key }}" class="collapse {{ $key == 0 ? 'show' : '' }}"
                    data-bs-parent="#wcFaqAccordion">
                    <div class="card-body wc-faq-body">
                        {!! $faq->description ?? 'No Answer Available' !!}
                    </div>
                </div>
            </div>
        @empty
            <p class="text-center">No FAQs available at the moment.</p>
        @endforelse
    </div>
</div>
<!-- faq end -->