@extends('layouts.public')

@section('title', 'Frequently Asked Questions - ' . ($settings['site_title'] ?? 'BANKING'))

@section('content')
<section class="public-page-hero">
    <div class="container">
        <h1 class="public-page-title">Frequently Asked Questions</h1>
        <p class="public-page-subtitle">Answers to the questions we hear most often</p>
    </div>
</section>

<section class="public-page-body">
    <div class="container container-narrow">
        @if(isset($faqs) && $faqs->count())
            <div class="public-accordion">
                @foreach($faqs as $index => $faq)
                <div class="public-accordion-item {{ $index === 0 ? 'open' : '' }}">
                    <button class="public-accordion-header" onclick="toggleFaq(this)">
                        <span>{{ $faq->question }}</span>
                        <svg class="public-accordion-icon" width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M5 7l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </button>
                    <div class="public-accordion-body">
                        <div class="public-accordion-content public-prose">
                            {!! nl2br(e($faq->answer)) !!}
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        @elseif(!empty($settings['faq_content']))
            <div class="public-content-card">
                <div class="public-prose">
                    {!! nl2br(e($settings['faq_content'])) !!}
                </div>
            </div>
        @else
            <div class="public-content-card">
                <p>No FAQs available right now. Please check back soon.</p>
            </div>
        @endif

        <div class="public-cta-inline">
            <h3>Still have questions?</h3>
            <p>Our support team is available 24/7 to help you.</p>
            <div class="public-cta-actions">
                <a href="{{ route('pages.contact') }}" class="btn btn-primary">Contact Support</a>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
function toggleFaq(btn) {
    var item = btn.parentElement;
    var wasOpen = item.classList.contains('open');
    document.querySelectorAll('.public-accordion-item.open').forEach(function(el) {
        el.classList.remove('open');
        el.querySelector('.public-accordion-body').style.maxHeight = null;
    });
    if (!wasOpen) {
        item.classList.add('open');
        var body = item.querySelector('.public-accordion-body');
        body.style.maxHeight = body.scrollHeight + 'px';
    }
}
document.querySelectorAll('.public-accordion-item.open').forEach(function(item) {
    var body = item.querySelector('.public-accordion-body');
    body.style.maxHeight = body.scrollHeight + 'px';
});
</script>
@endpush