            <div x-show="activeTab === 'map' && featureFlags.map" 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 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 flex items-center justify-between">
                    <div>
                        <h2 class="text-2xl font-extrabold text-slate-800 tracking-tight">Location</h2>
                        <p class="text-[10px] uppercase tracking-[0.2em] font-bold text-slate-400 mt-1">Navigate the venue</p>
                    </div>
                </div>
                
                <div class="flex-1 bg-slate-200 relative overflow-hidden flex flex-col items-center justify-center">
                    <?php if (!empty($event_row['map_embed_url'])) : ?>
                        <div class="w-full h-full relative">
                            <iframe loading="lazy" src="<?php echo esc_url($event_row['map_embed_url']); ?>" class="absolute inset-0 w-full h-full border-none"></iframe>
                        </div>
                    <?php else: ?>
                        <div class="w-[85%] sm:w-[320px] aspect-[3/4] bg-white border border-slate-200 rounded-[40px] shadow-2xl p-6 flex flex-col relative overflow-hidden transform scale-95 transition-transform">
                            <div class="w-full h-full border-[3px] border-slate-100 rounded-[28px] relative bg-slate-50 overflow-hidden flex items-center justify-center">
                                <div class="absolute inset-0 grid grid-cols-4 grid-rows-4 gap-2 p-4 opacity-30">
                                    <template x-for="i in 16"><div class="border border-slate-300 rounded-lg"></div></template>
                                </div>
                                <h3 class="absolute top-8 left-0 right-0 text-center font-extrabold text-slate-300 text-xl tracking-[0.3em] uppercase z-10">Level 1</h3>
                                
                                <div class="absolute top-1/4 left-[10%] w-[40%] h-[30%] bg-brand-50 border-[3px] border-brand-200 rounded-[20px] flex flex-col items-center justify-center shadow-sm z-20 hover:bg-brand-100 transition-colors">
                                    <span class="font-extrabold text-brand-800 text-lg tracking-tight">Stage A</span>
                                </div>
                                <div class="absolute bottom-[20%] right-[10%] w-[35%] h-[25%] bg-indigo-50 border-[3px] border-indigo-200 rounded-[20px] flex flex-col items-center justify-center shadow-sm z-20 hover:bg-indigo-100 transition-colors">
                                    <span class="font-extrabold text-indigo-800 text-sm tracking-tight">Stage B</span>
                                </div>
                            </div>
                        </div>
                    <?php endif; ?>
                    
                    <?php if (!empty($event_row['map_link'])) : ?>
                        <div class="absolute bottom-8 left-1/2 -translate-x-1/2 z-30">
                            <a href="<?php echo esc_url($event_row['map_link']); ?>" target="_blank" rel="noopener noreferrer" class="bg-slate-900 text-white px-8 py-4 rounded-[24px] font-extrabold uppercase tracking-widest text-[11px] shadow-float flex items-center gap-3 whitespace-nowrap active:scale-95 transition-all hover:bg-black">
                                <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="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>
                                Open Maps App
                            </a>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
