// Reusable brush/decorative SVG components
function EnsoSVG({ size = 200, color = "var(--sumi)", opacity = 0.9, className = "" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 200 200" fill="none" className={className} aria-hidden="true">
      <path
        d="M 100 30 C 60 30, 30 60, 30 100 C 30 140, 60 170, 100 170 C 140 170, 170 140, 170 100 C 170 75, 158 55, 138 42"
        stroke={color}
        strokeWidth="9"
        strokeLinecap="round"
        fill="none"
        opacity={opacity}
      />
    </svg>
  );
}

function StrokeDivider({ width = 600, color = "var(--sumi)", opacity = 0.9, className = "" }) {
  return (
    <svg width={width} height="40" viewBox="0 0 600 60" fill="none" className={className} aria-hidden="true">
      <path
        d="M 20 30 C 80 24, 160 36, 240 30 C 320 24, 400 34, 480 30 C 540 28, 570 32, 585 30"
        stroke={color}
        strokeWidth="14"
        strokeLinecap="round"
        fill="none"
        opacity={opacity}
      />
    </svg>
  );
}

function HankoStamp({ chars = "灯", size = 40, className = "" }) {
  return (
    <span
      className={"hanko " + className}
      style={{
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        width: size, height: size, background: "var(--shu)", color: "var(--paper)",
        fontFamily: "var(--font-display)", fontWeight: 700, fontSize: size * 0.55,
        borderRadius: "3px", letterSpacing: "-0.04em",
      }}
    >
      {chars}
    </span>
  );
}

function LogoMark({ size = 38 }) {
  return <img src="assets/logo-mark.svg" alt="" width={size} height={size}/>;
}

function VerticalCharBlock({ chars }) {
  // chars is an array of characters to render vertically (TRB writing-mode)
  return (
    <div style={{
      writingMode: "vertical-rl",
      fontFamily: "var(--font-display)",
      fontWeight: 700,
      lineHeight: 1.2,
      letterSpacing: "0.05em",
    }}>
      {chars}
    </div>
  );
}

Object.assign(window, { EnsoSVG, StrokeDivider, HankoStamp, LogoMark, VerticalCharBlock });