<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    
    <!-- Primary Meta Tags -->
    <title>Curaçao Cruise Map - Offline Downtown Guide</title>
    <meta name="title" content="Curaçao Cruise Map - Offline Downtown Guide">
    <meta name="description" content="Complete offline map of downtown Willemstad for cruise tourists. Works without internet connection!">
    <meta name="keywords" content="curacao map, willemstad map, cruise tourist, offline map, downtown curacao, caribbean map">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://curacaomap.city/">
    <meta property="og:title" content="Curaçao Cruise Map - Offline Downtown Guide">
    <meta property="og:description" content="Complete offline map of downtown Willemstad for cruise tourists. Works without internet connection!">
    <meta property="og:image" content="https://curacaomap.city/assets/images/og-image.jpg">
    
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://curacaomap.city/">
    <meta property="twitter:title" content="Curaçao Cruise Map - Offline Downtown Guide">
    <meta property="twitter:description" content="Complete offline map of downtown Willemstad for cruise tourists. Works without internet connection!">
    <meta property="twitter:image" content="https://curacaomap.city/assets/images/twitter-image.jpg">
    
    <!-- PWA Meta Tags -->
    <meta name="application-name" content="Curaçao Map">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="Curaçao Map">
    <meta name="msapplication-TileColor" content="#4A90E2">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="theme-color" content="#4A90E2">
    
    <!-- iOS Splash Screens -->
    <link rel="apple-touch-startup-image" href="assets/splash/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
    <link rel="apple-touch-startup-image" href="assets/splash/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)">
    <link rel="apple-touch-startup-image" href="assets/splash/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)">
    <link rel="apple-touch-startup-image" href="assets/splash/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)">
    <link rel="apple-touch-startup-image" href="assets/splash/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)">
    
    <!-- Icons -->
    <link rel="icon" type="image/png" sizes="32x32" href="assets/icons/icon-32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/icons/icon-16.png">
    <link rel="apple-touch-icon" href="assets/icons/icon-152.png">
    <link rel="apple-touch-icon" sizes="152x152" href="assets/icons/icon-152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/icons/icon-180.png">
    <link rel="apple-touch-icon" sizes="167x167" href="assets/icons/icon-167.png">
    
    <!-- Manifest -->
    <link rel="manifest" href="manifest.json">
    
    <!-- Preload critical resources -->
    <link rel="preload" href="vendor/maplibre-gl.5.6.0.css" as="style">
    <link rel="preload" href="vendor/maplibre-gl.5.6.0.js" as="script">
    <link rel="preload" href="vendor/maplibre-gl-dev.5.6.0.js" as="script">
    <link rel="preload" href="vendor/pmtiles.4.3.0.js" as="script">
    
    <!-- MapLibre GL CSS -->
    <link href="vendor/maplibre-gl.5.6.0.css" rel="stylesheet">
    
    <!-- App Styles -->
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #FFDAA8;
            overflow: hidden;
            touch-action: manipulation;
        }
        
        #map {
            width: 100vw;
            height: 100vh;
            position: relative;
        }
        
        /* Loading screen */
        .loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #FFDAA8 0%, #4A90E2 100%);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            color: white;
            text-align: center;
        }
        
        .loading-screen.hidden {
            display: none;
        }
        
        .loading-logo {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 1rem;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }
        
        .loading-text {
            font-size: 1.1rem;
            margin-bottom: 2rem;
            opacity: 0.9;
        }
        
        .loading-progress {
            width: 250px;
            height: 4px;
            background: rgba(255,255,255,0.3);
            border-radius: 2px;
            overflow: hidden;
            margin-bottom: 1rem;
        }
        
        .loading-progress-bar {
            height: 100%;
            background: white;
            border-radius: 2px;
            transition: width 0.3s ease;
            width: 0%;
        }
        
        .loading-status {
            font-size: 0.9rem;
            opacity: 0.8;
            min-height: 1.5rem;
        }
        
        /* PWA Install prompt */
        .install-prompt {
            position: fixed;
            bottom: 20px;
            left: 20px;
            right: 20px;
            background: white;
            padding: 1rem;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            display: none;
            z-index: 1000;
        }
        
        .install-prompt.show {
            display: block;
            animation: slideUp 0.3s ease;
        }
        
        @keyframes slideUp {
            from { transform: translateY(100%); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        .install-prompt h3 {
            margin: 0 0 0.5rem 0;
            color: #4A90E2;
            font-size: 1.1rem;
        }
        
        .install-prompt p {
            margin: 0 0 1rem 0;
            color: #666;
            font-size: 0.9rem;
        }
        
        .install-buttons {
            display: flex;
            gap: 0.5rem;
        }
        
        .btn {
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 4px;
            font-size: 0.9rem;
            cursor: pointer;
            flex: 1;
        }
        
        .btn-primary {
            background: #4A90E2;
            color: white;
        }
        
        .btn-secondary {
            background: #f0f0f0;
            color: #666;
        }
        
        /* Offline indicator */
        .offline-indicator {
            position: fixed;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            background: #ff4444;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.85rem;
            z-index: 1000;
            display: none;
        }
        
        .offline-indicator.show {
            display: block;
            animation: slideDown 0.3s ease;
        }

        /* Search box */
        #searchContainer {
            position: fixed;
            top: 60px;
            right: 10px;
            z-index: 1000;
        }

        #searchInput {
            width: 180px;
            padding: 0.4rem;
            border-radius: 4px;
            border: none;
            outline: none;
        }

        #searchResults {
            list-style: none;
            margin: 4px 0 0 0;
            padding: 0;
            background: white;
            border-radius: 4px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
            max-height: 200px;
            overflow-y: auto;
        }

        #searchResults li {
            padding: 0.4rem;
            border-bottom: 1px solid #eee;
            cursor: pointer;
        }

        #searchResults li:last-child {
            border-bottom: none;
        }

        #searchResults li:hover {
            background: #f3f3f3;
        }
        
        @keyframes slideDown {
            from { transform: translate(-50%, -100%); }
            to { transform: translate(-50%, 0); }
        }
        
        /* Update notification */
        .update-notification {
            position: fixed;
            bottom: 20px;
            left: 20px;
            right: 20px;
            background: #4A90E2;
            color: white;
            padding: 1rem;
            border-radius: 8px;
            display: none;
            z-index: 1000;
        }
        
        .update-notification.show {
            display: block;
            animation: slideUp 0.3s ease;
        }
        
        @media (max-width: 480px) {
            .loading-logo {
                font-size: 2rem;
            }
            
            .loading-text {
                font-size: 1rem;
                padding: 0 1rem;
            }
            
            .loading-progress {
                width: 200px;
            }
        }
    </style>
