            <div x-show="activeTab === 'home'" 
                 x-transition:enter="transition ease-out duration-400 delay-100" x-transition:enter-start="opacity-0 translate-y-8" x-transition:enter-end="opacity-100 translate-y-0" 
                 class="absolute inset-0 overflow-y-auto px-6 pb-[7rem] pt-6 space-y-8 hide-scrollbar">
                
                <div>
                    <div class="mb-4">
                        <p class="text-[11px] font-bold uppercase tracking-[0.2em] text-slate-400 mb-1">Welcome back,</p>
                        <p class="text-2xl font-extrabold text-slate-800 tracking-tight" x-text="user.name"></p>
                    </div>
                    
                    <button @click="setTab('pass')" class="w-full relative overflow-hidden bg-gradient-to-br from-brand-500 via-brand-600 to-indigo-800 text-white rounded-[32px] p-6 flex flex-col justify-between h-[140px] shadow-float active:scale-[0.97] transition-all group border border-white/10">
                        <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/3 group-hover:bg-white/20 transition-all duration-700"></div>
                        <div class="flex items-start justify-between relative z-10 w-full">
                            <div class="bg-white/20 p-3 rounded-[18px] backdrop-blur-md border border-white/20 shadow-sm group-hover:scale-105 transition-transform duration-300">
                                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"></path></svg>
                            </div>
                            <svg class="w-6 h-6 text-white/70 group-hover:translate-x-1 group-hover:text-white transition-all duration-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>
                        </div>
                        <div class="text-left relative z-10 mt-auto">
                            <p class="text-white/80 text-[10px] font-bold tracking-[0.15em] uppercase mb-0.5">Access Credential</p>
                            <p class="font-extrabold text-xl tracking-tight">Tap for Digital Pass</p>
                        </div>
                    </button>
                </div>

                <section x-show="sessions.length > 0">
                    <div class="flex items-center justify-between mb-4 px-1">
                        <div class="flex items-center gap-2.5">
                            <div class="w-2.5 h-2.5 rounded-full bg-brand-500 animate-pulse shadow-[0_0_12px_rgba(var(--brand-500),0.6)]"></div>
                            <h3 class="text-[12px] font-bold uppercase tracking-[0.15em] text-slate-800" x-text="upNextLabel"></h3>
                        </div>
                        <button @click="setTab('schedule')" class="text-[10px] font-bold uppercase tracking-[0.15em] text-brand-600 active:scale-95 transition-transform hover:bg-brand-50 px-3 py-1.5 rounded-xl">View All</button>
                    </div>

                    <div class="flex gap-4 overflow-x-auto hide-scrollbar snap-x snap-mandatory pb-4 -mx-6 px-6" x-ref="upNextScroller" @scroll.passive="updateUpNextLabelFromScroll()">
                        <template x-for="session in upNextSessions()" :key="'up-' + session.id">
                            <button @click="openSession(session)" class="snap-start shrink-0 w-[85%] sm:w-[280px] text-left bg-white rounded-[32px] p-6 shadow-sm border border-slate-100 relative active:scale-[0.97] transition-all duration-300 group hover:shadow-md hover:border-brand-200 flex flex-col h-[180px]">
                                <div class="w-1.5 h-12 bg-brand-500 absolute left-0 top-8 rounded-r-md"></div>
                                <p class="text-brand-600 font-extrabold text-xs mb-3 tracking-widest uppercase" x-text="session.time"></p>
                                <h4 class="text-lg font-extrabold text-slate-800 mb-2 leading-snug tracking-tight group-hover:text-brand-600 transition-colors line-clamp-2" x-text="session.title"></h4>
                                <div class="mt-auto flex items-center justify-between">
                                    <p class="text-slate-500 text-[13px] font-semibold truncate pr-2" x-text="session.speaker"></p>
                                    <div class="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-slate-400 bg-slate-50 px-3 py-2 rounded-xl shrink-0">
                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0zM15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                                        <span class="truncate max-w-[60px]" x-text="session.location || 'Main'"></span>
                                    </div>
                                </div>
                            </button>
                        </template>
                    </div>
                </section>

                <section>
                    <h3 class="text-[12px] font-bold uppercase tracking-[0.15em] text-slate-800 mb-4 px-1">Explore Event</h3>
                    <div class="grid grid-cols-2 gap-4">
                        <button x-show="featureFlags.attendees" @click="openSubView('attendees')" class="bg-white p-5 rounded-[28px] border border-slate-100 shadow-sm flex flex-col items-center justify-center gap-3 active:scale-[0.96] transition-all duration-300 group hover:shadow-md hover:border-brand-200 aspect-square" x-cloak>
                            <div class="bg-slate-50 text-slate-600 group-hover:bg-brand-50 group-hover:text-brand-600 p-4 rounded-[20px] transition-colors duration-300"><svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg></div>
                            <span class="font-extrabold text-[13px] text-slate-800 tracking-tight">Directory</span>
                        </button>
                        <button @click="openSubView('networking')" class="bg-white p-5 rounded-[28px] border border-slate-100 shadow-sm flex flex-col items-center justify-center gap-3 active:scale-[0.96] transition-all duration-300 group hover:shadow-md hover:border-brand-200 aspect-square">
                            <div class="bg-slate-50 text-slate-600 group-hover:bg-brand-50 group-hover:text-brand-600 p-4 rounded-[20px] transition-colors duration-300"><svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path></svg></div>
                            <span class="font-extrabold text-[13px] text-slate-800 tracking-tight">Matches</span>
                        </button>
                        <button @click="openSubView('info')" class="bg-white p-5 rounded-[28px] border border-slate-100 shadow-sm flex flex-col items-center justify-center gap-3 active:scale-[0.96] transition-all duration-300 group hover:shadow-md hover:border-brand-200 aspect-square">
                            <div class="bg-slate-50 text-slate-600 group-hover:bg-brand-50 group-hover:text-brand-600 p-4 rounded-[20px] transition-colors duration-300"><svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg></div>
                            <span class="font-extrabold text-[13px] text-slate-800 tracking-tight">Event Info</span>
                        </button>
                        <button x-show="featureFlags.map" @click="setTab('map')" class="bg-white p-5 rounded-[28px] border border-slate-100 shadow-sm flex flex-col items-center justify-center gap-3 active:scale-[0.96] transition-all duration-300 group hover:shadow-md hover:border-brand-200 aspect-square" x-cloak>
                            <div class="bg-slate-50 text-slate-600 group-hover:bg-brand-50 group-hover:text-brand-600 p-4 rounded-[20px] transition-colors duration-300"><svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"></path></svg></div>
                            <span class="font-extrabold text-[13px] text-slate-800 tracking-tight">Venue Map</span>
                        </button>
                    </div>
                </section>
            </div>
