{#
# FAQ Component
# Luxury accordion-style FAQ section
#
# Usage: 
#   {% include 'components/faq.twig' with { faqs: faqArray } %}
#   {% include 'components/faq.twig' with { block: block } %} - From page builder
#}

{% set topLabel = block is defined and block.plainText2|length ? block.plainText2 : null %}
{% set heading = block is defined and block.plainText|length ? block.plainText : null %}
{% set description = block is defined and block.textArea|length ? block.textArea : null %}

{# Get FAQs from block or passed directly #}
{% if block is defined %}
    {% set faqs = block.faqItems ?? [] %}
    {% if faqs and faqs.all is defined %}
        {% set faqs = faqs.all() %}
    {% endif %}
{% else %}
    {% set faqs = faqs ?? [] %}
{% endif %}

{% if faqs|length %}
<section class="section-luxury bg-beige-light relative overflow-hidden">
    <div class="container-default relative">
        {% if topLabel or heading or description %}
        <div class="section-heading">
            {% if topLabel %}
            <div class="flex items-center justify-center gap-4 mb-6">
                <div class="w-12 h-px bg-gold"></div>
                <p class="text-gold tracking-widest text-2xl font-medium font-body">{{ topLabel }}</p>
                <div class="w-12 h-px bg-gold"></div>
            </div>
            {% endif %}
            {% if heading %}
            <h2 class="text-navy italic">{{ heading }}</h2>
            {% endif %}
            {% if description %}
            <p class="text-charcoal-light max-w-2xl mx-auto mt-6 leading-relaxed">
                {{ description }}
            </p>
            {% endif %}
        </div>
        {% endif %}
        
        <!-- FAQ Accordion -->
        <div class="max-w-4xl mx-auto mt-16">
            <div class="faq-accordion space-y-4">
                {% for faq in faqs %}
                    {% set question = faq.question ?? faq.plainText ?? '' %}
                    {% set answer = faq.answer ?? faq.textArea ?? '' %}
                    {% if question %}
                    <div class="faq-item bg-white rounded-2xl shadow-elegant overflow-hidden border border-beige/50 hover:border-gold/30 transition-all duration-300">
                        <button 
                            class="faq-trigger w-full flex items-center justify-between p-6 lg:p-8 text-left group"
                            aria-expanded="false"
                            aria-controls="faq-{{ loop.index }}"
                        >
                            <h3 class="text-navy text-lg lg:text-xl font-semibold pr-8 group-hover:text-gold transition-colors">
                                {{ question }}
                            </h3>
                            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gold/10 flex items-center justify-center group-hover:bg-gold transition-all duration-300">
                                <svg class="w-5 h-5 text-gold transition-transform duration-300 faq-icon" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
                                </svg>
                            </div>
                        </button>
                        <div 
                            id="faq-{{ loop.index }}"
                            class="faq-content overflow-hidden max-h-0 transition-all duration-500 ease-out"
                        >
                            <div class="px-6 lg:px-8 pb-6 lg:pb-8">
                                <div class="prose prose-lg max-w-none
                                    prose-p:text-charcoal prose-p:leading-relaxed
                                    prose-ul:text-charcoal prose-ul:list-disc prose-ul:pl-6
                                    prose-ol:text-charcoal prose-ol:list-decimal prose-ol:pl-6
                                    prose-li:mb-2">
                                    {{ answer|raw }}
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
</section>

<!-- FAQ Accordion Script -->
<script>
(function() {
    function initFAQAccordions() {
        const faqItems = document.querySelectorAll('.faq-item');
        
        faqItems.forEach(item => {
            const trigger = item.querySelector('.faq-trigger');
            const content = item.querySelector('.faq-content');
            const icon = item.querySelector('.faq-icon');
            
            if (!trigger || !content) return;
            
            trigger.addEventListener('click', function() {
                const isOpen = item.classList.contains('open');
                const wasExpanded = trigger.getAttribute('aria-expanded') === 'true';
                
                // Close all other items (optional - remove if you want multiple open)
                if (!wasExpanded) {
                    faqItems.forEach(otherItem => {
                        if (otherItem !== item && otherItem.classList.contains('open')) {
                            const otherTrigger = otherItem.querySelector('.faq-trigger');
                            const otherContent = otherItem.querySelector('.faq-content');
                            const otherIcon = otherItem.querySelector('.faq-icon');
                            
                            otherItem.classList.remove('open');
                            otherTrigger.setAttribute('aria-expanded', 'false');
                            otherContent.style.maxHeight = '0';
                            if (otherIcon) {
                                otherIcon.style.transform = 'rotate(0deg)';
                            }
                        }
                    });
                }
                
                // Toggle current item
                if (wasExpanded) {
                    item.classList.remove('open');
                    trigger.setAttribute('aria-expanded', 'false');
                    content.style.maxHeight = '0';
                    if (icon) {
                        icon.style.transform = 'rotate(0deg)';
                    }
                } else {
                    item.classList.add('open');
                    trigger.setAttribute('aria-expanded', 'true');
                    content.style.maxHeight = content.scrollHeight + 'px';
                    if (icon) {
                        icon.style.transform = 'rotate(180deg)';
                    }
                }
            });
        });
    }
    
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initFAQAccordions);
    } else {
        initFAQAccordions();
    }
})();
</script>
{% endif %}