// Datasheet.jsx — two-page 1985-semiconductor datasheet template.
// Per brief §8.9: "this document will be used for nothing functional —
// it exists as a visual identity artifact. Producing it forces every
// component of the system into one place."
//
// Per brief: NO actual semiconductor vocabulary, NO wafers, NO chip
// imagery. The document's form is the semiconductor-industry form;
// its content is generic placeholder.

const HEAD_PALETTE = 'B';
const HEAD_MARK = 'A';

function DatasheetHeader({ palette, mark, markComp, part, rev, page, pages }) {
  const p = PALETTES[palette];
  return (
    <div style={{
      display:'flex', alignItems:'center', justifyContent:'space-between',
      borderBottom: `3px solid ${p.accent}`,
      paddingBottom: 8,
    }}>
      <Lockup palette={palette} mark={mark} size={8.4} markComp={markComp} />
      <div style={{
        fontFamily:'"IBM Plex Mono", monospace',
        fontSize: 8, letterSpacing:'0.04em',
        textAlign:'right', lineHeight: 1.4, color:'#222',
      }}>
        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing:'0.08em' }}>{part}</div>
        <div>Rev. {rev}</div>
        <div>Page {page} of {pages}</div>
      </div>
    </div>
  );
}

function DatasheetFooter({ palette, part, rev, page, pages }) {
  const p = PALETTES[palette];
  return (
    <div style={{ marginTop:'auto', paddingTop: 10 }}>
      <div style={{ borderTop: `1px solid ${p.accent}` }} />
      <div style={{
        marginTop: 6, fontFamily:'"IBM Plex Mono", monospace', fontSize: 6.8,
        letterSpacing:'0.02em', color:'#555',
        display:'flex', justifyContent:'space-between',
      }}>
        <span>North Atlantic Semiconductor, Inc.  ·  North Atlantic Semiconductor Ltd</span>
      </div>
      <div style={{
        marginTop: 2, fontFamily:'"IBM Plex Mono", monospace', fontSize: 6.8,
        letterSpacing:'0.02em', color:'#555',
        display:'flex', justifyContent:'space-between',
      }}>
        <span>{part} · Rev. {rev}</span>
        <span>Page {page} of {pages}</span>
      </div>
    </div>
  );
}

