<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    
    <!-- Security Headers -->
    <meta http-equiv="X-Content-Type-Options" content="nosniff" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>Mobility Age App</title>
    <meta name="description" content="Discover your mobility age with AI-powered movement analysis and personalized exercise recommendations">

    <!-- Preconnect to external domains for faster model loading -->
    <link rel="preconnect" href="https://www.kaggle.com" crossorigin>
    <link rel="preconnect" href="https://storage.googleapis.com" crossorigin>
    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
    
    <!-- PWA Basic Metadata - using the icons you already have -->
    <link rel="icon" href="/icons/32.png" type="image/png" sizes="32x32" />
    <link rel="icon" href="/icons/192.png" type="image/png" sizes="192x192" />
    <link rel="icon" href="/icons/512.png" type="image/png" sizes="512x512" />
    
    <!-- iOS PWA specific tags -->
    <link rel="apple-touch-icon" href="/icons/180.png" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="Mobility Age" />
    
    <!-- iOS splash screens -->
    <link rel="apple-touch-startup-image" href="/splash/apple-splash-2048-2732.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
    <link rel="apple-touch-startup-image" href="/splash/apple-splash-1668-2388.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
    <link rel="apple-touch-startup-image" href="/splash/apple-splash-1536-2048.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
    <link rel="apple-touch-startup-image" href="/splash/apple-splash-1125-2436.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" />
    <link rel="apple-touch-startup-image" href="/splash/apple-splash-1242-2688.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" />
    <link rel="apple-touch-startup-image" href="/splash/apple-splash-828-1792.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
    <link rel="apple-touch-startup-image" href="/splash/apple-splash-1242-2208.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" />
    <link rel="apple-touch-startup-image" href="/splash/apple-splash-750-1334.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
    <link rel="apple-touch-startup-image" href="/splash/apple-splash-640-1136.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
    
    <!-- Web App Manifest -->
    <link rel="manifest" href="/manifest.json" />
    <meta name="theme-color" content="#fdfcfb" />
    
    <!-- PWA installation related meta tags -->
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="application-name" content="Mobility Age" />
    
    <!-- Critical CSS -->
    <style>
      /* Essential styles with vendor prefixes */
      html {
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        text-size-adjust: 100%;
      }
      
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter var', system-ui, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #fdfcfb; /* bg-primary */
        color: #1a1918; /* text-primary */
        overflow-x: hidden;
      }
      
      #root {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
      }
      
      /* Light theme splash screen */
      .splash-screen {
        background: #fdfcfb; /* Solid light background matching app */
        /* Alternative: subtle gradient
        background: linear-gradient(135deg, #fdfcfb 0%, #f9f8f7 40%, #faf8ff 70%, #fdfcfb 100%);
        */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      }
      
      /* Optional logo with subtle shadow */
      .splash-logo {
        width: 80px;
        height: 80px;
        margin-bottom: 2rem;
        -webkit-filter: drop-shadow(0 4px 12px rgba(168, 85, 247, 0.15));
                filter: drop-shadow(0 4px 12px rgba(168, 85, 247, 0.15));
        -webkit-animation: float 6s ease-in-out infinite;
                animation: float 6s ease-in-out infinite;
      }
      
      .splash-title {
        font-size: 3.5rem;
        font-weight: 800;
        text-align: center;
        margin-bottom: 0.5rem;
        letter-spacing: -0.025em;
        font-family: 'Clash Display', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
        /* Purple gradient text */
        background: linear-gradient(135deg, #9333ea 0%, #a855f7 50%, #c084fc 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        /* Alternative: solid dark text
        color: #1a1918;
        */
      }
      
      .splash-subtitle {
        font-size: 1.25rem;
        color: #545250; /* text-secondary */
        text-align: center;
        max-width: 80%;
        margin-bottom: 3rem;
        font-weight: 400;
        line-height: 1.625;
      }
      
      /* Light theme spinner */
      .loading-spinner {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 4px solid #e5e3e1; /* neutral-300 - light gray */
        border-top-color: #a855f7; /* primary-500 - purple */
        -webkit-animation: spin 1s linear infinite;
        animation: spin 1s linear infinite;
      }
      
      /* Add subtle decoration */
      .splash-decoration {
        position: absolute;
        top: -10%;
        right: -10%;
        width: 40%;
        height: 40%;
        background: radial-gradient(circle, rgba(168, 85, 247, 0.08) 0%, transparent 70%);
        border-radius: 50%;
        -webkit-filter: blur(60px);
                filter: blur(60px);
        pointer-events: none;
      }
      
      /* Animations */
      @-webkit-keyframes spin {
        to { -webkit-transform: rotate(360deg); }
      }
      
      @keyframes spin {
        to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
      }
      
      @-webkit-keyframes float {
        0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
        50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
      }
      
      @keyframes float {
        0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
        50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
      }
      
      /* Mobile optimizations */
      @media (max-width: 640px) {
        .splash-logo {
          width: 60px;
          height: 60px;
          margin-bottom: 1.5rem;
        }
        
        .splash-title {
          font-size: 2.5rem;
          margin-bottom: 0.375rem;
        }
        
        .splash-subtitle {
          font-size: 1.125rem;
          margin-bottom: 2rem;
          max-width: 90%;
        }
        
        .loading-spinner {
          width: 40px;
          height: 40px;
          border-width: 3px;
        }
        
        .splash-decoration {
          width: 60%;
          height: 60%;
          top: -20%;
          right: -20%;
        }
      }
      
      @media (max-width: 375px) {
        .splash-title {
          font-size: 2rem;
        }
        
        .splash-subtitle {
          font-size: 1rem;
        }
      }
    </style>
    
    <!-- Initialize theme early to prevent flashes -->
    <script>
      // Initialize theme object before React loads
      window.__THEME_INITIALIZED__ = false;
      window.__THEME__ = null;
    </script>
    
    <!-- Main stylesheet -->
    <link rel="stylesheet" href="/tailwind.css" />
    <script type="module" crossorigin src="/assets/index.BkjPnfvo.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/react-vendor.Dwr_8Mir.js">
    <link rel="modulepreload" crossorigin href="/assets/firebase.Bz0exAWJ.js">
    <link rel="modulepreload" crossorigin href="/assets/tensorflow.BfAQuZgH.js">
    <link rel="modulepreload" crossorigin href="/assets/ui.B67Iu0sT.js">
    <link rel="stylesheet" crossorigin href="/assets/index.hMFG1ihq.css">
  <link rel="manifest" href="/manifest.webmanifest"></head>
  <body>
    <div id="root">
      <!-- Light theme splash screen -->
      <div id="splash-screen" class="splash-screen">
        <!-- Subtle background decoration -->
        <div class="splash-decoration"></div>
        
        <!-- Uncomment to add logo -->
        <!-- <img src="/icons/192.png" alt="Mobility Age" class="splash-logo" /> -->
        
        <h1 class="splash-title">Mobility Age</h1>
        <p class="splash-subtitle">Discover your mobility age with AI-powered movement analysis</p>
        <div class="loading-spinner"></div>
      </div>
    </div>
    
    <!-- Scripts -->
    
    <!-- Stripe.js for payment processing -->
    <script src="https://js.stripe.com/v3/"></script>
    
    <!-- Fallback for browsers that don't support JavaScript -->
    <noscript>
      <div style="padding: 2rem; text-align: center; font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; background: #fdfcfb; color: #1a1918;">
        <h1 style="font-size: 2rem; margin-bottom: 1rem; color: #1a1918;">JavaScript Required</h1>
        <p style="font-size: 1.125rem; color: #545250;">This application requires JavaScript to function properly. Please enable JavaScript in your browser settings and reload the page.</p>
      </div>
    </noscript>
    
    <!-- Enhanced splash screen hiding with smooth transition -->
    <script>
      // Function to hide splash screen
      function hideSplashScreen() {
        const splashScreen = document.getElementById('splash-screen');
        if (splashScreen && splashScreen.style.display !== 'none') {
          splashScreen.style.opacity = '0';
          setTimeout(function() {
            splashScreen.style.display = 'none';
          }, 500);
        }
      }
      
      // Hide splash screen once window is loaded
      window.addEventListener('load', function() {
        // Give React a moment to initialize
        setTimeout(hideSplashScreen, 800);
      });
      
      // Backup: Hide splash screen after max 3 seconds
      setTimeout(hideSplashScreen, 3000);
      
      // Also hide when React app signals it's ready (optional)
      window.addEventListener('app-ready', hideSplashScreen);
    </script>
  </body>
</html>