</head>
<body>
    <!-- Loading Screen -->
    <div class="loading-screen" id="loadingScreen">
        <div class="loading-logo">🏝️ Curaçao Map</div>
        <div class="loading-text">Preparing your offline guide to downtown Willemstad...</div>
        <div class="loading-progress">
            <div class="loading-progress-bar" id="progressBar"></div>
        </div>
        <div class="loading-status" id="loadingStatus">Initializing...</div>
    </div>
    
    <!-- Offline Indicator -->
    <div class="offline-indicator" id="offlineIndicator">
        📶 Offline Mode - All features still work!
    </div>

    <!-- Search Box -->
    <div id="searchContainer">
        <input type="text" id="searchInput" placeholder="Search..." autocomplete="off" />
        <ul id="searchResults"></ul>
    </div>
    
    <!-- Update Notification -->
    <div class="update-notification" id="updateNotification">
        <div style="margin-bottom: 0.5rem;">
            <strong>🎉 New content available!</strong>
        </div>
        <div style="font-size: 0.9rem; margin-bottom: 1rem;">
            Updated restaurants and attractions have been downloaded.
        </div>
        <button class="btn btn-primary" onclick="refreshApp()" style="width: 100%;">
            Refresh App
        </button>
    </div>
    
    <!-- PWA Install Prompt -->
    <div class="install-prompt" id="installPrompt">
        <h3>📱 Install Curaçao Map</h3>
        <p>Add to your home screen for quick access during your visit!</p>
        <div class="install-buttons">
            <button class="btn btn-primary" id="installButton">Install</button>
            <button class="btn btn-secondary" id="dismissButton">Later</button>
        </div>
    </div>
    
    <!-- Main Map Container -->
    <div id="map"></div>
    
    <!-- Three.js Import Map -->
    <script type="importmap">
        {
            "imports": {
                "three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js",
                "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/"
            }
        }
    </script>
    
    <!-- Mobile Debug Console (Eruda) - Remove after debugging -->
    <script src="https://cdn.jsdelivr.net/npm/eruda"></script>
    <script>eruda.init();</script>
    
    <!-- Critical Scripts -->
    <script src="vendor/maplibre-gl-dev.5.6.0.js"></script>
    <script src="vendor/pmtiles.4.3.0.js"></script>
    
    <!-- Service Worker Registration -->
    <script>
        // Service Worker Registration
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/sw.js')
                    .then((registration) => {
                        console.log('SW registered: ', registration);
                        
                        // Listen for service worker updates
                        registration.addEventListener('updatefound', () => {
                            const newWorker = registration.installing;
                            newWorker.addEventListener('statechange', () => {
                                if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
                                    showUpdateNotification();
                                }
                            });
                        });
                    })
                    .catch((registrationError) => {
                        console.log('SW registration failed: ', registrationError);
                    });
                
                // Listen for messages from service worker
                navigator.serviceWorker.addEventListener('message', event => {
                    const { type, data } = event.data;
                    
                    switch (type) {
                        case 'SW_READY':
                            console.log('Service Worker ready');
                            break;
                        case 'FRESH_CONTENT_AVAILABLE':
                            console.log('Fresh content available:', data.url);
                            break;
                        case 'NEW_CONTENT_AVAILABLE':
                            showUpdateNotification();
                            break;
                    }
                });
            });
        }
        
        // PWA Install Prompt
        let deferredPrompt;
        let installPromptShown = false;
        
        window.addEventListener('beforeinstallprompt', (e) => {
            e.preventDefault();
            deferredPrompt = e;
            
            // Show install prompt after user has interacted with the map
            setTimeout(() => {
                if (!installPromptShown) {
                    showInstallPrompt();
                }
            }, 30000); // 30 seconds
        });
        
        // Online/Offline Detection
        window.addEventListener('online', () => {
            hideOfflineIndicator();
            console.log('Back online');
        });
        
        window.addEventListener('offline', () => {
            showOfflineIndicator();
            console.log('Gone offline');
        });
        
        // Utility Functions
        function updateProgress(percent, status) {
            const progressBar = document.getElementById('progressBar');
            const loadingStatus = document.getElementById('loadingStatus');
            
            progressBar.style.width = percent + '%';
            loadingStatus.textContent = status;
        }
        
        function hideLoadingScreen() {
            const loadingScreen = document.getElementById('loadingScreen');
            loadingScreen.classList.add('hidden');
        }
        
        function showInstallPrompt() {
            if (deferredPrompt && !installPromptShown) {
                const installPrompt = document.getElementById('installPrompt');
                installPrompt.classList.add('show');
                installPromptShown = true;
                
                document.getElementById('installButton').addEventListener('click', async () => {
                    deferredPrompt.prompt();
                    const { outcome } = await deferredPrompt.userChoice;
                    console.log('Install prompt outcome:', outcome);
                    hideInstallPrompt();
                    deferredPrompt = null;
                });
                
                document.getElementById('dismissButton').addEventListener('click', () => {
                    hideInstallPrompt();
                });
            }
        }
        
        function hideInstallPrompt() {
            const installPrompt = document.getElementById('installPrompt');
            installPrompt.classList.remove('show');
        }
        
        function showOfflineIndicator() {
            const indicator = document.getElementById('offlineIndicator');
            indicator.classList.add('show');
        }
        
        function hideOfflineIndicator() {
            const indicator = document.getElementById('offlineIndicator');
            indicator.classList.remove('show');
        }
        
        function showUpdateNotification() {
            const notification = document.getElementById('updateNotification');
            notification.classList.add('show');
        }
        
        function refreshApp() {
            window.location.reload();
        }
        
        // Initialize offline indicator if already offline
        if (!navigator.onLine) {
            showOfflineIndicator();
        }
    </script>
    
    <!-- Main Application Script -->
    <script type="module" src="index.js"></script>
    <script type="module" src="search.js"></script>
</body>
</html>