// Website.jsx — one-page placeholder website.
// Per brief §8.7: pure white background, static HTML feel, fixed 960px
// column, no responsive behaviour, period-correct typography.
// Tonal reference (brief §6): "a single page of a 200-page semiconductor
// blue-book of part numbers and specifications, rendered for the web."

function Website({ palette = 'B', mark = 'A', markComp = null }) {
  const p = PALETTES[palette];
  return (
    <div style={{
      width: 960, // brief specifies fixed 960px, no responsive
      background:'#fff', color:'#111',
      fontFamily:'"Helvetica Neue", Helvetica, Arial, sans-serif',
      fontSize: 12, lineHeight: 1.55,
      padding: '48px 56px 48px', boxSizing:'border-box',
      boxShadow:'0 0 0 1px #ececec', position:'relative',
    }}>
      <CornerPips size={7} inset={20} color={p.accent} />
      {/* Top bar — wordmark + rule */}
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
        <Lockup palette={palette} mark={mark} size={14} markComp={markComp} />
        <div style={{
          fontFamily:'"IBM Plex Mono", monospace',
          fontSize: 10, letterSpacing:'0.04em', color:'#555',
        }}>
          05/14/1986
        </div>
      </div>
      <div style={{ marginTop: 16, height: 2, background: p.accent }} />

      {/* Hairline nav row — minimal. The company is not a directory. */}
      <div style={{
        marginTop: 10, display:'flex', gap: 24,
        fontFamily:'"IBM Plex Mono", monospace', fontSize: 10,
        letterSpacing:'0.06em', color:'#222',
      }}>
        <span>CORPORATE</span>
        <span>OPERATIONS</span>
        <span>INVESTOR RELATIONS</span>
      </div>

      {/* Body — two columns, generic copy */}
      <div style={{
        marginTop: 36, display:'grid', gridTemplateColumns:'1.6fr 1fr', gap: 48,
      }}>
        <div>
          <div style={{
            fontFamily:'Michroma, sans-serif', fontSize: 14,
            letterSpacing:'0.04em', marginBottom: 14,
          }}>
            CORPORATE STATEMENT
          </div>
          <p style={{ margin:'0 0 14px', fontSize: 13, lineHeight: 1.6 }}>
            North Atlantic Semiconductor, Inc. provides services to industry.
          </p>
          <p style={{ margin:'0 0 14px', color:'#333' }}>
            The Company does not maintain a public office, telephone line
            or postal address. Communications are not invited.
          </p>
        </div>

        <div>
          <div style={{
            fontFamily:'Michroma, sans-serif', fontSize: 14,
            letterSpacing:'0.04em', marginBottom: 14,
          }}>
            REFERENCE
          </div>
          <div style={{
            fontFamily:'"IBM Plex Mono", monospace', fontSize: 11,
            lineHeight: 1.65, color:'#222',
          }}>
            <div>Office of the Corporate Secretary</div>
            <div>William&nbsp;S.&nbsp;Fraser</div>
            <div style={{ marginTop: 10 }}>TELEX&nbsp;&nbsp;510-3211 NATLSEMI</div>
            <div>MARINE&nbsp;CABLE&nbsp;&nbsp;NATLSEMI NEW YORK</div>
          </div>
        </div>
      </div>

      {/* Footer legal block */}
      <div style={{ marginTop: 32, paddingTop: 14, borderTop:`1px solid ${p.accent}` }}>
        <div style={{
          fontFamily:'"IBM Plex Mono", monospace', fontSize: 9,
          letterSpacing:'0.02em', color:'#555', lineHeight: 1.5,
        }}>
          North Atlantic Semiconductor, Inc.&nbsp;&nbsp;·&nbsp;&nbsp;North Atlantic Semiconductor Ltd
        </div>
        <div style={{
          marginTop: 4, fontFamily:'"IBM Plex Mono", monospace', fontSize: 9,
          letterSpacing:'0.02em', color:'#888',
          display:'flex', justifyContent:'space-between',
        }}>
          <span>The Company does not accept correspondence by post, telephone or facsimile.</span>
          <span>Document NAS-2026-W001 Rev. A</span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Website });