/**
 * page-shell.mjs · THE LUCREYA ARTICLE SCAFFOLD, AS A FUNCTION.
 *
 * ═══════════════════════════════════════════════════════════════════════════════════════════════
 * ⛔ WHY THIS EXISTS AS A SEPARATE FILE. The first version of the reliability study was written as a
 * standalone HTML file with hand-rolled CSS and no site chrome. It rendered fine and was an orphan:
 * no `window.PAGE`, so no breadcrumb, no related articles and NO CAPTURE TAG; no `#site-header` or
 * `#site-footer`; no `data-table` class, so it silently opted out of the 2026-07-30 responsive table
 * heal; no `id` on any H2, so the honest-limits block could not be linked by name.
 *   ★ `LATTICE-CONTENT-STACK.md` §RENDER states the lesson exactly: A PAGE CAN BE PERFECT CONTENT
 *     INSIDE A BROKEN SHELL. Content gates and scaffold gates measure different things.
 *
 * ⚠️ ASSET STAMPS ARE COPIED FROM A SHIPPED ARTICLE, NOT INVENTED. `check-asset-stamps.js` compares
 *   these against the built assets and a wrong digest blocks `safe-deploy` network-wide. If a stamp
 *   changes, it changes here once rather than in every generator.
 *
 * ⛔ H2 ids ARE NOT DECORATION. R1b: "the honest-limits block must be linkable by name. An engine
 *   that can cite /page#how-to-read-these-figures cites the caveats WITH the figure; a page whose
 *   limits have no anchor can be quoted without them." Every heading here gets an id for that reason.
 */

export const ASSETS = {
  styles: '/styles.css?v=9f477032',
  overhaul: '/gtm-overhaul.css?v=aa459a66',
  config: '/site.config.js?v=02d09d8e',
  engine: '/site_engine.js?v=fe6166c5',
  extras: '/gtm-extras.js?v=a1867473',
  capture: '/lead-capture.js?v=ba4ce9d4',
};

export const NAV = `<!-- lattice-static-nav:start -->
  <nav aria-label="Primary">
    <a href="/articles.html?cat=marketing">AI Marketing</a>
    <a href="/articles.html?cat=seo-geo">AI SEO + GEO</a>
    <a href="/articles.html?cat=sales">AI Sales</a>
    <a href="/articles">Roundups</a>
    <a href="/research/">Research</a>
    <a href="/"><strong>Lucreya</strong></a>
    <a href="/glossary">Glossary</a>
    <a href="/library">Library</a>
    <a href="/datasets">Datasets</a>
    <a href="/sponsored">Partner with us</a>
  </nav>
<!-- lattice-static-nav:end -->`;

/** The inline drivers the scaffold contract requires: a frozen progress bar and an empty chapter
 *  rail are both "markup present, feature dead", which is the failure R1 lists by name. */
export const DRIVERS = `<script>
(function(){
  var rail = document.querySelector('.chapter-rail ul'); if(!rail) return;
  var h2s = Array.prototype.slice.call(document.querySelectorAll('article h2[id]'));
  if(!h2s.length){ var c=document.querySelector('.chapter-rail'); if(c) c.style.display='none'; return; }
  h2s.forEach(function(h){
    var li=document.createElement('li'), a=document.createElement('a');
    a.href='#'+h.id; a.textContent=h.textContent.replace(/^[^A-Za-z0-9]+/,'');
    a.dataset.target=h.id; li.appendChild(a); rail.appendChild(li);
  });
  var links=rail.querySelectorAll('a'), byId={};
  links.forEach(function(a){ byId[a.dataset.target]=a; });
  var io=new IntersectionObserver(function(es){es.forEach(function(e){ if(e.isIntersecting){
    links.forEach(function(a){a.classList.remove('active');});
    var l=byId[e.target.id]; if(l) l.classList.add('active'); }});},
    {rootMargin:'-30% 0px -60% 0px',threshold:0});
  h2s.forEach(function(h){io.observe(h);});
})();
(function(){
  var bar=document.querySelector('.reading-progress span'); if(!bar) return;
  var art=document.querySelector('article'); if(!art) return;
  function u(){ var top=art.getBoundingClientRect().top+window.scrollY;
    var total=art.offsetHeight-window.innerHeight;
    var s=Math.min(Math.max(window.scrollY-top,0),total);
    bar.style.width=(total>0?(s/total)*100:0)+'%'; }
  window.addEventListener('scroll',u,{passive:true});
  window.addEventListener('resize',u); u();
})();
/* ⛔ THE STALE BANNER IS CLIENT-RENDERED ON PURPOSE (§4.4). Server-render what you want cited; the
   staleness warning is the one thing you do NOT want an engine to index as part of the finding. */
(function(){
  var el=document.getElementById('stale-note'); if(!el) return;
  var d=el.getAttribute('data-captured'); if(!d) return;
  var days=Math.floor((Date.now()-Date.parse(d))/86400000);
  if(days>=45){ el.textContent='These measurements were captured '+days+' days ago. Models change and retire; treat older figures as historical.'; el.hidden=false; }
})();
</script>`;

