// Application State
        let currentFilter = 'all';
        let currentSort = 'featured';
        let currentView = 'grid';
        let currentSearchTerm = '';
        let filteredLocations = [...LOCATIONS_DATA];
        let map = null;
        let markers = [];
        let currentPage = 1;
        let itemsPerPage = 6;
        let activeFilters = [];

        // Initialize the application
        document.addEventListener('DOMContentLoaded', function() {
            initializeMap();
            renderLocations();
            updateResultsCount();
            setupSearch();
            updatePagination();
            showMobileMapToggle();
        });

        // Show mobile map toggle on smaller screens
        function showMobileMapToggle() {
            const toggle = document.getElementById('mobile-map-toggle');
            if (window.innerWidth <= 1024) {
                toggle.style.display = 'flex';
            } else {
                toggle.style.display = 'none';
            }
        }

        // Handle window resize
        window.addEventListener('resize', showMobileMapToggle);

        // Toggle mobile map
        function toggleMobileMap() {
            const mapContainer = document.getElementById('map-container');
            const isVisible = mapContainer.style.display !== 'none';
            
            if (isVisible) {
                mapContainer.style.display = 'none';
                document.getElementById('mobile-map-toggle').innerHTML = `
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                    </svg>
                    Show Map
                `;
            } else {
                mapContainer.style.display = 'block';
                document.getElementById('mobile-map-toggle').innerHTML = `
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                        <rect x="3" y="3" width="7" height="7"/>
                        <rect x="14" y="3" width="7" height="7"/>
                        <rect x="14" y="14" width="7" height="7"/>
                        <rect x="3" y="14" width="7" height="7"/>
                    </svg>
                    Show Grid
                `;
            }
        }

        // Initialize Mapbox map
        function initializeMap() {
            try {
                // Use demo token for development
                mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
                
                map = new mapboxgl.Map({
                    container: 'map',
                    style: 'mapbox://styles/mapbox/light-v11',
                    center: [-2.5, 54.0], // Center of UK
                    zoom: 5.5
                });

                map.on('load', function() {
                    addMarkersToMap();
                });

                // Add navigation controls
                map.addControl(new mapboxgl.NavigationControl(), 'top-right');
            } catch (error) {
                console.warn('Mapbox failed to initialize:', error);
                // Fallback: show message in map container
                document.getElementById('map').innerHTML = `
                    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--gray-600); text-align: center; padding: 40px;">
                        <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor" style="margin-bottom: 16px;">
                            <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                        </svg>
                        <h3 style="margin-bottom: 8px;">Interactive Map</h3>
                        <p>Explore our premium workspace locations across the UK</p>
                    </div>
                `;
            }
        }

        // Add markers to map
        function addMarkersToMap() {
            if (!map) return;

            // Clear existing markers
            markers.forEach(marker => marker.remove());
            markers = [];

            const paginatedLocations = getPaginatedLocations();
            
            paginatedLocations.forEach(location => {
                // Create custom marker
                const el = document.createElement('div');
                el.className = 'marker';
                el.style.width = '12px';
                el.style.height = '12px';
                el.style.borderRadius = '50%';
                el.style.backgroundColor = '#000';
                el.style.border = '2px solid #fff';
                el.style.cursor = 'pointer';
                el.style.boxShadow = '0 2px 4px rgba(0,0,0,0.3)';

                // Create popup
                const popup = new mapboxgl.Popup({ offset: 25 })
                    .setHTML(`
                        <div class="popup-content">
                            <h3>${location.name}</h3>
                            <p>${location.description.substring(0, 100)}...</p>
                            <div class="price">${location.pricing.currency}${location.pricing.amount}/${location.pricing.period}</div>
                            <a href="/locations/${location.id}" class="btn btn-primary">View Details</a>
                        </div>
                    `);

                // Add marker to map
                const marker = new mapboxgl.Marker(el)
                    .setLngLat(location.coordinates)
                    .setPopup(popup)
                    .addTo(map);

                markers.push(marker);
            });
        }

        // Update active filters display
        function updateActiveFilters() {
            const container = document.getElementById('active-filters');
            const filters = [];

            if (currentSearchTerm) {
                filters.push({ type: 'search', value: currentSearchTerm, label: `Search: "${currentSearchTerm}"` });
            }
            
            if (currentFilter !== 'all') {
                const filterLabels = {
                    'available': 'Available Now',
                    'premium': 'Premium',
                    'coming': 'Coming Soon'
                };
                filters.push({ type: 'filter', value: currentFilter, label: filterLabels[currentFilter] });
            }

            if (filters.length === 0) {
                container.innerHTML = '';
                return;
            }

            container.innerHTML = filters.map(filter => `
                <div class="filter-chip">
                    ${filter.label}
                    <button class="filter-chip-remove" onclick="removeFilter('${filter.type}', '${filter.value}')" aria-label="Remove ${filter.label} filter">
                        ×
                    </button>
                </div>
            `).join('');
        }

        // Remove specific filter
        function removeFilter(type, value) {
            if (type === 'search') {
                document.getElementById('location-search').value = '';
                currentSearchTerm = '';
            } else if (type === 'filter') {
                currentFilter = 'all';
                document.querySelectorAll('.filter-btn').forEach(btn => {
                    btn.classList.remove('active');
                    btn.setAttribute('aria-selected', 'false');
                });
                document.querySelector('[data-filter="all"]').classList.add('active');
                document.querySelector('[data-filter="all"]').setAttribute('aria-selected', 'true');
            }
            
            applyFilters();
        }

        // Apply all filters
        function applyFilters() {
            let filtered = [...LOCATIONS_DATA];
            
            // Apply search filter
            if (currentSearchTerm) {
                filtered = filtered.filter(location => 
                    location.name.toLowerCase().includes(currentSearchTerm.toLowerCase()) ||
                    location.city.toLowerCase().includes(currentSearchTerm.toLowerCase()) ||
                    location.address.toLowerCase().includes(currentSearchTerm.toLowerCase()) ||
                    location.description.toLowerCase().includes(currentSearchTerm.toLowerCase())
                );
            }
            
            // Apply category filter
            if (currentFilter !== 'all') {
                filtered = filtered.filter(location => {
                    if (currentFilter === 'available') {
                        return location.badges.some(badge => badge.toLowerCase().includes('available'));
                    } else if (currentFilter === 'premium') {
                        return location.badges.some(badge => badge.toLowerCase().includes('premium'));
                    } else if (currentFilter === 'coming') {
                        return location.badges.some(badge => badge.toLowerCase().includes('coming'));
                    }
                    return location.tags.includes(currentFilter);
                });
            }
            
            filteredLocations = filtered;
            currentPage = 1; // Reset to first page
            sortLocations(currentSort);
            renderLocations();
            updateResultsCount();
            updateActiveFilters();
            updatePagination();
            addMarkersToMap();
            
            announceToScreenReader(`Filtered to ${filteredLocations.length} locations`);
        }

        // Filter locations
        function filterLocations(filter) {
            currentFilter = filter;
            
            // Update filter buttons
            document.querySelectorAll('.filter-btn').forEach(btn => {
                btn.classList.remove('active');
                btn.setAttribute('aria-selected', 'false');
            });
            
            const activeBtn = document.querySelector(`[data-filter="${filter}"]`);
            if (activeBtn) {
                activeBtn.classList.add('active');
                activeBtn.setAttribute('aria-selected', 'true');
            }
            
            applyFilters();
        }

        // Sort locations
        function sortLocations(sortBy) {
            currentSort = sortBy;
            
            filteredLocations.sort((a, b) => {
                switch (sortBy) {
                    case 'price-low':
                        return a.pricing.amount - b.pricing.amount;
                    case 'price-high':
                        return b.pricing.amount - a.pricing.amount;
                    case 'newest':
                        return new Date(b.openingDate || '2020-01-01') - new Date(a.openingDate || '2020-01-01');
                    case 'popular':
                        return (b.rating?.reviews || 0) - (a.rating?.reviews || 0);
                    case 'featured':
                    default:
                        return (b.featured ? 1 : 0) - (a.featured ? 1 : 0);
                }
            });
            
            renderLocations();
            updatePagination();
            addMarkersToMap();
        }

        // Set view mode
        function setView(view) {
            currentView = view;
            
            document.querySelectorAll('.view-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            
            document.querySelector(`[data-view="${view}"]`).classList.add('active');
            
            const grid = document.getElementById('locations-grid');
            const mapContainer = document.getElementById('map-container');
            
            if (view === 'map') {
                // Show only map on mobile/tablet
                if (window.innerWidth <= 1024) {
                    grid.style.display = 'none';
                    mapContainer.style.display = 'block';
                    mapContainer.style.position = 'relative';
                    mapContainer.style.height = '70vh';
                    mapContainer.style.top = '0';
                }
            } else {
                // Show grid/list view
                grid.style.display = 'grid';
                
                if (window.innerWidth <= 1024) {
                    mapContainer.style.display = 'none';
                }
                
                if (view === 'list') {
                    grid.style.gridTemplateColumns = '1fr';
                    grid.style.gap = '16px';
                    // Modify cards for list view
                    document.querySelectorAll('.location-card').forEach(card => {
                        card.style.display = 'flex';
                        card.style.height = 'auto';
                        const image = card.querySelector('.location-image');
                        if (image) {
                            image.style.width = '200px';
                            image.style.flexShrink = '0';
                        }
                    });
                } else {
                    grid.style.gridTemplateColumns = 'repeat(auto-fit, minmax(350px, 1fr))';
                    grid.style.gap = '24px';
                    // Reset cards for grid view
                    document.querySelectorAll('.location-card').forEach(card => {
                        card.style.display = 'block';
                        card.style.height = 'auto';
                        const image = card.querySelector('.location-image');
                        if (image) {
                            image.style.width = '100%';
                            image.style.flexShrink = 'initial';
                        }
                    });
                }
            }
            
            announceToScreenReader(`View changed to ${view}`);
        }

        // Search locations
        function searchLocations() {
            currentSearchTerm = document.getElementById('location-search').value.trim();
            applyFilters();
        }

        // Setup search functionality
        function setupSearch() {
            const searchInput = document.getElementById('location-search');
            if (searchInput) {
                searchInput.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        searchLocations();
                    }
                });
                
                // Real-time search with debounce
                let searchTimeout;
                searchInput.addEventListener('input', function() {
                    clearTimeout(searchTimeout);
                    searchTimeout = setTimeout(() => {
                        currentSearchTerm = this.value.trim();
                        applyFilters();
                    }, 300);
                });
            }
        }

        // Clear all filters
        function clearFilters() {
            currentFilter = 'all';
            currentSearchTerm = '';
            document.getElementById('location-search').value = '';
            document.getElementById('sort-locations').value = 'featured';
            
            document.querySelectorAll('.filter-btn').forEach(btn => {
                btn.classList.remove('active');
                btn.setAttribute('aria-selected', 'false');
            });
            
            document.querySelector('[data-filter="all"]').classList.add('active');
            document.querySelector('[data-filter="all"]').setAttribute('aria-selected', 'true');
            
            applyFilters();
            
            announceToScreenReader('Filters cleared, showing all locations');
        }

        // Pagination
        function getPaginatedLocations() {
            const startIndex<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Locations - Nest & Network | Premium Workspace Solutions</title>
    
    <!-- SEO Meta Tags -->
    <meta name="description" content="Discover Nest & Network's premium workspace locations across London, Manchester, Birmingham, and beyond. Enterprise-grade offices with flexible terms.">
    <meta name="keywords" content="coworking space, private offices, meeting rooms, workspace solutions, london office, manchester office">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://nestnetwork.com/locations">
    
    <!-- Open Graph -->
    <meta property="og:title" content="Premium Workspace Locations - Nest & Network">
    <meta property="og:description" content="Enterprise-grade workspace solutions across the UK's most prestigious business locations.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://nestnetwork.com/locations">
    
    <!-- Security Headers -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https://api.mapbox.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://api.mapbox.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https: blob:; connect-src 'self' https://api.mapbox.com;">
    <meta http-equiv="X-Content-Type-Options" content="nosniff">
    <meta http-equiv="X-Frame-Options" content="DENY">
    
    <!-- Mapbox -->
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css' rel='stylesheet' />
    
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <style>
        /* Design System - Minimal, Clean */
        :root {
            --black: #000000;
            --white: #ffffff;
            --gray-50: #fafafa;
            --gray-100: #f5f5f5;
            --gray-200: #e5e5e5;
            --gray-300: #d4d4d4;
            --gray-400: #a3a3a3;
            --gray-500: #737373;
            --gray-600: #525252;
            --gray-700: #404040;
            --gray-800: #262626;
            --gray-900: #171717;
            --violet: #5856eb;
            
            --border-radius: 6px;
            --transition: all 0.15s ease;
            --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        /* Reset */
        *, *::before, *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            line-height: 1.5;
            color: var(--black);
            background: var(--white);
            -webkit-font-smoothing: antialiased;
        }

        .skip-link {
            position: absolute;
            top: -40px;
            left: 6px;
            background: var(--black);
            color: var(--white);
            padding: 8px 16px;
            text-decoration: none;
            border-radius: var(--border-radius);
            font-weight: 600;
            z-index: 9999;
        }

        .skip-link:focus {
            top: 6px;
        }

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        /* Header - Clean & Minimal */
        .header {
            background: var(--white);
            border-bottom: 1px solid var(--gray-200);
            position: sticky;
            top: 0;
            z-index: 50;
        }

        .nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 24px;
            height: 72px;
        }

        .logo {
            font-size: 24px;
            font-weight: 700;
            color: var(--black);
            text-decoration: none;
            letter-spacing: -0.02em;
        }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 32px;
        }

        .nav-links a {
            color: var(--gray-600);
            text-decoration: none;
            font-weight: 500;
            font-size: 15px;
            transition: var(--transition);
        }

        .nav-links a:hover,
        .nav-links a[aria-current="page"] {
            color: var(--black);
        }

        .nav-actions {
            display: flex;
            gap: 12px;
            align-items: center;
        }

        .btn {
            padding: 10px 16px;
            border-radius: var(--border-radius);
            font-weight: 500;
            font-size: 14px;
            text-decoration: none;
            border: 1px solid;
            transition: var(--transition);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: transparent;
            font-family: inherit;
        }

        .btn-primary {
            background: var(--black);
            color: var(--white);
            border-color: var(--black);
        }

        .btn-primary:hover {
            background: var(--gray-800);
            border-color: var(--gray-800);
        }

        .btn-secondary {
            background: var(--white);
            color: var(--black);
            border-color: var(--gray-300);
        }

        .btn-secondary:hover {
            border-color: var(--black);
        }

        /* Hero - Refined */
        .hero {
            background: var(--black);
            color: var(--white);
            padding: 96px 24px;
            text-align: center;
        }

        .hero-content {
            max-width: 800px;
            margin: 0 auto;
        }

        .hero h1 {
            font-size: 48px;
            font-weight: 700;
            margin-bottom: 20px;
            letter-spacing: -0.02em;
            line-height: 1.1;
        }

        .hero p {
            font-size: 18px;
            opacity: 0.9;
            margin-bottom: 48px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .search-bar {
            display: flex;
            max-width: 480px;
            margin: 0 auto;
            background: var(--white);
            border-radius: 8px;
            padding: 4px;
            box-shadow: var(--shadow-lg);
        }

        .search-input {
            flex: 1;
            border: none;
            padding: 12px 16px;
            font-size: 15px;
            background: transparent;
            outline: none;
            color: var(--black);
        }

        .search-input::placeholder {
            color: var(--gray-500);
        }

        .search-btn {
            background: var(--black);
            color: var(--white);
            border: none;
            padding: 12px 20px;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
            white-space: nowrap;
            font-size: 14px;
        }

        /* Main Layout */
        .main-layout {
            max-width: 1400px;
            margin: 0 auto;
            padding: 64px 24px;
            display: grid;
            grid-template-columns: 1fr 400px;
            gap: 48px;
        }

        .locations-content {
            min-width: 0;
        }

        .section-header {
            margin-bottom: 40px;
        }

        .section-header h2 {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 12px;
            letter-spacing: -0.02em;
        }

        .section-header p {
            font-size: 16px;
            color: var(--gray-600);
        }

        /* Controls */
        .controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 32px;
            flex-wrap: wrap;
            gap: 20px;
        }

        .filters {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .filter-btn {
            padding: 8px 16px;
            border: 1px solid var(--gray-300);
            background: var(--white);
            color: var(--gray-600);
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            font-family: inherit;
        }

        .filter-btn:hover,
        .filter-btn.active {
            background: var(--black);
            color: var(--white);
            border-color: var(--black);
        }

        .view-controls {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .view-toggle {
            display: flex;
            background: var(--gray-100);
            border-radius: var(--border-radius);
            padding: 2px;
        }

        .view-btn {
            padding: 8px 10px;
            border: none;
            background: transparent;
            cursor: pointer;
            border-radius: 4px;
            transition: var(--transition);
            color: var(--gray-600);
        }

        .view-btn.active {
            background: var(--white);
            box-shadow: var(--shadow);
            color: var(--black);
        }

        .sort-select {
            padding: 8px 12px;
            border: 1px solid var(--gray-300);
            border-radius: var(--border-radius);
            background: var(--white);
            font-size: 14px;
            cursor: pointer;
            font-family: inherit;
        }

        /* Locations Grid */
        .locations-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 24px;
            margin-bottom: 40px;
        }

        .location-card {
            background: var(--white);
            border: 1px solid var(--gray-200);
            border-radius: var(--border-radius);
            overflow: hidden;
            transition: var(--transition);
            cursor: pointer;
        }

        .location-card:hover {
            border-color: var(--black);
            box-shadow: var(--shadow-lg);
        }

        .location-image {
            width: 100%;
            height: 200px;
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .location-badges {
            position: absolute;
            top: 12px;
            left: 12px;
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }

        .badge {
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .badge-available {
            background: var(--black);
            color: var(--white);
        }

        .badge-premium {
            background: var(--violet);
            color: var(--white);
        }

        .badge-coming-soon,
        .badge-coming-q2 {
            background: #f59e0b;
            color: var(--white);
        }

        .badge-popular {
            background: #10b981;
            color: var(--white);
        }

        .location-content {
            padding: 20px;
        }

        .location-header {
            margin-bottom: 12px;
        }

        .location-name {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 4px;
            letter-spacing: -0.01em;
        }

        .location-rating {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: var(--gray-600);
        }

        .stars {
            color: #fbbf24;
            font-size: 12px;
        }

        .location-address {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--gray-600);
            font-size: 13px;
            margin-bottom: 12px;
        }

        .location-description {
            color: var(--gray-700);
            margin-bottom: 16px;
            line-height: 1.5;
            font-size: 14px;
        }

        .location-amenities {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            margin-bottom: 20px;
        }

        .amenity {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            color: var(--gray-600);
        }

        .amenity-icon {
            width: 12px;
            height: 12px;
            background: var(--gray-400);
            border-radius: 2px;
            flex-shrink: 0;
        }

        .location-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 16px;
            border-top: 1px solid var(--gray-200);
        }

        .pricing {
            display: flex;
            align-items: baseline;
            gap: 4px;
        }

        .price {
            font-size: 24px;
            font-weight: 700;
            color: var(--black);
        }

        .price-period {
            font-size: 12px;
            color: var(--gray-600);
        }

        .location-actions {
            display: flex;
            gap: 8px;
        }

        .location-actions .btn {
            padding: 6px 12px;
            font-size: 12px;
        }

        /* Map Container */
        .map-container {
            position: sticky;
            top: 88px;
            height: calc(100vh - 104px);
            background: var(--gray-100);
            border-radius: var(--border-radius);
            overflow: hidden;
            border: 1px solid var(--gray-200);
        }

        #map {
            width: 100%;
            height: 100%;
        }

        /* Mapbox Popup Styling */
        .mapboxgl-popup-content {
            padding: 0;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-lg);
            border: 1px solid var(--gray-200);
            max-width: 280px;
        }

        .popup-content {
            padding: 16px;
        }

        .popup-content h3 {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .popup-content p {
            font-size: 13px;
            color: var(--gray-600);
            margin-bottom: 12px;
            line-height: 1.4;
        }

        .popup-content .price {
            font-size: 18px;
            font-weight: 700;
            color: var(--black);
            margin-bottom: 8px;
        }

        .popup-content .btn {
            width: 100%;
            justify-content: center;
            font-size: 12px;
            padding: 8px;
        }

        /* Mobile Map Toggle */
        .mobile-map-toggle {
            display: none;
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 100;
            border-radius: 50px;
            padding: 12px 20px;
            box-shadow: var(--shadow-lg);
        }

        /* Filter Chips with Remove */
        .active-filters {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }

        .filter-chip {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: var(--black);
            color: var(--white);
            border-radius: 16px;
            font-size: 12px;
            font-weight: 500;
        }

        .filter-chip-remove {
            background: none;
            border: none;
            color: var(--white);
            cursor: pointer;
            padding: 0;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
        }

        .filter-chip-remove:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        /* Pagination */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            margin-top: 40px;
        }

        .pagination-btn {
            padding: 8px 12px;
            border: 1px solid var(--gray-300);
            background: var(--white);
            color: var(--gray-600);
            cursor: pointer;
            border-radius: var(--border-radius);
            transition: var(--transition);
            font-size: 14px;
            font-family: inherit;
        }

        .pagination-btn:hover:not(:disabled) {
            border-color: var(--black);
            color: var(--black);
        }

        .pagination-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .pagination-info {
            color: var(--gray-600);
            font-size: 14px;
            margin: 0 16px;
        }

        /* Results Count */
        .results-count {
            color: var(--gray-600);
            font-size: 14px;
            margin-bottom: 8px;
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 80px 20px;
            color: var(--gray-600);
        }

        .empty-state h3 {
            font-size: 20px;
            margin-bottom: 8px;
        }

        /* Loading State */
        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 40px;
        }

        .spinner {
            width: 24px;
            height: 24px;
            border: 2px solid var(--gray-200);
            border-top: 2px solid var(--black);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .hidden {
            display: none;
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .main-layout {
                grid-template-columns: 1fr;
                gap: 32px;
            }
            
            .map-container {
                position: relative;
                top: 0;
                height: 400px;
                order: -1;
            }
        }

        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }
            
            .hero h1 {
                font-size: 32px;
            }
            
            .hero p {
                font-size: 16px;
            }
            
            .search-bar {
                flex-direction: column;
                border-radius: var(--border-radius);
                padding: 8px;
            }
            
            .search-btn {
                border-radius: var(--border-radius);
            }
            
            .controls {
                flex-direction: column;
                align-items: stretch;
                gap: 16px;
            }
            
            .view-controls {
                justify-content: space-between;
            }
            
            .locations-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- Skip Link -->
    <a href="#main-content" class="skip-link">Skip to main content</a>
    
    <!-- Live Region -->
    <div id="live-region" class="sr-only" aria-live="polite"></div>

    <!-- Header -->
    <header class="header">
        <nav class="nav" role="navigation" aria-label="Main navigation">
            <a href="/" class="logo">nest</a>
            
            <ul class="nav-links">
                <li><a href="/locations" aria-current="page">Locations</a></li>
                <li><a href="/spaces">Spaces</a></li>
                <li><a href="/memberships">Memberships</a></li>
                <li><a href="/network">Network</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
            
            <div class="nav-actions">
                <a href="/network/login" class="btn btn-secondary">Member Login</a>
                <a href="/contact" class="btn btn-primary">Book Tour</a>
            </div>
        </nav>
    </header>

    <!-- Hero -->
    <section class="hero">
        <div class="hero-content">
            <h1>Premium workspace locations across the UK</h1>
            <p>From London's financial district to Manchester's innovation quarter, discover enterprise-grade workspace solutions in the UK's most prestigious business locations.</p>
            
            <div class="search-bar">
                <input type="text" class="search-input" placeholder="Search locations, cities, or postcodes..." id="location-search" aria-label="Search locations">
                <button class="search-btn" type="button" onclick="searchLocations()">Search</button>
            </div>
        </div>
    </section>

    <!-- Main Layout -->
    <div class="main-layout" id="main-content">
        <!-- Locations Content -->
        <div class="locations-content">
            <div class="section-header">
                <h2>Our workspace locations</h2>
                <p>Enterprise-grade workspace solutions designed for ambitious teams and Fortune 500 companies.</p>
            </div>

            <!-- Controls -->
            <div class="controls">
                <div>
                    <div class="results-count" id="results-count">6 locations available</div>
                    
                    <!-- Active Filters -->
                    <div class="active-filters" id="active-filters"></div>
                    
                    <div class="filters" role="tablist" aria-label="Location filters">
                        <button class="filter-btn active" data-filter="all" role="tab" aria-selected="true" onclick="filterLocations('all')">All Locations</button>
                        <button class="filter-btn" data-filter="available" role="tab" aria-selected="false" onclick="filterLocations('available')">Available Now</button>
                        <button class="filter-btn" data-filter="premium" role="tab" aria-selected="false" onclick="filterLocations('premium')">Premium</button>
                        <button class="filter-btn" data-filter="coming" role="tab" aria-selected="false" onclick="filterLocations('coming')">Coming Soon</button>
                    </div>
                </div>
                
                <div class="view-controls">
                    <div class="view-toggle">
                        <button class="view-btn active" data-view="grid" onclick="setView('grid')" aria-label="Grid view">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                                <rect x="3" y="3" width="7" height="7"/>
                                <rect x="14" y="3" width="7" height="7"/>
                                <rect x="14" y="14" width="7" height="7"/>
                                <rect x="3" y="14" width="7" height="7"/>
                            </svg>
                        </button>
                        <button class="view-btn" data-view="list" onclick="setView('list')" aria-label="List view">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                                <line x1="8" y1="6" x2="21" y2="6"/>
                                <line x1="8" y1="12" x2="21" y2="12"/>
                                <line x1="8" y1="18" x2="21" y2="18"/>
                                <line x1="3" y1="6" x2="3.01" y2="6"/>
                                <line x1="3" y1="12" x2="3.01" y2="12"/>
                                <line x1="3" y1="18" x2="3.01" y2="18"/>
                            </svg>
                        </button>
                        <button class="view-btn" data-view="map" onclick="setView('map')" aria-label="Map view">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                            </svg>
                        </button>
                    </div>
                    
                    <select class="sort-select" id="sort-locations" onchange="sortLocations(this.value)" aria-label="Sort locations">
                        <option value="featured">Featured</option>
                        <option value="price-low">Price: Low to High</option>
                        <option value="price-high">Price: High to Low</option>
                        <option value="newest">Newest</option>
                        <option value="popular">Most Popular</option>
                    </select>
                </div>
            </div>

            <!-- Loading State -->
            <div id="loading" class="loading hidden">
                <div class="spinner"></div>
            </div>

            <!-- Locations Grid -->
            <div id="locations-grid" class="locations-grid" role="region" aria-label="Location listings" aria-live="polite">
                <!-- Locations will be dynamically inserted here -->
            </div>

            <!-- Pagination -->
            <div class="pagination" id="pagination">
                <button class="pagination-btn" id="prev-btn" onclick="changePage(-1)" disabled>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M15 18l-6-6 6-6"/>
                    </svg>
                    Previous
                </button>
                <span class="pagination-info">
                    Page <span id="current-page">1</span> of <span id="total-pages">1</span>
                </span>
                <button class="pagination-btn" id="next-btn" onclick="changePage(1)">
                    Next
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M9 18l6-6-6-6"/>
                    </svg>
                </button>
            </div>

            <!-- Empty State -->
            <div id="empty-state" class="empty-state hidden">
                <h3>No locations found</h3>
                <p>Try adjusting your search or filters.</p>
                <button class="btn btn-secondary" onclick="clearFilters()">Clear Filters</button>
            </div>
        </div>

        <!-- Map Container -->
        <div class="map-container" id="map-container">
            <div id="map"></div>
        </div>
    </div>

    <!-- Mobile Map Toggle -->
    <button class="mobile-map-toggle btn btn-primary" id="mobile-map-toggle" onclick="toggleMobileMap()">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
        </svg>
        Map
    </button>

    <script>
        // Mapbox Access Token (Replace with your token)
        mapboxgl.accessToken = 'pk.eyJ1IjoibmVzdG5ldHdvcmsiLCJhIjoiY2xyZGVtdmk2MWF6ZjJqbnl5Y28wZTZ6bCJ9.demo_token_replace_with_real';

        // Real location data
        const LOCATIONS_DATA = [
            {
                id: 'london-canary-wharf',
                name: 'Nest London Canary Wharf',
                city: 'London',
                address: 'One Canada Square, London E14 5AB',
                coordinates: [-0.0224, 51.5051],
                description: 'Premium enterprise workspace in London\'s financial district. Full-service amenities, dedicated account management, and flexible terms for Fortune 500 companies.',
                image: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=60',
                badges: ['Premium', 'Available'],
                pricing: { amount: 35, currency: '£', period: 'desk/day' },
                rating: { score: 4.9, reviews: 147 },
                amenities: ['1GB+ Fiber Internet', '24/7 Security', 'Executive Parking', 'Concierge Service'],
                tags: ['premium', 'available', 'enterprise'],
                featured: true
            },
            {
                id: 'london-shoreditch',
                name: 'Nest London Shoreditch',
                city: 'London',
                address: 'Old Street, London EC1V 9HX',
                coordinates: [-0.0863, 51.5254],
                description: 'Creative workspace in the heart of London\'s tech hub, perfect for startups and creative agencies seeking an innovative environment.',
                image: 'https://images.unsplash.com/photo-1497366754035-f200968a6e72?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=60',
                badges: ['Available', 'Popular'],
                pricing: { amount: 28, currency: '£', period: 'desk/day' },
                rating: { score: 4.7, reviews: 93 },
                amenities: ['1GB+ Fiber Internet', 'Phone Booths', 'Meeting Rooms', 'Event Space'],
                tags: ['available', 'popular', 'enterprise'],
                featured: true
            },
            {
                id: 'manchester-central',
                name: 'Nest Manchester Central',
                city: 'Manchester',
                address: 'Deansgate Square, Manchester M15 6JD',
                coordinates: [-2.2435, 53.4736],
                description: 'Strategic location in Manchester\'s business core. Enterprise-grade infrastructure with scalable solutions for teams of 5 to 500+ employees.',
                image: 'https://images.unsplash.com/photo-1449824913935-59a10b8d2000?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=60',
                badges: ['Available'],
                pricing: { amount: 22, currency: '£', period: 'desk/day' },
                rating: { score: 4.8, reviews: 76 },
                amenities: ['24/7 Access', 'Meeting Rooms', 'Phone Booths', 'Premium Coffee'],
                tags: ['available', 'enterprise'],
                featured: true
            },
            {
                id: 'glasgow-financial',
                name: 'Nest Glasgow Financial',
                city: 'Glasgow',
                address: 'Royal Exchange Square, Glasgow G1 3AB',
                coordinates: [-4.2486, 55.8587],
                description: 'Scotland\'s premier business address with comprehensive enterprise services. Custom buildouts available for large teams and multinational corporations.',
                image: 'https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=60',
                badges: ['Premium', 'Available'],
                pricing: { amount: 20, currency: '£', period: 'desk/day' },
                rating: { score: 4.7, reviews: 64 },
                amenities: ['Custom Buildouts', 'Airport Transfer', 'Executive Lounge', 'IT Support'],
                tags: ['premium', 'available', 'enterprise'],
                featured: true
            },
            {
                id: 'birmingham-innovation',
                name: 'Nest Birmingham Innovation',
                city: 'Birmingham',
                address: 'Colmore Business District, Birmingham B3 2TA',
                coordinates: [-1.8998, 52.4814],
                description: 'Modern enterprise facility designed for Fortune 500 companies and high-growth startups. Premium amenities and dedicated enterprise support.',
                image: 'https://images.unsplash.com/photo-1574282893982-ff8ac24b3561?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=60',
                badges: ['Coming Q2'],
                pricing: { amount: 25, currency: '£', period: 'desk/day' },
                rating: null,
                amenities: ['Event Spaces', 'Wellness Room', 'Broadcast Studio', 'Analytics Suite'],
                tags: ['coming', 'enterprise'],
                featured: false,
                openingDate: '2025-04-01'
            },
            {
                id: 'edinburgh-royal',
                name: 'Nest Edinburgh Royal Mile',
                city: 'Edinburgh',
                address: 'High Street, Edinburgh EH1 1TB',
                coordinates: [-3.1883, 55.9533],
                description: 'Historic charm meets modern workspace technology in Edinburgh\'s most iconic location. Perfect for companies seeking a prestigious Scottish address.',
                image: 'https://images.unsplash.com/photo-1555636222-cae831e670b3?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=60',
                badges: ['Available'],
                pricing: { amount: 24, currency: '£', period: 'desk/day' },
                rating: { score: 4.6, reviews: 42 },
                amenities: ['High-Speed Internet', '24/7 Security', 'Restaurant', 'Historic Building'],
                tags: ['available', 'enterprise'],
                featured: false
            }
        ];

        // Pagination
        function getPaginatedLocations() {
            const startIndex = (currentPage - 1) * itemsPerPage;
            const endIndex = startIndex + itemsPerPage;
            return filteredLocations.slice(startIndex, endIndex);
        }

        function updatePagination() {
            const totalPages = Math.ceil(filteredLocations.length / itemsPerPage);
            const prevBtn = document.getElementById('prev-btn');
            const nextBtn = document.getElementById('next-btn');
            const currentPageEl = document.getElementById('current-page');
            const totalPagesEl = document.getElementById('total-pages');
            const paginationEl = document.getElementById('pagination');

            if (totalPages <= 1) {
                paginationEl.style.display = 'none';
                return;
            }

            paginationEl.style.display = 'flex';
            currentPageEl.textContent = currentPage;
            totalPagesEl.textContent = totalPages;

            prevBtn.disabled = currentPage <= 1;
            nextBtn.disabled = currentPage >= totalPages;
        }

        function changePage(direction) {
            const totalPages = Math.ceil(filteredLocations.length / itemsPerPage);
            const newPage = currentPage + direction;

            if (newPage >= 1 && newPage <= totalPages) {
                currentPage = newPage;
                renderLocations();
                updatePagination();
                addMarkersToMap();

                // Scroll to top of results
                document.getElementById('locations-grid').scrollIntoView({ 
                    behavior: 'smooth', 
                    block: 'start' 
                });

                announceToScreenReader(`Page ${currentPage} of ${totalPages}`);
            }
        }

        // Render locations
        function renderLocations() {
            const grid = document.getElementById('locations-grid');
            const emptyState = document.getElementById('empty-state');
            const loading = document.getElementById('loading');

            loading.classList.add('hidden');

            if (filteredLocations.length === 0) {
                grid.classList.add('hidden');
                emptyState.classList.remove('hidden');
                return;
            }

            grid.classList.remove('hidden');
            emptyState.classList.add('hidden');

            const paginatedLocations = getPaginatedLocations();
            grid.innerHTML = paginatedLocations.map(location => createLocationCard(location)).join('');

            // Setup card click handlers
            setupCardHandlers();
        }

        // Create location card HTML
        function createLocationCard(location) {
            const badges = location.badges.map(badge => {
                const badgeClass = badge.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
                return `<span class="badge badge-${badgeClass}">${badge}</span>`;
            }).join('');

            const rating = location.rating 
                ? `<div class="location-rating">
                     <span class="stars">★★★★★</span>
                     <span>${location.rating.score} (${location.rating.reviews})</span>
                   </div>`
                : `<div class="location-rating">
                     <span style="color: var(--gray-500);">Opening Soon</span>
                   </div>`;

            const amenities = location.amenities.slice(0, 4).map(amenity => 
                `<div class="amenity">
                   <div class="amenity-icon"></div>
                   <span>${amenity}</span>
                 </div>`
            ).join('');

            return `
                <article class="location-card" data-location-id="${location.id}" tabindex="0" role="button" aria-label="View details for ${location.name}">
                    <div class="location-image" style="background-image: url('${location.image}')">
                        <div class="location-badges">${badges}</div>
                    </div>
                    <div class="location-content">
                        <div class="location-header">
                            <div>
                                <h3 class="location-name">${location.name}</h3>
                                ${rating}
                            </div>
                        </div>
                        <div class="location-address">
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                            </svg>
                            <span>${location.address}</span>
                        </div>
                        <p class="location-description">${location.description}</p>
                        <div class="location-amenities">${amenities}</div>
                        <div class="location-footer">
                            <div class="pricing">
                                <span class="price">${location.pricing.currency}${location.pricing.amount}</span>
                                <span class="price-period">/${location.pricing.period}</span>
                            </div>
                            <div class="location-actions">
                                <a href="/contact?location=${location.id}" class="btn btn-secondary" onclick="event.stopPropagation()">Book Tour</a>
                                <a href="/locations/${location.id}" class="btn btn-primary" onclick="event.stopPropagation()">View Details</a>
                            </div>
                        </div>
                    </div>
                </article>
            `;
        }

        // Setup card click handlers
        function setupCardHandlers() {
            document.querySelectorAll('.location-card').forEach(card => {
                card.addEventListener('click', function(e) {
                    if (!e.target.closest('.btn')) {
                        const locationId = this.dataset.locationId;
                        window.location.href = `/locations/${locationId}`;
                    }
                });

                card.addEventListener('keydown', function(e) {
                    if (e.key === 'Enter' || e.key === ' ') {
                        e.preventDefault();
                        if (!e.target.closest('.btn')) {
                            const locationId = this.dataset.locationId;
                            window.location.href = `/locations/${locationId}`;
                        }
                    }
                });
            });
        }

        // Update results count
        function updateResultsCount() {
            const count = filteredLocations.length;
            const resultsText = `${count} location${count !== 1 ? 's' : ''} available`;
            document.getElementById('results-count').textContent = resultsText;
        }

        // Announce to screen readers
        function announceToScreenReader(message) {
            const liveRegion = document.getElementById('live-region');
            if (liveRegion) {
                liveRegion.textContent = message;
                setTimeout(() => liveRegion.textContent = '', 1000);
            }
        }

        // URL state management
        function updateURL() {
            const params = new URLSearchParams();
            
            if (currentFilter !== 'all') {
                params.set('filter', currentFilter);
            }
            
            if (currentSearchTerm) {
                params.set('search', currentSearchTerm);
            }
            
            if (currentSort !== 'featured') {
                params.set('sort', currentSort);
            }
            
            if (currentView !== 'grid') {
                params.set('view', currentView);
            }
            
            if (currentPage > 1) {
                params.set('page', currentPage);
            }
            
            const newURL = window.location.pathname + (params.toString() ? '?' + params.toString() : '');
            window.history.replaceState(null, '', newURL);
        }

        // Load state from URL
        function loadFromURL() {
            const params = new URLSearchParams(window.location.search);
            
            if (params.has('filter')) {
                currentFilter = params.get('filter');
            }
            
            if (params.has('search')) {
                currentSearchTerm = params.get('search');
                document.getElementById('location-search').value = currentSearchTerm;
            }
            
            if (params.has('sort')) {
                currentSort = params.get('sort');
                document.getElementById('sort-locations').value = currentSort;
            }
            
            if (params.has('view')) {
                currentView = params.get('view');
            }
            
            if (params.has('page')) {
                currentPage = parseInt(params.get('page')) || 1;
            }
            
            // Update UI to reflect URL state
            if (currentFilter !== 'all') {
                document.querySelectorAll('.filter-btn').forEach(btn => {
                    btn.classList.remove('active');
                    btn.setAttribute('aria-selected', 'false');
                });
                
                const activeBtn = document.querySelector(`[data-filter="${currentFilter}"]`);
                if (activeBtn) {
                    activeBtn.classList.add('active');
                    activeBtn.setAttribute('aria-selected', 'true');
                }
            }
            
            if (currentView !== 'grid') {
                document.querySelectorAll('.view-btn').forEach(btn => {
                    btn.classList.remove('active');
                });
                
                const activeViewBtn = document.querySelector(`[data-view="${currentView}"]`);
                if (activeViewBtn) {
                    activeViewBtn.classList.add('active');
                }
            }
        }

        // Initialize from URL on page load
        document.addEventListener('DOMContentLoaded', function() {
            loadFromURL();
            applyFilters();
        });

        // Update URL whenever state changes
        function updateStateAndURL() {
            updateURL();
        }

        // Add URL updating to state-changing functions
        const originalFilterLocations = filterLocations;
        filterLocations = function(filter) {
            originalFilterLocations(filter);
            updateStateAndURL();
        };

        const originalSortLocations = sortLocations;
        sortLocations = function(sortBy) {
            originalSortLocations(sortBy);
            updateStateAndURL();
        };

        const originalSetView = setView;
        setView = function(view) {
            originalSetView(view);
            updateStateAndURL();
        };

        const originalChangePage = changePage;
        changePage = function(direction) {
            originalChangePage(direction);
            updateStateAndURL();
        };

        // Loading states for better UX
        function showLoading() {
            document.getElementById('loading').classList.remove('hidden');
            document.getElementById('locations-grid').classList.add('hidden');
        }

        function hideLoading() {
            document.getElementById('loading').classList.add('hidden');
            document.getElementById('locations-grid').classList.remove('hidden');
        }

        // Enhanced search with loading
        const originalSearchLocations = searchLocations;
        searchLocations = function() {
            showLoading();
            setTimeout(() => {
                originalSearchLocations();
                hideLoading();
                updateStateAndURL();
            }, 200); // Brief loading state for better UX
        };

        // Keyboard shortcuts
        document.addEventListener('keydown', function(e) {
            // ESC to clear search
            if (e.key === 'Escape') {
                if (document.getElementById('location-search') === document.activeElement) {
                    clearFilters();
                }
            }
            
            // Arrow keys for pagination (when not in input)
            if (!['INPUT', 'TEXTAREA', 'SELECT'].includes(e.target.tagName)) {
                if (e.key === 'ArrowLeft' && currentPage > 1) {
                    e.preventDefault();
                    changePage(-1);
                } else if (e.key === 'ArrowRight' && currentPage < Math.ceil(filteredLocations.length / itemsPerPage)) {
                    e.preventDefault();
                    changePage(1);
                }
            }
        });
    </script>
