/* Templates — printable & sendable artifacts (A4 documents, email, signature, slides).
   Each template ships with:
     • a faithful in-browser preview, and
     • a "Copy HTML" button that copies print-ready / email-ready markup.
   Markup intentionally uses brand hex values (not CSS vars) so the copied
   output renders correctly outside this site. */

const TPL_BRAND = {
  navy:   '#121541',
  navy7:  '#0E1034',
  ink:    '#101828',
  text:   '#344054',
  muted:  '#667085',
  hair:   '#EAECF0',
  paper:  '#FFFFFF',
  canvas: '#F9FAFB',
  yellow: '#F7EC33',
  brand50:'#F1F2F9',
};

const TPL_ARROW = 'M128.055 9.93506H87.925H7.92499V50.0651H59.555L7.92499 101.685L22.115 115.875L36.305 130.065L87.935 78.4351V130.065H127.905L128.055 9.93506ZM124.625 126.635V50.0651L124.615 50.0551V13.3651H11.355V46.6351H67.845L61.985 52.4951L12.785 101.695L24.545 113.455L36.305 125.215L85.505 76.0151L91.365 70.1551V126.635H124.625Z';

/* Reusable preview frame — scales an absolute-pixel artifact down to fit
   the available column width while preserving fidelity. The artifact is
   rendered at 1:1 inside, then transformed via CSS scale. */
function ArtifactPreview({ width, height, children, label }) {
  const wrapRef = useRef(null);
  const [scale, setScale] = useState(1);
  useEffect(() => {
    const el = wrapRef.current;
    if (!el) return;
    const compute = () => {
      const w = el.clientWidth;
      setScale(Math.min(1, w / width));
    };
    compute();
    const ro = new ResizeObserver(compute);
    ro.observe(el);
    return () => ro.disconnect();
  }, [width]);
  return (
    <div ref={wrapRef} style={{
      position: 'relative',
      width: '100%',
      height: height * scale,
      background: 'var(--bg-secondary)',
      border: '1px solid var(--border-secondary)',
      borderRadius: 12,
      overflow: 'hidden',
      backgroundImage: 'repeating-conic-gradient(rgba(0,0,0,.025) 0% 25%, transparent 0% 50%)',
      backgroundSize: '20px 20px',
    }}>
      <div style={{
        width, height,
        transform: `scale(${scale})`,
        transformOrigin: 'top left',
        boxShadow: '0 12px 32px -16px rgba(16,24,40,.18)',
      }}>
        {children}
      </div>
      {label && (
        <div style={{
          position: 'absolute', bottom: 10, right: 10,
          fontSize: 11, fontFamily: 'var(--font-mono)',
          color: 'var(--text-quaternary)',
          background: 'rgba(255,255,255,.85)',
          padding: '3px 7px', borderRadius: 4,
        }}>{label}</div>
      )}
    </div>
  );
}

