<section class="generic-stats-panel w-full relative bg-white-pure">
    <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">
            <div class="grid-wrapper w-full flex flex-col justify-start items-start md:grid md:grid-cols-12 md:gap-8 lg:gap-12 xl:gap-16">
                <div class="left-wrapper w-full flex flex-col justify-start items-start md:col-span-6 lg:col-span-5 xl:col-span-4">
                    <h2 class="font-body text-brand-terracotta-aa font-semibold text-2xl lg:text-3xl">
                        {{ panel.header }}
                    </h2>
                    <div class="wysiwyg font-body prose max-w-none lg:prose-lg mt-3 lg:mt-4">
                        {{ panel.paragraph }}
                    </div>
                    {% if panel.buttons | length and panel.buttons[0].buttonText | length %}
                        <div class="buttons-wrapper-desktop w-full sm:w-auto flex-row justify-start items-start mt-6 md:mt-8 hidden md:flex">
                            {% for button in panel.buttons %}
                                {% include themeDir ~ '/_includes/_modules/_button' with {
                                    'buttonType': 'external-link',
                                    'buttonText': button.buttonText,
                                    'href': button.buttonLink,
                                    'title': button.buttonText,
                                    'theme': 'quinary',
                                    'newTab': button.newTab,
                                    'addClasses': '!w-full sm:!w-auto'
                                } %}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                <div class="right-wrapper w-full flex flex-col justify-start items-start md:col-span-6 lg:col-span-7 xl:col-span-8">
                    <div class="table-wrapper w-full flex flex-col justify-start items-start mt-6 sm:mt-8 md:mt-0 overflow-hidden">
                        {% for stat in panel.stats %}
                            {% if stat.header | length and stat.paragraph | length %}
                                <div class="stat-group-wrapper w-full flex flex-col justify-start items-start border-t border-mintyy-gray-iv border-solid last:border-b">
                                    <button class="stat-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 lg:text-xl font-medium text-brand-terracotta-aa">
                                            {{ stat.header }}
                                        </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 toggle the dropdown</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="stat-paragraph-wrapper w-full hidden">
                                        <div class="paragraph prose max-w-none pt-2 lg:pt-3 pb-4 lg:pb-6">
                                            {{ stat.paragraph }}
                                        </div>
                                        {% if stat.image.one() | length %}
                                            <div class="image-wrapper w-full rounded-xl lg:rounded-2xl overflow-hidden mb-4 lg:mb-6">
                                                <div class="aspect-wrapper w-full aspect-w-4 aspect-h-3 sm:aspect-w-5 sm:aspect-h-3 lg:aspect-w-7 lg:aspect-h-3">
                                                    {% for image in stat.image.all() %}
                                                        {% include themeDir ~ '/_includes/_modules/_optimized-image.twig' with
                                                            {
                                                                'containerStyles': '!absolute',
                                                                'imgStyles': '!w-full !h-full !object-cover !object-center'
                                                            }
                                                        %}
                                                    {% endfor %}
                                                </div>
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
                {% if panel.buttons | length and panel.buttons[0].buttonText | length %}
                    <div class="buttons-wrapper-mobile w-full flex flex-row justify-start items-start mt-6 md:hidden">
                        {% for button in panel.buttons %}
                            {% include themeDir ~ '/_includes/_modules/_button' with {
                                'buttonType': 'external-link',
                                'buttonText': button.buttonText,
                                'href': button.buttonLink,
                                'title': button.buttonText,
                                'theme': 'quinary',
                                'newTab': button.newTab,
                                'addClasses': '!w-full sm:!w-auto'
                            } %}
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</section>