{#
# FAQ Section Component
# FAQ accordion section with cream background
#
# Usage: 
#   {% include 'components/faq-section.twig' %} - Uses entry fields or defaults
#   {% include 'components/faq-section.twig' with { block: block } %} - From page builder
#}

{# Get data from block (pagebuilder) or entry fields. No default values – only show fields that have content. #}
{# Block from pagebuilder is an Entry (FAQ List type). Read faqsTitle, faqsDescription, faqs directly from block. #}
{% if block is defined %}
    {% set dataSource = block %}
    {% set blockTypeLayout = block.getFieldLayout() %}
    {% set faqListEntry = null %}
    {% if blockTypeLayout %}
        {% for handle in ['faqList', 'faqListEntry', 'faqSection', 'faqSectionEntry', 'faqsList', 'faqsSection'] %}
            {% if faqListEntry is null and blockTypeLayout.getFieldByHandle(handle) is not null %}
                {% set rel = attribute(block, handle, []) %}
                {% if rel and rel|length %}
                    {% set faqListEntry = rel.one() %}
                {% endif %}
            {% endif %}
        {% endfor %}
    {% endif %}
    {% if faqListEntry %}{% set dataSource = faqListEntry %}{% endif %}

    {# Title and description from dataSource (block or linked FAQ List entry) #}
    {% set _ft = (attribute(dataSource, 'faqsTitle', [])|default('')) ?: (attribute(dataSource, 'faqTitle', [])|default('')) %}
    {% set _fd = (attribute(dataSource, 'faqsDescription', [])|default('')) ?: (attribute(dataSource, 'faqDescription', [])|default('')) %}
    {% set faqTitle = _ft|length ? _ft : null %}
    {% set faqDescription = _fd|length ? _fd : null %}

    {# FAQs: same pattern as entry path – dataSource.faqs then .all() #}
    {% set _faqsVal = attribute(dataSource, 'faqs', []) %}
    {% if _faqsVal and _faqsVal|length %}
        {% set faqsFromCms = _faqsVal.all() %}
    {% else %}
        {% set faqsFromCms = [] %}
    {% endif %}

    {# CTA from block (optional) #}
    {% set ctaHeading = (blockTypeLayout.getFieldByHandle('faqCtaHeading') is not null and (attribute(block, 'faqCtaHeading', [])|default(''))|length) ? attribute(block, 'faqCtaHeading', []) : ((blockTypeLayout.getFieldByHandle('ctaHeading') is not null and (attribute(block, 'ctaHeading', [])|default(''))|length) ? attribute(block, 'ctaHeading', []) : null) %}
    {% set ctaDescription = (blockTypeLayout.getFieldByHandle('faqCtaDescription') is not null and (attribute(block, 'faqCtaDescription', [])|default(''))|length) ? attribute(block, 'faqCtaDescription', []) : ((blockTypeLayout.getFieldByHandle('ctaDescription') is not null and (attribute(block, 'ctaDescription', [])|default(''))|length) ? attribute(block, 'ctaDescription', []) : null) %}
    {% set primaryButtonText = (blockTypeLayout.getFieldByHandle('faqPrimaryButtonText') is not null and (attribute(block, 'faqPrimaryButtonText', [])|default(''))|length) ? attribute(block, 'faqPrimaryButtonText', []) : ((blockTypeLayout.getFieldByHandle('primaryButtonText') is not null and (attribute(block, 'primaryButtonText', [])|default(''))|length) ? attribute(block, 'primaryButtonText', []) : null) %}
    {% set primaryButtonUrl = (blockTypeLayout.getFieldByHandle('faqPrimaryButtonUrl') is not null and (attribute(block, 'faqPrimaryButtonUrl', [])|default(''))|length) ? attribute(block, 'faqPrimaryButtonUrl', []) : ((blockTypeLayout.getFieldByHandle('primaryButtonUrl') is not null and (attribute(block, 'primaryButtonUrl', [])|default(''))|length) ? attribute(block, 'primaryButtonUrl', []) : null) %}
    {% set secondaryButtonText = (blockTypeLayout.getFieldByHandle('faqSecondaryButtonText') is not null and (attribute(block, 'faqSecondaryButtonText', [])|default(''))|length) ? attribute(block, 'faqSecondaryButtonText', []) : ((blockTypeLayout.getFieldByHandle('secondaryButtonText') is not null and (attribute(block, 'secondaryButtonText', [])|default(''))|length) ? attribute(block, 'secondaryButtonText', []) : null) %}
    {% set secondaryButtonUrl = (blockTypeLayout.getFieldByHandle('faqSecondaryButtonUrl') is not null and (attribute(block, 'faqSecondaryButtonUrl', [])|default(''))|length) ? attribute(block, 'faqSecondaryButtonUrl', []) : ((blockTypeLayout.getFieldByHandle('secondaryButtonUrl') is not null and (attribute(block, 'secondaryButtonUrl', [])|default(''))|length) ? attribute(block, 'secondaryButtonUrl', []) : null) %}
    {% set showSecondaryButton = (blockTypeLayout.getFieldByHandle('faqShowSecondaryButton') is not null) ? attribute(block, 'faqShowSecondaryButton', []) : ((blockTypeLayout.getFieldByHandle('showSecondaryButton') is not null) ? attribute(block, 'showSecondaryButton', []) : false) %}
{% else %}
    {% set fieldLayout = entry.getFieldLayout() %}
    {% set hasFaqTitle = fieldLayout.getFieldByHandle('faqTitle') is not null %}
    {% set hasFaqDescription = fieldLayout.getFieldByHandle('faqDescription') is not null %}
    {% set hasFaqs = fieldLayout.getFieldByHandle('faqs') is not null %}
    {% set hasFaqCtaHeading = fieldLayout.getFieldByHandle('faqCtaHeading') is not null %}
    {% set hasFaqCtaDescription = fieldLayout.getFieldByHandle('faqCtaDescription') is not null %}
    {% set hasFaqPrimaryButtonText = fieldLayout.getFieldByHandle('faqPrimaryButtonText') is not null %}
    {% set hasFaqPrimaryButtonUrl = fieldLayout.getFieldByHandle('faqPrimaryButtonUrl') is not null %}
    {% set hasFaqSecondaryButtonText = fieldLayout.getFieldByHandle('faqSecondaryButtonText') is not null %}
    {% set hasFaqSecondaryButtonUrl = fieldLayout.getFieldByHandle('faqSecondaryButtonUrl') is not null %}
    {% set hasFaqShowSecondaryButton = fieldLayout.getFieldByHandle('faqShowSecondaryButton') is not null %}
    
    {% set faqTitle = (hasFaqTitle and entry.faqTitle|length) ? entry.faqTitle : null %}
    {% set faqDescription = (hasFaqDescription and entry.faqDescription|length) ? entry.faqDescription : null %}
    {% set faqsFromCms = (hasFaqs and entry.faqs|length) ? entry.faqs.all() : [] %}
    {% set ctaHeading = (hasFaqCtaHeading and entry.faqCtaHeading|length) ? entry.faqCtaHeading : null %}
    {% set ctaDescription = (hasFaqCtaDescription and entry.faqCtaDescription|length) ? entry.faqCtaDescription : null %}
    {% set primaryButtonText = (hasFaqPrimaryButtonText and entry.faqPrimaryButtonText|length) ? entry.faqPrimaryButtonText : null %}
    {% set primaryButtonUrl = (hasFaqPrimaryButtonUrl and entry.faqPrimaryButtonUrl|length) ? entry.faqPrimaryButtonUrl : null %}
    {% set secondaryButtonText = (hasFaqSecondaryButtonText and entry.faqSecondaryButtonText|length) ? entry.faqSecondaryButtonText : null %}
    {% set secondaryButtonUrl = (hasFaqSecondaryButtonUrl and entry.faqSecondaryButtonUrl|length) ? entry.faqSecondaryButtonUrl : null %}
    {% set showSecondaryButton = (hasFaqShowSecondaryButton) ? entry.faqShowSecondaryButton : false %}
{% endif %}

{# Only use CMS FAQs – no default/placeholder FAQs #}
{% set faqs = faqsFromCms %}

{% if faqTitle or faqDescription or faqs|length or ctaHeading or ctaDescription or primaryButtonText or (showSecondaryButton and secondaryButtonText and secondaryButtonUrl) %}
<section class="" style="background-color: #FFFAF7;">
    <div class="container-default">
        <!-- Top Divider -->
        <div class="w-24 h-px bg-gradient-to-r from-transparent via-cream/40 to-transparent mb-20 mx-auto"></div>
        
        <!-- Header -->
        {% if faqTitle or faqDescription %}
        <div class="text-center mb-16 max-w-3xl mx-auto">
            {% if faqTitle %}
            <h2 class="text-navy text-2xl md:text-4xl lg:text-5xl font-heading mb-4 font-light" style="letter-spacing: 0.3px;">{{ faqTitle }}</h2>
            <div class="w-24 h-px bg-gradient-to-r from-transparent via-cream/40 to-transparent mx-auto mb-6"></div>
            {% endif %}
            {% if faqDescription %}
            <p class="text-charcoal-light text-sm md:text-base" style="line-height: 1.7;">{{ faqDescription }}</p>
            {% endif %}
        </div>
        {% endif %}
        
        <!-- FAQ Container -->
        {% if faqs|length %}
        <div class="max-w-4xl mx-auto mb-16">
            <div class="space-y-6">
                {% for faq in faqs %}
                    {# Handle both CMS Matrix blocks and default array structure #}
                    {% set faqQuestion = faq.question is defined ? faq.question : (faq.faqQuestion is defined ? faq.faqQuestion : '') %}
                    {% set faqAnswer = faq.answer is defined ? faq.answer : (faq.faqAnswer is defined ? faq.faqAnswer : '') %}
                    {% if faqQuestion %}
                    <div class="overflow-hidden border-b border-cream/30 last:border-0">
                        <button class="w-full px-6 py-6 text-left flex items-center justify-between group faq-toggle hover:bg-cream/10 transition-all duration-300 rounded-lg" onclick="this.nextElementSibling.classList.toggle('hidden'); this.querySelector('.faq-icon').classList.toggle('rotate-180'); this.querySelector('.faq-icon').classList.toggle('opacity-0'); this.querySelector('.faq-icon-minus').classList.toggle('opacity-0'); this.querySelector('.faq-icon-minus').classList.toggle('opacity-100');">
                            <span class="font-heading font-light group-hover:text-gold transition-colors pr-4 flex-1 text-[20px] md:text-[26px] lg:text-[30px]" style="letter-spacing: 0.15em; color:#22313E;">{{ faqQuestion }}</span>
                            <div class="w-10 h-10 rounded-full bg-cream/60 flex items-center justify-center group-hover:bg-gold/20 transition-colors flex-shrink-0 relative">
                                <svg class="w-5 h-5 text-navy group-hover:text-gold faq-icon transition-all duration-300 absolute" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                                </svg>
                                <svg class="w-5 h-5 text-navy group-hover:text-gold faq-icon-minus transition-all duration-300 absolute opacity-0" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6"/>
                                </svg>
                            </div>
                        </button>
                        <div class="hidden px-6 pb-7">
                            <div class="pt-3 prose prose-base max-w-none" style="line-height: 1.75; font-size: 18px; color:#000000;">
                                {{ faqAnswer|raw }}
                            </div>
                        </div>
                    </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
        {% endif %}
        
        <!-- Contact CTA Box -->
        {% if ctaHeading or ctaDescription or (primaryButtonText and primaryButtonUrl) or (showSecondaryButton and secondaryButtonText and secondaryButtonUrl) %}
        <div class="max-w-4xl mx-auto text-center">
            {% if ctaHeading %}
            <h3 class="text-navy font-heading text-xl lg:text-2xl mb-6 font-light" style="letter-spacing: 0.2px;">{{ ctaHeading }}</h3>
            {% endif %}
            {% if ctaDescription %}
            <p class="text-charcoal-light mb-10 text-base" style="line-height: 1.7;">{{ ctaDescription }}</p>
            {% endif %}
            {% if (primaryButtonText and primaryButtonUrl) or (showSecondaryButton and secondaryButtonText and secondaryButtonUrl) %}
            <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                {% if primaryButtonText and primaryButtonUrl %}
                <a href="{{ primaryButtonUrl }}" class="btn-gold-lg inline-flex items-center justify-center group">
                    <span>{{ primaryButtonText }}</span>
                    <svg class="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                    </svg>
                </a>
                {% endif %}
                {% if showSecondaryButton and secondaryButtonText and secondaryButtonUrl %}
                <a href="{{ secondaryButtonUrl }}" class="btn-outline inline-flex items-center justify-center group">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                    </svg>
                    <span>{{ secondaryButtonText }}</span>
                </a>
                {% endif %}
            </div>
            {% endif %}
        </div>
        {% endif %}
    </div>
</section>
{% endif %}