{% set allFAQs = craft.entries()
    .section('faqs')
    .faqFeatured(true)
    .limit(10)
%}

<section class="generic-feature-cta-panel w-full relative bg-brand-cream-viii">
    <div class="container-wrapper max-w-7xl mx-auto">
        <div class="padding-wrapper px-6 sm:px-8 lg:px-10 py-8 sm:py-10 lg:py-12 xl:py-16 2xl:py-20">
            <div class="content-wrapper w-full flex flex-col justify-start items-start sm:grid sm:grid-cols-12 sm:gap-6 lg:gap-8 xl:gap-12">
                <div class="left-wrapper w-full flex flex-col justify-center items-center sm:col-span-5 md:col-span-4">
                    <h2 class="cta-header font-body text-3xl lg:text-4xl text-brand-terracotta-aa font-bold">
                        {{ panel.header }}
                    </h2>
                    {% include themeDir ~ '/_includes/_modules/_button' with {
                        'buttonType': 'internal-link',
                        'buttonText': 'Get in touch',
                        'href': '/contact',
                        'title': 'Contact us now',
                        'theme': 'primary',
                        'addClasses': 'mt-6 lg:mt-8 !w-full sm:!w-auto'
                    } %}
                    {% include themeDir ~ '/_includes/_modules/_button' with {
                        'buttonType': 'internal-link',
                        'buttonText': 'Or call us on ' ~ ( globalPhoneNumber | length ? globalPhoneNumber : '0414 984 741' ),
                        'href': 'tel:' ~ ( globalPhoneNumber | length ? globalPhoneNumber : '+61414984741' ),
                        'title': 'Or call us on 0414 984 741',
                        'theme': 'septenary',
                        'addClasses': 'font-bold mt-4 !w-full sm:!w-auto'
                    } %}
                </div>
                <div class="right-wrapper w-full flex flex-col justify-start items-start sm:col-span-7 md:col-span-8 mt-8 sm:mt-0">
                    <div class="table-wrapper w-full bg-brand-cream-viii flex flex-col justify-start items-start overflow-hidden">
                        {% for faq in allFAQs %}
                            {% if faq.faqQuestion | length and faq.faqAnswer | length %}
                                <div class="faq-group-wrapper w-full flex flex-col justify-start items-start border-b border-mintyy-gray-iv border-solid last:border-0 sm:first:-mt-4 lg:first:-mt-6">
                                    <button class="faq-question-wrapper w-full flex flex-row justify-between items-center py-4 lg:py-6" title="Click to toggle the dropdown">
                                        <span class="font-body text-lg text-brand-terracotta-aaa text-left mr-6">
                                            {{ faq.faqQuestion }}
                                        </span>
                                        <span class="plus-icon-wrapper text-lg font-body w-4 h-4 flex justify-center items-center">
                                            <span class="sr-prompt sr-only">Click to open FAQ answer</span>
                                            <span class="plus-icon flex justify-center items-center transition-transform duration-300">
                                                <span class="w-4 h-px absolute bg-black-primary"></span>
                                                <span class="vertical-axis w-4 h-px absolute rotate-90 origin-center bg-black-primary"></span>
                                            </span>
                                        </span>
                                    </button>
                                    <div class="faq-answer-wrapper w-full bg-brand-cream-viii hidden">
                                        <div class="answer prose max-w-none pb-4 pt-2 lg:pb-6 lg:pt-3">
                                            {{ faq.faqAnswer }}
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                    <div class="link-wrapper w-full flex flex-col justify-start items-start mt-6 sm:mt-8">
                        {% include themeDir ~ '/_includes/_modules/_button' with {
                            'buttonType': 'internal-link',
                            'buttonText': 'See all Resources',
                            'href': '/resource-centre',
                            'title': 'See all Resources',
                            'theme': 'quinary'
                        } %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>