/* global React, TOKENS, FONTS */
// Eighty4 · brand system. Custom geometric "84" logotype.
// The 8 = two tangent rings (the cycle / the loop). The 4 = sharp, decisive (the one thing).
// Stroke language matches the product's icon set: round caps, even weight.

let _g4 = 0;

// ── the bare 84 glyph, drawn in a 120×120 box ──
function Eighty4Glyph({ color = "#fff", stroke = 8.5 }) {
  const s = { stroke: color, strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" };
  return (
    <g {...s}>
      {/* 8 — two tangent circles */}
      <circle cx="41.5" cy="42" r="14" />
      <circle cx="41.5" cy="73" r="17" />
      {/* 4 — stem, diagonal, crossbar */}
      <path d="M83.5 28 L83.5 92" />
      <path d="M83.5 28 L61.5 66 L95.5 66" />
    </g>
  );
}

// ── the app mark: rounded square + glyph ──
function Eighty4Mark({ size = 40, variant = "default", radius }) {
  const id = React.useMemo(() => `e4grad${_g4++}`, []);
  const rx = radius != null ? radius : 27;
  const AC = (window.TOKENS && window.TOKENS.accent) || "#8463B0";
  let bg, glyph, ring;
  if (variant === "light") { bg = "#FFFFFF"; glyph = AC; ring = "rgba(33,28,22,0.08)"; }
  else if (variant === "mono") { bg = "transparent"; glyph = "currentColor"; ring = "transparent"; }
  else { bg = `url(#${id})`; glyph = "#FFFFFF"; ring = "rgba(255,255,255,0.10)"; }
  return (
    <svg width={size} height={size} viewBox="0 0 120 120" style={{ display: "block", flexShrink: 0 }} aria-label="Eighty4">
      <defs>
        <linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#9374BE" />
          <stop offset="1" stopColor="#5F4186" />
        </linearGradient>
      </defs>
      {variant !== "mono" && <rect x="1" y="1" width="118" height="118" rx={rx} fill={bg} stroke={ring} strokeWidth="1" />}
      <Eighty4Glyph color={glyph} />
    </svg>
  );
}

// ── wordmark: mark + "Eighty4" (the 4 is the accent glyph) ──
function Eighty4Wordmark({ size = 20, light = false, mark = false }) {
  const AC = (window.TOKENS && window.TOKENS.accent) || "#8463B0";
  const ink = light ? "#fff" : ((window.TOKENS && window.TOKENS.text) || "#211C16");
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: size * 0.46 }}>
      {mark && <Eighty4Mark size={size * 1.42} variant={light ? "default" : "default"} radius={28} />}
      <span style={{ fontSize: size, fontWeight: 700, letterSpacing: -0.7, color: ink, fontFamily: FONTS.sans, lineHeight: 1 }}>
        Eighty<span style={{ color: AC, fontFamily: FONTS.mono, fontWeight: 600, letterSpacing: -1 }}>4</span>
      </span>
    </span>
  );
}

Object.assign(window, { Eighty4Glyph, Eighty4Mark, Eighty4Wordmark });