/* Two-button row — copy HTML + download .html */
function TemplateActions({ html, filename, extraNote }) {
  const [copied, setCopied] = useState(false);
  const copyHtml = () => {
    copy(html);
    setCopied(true);
    setTimeout(() => setCopied(false), 1400);
  };
  const downloadHref = useMemo(() => {
    const blob = new Blob([html], { type: 'text/html;charset=utf-8' });
    return URL.createObjectURL(blob);
  }, [html]);
  return (
    <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
      <button
        onClick={copyHtml}
        style={{
          background: 'var(--brand-600)', color: '#fff',
          border: '1px solid var(--brand-700)',
          padding: '10px 14px', borderRadius: 8,
          fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600,
          cursor: 'pointer',
        }}
      >
        {copied ? '✓ Copied HTML' : '⧉ Copy HTML'}
      </button>
      <a
        href={downloadHref}
        download={filename}
        style={{
          textDecoration: 'none',
          background: 'var(--accent-400)', color: 'var(--brand-700)',
          border: '1px solid var(--accent-500)',
          padding: '10px 14px', borderRadius: 8,
          fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700,
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}
      >↓ {filename}</a>
      {extraNote && (
        <span style={{ fontSize: 12, color: 'var(--text-quaternary)' }}>{extraNote}</span>
      )}
    </div>
  );
}

/* ------------------------------------------------------------------
   A4 LETTERHEAD
   ------------------------------------------------------------------ */
function letterheadHTML({
  recipient = 'Site manager\nWestfield Phase 2 — North gate',
  date = '2026-04-18',
  subject = 'Soil reuse proposal — North compound',
  body = `Dear team,\n\nFollowing our walkover on Tuesday, please find attached the proposed reuse strategy for excavated material at the North compound.\n\nIn summary, we believe up to 1,840 t of inert material can be reclassified, segregated and reused on the eastern bund without offsite movement. This is contingent on the chemical screening returning the expected ranges (results due Thursday).\n\nWe will follow up once the lab data is in. In the meantime, do let us know if anything in the attached needs clarifying.\n\nKind regards,`,
  signOff = 'Jonty Brook\nNexus ReGen · Materials lead',
} = {}) {
  return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Letter — Nexus ReGen</title>
<style>
  @page { size: A4; margin: 0; }
  html, body { margin: 0; padding: 0; }
  body { font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
         color: ${TPL_BRAND.text}; background: #f3f4f6; }
  .page {
    width: 210mm; height: 297mm; padding: 24mm 22mm;
    background: ${TPL_BRAND.paper};
    box-sizing: border-box; margin: 16px auto;
    box-shadow: 0 2px 16px rgba(16,24,40,.12);
    display: flex; flex-direction: column;
  }
  @media print { .page { margin: 0; box-shadow: none; } }
  .head { display: flex; align-items: center; justify-content: space-between;
          border-bottom: 2px solid ${TPL_BRAND.navy}; padding-bottom: 12mm; }
  .brand { display: flex; align-items: center; gap: 10px; }
  .brand .name { font-weight: 800; font-size: 18px; letter-spacing: -0.01em; color: ${TPL_BRAND.ink}; }
  .brand .sub  { font-size: 10px; font-weight: 700; letter-spacing: .14em;
                 color: ${TPL_BRAND.muted}; text-transform: uppercase; margin-top: 2px; }
  .meta { text-align: right; font-size: 11px; color: ${TPL_BRAND.muted};
          font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }
  .meta b { color: ${TPL_BRAND.ink}; font-weight: 700; }
  .recipient { margin-top: 14mm; font-size: 12px; color: ${TPL_BRAND.text};
               white-space: pre-line; line-height: 1.55; }
  .subject { margin-top: 10mm; font-size: 16px; font-weight: 700; color: ${TPL_BRAND.ink};
             border-left: 3px solid ${TPL_BRAND.yellow}; padding-left: 10px; }
  .body { margin-top: 8mm; font-size: 12px; line-height: 1.7;
          color: ${TPL_BRAND.text}; white-space: pre-line; flex: 1; }
  .signoff { margin-top: 6mm; font-size: 12px; line-height: 1.55;
             color: ${TPL_BRAND.ink}; white-space: pre-line; }
  .foot { border-top: 1px solid ${TPL_BRAND.hair}; margin-top: 8mm;
          padding-top: 6mm; display: flex; justify-content: space-between;
          font-size: 9.5px; color: ${TPL_BRAND.muted};
          font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }
</style>
</head>
<body>
  <div class="page">
    <div class="head">
      <div class="brand">
        <svg width="32" height="32" viewBox="7.925 9.935 120.13 120.13" aria-hidden="true">
          <path d="${TPL_ARROW}" fill="${TPL_BRAND.navy}" stroke="${TPL_BRAND.navy}" 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="meta">
        <div><b>Ref</b> NR-2026-04-18</div>
        <div><b>Date</b> ${date}</div>
      </div>
    </div>

    <div class="recipient">${recipient}</div>
    <div class="subject">${subject}</div>
    <div class="body">${body}</div>
    <div class="signoff">${signOff}</div>

    <div class="foot">
      <span>Nexus ReGen Ltd · 14 Mansell St, London E1 8AA</span>
      <span>nexusregen.com · hello@nexusregen.com</span>
    </div>
  </div>
</body>
</html>
`;
}

function S_TplLetter() {
  const html = useMemo(() => letterheadHTML(), []);
  return (
    <Section
      id="tpl-letter"
      eyebrow="01 · Templates"
      title="A4 letterhead"
      intro="Print-ready single-page letter. Renders the navy emblem, ref / date metadata, a yellow-rule subject line and sign-off block. Set @page size:A4 and print to PDF for archive."
    >
      <Block title="Preview" note="A4 portrait · 210 × 297mm">
        <ArtifactPreview width={794} height={1123} label="A4 · 210×297mm @ 96 DPI">
          <iframe
            srcDoc={html}
            title="A4 letterhead preview"
            style={{ width: 794, height: 1123, border: 'none', display: 'block', background: '#fff' }}
          />
        </ArtifactPreview>
      </Block>

      <Block title="Use it">
        <TemplateActions
          html={html}
          filename="nexus-letter.html"
          extraNote="Open in any browser → File → Print → Save as PDF."
        />
      </Block>
    </Section>
  );
}

/* ------------------------------------------------------------------
   A4 REPORT COVER
   ------------------------------------------------------------------ */
function reportCoverHTML({
  title = 'Phase 2 reuse plan',
  subtitle = 'Westfield North compound · April 2026',
  client = 'Carillion-Hollings',
  author = 'Nexus ReGen · Materials team',
  ref = 'NR-RPT-2026-018',
} = {}) {
  return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>${title} — Nexus ReGen</title>
<style>
  @page { size: A4; margin: 0; }
  html, body { margin: 0; padding: 0; }
  body { font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
         color: #fff; background: #f3f4f6; }
  .page {
    width: 210mm; height: 297mm;
    background: ${TPL_BRAND.navy};
    color: #fff;
    box-sizing: border-box; padding: 28mm 24mm;
    position: relative; overflow: hidden;
    margin: 16px auto; box-shadow: 0 2px 16px rgba(16,24,40,.18);
    display: flex; flex-direction: column; justify-content: space-between;
  }
  @media print { .page { margin: 0; box-shadow: none; } }
  .glow { position: absolute; right: -120px; bottom: -180px;
          width: 540px; height: 540px; opacity: 0.10; }
  .accent { position: absolute; top: 28mm; right: 24mm;
            width: 6px; height: 80px; background: ${TPL_BRAND.yellow}; }
  .brand { display: flex; align-items: center; gap: 10px; }
  .brand .name { font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
  .brand .sub  { font-size: 10px; font-weight: 700; letter-spacing: .14em;
                 color: rgba(255,255,255,.7); text-transform: uppercase; margin-top: 2px; }
  .stamp { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
           font-size: 11px; color: ${TPL_BRAND.yellow};
           text-transform: uppercase; letter-spacing: .14em; }
  .title { font-size: 56px; font-weight: 700; line-height: 1.04;
           letter-spacing: -0.02em; margin: 0 0 18px; }
  .subtitle { font-size: 20px; font-weight: 400; color: rgba(255,255,255,.8);
              line-height: 1.4; max-width: 420px; }
  .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12mm;
          padding-top: 14mm; border-top: 1px solid rgba(255,255,255,.18);
          font-size: 12px; }
  .meta .k { font-size: 10px; font-weight: 700; letter-spacing: .14em;
             color: rgba(255,255,255,.55); text-transform: uppercase; margin-bottom: 4px; }
  .meta .v { color: #fff; font-weight: 500; }
</style>
</head>
<body>
  <div class="page">
    <svg class="glow" viewBox="7.925 9.935 120.13 120.13" aria-hidden="true">
      <path d="${TPL_ARROW}" fill="${TPL_BRAND.yellow}" fill-rule="evenodd" clip-rule="evenodd" />
    </svg>
    <div class="accent"></div>

    <div>
      <div class="brand">
        <svg width="32" height="32" 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="stamp" style="margin-top: 60mm;">Report</div>
      <h1 class="title">${title}</h1>
      <div class="subtitle">${subtitle}</div>
    </div>

    <div class="meta">
      <div>
        <div class="k">Prepared for</div>
        <div class="v">${client}</div>
      </div>
      <div>
        <div class="k">Prepared by</div>
        <div class="v">${author}</div>
      </div>
      <div>
        <div class="k">Reference</div>
        <div class="v" style="font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;">${ref}</div>
      </div>
      <div>
        <div class="k">Confidentiality</div>
        <div class="v">Commercial — in confidence</div>
      </div>
    </div>
  </div>
</body>
</html>
`;
}

function S_TplReport() {
  const html = useMemo(() => reportCoverHTML(), []);
  return (
    <Section
      id="tpl-report"
      eyebrow="02 · Templates"
      title="A4 report cover"
      intro="Navy cover with glow emblem, yellow rule, large title and a four-cell metadata grid. Designed as the first page of any internal or client-facing report."
    >
      <Block title="Preview" note="A4 portrait · 210 × 297mm">
        <ArtifactPreview width={794} height={1123} label="A4 · 210×297mm @ 96 DPI">
          <iframe
            srcDoc={html}
            title="Report cover preview"
            style={{ width: 794, height: 1123, border: 'none', display: 'block' }}
          />
        </ArtifactPreview>
      </Block>

      <Block title="Use it">
        <TemplateActions
          html={html}
          filename="nexus-report-cover.html"
        />
      </Block>
    </Section>
  );
}

/* ------------------------------------------------------------------
   TRANSACTIONAL EMAIL
   ------------------------------------------------------------------ */
function emailHTML({
  preheader = 'Your weekly Nexus ReGen digest is ready — 3 new matches and 2 movements.',
  greeting = 'Hi Sarah,',
  body = "Here's what moved on your projects this week. As always, click through to the platform for full chain-of-custody detail.",
  ctaLabel = 'View this week\'s movements',
  ctaUrl = 'https://app.nexusregen.com/dashboard',
  stats = [
    { label: 'Tonnes diverted', value: '284t' },
    { label: 'New matches',     value: '3' },
    { label: 'Live listings',   value: '12' },
  ],
} = {}) {
  return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Nexus ReGen — Weekly digest</title>
<style>
  body { margin: 0; padding: 0; background: ${TPL_BRAND.canvas};
         font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
         color: ${TPL_BRAND.text}; }
  table { border-collapse: collapse; }
  a { color: ${TPL_BRAND.navy}; }
</style>
</head>
<body style="margin:0;padding:0;background:${TPL_BRAND.canvas};">
  <span style="display:none;visibility:hidden;opacity:0;color:transparent;height:0;width:0;font-size:1px;">${preheader}</span>
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:${TPL_BRAND.canvas};">
    <tr><td align="center" style="padding:32px 16px;">
      <table role="presentation" width="600" cellpadding="0" cellspacing="0"
             style="max-width:600px;width:100%;background:#ffffff;border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.05);">

        <!-- Header -->
        <tr><td style="background:${TPL_BRAND.navy};padding:24px 28px;">
          <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
            <tr>
              <td>
                <table role="presentation" cellpadding="0" cellspacing="0">
                  <tr>
                    <td style="vertical-align:middle;padding-right:10px;">
                      <svg width="28" height="28" viewBox="7.925 9.935 120.13 120.13">
                        <path d="${TPL_ARROW}" fill="${TPL_BRAND.yellow}" stroke="${TPL_BRAND.yellow}" stroke-width="5" stroke-linejoin="round" paint-order="stroke fill" fill-rule="evenodd" clip-rule="evenodd" />
                      </svg>
                    </td>
                    <td style="vertical-align:middle;">
                      <span style="display:block;color:#ffffff;font-size:16px;font-weight:700;letter-spacing:-0.01em;">Nexus ReGen</span>
                      <span style="display:block;color:rgba(255,255,255,.65);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-top:2px;">Weekly digest</span>
                    </td>
                  </tr>
                </table>
              </td>
              <td align="right" style="color:rgba(255,255,255,.7);font-size:11px;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;">
                Week 16 · Apr 2026
              </td>
            </tr>
          </table>
        </td></tr>

        <!-- Body -->
        <tr><td style="padding:32px 32px 8px;">
          <h1 style="margin:0 0 12px;font-size:24px;line-height:1.2;letter-spacing:-0.01em;color:${TPL_BRAND.ink};font-weight:700;">${greeting}</h1>
          <p style="margin:0 0 20px;font-size:15px;line-height:1.6;color:${TPL_BRAND.text};">${body}</p>
        </td></tr>

        <!-- Stats -->
        <tr><td style="padding:0 32px 8px;">
          <table role="presentation" width="100%" cellpadding="0" cellspacing="0"
                 style="background:${TPL_BRAND.brand50};border-radius:10px;">
            <tr>
              ${stats.map((s, i) => `
                <td align="center" style="padding:18px 6px;${i < stats.length - 1 ? `border-right:1px solid ${TPL_BRAND.hair};` : ''}">
                  <div style="font-size:24px;font-weight:700;color:${TPL_BRAND.navy};letter-spacing:-0.02em;">${s.value}</div>
                  <div style="font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:${TPL_BRAND.muted};margin-top:4px;">${s.label}</div>
                </td>
              `).join('')}
            </tr>
          </table>
        </td></tr>

        <!-- CTA -->
        <tr><td align="center" style="padding:24px 32px 28px;">
          <a href="${ctaUrl}" style="display:inline-block;background:${TPL_BRAND.navy};color:#ffffff;text-decoration:none;font-size:14px;font-weight:600;padding:12px 22px;border-radius:8px;border:1px solid ${TPL_BRAND.navy7};">${ctaLabel} →</a>
        </td></tr>

        <!-- Footer -->
        <tr><td style="background:${TPL_BRAND.canvas};padding:20px 32px;border-top:1px solid ${TPL_BRAND.hair};font-size:11px;color:${TPL_BRAND.muted};">
          <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
            <tr>
              <td>Nexus ReGen Ltd · 14 Mansell St, London E1 8AA</td>
              <td align="right"><a href="https://nexusregen.com" style="color:${TPL_BRAND.muted};text-decoration:none;">nexusregen.com</a></td>
            </tr>
            <tr><td colspan="2" style="padding-top:8px;color:${TPL_BRAND.muted};">
              You're receiving this because you have an active Nexus ReGen account.
              <a href="#" style="color:${TPL_BRAND.muted};">Unsubscribe</a>.
            </td></tr>
          </table>
        </td></tr>
      </table>
    </td></tr>
  </table>
</body>
</html>
`;
}

function S_TplEmail() {
  const html = useMemo(() => emailHTML(), []);
  return (
    <Section
      id="tpl-email"
      eyebrow="03 · Templates"
      title="Transactional email"
      intro="Table-based, inline-styled HTML email — safe for Outlook, Gmail and Apple Mail. Navy header, three-cell stat band on the brand-50 surface, navy CTA button, footer with unsubscribe."
    >
      <Block title="Preview" note="600px column · light surface">
        <ArtifactPreview width={640} height={780} label="600px wide @ desktop">
          <iframe
            srcDoc={html}
            title="Email template preview"
            style={{ width: 640, height: 780, border: 'none', display: 'block' }}
          />
        </ArtifactPreview>
      </Block>

      <Block title="Use it">
        <TemplateActions
          html={html}
          filename="nexus-email.html"
          extraNote="Drop into any ESP (Customer.io, Postmark, etc.) or send via SMTP."
        />
      </Block>
    </Section>
  );
}

/* ------------------------------------------------------------------
   EMAIL SIGNATURE
   ------------------------------------------------------------------ */
function signatureHTML({
  name = 'Jonty Brook',
  role = 'Materials lead',
  phone = '+44 20 4567 8901',
  email = 'jonty@nexusregen.com',
} = {}) {
  return `<table role="presentation" cellpadding="0" cellspacing="0" style="font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:${TPL_BRAND.text};font-size:13px;line-height:1.45;">
  <tr>
    <td style="vertical-align:top;padding-right:14px;border-right:2px solid ${TPL_BRAND.yellow};">
      <svg width="44" height="44" viewBox="7.925 9.935 120.13 120.13">
        <path d="${TPL_ARROW}" fill="${TPL_BRAND.navy}" stroke="${TPL_BRAND.navy}" stroke-width="5" stroke-linejoin="round" paint-order="stroke fill" fill-rule="evenodd" clip-rule="evenodd" />
      </svg>
    </td>
    <td style="vertical-align:top;padding-left:14px;">
      <div style="font-size:15px;font-weight:700;color:${TPL_BRAND.ink};letter-spacing:-0.01em;">${name}</div>
      <div style="font-size:12px;color:${TPL_BRAND.muted};margin-top:1px;">${role} · Nexus ReGen</div>
      <div style="font-size:12px;color:${TPL_BRAND.text};margin-top:8px;">
        <a href="tel:${phone.replace(/\\s/g, '')}" style="color:${TPL_BRAND.text};text-decoration:none;">${phone}</a>
        &nbsp;·&nbsp;
        <a href="mailto:${email}" style="color:${TPL_BRAND.text};text-decoration:none;">${email}</a>
      </div>
      <div style="font-size:11px;color:${TPL_BRAND.muted};margin-top:6px;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;letter-spacing:.04em;">
        nexusregen.com · Materially smarter construction
      </div>
    </td>
  </tr>
</table>`;
}

function S_TplSignature() {
  const html = useMemo(() => signatureHTML(), []);
  return (
    <Section
      id="tpl-signature"
      eyebrow="04 · Templates"
      title="Email signature"
      intro="Two-column HTML signature with the navy emblem, yellow rule and a compact name / role / contact stack. Paste into Gmail, Outlook or Apple Mail signature settings."
    >
      <Block title="Preview" note="As it appears in the recipient's inbox">
        <Card pad={28} style={{ background: 'var(--bg-primary)' }}>
          <div dangerouslySetInnerHTML={{ __html: html }} />
        </Card>
      </Block>

      <Block title="Use it">
        <TemplateActions
          html={html}
          filename="nexus-signature.html"
          extraNote="In Gmail: Settings → General → Signature → paste."
        />
      </Block>
    </Section>
  );
}

/* ------------------------------------------------------------------
   SLIDE TITLE (16:9)
   ------------------------------------------------------------------ */
function slideHTML({
  eyebrow = 'Quarterly review',
  title = 'Materially smarter construction',
  subtitle = 'Q1 2026 · Performance, pipeline and product',
} = {}) {
  return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>${title}</title>
<style>
  html, body { margin: 0; padding: 0; }
  body { background: ${TPL_BRAND.navy};
         font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
         color: #fff; }
  .slide { width: 1920px; height: 1080px; box-sizing: border-box;
           position: relative; overflow: hidden;
           padding: 96px 120px;
           display: flex; flex-direction: column; justify-content: space-between; }
  .glow { position: absolute; right: -120px; bottom: -240px;
          width: 900px; height: 900px; opacity: 0.10; }
  .stripe { position: absolute; left: 120px; top: 96px;
            width: 8px; height: 140px; background: ${TPL_BRAND.yellow}; }
  .brand { display: flex; align-items: center; gap: 16px; }
  .brand .name { font-weight: 800; font-size: 32px; letter-spacing: -0.01em; }
  .brand .sub  { font-size: 14px; font-weight: 700; letter-spacing: .14em;
                 color: rgba(255,255,255,.65); text-transform: uppercase; margin-top: 4px; }
  .eyebrow { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
             color: ${TPL_BRAND.yellow}; font-size: 22px; letter-spacing: .14em;
             text-transform: uppercase; margin-bottom: 32px; }
  .title { font-size: 124px; font-weight: 700; line-height: 1.0;
           letter-spacing: -0.025em; margin: 0 0 24px; max-width: 1500px; }
  .subtitle { font-size: 32px; color: rgba(255,255,255,.8); font-weight: 400; max-width: 1100px; }
  .footline { display: flex; justify-content: space-between; align-items: center;
              font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
              font-size: 16px; color: rgba(255,255,255,.55); }
</style>
</head>
<body>
  <div class="slide">
    <svg class="glow" viewBox="7.925 9.935 120.13 120.13" aria-hidden="true">
      <path d="${TPL_ARROW}" fill="${TPL_BRAND.yellow}" fill-rule="evenodd" clip-rule="evenodd" />
    </svg>
    <div class="stripe"></div>

    <div class="brand">
      <svg width="56" height="56" 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>
      <div class="eyebrow">${eyebrow}</div>
      <h1 class="title">${title}</h1>
      <div class="subtitle">${subtitle}</div>
    </div>

    <div class="footline">
      <span>nexusregen.com</span>
      <span>April 2026</span>
    </div>
  </div>
</body>
</html>
`;
}

function S_TplSlide() {
  const html = useMemo(() => slideHTML(), []);
  return (
    <Section
      id="tpl-slide"
      eyebrow="05 · Templates"
      title="Slide title (16:9)"
      intro="1920×1080 title slide. Yellow eyebrow, oversized headline, navy canvas with glow emblem. Open in any browser, take a screenshot or print landscape to PDF for use in Keynote, PowerPoint or Google Slides."
    >
      <Block title="Preview" note="16:9 · 1920 × 1080">
        <ArtifactPreview width={1280} height={720} label="16:9 · 1920×1080">
          <iframe
            srcDoc={html}
            title="Slide preview"
            style={{ width: 1280, height: 720, border: 'none', display: 'block',
              transform: 'scale(0.6667)', transformOrigin: 'top left' }}
          />
        </ArtifactPreview>
      </Block>

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

/* ------------------------------------------------------------------
   Templates index — quick links to all templates on this page
   ------------------------------------------------------------------ */
function S_TplOverview() {
  const items = [
    { id: 'tpl-letter',         n: '01', label: 'A4 letterhead',        desc: 'Print-ready single-page letter.' },
    { id: 'tpl-report',         n: '02', label: 'A4 report cover',      desc: 'Navy cover with title and metadata grid.' },
    { id: 'tpl-email',          n: '03', label: 'Transactional email',  desc: 'Table-based HTML email, ESP-safe.' },
    { id: 'tpl-signature',      n: '04', label: 'Email signature',      desc: 'Two-column signature block.' },
    { id: 'tpl-slide',          n: '05', label: 'Slide title (16:9)',   desc: 'Title slide for decks and screenshots.' },
    { id: 'tpl-invoice',        n: '06', label: 'A4 invoice',           desc: 'Line-items, VAT, payment terms.' },
    { id: 'tpl-content-slide',  n: '07', label: 'Slide content (16:9)', desc: 'Body slide with stat tiles.' },
    { id: 'tpl-readme',         n: '08', label: 'Repo README header',   desc: 'Markdown banner, badges, quickstart.' },
    { id: 'tpl-ticket-comment', n: '09', label: 'Ticket / PR comment',  desc: 'Short structured update stub.' },
  ];
  return (
    <Section
      id="tpl-overview"
      eyebrow="00 · Templates"
      title="Branded references for everything that ships"
      intro="Hand these to anyone — designers, customer success, product, agents — when they need a starting point. Each template is a single self-contained HTML file with brand tokens inlined; no build step, no fonts to install, just copy and ship."
    >
      <Block title="What's in here">
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 12,
        }}>
          {items.map(it => (
            <a key={it.id} href={`#${it.id}`} style={{
              display: 'block', textDecoration: 'none', color: 'inherit',
              padding: 18,
              border: '1px solid var(--border-secondary)',
              borderRadius: 12,
              background: 'var(--bg-primary)',
              transition: 'border-color .15s, transform .15s',
            }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--brand-500)'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-secondary)'; }}
            >
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11,
                color: 'var(--text-quaternary)', marginBottom: 8 }}>{it.n}</div>
              <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--text-primary)',
                letterSpacing: '-0.01em' }}>{it.label}</div>
              <div style={{ fontSize: 13, color: 'var(--text-tertiary)', marginTop: 4, lineHeight: 1.5 }}>
                {it.desc}
              </div>
            </a>
          ))}
        </div>
      </Block>
    </Section>
  );
}

window.S_TplOverview = S_TplOverview;
window.S_TplLetter = S_TplLetter;
window.S_TplReport = S_TplReport;
window.S_TplEmail = S_TplEmail;
window.S_TplSignature = S_TplSignature;
window.S_TplSlide = S_TplSlide;