/* TischTap logo marks — 4 directions, all built on the "T-in-the-dot" idea.
   Each takes { size, dark }. dark = rendered for placement on a red field. */
const TT_RED = '#AB1E03';

/* Geometric T glyph as two rounded bars. Pass fill + geometry preset. */
function TBars({ fill, inset }) {
  // inset 0 = full (filled circle/tile); inset 1 = smaller (sits inside ring)
  const g = inset
    ? { cbX: 28, cbY: 31, cbW: 44, cbH: 12, stX: 44, stY: 31, stW: 12, stH: 40, r: 3 }
    : { cbX: 24, cbY: 28, cbW: 52, cbH: 13, stX: 43, stY: 28, stW: 14, stH: 45, r: 3.5 };
  return (
    <g fill={fill}>
      <rect x={g.cbX} y={g.cbY} width={g.cbW} height={g.cbH} rx={g.r} />
      <rect x={g.stX} y={g.stY} width={g.stW} height={g.stH} rx={g.r} />
    </g>
  );
}

const Svg = ({ size, children, vb = '0 0 100 100' }) => (
  <svg width={size} height={size} viewBox={vb} xmlns="http://www.w3.org/2000/svg" style={{ display: 'block', overflow: 'visible' }}>{children}</svg>
);

/* A — Solid Tap: filled dot, T knocked out */
function MarkA({ size = 100, dark = false }) {
  const body = dark ? '#fff' : TT_RED;
  const kn = dark ? TT_RED : '#fff';
  return (
    <Svg size={size}>
      <circle cx="50" cy="50" r="47" fill={body} />
      <TBars fill={kn} />
    </Svg>
  );
}

/* B — Target Ring: open ring (the tap-target) with the T held in the center */
function MarkB({ size = 100, dark = false }) {
  const body = dark ? '#fff' : TT_RED;
  return (
    <Svg size={size}>
      <circle cx="50" cy="50" r="44" fill="none" stroke={body} strokeWidth="8.5" />
      <TBars fill={body} inset />
    </Svg>
  );
}

/* C — Ripple / Signal: solid dot + T, with concentric arcs emanating up-right */
function MarkC({ size = 100, dark = false }) {
  const body = dark ? '#fff' : TT_RED;
  const kn = dark ? TT_RED : '#fff';
  return (
    <Svg size={size} vb="-4 -4 108 108">
      <g fill="none" stroke={body} strokeWidth="3.6" strokeLinecap="round">
        <path d="M92 48 A44 44 0 0 0 48 4" opacity="0.5" />
        <path d="M99 48 A51 51 0 0 0 48 -3" opacity="0.28" />
      </g>
      <circle cx="48" cy="52" r="38" fill={body} />
      <g transform="translate(-2,2)"><TBars fill={kn} /></g>
    </Svg>
  );
}

/* D — App Tile: rounded-square tile, T knockout, small tap-dot accent */
function MarkD({ size = 100, dark = false }) {
  const body = dark ? '#fff' : TT_RED;
  const kn = dark ? TT_RED : '#fff';
  return (
    <Svg size={size}>
      <rect x="5" y="5" width="90" height="90" rx="24" fill={body} />
      <g transform="translate(0,-4)"><TBars fill={kn} /></g>
      <circle cx="72" cy="76" r="6.5" fill={kn} />
    </Svg>
  );
}

Object.assign(window, { MarkA, MarkB, MarkC, MarkD, TBars, Svg });