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

<section
    x-data="{
        active: ''
    }"
    class="mx-0 {{ custom_class_name }} px-4"
>
    <menu class="
            grid
            gap-[15px]
            xl:w-[75%]
            items-center
            mx-auto
            pt-16
            tab
        "
    >
        {{ blocks }}
        <li

        class="
            flex
            items-center
            justify-end
            flex-col
            p-5
            h-[350px]
            bg-cover
            bg-no-repeat
        "
        >
        <button
            type="button"
            class="py-5 px-12 tracking-[1.7px] font-bold uppercase transition-colors hover:underline text-center text-[17px] bg-[#fff] text-[#3b3b3b] leading-[1.41]"
            :class="'{{ block_tab }}' === active ? 'active-tab' : ''"
            @click="active = '{{ block_tab }}'"
        >
            {{ block_tab }}
        </button>
    </li>

        <div x-show="'{{ block_tab }}' === active" x-transition.opacity.delay.200ms class="w-full mt-2 md:hidden">
            <div class="w-full p-4 bg-white">
                {{ partial:components/text-wrapper :text="block_text" }}
                <button
                    type="button"
                    class="py-4 font-bold uppercase underline text-[#3b3b3b] leading-[1.41] w-full"
                    @click="active = ''"
                >
                    Read Less
                </button>
            </div>
        </div>
        {{ /blocks }}
    </menu>
    {{ tabs }}
        <ul
            class="hidden text-left md:block"
            x-show="'{{ value }}' === active"
            x-transition.opacity.delay.200ms
        >
            {{ blocks }}
                {{ if block_tab === value }}
                    <li class="pt-7">
                        <div
                            class="xl:w-[75%] mx-auto"
                            x-data="{
                                scrollToClass(className) {
                                  const element = document.querySelector(`.${className}`);
                                  if (element) {
                                    element.scrollIntoView({ behavior: 'smooth' });
                                  }
                                }
                              }"
                        >
                            {{ partial:components/text-wrapper :text="block_text" }}
                            <button
                                type="button"
                                class="py-4 font-bold uppercase underline text-[#3b3b3b] leading-[1.41]"
                                @click="active = ''; scrollToClass('content-tabs-images')"
                            >
                            Read Less
                            </button>
                        </div>
                    </li>
                {{ /if }}
            {{ /blocks }}
        </ul>
    {{ /tabs }}
</section>