@extends('index')
@section('title', 'FAQ')

@section('content')
    @component('components.breadcrumb')
        <div data-aos="fade-right" class="text-center">
            <h1 class="display-4 fw-bold">Questions Fréquentes</h1>
            <p class="lead">Trouvez rapidement des réponses sur notre mouvement, nos actions et
                comment vous engager</p>
        </div>
    @endcomponent

    <!-- FAQ Section -->
    <section class="py-5">
        <div class="container">
            <div class="row justify-content-center">
                <!-- Main FAQ Content -->
                <div class="col-lg-10" data-aos="fade-up">
                    @if ($faqs->count() > 0)
                        <div class="accordion accordion-flush" id="faqAccordion">
                            @foreach ($faqs as $index => $faq)
                                <div
                                    class="accordion-item mb-3 shadow rounded-4 overflow-hidden border-start border-4 border-success">
                                    <h2 class="accordion-header" id="heading-{{ $faq->id }}">
                                        <button
                                            class="accordion-button d-flex justify-content-between align-items-center
                                            @if ($index !== 0) collapsed @endif"
                                            type="button" data-bs-toggle="collapse"
                                            data-bs-target="#collapse-{{ $faq->id }}"
                                            aria-expanded="{{ $index === 0 ? 'true' : 'false' }}"
                                            aria-controls="collapse-{{ $faq->id }}">

                                            <span class="fw-bold">{{ $faq->titre }}</span>
                                        </button>
                                    </h2>
                                    <div id="collapse-{{ $faq->id }}"
                                        class="accordion-collapse collapse @if ($index === 0) show @endif"
                                        aria-labelledby="heading-{{ $faq->id }}" data-bs-parent="#faqAccordion">
                                        <div class="accordion-body bg-light">
                                            <div class="d-flex gap-2 mb-3 float-end">
                                                <!-- Facebook -->
                                                <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(request()->fullUrl()) }}"
                                                    target="_blank" class="btn btn-primary btn-sm">
                                                    <i class="bi bi-facebook"></i>
                                                </a>

                                                <!-- Twitter/X -->
                                                <a href="https://twitter.com/intent/tweet?url={{ urlencode(request()->fullUrl()) }}&text={{ urlencode($faq->titre) }}"
                                                    target="_blank" class="btn btn-info btn-sm">
                                                    <i class="bi bi-twitter-x"></i>
                                                </a>

                                                <!-- LinkedIn -->
                                                <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ urlencode(request()->fullUrl()) }}"
                                                    target="_blank" class="btn btn-secondary btn-sm">
                                                    <i class="bi bi-linkedin"></i>
                                                </a>

                                                <!-- WhatsApp -->
                                                <a href="https://api.whatsapp.com/send?text={{ urlencode($faq->titre . ' ' . request()->fullUrl()) }}"
                                                    target="_blank" class="btn btn-success btn-sm">
                                                    <i class="bi bi-whatsapp"></i>
                                                </a>
                                            </div>
                                            {!! $faq->description !!}
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="alert alert-warning text-center shadow-sm rounded-4 py-4">
                            <i class="bi bi-exclamation-circle fs-4 me-2"></i>
                            Aucune FAQ n'est disponible pour le moment
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
@endsection