/* Slide content (16:9) — body content counterpart to the navy title slide.
   1920×1080 light canvas, navy header strip, three-stat grid and footer. */

function contentSlideHTML({
  section = 'Phase 1 · Performance',
  slideTitle = 'How we hit 94% reuse on Phase 1',
  lede = 'Three weeks of segregation, one chemistry call, zero offsite hauls. The numbers from the Westfield North compound — and what they mean for Phase 2.',
  stats = [
    { value: '1,840t', label: 'Inert material diverted', note: 'Reused on the eastern bund · no offsite movement' },
    { value: '92t',    label: 'CO₂ avoided',          note: 'Versus baseline disposal + virgin import' },
    { value: '46',     label: 'HGV hauls eliminated',     note: 'Equivalent to 1,380 fewer road-km' },
  ],
  page = '04',
  deck = 'Q1 2026 · Quarterly review',
  date = 'April 2026',
} = {}) {
  return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>${slideTitle}</title>
<style>
  html, body { margin: 0; padding: 0; }
  body { background: ${TPL_BRAND.paper};
         font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
         color: ${TPL_BRAND.ink}; }
  .slide { width: 1920px; height: 1080px; box-sizing: border-box;
           position: relative; overflow: hidden;
           background: ${TPL_BRAND.paper};
           display: flex; flex-direction: column; }

  /* Navy header strip */
  .header { background: ${TPL_BRAND.navy}; color: #fff;
            padding: 28px 96px;
            display: flex; align-items: center; justify-content: space-between;
            border-bottom: 4px solid ${TPL_BRAND.yellow}; }
  .brand { display: flex; align-items: center; gap: 14px; }
  .brand .name { font-weight: 800; font-size: 22px; letter-spacing: -0.01em; }
  .brand .sub  { font-size: 11px; font-weight: 700; letter-spacing: .14em;
                 color: rgba(255,255,255,.65); text-transform: uppercase; margin-top: 2px; }
  .section-tag { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
                 font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
                 color: ${TPL_BRAND.yellow}; }

  /* Body */
  .body { flex: 1; padding: 96px 120px 64px;
          display: flex; flex-direction: column; }
  .heading-row { display: grid; grid-template-columns: 1fr 1fr;
                 gap: 96px; align-items: start; margin-bottom: 88px; }
  .heading { position: relative; padding-left: 28px;
             font-size: 88px; font-weight: 700; line-height: 1.02;
             letter-spacing: -0.025em; color: ${TPL_BRAND.ink};
             margin: 0; }
  .heading::before { content: ''; position: absolute; left: 0; top: 8px;
                     width: 8px; height: calc(100% - 16px);
                     background: ${TPL_BRAND.yellow}; }
  .lede { font-size: 26px; line-height: 1.5; color: ${TPL_BRAND.text};
          font-weight: 400; padding-top: 12px; }

  /* Stat grid */
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .stat { background: ${TPL_BRAND.canvas};
          border: 1px solid ${TPL_BRAND.hair};
          border-top: 4px solid ${TPL_BRAND.navy};
          border-radius: 14px;
          padding: 44px 40px 40px;
          display: flex; flex-direction: column; }
  .stat .v { font-size: 96px; font-weight: 700; line-height: 1;
             letter-spacing: -0.035em; color: ${TPL_BRAND.navy};
             margin: 0 0 18px; }
  .stat .l { font-size: 18px; font-weight: 700; letter-spacing: .04em;
             text-transform: uppercase; color: ${TPL_BRAND.ink};
             margin-bottom: 10px; }
  .stat .n { font-size: 16px; line-height: 1.5; color: ${TPL_BRAND.muted}; }

  /* Footer */
  .foot { padding: 24px 96px;
          border-top: 1px solid ${TPL_BRAND.hair};
          display: flex; justify-content: space-between; align-items: center;
          font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
          font-size: 14px; color: ${TPL_BRAND.muted};
          letter-spacing: .04em; }
  .foot .page-num { color: ${TPL_BRAND.ink}; font-weight: 700; }
</style>
</head>
<body>
  <div class="slide">
    <div class="header">
      <div class="brand">
        <svg width="36" height="36" viewBox="7.925 9.935 120.13 120.13" aria-hidden="true">
          <path d="${TPL_ARROW}" fill="${TPL_BRAND.yellow}" stroke="${TPL_BRAND.yellow}" stroke-width="4" stroke-linejoin="round" paint-order="stroke fill" fill-rule="evenodd" clip-rule="evenodd" />
        </svg>
        <div>
          <div class="name">Nexus ReGen</div>
          <div class="sub">Materially smarter construction</div>
        </div>
      </div>
      <div class="section-tag">${section}</div>
    </div>

    <div class="body">
      <div class="heading-row">
        <h1 class="heading">${slideTitle}</h1>
        <p class="lede">${lede}</p>
      </div>

      <div class="stats">
        ${stats.map(s => `
          <div class="stat">
            <div class="v">${s.value}</div>
            <div class="l">${s.label}</div>
            <div class="n">${s.note}</div>
          </div>
        `).join('')}
      </div>
    </div>

    <div class="foot">
      <span><span class="page-num">${page}</span> &nbsp;·&nbsp; ${deck}</span>
      <span>nexusregen.com &nbsp;·&nbsp; ${date}</span>
    </div>
  </div>
</body>
</html>
`;
}

function S_TplContentSlide() {
  const html = useMemo(() => contentSlideHTML(), []);
  return (
    <Section
      id="tpl-content-slide"
      eyebrow="07 · Templates"
      title="Slide content (16:9)"
      intro="1920×1080 body slide for the rest of the deck. Light canvas with a compact navy header, a yellow-ruled heading paired with a lede, and a three-up stat grid. Where the title slide opens loud, this one carries the argument."
    >
      <Block title="Preview" note="16:9 · 1920 × 1080">
        <ArtifactPreview width={1280} height={720} label="16:9 · 1920×1080">
          <iframe
            srcDoc={html}
            title="Content slide preview"
            style={{ width: 1920, height: 1080, border: 'none', display: 'block',
              transform: 'scale(0.6667)', transformOrigin: 'top left' }}
          />
        </ArtifactPreview>
      </Block>

      <Block title="Use it">
        <TemplateActions
          html={html}
          filename="nexus-slide-content.html"
          extraNote="Open in browser, screenshot at 100% zoom for clean export."
        />
      </Block>
    </Section>
  );
}

window.S_TplContentSlide = S_TplContentSlide;