</body>
</html>

        // Initialize Mapbox map
        function initializeMap() {
            try {
                map = new mapboxgl.Map({
                    container: 'map',
                    style: 'mapbox://styles/mapbox/light-v11',
                    center: [-2.5, 54.0], // Center of UK
                    zoom: 5.5
                });

                map.on('load', function() {
                    addMarkersToMap();
                });

                // Add navigation controls
                map.addControl(new mapboxgl.NavigationControl(), 'top-right');
            } catch (error) {
                console.warn('Mapbox failed to initialize:', error);
                // Fallback: show message in map container
                document.getElementById('map').innerHTML = `
                    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--gray-600); text-align: center; padding: 40px;">
                        <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor" style="margin-bottom: 16px;">
                            <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                        </svg>
                        <h3 style="margin-bottom: 8px;">Interactive Map</h3>
                        <p>Explore our premium workspace locations across the UK</p>
                    </div>
                `;
            }
        }

        // Add markers to map
        function addMarkersToMap() {
            if (!map) return;

            // Clear existing markers
            markers.forEach(marker => marker.remove());
            markers = [];

            filteredLocations.forEach(location => {
                // Create custom marker
                const el = document.createElement('div');
                el.className = 'marker';
                el.style.width = '12px';
                el.style.height = '12px';
                el.style.borderRadius = '50%';
                el.style.backgroundColor = '#000';
                el.style.border = '2px solid #fff';
                el.style.cursor = 'pointer';
                el.style.boxShadow = '0 2px 4px rgba(0,0,0,0.3)';

                // Create popup
                const popup = new mapboxgl.Popup({ offset: 25 })
                    .setHTML(`
                        <div class="popup-content">
                            <h3>${location.name}</h3>
                            <p>${location.description.substring(0, 100)}...</p>
                            <div class="price">${location.pricing.currency}${location.pricing.amount}/${location.pricing.period}</div>
                            <a href="/locations/${location.id}" class="btn btn-primary">View Details</a>
                        </div>
                    `);

                // Add marker to map
                const marker = new mapboxgl.Marker(el)
                    .setLngLat(location.coordinates)
                    .setPopup(popup)
                    .addTo(map);

                markers.push(marker);
            });
        }

        // Filter locations
        function filterLocations(filter) {
            currentFilter = filter;
            
            // Update filter buttons
            document.querySelectorAll('.filter-btn').forEach(btn => {
                btn.classList.remove('active');
                btn.setAttribute('aria-selected', 'false');
            });
            
            const activeBtn = document.querySelector(`[data-filter="${filter}"]`);
            if (activeBtn) {
                activeBtn.classList.add('active');
                activeBtn.setAttribute('aria-selected', 'true');
            }
            
            // Apply filter
            if (filter === 'all') {
                filteredLocations = [...LOCATIONS_DATA];
            } else {
                filteredLocations = LOCATIONS_DATA.filter(location => {
                    if (filter === 'available') {
                        return location.badges.some(badge => badge.toLowerCase().includes('available'));
                    } else if (filter === 'premium') {
                        return location.badges.some(badge => badge.toLowerCase().includes('premium'));
                    } else if (filter === 'coming') {
                        return location.badges.some(badge => badge.toLowerCase().includes('coming'));
                    }
                    return location.tags.includes(filter);
                });
            }
            
            sortLocations(currentSort);
            renderLocations();
            updateResultsCount();
            addMarkersToMap();
            
            announceToScreenReader(`Filtered to ${filteredLocations.length} locations`);
        }

        // Sort locations
        function sortLocations(sortBy) {
            currentSort = sortBy;
            
            filteredLocations.sort((a, b) => {
                switch (sortBy) {
                    case 'price-low':
                        return a.pricing.amount - b.pricing.amount;
                    case 'price-high':
                        return b.pricing.amount - a.pricing.amount;
                    case 'newest':
                        return new Date(b.openingDate || '2020-01-01') - new Date(a.openingDate || '2020-01-01');
                    case 'popular':
                        return (b.rating?.reviews || 0) - (a.rating?.reviews || 0);
                    case 'featured':
                    default:
                        return (b.featured ? 1 : 0) - (a.featured ? 1 : 0);
                }
            });
            
            renderLocations();
        }

        // Set view mode
        function setView(view) {
            currentView = view;
            
            document.querySelectorAll('.view-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            
            document.querySelector(`[data-view="${view}"]`).classList.add('active');
            
            const grid = document.getElementById('locations-grid');
            if (view === 'list') {
                grid.style.gridTemplateColumns = '1fr';
                grid.style.gap = '16px';
                // Modify cards for list view
                document.querySelectorAll('.location-card').forEach(card => {
                    card.style.display = 'flex';
                    card.style.height = 'auto';
                    const image = card.querySelector('.location-image');
                    if (image) {
                        image.style.width = '200px';
                        image.style.flexShrink = '0';
                    }
                });
            } else {
                grid.style.gridTemplateColumns = 'repeat(auto-fit, minmax(350px, 1fr))';
                grid.style.gap = '24px';
                // Reset cards for grid view
                document.querySelectorAll('.location-card').forEach(card => {
                    card.style.display = 'block';
                    card.style.height = 'auto';
                    const image = card.querySelector('.location-image');
                    if (image) {
                        image.style.width = '100%';
                        image.style.flexShrink = 'initial';
                    }
                });
            }
            
            announceToScreenReader(`View changed to ${view}`);
        }

        // Search locations
        function searchLocations() {
            const searchTerm = document.getElementById('location-search').value.toLowerCase().trim();
            
            if (!searchTerm) {
                filteredLocations = [...LOCATIONS_DATA];
            } else {
                filteredLocations = LOCATIONS_DATA.filter(location => 
                    location.name.toLowerCase().includes(searchTerm) ||
                    location.city.toLowerCase().includes(searchTerm) ||
                    location.address.toLowerCase().includes(searchTerm) ||
                    location.description.toLowerCase().includes(searchTerm)
                );
            }
            
            renderLocations();
            updateResultsCount();
            addMarkersToMap();
            
            announceToScreenReader(`Search returned ${filteredLocations.length} locations`);
        }

        // Setup search functionality
        function setupSearch() {
            const searchInput = document.getElementById('location-search');
            if (searchInput) {
                searchInput.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        searchLocations();
                    }
                });
                
                // Real-time search with debounce
                let searchTimeout;
                searchInput.addEventListener('input', function() {
                    clearTimeout(searchTimeout);
                    searchTimeout = setTimeout(searchLocations, 300);
                });
            }
        }

        // Clear all filters
        function clearFilters() {
            currentFilter = 'all';
            document.getElementById('location-search').value = '';
            document.getElementById('sort-locations').value = 'featured';
            
            document.querySelectorAll('.filter-btn').forEach(btn => {
                btn.classList.remove('active');
                btn.setAttribute('aria-selected', 'false');
            });
            
            document.querySelector('[data-filter="all"]').classList.add('active');
            document.querySelector('[data-filter="all"]').setAttribute('aria-selected', 'true');
            
            filteredLocations = [...LOCATIONS_DATA];
            sortLocations('featured');
            renderLocations();
            updateResultsCount();
            addMarkersToMap();
            
            announceToScreenReader('Filters cleared, showing all locations');
        }

        // Render locations
        function renderLocations() {
            const grid = document.getElementById('locations-grid');
            const emptyState = document.getElementById('empty-state');
            
            if (filteredLocations.length === 0) {
                grid.classList.add('hidden');
                emptyState.classList.remove('hidden');
                return;
            }
            
            grid.classList.remove('hidden');
            emptyState.classList.add('hidden');
            
            grid.innerHTML = filteredLocations.map(location => createLocationCard(location)).join('');
            
            // Setup card click handlers
            setupCardHandlers();
        }

        // Create location card HTML
        function createLocationCard(location) {
            const badges = location.badges.map(badge => {
                const badgeClass = badge.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
                return `<span class="badge badge-${badgeClass}">${badge}</span>`;
            }).join('');
            
            const rating = location.rating 
                ? `<div class="location-rating">
                     <span class="stars">★★★★★</span>
                     <span>${location.rating.score} (${location.rating.reviews})</span>
                   </div>`
                : `<div class="location-rating">
                     <span style="color: var(--gray-500);">Opening Soon</span>
                   </div>`;
            
            const amenities = location.amenities.map(amenity => 
                `<div class="amenity">
                   <div class="amenity-icon"></div>
                   <span>${amenity}</span>
                 </div>`
            ).join('');
            
            return `
                <article class="location-card" data-location-id="${location.id}" tabindex="0" role="button" aria-label="View details for ${location.name}">
                    <div class="location-image" style="background-image: url('${location.image}')">
                        <div class="location-badges">${badges}</div>
                    </div>
                    <div class="location-content">
                        <div class="location-header">
                            <div>
                                <h3 class="location-name">${location.name}</h3>
                                ${rating}
                            </div>
                        </div>
                        <div class="location-address">
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                            </svg>
                            <span>${location.address}</span>
                        </div>
                        <p class="location-description">${location.description}</p>
                        <div class="location-amenities">${amenities}</div>
                        <div class="location-footer">
                            <div class="pricing">
                                <span class="price">${location.pricing.currency}${location.pricing.amount}</span>
                                <span class="price-period">/${location.pricing.period}</span>
                            </div>
                            <div class="location-actions">
                                <a href="/contact?location=${location.id}" class="btn btn-secondary" onclick="event.stopPropagation()">Book Tour</a>
                                <a href="/locations/${location.id}" class="btn btn-primary" onclick="event.stopPropagation()">View Details</a>
                            </div>
                        </div>
                    </div>
                </article>
            `;
        }

        // Setup card click handlers
        function setupCardHandlers() {
            document.querySelectorAll('.location-card').forEach(card => {
                card.addEventListener('click', function(e) {
                    if (!e.target.closest('.btn')) {
                        const locationId = this.dataset.locationId;
                        window.location.href = `/locations/${locationId}`;
                    }
                });
                
                card.addEventListener('keydown', function(e) {
                    if (e.key === 'Enter' || e.key === ' ') {
                        e.preventDefault();
                        if (!e.target.closest('.btn')) {
                            const locationId = this.dataset.locationId;
                            window.location.href = `/locations/${locationId}`;
                        }
                    }
                });
            });
        }

        // Update results count
        function updateResultsCount() {
            const count = filteredLocations.length;
            const resultsText = `${count} location${count !== 1 ? 's' : ''} available`;
            document.getElementById('results-count').textContent = resultsText;
        }

        // Announce to screen readers
        function announceToScreenReader(message) {
            const liveRegion = document.getElementById('live-region');
            if (liveRegion) {
                liveRegion.textContent = message;
                setTimeout(() => liveRegion.textContent = '', 1000);
            }
        }
    </script>
</body>
</html>