<?php
if (!defined('ABSPATH')) {
    exit;
}

// [PRESERVED DYNAMIC VARIABLES]
$ui_labels = isset($ui_labels) && is_array($ui_labels) ? $ui_labels : [];
$map_title = sanitize_text_field((string) ($ui_labels['map_title'] ?? __('Map View', 'nexdirectory')));
$map_description = sanitize_text_field((string) ($ui_labels['map_description'] ?? __('Explore events by location with live filters and search-this-area discovery.', 'nexdirectory')));
$map_kicker = sanitize_text_field((string) get_option('eep_event_hero_kicker_text', (string) ($ui_labels['hero_kicker_default'] ?? $this->get_white_label_brand_name())));
if ($map_kicker === '') {
    $map_kicker = $this->get_white_label_brand_name();
}
$plural_label = sanitize_text_field((string) ($ui_labels['plural'] ?? __('Events', 'nexdirectory')));
$singular_label = sanitize_text_field((string) ($ui_labels['singular'] ?? __('Event', 'nexdirectory')));
$singular_lower = sanitize_text_field((string) ($ui_labels['singular_lower'] ?? strtolower($singular_label)));
$plural_lower = sanitize_text_field((string) ($ui_labels['plural_lower'] ?? strtolower($plural_label)));
$type_label = sanitize_text_field((string) ($ui_labels['taxonomy_type_singular'] ?? __('Event Type', 'nexdirectory')));
$mode_label = sanitize_text_field((string) ($ui_labels['taxonomy_mode_singular'] ?? __('Event Mode', 'nexdirectory')));
$tag_label = sanitize_text_field((string) ($ui_labels['taxonomy_tag_singular'] ?? __('Tag', 'nexdirectory')));
$type_plural = sanitize_text_field((string) ($ui_labels['taxonomy_type_plural'] ?? __('Types', 'nexdirectory')));
$mode_plural = sanitize_text_field((string) ($ui_labels['taxonomy_mode_plural'] ?? __('Modes', 'nexdirectory')));
$tag_plural = sanitize_text_field((string) ($ui_labels['taxonomy_tag_plural'] ?? __('Tags', 'nexdirectory')));
$filter_price_label = sanitize_text_field((string) ($ui_labels['filter_price_label'] ?? __('Price Range', 'nexdirectory')));
$filter_price_all_label = sanitize_text_field((string) ($ui_labels['filter_price_all_label'] ?? __('All Price Ranges', 'nexdirectory')));
$near_me_label = sanitize_text_field((string) ($ui_labels['map_near_me_label'] ?? __('Find Near Me', 'nexdirectory')));
$classification_labels = method_exists($this, 'get_classification_labels') ? (array) $this->get_classification_labels() : [];

$map_page_id = absint((int) get_queried_object_id());
$map_featured_hero = '';
if ($map_page_id > 0 && has_post_thumbnail($map_page_id)) {
    $map_featured_candidate = get_the_post_thumbnail_url($map_page_id, 'full');
    if (is_string($map_featured_candidate) && $map_featured_candidate !== '') {
        $map_featured_hero = esc_url($map_featured_candidate);
    }
}
$map_fallback_hero = esc_url((string) get_option('eep_style_fallback_hero_url', ''));
$map_banner_hero = $map_featured_hero !== '' ? $map_featured_hero : $map_fallback_hero;
$map_banner_has_image = $map_banner_hero !== '';
$hero_img_src = $map_banner_has_image ? $map_banner_hero : 'https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?q=80&w=2070&auto=format&fit=crop';

