            <div x-show="activeTab === 'settings'" x-transition:enter="transition ease-out duration-400 delay-100" x-transition:enter-start="opacity-0 translate-x-8" x-transition:enter-end="opacity-100 translate-x-0" class="absolute inset-0 flex flex-col pb-[5.5rem] bg-[#f8fafc]">
                <div class="bg-white/80 backdrop-blur-xl px-6 py-5 border-b border-slate-200/50 z-20 shrink-0 pt-safe">
                    <h2 class="font-extrabold text-2xl text-slate-800 tracking-tight">Preferences</h2>
                </div>
                
                <div class="flex-1 overflow-y-auto p-6 hide-scrollbar space-y-6">
                    
                    <div class="space-y-3">
                        <h3 class="text-[11px] font-bold uppercase tracking-[0.15em] text-slate-400 ml-2">App Options</h3>
                        <div class="bg-white rounded-[28px] border border-slate-100 shadow-sm overflow-hidden">
                            <button type="button" @click="promptInstall()" class="w-full p-5 flex items-center justify-between hover:bg-slate-50 active:bg-slate-100 transition-colors border-b border-slate-50">
                                <div class="flex items-center gap-4">
                                    <div class="w-10 h-10 bg-brand-50 text-brand-600 rounded-[14px] flex items-center justify-center"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg></div>
                                    <div class="text-left">
                                        <p class="text-[15px] font-extrabold text-slate-800 tracking-tight">Install App</p>
                                        <p class="text-xs text-slate-400 font-medium">Add to your home screen</p>
                                    </div>
                                </div>
                                <svg class="w-5 h-5 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"></path></svg>
                            </button>
                            <button type="button" @click="openNotifications()" class="w-full p-5 flex items-center justify-between hover:bg-slate-50 active:bg-slate-100 transition-colors border-b border-slate-50">
                                <div class="flex items-center gap-4">
                                    <div class="w-10 h-10 bg-indigo-50 text-indigo-500 rounded-[14px] flex items-center justify-center"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg></div>
                                    <div class="text-left">
                                        <p class="text-[15px] font-extrabold text-slate-800 tracking-tight">Notifications</p>
                                        <p class="text-xs text-slate-400 font-medium">View official announcements</p>
                                    </div>
                                </div>
                                <svg class="w-5 h-5 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"></path></svg>
                            </button>
                            <a :href="event.permalink || '#'" class="w-full p-5 flex items-center justify-between hover:bg-slate-50 active:bg-slate-100 transition-colors">
                                <div class="flex items-center gap-4">
                                    <div class="w-10 h-10 bg-slate-100 text-slate-600 rounded-[14px] flex items-center justify-center"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg></div>
                                    <div class="text-left">
                                        <p class="text-[15px] font-extrabold text-slate-800 tracking-tight">Event Website</p>
                                        <p class="text-xs text-slate-400 font-medium">Open full page in browser</p>
                                    </div>
                                </div>
                                <svg class="w-5 h-5 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"></path></svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
