
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title id="dynamic-title">BCT Containers</title>
    <meta name="description" content="Loading...">
    <meta name="author" content="BCT Containers" />
    
    
    <!-- Critical: Set language immediately based on URL & route-specific title -->
    <script>
      (function() {
        const path = window.location.pathname;
        const segments = path.split('/').filter(Boolean);
        const getLang = () => {
          if (segments[0] === 'nl-be') return 'nl';
          if (segments[0] === 'fr-be') return 'fr';
          if (['de','nl','fr','en'].includes(segments[0])) return segments[0];
          return 'de';
        };
        const lang = getLang();
        const lastSeg = segments[segments.length - 1] || '';
        const humanize = (s) => decodeURIComponent(s).replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
        const setSEO = (t, d) => {
          const titleEl = document.getElementById('dynamic-title');
          if (titleEl) titleEl.textContent = t;
          const descEl = document.getElementById('dynamic-description');
          if (descEl) descEl.setAttribute('content', d);
          document.title = t;
        };
        const homepageTitles = {
          de: 'Seecontainer kaufen Belgien | BCT Containers | Ab 1.950€',
          nl: 'Zeecontainer kopen België | BCT Containers | Vanaf €1.450',
          fr: 'Conteneur maritime acheter Belgique | BCT Containers | À partir de 1.450€',
          en: 'Shipping containers Europe | BCT Containers | From €1,450'
        };
        const homepageDescs = {
          de: 'Seecontainer kaufen in Belgien ✓ Neue & gebrauchte Container ab 1.950€ ✓ 20ft & 40ft ✓ Schnelle Lieferung ✓ ISO-zertifiziert ✓ Jetzt Angebot anfordern!',
          nl: 'Zeecontainer kopen in België ✓ Nieuwe & gebruikte containers vanaf €1.450 ✓ 20ft & 40ft ✓ Snelle levering ✓ ISO-gecertificeerd ✓ Vraag nu offerte aan!',
          fr: 'Conteneur maritime acheter en Belgique ✓ Conteneurs neufs & d\'occasion à partir de 1.450€ ✓ 20ft & 40ft ✓ Livraison rapide ✓ Certifié ISO ✓ Demandez un devis!',
          en: 'Buy & rent sea containers ✓ New & used from €1,450 ✓ 20ft & 40ft ✓ Fast delivery ✓ ISO-certified ✓ Request quote now!'
        };

        const isHome = path === '/' || (segments.length === 1 && ['de','nl','fr','en','nl-be','fr-be'].includes(segments[0]));
        if (isHome) {
          setSEO(homepageTitles[lang], homepageDescs[lang]);
          return;
        }

        // City pages
        if (segments.includes('city') && segments.length >= 2) {
          const citySlug = segments[segments.indexOf('city') + 1] || '';
          const city = humanize(citySlug);
          const map = {
            de: `Seecontainer in ${city} | BCT Containers`,
            nl: `Zeecontainers in ${city} | BCT Containers`,
            fr: `Conteneurs à ${city} | BCT Containers`,
            en: `Shipping Containers in ${city} | BCT Containers`
          };
          setSEO(map[lang], homepageDescs[lang]);
          return;
        }

        // Contact page
        if (/contact$/.test(path)) {
          const map = { de: 'Kontakt | BCT Containers', nl: 'Contact | BCT Containers', fr: 'Contact | BCT Containers', en: 'Contact | BCT Containers' };
          setSEO(map[lang], homepageDescs[lang]);
          return;
        }

        // Product category/listing pages
        if (/(\/(container|products))(\/)?$/.test(path)) {
          const map = {
            de: 'Container kaufen & mieten | BCT Containers',
            nl: 'Container kopen & huren | BCT Containers',
            fr: 'Conteneurs achat & location | BCT Containers',
            en: 'Buy & Rent Containers | BCT Containers'
          };
          setSEO(map[lang], homepageDescs[lang]);
          return;
        }

        // Product detail pages (slug-based)
        if (/(\\/(container|products)\\/).test(path)) {
          const product = humanize(lastSeg);
          setSEO(`${product} | BCT Containers`, homepageDescs[lang]);
          return;
        }

        // Fallback
        setSEO(homepageTitles[lang], homepageDescs[lang]);
      })();
    </script>
    
    <!-- Google Merchant Center Verification -->
    <meta name="google-site-verification" content="lS7QM3D8dBp6fW_RHl5QJCKtEn4JHEG9o8Lx4DCZb1A" />
    
    <!-- Google Consent Mode v2 Setup -->
    <script>
      // Initialize dataLayer before any other tracking scripts
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      
      // Set default consent mode before any tracking loads - Google Consent Mode v2
      gtag('consent', 'default', {
        'analytics_storage': 'denied',
        'ad_storage': 'denied',
        'ad_user_data': 'denied',
        'ad_personalization': 'denied',
        'functionality_storage': 'denied',
        'personalization_storage': 'denied',
        'security_storage': 'granted',
        'wait_for_update': 2000,
        'region': ['AT', 'BE', 'BG', 'HR', 'CY', 'CZ', 'DK', 'EE', 'FI', 'FR', 'DE', 'GR', 'HU', 'IE', 'IT', 'LV', 'LT', 'LU', 'MT', 'NL', 'PL', 'PT', 'RO', 'SK', 'SI', 'ES', 'SE', 'IS', 'LI', 'NO']
      });
      
      // Set granted consent for non-EU regions
      gtag('consent', 'default', {
        'analytics_storage': 'granted',
        'ad_storage': 'granted',
        'ad_user_data': 'granted',
        'ad_personalization': 'granted',
        'functionality_storage': 'granted',
        'personalization_storage': 'granted'
      });

      gtag('js', new Date());
      gtag('config', 'G-6SHT9K6NQN', {
        'anonymize_ip': true,
        'cookie_flags': 'SameSite=None;Secure'
      });
    </script>
    
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-T8DFNGLP');</script>
    <!-- End Google Tag Manager -->
    
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-6SHT9K6NQN"></script>
    
    <!-- Google AdWords Conversion Tracking -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=AW-CONVERSION_ID"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'AW-CONVERSION_ID');
    </script>
    
    <!-- Microsoft Bing UET Setup -->
    <script>
      // Initialize UET queue early
      window.uetq = window.uetq || [];
      
      // The actual UET script will be loaded by the cookie consent component
      // when marketing consent is granted
    </script>
    
    <!-- Alli AI Optimization Script -->
    <script>
      // Initialize Alli AI widget queue
      window.AlliJSWidget = window.AlliJSWidget || [];
      window.alli = window.alli || function () { 
        (window.alli.q = window.alli.q || []).push(arguments) 
      };
      
      // The actual Alli AI script will be loaded by the cookie consent component
      // when analytics consent is granted
    </script>
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="https://storage.googleapis.com/gpt-engineer-file-uploads/cTrxsCpJ63WgQH527thvRGiXWH12/uploads/1757863485256-Design ohne Titel (9).png">
    <link rel="apple-touch-icon" href="/og-image.png" />
    
    <!-- Dynamic Open Graph / Social Media Meta Tags -->
    <meta property="og:title" content="" id="og-title" />
    <meta property="og:description" content="" id="og-description" />
    <meta property="og:image" content="https://storage.googleapis.com/gpt-engineer-file-uploads/cTrxsCpJ63WgQH527thvRGiXWH12/social-images/social-1757863496426-Design ohne Titel (9).png">
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="" id="og-url" />
    <meta property="og:site_name" content="BCT Containers" />
    <meta property="og:locale" content="" id="og-locale" />
    
    <!-- Dynamic Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="" id="twitter-title" />
    <meta name="twitter:description" content="" id="twitter-description" />
    <meta name="twitter:image" content="https://storage.googleapis.com/gpt-engineer-file-uploads/cTrxsCpJ63WgQH527thvRGiXWH12/social-images/social-1757863496426-Design ohne Titel (9).png">
    <meta name="twitter:site" content="@bctcontainers" />
    
    <!-- Set dynamic OG & Twitter tags based on current title/description immediately -->
    <script>
      (function() {
        const currentUrl = window.location.href;
        const title = (document.getElementById('dynamic-title')?.textContent || document.title || '').trim();
        const description = (document.getElementById('dynamic-description')?.getAttribute('content') || '').trim();
        const ogLocale = (function(){
          const p = window.location.pathname;
          if (p.startsWith('/nl-be')) return 'nl_BE';
          if (p.startsWith('/fr-be')) return 'fr_BE';
          if (p.startsWith('/de')) return 'de_DE';
          if (p.startsWith('/nl')) return 'nl_NL';
          if (p.startsWith('/fr')) return 'fr_FR';
          return 'en_US';
        })();

        document.getElementById('og-title')?.setAttribute('content', title);
        document.getElementById('og-description')?.setAttribute('content', description);
        document.getElementById('og-url')?.setAttribute('content', currentUrl);
        document.getElementById('og-locale')?.setAttribute('content', ogLocale);
        document.getElementById('twitter-title')?.setAttribute('content', title);
        document.getElementById('twitter-description')?.setAttribute('content', description);
      })();
    </script>
    
    <!-- WhatsApp specific meta tags -->
    <meta property="og:image:alt" content="BCT Containers - Premium shipping container solutions" />
    
    <!-- Dynamic Alternate Language Links (managed by React components) -->
    
    <!-- Preload Important Assets -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap" as="style">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap" media="print" onload="this.media='all'; this.onload=null;">
    
    <!-- Performance optimizations -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="dns-prefetch" href="https://www.googletagmanager.com">
    <link rel="dns-prefetch" href="https://www.google-analytics.com">
    
    <!-- Resource hints for better loading -->
    
    <link rel="preload" href="/og-image.png" as="image" type="image/png">
    
    
    <!-- Critical CSS inlined for fastest render -->
    <style>
      /* Critical above-the-fold CSS */
      body { 
        font-family: system-ui, -apple-system, sans-serif;
        margin: 0;
        background: #fff;
        color: #333;
        line-height: 1.6;
      }
      .loading-spinner {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        border: 3px solid #f3f3f3;
        border-top: 3px solid #ea0b3b;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }
      @keyframes spin {
        0% { transform: translate(-50%, -50%) rotate(0deg); }
        100% { transform: translate(-50%, -50%) rotate(360deg); }
      }
    </style>
    
    <!-- Structured Data for Organization -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "Organization",
        "name": "BCT Containers",
        "url": "https://bctcontainers.com",
        "logo": "https://bct-containers.com/bct-logo.svg",
        "description": "Belgium Container Trading BV - Premium container solutions for businesses across Europe.",
        "address": {
          "@type": "PostalAddress",
          "addressCountry": "Belgium"
        },
        "contactPoint": {
          "@type": "ContactPoint",
          "telephone": "+32476769995",
          "contactType": "sales"
        },
        "sameAs": [
          "https://www.linkedin.com/company/bct-containers",
          "https://www.facebook.com/bctcontainers"
        ]
      }
    </script>
    
    <!-- FAQ Schema (to be populated dynamically) -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "FAQPage",
        "mainEntity": []
      }
    </script>
    <script type="module" crossorigin src="/js/index-CNF5TgaZ.js"></script>
    <link rel="modulepreload" crossorigin href="/js/react-vendor-BmTnOjqt.js">
    <link rel="modulepreload" crossorigin href="/js/query-vendor-BR3i43ex.js">
    <link rel="modulepreload" crossorigin href="/js/supabase-BWrN8A5o.js">
    <link rel="modulepreload" crossorigin href="/js/ui-vendor-LtQJEG6M.js">
    <link rel="modulepreload" crossorigin href="/js/utils-CAu7q4fp.js">
    <link rel="modulepreload" crossorigin href="/js/icons-CHxFeqQi.js">
    <link rel="modulepreload" crossorigin href="/js/form-vendor-ykDA2Jog.js">
    <link rel="modulepreload" crossorigin href="/js/seo-utils-bqs0kqYZ.js">
    <link rel="modulepreload" crossorigin href="/js/carousel-B7zxgFmc.js">
    <link rel="stylesheet" crossorigin href="/css/index-BgZonynf.css">
  </head>

  <body>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T8DFNGLP"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    
    <div id="root">
      <!-- Loading spinner for better perceived performance -->
      <div class="loading-spinner"></div>
    </div>
    
    <!-- Performance and error tracking -->
    <script>
      // Performance timing
      window.performance?.mark?.('app-start');
      
      // Error boundary
      window.addEventListener('error', function(e) {
        console.error('Global error:', e.error);
        // Log to analytics if available
        if (window.gtag) {
          gtag('event', 'exception', {
            'description': e.error?.message || 'Unknown error',
            'fatal': false
          });
        }
      });
      
      // Global image error handler - fallback to placeholder
      document.addEventListener('error', function(e) {
        if (e.target && e.target.tagName === 'IMG') {
          const img = e.target;
          if (!img.src.includes('/images/placeholder-image.svg')) {
            img.src = '/images/placeholder-image.svg';
          }
        }
      }, true);
      
      // Service Worker registration
      if ('serviceWorker' in navigator && 'production' === 'production') {
        window.addEventListener('load', function() {
          navigator.serviceWorker.register('/sw.js')
            .then(function(registration) {
              console.log('SW registered successfully');
            })
            .catch(function(error) {
              console.log('SW registration failed');
            });
        });
      }
    </script>
    
    
  </body>
</html>
