// SVG mark for 風都 — a stylized 「風」 character abstracted into a wind sail
// shape, framed in a thin gold square. Pure geometry, no kanji-tracing.
function FutoMark({ size = 40, color }) {
  const c = color || 'var(--kin)';
  return (
    <svg viewBox="0 0 64 64" width={size} height={size} aria-label="Futo logo" style={{ display: 'block' }}>
      {/* Outer thin frame */}
      <rect x="2" y="2" width="60" height="60" fill="none" stroke={c} strokeWidth="1" opacity="0.55" />
      {/* Inner mark - stylized wind: a flowing arc + horizontal strokes,
          echoing the 風 character's bones (hood + 虫 inside) without literal copy */}
      <g stroke={c} fill="none" strokeWidth="1.5" strokeLinecap="round">
        {/* outer arch — the "hood" of 風 */}
        <path d="M 14 18 Q 32 10 50 18 L 50 46" />
        <path d="M 14 18 L 14 46" />
        {/* inner three horizontal wind lines */}
        <path d="M 22 28 L 42 28" opacity="0.85" />
        <path d="M 22 36 L 42 36" opacity="0.7" />
        <path d="M 22 44 L 38 44" opacity="0.55" />
        {/* tiny dot — the 虫 dot inside 風 */}
        <circle cx="32" cy="22" r="1.2" fill={c} stroke="none" />
      </g>
    </svg>
  );
}

// Full lockup: mark + 風都 / FUTO
function FutoLockup() {
  return (
    <div className="nav-logo">
      <FutoMark size={42} />
      <div className="lockup">
        <span className="jp">風都</span>
        <span className="en">Futo Corporation</span>
      </div>
    </div>
  );
}

window.FutoMark = FutoMark;
window.FutoLockup = FutoLockup;