<!doctype html>
<html lang="en">
  <head>
    <!-- Google Tag Manager - Production Only -->
    <script>
      (function() {
        var hostname = window.location.hostname;
        var isProduction = (
          hostname === 'zenguide.app' ||
          hostname === 'www.zenguide.app'
        );
        
        // Skip GTM entirely on localhost/development/staging
        if (!isProduction) {
          console.log('🔧 GTM: Skipped (non-production environment:', hostname, ')');
          // Still initialize dataLayer for development debugging
          window.dataLayer = window.dataLayer || [];
          window.gtag = function(){dataLayer.push(arguments);};
          return;
        }
        
        // Initialize dataLayer and gtag function
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        window.gtag = gtag;
        
        // Set strategic default consent before GTM loads (GDPR Compliance)
        gtag('consent', 'default', {
          'analytics_storage': 'denied',
          'ad_storage': 'denied',
          'ad_user_data': 'denied',
          'ad_personalization': 'denied',
          'functionality_storage': 'granted'
        });
        
        // Load GTM
        (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-TM7MTXGQ');
        
        console.log('🍪 GTM: Loaded for production');
      })();
    </script>
    <!-- End Google Tag Manager -->
    <meta charset="UTF-8" />
    <base href="/">
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- FB WebView detection - must run before first paint -->
    <script>if(/FBAN|FBAV/i.test(navigator.userAgent)){document.documentElement.classList.add('fb-webview');window.dataLayer=window.dataLayer||[];window.dataLayer.push({event:'webview_detected',webview_type:'facebook'})}</script>
    <title>ZenGuide - Premium Wellness Services</title>
    <meta name="description" content="Book premium spa treatments, massages, and wellness at five-star hotels in Hungary. Instant booking, rewards program, and secure payments." />
    
    <!-- Canonical URL - ensures search engines know the preferred URL -->
    <link rel="canonical" href="https://zenguide.app/" />
    
    <!-- Security and CORS Headers for Payment Integration -->
    <meta http-equiv="Cross-Origin-Resource-Policy" content="cross-origin" />
    <meta http-equiv="Cross-Origin-Embedder-Policy" content="credentialless" />
    <!-- X-Frame-Options is configured in netlify.toml for production -->
    
    <!-- Content Security Policy is configured in netlify.toml for production -->
    <!-- This ensures consistent CSP across all environments with img-src allowing all HTTPS images -->
    
    <!-- PWA Meta Tags -->
    <meta name="theme-color" content="#1a365d" />
    <link rel="manifest" href="/manifest.json" />
    <link rel="apple-touch-icon" href="/favicon-192x192.png" />
    
    <!-- iOS specific -->
    <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="ZenGuide" />
    
    <!-- Additional meta tags -->
    <meta name="format-detection" content="telephone=no" />
    <meta name="mobile-web-app-capable" content="yes" />
    
    <!-- Font optimization for layout stability - Non-blocking font loading -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <!-- Load fonts asynchronously to prevent render blocking -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&family=Merriweather:wght@300;400&family=Inter:wght@200;400;500&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'" />
    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&family=Merriweather:wght@300;400&family=Inter:wght@200;400;500&display=swap"></noscript>
    <!-- Critical CSS for immediate rendering and layout stability -->
    <style>
      /* Critical font fallback to prevent layout shift */
      .text-hero { font-family: 'Playfair Display', Georgia, serif; }
      .text-elegant { font-family: 'Merriweather', Georgia, serif; }
      .text-price { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
      body { 
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #FAFBFC; /* zen-pearl */
        color: #0B1929; /* zen-navy */
      }
      
      /* Critical layout styles to prevent CLS */
      #root {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
      }
      
      /* Critical button styles */
      .btn-primary {
        background-color: #0075EB; /* revolut-blue */
        color: white;
        border: none;
        padding: 12px 24px;
        border-radius: 8px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
      }
      
      .btn-primary:hover {
        background-color: #0056B3;
        transform: translateY(-1px);
      }
      
      /* Critical loading spinner */
      .spinner {
        border: 2px solid #f3f3f3;
        border-top: 2px solid #FF6B6B; /* zen-coral */
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
      }
      
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      
      /* Critical mobile-first responsive styles */
      @media (max-width: 768px) {
        body {
          font-size: 14px;
          width: 100%;
          min-width: 100%;
        }
        
        .container {
          padding: 0 16px;
          width: 100%;
        }
      }
      
      /* Critical hero section height to prevent CLS */
      .hero-section {
        min-height: 60vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      /* Critical navigation styles */
      .nav-header {
        background-color: white;
        border-bottom: 1px solid #E5E7EB;
        z-index: 50;
      }
      
      /* Critical service card dimensions to prevent CLS */
      .service-card {
        min-height: 280px;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
      
      /* Critical image placeholder */
      .img-placeholder {
        background-color: #F3F4F6;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #9CA3AF;
      }
      
      /* SEO fallback content - visible to crawlers, hidden from users */
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
    </style>
    
    <!-- Enhanced DNS prefetch and preconnect for critical external services -->
    <!-- Google services - Critical for analytics and fonts -->
    <link rel="dns-prefetch" href="//www.googletagmanager.com" />
    <link rel="dns-prefetch" href="//www.google-analytics.com" />
    <link rel="dns-prefetch" href="//connect.facebook.net" />
    <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin />
    <link rel="preconnect" href="https://www.google-analytics.com" crossorigin />
    
    <!-- Payment services - Critical for checkout -->
    <link rel="dns-prefetch" href="//merchant.revolut.com" />
    <link rel="dns-prefetch" href="//checkout.revolut.com" />
    <link rel="preconnect" href="https://merchant.revolut.com" crossorigin />
    <link rel="preconnect" href="https://checkout.revolut.com" crossorigin />
    
    <!-- Social media and marketing -->
    <link rel="dns-prefetch" href="//connect.facebook.net" />
    <link rel="dns-prefetch" href="//js-eu1.hsforms.net" />
    <link rel="dns-prefetch" href="//forms.hsforms.com" />
    <link rel="preconnect" href="https://connect.facebook.net" crossorigin />
    <link rel="preconnect" href="https://js-eu1.hsforms.net" crossorigin />
    
    <!-- API endpoints - Critical for app functionality -->
    <link rel="dns-prefetch" href="//jtzorkhkjxpesaedpigh.supabase.co" />
    <link rel="preconnect" href="https://jtzorkhkjxpesaedpigh.supabase.co" crossorigin />
    
    <!-- Critical LCP images with WebP and fetchpriority -->
    <!-- Background image removed from preload - not critical for LCP -->
    <script type="module" crossorigin src="/assets/index-_Xnoe9q9.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/vendor-DHbHB7JU.js">
    <link rel="modulepreload" crossorigin href="/assets/router-vhco6BaG.js">
    <link rel="modulepreload" crossorigin href="/assets/ui-DJxlf2y1.js">
    <link rel="modulepreload" crossorigin href="/assets/supabase-9Udu5HEb.js">
    <link rel="modulepreload" crossorigin href="/assets/notifications-DjiTzARy.js">
    <link rel="modulepreload" crossorigin href="/assets/utils-lioVS8Gn.js">
    <link rel="stylesheet" crossorigin href="/assets/index-7_c9_JB2.css">
  </head>
  <body>
    <!-- Google Tag Manager (noscript) - Disabled to prevent dev/staging traffic -->
    <!-- Note: noscript fallback cannot be conditionally loaded without server-side rendering.
         Since JS-disabled users are rare and GTM requires JS anyway, this is safely omitted.
         If needed in production, consider server-side environment detection. -->
    <!-- <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TM7MTXGQ"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> -->
    <div id="root">
    <!-- SEO Fallback Content - Visible to crawlers, hidden from users via sr-only -->
    <div id="seo-fallback-container" class="sr-only" aria-hidden="false">
      
      <article lang="en" class="seo-fallback" style="margin: 20px auto; max-width: 800px; padding: 20px;">
        <h1>ZenGuide - Premium Wellness Services in Hungary</h1>
        <p>Book luxury spa treatments, massages, and wellness experiences at five-star hotels across Hungary. Instant booking, secure payments, verified premium partners, and rewards with every visit.</p>
        <nav aria-label="Main navigation"><a href="/">Home</a> | <a href="/services">Services</a> | <a href="/about">About Us</a> | <a href="/blog">Blog</a> | <a href="/become-partner">Become a Partner</a> | <a href="/help">Help Center</a> | <a href="/privacy">Privacy Policy</a> | <a href="/terms">Terms of Service</a></nav>
      </article>

      <article lang="hu" class="seo-fallback" style="margin: 20px auto; max-width: 800px; padding: 20px;">
        <h1>ZenGuide - Prémium Wellness Szolgáltatások Magyarországon</h1>
        <p>Foglaljon luxus spa kezeléseket, masszázsokat és wellness élményeket ötcsillagos szállodákban Magyarországon. Azonnali foglalás, biztonságos fizetés, ellenőrzött prémium partnerek és jutalmak minden látogatásért.</p>
        <nav aria-label="Main navigation"><a href="/">Főoldal</a> | <a href="/services">Szolgáltatások</a> | <a href="/about">Rólunk</a> | <a href="/blog">Blog</a> | <a href="/become-partner">Legyél Partner</a> | <a href="/help">Súgóközpont</a> | <a href="/privacy">Adatvédelmi irányelvek</a> | <a href="/terms">Szolgáltatási feltételek</a></nav>
      </article>

      <article lang="de" class="seo-fallback" style="margin: 20px auto; max-width: 800px; padding: 20px;">
        <h1>ZenGuide - Premium Wellness-Services in Ungarn</h1>
        <p>Buchen Sie luxuriöse Spa-Behandlungen, Massagen und Wellness-Erlebnisse in Fünf-Sterne-Hotels in Ungarn. Sofortige Buchung, sichere Zahlungen, verifizierte Premium-Partner und Belohnungen bei jedem Besuch.</p>
        <nav aria-label="Main navigation"><a href="/">Startseite</a> | <a href="/services">Dienstleistungen</a> | <a href="/about">Über uns</a> | <a href="/blog">Blog</a> | <a href="/become-partner">Partner werden</a> | <a href="/help">Hilfezentrum</a> | <a href="/privacy">Datenschutzrichtlinie</a> | <a href="/terms">Nutzungsbedingungen</a></nav>
      </article>

      <article lang="es" class="seo-fallback" style="margin: 20px auto; max-width: 800px; padding: 20px;">
        <h1>ZenGuide - Servicios Premium de Bienestar en Hungría</h1>
        <p>Reserve tratamientos de spa de lujo, masajes y experiencias de bienestar en hoteles de cinco estrellas en Hungría. Reserva instantánea, pagos seguros, socios premium verificados y recompensas en cada visita.</p>
        <nav aria-label="Main navigation"><a href="/">Inicio</a> | <a href="/services">Servicios</a> | <a href="/about">Sobre Nosotros</a> | <a href="/blog">Blog</a> | <a href="/become-partner">Hazte Socio</a> | <a href="/help">Centro de Ayuda</a> | <a href="/privacy">Política de Privacidad</a> | <a href="/terms">Términos de Servicio</a></nav>
      </article>

      <article lang="zh" class="seo-fallback" style="margin: 20px auto; max-width: 800px; padding: 20px;">
        <h1>ZenGuide - 匈牙利优质健康服务</h1>
        <p>在匈牙利五星级酒店预订豪华水疗护理、按摩和健康体验。即时预订、安全支付、认证优质合作伙伴，每次访问都有奖励。</p>
        <nav aria-label="Main navigation"><a href="/">首页</a> | <a href="/services">服务</a> | <a href="/about">关于我们</a> | <a href="/blog">博客</a> | <a href="/become-partner">成为合作伙伴</a> | <a href="/help">帮助中心</a> | <a href="/privacy">隐私政策</a> | <a href="/terms">服务条款</a></nav>
      </article>
    </div>
  </div>
    
    <!-- Register Enhanced Service Worker - Deferred for better performance -->
    <script>
      // Defer service worker registration to prevent render blocking
      if ('serviceWorker' in navigator) {
        // Wait for critical content to render before registering SW
        function registerSW() {
          // Force cache refresh by unregistering old service workers first
          navigator.serviceWorker.getRegistrations().then(registrations => {
            const unregisterPromises = registrations.map(registration => {
              console.log('🗑️ Unregistering old SW for cache refresh');
              return registration.unregister();
            });
            return Promise.all(unregisterPromises);
          }).then(() => {
            // Clear all caches to ensure fresh start
            return caches.keys().then(cacheNames => {
              const deletePromises = cacheNames.map(cacheName => {
                if (cacheName.startsWith('zenguide-')) {
                  console.log('🗑️ Clearing cache:', cacheName);
                  return caches.delete(cacheName);
                }
              });
              return Promise.all(deletePromises);
            });
          }).then(() => {
            // Register new service worker with timestamp to force refresh
            const timestamp = Date.now();
            return navigator.serviceWorker.register(`/sw-enhanced.js?v=${timestamp}`);
          }).then(registration => {
              console.log('🎯 Enhanced SW registered with fresh cache:', registration);
              
              // Handle service worker updates
              registration.addEventListener('updatefound', () => {
                const newWorker = registration.installing;
                if (newWorker) {
                  newWorker.addEventListener('statechange', () => {
                    if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
                      console.log('🔄 New service worker available');
                      
                      // Notify user about update availability
                      if (window.dispatchEvent) {
                        window.dispatchEvent(new CustomEvent('sw-update-available', {
                          detail: { registration }
                        }));
                      }
                    }
                  });
                }
              });
              
              // Listen for messages from service worker
              navigator.serviceWorker.addEventListener('message', (event) => {
                if (event.data?.type === 'SW_ACTIVATED') {
                  console.log('✅ Enhanced Service Worker activated:', event.data.version);
                }
              });
              
              // Check for updates periodically
              setInterval(() => {
                registration.update();
              }, 60000); // Check every minute
              
            })
            .catch(err => console.log('❌ Enhanced SW registration failed:', err));
        }

        // Register SW after page load and a small delay to ensure critical content renders first
        window.addEventListener('load', () => {
          // Use requestIdleCallback for better performance, fallback to setTimeout
          if ('requestIdleCallback' in window) {
            requestIdleCallback(registerSW);
          } else {
            setTimeout(registerSW, 100);
          }
        });
      }
    </script>
  </body>
</html> 