<!doctype html>
<html lang="en">
  <head>
    <!-- Critical CSS - Inline for immediate rendering -->
    <style>
      /* Critical CSS for above-the-fold content */
      * { box-sizing: border-box; margin: 0; padding: 0; }
      body { 
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
        line-height: 1.5; 
        color: #1f2937;
        font-display: swap;
      }
      #root { min-height: 100vh; }
      .loading-spinner { display: flex; align-items: center; justify-content: center; min-height: 400px; }
      .spinner { animation: spin 1s linear infinite; border: 2px solid #f3f4f6; border-top: 2px solid #2563eb; border-radius: 50%; width: 3rem; height: 3rem; }
      @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
      .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; }
      
      /* Prevent layout shift from hero section */
      .hero-section { 
        min-height: 600px; 
        background-color: #374151; /* fallback color */
        contain: layout;
      }
      
      /* Prevent layout shift from footer */
      .footer { 
        min-height: 400px; /* reserve space for footer */
        contain: layout;
      }
      
      /* Font fallback to prevent layout shift */
      .font-heading { 
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-weight: 800;
        font-display: swap;
      }
      
      /* Aspect ratio for images to prevent CLS */
      .img-aspect-16-9 { aspect-ratio: 16/9; }
      .img-aspect-1-1 { aspect-ratio: 1/1; }
    </style>

    <!-- Preload critical fonts with font-display: swap -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap">
    </noscript>

    <!-- Hero image will be loaded by React component when needed -->

    <!-- Google tag (gtag.js) - Minimal impact loading -->
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-WMHP04X6Q8', {
        'transport_type': 'beacon',
        'anonymize_ip': true
      });
      
      // Load GA script with requestIdleCallback to prevent blocking
      function loadGoogleAnalytics() {
        const script = document.createElement('script');
        script.async = true;
        script.src = 'https://www.googletagmanager.com/gtag/js?id=G-WMHP04X6Q8';
        document.head.appendChild(script);
      }
      
      if ('requestIdleCallback' in window) {
        requestIdleCallback(loadGoogleAnalytics, { timeout: 2000 });
      } else {
        setTimeout(loadGoogleAnalytics, 1000);
      }
    </script>
    
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="https://imagedelivery.net/quAcZohoGyDsqffqCB2d5w/1d37a490-1eb9-46c9-2b74-420519218e00/public" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- Primary Meta Tags -->
    <title>Utah Stocked Fish | Real-Time Fishing Reports & Species Guide 2025</title>
    <meta name="title" content="Utah Stocked Fish | Real-Time Fishing Reports & Species Guide 2025" />
    <meta name="description" content="Get real-time Utah fish stocking updates, detailed species guides, and fishing spot maps. Find the best trout, bass, and catfish locations with current reports from 500+ Utah waters. Updated daily by local anglers." />
    <meta name="keywords" content="Utah fishing, stocked fish, fishing reports, Utah fish species, fishing locations, trout stocking, Utah waters, fishing guide, rainbow trout, brown trout, cutthroat trout, bass fishing Utah, fishing maps Utah" />
    <meta name="author" content="Utah Stocked Fish" />
    <meta name="language" content="English" />
    <meta name="geo.region" content="US-UT" />
    <meta name="geo.placename" content="Utah" />
    <meta name="geo.position" content="39.3210;-111.0937" />
    <meta name="ICBM" content="39.3210, -111.0937" />
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://utahstockedfish.com/" />
    <meta property="og:title" content="Utah Stocked Fish | Real-Time Fishing Reports & Species Guide 2025" />
    <meta property="og:description" content="Get real-time Utah fish stocking updates, detailed species guides, and fishing spot maps. Find the best trout, bass, and catfish locations with current reports from 500+ Utah waters." />
    <meta property="og:image" content="https://imagedelivery.net/quAcZohoGyDsqffqCB2d5w/78de1c59-443e-4def-6cc3-8e841212e700/w=1200,q=85,f=webp" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:alt" content="Utah fishing scene with mountains and lake" />
    <meta property="og:site_name" content="Utah Stocked Fish" />
    <meta property="og:locale" content="en_US" />
    
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="https://utahstockedfish.com/" />
    <meta property="twitter:title" content="Utah Stocked Fish | Real-Time Fishing Reports & Species Guide 2025" />
    <meta property="twitter:description" content="Get real-time Utah fish stocking updates, detailed species guides, and fishing spot maps. Find the best trout, bass, and catfish locations with current reports from 500+ Utah waters." />
    <meta property="twitter:image" content="https://imagedelivery.net/quAcZohoGyDsqffqCB2d5w/78de1c59-443e-4def-6cc3-8e841212e700/w=1200,q=85,f=webp" />
    <meta property="twitter:image:alt" content="Utah fishing scene with mountains and lake" />
    <meta property="twitter:creator" content="@UtahStockedFish" />
    <meta property="twitter:site" content="@UtahStockedFish" />
    
    <!-- Additional SEO Meta Tags -->
    <meta name="theme-color" content="#1e40af" />
    <meta name="msapplication-TileColor" content="#1e40af" />
    <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="Utah Stocked Fish" />
    <meta name="application-name" content="Utah Stocked Fish" />
    <meta name="msapplication-tooltip" content="Utah fishing reports and species guide" />
    <meta name="msapplication-starturl" content="/" />
    
    <!-- Search Engine Verification (add when available) -->
    <!-- <meta name="google-site-verification" content="your-verification-code" /> -->
    <!-- <meta name="bing-site-verification" content="your-verification-code" /> -->
    <!-- FlexOffers Verification -->
    <meta name="fo-verify" content="e960fb4f-ad76-49f6-b602-a58c4ca51278" />
    
    <!-- Canonical URL -->
    <link rel="canonical" href="https://utahstockedfish.com/" />
    
    <!-- Alternate URLs for different languages/regions (if applicable) -->
    <link rel="alternate" hreflang="en-us" href="https://utahstockedfish.com/" />
    
    <!-- Favicon and Icons -->
    <link rel="icon" type="image/svg+xml" href="https://imagedelivery.net/quAcZohoGyDsqffqCB2d5w/1d37a490-1eb9-46c9-2b74-420519218e00/public" />
    <link rel="apple-touch-icon" sizes="180x180" href="https://imagedelivery.net/quAcZohoGyDsqffqCB2d5w/1d37a490-1eb9-46c9-2b74-420519218e00/w=180,h=180" />
    <link rel="icon" type="image/png" sizes="32x32" href="https://imagedelivery.net/quAcZohoGyDsqffqCB2d5w/1d37a490-1eb9-46c9-2b74-420519218e00/w=32,h=32" />
    <link rel="icon" type="image/png" sizes="16x16" href="https://imagedelivery.net/quAcZohoGyDsqffqCB2d5w/1d37a490-1eb9-46c9-2b74-420519218e00/w=16,h=16" />
    <link rel="manifest" href="/site.webmanifest" />
    
    <!-- Preload critical hero image for LCP -->
    <link rel="preload" as="image" href="https://imagedelivery.net/quAcZohoGyDsqffqCB2d5w/78de1c59-443e-4def-6cc3-8e841212e700/w=1920,q=75,f=webp" media="(min-width: 1200px)">
    <link rel="preload" as="image" href="https://imagedelivery.net/quAcZohoGyDsqffqCB2d5w/78de1c59-443e-4def-6cc3-8e841212e700/w=1200,q=75,f=webp" media="(min-width: 768px) and (max-width: 1199px)">
    <link rel="preload" as="image" href="https://imagedelivery.net/quAcZohoGyDsqffqCB2d5w/78de1c59-443e-4def-6cc3-8e841212e700/w=800,q=75,f=webp" media="(max-width: 767px)">
    
    <!-- Preconnect to external domains for performance -->
    <link rel="preconnect" href="https://imagedelivery.net" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    
    <!-- DNS prefetch for performance -->
    <link rel="dns-prefetch" href="//fonts.googleapis.com" />
    <link rel="dns-prefetch" href="//fonts.gstatic.com" />
    <link rel="dns-prefetch" href="//www.google-analytics.com" />
    
    <!-- Defer ads loading significantly -->
    <script>
      function loadAds() {
        try {
          const adsScript = document.createElement('script');
          adsScript.async = true;
          adsScript.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4009597004301932';
          adsScript.crossOrigin = 'anonymous';
          adsScript.onerror = function() {
            console.log('AdSense script failed to load - this is normal if ad blockers are present');
          };
          document.head.appendChild(adsScript);
        } catch (error) {
          console.log('AdSense loading error (likely ad blocker):', error);
        }
      }
      
      // Only load ads after significant user interaction
      let adTimerId;
      let adsLoaded = false;
      function scheduleAdLoad() {
        if (adsLoaded) return;
        clearTimeout(adTimerId);
        adTimerId = setTimeout(() => {
          if (!adsLoaded) {
            loadAds();
            adsLoaded = true;
          }
        }, 3000); // Reduced to 3 seconds after interaction
      }
      
      window.addEventListener('scroll', scheduleAdLoad, { once: true, passive: true });
      window.addEventListener('click', scheduleAdLoad, { once: true, passive: true });
      window.addEventListener('touchstart', scheduleAdLoad, { once: true, passive: true });
      
      // Fallback: load after page is fully loaded and settled
      window.addEventListener('load', () => {
        setTimeout(() => {
          if (!adsLoaded) {
            loadAds();
            adsLoaded = true;
          }
        }, 5000);
      });
    </script>
    <script type="module" crossorigin src="/assets/index-DZ0Yqb4w.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/vendor-L0icTwch.js">
    <link rel="modulepreload" crossorigin href="/assets/react-BEXM6dXw.js">
    <link rel="modulepreload" crossorigin href="/assets/react-router-Bb2WaiWp.js">
    <link rel="stylesheet" crossorigin href="/assets/vendor-B5OP3Rh7.css">
    <link rel="stylesheet" crossorigin href="/assets/index-DcRQ6BHZ.css">
  </head>
  <body>
    <div id="root">
      <!-- Fallback content for JavaScript disabled -->
      <noscript>
        <div style="text-align: center; padding: 2rem;">
          <h1>Utah Stocked Fish</h1>
          <p>Please enable JavaScript to view this site.</p>
        </div>
      </noscript>
      <!-- Loading spinner for better UX -->
      <div class="loading-spinner">
        <div class="spinner"></div>
        <span class="sr-only">Loading Utah Stocked Fish...</span>
      </div>
    </div>
    
    <!-- Load affiliate scripts non-blocking -->
    <script>
      // Load SkimLinks after main content
      function loadSkimLinks() {
        const script = document.createElement('script');
        script.async = true;
        script.src = 'https://s.skimresources.com/js/290410X1777418.skimlinks.js';
        script.onerror = function() { console.log('SkimLinks failed to load'); };
        document.head.appendChild(script);
      }
      
      // Load AvantLink after main content  
      function loadAvantLink() {
        const script = document.createElement('script');
        script.async = true;
        script.src = 'https://classic.avantlink.com/affiliate_app_confirm.php?mode=js&authResponse=2aee337602efced4a13c2fe0606502c74b86304e';
        script.onerror = function() { console.log('AvantLink failed to load'); };
        document.head.appendChild(script);
      }
      
      // Load affiliate scripts after page load
      if ('requestIdleCallback' in window) {
        requestIdleCallback(() => {
          loadSkimLinks();
          loadAvantLink();
        }, { timeout: 5000 });
      } else {
        setTimeout(() => {
          loadSkimLinks();
          loadAvantLink();
        }, 2000);
      }
    </script>
  </body>
</html>