{{ partial:components/section id="social-quiz" :bg-color="background.color" :bg-image="background.image ? background.image[0] : null" :max-width="options.max_content_width" :extra-padding="options.extra_section_padding" :class="options.custom_class_name" }}
    <div
        x-data="{
            answers: {},

            winningPersonalityKey: null,

            determineIsComplete() {
                const winningPersonality = { key: '', count: 0 };
                const personalityCounts = {};
                let answeredQuestionsCount = 0;

                Object.entries(this.answers).forEach(([i, personality]) => {
                     personalityCounts[personality] = personalityCounts[personality] ? personalityCounts[personality] + 1 : 1;

                     if(personalityCounts[personality] > winningPersonality.count) {
                        winningPersonality.key = personality;
                        winningPersonality.count = personalityCounts[personality];
                     }

                     answeredQuestionsCount++;
                });

                if(answeredQuestionsCount === {{ questions|count }}) {
                    this.winningPersonalityKey = winningPersonality.key;
                    setTimeout(() => scrollToElementTop(this.$refs['personality-' + this.winningPersonalityKey], -20), 500);
                }
            },

            resetQuiz() {
                this.answers = {};
                this.winningPersonalityKey = null;
                scrollToElementTop(document.getElementById('social-quiz'));
            }
        }"
    >
        <div x-show="!winningPersonalityKey" x-collapse.duration.300ms>
            {{ questions }}
                {{ question_index = index }}
                <div x-ref="quiz-question-{{ question_index }}" class="pb-20 md:text-left last:pb-0">
                    <h3 class="text-sm font-bold uppercase opacity-60">Question {{ count }}/{{ questions|count }}</h3>
                    <div class="flex flex-col gap-4 md:flex-row md:gap-10 lg:gap-16">
                        <div class="flex-grow w-full basis-0">
                            <h1 class="text-2xl font-[500] text-black">{{ question_text }}</h1>
                        </div>
                        <div class="flex-grow w-full max-w-sm mx-auto md:max-w-full basis-0">
                            {{ question_answers }}
                                <button
                                    type="button"
                                    class="flex gap-3 p-2 mb-2 transition-colors border border-transparent rounded cursor-pointer last:mb-0 hover:border-red"
                                    :class="isActive() ? 'bg-light-blue' : 'bg-transparent'"
                                    x-data="{
                                        isActive() {
                                            return this.answers?.['{{ question_index }}'] === '{{ answer_personality_key }}'
                                        },
                                        handleClick() {
                                            this.answers['{{ question_index }}'] = '{{ answer_personality_key }}';
                                            this.determineIsComplete();

                                            const $next = this.$refs['quiz-question-{{ question_index + 1 }}'];
                                            if ($next) {
                                                scrollIntoViewIfNeeded($next);
                                            }
                                        }
                                    }"
                                    @click="handleClick()"
                                >
                                    <span>
                                        <i class="fa-regular" :class="isActive() ? 'fa-circle-check text-black' : 'fa-circle'"></i>
                                    </span>
                                    <span class="self-center text-sm text-left">
                                        {{ answer_text }}
                                    </span>
                                </button>
                            {{ /question_answers }}
                        </div>
                    </div>
                </div>
            {{ /questions }}
        </div>

        {{ personalities }}
            <div x-ref="personality-{{ personality_key }}" class="max-w-2xl py-8" x-show="winningPersonalityKey === '{{ personality_key }}'" x-transition.delay.300ms x-cloak>
                {{ partial:components/section-title :bg-color="background.color" :text="personality_title" }}

                {{ partial:components/text-wrapper :bg-color="background.color" :text="personality_description" }}

                <div class="max-w-xs mx-auto mt-8">
                    <button
                        type="button"
                        class="font-headline uppercase rounded transition-colors border-[#3b5998] py-2 px-6 w-full bg-[#3b5998] text-white mb-3"
                        @click="openFacebookSharer('{{ current_url }}', 'I just took the #Beesponsible beekeeping quiz, and I\'m best suited to be a {{ personality_title }}!', 'Take the quiz to see which bee suits you best.')"
                    >
                        <i class="fa-brands fa-facebook"></i> Share on Facebook
                    </button>
                    <button
                        type="button"
                        class="font-headline uppercase rounded transition-colors border-[#147bc9] py-2 px-6 w-full bg-[#147bc9] text-white mb-3"
                        @click="openTwitterSharer('{{ current_url }}', 'I just took the #Beesponsible beekeeping quiz, and I\'m best suited to be a {{ personality_title }}! Take the quiz to see which bee suits you best.')"
                    >
                        <i class="fa-brands fa-twitter"></i> Share on Twitter
                    </button>
                    {{ partial:components/button bg-color="background.color" text="Redo Quiz!" full-width="true" click="resetQuiz()" }}
                </div>
            </div>
        {{ /personalities }}
    </div>
{{ /partial:components/section }}