<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="google" content="notranslate" />

    <!-- Critical Performance Optimizations -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, interactive-widget=resizes-content" />

    <!-- DNS Prefetch for external domains -->
    <link rel="dns-prefetch" href="//fonts.googleapis.com">
    <link rel="dns-prefetch" href="//fonts.gstatic.com">

    <!-- Preconnect to font origins with crossorigin -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <!-- Critical Font Preload - Only load Poppins (main font) initially -->
    <link rel="preload" as="font" type="font/woff2" href="https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecg.woff2" crossorigin>

    <!-- Inline critical Poppins font CSS to eliminate render blocking -->
    <style>
      /* Poppins 400 - Most used weight */
      @font-face {
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
      }
      /* Poppins 500 - Medium weight for buttons */
      @font-face {
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9Z1xlFd2JQEk.woff2) format('woff2');
      }
      /* Poppins 600 - Semi-bold for headings */
      @font-face {
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 600;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9Z1JlFd2JQEk.woff2) format('woff2');
      }
    </style>
    
    <!-- Load other font weights asynchronously -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    
    <!-- Defer other font families -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Gelasio:ital,wght@0,400..700;1,400..700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lora:ital,wght@0,400..700;1,400..700&family=Oswald:wght@200..700&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">

    <!-- Favicon with proper type -->
    <link rel="icon" type="image/svg+xml" href="/logo.svg" />

    <!-- PWA: inject the manifest link synchronously before Chrome evaluates
         installability. Chrome locks in the first manifest it sees for the
         beforeinstallprompt event, so we must set the slug-scoped href up front —
         post-load href swaps don't take effect for the current session's install.
         The slug is derived from the URL path (/local/order/<slug>) when present;
         on custom domains it's omitted and the router Worker resolves it. -->
    <script>
      (function () {
        try {
          var m = window.location.pathname.match(/\/local\/order\/([^\/?#]+)/);
          var href = m && m[1]
            ? '/manifest.webmanifest?slug=' + encodeURIComponent(m[1])
            : '/manifest.webmanifest';
          var link = document.createElement('link');
          link.rel = 'manifest';
          link.href = href;
          document.head.appendChild(link);
        } catch (e) { /* noop — injectDynamicManifest() will retry post-load */ }
      })();
    </script>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="theme-color" content="#FF5733" />

    <!-- Critical Resource Hints - Only for immediately used resources -->
    <link rel="modulepreload" href="/assets/main-aGvyKgbx.ts" fetchpriority="high">
    
    <!-- Remove preload for resources that aren't immediately used -->
    <!-- CSS will be loaded by Vite automatically -->
    <!-- Images will be loaded by LazyImage when needed -->
    
    <!-- Prefetch common resources for better UX -->
    <link rel="prefetch" as="image" href="/images/food-loader.webp">
    
    <!-- Note: Banner/hero images come from API dynamically, cannot be preloaded statically -->

    <!-- Critical CSS inline for immediate render -->
    <style>
      /* Critical CSS for LCP optimization */
      html { 
        font-family: 'Poppins', sans-serif; 
        font-display: swap;
      }
      body { 
        margin: 0; 
        background-color: #F9F9F9; 
        color: #0A2540;
        line-height: 1.6;
      }
      #app { 
        min-height: 100vh;
        display: flex;
        flex-direction: column;
      }
      
      /* Critical loading state */
      .loading-skeleton {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: loading 1.5s infinite;
      }
      
      @keyframes loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
      }
      
      /* Optimize image loading */
      img { 
        content-visibility: auto;
        contain-intrinsic-size: 200px 200px;
        max-width: 100%;
        height: auto;
      }
      
      /* Reduce layout shift */
      .lazy-image-container {
        contain: layout style paint;
        position: relative;
        overflow: hidden;
      }
      
      /* Critical button styles */
      .btn-primary {
        background-color: #0A2540;
        color: white;
        padding: 12px 24px;
        border-radius: 8px;
        border: none;
        cursor: pointer;
        font-weight: 500;
      }
      
      /* Critical layout */
      .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 16px;
      }
      
      /* Hide non-critical content initially */
      .non-critical {
        visibility: hidden;
      }
    </style>

    <title>Zestidoo</title>
    <script type="module" crossorigin src="/js/app-Cri8T2n2.js"></script>
    <link rel="modulepreload" crossorigin href="/js/vendor-BNvcrqg9.js">
    <link rel="modulepreload" crossorigin href="/js/monitoring-vendor-D3ZE-Qrw.js">
    <link rel="modulepreload" crossorigin href="/js/vue-vendor-BrzGnqES.js">
    <link rel="stylesheet" crossorigin href="/css/vue-vendor-CnZBlja3.css">
  </head>

  <body>
    <div id="app"></div>
    <!-- Main application script -->
  </body>
</html>
