@extends('layouts.app')
@section('title', __('FAQ') . ' - ' . $settings->site_name)
@section('meta_description', __('Frequently asked questions about') . ' ' . $settings->site_name . '.')

@section('content')
<div class="be-hero py-5">
    <div class="container">
        <span class="be-eyebrow">{{__('Need help?')}}</span>
        <h1 class="be-section-title mt-2">{{__('Frequently Asked Questions')}}</h1>
    </div>
</div>

<div class="container py-5" style="max-width:800px;">
    @forelse ($faqs as $faq)
    <div class="be-card mb-3 p-4">
        <h5 class="fw-bold mb-2"><i class="bi bi-question-circle me-2 text-muted"></i>{{ $faq->question }}</h5>
        <p class="text-muted mb-0" style="white-space: pre-line;">{{ $faq->answer }}</p>
    </div>
    @empty
    <div class="be-panel text-center py-5">
        <p class="text-muted mb-0">{{__('No questions have been added yet')}}</p>
    </div>
    @endforelse

    <div class="be-panel text-center mt-4">
        <p class="mb-3">{{__('Still have a question?')}}</p>
        <a href="{{ route('contact') }}" class="btn be-btn-primary">{{__('Contact Us')}}</a>
    </div>
</div>
@endsection