// Kigumi mark — kanawa-tsugi joint, drawn flat per logo reference.
// 4 aizome beams converge around a central white inset square that holds a smaller shu key.

const KigumiMark = ({ size = 64, assembled = true, hoverSeparate = false, bg = "#FAF7F0", className = "" }) => {
  const beam = 26;
  const bH = beam / 2;
  const wellSize = 30;
  const wH = wellSize / 2;
  const keySize = 18;
  const kH = keySize / 2;
  const sep = hoverSeparate ? 5 : 0;

  return (
    <svg
      viewBox="0 0 100 100"
      width={size}
      height={size}
      className={`kigumi-mark ${className}`}
      style={{ overflow: "visible", display: "block" }}
    >
      <rect
        x={50 - bH}
        y={0 - sep}
        width={beam}
        height={100 + sep * 2}
        fill="#1B2845"
        style={{
          transform: assembled ? "translateY(0)" : "translateY(-60px)",
          opacity: assembled ? 1 : 0,
          transition: "transform 1000ms cubic-bezier(.22,1,.36,1), opacity 600ms cubic-bezier(.22,1,.36,1)",
        }}
      />
      <rect
        x={0 - sep}
        y={50 - bH}
        width={100 + sep * 2}
        height={beam}
        fill="#1B2845"
        style={{
          transform: assembled ? "translateX(0)" : "translateX(60px)",
          opacity: assembled ? 1 : 0,
          transition: "transform 1000ms cubic-bezier(.22,1,.36,1), opacity 600ms cubic-bezier(.22,1,.36,1)",
          transitionDelay: assembled ? "200ms" : "0ms",
        }}
      />
      <rect
        x={50 - wH}
        y={50 - wH}
        width={wellSize}
        height={wellSize}
        fill={bg}
        style={{
          transform: assembled ? "scale(1)" : "scale(0)",
          transformOrigin: "50px 50px",
          transition: "transform 600ms cubic-bezier(.22,1,.36,1)",
          transitionDelay: assembled ? "500ms" : "0ms",
        }}
      />
      <rect
        x={50 - kH}
        y={50 - kH}
        width={keySize}
        height={keySize}
        fill="#B04A3A"
        style={{
          transform: assembled ? "scale(1)" : "scale(0)",
          transformOrigin: "50px 50px",
          opacity: assembled ? 1 : 0,
          transition: "transform 600ms cubic-bezier(.22,1,.36,1), opacity 400ms cubic-bezier(.22,1,.36,1)",
          transitionDelay: assembled ? "750ms" : "0ms",
        }}
      />
    </svg>
  );
};

const KigumiWordmark = ({ size = 24, color = "#1A1613" }) => (
  <span
    style={{
      fontFamily: '"IBM Plex Serif", Georgia, serif',
      fontWeight: 600,
      fontSize: size,
      letterSpacing: "-0.012em",
      color,
      lineHeight: 1,
      display: "inline-block",
    }}
  >
    kigumi<span style={{ color: "#B04A3A" }}>.</span>
  </span>
);

const KigumiLockup = ({ size = 24, color = "#1A1613", bg = "#FAF7F0" }) => (
  <span style={{ display: "inline-flex", alignItems: "center", gap: size * 0.6 }}>
    <KigumiMark size={size * 1.4} bg={bg} />
    <KigumiWordmark size={size * 1.4} color={color} />
  </span>
);

Object.assign(window, { KigumiMark, KigumiWordmark, KigumiLockup });