/* A4 INVOICE — print-ready single-page invoice.
   Reuses TPL_BRAND, TPL_ARROW, ArtifactPreview and TemplateActions from
   s-templates.jsx (loaded earlier in index.html so all symbols are in
   shared script scope). Brand hex values are inlined so the copied HTML
   renders correctly outside this site. */

function invoiceHTML({
  invoiceNo = 'NR-INV-2026-0184',
  issueDate = '2026-04-30',
  dueDate   = '2026-05-30',
  billTo = {
    name: 'Carillion-Hollings Construction Ltd',
    contact: 'Accounts payable',
    address: '4 Borough High Street\nLondon SE1 9QQ\nUnited Kingdom',
    vat: 'GB 845 1129 03',
  },
  from = {
    name: 'Nexus ReGen Ltd',
    address: '14 Mansell Street\nLondon E1 8AA\nUnited Kingdom',
    contact: 'finance@nexusregen.com',
    vat: 'GB 412 9087 55',
    company: '14872019',
  },
  items = [
    { desc: 'Materials movement coordination — Westfield Phase 2',  qty: 1,  unit: 4800.00 },
    { desc: 'Chain-of-custody verification — North compound bund',  qty: 32, unit:  145.00 },
    { desc: 'Site walkover & reuse plan — issued 18 Apr',           qty: 1,  unit: 2200.00 },
    { desc: 'Inert reclassification screening (per sample)',        qty: 14, unit:   95.00 },
  ],
  vatRate = 0.20,
  bank = {
    name: 'Nexus ReGen Ltd',
    sortCode: '20-00-00',
    account: '8341 5527',
    iban: 'GB29 BARC 2000 0083 4155 27',
    bic: 'BARCGB22',
    reference: 'NR-INV-2026-0184',
  },
} = {}) {
  const fmt = n => '£' + n.toLocaleString('en-GB', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  const lines = items.map(it => ({ ...it, total: it.qty * it.unit }));
  const subtotal = lines.reduce((s, l) => s + l.total, 0);
  const vat = subtotal * vatRate;
  const total = subtotal + vat;

  return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Invoice ${invoiceNo} — 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;
         -webkit-font-smoothing: antialiased; }
  .page {
    width: 210mm; height: 297mm;
    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;
    position: relative; overflow: hidden;
  }
  @media print { .page { margin: 0; box-shadow: none; } }

  /* Navy header band */
  .head { background: ${TPL_BRAND.navy}; color: #fff;
          padding: 16mm 22mm 14mm; position: relative;
          display: flex; align-items: flex-start; justify-content: space-between; }
  .head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0;
                 height: 4px; background: ${TPL_BRAND.yellow}; }
  .brand { display: flex; align-items: center; gap: 12px; }
  .brand .name { font-weight: 800; font-size: 20px; letter-spacing: -0.01em; color: #fff; }
  .brand .sub  { font-size: 10px; font-weight: 700; letter-spacing: .14em;
                 color: rgba(255,255,255,.65); text-transform: uppercase; margin-top: 3px; }
  .wordmark { text-align: right; }
  .wordmark .word { font-size: 28px; font-weight: 700; letter-spacing: .26em;
                    color: #fff; line-height: 1; }
  .wordmark .ref  { font-size: 11px; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
                    color: ${TPL_BRAND.yellow}; margin-top: 8px; letter-spacing: .04em; }

  /* Body */
  .body { padding: 12mm 22mm 0; flex: 1; display: flex; flex-direction: column; }

  /* Bill to / From */
  .parties { display: grid; grid-template-columns: 1fr 1fr; gap: 14mm;
             padding-bottom: 9mm; border-bottom: 1px solid ${TPL_BRAND.hair}; }
  .party .k { font-size: 10px; font-weight: 700; letter-spacing: .14em;
              color: ${TPL_BRAND.muted}; text-transform: uppercase; margin-bottom: 6px; }
  .party .name { font-size: 14px; font-weight: 700; color: ${TPL_BRAND.ink};
                 letter-spacing: -0.005em; }
  .party .line { font-size: 11.5px; color: ${TPL_BRAND.text}; line-height: 1.55;
                 white-space: pre-line; margin-top: 3px; }
  .party .meta { margin-top: 6px; font-size: 10.5px; color: ${TPL_BRAND.muted};
                 font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }

  /* Metadata strip */
  .strip { display: grid; grid-template-columns: repeat(3, 1fr);
           background: ${TPL_BRAND.brand50}; border-radius: 6px;
           margin-top: 8mm; padding: 5mm 6mm; gap: 6mm; }
  .strip .cell .k { font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
                    color: ${TPL_BRAND.muted}; text-transform: uppercase; }
  .strip .cell .v { font-size: 14px; color: ${TPL_BRAND.ink}; font-weight: 600;
                    margin-top: 4px; letter-spacing: -0.005em;
                    font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }

  /* Line items */
  .items { width: 100%; border-collapse: collapse; margin-top: 9mm; }
  .items thead th { font-size: 10px; font-weight: 700; letter-spacing: .14em;
                    color: ${TPL_BRAND.muted}; text-transform: uppercase;
                    text-align: left; padding: 0 6px 6mm; border-bottom: 2px solid ${TPL_BRAND.navy}; }
  .items thead th.num { text-align: right; }
  .items tbody td { padding: 4mm 6px; font-size: 11.5px; color: ${TPL_BRAND.text};
                    border-bottom: 1px solid ${TPL_BRAND.hair}; vertical-align: top; }
  .items tbody td.desc { color: ${TPL_BRAND.ink}; font-weight: 500; }
  .items tbody td.num  { text-align: right; font-variant-numeric: tabular-nums;
                         font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }
  .items col.col-desc { width: 58%; }
  .items col.col-qty  { width: 10%; }
  .items col.col-unit { width: 16%; }
  .items col.col-tot  { width: 16%; }

  /* Totals */
  .totals { display: flex; justify-content: flex-end; margin-top: 7mm; }
  .totals table { border-collapse: collapse; min-width: 78mm; }
  .totals td { padding: 2.6mm 0; font-size: 12px; }
  .totals td.k { color: ${TPL_BRAND.muted}; padding-right: 12mm;
                 letter-spacing: .04em; }
  .totals td.v { text-align: right; color: ${TPL_BRAND.ink};
                 font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
                 font-variant-numeric: tabular-nums; }
  .totals tr.total td { padding-top: 4mm; padding-bottom: 4mm;
                        border-top: 2px solid ${TPL_BRAND.navy}; font-size: 16px;
                        font-weight: 700; color: ${TPL_BRAND.ink};
                        background: ${TPL_BRAND.yellow}; padding-left: 6mm; padding-right: 6mm; }
  .totals tr.total td.k { color: ${TPL_BRAND.ink}; letter-spacing: .08em;
                          text-transform: uppercase; font-size: 11px; }

  /* Payment / footer */
  .pay { margin-top: 10mm; padding: 6mm 7mm;
         border: 1px solid ${TPL_BRAND.hair}; border-radius: 6px;
         border-left: 3px solid ${TPL_BRAND.yellow};
         display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; }
  .pay .k { font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
            color: ${TPL_BRAND.muted}; text-transform: uppercase; margin-bottom: 5px; }
  .pay .v { font-size: 11.5px; color: ${TPL_BRAND.ink}; line-height: 1.55; }
  .pay .row { display: flex; justify-content: space-between; gap: 8mm;
              padding: 2px 0; font-size: 11px; }
  .pay .row .lbl { color: ${TPL_BRAND.muted}; }
  .pay .row .val { color: ${TPL_BRAND.ink};
                   font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }
  .terms { font-size: 11px; color: ${TPL_BRAND.text}; line-height: 1.55; }

  .foot { margin-top: auto; padding: 7mm 22mm 10mm;
          border-top: 1px solid ${TPL_BRAND.hair};
          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="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="wordmark">
        <div class="word">INVOICE</div>
        <div class="ref">${invoiceNo}</div>
      </div>
    </div>

    <div class="body">

      <div class="parties">
        <div class="party">
          <div class="k">Bill to</div>
          <div class="name">${billTo.name}</div>
          <div class="line">${billTo.contact}\n${billTo.address}</div>
          <div class="meta">VAT ${billTo.vat}</div>
        </div>
        <div class="party">
          <div class="k">From</div>
          <div class="name">${from.name}</div>
          <div class="line">${from.address}\n${from.contact}</div>
          <div class="meta">VAT ${from.vat} · Co. ${from.company}</div>
        </div>
      </div>

      <div class="strip">
        <div class="cell">
          <div class="k">Invoice no.</div>
          <div class="v">${invoiceNo}</div>
        </div>
        <div class="cell">
          <div class="k">Issue date</div>
          <div class="v">${issueDate}</div>
        </div>
        <div class="cell">
          <div class="k">Due date</div>
          <div class="v">${dueDate}</div>
        </div>
      </div>

      <table class="items">
        <colgroup>
          <col class="col-desc" />
          <col class="col-qty" />
          <col class="col-unit" />
          <col class="col-tot" />
        </colgroup>
        <thead>
          <tr>
            <th>Description</th>
            <th class="num">Qty</th>
            <th class="num">Unit price</th>
            <th class="num">Total</th>
          </tr>
        </thead>
        <tbody>
          ${lines.map(l => `
            <tr>
              <td class="desc">${l.desc}</td>
              <td class="num">${l.qty}</td>
              <td class="num">${fmt(l.unit)}</td>
              <td class="num">${fmt(l.total)}</td>
            </tr>
          `).join('')}
        </tbody>
      </table>

      <div class="totals">
        <table>
          <tr>
            <td class="k">Subtotal</td>
            <td class="v">${fmt(subtotal)}</td>
          </tr>
          <tr>
            <td class="k">VAT (${(vatRate * 100).toFixed(0)}%)</td>
            <td class="v">${fmt(vat)}</td>
          </tr>
          <tr class="total">
            <td class="k">Total due</td>
            <td class="v">${fmt(total)}</td>
          </tr>
        </table>
      </div>

      <div class="pay">
        <div>
          <div class="k">Payment terms</div>
          <div class="terms">
            Payment due within 30 days of issue. Please quote invoice number
            <b style="color:${TPL_BRAND.ink};">${invoiceNo}</b> as your payment reference.
            Late payments may attract statutory interest under the Late Payment of
            Commercial Debts (Interest) Act 1998.
          </div>
        </div>
        <div>
          <div class="k">Bank transfer (GBP)</div>
          <div class="row"><span class="lbl">Account name</span><span class="val">${bank.name}</span></div>
          <div class="row"><span class="lbl">Sort code</span><span class="val">${bank.sortCode}</span></div>
          <div class="row"><span class="lbl">Account no.</span><span class="val">${bank.account}</span></div>
          <div class="row"><span class="lbl">IBAN</span><span class="val">${bank.iban}</span></div>
          <div class="row"><span class="lbl">BIC</span><span class="val">${bank.bic}</span></div>
        </div>
      </div>
    </div>

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

function S_TplInvoice() {
  const html = useMemo(() => invoiceHTML(), []);
  return (
    <Section
      id="tpl-invoice"
      eyebrow="06 · Templates"
      title="A4 invoice"
      intro="Print-ready single-page invoice. Navy header band with INVOICE wordmark, bill-to / from columns, metadata strip, line-item table with subtotal, VAT and a yellow-emphasised total, and a payment-terms footer with bank details."
    >
      <Block title="Preview" note="A4 portrait · 210 × 297mm">
        <ArtifactPreview width={794} height={1123} label="A4 · 210×297mm @ 96 DPI">
          <iframe
            srcDoc={html}
            title="A4 invoice preview"
            style={{ width: 794, height: 1123, border: 'none', display: 'block', background: '#fff' }}
          />
        </ArtifactPreview>
      </Block>

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

window.S_TplInvoice = S_TplInvoice;