$layout = sanitize_key((string) $layout);
if ($layout === 'below') {
    $layout = 'below-list';
} elseif ($layout === 'sidebar') {
    $layout = 'three-column';
}
$layout = in_array($layout, ['three-column', 'below-list', 'below-grid', 'below-grid-large', 'grid-no-map', 'grid-no-map-large'], true) ? $layout : 'three-column';
$density = in_array((string) $density, ['comfortable', 'compact'], true) ? (string) $density : 'comfortable';
$show_map = !in_array($layout, ['grid-no-map', 'grid-no-map-large'], true);
$show_results_below_list = $show_list && $layout === 'below-list';
$show_results_below_grid = $show_list && in_array($layout, ['below-grid', 'below-grid-large'], true);
$show_results_column = $show_list && $layout === 'three-column';
$show_results_grid_only = $show_list && in_array($layout, ['grid-no-map', 'grid-no-map-large'], true);
$is_large_grid = in_array($layout, ['below-grid-large', 'grid-no-map-large'], true);
$mobile_filter_mode = sanitize_key((string) ($mobile_filter_mode ?? 'drawer'));
if (!in_array($mobile_filter_mode, ['drawer', 'inline'], true)) {
    $mobile_filter_mode = 'drawer';
}
$mobile_filter_drawer = $mobile_filter_mode === 'drawer';

// URLs for navigation
$home_url = esc_url(home_url('/'));
$events_nav_url = esc_url($this->get_platform_page_url('eep_page_events_url', $this->get_profile_route_slugs('events'), $this->get_profile_route_default_url('events')));
$workspace_nav_url = esc_url($this->get_platform_page_url('eep_page_my_events_url', $this->get_profile_route_slugs('my_items'), $this->get_profile_route_default_url('my_items')));
$submit_nav_url = esc_url($this->get_platform_page_url('eep_page_submit_event_url', $this->get_profile_route_slugs('submit'), $this->get_profile_route_default_url('submit')));
$account_nav_url = esc_url($this->get_platform_page_url('eep_page_account_url', $this->get_profile_route_slugs('account'), $this->get_profile_route_default_url('account')));
$logout_nav_url = esc_url(wp_logout_url($events_nav_url !== '' ? $events_nav_url : $home_url));

// Preserved popup classes dynamically injected if needed
$popup_classes =
    "[&_.leaflet-popup-content-wrapper]:p-0! [&_.leaflet-popup-content-wrapper]:overflow-hidden! [&_.leaflet-popup-content-wrapper]:rounded-2xl! [&_.leaflet-popup-content-wrapper]:shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]! [&_.leaflet-popup-content-wrapper]:border! [&_.leaflet-popup-content-wrapper]:border-[#f3f4f6]! [&_.leaflet-popup-content-wrapper]:font-sans! " .
    "[&_.leaflet-popup-content]:m-0! [&_.leaflet-popup-content]:w-[260px]! sm:[&_.leaflet-popup-content]:w-[300px]! " .
    "[&_.leaflet-popup-content_img]:w-full! [&_.leaflet-popup-content_img]:h-[120px]! [&_.leaflet-popup-content_img]:object-cover! [&_.leaflet-popup-content_img]:m-0! " .
    "[&_.leaflet-popup-content_h3]:px-5! [&_.leaflet-popup-content_h4]:px-5! [&_.leaflet-popup-content_h3]:pt-4! [&_.leaflet-popup-content_h4]:pt-4! [&_.leaflet-popup-content_h3]:pb-1! [&_.leaflet-popup-content_h4]:pb-1! [&_.leaflet-popup-content_h3]:font-bold! [&_.leaflet-popup-content_h4]:font-bold! [&_.leaflet-popup-content_h3]:text-gray-900! [&_.leaflet-popup-content_h4]:text-gray-900! [&_.leaflet-popup-content_h3]:text-[15px]! [&_.leaflet-popup-content_h4]:text-[15px]! [&_.leaflet-popup-content_h3]:leading-tight! [&_.leaflet-popup-content_h4]:leading-tight! " .
    "[&_.leaflet-popup-content_p]:px-5! [&_.leaflet-popup-content_p]:text-[13px]! [&_.leaflet-popup-content_p]:text-gray-500! [&_.leaflet-popup-content_p]:mb-0! [&_.leaflet-popup-content_p]:pb-4! [&_.leaflet-popup-content_p]:leading-relaxed! " .
    "[&_.leaflet-popup-content_a]:flex! [&_.leaflet-popup-content_a]:items-center! [&_.leaflet-popup-content_a]:justify-center! [&_.leaflet-popup-content_a]:w-[calc(100%-2.5rem)]! [&_.leaflet-popup-content_a]:mx-auto! [&_.leaflet-popup-content_a]:mb-5! [&_.leaflet-popup-content_a]:bg-[var(--eep-primary)]! [&_.leaflet-popup-content_a]:text-white! [&_.leaflet-popup-content_a]:text-sm! [&_.leaflet-popup-content_a]:font-semibold! [&_.leaflet-popup-content_a]:py-2.5! [&_.leaflet-popup-content_a]:rounded-lg! [&_.leaflet-popup-content_a]:shadow-sm! [&_.leaflet-popup-content_a]:no-underline! [&_.leaflet-popup-content_a]:transition-colors! hover:[&_.leaflet-popup-content_a]:bg-[var(--eep-primary-hover)]! " .
    "[&_.leaflet-popup-close-button]:text-gray-600! [&_.leaflet-popup-close-button]:bg-white/90! [&_.leaflet-popup-close-button]:backdrop-blur-md! [&_.leaflet-popup-close-button]:rounded-full! [&_.leaflet-popup-close-button]:w-[28px]! [&_.leaflet-popup-close-button]:h-[28px]! [&_.leaflet-popup-close-button]:flex! [&_.leaflet-popup-close-button]:items-center! [&_.leaflet-popup-close-button]:justify-center! [&_.leaflet-popup-close-button]:top-2.5! [&_.leaflet-popup-close-button]:right-2.5! [&_.leaflet-popup-close-button]:shadow-sm! [&_.leaflet-popup-close-button]:transition-all! hover:[&_.leaflet-popup-close-button]:bg-white! hover:[&_.leaflet-popup-close-button]:text-[var(--eep-primary-hover)]! hover:[&_.leaflet-popup-close-button]:scale-110! " .
    "[&_.leaflet-popup-close-button>span]:text-[18px]! [&_.leaflet-popup-close-button>span]:leading-none! [&_.leaflet-popup-close-button>span]:-mt-0.5!";
