<!doctype html>
<html lang="sv">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- Primary Meta Tags -->
    <title>Kunskapa – Gratis Quiz & AI-Quiz Online | Kahoot-Alternativ</title>
    <meta name="title" content="Kunskapa – Gratis Quiz & AI-Quiz Online | Kahoot-Alternativ" />
    <meta name="description" content="Spela gratis frågesport på svenska & engelska. Skapa spel med AI, dela via QR-kod, inga konton. Perfekt för klassrum, team & vänner." />
    <meta name="keywords" content="gratis quiz sverige, gratis quiz Sverige, quiz online gratis, kahoot gratis quiz, gratis frågesport online, frågesport, quiz frågor, frågor, gratis quiz frågor, frågesport med svar gratis, frågesport för vuxna, AI quiz, logik quiz, huvudräkning, mönsterigenkänning, kahoot alternativ, gratis quiz online, svenska frågor, frågesporter, multiplayer quiz, AI genererade frågor, quiz med AI, quizspel, 4 frågetyper, smart quiz, digitalt quiz, online quiz Sverige, mental math quiz, pattern recognition quiz, logic puzzle quiz, gratis sällskapsspel, quiz gratis, spela quiz gratis sverige" />
    <meta name="author" content="Kunskapa" />
    <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
    <link rel="canonical" href="https://kunskapa.app/" />
    
    <!-- Multilingual SEO - Hreflang Tags -->
    <link rel="alternate" hreflang="sv" href="https://kunskapa.app/" />
    <link rel="alternate" hreflang="en" href="https://quizarena.app/" />
    <link rel="alternate" hreflang="x-default" href="https://quizarena.app/" />
    
    <!-- Dynamic Language Detection for SEO (canonical handled by React/SEOHead) -->
    <script>
      // CRITICAL SEO: Set base language signals BEFORE React hydrates
      // This ensures Googlebot sees correct language even before JavaScript executes
      // Canonical URL is handled by React/SEOHead component after hydration
      (function() {
        const urlParams = new URLSearchParams(window.location.search);
        const currentHostname = window.location.hostname.replace('www.', '');
        
        // Determine default language based on domain
        let domainLang = 'sv'; // Default for kunskapa.app and others
        if (currentHostname === 'quizarena.app') {
          domainLang = 'en';
        }
        
        // URL parameter overrides domain default
        const lang = urlParams.get('lang') || domainLang;
        
        // Update HTML lang attribute - CRITICAL for SEO (matches base HTML)
        document.documentElement.lang = lang;
        
        // Update og:locale - CRITICAL: must match html lang
        const ogLocale = document.querySelector('meta[property="og:locale"]');
        if (ogLocale) {
          ogLocale.setAttribute('content', lang === 'en' ? 'en_US' : 'sv_SE');
        }
        
        // Update hreflang tags - ensure they point to correct URLs based on current pathname
        // CRITICAL SEO: hreflang must match the exact path on each domain
        // e.g., kunskapa.app/kahoot-alternativ → quizarena.app/kahoot-alternativ (not quizarena.app/)
        // CRITICAL: Always use brand domains, never current domain
        // CRITICAL: Path should NOT include query parameters (like ?lang=en)
        const currentPath = window.location.pathname || '/';
        const hreflangSv = document.querySelector('link[hreflang="sv"]');
        const hreflangEn = document.querySelector('link[hreflang="en"]');
        const hreflangDefault = document.querySelector('link[hreflang="x-default"]');
        
        // Hreflang should always point to the canonical URL for that language version
        // Swedish version ALWAYS on kunskapa.app, English version ALWAYS on quizarena.app
        // This works even if user is on kunskapa.app but viewing English via ?lang=en
        if (hreflangSv) hreflangSv.setAttribute('href', `https://kunskapa.app${currentPath}`);
        if (hreflangEn) hreflangEn.setAttribute('href', `https://quizarena.app${currentPath}`);
        // x-default points to quizarena.app (English) as the default
        if (hreflangDefault) hreflangDefault.setAttribute('href', `https://quizarena.app${currentPath}`);
        
        // Update page title, description, and OG tags based on language (only if English)
        // Swedish version is already correct in static HTML
        // CRITICAL SEO: Update if language is English (either by domain or param)
        if (lang === 'en') {
          document.title = 'Kunskapa - Free AI Quiz Game | Kahoot Alternative';
          const titleMeta = document.querySelector('meta[name="title"]');
          const descMeta = document.querySelector('meta[name="description"]');
          const ogTitle = document.querySelector('meta[property="og:title"]');
          const ogDesc = document.querySelector('meta[property="og:description"]');
          const twitterTitle = document.querySelector('meta[property="twitter:title"]');
          const twitterDesc = document.querySelector('meta[property="twitter:description"]');
          
          if (titleMeta) titleMeta.setAttribute('content', 'Kunskapa - Free AI Quiz Game | Kahoot Alternative');
          if (descMeta) descMeta.setAttribute('content', 'Play free quiz games in Swedish & English. Create games with AI, share via QR code, no accounts needed. Perfect for classrooms, teams & friends.');
          if (ogTitle) ogTitle.setAttribute('content', 'Kunskapa - Free AI Quiz Game | Kahoot Alternative');
          if (ogDesc) ogDesc.setAttribute('content', 'Play free quiz games in Swedish & English. Create games with AI, share via QR code, no accounts needed. Perfect for classrooms, teams & friends.');
          if (twitterTitle) twitterTitle.setAttribute('content', 'Kunskapa - Free AI Quiz Game | Kahoot Alternative');
          if (twitterDesc) twitterDesc.setAttribute('content', 'Play free quiz games in Swedish & English. Create games with AI, share via QR code, no accounts needed. Perfect for classrooms, teams & friends.');
          
          // Update og:url and twitter:url for English version
          // CRITICAL: Never update canonical here - canonical is handled by React/SEOHead
          const ogUrl = document.querySelector('meta[property="og:url"]');
          const twitterUrl = document.querySelector('meta[property="twitter:url"]');
          
          // Construct correct English URL
          let ogTwitterUrl;
          if (currentHostname === 'quizarena.app') {
            ogTwitterUrl = `https://quizarena.app${currentPath}`;
          } else {
            ogTwitterUrl = `https://kunskapa.app${currentPath}?lang=en`;
          }
          
          if (ogUrl) ogUrl.setAttribute('content', ogTwitterUrl);
          if (twitterUrl) twitterUrl.setAttribute('content', ogTwitterUrl);
        }
        // NOTE: Canonical URL is NEVER updated here - it's handled by React/SEOHead component
        // This ensures canonical is always correct based on the actual page route and URL parameter
      })();
    </script>
    
    <!-- Google AdSense Site Verification -->
    <meta name="google-adsense-account" content="ca-pub-4551498791885406">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://kunskapa.app/" />
    <meta property="og:title" content="Kunskapa – Gratis Quiz & AI-Quiz Online | Kahoot-Alternativ" />
    <meta property="og:description" content="Spela gratis frågesport på svenska & engelska. Skapa spel med AI, dela via QR-kod, inga konton. Perfekt för klassrum, team & vänner." />
    <meta property="og:image" content="https://kunskapa.app/quizarena-icon.svg" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:site_name" content="Kunskapa" />
    <meta property="og:locale" content="sv_SE" />
    
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="https://kunskapa.app/" />
    <meta property="twitter:title" content="Kunskapa – Gratis Quiz & AI-Quiz Online | Kahoot-Alternativ" />
    <meta property="twitter:description" content="Spela gratis frågesport på svenska & engelska. Skapa spel med AI, dela via QR-kod, inga konton. Perfekt för klassrum, team & vänner." />
    <meta property="twitter:image" content="https://kunskapa.app/quizarena-icon.svg" />
    
    <!-- Additional SEO Meta Tags -->
    <meta name="theme-color" content="#8B5CF6" />
    <meta name="msapplication-TileColor" content="#8B5CF6" />
    <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="Kunskapa" />
    <meta name="application-name" content="Kunskapa" />
    
    <!-- Geo tags removed - not used by Google per feedback -->
    
    <!-- Enhanced SEO Meta Tags -->
    <meta name="format-detection" content="telephone=no" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="msapplication-config" content="/browserconfig.xml" />
    <meta name="referrer" content="strict-origin-when-cross-origin" />
    
    <!-- Hreflang for Swedish and English markets (removed duplicates - using main hreflang tags above) -->
    
    <!-- Preconnect to external domains for performance -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://pagead2.googlesyndication.com" />
    <link rel="preconnect" href="https://www.googletagmanager.com" />
    <link rel="preconnect" href="https://fundingchoicesmessages.google.com" />
    <link rel="preconnect" href="https://generativelanguage.googleapis.com" />
    
    <!-- DNS prefetch for additional performance -->
    <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
    <link rel="dns-prefetch" href="https://www.google-analytics.com" />
    <link rel="dns-prefetch" href="https://region1.google-analytics.com" />
    
    <!-- Resource hints removed - icons are not critical for first paint -->
    
    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="/quizarena-icon.svg" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" href="/icon-192.png" />
    
    <!-- PWA Manifest -->
    <link rel="manifest" href="/manifest.json" />
    
    <!-- Structured Data (JSON-LD) - REMOVED from index.html -->
    <!-- All structured data is now handled dynamically by SEOHead component per page -->
    <!-- This ensures language consistency and removes duplicate WebApplication blocks -->

    <!-- ======================================== -->
    <!-- GOOGLE ANALYTICS & ADSENSE INTEGRATION -->
    <!-- ======================================== -->
    <!-- 
    CRITICAL: This setup is production-ready and tested.
    DO NOT modify without understanding the implications.
    
    Key Learnings:
    - GA4 config must be standard format (no parameters)
    - Privacy settings go in separate gtag('set') call
    - Auto Ads handled automatically by AdSense dashboard
    - Consent Mode v2 required for GDPR compliance
    -->
    
    <script>
      // 1) Consent Mode defaults - CRITICAL for GDPR compliance
      // This sets denied state until user makes consent choice
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      
      // Set default consent state (denied by default) - REQUIRED for EU compliance
      gtag('consent', 'default', {
        'ad_storage': 'denied',           // Required for AdSense
        'ad_user_data': 'denied',         // NEW in consent mode v2
        'ad_personalization': 'denied',   // NEW in consent mode v2
        'analytics_storage': 'denied',    // CHANGED: Denied by default for strict GDPR
        'functionality_storage': 'granted',
        'security_storage': 'granted',
        'wait_for_update': 500            // Wait for Funding Choices CMP
      });
      
      // Enable URL passthrough for better conversion tracking
      gtag('set', 'url_passthrough', true);
      
      // Enable ads data redaction when ad_storage is denied
      gtag('set', 'ads_data_redaction', true);
    </script>

    <!-- 2) Funding Choices CMP - Google's EU Consent Management -->
    <!-- 
    CRITICAL: This is Google's own CMP for EU compliance.
    DO NOT replace with third-party CMPs without understanding implications.
    
    Key Learnings:
    - Must signal presence with iframe
    - Safety checks required for googlefc.observe
    - 2000ms timeout needed for proper loading
    - Updates consent mode when user makes choices
    -->
    <!-- Google AdSense - Manual Ad Units Only -->
    <!-- Google AdSense - Auto Ads ENABLED -->
    <!-- Auto Ads will automatically place ads in optimal locations -->
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4551498791885406"
         crossorigin="anonymous" 
         onerror="console.warn('AdSense script failed to load - this is normal with ad blockers')"></script>
    
    <!-- Initialize adsbygoogle with Auto Ads enabled -->
    <!-- Redundant manual init removed; the client= script is sufficient for Auto Ads -->
    
    <!-- Google Cast SDK - Temporarily disabled due to CSP issues -->
    <!-- <script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script> -->
    
    <!-- AUTO ADS ENABLED -->
    <!-- Google will automatically place ads in optimal locations -->
    <!-- 
    Auto Ads are now enabled both in code and dashboard configuration
    Google will intelligently place ads where they perform best
    Manual ad units can still be used in addition to Auto Ads
    -->
    
    <!-- Google Funding Choices CMP -->
    <script async src="https://fundingchoicesmessages.google.com/i/pub-4551498791885406?ers=1"></script>
    <script>
      (function() {
        // Signal to Google that Funding Choices is present
        // This is REQUIRED for proper CMP integration
        function signalGooglefcPresent() {
          if (!window.frames['googlefcPresent']) {
            if (document.body) {
              var iframe = document.createElement('iframe');
              iframe.style.width = '0';
              iframe.style.height = '0';
              iframe.style.border = 'none';
              iframe.style.display = 'none';
              iframe.name = 'googlefcPresent';
              document.body.appendChild(iframe);
            } else {
              // Retry if document.body not ready
              setTimeout(signalGooglefcPresent, 0);
            }
          }
        }
        signalGooglefcPresent();
        
        // Handle consent updates - Optimized to run as soon as possible
        function initConsentObserver() {
          if (window.googlefc && typeof window.googlefc.observe === 'function') {
            window.googlefc.observe(function(consentStatus) {
              // 1 = Consented, 2 = Denied, 0 = Unknown/Dismissed
              const granted = consentStatus === 1;
              const status = granted ? 'granted' : 'denied';
              
              gtag('consent', 'update', {
                'ad_storage': status,
                'ad_user_data': status,
                'ad_personalization': status,
                'analytics_storage': status
              });
            });
          } else {
            // Retry quickly if googlefc is not yet ready (up to 5 seconds)
            setTimeout(initConsentObserver, 500);
          }
        }
        
        // Start observing immediately, don't wait for full window load
        initConsentObserver();
      })();
    </script>

    <!-- 3) Google Analytics 4 - PRODUCTION READY -->
    <!-- 
    CRITICAL: This is the CORRECT format for GA4.
    DO NOT add parameters to gtag('config') - it breaks detection.
    
    Key Learnings:
    - Standard format: gtag('config', 'G-M1SK729P2Z');
    - Privacy settings in separate gtag('set') call
    - This format passes Google's "Data collection active" test
    -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-M1SK729P2Z" 
            onerror="console.warn('Google Analytics script failed to load - this is normal with ad blockers')"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      
      // CRITICAL: Standard format - NO parameters in config call
      // Adding parameters here causes "Data collection not active" error
      gtag('config', 'G-M1SK729P2Z', {
        'anonymize_ip': true
      });
      
      // NOTE: Removed hardcoded 'allow_ad_personalization_signals: false'
      // This is now correctly handled by the 'ad_personalization' consent flag above.
      // If user consents, we want this to be true. If they deny, it stays false.
    </script>

    <!-- 4) AdSense Auto Ads - ENABLED in both code and dashboard -->
    <!-- 
    CRITICAL: Auto Ads are now properly enabled!
    Google will automatically place ads in optimal locations.
    
    Key Configuration:
    - enable_page_level_ads: true in code
    - Auto Ads enabled in AdSense dashboard
    - Google will intelligently place ads for best performance
    -->
        
    <script type="module" crossorigin src="/assets/index-BJCy9eYl.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-4LmGHgcr.css">
  <link rel="manifest" href="/manifest.webmanifest"><script id="vite-plugin-pwa:register-sw" src="/registerSW.js"></script></head>

  <body>
    <div id="root">
      <div style="font-family: system-ui, sans-serif; text-align: center; padding: 50px;">
        <h1 style="font-size: 24px; margin-bottom: 20px;">Kunskapa - Gratis Quiz & AI-frågesport</h1>
        <p>Laddar världens bästa gratis quiz-spel...</p>
        <noscript>
          <p>Du måste aktivera JavaScript för att spela Kunskapa.</p>
        </noscript>
      </div>
      <!-- SEO Content Fallback - Prevents Soft 404 errors on dynamic routes -->
      <!-- This content is visible to crawlers but removed by React on mount -->
      <div id="seo-content-fallback" style="padding: 20px; font-family: sans-serif;">
        <section class="sv-fallback">
          <h1>Kunskapa AI Quiz Arena</h1>
          <p>Välkommen till Sveriges smartaste AI-quiz. Skapa eller gå med i ett spel om logik, matematik och kunskap. Ingen registrering krävs.</p>
        </section>
        <section class="en-fallback" style="display:none;">
          <h1>QuizArena AI Quiz</h1>
          <p>Join the world's smartest AI-powered quiz arena. Play logic puzzles, math patterns, and knowledge trivia. No registration needed.</p>
        </section>
      </div>
    </div>
    <script>
      // CRITICAL SEO: Show correct language fallback content based on URL parameter
      // This ensures crawlers see the right language content immediately
      (function() {
        const urlParams = new URLSearchParams(window.location.search);
        const urlLang = urlParams.get('lang');
        const currentHostname = window.location.hostname.replace('www.', '');
        
        // Determine language: URL parameter > domain default
        let initialLanguage = 'sv'; // Default
        if (urlLang === 'en' || urlLang === 'sv') {
          initialLanguage = urlLang;
        } else if (currentHostname === 'quizarena.app') {
          initialLanguage = 'en';
        }
        
        // Show/hide appropriate language section
        const svFallback = document.querySelector('.sv-fallback');
        const enFallback = document.querySelector('.en-fallback');
        
        if (initialLanguage === 'en') {
          if (svFallback) svFallback.style.display = 'none';
          if (enFallback) enFallback.style.display = 'block';
        } else {
          if (svFallback) svFallback.style.display = 'block';
          if (enFallback) enFallback.style.display = 'none';
        }
      })();
    </script>
  </body>
</html> 
