
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Google tag (gtag.js) - Non-blocking analytics -->
    <script>
      // Defer analytics to avoid blocking main thread
      window.addEventListener('load', function() {
        const script = document.createElement('script');
        script.async = true;
        script.src = 'https://www.googletagmanager.com/gtag/js?id=G-N2NSV9V61M';
        document.head.appendChild(script);
        
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'G-N2NSV9V61M');
      });
    </script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Elf Letter Bot | Create Magical Elf Letters in Seconds</title>
    <meta name="description" content="Create magical, personalized letters from your family's Christmas elf in seconds with Elf Letter Bot. Surprise your children with daily elf adventures!" />
    <meta name="author" content="Elf Letter Bot" />
    <meta name="keywords" content="elf letter, christmas elf, personalized elf letters, elf on shelf, holiday traditions, christmas magic" />

    <meta property="og:title" content="Elf Letter Bot | Create Magical Elf Letters in Seconds" />
    <meta property="og:description" content="Create magical, personalized letters from your family's Christmas elf in seconds with Elf Letter Bot. Surprise your children with daily elf adventures!" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
    <meta property="og:site_name" content="Elf Letter Bot" />
    <meta property="og:url" content="https://elfletterbot.com/" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@lovable_dev" />
    <meta name="twitter:title" content="Elf Letter Bot | Create Magical Elf Letters in Seconds" />
    <meta name="twitter:description" content="Create magical, personalized letters from your family's Christmas elf in seconds with Elf Letter Bot. Surprise your children with daily elf adventures!" />
    <meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
    
    <!-- Favicon - Multiple formats for better compatibility and Google Search -->
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
    <link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">
    <link rel="manifest" href="/manifest.json">
    <link rel="canonical" href="https://elfletterbot.com/">
    
    <!-- Preload LCP image for 260ms performance gain -->
    <link rel="preload" as="image" href="https://shxckqhvdnkggduxenmf.supabase.co/storage/v1/object/public/homepage-media//Joyful-Elves-in-Mailroom.webp">
    
    <!-- DNS prefetch and preconnect for external resources (130ms savings) -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://shxckqhvdnkggduxenmf.supabase.co">
    <link rel="dns-prefetch" href="https://www.googletagmanager.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
    <script type="module" crossorigin src="/assets/app-BY_abIMS.js"></script>
    <link rel="modulepreload" as="script" crossorigin href="/assets/vendor-BULeRehE.js">
    <link rel="modulepreload" as="script" crossorigin href="/assets/ui-DwB2hnwk.js">
    <link rel="modulepreload" as="script" crossorigin href="/assets/tooltip-BgTITp39.js">
    <link rel="stylesheet" crossorigin href="/assets/tooltip-CanIhYKQ.css">
    <link rel="stylesheet" crossorigin href="/assets/app-BYKMJDwo.css">
  </head>

  <body>
    <div id="root"></div>
    <!-- IMPORTANT: GPTengineer workflow helper. Keep this script/comment so internal automation continues to work; it has no user-facing functionality. -->
    <script src="https://cdn.gpteng.co/gptengineer.js" type="module"></script>
    <script>
      // Proactively unregister legacy service worker at /sw.js to avoid stale caches on iOS
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.getRegistrations?.()
          .then((registrations) => {
            registrations.forEach((reg) => {
              const url = reg.active?.scriptURL || reg.waiting?.scriptURL || reg.installing?.scriptURL;
              if (url && url.endsWith('/sw.js')) {
                reg.unregister();
              }
            });
          })
          .catch(() => {});
      }
    </script>
    <script>
      // Lightweight debug overlay enabled via ?debug=1 (helps capture iOS errors)
      (function () {
        if (!/([?&])debug=1\b/.test(location.search)) return;

        var box = document.createElement('div');
        box.style.cssText = 'position:fixed;left:0;right:0;bottom:0;max-height:40vh;overflow:auto;background:rgba(0,0,0,.85);color:#0f0;font:12px/1.4 monospace;z-index:2147483647;padding:8px;white-space:pre-wrap;';
        box.setAttribute('id', 'debug-overlay');

        var formatArgs = function (args) {
          return Array.prototype.map.call(args, function (arg) {
            if (typeof arg === 'string') return arg;
            try {
              return JSON.stringify(arg);
            } catch (err) {
              return '[unserializable:' + (err && err.message ? err.message : 'unknown') + ']';
            }
          }).join(' ');
        };

        var log = function (msg, level) {
          var line = document.createElement('div');
          line.textContent = '[' + new Date().toISOString() + '] ' + msg;
          line.style.color = level === 'error' ? '#ff6b6b' : level === 'warn' ? '#f5c16c' : '#aaf0d1';
          box.appendChild(line);
          if (box.childNodes.length > 500) {
            box.removeChild(box.firstChild);
          }
        };

        var originalConsole = {};
        ['log', 'info', 'warn', 'error'].forEach(function (level) {
          if (typeof console === 'undefined' || typeof console[level] !== 'function') return;
          originalConsole[level] = console[level].bind(console);
          console[level] = function () {
            originalConsole[level].apply(console, arguments);
            log('console.' + level + ': ' + formatArgs(arguments), level);
          };
        });

        window.__DEBUG_OVERLAY__ = {
          log: function (message, level) {
            log(message, level || 'info');
          }
        };

        try {
          var moduleProbe = document.createElement('script');
          log('module support detected: ' + ('noModule' in moduleProbe), 'info');
        } catch (probeError) {
          log('module support detection failed: ' + probeError, 'warn');
        }

        window.addEventListener('error', function (e) {
          var details = (e.message || e.error || 'Unknown error') + ' @ ' + (e.filename || '') + ':' + (e.lineno || '?') + ':' + (e.colno || '?');
          if ((!details || details.trim() === 'Unknown error @ ::') && e.target && e.target.tagName === 'SCRIPT') {
            details = 'Script load error: ' + (e.target.src || '[inline script]');
          }
          log('Error: ' + details, 'error');
        });

        window.addEventListener('unhandledrejection', function (e) {
          var reason = e.reason && (e.reason.stack || e.reason.message || e.reason);
          log('UnhandledRejection: ' + reason, 'error');
        });

        document.addEventListener('readystatechange', function () {
          log('document.readyState changed -> ' + document.readyState, 'info');
        });

        window.addEventListener('load', function () {
          log('window load event fired', 'info');
        });

        var trackModuleScripts = function (stage) {
          try {
            var moduleScripts = Array.prototype.slice.call(document.querySelectorAll('script[type="module"]'));
            if (moduleScripts.length === 0) {
              log('module tracker (' + stage + '): no <script type="module"> tags found yet', 'warn');
              return;
            }
            moduleScripts.forEach(function (script) {
              if (script.__debugTracked) return;
              script.__debugTracked = true;
              var src = script.src || '[inline module script]';
              log('module tracker (' + stage + '): observing ' + src, 'info');
              script.addEventListener('load', function () {
                log('module script loaded successfully: ' + src, 'info');
              });
              script.addEventListener('error', function (event) {
                log('module script failed to load: ' + src + ' -> ' + (event && event.message ? event.message : 'unknown error'), 'error');
              });
            });
          } catch (err) {
            log('module tracker (' + stage + '): exception ' + err, 'error');
          }
        };

        var fetchContentType = function (url, label) {
          if (typeof fetch !== 'function') {
            log(label + ': fetch API unavailable', 'warn');
            return;
          }
          fetch(url, { method: 'HEAD' })
            .then(function (response) {
              log(label + ': status=' + response.status + ' content-type="' + response.headers.get('content-type') + '"', response.ok ? 'info' : 'warn');
            })
            .catch(function (error) {
              log(label + ': HEAD request failed -> ' + (error && error.message ? error.message : error), 'error');
            });
        };

        trackModuleScripts('immediate');
        setTimeout(function () { trackModuleScripts('500ms'); }, 500);
        setTimeout(function () { trackModuleScripts('2000ms'); }, 2000);

        setTimeout(function () {
          try {
            var scripts = document.querySelectorAll('script[type="module"]');
            scripts.forEach(function (script, idx) {
              if (script.src) {
                fetchContentType(script.src, 'module HEAD check #' + (idx + 1) + ' (' + script.src + ')');
              }
            });
          } catch (err) {
            log('module HEAD check failed: ' + err, 'error');
          }
        }, 750);

        setTimeout(function () {
          var root = document.getElementById('root');
          if (root) {
            var childCount = root.childNodes.length;
            var preview = root.innerHTML.slice(0, 120).replace(/\s+/g, ' ');
            log('root snapshot: children=' + childCount + ' preview="' + preview + (root.innerHTML.length > 120 ? '…' : '') + '"', 'info');
          } else {
            log('root snapshot: #root not found', 'warn');
          }
        }, 1500);

        if (typeof window.fetch === 'function') {
          var originalFetch = window.fetch.bind(window);
          window.fetch = function () {
            var url = arguments[0];
            log('fetch: ' + url, 'info');
            return originalFetch.apply(window, arguments).then(function (response) {
              log('fetch resolved: ' + url + ' (status ' + response.status + ')', 'info');
              return response;
            }).catch(function (error) {
              log('fetch rejected: ' + url + ' -> ' + (error && error.message ? error.message : error), 'error');
              throw error;
            });
          };
        }

        log('Debug overlay enabled (UA: ' + navigator.userAgent + ')');
        document.addEventListener('DOMContentLoaded', function(){ document.body.appendChild(box); });
      })();
    </script>
  </body>
</html>
