// Brand marks — drawn as SVG geometry, no fonts. Tech-high-end aesthetic:
// thin uniform strokes, sharp terminals, generous letter-spacing, monospace grid.

// Each letterform fits a 60w x 80h tile, drawn with stroke geometry.
// Cap height 80, x-height matches caps (caps only). Stroke width 4.

function Letter({ d, w = 60, x = 0 }) {
  return <path d={d} transform={`translate(${x}, 0)`} fill="none" stroke="currentColor" strokeWidth="4" strokeLinecap="square" strokeLinejoin="miter" />;
}

// Letterform path definitions on a 60×80 grid (4-unit stroke).
const G = "M 56 18 A 28 36 0 1 0 56 62 L 56 46 L 38 46";
const E = "M 8 4 L 52 4 M 8 4 L 8 76 M 8 76 L 52 76 M 8 40 L 44 40";
const O = "M 30 4 A 22 36 0 1 0 30 76 A 22 36 0 1 0 30 4";
const R = "M 8 76 L 8 4 L 38 4 A 18 18 0 0 1 38 40 L 8 40 M 32 40 L 52 76";
const G2 = "M 56 18 A 28 36 0 1 0 56 62 L 56 46 L 38 46"; // same G
const N = "M 8 76 L 8 4 L 52 76 L 52 4";
const T = "M 4 4 L 56 4 M 30 4 L 30 76";
const L = "M 8 4 L 8 76 L 52 76";

// "GEORGE NETTLETON" — 16 letters; we draw it at fixed widths with tracking.

const TRACK = 22; // gap between letters
const W = 60;     // letter cell width

const WORD = "GEORGE NETTLETON CALENDAR";

const PATHS = {
  G, E, O, R, N, T, L,
  C: "M 52 18 A 28 36 0 1 0 52 62",
  A: "M 4 76 L 30 4 L 56 76 M 14 52 L 46 52",
  D: "M 8 4 L 8 76 L 32 76 A 24 36 0 0 0 32 4 L 8 4",
  // space rendered as gap
};

function Wordmark({ text, size = 14, color = "currentColor", className = "" }) {
  // Build the layout: each character either uses PATHS or skips (space).
  const chars = text.split("");
  let x = 0;
  const elements = [];
  chars.forEach((ch, i) => {
    if (ch === " ") {
      x += W * 0.55;
      return;
    }
    const d = PATHS[ch];
    if (!d) { x += W + TRACK; return; }
    elements.push(<Letter key={i} d={d} x={x} />);
    x += W + TRACK;
  });
  const totalW = x - TRACK;
  const totalH = 80;
  const aspect = totalW / totalH;
  const height = size;
  const width = size * aspect;
  return (
    <svg
      className={className}
      width={width}
      height={height}
      viewBox={`-2 -2 ${totalW + 4} ${totalH + 4}`}
      style={{ color, display: "block" }}
      role="img"
      aria-label={text}
    >
      {elements}
    </svg>
  );
}

// GN monogram — uses the actual logo image (halftone "GN" mark).
// Two pre-processed variants share the same alpha mask: dark ink for light mode,
// white ink for dark mode. We render whichever matches the current theme via CSS.
// Aspect ratio of the trimmed source: 338 × 237 ≈ 1.426
const MONO_ASPECT = 338 / 237;

function Monogram({ size = 36 }) {
  // `size` is the target HEIGHT in px. Width is derived from the logo's natural aspect ratio.
  const height = size;
  const width = size * MONO_ASPECT;
  return (
    <span
      className="brand-monogram"
      style={{
        display: "inline-block",
        width: `${width}px`,
        height: `${height}px`,
        flexShrink: 0,
        position: "relative",
        lineHeight: 0,
      }}
      role="img"
      aria-label="GN"
    >
      <img
        src={window.GN_LOGO_LIGHT}
        alt=""
        className="brand-monogram-light"
        style={{
          width: "100%",
          height: "100%",
          display: "block",
          objectFit: "contain",
        }}
      />
      <img
        src={window.GN_LOGO_DARK}
        alt=""
        className="brand-monogram-dark"
        style={{
          width: "100%",
          height: "100%",
          display: "block",
          objectFit: "contain",
          position: "absolute",
          inset: 0,
        }}
      />
    </span>
  );
}

window.BrandMarks = { Wordmark, Monogram };