{# ======================================================================
   FAQ — bw_front (ComWeb Studio)
   Brief du 4/11/2026 : categories en H2 avec sommaire, pleine largeur, appel
   final. Questions et categories dans l'admin (module FAQ) ; les donnees
   FAQPage restent produites par faq/index.html.twig.
   Questions engagement, paiement, propriete et migration ajoutees en base le
   04/11/2026 (reponses de David).
   ====================================================================== #}
{% import 'client/_macros.html.twig' as m %}
{{ m.symbole_vague() }}

<section class="cw-page-head">
    <div class="container">
        <h1 class="cw-page-head__title">Vos questions, {{ m.vague('nos réponses') }}</h1>
        <p class="cw-page-head__lead">Ce qu'on nous demande le plus souvent avant de se lancer.</p>
        {% if groups|length > 1 %}
        <nav class="cw-sommaire" aria-label="Catégories de questions">
            <ol>
                {% for group in groups %}
                {% if group.category %}
                <li><a href="#{{ group.category.slug }}">{{ group.category.name }}</a></li>
                {% endif %}
                {% endfor %}
            </ol>
        </nav>
        {% endif %}
    </div>
</section>

<section class="cw-section cw-section--alt">
    <div class="container">
        <div class="cw-faq">
            {% if groups|length == 0 %}
                <p class="text-muted text-center py-5">Aucune question pour le moment.</p>
            {% endif %}
            {% for group in groups %}
            {% set id_groupe = group.category ? group.category.slug : 'general' %}
            <div class="cw-faq__groupe" id="{{ id_groupe }}">
                {% if group.category %}
                <h2 class="cw-faq__titre">{{ group.category.name }}</h2>
                {% endif %}
                <div class="accordion faq-accordion" id="faq-{{ id_groupe }}">
                    {% for faq in group.faqs %}
                    <div class="accordion-item" id="{{ faq.slug }}">
                        <h3 class="accordion-header">
                            <button class="accordion-button collapsed" type="button"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#faq-answer-{{ faq.id }}"
                                    aria-expanded="false"
                                    aria-controls="faq-answer-{{ faq.id }}">
                                {{ faq.question }}
                            </button>
                        </h3>
                        <div id="faq-answer-{{ faq.id }}" class="accordion-collapse collapse"
                             data-bs-parent="#faq-{{ id_groupe }}">
                            <div class="accordion-body content-body">
                                {{ faq.content|raw }}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<section class="home-cta">
    <div class="container text-center" data-controller="reveal">
        <h2 class="home-cta__title">Votre question n'est pas là ?</h2>
        <p class="home-cta__desc">On en parle autour d'un café, au téléphone ou en visio : 30 minutes, gratuit et sans engagement.</p>
        <a href="{{ m.lien_rdv() }}" class="btn btn-primary btn-lg" target="_blank" rel="noopener">Prendre rendez-vous<span class="visually-hidden"> (nouvel onglet)</span><span class="cw-arrow" aria-hidden="true">&rarr;</span></a>
        <p class="cw-cta__second">Ou <a href="{{ path('app_contact') }}">écrivez-moi</a>.</p>
    </div>
</section>