function DatasheetPage1({ palette = HEAD_PALETTE, mark = HEAD_MARK, markComp = null, paper = 'LETTER' }) {
  const p = PALETTES[palette];
  const part = 'NAS-2026-0014';
  return (
    <div style={pageStyle(paper)}>
      <CornerPips size={6} inset={22} color={p.accent} />
      <DatasheetHeader palette={palette} mark={mark} markComp={markComp} part={part} rev="A" page={1} pages={2} />

      {/* Title block */}
      <div style={{ marginTop: 14 }}>
        <div style={{
          fontFamily:'Michroma, sans-serif',
          fontSize: 16, letterSpacing:'0.04em', lineHeight: 1.2,
        }}>
          GENERAL PURPOSE<br/>
          OPERATING SPECIFICATION
        </div>
        <div style={{ marginTop: 6, fontSize: 9, color:'#444', letterSpacing:'0.02em' }}>
          Reference document. Not a product specification.
        </div>
      </div>

      {/* Feature pills row */}
      <div style={{
        marginTop: 16, display:'flex', flexWrap:'wrap', gap: 6,
      }}>
        {[
          'CONFORMANT TO IDENTITY BRIEF v1b',
          'TWO-COLOUR SPOT',
          'BLEACHED WHITE STOCK',
          'AMERICAN CONVENTION',
        ].map((t,i) => (
          <span key={i} style={{
            border:`1px solid ${p.accent}`, color: p.accent,
            padding:'3px 7px', fontFamily:'"IBM Plex Mono", monospace',
            fontSize: 7, letterSpacing:'0.06em',
          }}>{t}</span>
        ))}
      </div>

      {/* Two columns of body */}
      <div style={{
        marginTop: 18, display:'grid', gridTemplateColumns:'1fr 1fr', gap: 22,
        fontSize: 8.5, lineHeight: 1.55,
      }}>
        <div>
          <SectionH n="1.0" title="GENERAL DESCRIPTION" accent={p.accent} />
          <p style={para}>
            This document is a reference instance of the identity system applied
            to a two-page technical bulletin. It is not a product specification.
            The format borrows the structural conventions of the era — header
            bar, part number, tabular block, two-column body, footer legal —
            without borrowing the era's vocabulary.
          </p>
          <p style={para}>
            The form is the message. A reader presented with this page is
            expected to recognise the format, locate the part number and
            revision in the upper right, and proceed accordingly. The document
            does not request attention.
          </p>

          <SectionH n="2.0" title="ABSOLUTE MAXIMUM RATINGS" accent={p.accent} />
          <Table accent={p.accent} cols={['PARAMETER','SYMBOL','MIN','TYP','MAX','UNIT']} rows={[
            ['Operating range','T-OP','—','—','—','—'],
            ['Storage range','T-ST','—','—','—','—'],
            ['Document weight','W-DOC','—','—','—','gsm'],
            ['Print register','R-PRT','±0.05','—','±0.10','mm'],
          ]} />
        </div>
        <div>
          <SectionH n="3.0" title="ELECTRICAL CHARACTERISTICS" accent={p.accent} />
          <Table accent={p.accent} cols={['PARAMETER','SYMBOL','MIN','TYP','MAX','UNIT']} rows={[
            ['Wordmark cap height','H-WM','9','11','24','pt'],
            ['Mark / cap ratio','R-M/C','1.8','2.1','2.4','—'],
            ['Sub-entity rule weight','W-RUL','1','2','3','pt'],
            ['Footer leg. body','F-LEG','6.5','7','8','pt'],
            ['Tracking, wordmark','T-WM','+15','+20','+25','‱'],
            ['Italic slant','S-IT','0°','—','8°','deg'],
          ]} />

          <SectionH n="4.0" title="MECHANICAL DIMENSIONS" accent={p.accent} />
          <Table accent={p.accent} cols={['PARAMETER','SYMBOL','VALUE','UNIT']} rows={[
            ['Letterhead, US Letter','L-US','8.50 × 11.00','in'],
            ['Letterhead, A4','L-A4','210 × 297','mm'],
            ['Business card','B-CRD','3.50 × 2.00','in'],
            ['Card stock weight','W-CRD','16','pt'],
            ['Cover stock weight','W-CVR','80','lb'],
          ]} />
        </div>
      </div>

      <DatasheetFooter palette={palette} part={part} rev="A" page={1} pages={2} />
    </div>
  );
}

