{{ tabs = [] }}
{{ blocks }}
    {{? $tabs[] = $block_tab ?}}
{{ /blocks }}
{{? $tabs = array_unique($tabs)  ?}}

<section
    x-data="{
        active: '{{ tabs[0] }}'
    }"
    class="mx-0"
>
    <menu class="flex flex-wrap justify-center bg-[#f7f1ea] py-16 md:mb-12">
        {{ tabs }}
            <li>
                <button
                    type="button"
                    class="px-4 py-4 text-sm font-semibold uppercase transition-colors hover:underline tracking-[1.8px]"
                    :class="'{{ value }}' === active ? 'underline' : ''"
                    @click="active = '{{ value }}'"
                >
                    {{ value }}
                </button>
            </li>
        {{ /tabs }}
    </menu>

    {{ tabs }}
        <ul
            class="text-left"
            x-show="'{{ value }}' === active"
            x-transition.origin.top.left
        >
            {{ blocks }}
                {{ if block_tab === value }}
                    <li class="pt-7">
                        <div class="max-w-2xl px-4 mx-auto md:px-0">
                            <h2 class="mb-2.5 text-[22px] font-medium font-headline text-[#3b3b3b]">{{ block_title }}</h2>
                            {{ partial:components/text-wrapper :text="block_text" }}
                        </div>
                    </li>
                {{ /if }}
            {{ /blocks }}
        </ul>
    {{ /tabs }}
</section>