// Kinō — Final glyph (V1 locked)
const INK = "#1C2521";
const PAPER = "#F7F4ED";
const JADE = "#4A6B5C";
const GOLD = "#B8924A";
const MUTED = "#8A8F89";

// V1: r 32 · stroke 4.5 · macron 84×3.6 @ y16 · centre dot r1.6
// Below 24px rendering, centre dot is dropped automatically for clarity.
function Glyph({ size = 120, color = INK, accent = GOLD, bg = "transparent", forceDot = null }) {
  const showDot = forceDot !== null ? forceDot : size >= 24;
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: "block" }}>
      {bg !== "transparent" && <rect width="100" height="100" fill={bg} />}
      <circle cx="50" cy="50" r="32" fill="none" stroke={color} strokeWidth="4.5" />
      {showDot && <circle cx="50" cy="50" r="1.6" fill={color} />}
      <rect x="8" y="16" width="84" height="3.6" rx="1.8" fill={accent} />
    </svg>
  );
}

function Wordmark({ color = INK, accent = GOLD, size = 72, tracking = 0.44 }) {
  const macronWidth = size * 0.5;
  const macronHeight = Math.max(1.5, size * 0.038);
  return (
    <span style={{
      fontFamily: '"Cormorant Garamond", "Cormorant", serif',
      fontWeight: 400, fontSize: size, letterSpacing: `${tracking}em`,
      color, lineHeight: 1, display: "inline-flex", alignItems: "baseline",
    }}>
      <span>KIN</span>
      <span style={{ position: "relative", display: "inline-block" }}>
        <span>O</span>
        <span aria-hidden style={{
          position: "absolute", left: "50%", top: `-${size * 0.18}px`,
          transform: "translateX(-50%)", width: macronWidth, height: macronHeight,
          background: accent, borderRadius: macronHeight,
        }} />
      </span>
    </span>
  );
}

function AppIcon({ children, bg, size = 220, shadow = true }) {
  return (
    <div style={{
      width: size, height: size, background: bg, borderRadius: size * 0.225,
      display: "flex", alignItems: "center", justifyContent: "center",
      overflow: "hidden", position: "relative",
      boxShadow: shadow ? "0 20px 40px -20px rgba(0,0,0,0.35)" : "none",
    }}>{children}</div>
  );
}

Object.assign(window, { INK, PAPER, JADE, GOLD, MUTED, Glyph, Wordmark, AppIcon });