<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    
    <!-- PWA Meta Tags -->
    <meta name="theme-color" content="#0D9488" />
    <meta name="background-color" content="#F0FDFA" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="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="PharmaHadir" />
    
    <!-- App Description -->
    <meta name="description" content="PharmaHadir - One-Stop event management system for invitation management, attendance tracking, reports and e-certificate generation" />
    <meta name="keywords" content="invitation, events, RSVP, attendance, certificates, management" />
    
    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="PharmaHadir - Event Management System" />
    <meta property="og:description" content="One-Stop event management system" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="/logo512.png" />
    
    <!-- Apple Touch Icons -->
    <link rel="apple-touch-icon" href="/logo192.png" />
    <link rel="apple-touch-icon" sizes="192x192" href="/logo192.png" />
    <link rel="apple-touch-icon" sizes="512x512" href="/logo512.png" />
    
    <!-- Manifest -->
    <link rel="manifest" href="/manifest.json" />
    
    <title>PharmaHadir - One-Stop Event Management System</title>
    
    <!-- Critical CSS for initial load -->
    <style>
      /* Loading screen styles */
      #initial-loading {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #0D9488 0%, #06B6D4 100%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        color: white;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      }
      
      .loading-logo {
        width: 80px;
        height: 80px;
        margin-bottom: 24px;
        border-radius: 16px;
        background: white;
        padding: 16px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      }
      
      .loading-spinner {
        width: 32px;
        height: 32px;
        border: 3px solid rgba(255, 255, 255, 0.3);
        border-top: 3px solid white;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-top: 16px;
      }
      
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      
      .loading-text {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 8px;
      }
      
      .loading-subtitle {
        font-size: 14px;
        opacity: 0.8;
        text-align: center;
        max-width: 280px;
      }
      
      /* Hide loading when app is ready */
      body.app-loaded #initial-loading {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease-out;
      }
    </style>
    <script type="module" crossorigin src="/assets/index-CZMh2f7C.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-DIg_c-v_.css">
  </head>
  <body>
    <!-- Initial Loading Screen -->
    <div id="initial-loading">
      <div class="loading-logo">
        <img src="/logo192.png" alt="PharmaHadir" style="width: 100%; height: 100%; object-fit: contain;" />
      </div>
      <div class="loading-text">PharmaHadir</div>
      <div class="loading-subtitle">One-Stop Event Management System</div>
      <div class="loading-spinner"></div>
    </div>

    <noscript>
      <div style="text-align: center; padding: 40px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
        <h2>JavaScript Required</h2>
        <p>You need to enable JavaScript to run PharmaHadir.</p>
        <p>Please enable JavaScript in your browser settings and reload the page.</p>
      </div>
    </noscript>
    
    <div id="root"></div>
    
    <!-- Remove loading screen when app loads -->
    <script>
      // Public routes that should skip the splash screen
      const publicRoutes = ['/links/', '/register', '/register/', '/rsvp', '/attendance', '/nominate-manual/', '/hod-evaluate-manual/', '/getcertificate/'];
      const isPublicRoute = publicRoutes.some(route => window.location.pathname.startsWith(route));
      
      if (isPublicRoute) {
        // Immediately hide splash for public pages
        const loading = document.getElementById('initial-loading');
        if (loading) loading.remove();
      } else {
        // Normal splash behavior for protected routes
        window.addEventListener('load', () => {
          setTimeout(() => {
            document.body.classList.add('app-loaded');
            setTimeout(() => {
              const loading = document.getElementById('initial-loading');
              if (loading) loading.remove();
            }, 300);
          }, 500);
        });
      }
    </script>
  </body>
  <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&family=Montserrat&family=Lato&family=Roboto&family=Merriweather&family=Playfair+Display&family=EB+Garamond&family=Great+Vibes&family=Allura&family=Dancing+Script&family=Sacramento&family=Alex+Brush&family=Rouge+Script&display=swap" rel="stylesheet">
</html>