// soft keys ロゴ — 鍵（キーホール）モチーフの幾何学マーク + ワードマーク
(function () {
  // 鍵穴マーク（角丸タイル内に白いキーホール）
  function Mark({ size = 32, tile = '#22a06b', hole = '#fff', tileStroke }) {
    return (
      <svg width={size} height={size} viewBox="0 0 40 40" fill="none" style={{ display: 'block', flexShrink: 0 }}>
        <rect x="1.5" y="1.5" width="37" height="37" rx="12" fill={tile} stroke={tileStroke || 'none'} strokeWidth={tileStroke ? 1.5 : 0} />
        <circle cx="20" cy="16.2" r="5" fill={hole} />
        <path d="M16.7 19.3 H23.3 L25.2 30 H14.8 Z" fill={hole} />
      </svg>
    );
  }

  // マークのみ（タイル無し・単色のキーホール）— 余白に置く用
  function Glyph({ size = 32, color = '#22a06b' }) {
    return (
      <svg width={size} height={size} viewBox="0 0 40 40" fill="none" style={{ display: 'block', flexShrink: 0 }}>
        <circle cx="20" cy="15" r="6" fill={color} />
        <path d="M16 19 H24 L26.5 33 H13.5 Z" fill={color} />
      </svg>
    );
  }

  function Logo({ mark = 30, size = 19, tile = '#22a06b', hole = '#fff', tileStroke, ink = '#1c2b24', accent = '#22a06b', font = '"Zen Kaku Gothic New", sans-serif', gap = 11, weight = 700, letter = 0.5 }) {
    return (
      <span style={{ display: 'inline-flex', alignItems: 'center', gap }}>
        <Mark size={mark} tile={tile} hole={hole} tileStroke={tileStroke} />
        <span style={{ whiteSpace: 'nowrap', letterSpacing: letter }}>
          <span style={{ font: `500 ${size}px ${font}`, color: ink }}>soft</span>
          <span style={{ font: `${weight} ${size}px ${font}`, color: accent }}> keys</span>
        </span>
      </span>
    );
  }

  Object.assign(window, { SoftKeysMark: Mark, SoftKeysGlyph: Glyph, SoftKeysLogo: Logo });
})();