<!DOCTYPE html>
<html lang="en">

<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->
  <base href="/">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="theme-color" content="#0D0D11">
  <meta name="description" content="SicFit Experts - Elevate client success. Manage workouts, check-ins, nutrition, and coaching plans.">
  <meta name="keywords" content="SicFit, fitness coach, personal trainer, workout plans, client check-in, nutrition tracking">

  <!-- OpenGraph / Facebook / LinkedIn -->
  <meta property="og:type" content="website">
  <meta property="og:title" content="SicFit Experts — Coach Management Portal">
  <meta property="og:description" content="Elevate client success. Manage workouts, check-ins, nutrition, and coaching plans.">
  <meta property="og:image" content="icons/Icon-192.png">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="SicFit Experts — Coach Management Portal">
  <meta name="twitter:description" content="Elevate client success. Manage workouts, check-ins, nutrition, and coaching plans.">
  <meta name="twitter:image" content="icons/Icon-192.png">

  <!-- Performance Resource Hints: Preconnect to CDNs to eliminate DNS/TLS latency -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="preconnect" href="https://unpkg.com">
  <link rel="dns-prefetch" href="https://maps.googleapis.com">
  <link rel="dns-prefetch" href="https://cdnjs.cloudflare.com">

  <!-- Critical LCP Preload -->
  <link rel="preload" href="icons/Icon-192.png" as="image" fetchpriority="high">
  <link rel="preload" href="flutter_bootstrap.js" as="script">

  <!-- iOS meta tags & icons -->
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="SicFit Experts">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png" />

  <title>SicFit Experts</title>
  <link rel="manifest" href="manifest.json">

  <!-- Instant Preloader Styles (Zero Network Dependencies for Sub-300ms First Contentful Paint) -->
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body, html {
      background-color: #0D0D11;
      height: 100%;
      width: 100%;
      overflow: hidden;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }
    #loading-indicator {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #0D0D11;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 999999;
      transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .loader-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .brand-logo-container {
      position: relative;
      width: 84px;
      height: 84px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .brand-logo {
      width: 72px;
      height: 72px;
      border-radius: 18px;
      object-fit: cover;
      box-shadow: 0 8px 32px rgba(225, 25, 0, 0.25);
      animation: logoPulse 2s ease-in-out infinite alternate;
      z-index: 2;
    }
    .pulse-ring {
      position: absolute;
      top: 0;
      left: 0;
      width: 84px;
      height: 84px;
      border-radius: 24px;
      border: 2px solid rgba(225, 25, 0, 0.4);
      animation: ringExpand 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
      z-index: 1;
    }
    .brand-title {
      color: #FFFFFF;
      font-size: 20px;
      font-weight: 800;
      letter-spacing: 2px;
      margin-bottom: 16px;
      text-transform: uppercase;
    }
    .progress-bar-container {
      width: 160px;
      height: 3px;
      background-color: rgba(255, 255, 255, 0.08);
      border-radius: 4px;
      overflow: hidden;
      position: relative;
    }
    .progress-bar {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 45%;
      background: linear-gradient(90deg, #E11900, #FF5E3A);
      border-radius: 4px;
      animation: progressIndeterminate 1.4s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    }
    @keyframes logoPulse {
      0% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(225, 25, 0, 0.2)); }
      100% { transform: scale(1.04); filter: drop-shadow(0 0 18px rgba(225, 25, 0, 0.45)); }
    }
    @keyframes ringExpand {
      0% { transform: scale(0.85); opacity: 0.8; }
      100% { transform: scale(1.35); opacity: 0; }
    }
    @keyframes progressIndeterminate {
      0% { left: -45%; width: 45%; }
      50% { left: 25%; width: 65%; }
      100% { left: 100%; width: 45%; }
    }
  </style>

  <!-- Non-blocking / Deferred External SDKs -->
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAjyx1uUjZVo9C9bnOgb5XmVGNQAcdQxRA&libraries=marker" async defer></script>
  <script src="https://cdn.jsdelivr.net/npm/pica@9.0.1/dist/pica.min.js" defer></script>

  <!-- cropperjs — required by image_cropper on web -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.css" media="print" onload="this.media='all'" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js" defer></script>

  <!-- Firebase Messaging Service Worker registration -->
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
        navigator.serviceWorker.register('/firebase-messaging-sw.js', {
          scope: '/firebase-cloud-messaging-push-scope',
        }).catch(function (err) {
          console.warn('[FCM SW] Registration skipped/failed:', err);
        });
      });
    }
  </script>
</head>

<body>
  <!-- Instant HTML/CSS Brand Splash Screen (Eliminates Blank Screen & Slashes FCP) -->
  <div id="loading-indicator" aria-label="Loading SicFit Experts">
    <div class="loader-content">
      <div class="brand-logo-container">
        <img class="brand-logo" src="icons/Icon-192.png" alt="SicFit Experts" width="72" height="72" fetchpriority="high" decoding="async" />
        <div class="pulse-ring"></div>
      </div>
      <div class="brand-title">SICFIT EXPERTS</div>
      <div class="progress-bar-container">
        <div class="progress-bar"></div>
      </div>
    </div>
  </div>

  <script src="flutter_bootstrap.js" async></script>
</body>

</html>