?>
<style>
    .leaflet-container { z-index: 10 !important; font-family: 'Inter', sans-serif !important; }
    #eep-map-triple-wrapper #eep-map-apply,
    #eep-map-triple-wrapper #eep-map-filters-apply,
    #eep-map-triple-wrapper #eep-map-apply:hover,
    #eep-map-triple-wrapper #eep-map-filters-apply:hover,
    #eep-map-triple-wrapper #eep-map-apply:focus,
    #eep-map-triple-wrapper #eep-map-filters-apply:focus {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
    #eep-map-triple-wrapper #eep-map-apply *,
    #eep-map-triple-wrapper #eep-map-filters-apply * {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
    @media (min-width: 1024px) {
        #eep-map-triple-wrapper [data-eep-map-sidebar-shell="1"] {
            align-self: flex-start;
        }
        #eep-map-triple-wrapper .eep-map-content-row {
            overflow: visible !important;
        }
        #eep-map-triple-wrapper #eep-map-sidebar-panel {
            height: 100% !important;
            max-height: 100% !important;
        }
    }
</style>

<div id="eep-map-triple-wrapper" data-eep-alpine-root="1" data-eep-map-template="MapPage-tripleColumn.php" class="bg-gray-50 text-gray-800 font-sans antialiased overflow-x-hidden h-[calc(100dvh-60px)] md:h-[calc(100dvh-64px)] flex flex-col"
      x-data="{ 
          isMobile: window.innerWidth < 1024,
          view: 'map', 
          filtersOpen: false 
      }" 
      @resize.window="isMobile = window.innerWidth < 1024; if(!isMobile) filtersOpen = false"
      x-init="$watch('view', () => setTimeout(() => window.dispatchEvent(new Event('resize')), 100))">

    <?php echo $this->render_notice(); ?>

    <div class="lg:hidden flex-none bg-white border-b border-gray-200 px-4 py-3 z-40 relative shrink-0">
        <div class="flex items-center justify-between gap-4">
            <div class="bg-gray-100 p-1 rounded-xl flex items-center shadow-inner flex-1">
                <button @click="view = 'list'" :class="view === 'list' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500 hover:text-gray-700'" class="flex-1 py-1.5 rounded-lg text-sm font-semibold transition-all">
                    List
                </button>
                <button @click="view = 'map'" :class="view === 'map' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500 hover:text-gray-700'" class="flex-1 py-1.5 rounded-lg text-sm font-semibold transition-all">
                    Map
                </button>
            </div>
            <button type="button" id="eep-map-filters-open" aria-expanded="false" aria-controls="eep-map-sidebar-panel" @click="filtersOpen = true" class="p-2.5 bg-gray-50 hover:bg-gray-100 border border-gray-200 rounded-xl text-gray-700 transition-colors relative shrink-0">
                <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" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
                <span class="absolute top-0 right-0 -mt-1 -mr-1 flex h-3 w-3"><span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span><span class="relative inline-flex rounded-full h-3 w-3 bg-brand-500"></span></span>
            </button>
        </div>
    </div>

    <main class="eep-map-content-row flex-1 flex w-full max-w-screen-2xl mx-auto overflow-hidden lg:overflow-visible relative" data-eep-map-layout="1" data-eep-mobile-filter-mode="<?php echo esc_attr($mobile_filter_mode); ?>" data-eep-map-max-events="<?php echo esc_attr((string) $max_events); ?>">
        
        <?php if ($show_sidebar) : ?>
        <div x-show="!isMobile || filtersOpen" data-eep-map-sidebar-shell="1" style="display: none;" class="eep-map-sticky-shell flex flex-col w-full lg:w-[320px] bg-white border-r border-gray-200 shrink-0 h-full lg:h-[calc(100vh-5rem)] lg:self-start lg:sticky lg:top-24 relative z-20"
             :class="isMobile ? 'absolute inset-0 z-[100] flex flex-col justify-end pointer-events-none' : ''">
            
            <div x-show="isMobile && filtersOpen" 
                 x-transition:enter="transition-opacity ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" 
                 x-transition:leave="transition-opacity ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" 
                 @click="filtersOpen = false" id="eep-map-sidebar-backdrop" class="absolute inset-0 bg-gray-900/60 backdrop-blur-sm pointer-events-auto lg:hidden"></div>

            <aside x-show="!isMobile || filtersOpen" class="h-full overflow-y-auto no-scrollbar"
                   x-transition:enter="transition transform ease-out duration-300" x-transition:enter-start="translate-y-full" x-transition:enter-end="translate-y-0" 
                   x-transition:leave="transition transform ease-in duration-200" x-transition:leave-start="translate-y-0" x-transition:leave-end="translate-y-full" 
                   :class="isMobile ? 'relative bg-white w-full rounded-t-3xl shadow-2xl flex flex-col max-h-[85dvh] pointer-events-auto mt-auto pb-safe' : ''"
                   id="eep-map-sidebar-panel">
                
                <div x-show="isMobile" class="w-full flex justify-center pt-3 pb-1" @click="filtersOpen = false">
                    <div class="w-12 h-1.5 bg-gray-300 rounded-full"></div>
                </div>

                <div class="px-6 py-4 flex items-center justify-between border-b border-gray-100">
                    <h2 class="text-xl font-bold text-gray-900 flex items-center gap-2">
                        <?php echo esc_html(sprintf(__('Filter %s', 'nexdirectory'), $plural_label)); ?>
                    </h2>
                    <button type="button" x-show="!isMobile" class="text-xs font-semibold text-gray-400 hover:text-brand-500 transition-colors uppercase tracking-wider" id="eep-map-reset-head"><?php esc_html_e('Reset', 'nexdirectory'); ?></button>
                    <button type="button" x-show="isMobile" id="eep-map-filters-close" @click="filtersOpen = false" class="p-2 bg-gray-100 hover:bg-gray-200 rounded-full text-gray-600 transition-colors">
                        <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" d="M6 18L18 6M6 6l12 12"></path></svg>
                    </button>
                </div>

                <div class="p-6 space-y-5 overflow-y-auto no-scrollbar" :class="isMobile ? '' : 'flex-1'">
                    <?php if ($show_search) : ?>
                    <div class="relative group">
                        <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none transition-colors group-focus-within:text-brand-500">
                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                        </div>
                        <input id="eep-map-search" type="text" aria-label="<?php esc_attr_e('Search', 'nexdirectory'); ?>" placeholder="<?php esc_attr_e('Keywords...', 'nexdirectory'); ?>" class="w-full pl-10 pr-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all placeholder-gray-400 text-gray-800">
                    </div>
                    <?php endif; ?>

                    <?php if ($show_type) : ?>
                    <div>
                        <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-2"><?php echo esc_html($type_label); ?></label>
                        <select id="eep-map-type" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm text-gray-800 appearance-none focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all cursor-pointer">
                            <option value=""><?php echo esc_html(sprintf(__('All %s', 'nexdirectory'), $type_plural)); ?></option>
                            <?php foreach (get_terms(['taxonomy' => $this::TAX_TYPE, 'hide_empty' => true]) as $term) : ?>
                                <option value="<?php echo esc_attr((string) $term->slug); ?>"><?php echo esc_html($term->name); ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <?php endif; ?>

                    <?php if ($show_mode) : ?>
                    <div>
                        <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-2"><?php echo esc_html($mode_label); ?></label>
                        <select id="eep-map-mode" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm text-gray-800 appearance-none focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all cursor-pointer">
                            <option value=""><?php echo esc_html(sprintf(__('All %s', 'nexdirectory'), $mode_plural)); ?></option>
                            <?php foreach (get_terms(['taxonomy' => $this::TAX_MODE, 'hide_empty' => true]) as $term) : ?>
                                <option value="<?php echo esc_attr((string) $term->slug); ?>"><?php echo esc_html($term->name); ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <?php endif; ?>

                    <?php if ($show_tag) : ?>
                    <div>
                        <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-2"><?php echo esc_html($tag_label); ?></label>
                        <select id="eep-map-tag" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm text-gray-800 appearance-none focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all cursor-pointer">
                            <option value=""><?php echo esc_html(sprintf(__('All %s', 'nexdirectory'), $tag_plural)); ?></option>
                            <?php foreach (get_terms(['taxonomy' => $this::TAX_TAG, 'hide_empty' => true]) as $term) : ?>
                                <option value="<?php echo esc_attr((string) $term->slug); ?>"><?php echo esc_html($term->name); ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <?php endif; ?>

                    <?php if ($show_price) : ?>
                    <div>
                        <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-2"><?php echo esc_html($filter_price_label); ?></label>
                        <select id="eep-map-price" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm text-gray-800 appearance-none focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all cursor-pointer">
                            <option value=""><?php echo esc_html($filter_price_all_label); ?></option>
                            <?php foreach (get_terms(['taxonomy' => $this::TAX_PRICE, 'hide_empty' => true]) as $term) : ?>
                                <option value="<?php echo esc_attr((string) $term->slug); ?>"><?php echo esc_html($term->name); ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <?php endif; ?>

                    <?php if ($show_official) : ?>
                    <div>
                        <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-2"><?php esc_html_e('Classification', 'nexdirectory'); ?></label>
                        <select id="eep-map-official" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm text-gray-800 appearance-none focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all cursor-pointer">
                            <option value=""><?php echo esc_html(sprintf(__('All %s', 'nexdirectory'), $plural_label)); ?></option>
                            <option value="1"><?php echo esc_html((string) ($classification_labels['official'] ?? __('Official', 'nexdirectory'))); ?></option>
                            <option value="0"><?php echo esc_html((string) ($classification_labels['unofficial'] ?? __('Unofficial', 'nexdirectory'))); ?></option>
                        </select>
                    </div>
                    <?php endif; ?>

                    <?php if ($show_date) : ?>
                    <div>
                        <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-2"><?php esc_html_e('Date', 'nexdirectory'); ?></label>
                        <input id="eep-map-date" type="date" aria-label="<?php esc_attr_e('Filter by date', 'nexdirectory'); ?>" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm text-gray-800 focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all">
                    </div>
                    <?php endif; ?>

                    <?php if ($show_distance) : ?>
                    <div>
                        <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-2"><?php esc_html_e('Radius', 'nexdirectory'); ?></label>
                        <select id="eep-map-distance" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm text-gray-800 appearance-none focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all cursor-pointer">
                            <option value=""><?php esc_html_e('Any Distance', 'nexdirectory'); ?></option>
                            <option value="10"><?php esc_html_e('Within 10 km', 'nexdirectory'); ?></option>
                            <option value="25"><?php esc_html_e('Within 25 km', 'nexdirectory'); ?></option>
                            <option value="50"><?php esc_html_e('Within 50 km', 'nexdirectory'); ?></option>
                            <option value="100"><?php esc_html_e('Within 100 km', 'nexdirectory'); ?></option>
                        </select>
                    </div>
                    <?php endif; ?>
                    
                    <div class="pt-4 space-y-3 border-t border-gray-100 hidden lg:block">
                        <button type="button" id="eep-map-apply" class="w-full flex items-center justify-center gap-2 py-3.5 px-4 bg-brand-500 hover:bg-brand-600 text-white font-semibold rounded-xl text-sm transition-colors shadow-sm">
                            <?php esc_html_e('Apply Filters', 'nexdirectory'); ?>
                        </button>
                        <div class="grid grid-cols-1 gap-3">
                            <button type="button" id="eep-map-use-location" class="w-full flex items-center justify-center gap-2 py-3.5 px-4 min-h-[52px] bg-gray-50 hover:bg-gray-100 border border-gray-200 text-gray-700 font-medium rounded-xl text-sm transition-colors group text-center">
                                <svg class="w-4 h-4 text-gray-400 group-hover:text-brand-500 transition-colors shrink-0" 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 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                                <span><?php echo esc_html($near_me_label); ?></span>
                            </button>
                            <?php if ($show_map) : ?>
                            <button type="button" id="eep-map-search-area" class="w-full flex items-center justify-center gap-2 py-3.5 px-4 min-h-[52px] bg-gray-50 hover:bg-gray-100 border border-gray-200 text-gray-700 font-medium rounded-xl text-sm transition-colors group text-center">
                                <svg class="w-4 h-4 text-gray-400 group-hover:text-brand-500 transition-colors shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                                <span><?php esc_html_e('Search This Area', 'nexdirectory'); ?></span>
                            </button>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                
                <div x-show="isMobile" class="p-6 border-t border-gray-100 bg-white shadow-[0_-4px_6px_-1px_rgb(0,0,0,0.05)] pb-8">
                    <button type="button" @click="filtersOpen = false" id="eep-map-filters-apply" class="w-full py-4 bg-brand-500 active:bg-brand-600 text-white font-semibold rounded-xl shadow-md transition-colors text-lg tracking-wide">
                        <?php esc_html_e('Apply & View Results', 'nexdirectory'); ?>
                    </button>
                </div>
            </aside>
        </div>
        <?php endif; ?>

        <section x-show="!isMobile || view === 'list'" 
                 class="w-full lg:w-[500px] xl:w-[600px] flex-shrink-0 flex flex-col h-full bg-gray-50 z-20 absolute lg:relative inset-0"
                 x-transition:enter="transition-transform ease-out duration-300" x-transition:enter-start="-translate-x-full lg:translate-x-0" x-transition:enter-end="translate-x-0"
                 x-transition:leave="transition-transform ease-in duration-200" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full lg:translate-x-0">
            
            <p class="sr-only" id="eep-map-help"><?php esc_html_e('Map keyboard controls: arrow keys pan, plus/minus zoom, Home resets view.', 'nexdirectory'); ?></p>

            <div class="h-full overflow-y-auto no-scrollbar relative flex flex-col">
                
                <div class="hidden lg:block relative shrink-0 p-6 pb-0">
                    <div class="relative rounded-2xl overflow-hidden shadow-sm group h-[200px]">
                        <img src="<?php echo esc_url($hero_img_src); ?>" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" <?php echo $map_banner_has_image ? ' data-eep-hero-parallax="1"' : ''; ?> alt="<?php echo esc_attr($map_title); ?>">
                        <div class="absolute inset-0 bg-gradient-to-t from-gray-900/90 via-gray-900/40 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 p-6">
                            <h1 class="text-3xl font-bold text-white mb-2 tracking-tight"><?php echo esc_html($map_title); ?></h1>
                            <p class="text-gray-200 text-sm"><?php echo esc_html($map_description); ?></p>
                        </div>
                    </div>
                </div>

                <div class="sticky top-0 bg-gray-50/95 backdrop-blur z-30 px-4 lg:px-6 py-4 flex items-center justify-between border-b border-gray-200">
                    <h2 class="text-lg font-bold text-gray-900" id="eep-map-results-count"><?php esc_html_e('Results', 'nexdirectory'); ?></h2>
                    <select id="eep-map-sort" aria-label="<?php esc_attr_e('Sort Results', 'nexdirectory'); ?>" class="px-3 py-1.5 bg-white border border-gray-200 rounded-lg text-sm font-medium text-gray-700 focus:outline-none focus:ring-2 focus:ring-brand-500/20 shadow-sm cursor-pointer">
                        <option value="nearest"><?php esc_html_e('Nearest', 'nexdirectory'); ?></option>
                        <option value="date_desc"><?php esc_html_e('Newest', 'nexdirectory'); ?></option>
                        <option value="title_asc"><?php esc_html_e('Name (A-Z)', 'nexdirectory'); ?></option>
                    </select>
                </div>

                <div class="p-4 lg:p-6 pb-24
                    [&_[data-map-results-list]]:flex [&_[data-map-results-list]]:flex-col [&_[data-map-results-list]]:gap-4
                    
                    [&_[data-map-results-list]>article]:bg-white [&_[data-map-results-list]>article]:rounded-2xl [&_[data-map-results-list]>article]:border [&_[data-map-results-list]>article]:border-gray-200 [&_[data-map-results-list]>article]:overflow-hidden [&_[data-map-results-list]>article]:transition-all [&_[data-map-results-list]>article]:duration-300 hover:[&_[data-map-results-list]>article]:shadow-lg hover:[&_[data-map-results-list]>article]:border-brand-300 [&_[data-map-results-list]>article]:group [&_[data-map-results-list]>article]:flex [&_[data-map-results-list]>article]:flex-col lg:[&_[data-map-results-list]>article]:flex-row [&_[data-map-results-list]>article]:shadow-sm
                    [&_[data-map-results-list]>div]:bg-white [&_[data-map-results-list]>div]:rounded-2xl [&_[data-map-results-list]>div]:border [&_[data-map-results-list]>div]:border-gray-200 [&_[data-map-results-list]>div]:overflow-hidden [&_[data-map-results-list]>div]:transition-all [&_[data-map-results-list]>div]:duration-300 hover:[&_[data-map-results-list]>div]:shadow-lg hover:[&_[data-map-results-list]>div]:border-brand-300 [&_[data-map-results-list]>div]:group [&_[data-map-results-list]>div]:flex [&_[data-map-results-list]>div]:flex-col lg:[&_[data-map-results-list]>div]:flex-row [&_[data-map-results-list]>div]:shadow-sm
                    
                    [&_.eep-card-img-wrap]:relative [&_.eep-card-img-wrap]:h-48 lg:[&_.eep-card-img-wrap]:h-auto lg:[&_.eep-card-img-wrap]:w-[42%] [&_.eep-card-img-wrap]:overflow-hidden [&_.eep-card-img-wrap]:shrink-0 [&_.eep-card-img-wrap]:bg-gray-100
                    [&_img.eep-card-img]:w-full [&_img.eep-card-img]:h-full [&_img.eep-card-img]:object-cover [&_img.eep-card-img]:transition-transform [&_img.eep-card-img]:duration-700 hover:[&_[data-map-results-list]>article]_img.eep-card-img:scale-105 hover:[&_[data-map-results-list]>div]_img.eep-card-img:scale-105
                    
                    [&_.eep-card-body]:p-5 [&_.eep-card-body]:flex [&_.eep-card-body]:flex-col [&_.eep-card-body]:grow [&_.eep-card-body]:justify-center [&_.eep-card-body]:min-w-0
                    [&_.eep-event-content]:p-5 [&_.eep-event-content]:flex [&_.eep-event-content]:flex-col [&_.eep-event-content]:grow [&_.eep-event-content]:justify-center [&_.eep-event-content]:min-w-0
                    
                    [&_.eep-card-body_h3]:font-bold [&_.eep-card-body_h3]:text-gray-900 [&_.eep-card-body_h3]:text-lg [&_.eep-card-body_h3]:leading-tight [&_.eep-card-body_h3]:mb-2 [&_.eep-card-body_h3]:line-clamp-2 [&_.eep-card-body_h3]:transition-colors hover:[&_[data-map-results-list]>article]_.eep-card-body_h3:text-brand-600 hover:[&_[data-map-results-list]>div]_.eep-card-body_h3:text-brand-600
                    [&_.eep-card-body_p]:text-sm [&_.eep-card-body_p]:text-gray-500 [&_.eep-card-body_p]:flex [&_.eep-card-body_p]:items-center [&_.eep-card-body_p]:mb-1.5 last:[&_.eep-card-body_p]:mb-4
                    
                    [&_.eep-card-footer]:mt-auto [&_.eep-card-footer]:w-full [&_.eep-button-wrap]:mt-auto [&_.eep-button-wrap]:w-full
                    
                    [&_a.eep-btn]:inline-flex [&_a.eep-btn]:items-center [&_a.eep-btn]:justify-center [&_a.eep-btn]:py-2 [&_a.eep-btn]:px-4 [&_a.eep-btn]:bg-gray-50 hover:[&_a.eep-btn]:bg-brand-50 [&_a.eep-btn]:border [&_a.eep-btn]:border-gray-200 hover:[&_a.eep-btn]:border-brand-200 [&_a.eep-btn]:text-gray-800 hover:[&_a.eep-btn]:text-brand-700 [&_a.eep-btn]:font-medium [&_a.eep-btn]:rounded-xl [&_a.eep-btn]:transition-colors [&_a.eep-btn]:text-sm [&_a.eep-btn]:w-full
                ">
                    <div id="map-results-list" data-map-results-list class="w-full" aria-live="polite"></div>
                </div>
            </div>
        </section>

        <?php if ($show_map) : ?>
        <section x-show="!isMobile || view === 'map'" class="flex-1 relative h-full w-full bg-gray-100 z-10 <?php echo $popup_classes; ?>" data-eep-map-panel="1">
            <div id="eep-events-map" role="region" tabindex="0" aria-label="<?php echo esc_attr(sprintf(__('%s locations map', 'nexdirectory'), $plural_label)); ?>" aria-describedby="eep-map-help" class="absolute inset-0 z-0"></div>

            <div x-show="isMobile" 
                 x-transition:enter="transition ease-out duration-300 transform" x-transition:enter-start="translate-y-12 opacity-0" x-transition:enter-end="translate-y-0 opacity-100"
                 x-transition:leave="transition ease-in duration-200 transform" x-transition:leave-start="translate-y-0 opacity-100" x-transition:leave-end="translate-y-12 opacity-0"
                 style="display: none;" 
                 class="absolute bottom-6 left-0 right-0 z-20 pointer-events-none">
                
                <div class="flex overflow-x-auto snap-x snap-mandatory gap-4 px-4 pb-2 no-scrollbar pointer-events-auto" id="eep-mobile-slider-container">
                    </div>
            </div>
        </section>
        <?php endif; ?>

    </main>

</div>
