// Stationery.jsx — letterhead, business card, favicon set, stationery sheet.
// All artefacts now use the W2 + corner-pip system. Addresses are forbidden;
// the company is contactable only by Telex or marine cable. Office of the
// Corporate Secretary (William S. Fraser) is the sole signatory.
//
// Paper sizes (passed via `paper` prop): "LETTER" 612×792, "A4" 595×842.
//   These are 72-dpi pixel equivalents — the on-screen artboard mirrors the
//   physical print box. For PDF export the artboard is scaled to mm in
//   print-a4.html.

const PAPER = { LETTER: [612, 792], A4: [595, 842] };

const FOOTER_LEGAL =
  'North Atlantic Semiconductor, Inc.  ·  North Atlantic Semiconductor Ltd';

// ─────────────────────────────────────────────────────────────
// Letterhead — US Letter 8.5×11 or A4 210×297. Selectable via `paper`.
// W2 + corner registration pips at the page corners. No address.
// ─────────────────────────────────────────────────────────────
function Letterhead({ palette = 'B', mark = 'A', markComp = null, paper = 'LETTER' }) {
  const p = PALETTES[palette];
  const accent = p.accent;
  const [W, H] = PAPER[paper];
  return (
    <div style={{
      width: W, height: H, background:'#fff', color:'#111',
      fontFamily:'"Helvetica Neue", Helvetica, Arial, sans-serif',
      fontSize: 9, lineHeight: 1.45, position:'relative',
      boxShadow:'inset 0 0 0 1px #ececec',
      padding: '56px 56px 56px',
      boxSizing:'border-box',
      display:'flex', flexDirection:'column',
    }}>
      <CornerPips size={7} inset={28} color={accent} />

      <div>
        <Lockup
          palette={palette}
          mark={mark}
          italic={false}
          size={11}
          showRule={false}
          markComp={markComp} />
      </div>

      {/* Contact row — telex + marine cable. No address. No telephone. */}
      <div style={{
        display:'grid', gridTemplateColumns:'1fr 1fr', gap: 24,
        marginTop: 24, fontSize: 8.5, letterSpacing:'0.04em',
        fontFamily:'"IBM Plex Mono", monospace', color:'#222',
      }}>
        <div>
          <div>TELEX&nbsp;&nbsp;510-3211 NATLSEMI</div>
          <div style={{ marginTop: 3 }}>MARINE&nbsp;CABLE&nbsp;&nbsp;NATLSEMI NEW YORK</div>
        </div>
        <div style={{ textAlign:'right' }}>
          <div>TELEX&nbsp;&nbsp;851-8842 NATLSEMI G</div>
          <div style={{ marginTop: 3 }}>MARINE&nbsp;CABLE&nbsp;&nbsp;NATLSEMI LONDON</div>
        </div>
      </div>

      {/* Date + reference */}
      <div style={{
        marginTop: 48, display:'flex', justifyContent:'space-between',
        fontSize: 9, letterSpacing:'0.02em',
      }}>
        <div>14/05/1986</div>
        <div style={{ fontFamily:'"IBM Plex Mono", monospace' }}>Form NAS-2026-0001 Rev. A</div>
      </div>

      {/* Body — memorandum to the file, no recipient */}
      <div style={{ marginTop: 32, fontSize: 10, lineHeight: 1.7, maxWidth: 460 }}>
        <div style={{
          fontFamily:'"IBM Plex Mono", monospace', fontSize: 8.5,
          letterSpacing:'0.08em', color:'#666', marginBottom: 18,
        }}>
          MEMORANDUM FOR THE FILE
        </div>
        <p style={{ margin:'0 0 12px' }}>
          The matter referenced above has been noted and recorded.
          No reply is invited or required.
        </p>
        <p style={{ margin:'0 0 12px' }}>
          Communications to the Company are not accepted by post,
          telephone or facsimile. Where a response is contemplated
          by these terms, it shall be made by telex or marine cable
          to the addresses shown above.
        </p>
        <div style={{ marginTop: 32 }}>
          <div>For the Company,</div>
          <div style={{ marginTop: 38 }}>
            <div>William&nbsp;S.&nbsp;Fraser</div>
            <div>Office of the Corporate Secretary</div>
          </div>
        </div>
      </div>

      {/* Footer legal block + rule */}
      <div style={{ marginTop:'auto', paddingTop: 16 }}>
        <div style={{ borderTop:`1px solid ${accent}`, paddingTop: 8 }} />
        <div style={{
          fontFamily:'"IBM Plex Mono", monospace',
          fontSize: 7, letterSpacing:'0.02em',
          color:'#222', lineHeight: 1.5,
        }}>
          {FOOTER_LEGAL}
        </div>
        <div style={{
          marginTop: 4, fontFamily:'"IBM Plex Mono", monospace',
          fontSize: 7, letterSpacing:'0.02em', color:'#555',
          display:'flex', justifyContent:'space-between',
        }}>
          <span>NAS-2026-0001 Rev. A</span>
          <span>Page 1 of 1</span>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Business card — 3.5 × 2 inch, single-sided, square-cut.
// W2 + bleed pips. Telex + marine cable only.
// ─────────────────────────────────────────────────────────────
function BusinessCard({ palette = 'B', mark = 'A', markComp = null }) {
  const p = PALETTES[palette];
  return (
    <div style={{
      width: 350, height: 200, background:'#fff', color:'#111',
      fontFamily:'"Helvetica Neue", Helvetica, Arial, sans-serif',
      padding: '20px 22px', boxSizing:'border-box',
      boxShadow:'0 1px 0 #eaeaea, inset 0 0 0 1px #ececec',
      position:'relative',
      display:'flex', flexDirection:'column', justifyContent:'space-between',
    }}>
      <CornerPips size={4} inset={9} color={p.accent} />

      <div>
        <Lockup palette={palette} mark={mark} size={6.4} showRule={false} markComp={markComp} />
      </div>

      <div style={{ fontSize: 8.5, lineHeight: 1.55, letterSpacing:'0.02em' }}>
        <div style={{ fontWeight: 600 }}>William&nbsp;S.&nbsp;Fraser</div>
        <div style={{ color:'#444' }}>Office of the Corporate Secretary</div>
      </div>

      <div style={{
        fontSize: 7.6, lineHeight: 1.6, letterSpacing:'0.06em',
        fontFamily:'"IBM Plex Mono", monospace',
        color:'#222',
      }}>
        TELEX&nbsp;&nbsp;510-3211 NATLSEMI<br />
        MARINE&nbsp;CABLE&nbsp;&nbsp;NATLSEMI NEW YORK
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Favicon set — 16, 32, 180. Always the mark; never the wordmark.
// ─────────────────────────────────────────────────────────────
function FaviconSet({ palette = 'B', mark = 'A', markComp = null }) {
  const p = PALETTES[palette];
  const sizes = [16, 32, 180];
  const renderMark = (s) => markComp
    ? React.createElement(markComp, { size: s, color: p.accent })
    : <Mark kind={mark} size={s} color={p.accent} />;
  return (
    <div style={{
      width: 540, padding: '32px 28px', background:'#fff',
      fontFamily:'"IBM Plex Mono", monospace', fontSize: 10,
      letterSpacing:'0.02em', color:'#111',
    }}>
      <div style={{ marginBottom: 18, fontSize: 9, color:'#555' }}>
        FAVICON SET · MARK ONLY · NEVER THE WORDMARK
      </div>
      <div style={{
        display:'flex', alignItems:'flex-end', gap: 36,
        padding:'24px 18px', background:'#fafafa',
        boxShadow:'inset 0 0 0 1px #eee',
      }}>
        {sizes.map((s) => (
          <div key={s} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap: 10 }}>
            <div style={{
              padding: 6, background:'#fff',
              boxShadow:'inset 0 0 0 1px #ddd',
            }}>
              {renderMark(s)}
            </div>
            <div style={{ fontSize: 8, color:'#555' }}>{s}×{s}</div>
          </div>
        ))}
        {/* Pixel-grid magnifier for 16 */}
        <div style={{ marginLeft: 'auto', textAlign:'center' }}>
          <div style={{
            width: 128, height: 128, padding: 4, background:'#fff',
            boxShadow:'inset 0 0 0 1px #ddd',
            imageRendering:'pixelated',
            display:'flex', alignItems:'center', justifyContent:'center',
          }}>
            <div style={{ transform:'scale(8)', transformOrigin:'center' }}>
              {renderMark(16)}
            </div>
          </div>
          <div style={{ marginTop: 8, fontSize: 8, color:'#555' }}>16×16 · 8× zoom</div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Stationery reference sheet — internal one-page style guide.
// Now documents W2 as the chosen mark and the corner-pip system.
// ─────────────────────────────────────────────────────────────
function StationerySheet({ palette = 'B', mark = 'A', markComp = null, paper = 'LETTER' }) {
  const p = PALETTES[palette];
  const [W, H] = PAPER[paper];
  return (
    <div style={{
      width: W, height: H, background:'#fff', color:'#111',
      fontFamily:'"Helvetica Neue", Helvetica, Arial, sans-serif',
      padding:'28px 40px', boxSizing:'border-box',
      fontSize: 9, lineHeight: 1.45,
      position:'relative', display:'flex', flexDirection:'column',
    }}>
      <CornerPips size={7} inset={24} color={p.accent} />
      {/* Header bar */}
      <div style={{
        display:'flex', alignItems:'center', justifyContent:'space-between',
        borderBottom:`2px solid ${p.accent}`, paddingBottom: 7,
      }}>
        <Lockup palette={palette} mark={mark} size={9} markComp={markComp} />
        <div style={{ fontFamily:'"IBM Plex Mono", monospace', fontSize: 8, color:'#444' }}>
          Form NAS-2026-9000 Rev. A · Internal
        </div>
      </div>

      <div style={{ marginTop: 8, fontFamily:'Michroma, sans-serif', fontSize: 11, letterSpacing:'0.04em' }}>
        IDENTITY REFERENCE SHEET
      </div>

      {/* Grid of spec blocks */}
      <div style={{
        marginTop: 8, display:'grid', gridTemplateColumns:'1fr 1fr', gap: 8,
      }}>
        <SpecBlock title="01 · WORDMARK">
          <div style={{ marginBottom: 6 }}>
            <Wordmark size={6.4} />
          </div>
          <Row k="Cut" v="Michroma (handoff: Eurostile Bold Extended No. 2)" />
          <Row k="Tracking" v="+20 milli-em" />
          <Row k="Case" v="ALL CAPS — display only" />
          <Row k="Suffix" v="“, INC.” always present" />
          <Row k="Trademark" v="™ at 36% of cap height" />
        </SpecBlock>

        <SpecBlock title="02 · MARK">
          <div style={{ display:'flex', alignItems:'center', gap: 18, marginBottom: 8 }}>
            <MarkBuiltNarrow size={36} color={p.accent} />
            <MarkBuiltNarrow size={20} color={p.accent} />
            <MarkBuiltNarrow size={12} color={p.accent} />
          </div>
          <Row k="Mark" v="W2 — narrow built-N" />
          <Row k="Construction" v="Two verticals (12 wide) + diagonal, 100-unit grid" />
          <Row k="Min. size" v="12 px / 3 mm" />
          <Row k="Clear space" v="0.5 × mark height all sides" />
          <Row k="Inside the mark" v="Nothing. No box, no pips, no ornament." />
        </SpecBlock>

        <SpecBlock title="03 · PALETTE">
          <div style={{ display:'flex', gap: 8, marginBottom: 8 }}>
            <Swatch color="#003DA5" label="PMS 286 C" hex="#003DA5" />
            <Swatch color="#111111" label="Process Black" hex="#111111" />
            <Swatch color="#FFFFFF" label="Bleached White" hex="#FFFFFF" bordered />
          </div>
          <Row k="System" v="B — PMS 286 C blue + black on white" />
          <Row k="Forbidden" v="Gradients, rainbow stripes, IAD yellow" />
        </SpecBlock>

        <SpecBlock title="04 · TYPOGRAPHY">
          <Row k="Wordmark" v="Michroma → Eurostile Bold Ext. No. 2" />
          <Row k="Display" v="Geometric extended sans, ALL CAPS" />
          <Row k="Body" v="Neo-grotesque, standard width" />
          <Row k="Tabular" v="IBM Plex Mono / Letter Gothic" />
        </SpecBlock>

        <SpecBlock title="05 · DOCUMENT FURNITURE">
          <Row k="Date" v="DD/MM/YYYY (international)" />
          <Row k="Separators" v="Middle dots in monospace meta" />
          <Row k="Contact" v="Telex + Marine Cable. No address. No phone." />
          <Row k="Signatory" v="William S. Fraser, Office of the Corporate Secretary" />
          <Row k="Reference" v="Form NAS-YYYY-NNNN Rev. A" />
          <Row k="Pagination" v="Page n of m, bates-style optional" />
        </SpecBlock>

        <SpecBlock title="06 · STOCK">
          <Row k="Letterhead" v="80lb bleached white cover, flat smooth" />
          <Row k="Card" v="16pt bleached white, square-cut corners" />
          <Row k="Datasheet" v="Bleached white photocopy weight" />
          <Row k="Forbidden" v="Cream, laid, textured, recycled stocks" />
        </SpecBlock>
      </div>

      {/* Full-width spec block for the layout primitive — compact one-row strip */}
      <div style={{ marginTop: 5 }}>
        <SpecBlock title="07 · LAYOUT PRIMITIVE — CORNER REGISTRATION PIPS">
          <div style={{ display:'grid', gridTemplateColumns:'62px 1fr', gap: 12, alignItems:'center' }}>
            <div style={{
              position:'relative', width: 56, height: 56,
              boxShadow:'inset 0 0 0 1px #ddd', background:'#fafaf7',
            }}>
              <CornerPips size={4} inset={5} color={p.accent} />
            </div>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'1px 14px' }}>
              <Row k="Role" v="Layout primitive — never inside the mark" />
              <Row k="Shape" v="Filled square, four corners, equal inset" />
              <Row k="Colour" v="Accent only (PMS 286 C)" />
              <Row k="Size" v="4 px card · 6 px register · 7 px page" />
              <Row k="Where" v="Pages, cards, register blocks, modules" />
              <Row k="Where not" v="Inside the mark. In email signatures." />
            </div>
          </div>
        </SpecBlock>
      </div>

      <div style={{ marginTop: 'auto', paddingTop: 8 }}>
        <div style={{ borderTop:`1px solid ${p.accent}` }} />
        <div style={{
          marginTop: 5, fontFamily:'"IBM Plex Mono", monospace', fontSize: 7,
          letterSpacing:'0.02em', color:'#555',
          display:'flex', justifyContent:'space-between',
        }}>
          <span>{FOOTER_LEGAL}</span>
          <span>NAS-2026-9000 · Page 1 of 1</span>
        </div>
      </div>
    </div>
  );
}

function SpecBlock({ title, children }) {
  return (
    <div style={{
      border:'1px solid #d8d8d8', padding:'5px 11px 7px',
    }}>
      <div style={{
        fontFamily:'"IBM Plex Mono", monospace',
        fontSize: 8, letterSpacing:'0.08em', color:'#555',
        marginBottom: 4, paddingBottom: 3, borderBottom:'1px solid #eee',
      }}>{title}</div>
      {children}
    </div>
  );
}

function Row({ k, v }) {
  return (
    <div style={{ display:'grid', gridTemplateColumns:'72px 1fr', gap: 8, marginBottom: 1 }}>
      <span style={{ fontFamily:'"IBM Plex Mono", monospace', fontSize: 7.5, color:'#888', letterSpacing:'0.04em' }}>{k}</span>
      <span style={{ fontSize: 8.5, color:'#222', lineHeight: 1.3 }}>{v}</span>
    </div>
  );
}

function Swatch({ color, label, hex, bordered }) {
  return (
    <div style={{
      width: 78, padding: 6, background:'#fff',
      boxShadow: bordered ? 'inset 0 0 0 1px #ddd' : 'none',
    }}>
      <div style={{ width:'100%', height: 36, background: color, boxShadow: color === '#FFFFFF' ? 'inset 0 0 0 1px #ddd' : 'none' }} />
      <div style={{ marginTop: 4, fontFamily:'"IBM Plex Mono", monospace', fontSize: 7, color:'#444' }}>{label}</div>
      <div style={{ fontFamily:'"IBM Plex Mono", monospace', fontSize: 7, color:'#888' }}>{hex}</div>
    </div>
  );
}

Object.assign(window, { Letterhead, BusinessCard, FaviconSet, StationerySheet });