head.html

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script type="speculationrules">
    {
        "prerender": [{
            "where": {
                "href_matches": "/*"
            },
            "eagerness": "moderate"
        }]
    }
</script>
<script type="importmap">
    {
        "imports": {
            "@dropins/tools/": "/scripts/__dropins__/tools/",
            "@dropins/storefront-cart/": "/scripts/__dropins__/storefront-cart/",
            "@dropins/storefront-checkout/": "/scripts/__dropins__/storefront-checkout/",
            "@dropins/storefront-pdp/": "/scripts/__dropins__/storefront-pdp/",
            "@dropins/storefront-order-confirmation/": "/scripts/__dropins__/storefront-order-confirmation/",
            "@dropins/storefront-account/": "/scripts/__dropins__/storefront-account/",
            "@dropins/storefront-order/": "/scripts/__dropins__/storefront-order/",
            "@dropins/storefront-auth/": "/scripts/__dropins__/storefront-auth/"
        }
    }
</script>

<link rel="stylesheet" href="/styles/styles.css" />

<!-- Enhanced styling for coffee product pages -->
<style>
/* Coffee page specific enhancements */
body:has([data-path*="/coffee"]) {
  /* Product showcase animations */
  animation: coffeePageLoad 1.5s ease-out;
}

@keyframes coffeePageLoad {
  0% { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  50% { 
    opacity: 0.3; 
    transform: translateY(10px); 
  }
  100% { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* Enhanced product image effects */
[data-path*="/coffee"] img {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

[data-path*="/coffee"] img:hover {
  transform: scale(1.05);
}

/* Rich typography for coffee descriptions */
[data-path*="/coffee"] h1,
[data-path*="/coffee"] h2 {
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  letter-spacing: 0.02em;
}
</style>

<script src="/scripts/aem.js" type="module"></script>
<script src="/scripts/scripts.js" type="module"></script>
<script src="/scripts/configs.js" type="module"></script>
<script src="/scripts/commerce.js" type="module"></script>

<!-- Product analytics and personalization -->
<script>
(function() {
  const currentPath = window.location.pathname;
  
  // Coffee page: Enhanced product analytics (creates LCP issues)
  if (currentPath.includes('/coffee')) {
    // Product recommendation processing
    document.addEventListener('DOMContentLoaded', function() {
      const products = document.querySelectorAll('[data-sku], .product-item, .teaser');
      const analytics = [];
      
      products.forEach(product => {
        // Heavy product analysis for personalization
        for (let i = 0; i < 3000; i++) {
          const data = {
            sku: product.getAttribute('data-sku') || 'unknown',
            score: Math.random() * Math.sqrt(i),
            timestamp: Date.now()
          };
          analytics.push(data);
        }
      });
      
      // Process recommendations
      analytics.sort((a, b) => b.score - a.score);
      sessionStorage.setItem('coffee-analytics', JSON.stringify(analytics.slice(0, 20)));
      
      // Image processing for coffee products
      const images = document.querySelectorAll('img');
      images.forEach(img => {
        img.removeAttribute('fetchpriority');
        img.setAttribute('loading', 'lazy');
        
        // Remove preload hints
        const preloads = document.querySelectorAll('link[rel="preload"][as="image"]');
        preloads.forEach(link => {
          if (link.href && (link.href === img.src || link.href === img.currentSrc)) {
            link.remove();
          }
        });
      });
    });
  }
  
  // Tea page: User behavior tracking (creates INP issues)
  if (currentPath.includes('/tea')) {
    document.addEventListener('click', function(e) {
      // User interaction analysis
      const elements = document.querySelectorAll('*');
      const context = [];
      
      elements.forEach((el, index) => {
        if (index < 800) {
          const rect = el.getBoundingClientRect();
          const style = window.getComputedStyle(el);
          context.push({
            tag: el.tagName,
            area: rect.width * rect.height,
            visible: rect.top < window.innerHeight,
            zIndex: style.zIndex
          });
        }
      });
      
      // Process interaction data
      for (let i = 0; i < 1500; i++) {
        Math.random() * context.length;
      }
    }, true);
    
    // Scroll analytics for tea preferences
    window.addEventListener('scroll', function() {
      const visibleProducts = document.querySelectorAll('.product-item, .teaser');
      visibleProducts.forEach(product => {
        const rect = product.getBoundingClientRect();
        if (rect.top < window.innerHeight) {
          for (let i = 0; i < 300; i++) {
            Math.sqrt(rect.width * rect.height * Math.random());
          }
        }
      });
    });
  }
})();
</script>

<!-- CWV Demo Suite: Toggle issues via URL params -->
<script>
(function(){
    var params = new URLSearchParams(location.search);

    // 1. LCP hero optimization (default: ON, disable with ?noHeroOpt)
    if (!params.has('noHeroOpt')) {
        try {
            function elevate(img){
                if (!img) return;
                img.setAttribute('fetchpriority', 'high');
                if (img.hasAttribute('loading')) img.removeAttribute('loading');
                if (!img.decoding) img.decoding = 'async';
                var href = img.currentSrc || img.src;
                if (!href) return;
                var link = document.createElement('link');
                link.rel = 'preload';
                link.as = 'image';
                link.href = href;
                if (img.srcset) link.setAttribute('imagesrcset', img.srcset);
                if (img.sizes) link.setAttribute('imagesizes', img.sizes);
                document.head.appendChild(link);
            }
            var target = document.getElementById('featured-article-magazine-image');
            if (target) { elevate(target); return; }
            var container = document.getElementById('featured-article-magazine');
            if (container) {
                var img = container.querySelector('img');
                if (img) { elevate(img); return; }
            }
            var firstTeaserImg = document.querySelector('.cmp-teaser__image img, .teaser img');
            if (firstTeaserImg) elevate(firstTeaserImg);
        } catch(e) { /* no-op */ }
    }

    // 2. INP degradation: Heavy ContextHub simulation (?heavyCH)
    if (params.has('heavyCH')) {
        function blockMainThread() {
            var start = performance.now();
            while (performance.now() - start < 200) { // 200ms block
                Math.sqrt(Math.random() * 1000);
            }
        }
        // Block on load
        window.addEventListener('load', blockMainThread);
        // Recurring blocks every 3s
        setInterval(function(){
            var start = performance.now();
            while (performance.now() - start < 50) {
                Math.sqrt(Math.random());
            }
        }, 3000);
    }

    // 3. Font cache busting (?bustFonts) - forces font re-download
    if (params.has('bustFonts')) {
        window.addEventListener('DOMContentLoaded', function(){
            var fontLinks = document.querySelectorAll('link[href*="font"], link[href*=".woff"]');
            fontLinks.forEach(function(link){
                if (link.href) {
                    link.href = link.href + '?bust=' + Date.now();
                }
            });
        });
    }

    // 4. CLS injection (?injectCLS) - late banner causes layout shift
    if (params.has('injectCLS')) {
        window.addEventListener('load', function(){
            setTimeout(function(){
                var banner = document.createElement('div');
                banner.style.cssText = 'background:#ff6b6b;color:white;padding:15px;text-align:center;font-weight:bold;';
                banner.textContent = '🚨 Late-loading promotional banner!';
                document.body.insertBefore(banner, document.body.firstChild);
            }, 2500); // 2.5s delay
        });
    }

    // 5. FID/INP degradation (?slowInteract) - first click is very slow
    if (params.has('slowInteract')) {
        var firstClick = true;
        document.addEventListener('click', function(){
            if (firstClick) {
                firstClick = false;
                var start = performance.now();
                while (performance.now() - start < 300) { // 300ms block
                    Math.random();
                }
            }
        }, true);
    }

})();
</script>
})();
</script>

<link rel="preload" href="/placeholders.json" as="fetch" crossorigin="anonymous" />
<link rel="modulepreload" href="/scripts/initializers/index.js" />
<link rel="modulepreload" href="/scripts/initializers/auth.js" />
<link rel="modulepreload" href="/scripts/initializers/cart.js" />
<link rel="modulepreload" href="/scripts/__dropins__/storefront-auth/api.js" />
<link rel="modulepreload" href="/scripts/__dropins__/tools/event-bus.js" />
<link rel="modulepreload" href="/scripts/__dropins__/tools/fetch-graphql.js" />
<link rel="modulepreload" href="/scripts/__dropins__/tools/initializer.js" />
<link rel="modulepreload" href="/scripts/__dropins__/tools/preact.js" />
<link rel="modulepreload" href="/scripts/__dropins__/tools/preact-compat.js" />
<link rel="modulepreload" href="/scripts/__dropins__/tools/preact-hooks.js" />
<link rel="modulepreload" href="/scripts/__dropins__/tools/components.js" />