<section id="faq" class="faq">
    <div class="section-container">
        <h2>{{ t.faq.section_title }} <span class="accent-text">{{ t.faq.section_title_accent }}</span></h2>
        <p class="section-subtitle">
            {{ t.faq.section_subtitle }}
        </p>

        <div class="faq-container">
            {% for item in t.faq.items %}
            <div class="faq-item">
                <button class="faq-question" onclick="this.parentElement.classList.toggle('active')">
                    <span>{{ item.question }}</span>
                    <span class="faq-icon">+</span>
                </button>
                <div class="faq-answer">
                    <p>{{ item.answer }}</p>
                </div>
            </div>
            {% endfor %}
        </div>

        <div class="faq-footer">
            <p>
                {{ t.faq.footer_text }}
            </p>
            <a href="#contact" class="btn btn-secondary">
                {{ t.faq.footer_cta }} →
            </a>
        </div>
    </div>
</section>
