<!DOCTYPE html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="icon" type="image/png" sizes="32x32" href="/icon-192.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/icon-192.png" />
    <title>النائب | مجلس النواب المصري</title>

    <!-- PWA -->
    <link rel="manifest" href="/manifest.json" />
    <meta name="theme-color" content="#ffffff" />
    <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="النائب" />
    <link rel="apple-touch-icon" href="/icon-192.png" />

    <!-- Splash screen background -->
    <style>
      html, body, #root { margin: 0; padding: 0; background: #ffffff; }
    </style>
    <script type="module" crossorigin src="/assets/index-BhdsT1na.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-BPTT_GeM.css">
  </head>
  <body>
    <!-- Static splash shown instantly before React loads -->
    <div id="static-splash" style="
      position:fixed;inset:0;background:#fff;z-index:99999;
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      font-family:sans-serif;direction:rtl;transition:opacity 0.4s ease;
    ">
      <div id="splash-logo" style="
        width:100px;height:100px;border-radius:50%;overflow:hidden;
        margin-bottom:20px;box-shadow:0 4px 20px rgba(0,0,0,0.1);
        background:#f3f4f6;display:flex;align-items:center;justify-content:center;
      ">
        <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="1.5">
          <circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>
        </svg>
      </div>
      <p style="font-size:17px;font-weight:700;color:#1f2937;margin:0 0 8px">الموقع الرسمي للنائب</p>
      <p style="font-size:13px;color:#6b7280;margin:0">موقع خدمة المواطنين</p>
      <div style="display:flex;gap:6px;margin-top:28px">
        <div class="sdot"></div><div class="sdot" style="animation-delay:.2s"></div><div class="sdot" style="animation-delay:.4s"></div>
      </div>
    </div>
    <style>
      .sdot{width:8px;height:8px;border-radius:50%;background:#d1d5db;animation:sd 1.2s ease-in-out infinite}
      @keyframes sd{0%,80%,100%{transform:scale(.7);opacity:.4}40%{transform:scale(1);opacity:1}}
    </style>
    <div id="root"></div>
    <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
          navigator.serviceWorker.register('/sw.js');
        });
      }
    </script>
  </body>
</html>
