<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes" />
    <title>QuickWork Poland</title>
    <meta name="description" content="QuickWork Poland" />
    <meta name="author" content="QuickWork Poland" />
    
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="/workermarketplacelogo.png" />
    <link rel="shortcut icon" type="image/png" href="/workermarketplacelogo.png" />
    <link rel="apple-touch-icon" href="/workermarketplacelogo.png" />

    <!-- No logo preload -->

    <!-- Per-route SEO is handled by MetaTags via react-helmet-async -->

    <!-- Structured Data is injected per route via MetaTags -->
    
    <!-- Critical Performance Optimizations -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="dns-prefetch" href="//fonts.googleapis.com">
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <!-- Professional font (Inter) -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- Preload critical resources -->
    <!-- Removed modulepreload of source .tsx to avoid MIME issues in production build -->
    <!-- Do not preload .tsx as a module on production; Vite will output JS chunks -->
    
    <!-- Remove dev-time prefetches -->
    
    <!-- Optional DNS prefetch for external resources -->
    <link rel="dns-prefetch" href="//supabase.co">
    
    <!-- Mobile-specific optimizations -->
    <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">
    <meta name="apple-mobile-web-app-title" content="QuickWork Poland">
    <meta name="theme-color" content="#0066cc">
    <meta name="msapplication-TileColor" content="#0066cc">
    <meta name="msapplication-config" content="/browserconfig.xml">
    
    <!-- Prevent automatic phone number detection -->
    <meta name="format-detection" content="telephone=no">
    
    <!-- Robots are set per-route via MetaTags -->
    
    <!-- Minimal critical CSS for initial skeleton -->
    <style>
      /* Critical above-the-fold styles - extracted from Tailwind */
      * {
        box-sizing: border-box;
        border-width: 0;
        border-style: solid;
        border-color: #e5e7eb;
      }
      html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; font-feature-settings: normal; }
      body { 
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
        margin: 0; 
        background: hsl(0 0% 98%);
        color: hsl(215 25% 15%);
        line-height: inherit;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
      }
      #root { 
        min-height: 100vh; 
        display: flex;
        flex-direction: column;
      }
      
      /* Critical button and interactive styles */
      button {
        font-family: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        font-size: 100%;
        font-weight: inherit;
        line-height: inherit;
        color: inherit;
        margin: 0;
        padding: 0;
        background-color: transparent;
        background-image: none;
        cursor: pointer;
        border-radius: 0.375rem;
        min-height: 44px;
        min-width: 44px;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
      }
      
      /* Critical layout classes */
      .flex { display: flex; }
      .items-center { align-items: center; }
      .justify-center { justify-content: center; }
      .min-h-screen { min-height: 100vh; }
      .text-center { text-align: center; }
      .mb-4 { margin-bottom: 1rem; }
      .text-primary { color: hsl(210 85% 25%); }
      .bg-primary { background-color: hsl(210 85% 25%); }
      .text-primary-foreground { color: hsl(0 0% 100%); }
      .px-4 { padding-left: 1rem; padding-right: 1rem; }
      .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
      .rounded { border-radius: 0.25rem; }
      .font-semibold { font-weight: 600; }
      
      /* Loading spinner */
      .loading-spinner {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 2px solid #f3f3f3;
        border-top: 2px solid hsl(210 85% 25%);
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      
      /* Critical responsive */
      @media (max-width: 768px) {
        html { font-size: 16px; }
        .px-4 { padding-left: 1rem; padding-right: 1rem; }
      }
    </style>
    <script type="module" crossorigin src="/assets/index-DSsK5HJp.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/data-supabase-DEnS3xPZ.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-react-core-BhRN0oSg.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-react-dom-CkBBUWT0.js">
    <link rel="modulepreload" crossorigin href="/assets/ui-core-B4p1K5ji.js">
    <link rel="modulepreload" crossorigin href="/assets/ui-extended-DKSGFDka.js">
    <link rel="modulepreload" crossorigin href="/assets/landing-essentials-BITnpSjp.js">
    <link rel="modulepreload" crossorigin href="/assets/icons-extended-D7RN1hPp.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-router-ie7rh80p.js">
    <link rel="modulepreload" crossorigin href="/assets/ui-forms-NeLHRetn.js">
    <link rel="modulepreload" crossorigin href="/assets/job-pages-DwJ48DtI.js">
    <link rel="modulepreload" crossorigin href="/assets/worker-pages-D9yrWefF.js">
    <link rel="modulepreload" crossorigin href="/assets/dashboard-BwzaR22q.js">
    <link rel="modulepreload" crossorigin href="/assets/notifications-D5Ar8Kis.js">
    <link rel="modulepreload" crossorigin href="/assets/data-query-CYiWSEcz.js">
    <link rel="modulepreload" crossorigin href="/assets/location-pages-D_4ADR9D.js">
    <link rel="stylesheet" crossorigin href="/assets/index-DOlsbeBJ.css">
  </head>

  <body>
    <div id="root">
      <!-- Loading state for immediate visual feedback -->
      <div class="flex items-center justify-center min-h-screen" style="background: hsl(0 0% 98%);">
        <div class="text-center">
          <div class="loading-spinner mb-4" style="margin: 0 auto;"></div>
          <p style="color: hsl(215 15% 50%); font-size: 16px; margin: 0;">Loading QuickWork Poland...</p>
        </div>
      </div>
    </div>
    
    <!-- Vite will inject built CSS/JS in production -->
    
  </body>
</html>
