/* TischTap — final logo system.
   Concept "Table Stand": the folded tabletop card stand (the product itself),
   seen in perspective — a leaning front face carrying the tap-dot above three
   menu lines, with a rear easel leg. Built on a 100×100 grid, single accent. */
const TT_RED = '#AB1E03';
const TT_INK = '#2A2724';
const TT_BACK = '#7A1602';   /* rear leg / back-panel tone */

/* shared geometry */
const FACE = "M27 11.88 L63 11.12 Q69 11 68.32 16.96 L60.68 84.04 Q60 90 54 90 L18 90 Q12 90 12.69 84.04 L20.31 17.96 Q21 12 27 11.88 Z";   /* leaning front face */
const LEG_OPEN = "M68.32 16.96 L86.82 85.14 Q88 90 83 90 L74 90";          /* rear easel leg, open (outline) */
const LEG_FILL = "M70.21 15.85 L87.79 86.15 Q89 91 84 90.83 L65 90.17 Q60 90 60.57 85.03 L68.43 15.97 Q69 11 70.21 15.85 Z";        /* rear easel leg, closed (filled) */
const DOT = { cx: 42, cy: 32, r: 9.5 };
const LINES = [
  { x1: 25, y1: 53, x2: 56, y2: 52.5 },
  { x1: 23, y1: 65, x2: 54, y2: 64.5 },
  { x1: 23, y1: 77, x2: 41, y2: 76.5 },
];
function MenuLines({ stroke, w = 2.5 }) {
  return (
    <g stroke={stroke} strokeWidth={w} strokeLinecap="round">
      {LINES.map((l, i) => <line key={i} {...l} />)}
    </g>
  );
}

/* Outline stand (white face) — primary mark for light backgrounds */
function StandOutline({ color = TT_RED, face = '#fff', w = 3 }) {
  return (
    <g>
      <path d={LEG_OPEN} fill="none" stroke={color} strokeWidth={w} strokeLinejoin="round" strokeLinecap="round" />
      <path d={FACE} fill={face} stroke={color} strokeWidth={w} strokeLinejoin="round" />
      <circle cx={DOT.cx} cy={DOT.cy} r={DOT.r} fill={color} />
      <MenuLines stroke={color} />
    </g>
  );
}

/* Filled / knockout stand — for enclosed icons & reversed-on-color.
   face = solid panel; detail = dot + lines (set to the bg color to knock out);
   back = rear leg tone. lines=false drops the menu lines for micro sizes. */
function StandFilled({ face = '#fff', detail = TT_RED, back = TT_BACK, lines = true }) {
  return (
    <g>
      <path d={LEG_FILL} fill={back} />
      <path d={FACE} fill={face} />
      <circle cx={DOT.cx} cy={DOT.cy} r={DOT.r} fill={detail} />
      {lines && <MenuLines stroke={detail} />}
    </g>
  );
}

const Svg = ({ w, h, vb = "2 2 96 96", children }) => (
  <svg width={w} height={h} viewBox={vb} xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>{children}</svg>
);

/* Open primary mark. reversed → filled white face with red detail for red bg. */
function Logomark({ size = 100, color = TT_RED, reversed = false }) {
  return (
    <Svg w={size} h={size}>
      {reversed
        ? <StandFilled face="#fff" detail={TT_RED} back={TT_BACK} />
        : <StandOutline color={color} />}
    </Svg>
  );
}

/* Enclosed icon — circle holding the filled stand */
function LogoIcon({ size = 100, dark = false }) {
  const bg = dark ? '#fff' : TT_RED;
  const fg = dark ? TT_RED : '#fff';
  const detail = bg;                    /* dot + lines knock out to the bg */
  const back = dark ? '#C9988E' : TT_BACK;
  return (
    <Svg w={size} h={size} vb="0 0 100 100">
      <circle cx="50" cy="50" r="49" fill={bg} />
      <g transform="translate(50 51) scale(0.74) translate(-50 -50)"><StandFilled face={fg} detail={detail} back={back} /></g>
    </Svg>
  );
}

/* App tile — rounded square */
function LogoTile({ size = 100, dark = false }) {
  const bg = dark ? '#fff' : TT_RED;
  const fg = dark ? TT_RED : '#fff';
  const back = dark ? '#C9988E' : TT_BACK;
  return (
    <Svg w={size} h={size} vb="0 0 100 100">
      <rect x="2" y="2" width="96" height="96" rx="24" fill={bg} />
      <g transform="translate(50 51) scale(0.72) translate(-50 -50)"><StandFilled face={fg} detail={bg} back={back} /></g>
    </Svg>
  );
}

/* Wordmark — camel-case, two-tone Tisch(ink) + Tap(red) */
function Wordmark({ size = 32, dark = false, mono = false }) {
  const ink = dark ? '#fff' : (mono ? 'currentColor' : TT_INK);
  const red = dark ? '#fff' : (mono ? 'currentColor' : TT_RED);
  return (
    <span style={{ fontFamily: 'Poppins, system-ui, sans-serif', fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1, fontSize: size, whiteSpace: 'nowrap' }}>
      <span style={{ color: ink }}>Tisch</span><span style={{ color: red }}>Tap</span>
    </span>
  );
}

/* Lockups */
function LockupH({ scale = 1, dark = false }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 16 * scale }}>
      <Logomark size={52 * scale} color={dark ? '#fff' : TT_RED} reversed={dark} />
      <Wordmark size={34 * scale} dark={dark} />
    </span>
  );
}
function LockupV({ scale = 1, dark = false }) {
  return (
    <span style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 12 * scale }}>
      <Logomark size={66 * scale} color={dark ? '#fff' : TT_RED} reversed={dark} />
      <Wordmark size={28 * scale} dark={dark} />
    </span>
  );
}

Object.assign(window, { StandOutline, StandFilled, Svg, Logomark, LogoIcon, LogoTile, Wordmark, LockupH, LockupV, TT_RED, TT_INK, TT_BACK });