{% if block.content.is_active == 'True' %}
<div 
    x-data="popupComponent()" 
    x-init="init()" 
    x-show="open" 
    x-transition.opacity 
    class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center"
>
    <div class="bg-white rounded-2xl p-4 w-96 relative flex flex-col gap-4 items-center justify-center">
        <button @click="close()" class="absolute top-4 left-4">
            <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
				<circle cx="16" cy="16.5" r="16" fill="#F3F4F6"/>
				<path d="M20.7812 12.7812L17.0312 16.5312L20.75 20.25C21.0625 20.5312 21.0625 21 20.75 21.2812C20.4688 21.5938 20 21.5938 19.7188 21.2812L15.9688 17.5625L12.25 21.2812C11.9688 21.5938 11.5 21.5938 11.2188 21.2812C10.9062 21 10.9062 20.5312 11.2188 20.2188L14.9375 16.5L11.2188 12.7812C10.9062 12.5 10.9062 12.0312 11.2188 11.7188C11.5 11.4375 11.9688 11.4375 12.2812 11.7188L16 15.4688L19.7188 11.75C20 11.4375 20.4688 11.4375 20.7812 11.75C21.0625 12.0312 21.0625 12.5 20.7812 12.7812Z" fill="#1C0000"/>
			</svg>


        </button>
        <img class="w-full object-cover rounded-xl" src="{{block.content.sec_image}}">
        <p class="text-gray-900 text-base font-bold">{{block.content.title}}</p>
        <p class="text-slate-600 text-xs text-center font-semibold">{{ block.content.desc }}</p>
        <a href="{{block.content.btn_link}}" class="w-full h-12 px-6 py-3 bg-slate-950 rounded-full inline-flex justify-center items-center gap-2">
            <div class="text-right justify-start text-white text-sm font-semibold">{{block.content.btn_text}}</div>
        </a>
    </div>
</div>

<script>
    function popupComponent() {
        return {
            open: false,
            key: "popup_{{ block.id }}", 
            init() {
                if (!localStorage.getItem(this.key)) {
                    this.open = true
                }
            },
            close() {
                this.open = false
                localStorage.setItem(this.key, "seen")
            }
        }
    }
</script>
{% endif %}