/**
 * Wrap body content in the full lucreya article shell.
 * @param {object} o  {slug,title,description,h1,deck,category,tag,readTime,emailTag,schema,style,body,breadcrumbTitle,capturedAt}
 */
export function shell(o) {
  const url = `https://lucreya.com/articles/${o.slug}`;
  const today = new Date().toISOString().slice(0, 10);
  const PAGE = {
    title: o.title, description: o.description, category: o.category, categoryEmoji: o.categoryEmoji || '\u{1F4CA}',
    tag: o.tag, slug: o.slug, type: 'article', date: today, readTime: o.readTime,
    emailTag: o.emailTag, datePublished: o.datePublished || today, dateModified: today,
  };
  return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>${o.title}</title>
<meta name="description" content="${o.description}">
<link rel="canonical" href="${url}">
<meta property="og:type" content="article">
<meta property="og:title" content="${o.title}">
<meta property="og:description" content="${o.description}">
<meta property="og:url" content="${url}">
<meta name="twitter:card" content="summary_large_image">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="${ASSETS.styles}">
<link rel="stylesheet" href="${ASSETS.overhaul}">
<script>window.PAGE = ${JSON.stringify(PAGE)};</script>
<script type="application/ld+json">${JSON.stringify(o.schema)}</script>
<style>
${o.style}
</style>
<script src="${ASSETS.config}"></script>
<script src="${ASSETS.engine}" defer></script>
</head>
<body>
<div class="reading-progress" aria-hidden="true"><span></span></div>
<div id="site-header">
${NAV}
</div>
<nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Lucreya</a> &rsaquo; <a href="/articles.html?cat=seo-geo">AI SEO + GEO</a> &rsaquo; ${o.breadcrumbTitle}</nav>

<article class="article-wrap">
  <div class="article-meta-bar">
    <span class="article-tag">${o.tag}</span>
    <span>Published ${today} &middot; ${o.readTime} &middot; By Vincent Wesley Couey</span>
  </div>
  <p id="stale-note" class="stale-note" data-captured="${o.capturedAt}" hidden></p>
  <!-- ⛔ THE RAIL MARKUP MUST EXIST, NOT JUST ITS DRIVER. Caught by canarying the scaffold audit:
       the first build shipped the chapter-rail SCRIPT with no chapter-rail ELEMENT, and a naive
       string check for "chapter-rail" passed because it matched the driver. The feature was absent
       and the gate said present. R1 lists exactly this symptom, "markup present, bar frozen", and
       here it was the inverse. The gtm-extras.js auto-builder cannot help: it scopes to the dark
       template only, so .article-wrap pages must carry their own rail. -->
  <aside class="chapter-rail" aria-label="On this page"><ul></ul></aside>
${o.body}
</article>

<div class="post-article">
${o.postArticle || ''}
  <div id="related-articles"></div>
</div>

<div id="site-footer"></div>
<script src="${ASSETS.extras}"></script>
<script src="${ASSETS.capture}" defer></script>
${DRIVERS}
</body></html>
`;
}