// Lockup.jsx — wordmark + mark combinations.
// Wordmark: Michroma (closest free analogue to Eurostile/Microgramma; the
// licensed cuts named in the brief are reserved for the production handoff).
// Letter-spacing widened slightly to push the "extended" feel.
//
// Lockup grammar (per brief §4):
//   [MARK]  NORTH ATLANTIC SEMICONDUCTOR, INC.™
// Mark cap-aligned to wordmark, smaller than cap height, half-em gutter.

const PALETTES = {
  A: { name: 'System A — Pantone 185 C', accent: '#E4002B', ink: '#111111' },
  B: { name: 'System B — Pantone 286 C', accent: '#003DA5', ink: '#111111' },
  C: { name: 'System C — Cool Grey',     accent: '#5F6772', ink: '#111111' },
};

const wordmarkStyle = (size, italic, color) => ({
  fontFamily: 'Michroma, "Helvetica Neue", Arial, sans-serif',
  fontWeight: 400,
  fontSize: size,
  letterSpacing: '0.02em',
  color,
  whiteSpace: 'nowrap',
  lineHeight: 1,
  // Michroma renders compact already; a slight forward slant (4–8°) per brief.
  transform: italic ? 'skewX(-6deg)' : 'none',
  transformOrigin: 'left center',
  display: 'inline-block',
});

// Wordmark only — no mark.
function Wordmark({ size = 22, italic = false, color = '#111', tmColor }) {
  return (
    <span style={{ display:'inline-flex', alignItems:'flex-start', gap: '0.25em' }}>
      <span style={wordmarkStyle(size, italic, color)}>
        NORTH ATLANTIC SEMICONDUCTOR, INC.
      </span>
      <span style={{
        fontFamily: 'Michroma, Arial, sans-serif',
        fontSize: size * 0.36,
        color: tmColor || color,
        lineHeight: 1,
        marginTop: size * 0.05,
        letterSpacing: 0,
      }}>™</span>
    </span>
  );
}

// Full lockup — mark + wordmark on shared baseline.
// Pass either `mark="A"|"B"|"C"` (legacy N-family registry) OR `markComp`
// (a React component matching the {size, color} contract) for the newer
// NA / NAS / abstract marks defined in marks-na.jsx.
function Lockup({
  palette = 'B',
  mark = 'A',
  markComp = null,     // optional: <Comp size color /> overrides `mark`
  italic = false,
  size = 22,           // wordmark cap size (approx)
  showRule = false,    // §9 sub-entity rule
  subentity = null,    // text under the rule
  inkOnly = false,     // render mark in ink (for one-colour print) — accent off
}) {
  const p = PALETTES[palette];
  const accent = inkOnly ? p.ink : p.accent;
  const markSize = size * 2.1; // mark slightly taller than cap height visually
  const MarkEl = markComp
    ? React.createElement(markComp, { size: markSize, color: accent })
    : <Mark kind={mark} size={markSize} color={accent} />;
  return (
    <div style={{ display:'inline-block', color: p.ink }}>
      <div style={{ display:'flex', alignItems:'center', gap: size * 0.7 }}>
        {MarkEl}
        <Wordmark size={size} italic={italic} color={p.ink} tmColor={p.ink} />
      </div>
      {showRule && (
        <div style={{ marginTop: size * 0.55, marginLeft: markSize + size * 0.7 }}>
          <div style={{
            height: 2,
            background: p.accent,
            width: `calc(${size}px * 28)`,
            maxWidth: '100%',
          }} />
          {subentity && (
            <div style={{
              marginTop: size * 0.35,
              fontFamily: '"IBM Plex Sans", "Helvetica Neue", Arial, sans-serif',
              fontSize: size * 0.55,
              letterSpacing: '0.04em',
              color: p.ink,
              lineHeight: 1.4,
            }}>
              {subentity}
            </div>
          )}
        </div>
      )}
    </div>
  );
}

// Compact stack used in footers / business cards where space is tight.
function LockupCompact({ palette = 'A', mark = 'A', size = 14 }) {
  return <Lockup palette={palette} mark={mark} italic={false} size={size} />;
}

Object.assign(window, { Lockup, LockupCompact, Wordmark, PALETTES });