<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Google Tag Manager - Deferred to scroll for performance -->
  <script>
    let gtmLoaded = false;
    function loadGTM() {
      if (gtmLoaded) return;
      gtmLoaded = true;
      (function (w, d, s, l, i) {
        w[l] = w[l] || []; w[l].push({
          'gtm.start': new Date().getTime(), event: 'gtm.js'
        }); var f = d.getElementsByTagName(s)[0],
          j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
            'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
      })(window, document, 'script', 'dataLayer', 'GTM-KD95N3KC');
    }
    // Load GTM on scroll or after 3 seconds
    window.addEventListener('scroll', loadGTM, { once: true });
    setTimeout(loadGTM, 3000);
  </script>
  <!-- End Google Tag Manager -->

  <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" />

  <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://connect.facebook.net">
  <link rel="preconnect" href="https://firebasestorage.googleapis.com">
  <link rel="preconnect" href="https://res.cloudinary.com">
  <link rel="preconnect" href="https://khidmatynet.firebaseapp.com">
  <link rel="preconnect" href="https://firestore.googleapis.com">
  <link rel="preconnect" href="https://www.googleapis.com">

  <!-- Defer non-critical dns-prefetch -->
  <script>
    window.addEventListener('load', () => {
      const dnsPrefetch = [
        '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>

  <!-- Critical inline CSS for hero section (LCP optimization) -->
  <style>
    /* Hero section critical styles */
    .hero,
    .hero h1,
    .hero p {
      font-family: Inter, system-ui, -apple-system, sans-serif;
    }

    /* Prevent layout shift */
    .min-h-\[280px\] {
      min-height: 280px;
    }
  </style>

  <!-- Google Fonts - Deferred to prevent render blocking -->
  <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
    media="print" onload="this.media='all'" />
  <noscript>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" />
  </noscript>

  <!-- Critical inline CSS for hero section (FCP/LCP optimization) -->
  <style>
    :root {
      --orange-50: #fff7ed;
      --orange-500: #f97316;
      --orange-600: #ea580c;
      --slate-900: #0f172a;
      --slate-600: #475569;
    }

    body {
      margin: 0;
      font-family: Inter, system-ui, -apple-system, sans-serif;
      background-color: #fff;
    }

    .hero-placeholder {
      min-height: 420px;
      background: linear-gradient(to bottom right, var(--orange-50), #fff, #ffedd5);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 80px;
      padding-left: 20px;
      padding-right: 20px;
      text-align: center;
    }

    .hero-title {
      font-size: 2.25rem;
      line-height: 2.5rem;
      font-weight: 700;
      color: var(--slate-900);
      margin-bottom: 1.5rem;
      max-width: 800px;
    }

    @media (min-width: 640px) {
      .hero-title {
        font-size: 3rem;
        line-height: 1;
      }
    }

    .hero-subtitle {
      font-size: 1.125rem;
      color: var(--slate-600);
      max-width: 48rem;
      margin: 0 auto 2rem;
    }

    .cookie-banner-hidden {
      display: none;
      opacity: 0;
      transform: translateY(100%);
      transition: all 0.5s ease-out;
    }

    .cookie-banner-visible {
      display: block !important;
      opacity: 1 !important;
      transform: translateY(0) !important;
    }
  </style>




  <!-- 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, 6000);
  </script>
  <!-- End Meta Pixel Code -->
  <script type="module" crossorigin src="/js/index-DhszVfcs.js"></script>
  <link rel="stylesheet" crossorigin href="/assets/index-DosAGBvk.css">
</head>

<body>
  <!-- Google Tag Manager (noscript) -->
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KD95N3KC" height="0" width="0"
      style="display:none;visibility:hidden"></iframe></noscript>
  <!-- End Google Tag Manager (noscript) -->

  <!-- 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>

  <main id="root">
    <!-- Static Shell for LCP Optimization -->
    <div class="hero-placeholder">
      <h1 class="hero-title">
        La beauté à <span style="color: #f97316">portée de clic</span>
      </h1>
      <p class="hero-subtitle">
        Trouvez les meilleurs salons de coiffure, instituts de beauté et spas près de chez vous. Réservez en ligne,
        24/7.
      </p>
    </div>
  </main>

  <!-- SEO Structured Data -->
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "LocalBusiness",
      "name": "Khidmaty.net",
      "image": "https://khidmaty.net/logo.png",
      "@id": "https://khidmaty.net",
      "url": "https://khidmaty.net",
      "telephone": "+212000000000",
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "Street Name",
        "addressLocality": "Marrakech",
        "postalCode": "40000",
        "addressCountry": "MA"
      },
      "geo": {
        "@type": "GeoCoordinates",
        "latitude": 31.6295,
        "longitude": -7.9811
      },
      "openingHoursSpecification": {
        "@type": "OpeningHoursSpecification",
        "dayOfWeek": [
          "Monday",
          "Tuesday",
          "Wednesday",
          "Thursday",
          "Friday",
          "Saturday",
          "Sunday"
        ],
        "opens": "00:00",
        "closes": "23:59"
      }
    }
  </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?')) {
                    window.location.reload();
                  }
                }
              });
            });
          })
          .catch(function (registrationError) {
            console.log('SW registration failed: ', registrationError);
          });
      });
    }
  </script>

  <!-- Performance-optimized Cookie Banner -->
  <script>
    let cookieBannerLoaded = false;
    function loadCookieBanner() {
      if (cookieBannerLoaded) return;
      const consent = localStorage.getItem("cookiesAccepted");
      if (consent === "true" || consent === "false") return;
      cookieBannerLoaded = true;

      const banner = document.createElement('div');
      banner.id = 'cookie-banner';
      banner.className = 'cookie-banner-hidden';
      banner.style.cssText = "position:fixed;bottom:0;width:100%;background:#FFA500;color:#fff;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. 
        <button onclick="acceptCookies()" style="margin-left:10px;padding:6px 12px;background:#fff;color:#FFA500;border:none;cursor:pointer;border-radius:4px;font-weight:bold;">Accepter</button>
        <button onclick="declineCookies()" style="margin-left:5px;padding:6px 12px;background:transparent;color:#fff;border:1px solid #fff;border-radius:4px;cursor:pointer;">Refuser</button>
      `;
      document.body.appendChild(banner);

      // Delay visibility to ensure it's not part of early LCP
      setTimeout(() => {
        banner.classList.add('cookie-banner-visible');
      }, 100);
    }

    function acceptCookies() {
      localStorage.setItem("cookiesAccepted", "true");
      const banner = document.getElementById("cookie-banner");
      if (banner) banner.remove();
      if (typeof fbq !== 'undefined') fbq('consent', 'grant');
    }

    function declineCookies() {
      localStorage.setItem("cookiesAccepted", "false");
      const banner = document.getElementById("cookie-banner");
      if (banner) banner.remove();
      if (typeof fbq !== 'undefined') fbq('consent', 'revoke');
    }

    // Load AFTER everything else
    window.addEventListener('load', () => {
      setTimeout(loadCookieBanner, 4000);
    });
    ['touchstart', 'click', 'scroll'].forEach(event => {
      window.addEventListener(event, loadCookieBanner, { once: true, passive: true });
    });
  </script>
</body>

</html>