@extends('layouts.app')

@section('content')
<!-- Page Header -->
<section class="page-header py-5 bg-gradient-primary">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto text-center">
                <h1 class="display-5 fw-bold text-white mb-3">{{ __('pdftools.seo.faq.title') }}</h1>
                <p class="lead text-white-50 mb-0">{{ __('pdftools.seo.faq.description') }}</p>
            </div>
        </div>
    </div>
</section>

<!-- FAQ Content -->
<section class="faq-content py-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <div class="accordion" id="faqAccordion">
                    @foreach($faqs as $index => $faq)
                    <div class="accordion-item border-0 shadow-sm mb-3">
                        <h2 class="accordion-header">
                            <button class="accordion-button {{ $index > 0 ? 'collapsed' : '' }}" type="button" data-bs-toggle="collapse" data-bs-target="#faq{{ $index }}">
                                {{ $faq['question'] }}
                            </button>
                        </h2>
                        <div id="faq{{ $index }}" class="accordion-collapse collapse {{ $index === 0 ? 'show' : '' }}" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                {{ $faq['answer'] }}
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                
                <!-- Contact CTA -->
                <div class="text-center mt-5">
                    <p class="text-muted">{{ __('pdftools.faq.more_questions') }}</p>
                    <a href="{{ route('contact') }}" class="btn btn-primary">
                        <i class="fas fa-envelope me-2"></i>{{ __('pdftools.faq.contact_us') }}
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('styles')
<style>
.bg-gradient-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.accordion-button:not(.collapsed) {
    background-color: rgba(102, 126, 234, 0.1);
    color: var(--primary-color);
}

.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(102, 126, 234, 0.25);
}
</style>
@endpush