{% set faqMaxWidth = maxWidth == 'full' ? '100%' : (maxWidth|default('100%')) %}
<div class="faq-widget faq-style-{{ style }}" style="max-width: {{ faqMaxWidth }}; margin: 40px auto; padding: 0 20px;">
    {% for item in items %}
        <div class="faq-item" data-index="{{ loop.index0 }}">
            <div class="faq-question" onclick="toggleFAQItem(this, {{ allowMultiple ? 'true' : 'false' }})">
                <h3>{{ item.question }}</h3>
                <i class="fa-solid fa-chevron-down faq-icon" style="color: {{ iconColor }};"></i>
            </div>
            <div class="faq-answer {% if openFirst and loop.first %}active{% endif %}">
                <div class="faq-answer-content">
                    {{ item.answer|raw }}
                </div>
            </div>
        </div>
    {% endfor %}
</div>

<style>
.faq-widget {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.faq-item {
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-style-bordered .faq-item {
    background: white;
    border: 2px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.faq-style-minimal .faq-item {
    background: #f8fafc;
    border: none;
    box-shadow: none;
}

.faq-question {
    padding: 20px 24px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease;
    user-select: none;
}

.faq-question:hover {
    background-color: #f8fafc;
}

.faq-question h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    flex: 1;
}

.faq-icon {
    font-size: 14px;
    transition: transform 0.3s ease;
    margin-left: 16px;
    flex-shrink: 0;
}

.faq-question.active .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-answer.active {
    max-height: 1000px;
}

.faq-answer-content {
    padding: 0 24px 20px 24px;
    color: #64748b;
    line-height: 1.7;
}

@media (max-width: 768px) {
    .faq-question {
        padding: 16px 18px;
    }

    .faq-question h3 {
        font-size: 15px;
    }

    .faq-answer-content {
        padding: 0 18px 16px 18px;
    }
}
</style>

<script>
function toggleFAQItem(element, allowMultiple) {
    const faqItem = element.closest('.faq-item');
    const faqAnswer = faqItem.querySelector('.faq-answer');
    const isActive = element.classList.contains('active');

    // Si allowMultiple est false, fermer toutes les autres réponses
    if (!allowMultiple) {
        const allQuestions = document.querySelectorAll('.faq-question');
        const allAnswers = document.querySelectorAll('.faq-answer');

        allQuestions.forEach(q => q.classList.remove('active'));
        allAnswers.forEach(a => a.classList.remove('active'));
    }

    // Toggle l'item actuel
    if (!isActive) {
        element.classList.add('active');
        faqAnswer.classList.add('active');
    } else if (allowMultiple) {
        element.classList.remove('active');
        faqAnswer.classList.remove('active');
    }
}

// Ouvrir la première question si openFirst est true
document.addEventListener('DOMContentLoaded', function() {
    {% if openFirst %}
    const firstQuestion = document.querySelector('.faq-question');
    if (firstQuestion && !firstQuestion.classList.contains('active')) {
        firstQuestion.classList.add('active');
    }
    {% endif %}
});
</script>