{% extends 'base.html.twig' %}

{% block body %}
    <div class="max-w-3xl mx-auto px-4 py-10">
        <h1 class="text-4xl font-bold text-center mb-10">Foire aux Questions</h1>

        <div class="faq-list space-y-4">
            {% for faq in faqs %}
                <div class="faq-item border border-gray-300 rounded-lg overflow-hidden">
                    <button class="faq-question w-full text-left p-4 bg-yellow-400 hover:bg-yellow-300 text-black font-semibold flex justify-between items-center">
                        {{ faq.question }}
                        <span class="arrow transition-transform duration-300">▼</span>
                    </button>
                    <div class="faq-answer p-4 hidden bg-white text-gray-700">
                        {{ faq.answer|raw }}
                    </div>
                </div>
            {% else %}
                <p class="text-center text-gray-500">Aucune question disponible pour le moment.</p>
            {% endfor %}
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const items = document.querySelectorAll('.faq-item');

            items.forEach(item => {
                const button = item.querySelector('.faq-question');
                const answer = item.querySelector('.faq-answer');
                const arrow = item.querySelector('.arrow');

                button.addEventListener('click', () => {
                    const isOpen = !answer.classList.contains('hidden');

                    // Ferme tout
                    document.querySelectorAll('.faq-answer').forEach(el => el.classList.add('hidden'));
                    document.querySelectorAll('.arrow').forEach(el => el.style.transform = 'rotate(0deg)');

                    if (!isOpen) {
                        answer.classList.remove('hidden');
                        arrow.style.transform = 'rotate(180deg)';
                    }
                });
            });
        });
    </script>
{% endblock %}