function DatasheetPage2({ palette = HEAD_PALETTE, mark = HEAD_MARK, markComp = null, paper = 'LETTER' }) {
  const p = PALETTES[palette];
  const part = 'NAS-2026-0014';
  return (
    <div style={pageStyle(paper)}>
      <CornerPips size={6} inset={22} color={p.accent} />
      <DatasheetHeader palette={palette} mark={mark} markComp={markComp} part={part} rev="A" page={2} pages={2} />

      <div style={{
        marginTop: 16, display:'grid', gridTemplateColumns:'1fr 1fr', gap: 22,
        fontSize: 8.5, lineHeight: 1.55,
      }}>
        <div>
          <SectionH n="5.0" title="APPLICATION NOTES" accent={p.accent} />
          <p style={para}>
            The system is intended for use in correspondence, technical
            bulletins, and internal reference documents. It is not intended for
            advertising, point-of-sale, or any context requiring tonal warmth.
          </p>
          <p style={para}>
            When the system appears alongside the formal v1 letterhead, the
            v1b register should be reserved for product / datasheet / technical
            artefacts. The dual-register option referenced in §10 of the brief
            should be flagged at v2.
          </p>

          <SectionH n="6.0" title="ENVIRONMENTAL" accent={p.accent} />
          <Table accent={p.accent} cols={['PARAMETER','VALUE','NOTE']} rows={[
            ['Stock','Bleached white','80lb cover for primary'],
            ['Reproduction','Spot, two-colour','No four-colour process'],
            ['Substrate','Smooth, uncoated','No laid or textured'],
            ['Corner profile','Square-cut','No rounding'],
          ]} />

          <SectionH n="7.0" title="ORDERING INFORMATION" accent={p.accent} />
          <div style={{
            fontFamily:'"IBM Plex Mono", monospace', fontSize: 8.5,
            border:`1px solid ${p.accent}`, padding: 10, marginTop: 4,
          }}>
            <div>NAS &mdash; 2026 &mdash; 0014 &mdash; A</div>
            <div style={{ marginTop: 6, fontSize: 7, color:'#555', letterSpacing:'0.04em' }}>
              FORM &nbsp;·&nbsp; YEAR &nbsp;·&nbsp; SEQ &nbsp;·&nbsp; REV
            </div>
          </div>
        </div>
        <div>
          <SectionH n="8.0" title="REVISION HISTORY" accent={p.accent} />
          <Table accent={p.accent} cols={['REV','DATE','PAGES','NOTE']} rows={[
            ['—', '04/02/1986', '—', 'Initial draft, internal'],
            ['A', '05/14/1986', '1–2', 'Released — production handoff'],
          ]} />

          <SectionH n="9.0" title="LEGAL NOTICE" accent={p.accent} />
          <p style={{ ...para, fontSize: 7.8 }}>
            The Company reserves the right to amend this document without
            prior notice. The information contained herein is supplied
            without warranty of any kind, express or implied. No license,
            express or implied, is conveyed under any intellectual property
            right of the Company. All trademarks identified by ™ or ® are
            the property of the Company and its affiliates.
          </p>

          <SectionH n="10.0" title="REFERENCE" accent={p.accent} />
          <div style={{
            fontFamily:'"IBM Plex Mono", monospace', fontSize: 7.6,
            lineHeight: 1.55, color:'#222',
          }}>
            <div>NORTH ATLANTIC SEMICONDUCTOR, INC.</div>
            <div>Office of the Corporate Secretary</div>
            <div>William&nbsp;S.&nbsp;Fraser</div>
            <div style={{ marginTop: 6 }}>TELEX&nbsp;&nbsp;510-3211 NATLSEMI</div>
            <div>MARINE&nbsp;CABLE&nbsp;&nbsp;NATLSEMI NEW YORK</div>
            <div style={{ marginTop: 6, color:'#777' }}>
              The Company does not accept correspondence by post,<br/>
              telephone or facsimile.
            </div>
          </div>
        </div>
      </div>

      <DatasheetFooter palette={palette} part={part} rev="A" page={2} pages={2} />
    </div>
  );
}

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

function pageStyle(paper = 'LETTER') {
  const [W, H] = DS_PAPER[paper];
  return {
    width: W, height: H, background:'#fff', color:'#111',
    fontFamily:'"Helvetica Neue", Helvetica, Arial, sans-serif',
    padding:'40px 48px', boxSizing:'border-box',
    position:'relative', display:'flex', flexDirection:'column',
    fontSize: 9, lineHeight: 1.5,
  };
}

const para = { margin:'0 0 10px', maxWidth: '60ch' };

function SectionH({ n, title, accent }) {
  return (
    <div style={{
      marginTop: 8, marginBottom: 8,
      display:'flex', alignItems:'baseline', gap: 8,
      borderBottom:`1px solid ${accent}`, paddingBottom: 3,
    }}>
      <span style={{
        fontFamily:'"IBM Plex Mono", monospace', fontSize: 8.5,
        color: accent, letterSpacing:'0.04em',
      }}>{n}</span>
      <span style={{
        fontFamily:'Michroma, sans-serif',
        fontSize: 8.5, letterSpacing:'0.06em',
      }}>{title}</span>
    </div>
  );
}

function Table({ cols, rows, accent }) {
  return (
    <table style={{
      width:'100%', borderCollapse:'collapse',
      fontFamily:'"IBM Plex Mono", monospace', fontSize: 7.6,
      letterSpacing:'0.02em', marginTop: 4, marginBottom: 6,
    }}>
      <thead>
        <tr style={{ background: '#f3f3f3' }}>
          {cols.map((c,i) => (
            <th key={i} style={{
              textAlign:'left', padding:'4px 6px',
              borderBottom:`1px solid ${accent}`,
              color:'#222', fontWeight: 600,
            }}>{c}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {rows.map((r,i) => (
          <tr key={i} style={{ borderBottom:'1px solid #eaeaea' }}>
            {r.map((v,j) => (
              <td key={j} style={{ padding:'4px 6px', color:'#222' }}>{v}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Object.assign(window, { DatasheetPage1, DatasheetPage2 });