<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <title>Track and Manage Your Quran Reading</title>
    <meta name="description" content="KhatmaApp - Track and manage your Quran reading progress. Join khatmas, track your daily reading, and connect with others on their Quran journey." />
    <meta name="author" content="KhatmaApp Team" />

    <!-- Preload LCP logo for both themes to satisfy LCP discovery -->
    <link
      rel="preload"
      as="image"
      href="/khatma-logo-256.avif"
      imagesrcset="/khatma-logo-48.avif 48w, /khatma-logo-64.avif 64w, /khatma-logo-96.avif 96w, /khatma-logo-128.avif 128w, /khatma-logo-256.avif 256w, /khatma-logo-384.avif 384w"
      imagesizes="256px"
      fetchpriority="high"
      media="(prefers-color-scheme: light)"
    />
    <link
      rel="preload"
      as="image"
      href="/khatma-logo-light-256.avif"
      imagesrcset="/khatma-logo-light-48.avif 48w, /khatma-logo-light-64.avif 64w, /khatma-logo-light-96.avif 96w, /khatma-logo-light-128.avif 128w, /khatma-logo-light-256.avif 256w, /khatma-logo-light-384.avif 384w"
      imagesizes="256px"
      fetchpriority="high"
      media="(prefers-color-scheme: dark)"
    />

    <!-- Critical: Initialize theme and language BEFORE React loads to prevent layout shifts -->
    <script>
      (function() {
        try {
          // Initialize theme class immediately to prevent flash
          let savedTheme = null;
          try {
            savedTheme = localStorage.getItem('khatma_theme');
          } catch (e) {
            // localStorage may be disabled in private browsing mode
          }
          
          let theme = savedTheme;
          if (!theme) {
            // Check system preference for new users
            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
              theme = 'dark';
            } else {
              theme = 'dark'; // Fallback to dark
            }
          }
          document.documentElement.classList.add(theme);

          // Initialize language direction immediately to prevent RTL/LTR shift
          let savedLang = 'en';
          try {
            savedLang = localStorage.getItem('khatma_language') || localStorage.getItem('i18nextLng') || 'en';
          } catch (e) {
            // localStorage may be disabled - use default
          }
          const isRTL = savedLang === 'ar' || savedLang.startsWith('ar');
          document.documentElement.dir = isRTL ? 'rtl' : 'ltr';
          document.documentElement.lang = isRTL ? 'ar' : 'en';

          // Ensure Arabic fonts are available even in English UI (Arabic text entries look consistent).
          // Inter is loaded unconditionally later.
          const ensureLink = (id, href) => {
            if (document.getElementById(id)) return;
            const link = document.createElement('link');
            link.id = id;
            link.rel = 'stylesheet';
            link.href = href;
            document.head.appendChild(link);
          };
          ensureLink(
            'font-noto-sans-arabic',
            'https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;700&display=swap'
          );
          if (isRTL) {
            ensureLink(
              'font-tajawal',
              'https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap'
            );
          }
        } catch (error) {
          // Fallback: ensure at least dark theme is applied
          document.documentElement.classList.add('dark');
          document.documentElement.dir = 'ltr';
          document.documentElement.lang = 'en';
        }
      })();
    </script>

    <!-- Critical CSS: Prevent layout shifts during initial render -->
    <style>
      /* Prevent FOUC and layout shifts */
      html {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      }
      
      /* Reserve space for root element */
      #root {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
      }
      
      /* Prevent layout shift for body */
      body {
        margin: 0;
        padding: 0;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
      }
      
      /* Prevent layout shift during font loading */
      * {
        font-display: swap;
      }
      
      /* Reserve space for images to prevent CLS */
      img {
        max-width: 100%;
        height: auto;
        display: block;
      }
      
      /* Prevent layout shift for loading states */
      [data-loading] {
        min-height: 200px;
      }
      
      /* Smooth theme transitions */
      html {
        transition: background-color 0.2s ease, color 0.2s ease;
      }

      /* App shell placeholder (shown before React mounts) */
      #app-shell {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: 16px;
      }

      #app-shell .app-shell-card {
        width: min(28rem, 92vw);
        border-radius: 16px;
        padding: 24px 20px;
        text-align: center;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
      }

      html.dark #app-shell .app-shell-card {
        background: rgba(24, 31, 42, 0.92);
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.12);
      }

      html:not(.dark) #app-shell .app-shell-card {
        background: rgba(255, 255, 255, 0.92);
        color: #111827;
        border: 1px solid rgba(17, 24, 39, 0.10);
      }

      #app-shell .app-shell-logo {
        display: block;
        width: 96px;
        height: 96px;
        margin: 0 auto 14px;
        -o-object-fit: contain;
           object-fit: contain;
      }

      html.dark #app-shell .app-shell-logo--light {
        display: none;
      }

      html:not(.dark) #app-shell .app-shell-logo--dark {
        display: none;
      }

      #app-shell .app-shell-title {
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 0.2px;
        margin-bottom: 6px;
      }

      #app-shell .app-shell-subtitle {
        font-size: 13px;
        opacity: 0.85;
      }

      html[dir='rtl'] #app-shell .app-shell-loading--en {
        display: none;
      }

      html:not([dir='rtl']) #app-shell .app-shell-loading--ar {
        display: none;
      }
    </style>

    <!-- PWA Meta Tags -->
    <meta name="theme-color" content="#0E6E4C" />
    <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="KhatmaApp" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="application-name" content="KhatmaApp" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-TileColor" content="#0E6E4C" />
    <meta name="msapplication-tap-highlight" content="no" />

    <!-- Suppress browser extension messages - MUST be in head before extensions inject -->
    <script>
      (function() {
        const isLocalhost =
          window.location.hostname === 'localhost' ||
          window.location.hostname === '127.0.0.1' ||
          window.location.hostname.includes('localhost');

        const shouldEnableSuppression = (function() {
          if (!isLocalhost) return false;
          try {
            const params = new URLSearchParams(window.location.search);
            if (params.get('suppress_console') === '1' || params.get('suppress_console') === 'true') return true;
          } catch (e) {}
          try {
            return localStorage.getItem('khatma_suppress_console') === 'true';
          } catch (e) {}
          return false;
        })();

        if (shouldEnableSuppression) {
          const originalWarn = console.warn;
          const originalError = console.error;
          const originalLog = console.log;
          
          // Filter browser extension messages - check all arguments
          const extensionPatterns = [
            'CONTENT_SHELL',
            'TSS:',
            'SCHJK:',
            'Content Script Bridge',
            'injection-tss',
            'MBTSS:',
            'DFP:',
            'Breach notification',
            'Search Hijacking',
            'MSG_CHECK_DOMAIN_ALLOW_LIST_RESPONSE'
          ];
          
          const shouldSuppress = (...args) => {
            // Check all arguments, not just the first one
            return args.some(arg => {
              if (typeof arg === 'string') {
                return extensionPatterns.some(pattern => arg.includes(pattern));
              }
              // Also check stringified objects
              try {
                const str = JSON.stringify(arg);
                return extensionPatterns.some(pattern => str.includes(pattern));
              } catch (e) {
                return false;
              }
            });
          };
          
          console.warn = function(...args) {
            if (args.length > 0) {
              const firstArg = args[0];
              if (typeof firstArg === 'string' && 
                  (firstArg.includes('Something has shimmed the React DevTools global hook') ||
                   firstArg.includes('Fast Refresh is not compatible'))) {
                return;
              }
              if (shouldSuppress(...args)) {
                return;
              }
            }
            originalWarn.apply(console, args);
          };
          
          console.error = function(...args) {
            if (args.length > 0) {
              const firstArg = args[0];
              if (typeof firstArg === 'string' && 
                  (firstArg.includes('Something has shimmed the React DevTools global hook') ||
                   firstArg.includes('Fast Refresh is not compatible'))) {
                return;
              }
              if (shouldSuppress(...args)) {
                return;
              }
            }
            originalError.apply(console, args);
          };
          
          console.log = function(...args) {
            if (shouldSuppress(...args)) {
              return;
            }
            originalLog.apply(console, args);
          };
        }
      })();
    </script>

    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="Khatma App - Track Your Quran Reading Progress" />
    <meta property="og:description" content="Join, track, and complete Quran readings together with Khatma App. Collaborate with others on your spiritual journey." />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="https://khatma-app.vercel.app/khatma-og-image.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:url" content="https://khatma-app.vercel.app" />
    <meta property="og:site_name" content="Khatma App" />
    <meta property="og:locale" content="en_US" />
    <meta property="og:locale:alternate" content="ar_SA" />

    <!-- Twitter Meta Tags -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@khatmaapp" />
    <meta name="twitter:title" content="Khatma App - Track Your Quran Reading Progress" />
    <meta name="twitter:description" content="Join, track, and complete Quran readings together with Khatma App." />
    <meta name="twitter:image" content="https://khatma-app.vercel.app/khatma-og-image.png" />
    
    <!-- Additional SEO Meta Tags -->
    <meta name="application-name" content="Khatma App" />
    <meta name="apple-mobile-web-app-title" content="Khatma App" />
    <!-- Duplicate msapplication-TileColor removed (keep single value above). -->
    <meta name="msapplication-config" content="/browserconfig.xml" />
    
    <!-- Language and Region -->
    <meta name="language" content="English" />
    <meta name="geo.region" content="US" />
    <meta name="geo.placename" content="Global" />
    
    <!-- Content Security -->
    <meta name="referrer" content="strict-origin-when-cross-origin" />

    <!-- Preconnect to Google Fonts and Supabase for better performance -->
    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="dns-prefetch" href="https://api.supabase.co">
    <link rel="dns-prefetch" href="https://fonts.googleapis.com">
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    
    <!-- Preload critical resources -->
    <!-- Note: Favicon preload removed - browsers handle favicon loading automatically -->
    <!-- and favicon may change dynamically based on theme, so preload is unnecessary -->
    <!-- Logo preload handled via static <link rel="preload"> tags above -->
    <!-- Manifest.json doesn't need preload - already linked normally below -->
    
    <!-- Load fonts asynchronously with display=swap for better performance -->
    <!-- Using media="print" trick: browser loads CSS but doesn't block rendering -->
    <!-- onload switches media to "all" when loaded, making it non-blocking -->
    <!-- display=swap prevents layout shift by using fallback font first -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;700&display=swap"></noscript>
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"></noscript>
    <!-- Tajawal is loaded dynamically when lang is RTL (see early init script). -->
    
    <!-- Favicon and App Icons -->
    <link rel="icon" type="image/png" href="/favicon-96x96.png" id="favicon">
    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    
    <!-- Performance: Preload critical resources -->
    <!-- Note: modulepreload removed - Vite handles this automatically and manual preload can cause issues -->
    
    <!-- Performance: Reduce layout shifts by reserving space early -->
    <script>
      // Early performance optimizations - runs before React loads
      (function() {
        // Reduce layout shifts by setting viewport height early
        function setViewportHeight() {
          const vh = window.innerHeight * 0.01;
          document.documentElement.style.setProperty('--vh', vh + 'px');
        }
        setViewportHeight();
        
        // Use passive event listener for better performance
        let resizeTimeout;
        window.addEventListener('resize', function() {
          clearTimeout(resizeTimeout);
          resizeTimeout = setTimeout(setViewportHeight, 150);
        }, { passive: true });
        
        // Optimize rendering performance with requestIdleCallback
        if ('requestIdleCallback' in window) {
          requestIdleCallback(function() {
            // Preconnect to critical domains during idle time
            const domains = ['https://api.supabase.co'];
            domains.forEach(domain => {
              const link = document.createElement('link');
              link.rel = 'preconnect';
              link.href = domain;
              link.crossOrigin = 'anonymous';
              document.head.appendChild(link);
            });
          }, { timeout: 2000 });
        }
        
        // Optimize long tasks by yielding to browser
        if ('scheduler' in window && 'postTask' in window.scheduler) {
          // Use scheduler.postTask for better task prioritization
          window.__optimizeTask = function(callback) {
            return window.scheduler.postTask(callback, { priority: 'user-blocking' });
          };
        }
        
        // Optimize rendering by breaking up long tasks
        if ('requestIdleCallback' in window) {
          window.__yieldToMain = function() {
            return new Promise(resolve => {
              requestIdleCallback(resolve, { timeout: 1 });
            });
          };
        } else {
          // Fallback: use setTimeout
          window.__yieldToMain = function() {
            return new Promise(resolve => setTimeout(resolve, 0));
          };
        }
        
        // Optimize scroll performance with passive listeners
        let passiveSupported = false;
        try {
          const opts = Object.defineProperty({}, 'passive', {
            get: function() {
              passiveSupported = true;
              return true;
            }
          });
          window.addEventListener('test', null, opts);
          window.removeEventListener('test', null, opts);
        } catch (e) {}
        
        if (passiveSupported) {
          window.__usePassiveListeners = true;
        }
        
        // Preload critical images during idle time (only if they'll be used)
        // Removed logo preload - logos are conditionally loaded based on theme/route
        // This prevents "preloaded but not used" warnings
      })();
    </script>
    <script type="module" crossorigin src="/assets/js/index-DnUXYdR8.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/js/supabase-auth-Bj50LOo4.js">
    <link rel="modulepreload" crossorigin href="/assets/js/utils-UBjVSYn4.js">
    <link rel="modulepreload" crossorigin href="/assets/js/vendor-DU8rZOUQ.js">
    <link rel="modulepreload" crossorigin href="/assets/js/ui-primitive-Dc_FVRD7.js">
    <link rel="modulepreload" crossorigin href="/assets/js/ui-react-compose-refs-p23a1rH1.js">
    <link rel="modulepreload" crossorigin href="/assets/js/ui-react-context-B-dGB8ej.js">
    <link rel="modulepreload" crossorigin href="/assets/js/ui-react-collection-CZ1mmQx7.js">
    <link rel="modulepreload" crossorigin href="/assets/js/ui-react-primitive-CNj--hex.js">
    <link rel="modulepreload" crossorigin href="/assets/js/ui-react-use-callback-ref-Ce6KwJ_s.js">
    <link rel="modulepreload" crossorigin href="/assets/js/ui-react-use-escape-keydown-Cy-GP_oc.js">
    <link rel="modulepreload" crossorigin href="/assets/js/ui-react-dismissable-layer-lplprROZ.js">
    <link rel="modulepreload" crossorigin href="/assets/js/ui-react-use-layout-effect-CVLLWFyj.js">
    <link rel="modulepreload" crossorigin href="/assets/js/ui-react-portal-dvjzEm2f.js">
    <link rel="modulepreload" crossorigin href="/assets/js/ui-react-presence-D7oK0mHT.js">
    <link rel="modulepreload" crossorigin href="/assets/js/ui-react-use-controllable-state-bHM2qPln.js">
    <link rel="modulepreload" crossorigin href="/assets/js/ui-react-visually-hidden-DrqB6GkL.js">
    <link rel="modulepreload" crossorigin href="/assets/js/ui-react-toast--UVlmUOK.js">
    <link rel="modulepreload" crossorigin href="/assets/js/icons-DZ2MZruQ.js">
    <link rel="modulepreload" crossorigin href="/assets/js/ui-react-id-OwlMLhxB.js">
    <link rel="modulepreload" crossorigin href="/assets/js/ui-react-arrow-CJe-Em7a.js">
    <link rel="modulepreload" crossorigin href="/assets/js/ui-react-use-size-9bEkT4Gc.js">
    <link rel="modulepreload" crossorigin href="/assets/js/ui-react-popper-C08Fq8bQ.js">
    <link rel="modulepreload" crossorigin href="/assets/js/ui-react-tooltip-vvuqXWF1.js">
    <link rel="modulepreload" crossorigin href="/assets/js/vendor-@tanstack-D30o07SK.js">
    <link rel="modulepreload" crossorigin href="/assets/js/supabase-rest-CUD8gYsA.js">
    <link rel="modulepreload" crossorigin href="/assets/js/supabase-realtime-woXIoiBO.js">
    <link rel="modulepreload" crossorigin href="/assets/js/supabase-storage-Cl62C73E.js">
    <link rel="modulepreload" crossorigin href="/assets/js/supabase-functions-DY5dhjgS.js">
    <link rel="modulepreload" crossorigin href="/assets/js/supabase-core-B54Q1FHo.js">
    <link rel="modulepreload" crossorigin href="/assets/js/ui-react-slot-Mw-DWVxI.js">
    <link rel="modulepreload" crossorigin href="/assets/js/ui-react-focus-guards-Da78aSeW.js">
    <link rel="modulepreload" crossorigin href="/assets/js/ui-react-focus-scope-DYbtHOe9.js">
    <link rel="modulepreload" crossorigin href="/assets/js/ui-react-dialog-ERW1vfc-.js">
    <link rel="modulepreload" crossorigin href="/assets/js/ui-react-popover-B54V2cFc.js">
    <link rel="modulepreload" crossorigin href="/assets/js/ui-react-direction-BP44UNKY.js">
    <link rel="modulepreload" crossorigin href="/assets/js/ui-number-BdQq_4o_.js">
    <link rel="modulepreload" crossorigin href="/assets/js/ui-react-scroll-area-Bg-n2GRn.js">
    <link rel="modulepreload" crossorigin href="/assets/js/ui-react-separator-SS5DX9V4.js">
    <link rel="stylesheet" crossorigin href="/assets/css/vendor-ComhdInD.css">
    <link rel="stylesheet" crossorigin href="/assets/css/index-Cy76IB4t.css">
  <link rel="manifest" href="/manifest.webmanifest"></head>

  <body>
    <div id="root">
      <div id="app-shell" role="status" aria-live="polite" aria-busy="true">
        <div class="app-shell-card">
          <img
            class="app-shell-logo app-shell-logo--light"
            src="/khatma-logo-256.avif"
            width="96"
            height="96"
            alt="KhatmaApp"
            fetchpriority="high"
            decoding="async"
          />
          <img
            class="app-shell-logo app-shell-logo--dark"
            src="/khatma-logo-light-256.avif"
            width="96"
            height="96"
            alt="KhatmaApp"
            fetchpriority="high"
            decoding="async"
          />
          <div class="app-shell-title">KhatmaApp</div>
          <div class="app-shell-subtitle">
            <span class="app-shell-loading app-shell-loading--en">Loading…</span>
            <span class="app-shell-loading app-shell-loading--ar">جارٍ التحميل…</span>
          </div>
        </div>
      </div>
    </div>
    <!-- IMPORTANT: DO NOT REMOVE THIS SCRIPT TAG OR THIS VERY COMMENT! -->
    <!-- Defer third-party script to improve initial load performance -->
    <script>
      // Load gptengineer.js after page is interactive
      const shouldLoadGptEngineer =
        window.location.search.includes('gpteng=1') ||
        (function() {
          try {
            return localStorage.getItem('enable_gptengineer') === 'true';
          } catch (e) {
            return false;
          }
        })();

      if (shouldLoadGptEngineer) {
        if ('requestIdleCallback' in window) {
          requestIdleCallback(function() {
            const script = document.createElement('script');
            script.src = 'https://cdn.gpteng.co/gptengineer.js';
            script.type = 'module';
            script.async = true;
            document.body.appendChild(script);
          }, { timeout: 3000 });
        } else {
          // Fallback: load after page load
          window.addEventListener('load', function() {
            setTimeout(function() {
              const script = document.createElement('script');
              script.src = 'https://cdn.gpteng.co/gptengineer.js';
              script.type = 'module';
              script.async = true;
              document.body.appendChild(script);
            }, 2000);
          });
        }
      }
    </script>
    <!-- Suppress React DevTools warning and browser extension messages in development -->
    <script>
      (function() {
        const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
        const shouldEnableSuppression = (function() {
          if (!isLocalhost) return false;
          try {
            const params = new URLSearchParams(window.location.search);
            if (params.get('suppress_console') === '1' || params.get('suppress_console') === 'true') return true;
          } catch (e) {}
          try {
            return localStorage.getItem('khatma_suppress_console') === 'true';
          } catch (e) {}
          return false;
        })();

        if (shouldEnableSuppression) {
          const originalWarn = console.warn;
          const originalError = console.error;
          const originalLog = console.log;
          
          // Filter browser extension messages - check all arguments
          const extensionPatterns = [
            'CONTENT_SHELL',
            'TSS:',
            'SCHJK:',
            'Content Script Bridge',
            'injection-tss',
            'MBTSS:',
            'DFP:',
            'Breach notification',
            'Search Hijacking',
            'MSG_CHECK_DOMAIN_ALLOW_LIST_RESPONSE'
          ];
          
          const shouldSuppress = (...args) => {
            // Check all arguments, not just the first one
            return args.some(arg => {
              if (typeof arg === 'string') {
                return extensionPatterns.some(pattern => arg.includes(pattern));
              }
              // Also check stringified objects
              try {
                const str = JSON.stringify(arg);
                return extensionPatterns.some(pattern => str.includes(pattern));
              } catch (e) {
                return false;
              }
            });
          };
          
          console.warn = function(...args) {
            if (args.length > 0) {
              const firstArg = args[0];
              if (typeof firstArg === 'string' && 
                  (firstArg.includes('Something has shimmed the React DevTools global hook') ||
                   firstArg.includes('Fast Refresh is not compatible'))) {
                return;
              }
              if (shouldSuppress(...args)) {
                return;
              }
            }
            originalWarn.apply(console, args);
          };
          
          console.error = function(...args) {
            if (args.length > 0) {
              const firstArg = args[0];
              if (typeof firstArg === 'string' && 
                  (firstArg.includes('Something has shimmed the React DevTools global hook') ||
                   firstArg.includes('Fast Refresh is not compatible'))) {
                return;
              }
              if (shouldSuppress(...args)) {
                return;
              }
            }
            originalError.apply(console, args);
          };
          
          console.log = function(...args) {
            if (shouldSuppress(...args)) {
              return;
            }
            originalLog.apply(console, args);
          };
        }
      })();
    </script>
  </body>
</html>
