// Marks for NAS v1b. Three approaches per brief §4.
// All are flat spot-colour vector — no gradients, bevels or 3D.
// SVGs render at any size; pass `size` (px height) and `color`.
//
// IMPORTANT: shapes were drafted to read clean down to 16px (favicon)
// and to align optically with the Michroma cap height at lockup scale.

// Mark A — Geometric boxed "N"
// Square frame, custom-cut N with a flat-cut bottom-right and top-left,
// the one quiet eccentricity allowed by the brief.
function MarkBoxedN({ size = 64, color = '#E4002B' }) {
  // 100x100 viewBox; rule weight 12 (mid-weight, period-correct)
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" aria-label="NAS mark — boxed N">
      <rect x="3" y="3" width="94" height="94" fill={color} />
      {/* N counter, knocked out */}
      <path
        d="M 22 22 H 36 L 64 60 V 22 H 78 V 78 H 64 L 36 40 V 78 H 22 Z"
        fill="#fff"
      />
    </svg>
  );
}

// Mark B — Parallel-bar mark
// Four horizontal bars decreasing in width, suggesting forward motion.
// References Tektronix / Borland chevron — single accent colour, never rainbow.
function MarkBars({ size = 64, color = '#E4002B' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" aria-label="NAS mark — parallel bars">
      {/* Four bars, each 14 tall, 8 gap. Decreasing widths. */}
      <rect x="6"  y="14" width="88" height="14" fill={color} />
      <rect x="6"  y="36" width="72" height="14" fill={color} />
      <rect x="6"  y="58" width="56" height="14" fill={color} />
      <rect x="6"  y="80" width="40" height="6"  fill={color} />
    </svg>
  );
}

// Mark C — Chamfered cartouche
// Octagonal frame (rectangle with cut corners) containing geometric "N".
// References Atari corporate stationery, MOS Technology.
function MarkCartouche({ size = 64, color = '#E4002B' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" aria-label="NAS mark — chamfered cartouche">
      {/* Outer chamfered octagon */}
      <polygon
        points="20,4 80,4 96,20 96,80 80,96 20,96 4,80 4,20"
        fill={color}
      />
      {/* Inner N, knocked out */}
      <path
        d="M 28 26 H 40 L 60 56 V 26 H 72 V 74 H 60 L 40 44 V 74 H 28 Z"
        fill="#fff"
      />
    </svg>
  );
}

// Convenience selector
function Mark({ kind = 'A', size = 64, color = '#E4002B' }) {
  if (kind === 'B') return <MarkBars size={size} color={color} />;
  if (kind === 'C') return <MarkCartouche size={size} color={color} />;
  return <MarkBoxedN size={size} color={color} />;
}

Object.assign(window, { Mark, MarkBoxedN, MarkBars, MarkCartouche });