
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-5VLGV8D49X"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-5VLGV8D49X');
    </script>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/png" href="/logo.png" />
    <link rel="apple-touch-icon" href="/logo.png" />
    <link rel="manifest" href="/manifest.json" />
    <meta name="theme-color" content="#FF6500" />
    <title>Khidmaty.net - Réservez vos soins de beauté</title>
    <meta name="description" content="La plateforme qui connecte beauté et professionnels près de chez vous" />
    <meta name="author" content="Khidmaty.net" />

    <!-- Fix Cross-Origin-Opener-Policy issues -->
    <meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin-allow-popups" />
    <meta http-equiv="Cross-Origin-Embedder-Policy" content="require-corp" />

    <meta property="og:title" content="Khidmaty.net - Réservez vos soins de beauté" />
    <meta property="og:description" content="La plateforme qui connecte beauté et professionnels près de chez vous" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="/logo.png" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@khidmaty" />
    <meta name="twitter:image" content="/logo.png" />

    <!-- Critical preconnects for faster loading -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://firebasestorage.googleapis.com">

    <!-- DNS prefetch for non-critical domains -->
    <link rel="dns-prefetch" href="https://firebaseapp.com">
    <link rel="dns-prefetch" href="https://firestore.googleapis.com">

    <!-- Defer non-critical preconnects -->
    <script>
      window.addEventListener('load', () => {
        const dnsPrefetch = [
          'https://connect.facebook.net',
          'https://maps.googleapis.com',
          'https://cloudinary.com'
        ];

        dnsPrefetch.forEach(url => {
          const link = document.createElement('link');
          link.rel = 'dns-prefetch';
          link.href = url;
          document.head.appendChild(link);
        });
      });
    </script>

    <!-- Preload critical resources with high priority -->
    <link rel="preload" href="/logo.png" as="image" type="image/png" fetchpriority="high">

    <!-- Async font loading - reduced weights for faster load -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap&subset=latin" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"></noscript>

    <!-- Font display swap -->
    <style>
      @font-face {
        font-family: 'Inter';
        font-display: swap;
        src: local('Inter');
      }
    </style>

    <!-- Progressive Web App meta tags -->
    <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">



    <!-- Highly Deferred Meta Pixel Code for mobile performance -->
    <script>
      // Initialize Facebook Pixel queue
      window.fbq = window.fbq || function() {
        (window.fbq.q = window.fbq.q || []).push(arguments);
      };

      // Only load Facebook Pixel after significant user interaction or delay
      let pixelLoaded = false;

      function loadFacebookPixel() {
        if (pixelLoaded) return;
        pixelLoaded = true;

        !function(f,b,e,v,n,t,s)
        {if(f.fbq && f.fbq.loaded)return;n=f.fbq=function(){n.callMethod?
        n.callMethod.apply(n,arguments):n.queue.push(arguments)};
        if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
        n.queue=[];t=b.createElement(e);t.async=!0;
        t.src=v;s=b.getElementsByTagName(e)[0];
        s.parentNode.insertBefore(t,s)}(window, document,'script',
        'https://connect.facebook.net/en_US/fbevents.js');
        fbq('init', '1271595381269508');
        fbq('track', 'PageView');
      }

      // Load on user interaction (mobile-first)
      ['touchstart', 'click', 'scroll'].forEach(event => {
        window.addEventListener(event, loadFacebookPixel, { once: true, passive: true });
      });

      // Fallback: Load after 5 seconds if no interaction
      setTimeout(loadFacebookPixel, 5000);
    </script>
    <!-- End Meta Pixel Code -->
    <script type="module" crossorigin src="/assets/index-CgKDjNFH.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/react-vendor-DT07buA0.js">
    <link rel="modulepreload" crossorigin href="/assets/firebase-core-hRdELpoO.js">
    <link rel="modulepreload" crossorigin href="/assets/firebase-db-vF4Hkd_V.js">
    <link rel="stylesheet" crossorigin href="/assets/index-BXiQCmB7.css">
  </head>

  <body>
    <!-- Meta Pixel noscript -->
    <noscript><img height="1" width="1" style="display:none"
    src="https://www.facebook.com/tr?id=1271595381269508&ev=PageView&noscript=1"
    /></noscript>

    <div id="root"></div>




    <!-- Defer non-critical CSS -->
    <script>
      // Load non-critical CSS after page load
      window.addEventListener('load', function() {
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = '/src/index.css';
        link.media = 'print';
        link.onload = function() { this.media = 'all'; };
        document.head.appendChild(link);
      });
    </script>

    <!-- Mobile-optimized Service Worker -->
    <script>
      // Register service worker for mobile performance
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
          navigator.serviceWorker.register('/sw.js')
            .then(function(registration) {
              console.log('SW registered: ', registration);

              // Update available
              registration.addEventListener('updatefound', () => {
                const newWorker = registration.installing;
                newWorker.addEventListener('statechange', () => {
                  if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
                    // New content available, refresh page
                    if (confirm('Une nouvelle version est disponible. Actualiser maintenant?')) {
                      window.location.reload();
                    }
                  }
                });
              });
            })
            .catch(function(registrationError) {
              console.log('SW registration failed: ', registrationError);
            });
        });
      }
    </script>

    <!-- Highly optimized cookie banner (mobile-first) -->
    <script>
      // Load cookie banner only after significant delay for mobile performance
      window.addEventListener('load', function() {
        setTimeout(function() {
          // Create cookie banner dynamically
          const banner = document.createElement('div');
          banner.id = 'cookie-banner';
          banner.style.cssText = `
            position:fixed;
            bottom:0;
            width:100%;
            background:#FFA500;
            color:#ffffff;
            padding:12px;
            text-align:center;
            z-index:1000;
            font-family:sans-serif;
            box-shadow:0 -2px 5px rgba(0,0,0,0.1);
            display:none;
          `;

          banner.innerHTML = `
            Ce site utilise des cookies pour améliorer votre expérience et mesurer les performances.
            <button onclick="acceptCookies()" style="
              margin-left:10px;
              padding:6px 12px;
              background:#ffffff;
              color:#FFA500;
              border:none;
              cursor:pointer;
            ">Accepter</button>
            <button onclick="declineCookies()" style="
              margin-left:5px;
              padding:6px 12px;
              background:transparent;
              color:#ffffff;
              border:1px solid #ffffff;
              cursor:pointer;
            ">Refuser</button>
          `;

          document.body.appendChild(banner);

          // Check consent and show banner if needed
          const consent = localStorage.getItem("cookiesAccepted");
          if (consent !== "true" && consent !== "false") {
            banner.style.display = "block";
          }
        }, 3000); // Longer delay for mobile performance
      });

      function acceptCookies() {
        localStorage.setItem("cookiesAccepted", "true");
        const banner = document.getElementById("cookie-banner");
        if (banner) banner.style.display = "none";
        if (typeof fbq !== 'undefined') {
          fbq('consent', 'grant');
        }
      }

      function declineCookies() {
        localStorage.setItem("cookiesAccepted", "false");
        const banner = document.getElementById("cookie-banner");
        if (banner) banner.style.display = "none";
        if (typeof fbq !== 'undefined') {
          fbq('consent', 'revoke');
        }
      }
    </script>
  </body>
</html>
