
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Quick.Surf</title>
    <meta name="description" content="Get to your bookmarks - quick" />
    <meta name="author" content="Lovable" />

    <meta property="og:title" content="Quick Surf" />
    <meta property="og:description" content="Get to your bookmarks - quick" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="/lovable-uploads/surf.png" />

    <!-- Set initial favicon before JS loads -->
    <link rel="icon" href="/lovable-uploads/surf.png" type="image/png" />
    
    <!-- Enhanced resource hints for returning visitors -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://ntpsfdjwjfhxvjmvwoxd.supabase.co" crossorigin>
    <link rel="dns-prefetch" href="https://ntpsfdjwjfhxvjmvwoxd.supabase.co">
    
    <!-- Preload critical images for returning visitors -->
    <script>
      if (localStorage.getItem('quicksurf_visited') === 'true') {
        const criticalImages = ['/lovable-uploads/search.png', '/lovable-uploads/surf.png', '/lovable-uploads/zichtbaar.png'];
        criticalImages.forEach(src => {
          const link = document.createElement('link');
          link.rel = 'preload';
          link.as = 'image';
          link.href = src;
          link.fetchPriority = 'low';
          document.head.appendChild(link);
        });
      }
    </script>
    
    <!-- Only preload critical entry point -->
    <link rel="modulepreload" href="/assets/main-Cg6Aukn_.js">
    
    <!-- Critical CSS - inline all essential styles to prevent render blocking -->
    <style>
      /* CSS Variables */
      :root {
        --background: 208.21deg 18.92% 35.22%;
        --foreground: 210 40% 98%;
        --card: 0 0% 100%;
        --card-foreground: 222.2 84% 4.9%;
        --primary: 210 100% 40%;
        --primary-foreground: 210 40% 98%;
        --secondary: 210 40% 96.1%;
        --secondary-foreground: 222.2 47.4% 11.2%;
        --muted: 210 40% 96.1%;
        --muted-foreground: 215.4 16.3% 46.9%;
        --accent: 210 40% 96.1%;
        --accent-foreground: 222.2 47.4% 11.2%;
        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 210 40% 98%;
        --border: 214.3 31.8% 91.4%;
        --input: 214.3 31.8% 91.4%;
        --ring: 222.2 84% 4.9%;
        --radius: 0.5rem;
        --theme-background: #3A4F5F;
        --theme-category-title: #3FCFFF;
        --theme-text-main: #FFFFFF;
        --theme-text-secondary: rgba(255, 255, 255, 0.7);
      }

      /* Base styles */
      *, ::before, ::after {
        box-sizing: border-box;
        border-width: 0;
        border-style: solid;
        border-color: #e5e7eb;
      }
      
      html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
      
      body {
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
        background: var(--theme-background, #3A4F5F);
        color: var(--theme-text-main, #FFFFFF);
      }
      
      #root {
        min-height: 100vh;
        background: var(--theme-background, #3A4F5F);
      }
      
      /* Critical bookmark styles */
      .bookmarks-theme-bg {
        background: var(--theme-background, #3A4F5F) !important;
      }
      
      .bookmarks-title {
        color: var(--theme-category-title, #3FCFFF) !important;
        font-weight: 600;
      }
      
      .bookmarks-main-text {
        color: var(--theme-text-main, #FFFFFF) !important;
      }
      
      /* Critical grid layout */
      .bookmark-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 0.85rem;
      }
      
      .bookmark-item {
        color: var(--theme-text-main, #fff) !important;
        background: transparent !important;
        border: none !important;
        min-height: 20px;
        padding: 0;
        transition: transform 0.2s ease;
      }
      
      /* Critical button styles */
      .button-theme-filled {
        color: var(--theme-background) !important;
        background-color: var(--theme-category-title) !important;
        border-color: var(--theme-category-title) !important;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        font-weight: 500;
        transition: opacity 0.2s;
        border: 1px solid;
        cursor: pointer;
      }
      
      .button-theme-filled:hover {
        opacity: 0.9;
      }

      /* Critical flex utilities */
      .flex { display: flex; }
      .items-center { align-items: center; }
      .justify-between { justify-content: space-between; }
      .gap-2 { gap: 0.5rem; }
      .gap-4 { gap: 1rem; }
      
      /* Critical spacing */
      .p-4 { padding: 1rem; }
      .p-8 { padding: 2rem; }
      .min-h-screen { min-height: 100vh; }
      
      /* Critical responsive */
      @media (min-width: 768px) {
        .md\\:p-8 { padding: 2rem; }
      }
      
      /* Loading skeleton */
      .animate-pulse {
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
      
      @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: .5; }
      }
    </style>
    
    <!-- Load non-critical CSS with improved async strategy -->
    <noscript></noscript>
    
    <!-- Prevent render blocking with CSS loading script -->
    <script>
      // Load CSS asynchronously without blocking render
      (function() {
        var css = document.createElement('link');
        css.rel = 'stylesheet';
        css.href = '/src/index.css';
        css.media = 'print';
        css.onload = function() { this.media = 'all'; };
        document.head.appendChild(css);
      })();
    </script>
    <script type="module" crossorigin src="/assets/main-DeBeFmI0.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/react-vendor-BIO78nwO.js">
    <link rel="modulepreload" crossorigin href="/assets/ui-vendor-BZzEEtCi.js">
    <link rel="modulepreload" crossorigin href="/assets/supabase-vendor-K4spOeXS.js">
    <link rel="modulepreload" crossorigin href="/assets/utils-vendor-BD2dY1Bq.js">
    <link rel="stylesheet" crossorigin href="/assets/styles-BLa727Re.css">
  </head>

  <body>
    <div id="root"></div>
    <!-- IMPORTANT: DO NOT REMOVE THIS SCRIPT TAG OR THIS VERY COMMENT! -->
    <script src="https://cdn.gpteng.co/gptengineer.js" type="module"></script>
  </body>
</html>
