/* ============================================================================
 * 서명전에 — iOS SF Symbols-inspired icons (line SVG)
 * ========================================================================== */

const IOSIcon = ({ name, size = 22, weight = 1.8, fill = false }) => {
  const s = size;
  const common = {
    width: s,
    height: s,
    viewBox: "0 0 24 24",
    fill: fill ? "currentColor" : "none",
    stroke: "currentColor",
    strokeWidth: weight,
    strokeLinecap: "round",
    strokeLinejoin: "round",
  };

  switch (name) {
    /* --- Tab bar --- */
    case "house":
      return (
        <svg {...common}>
          <path d="M3 10.5L12 3l9 7.5v9a1.5 1.5 0 01-1.5 1.5h-15A1.5 1.5 0 013 19.5v-9z" />
          <path d="M9 21V13h6v8" />
        </svg>
      );
    case "clock":
      return (
        <svg {...common}>
          <circle cx="12" cy="12" r="9" />
          <path d="M12 7v5l3.5 2" />
        </svg>
      );
    case "person":
      return (
        <svg {...common}>
          <circle cx="12" cy="8" r="4" />
          <path d="M4 21c0-4.5 3.5-7 8-7s8 2.5 8 7" />
        </svg>
      );
    case "plus":
      return (
        <svg {...common} strokeWidth={2.5}>
          <path d="M12 5v14M5 12h14" />
        </svg>
      );

    /* --- Nav / chrome --- */
    case "chev-left":
      return (
        <svg {...common} strokeWidth={2.2}>
          <path d="M15 6l-6 6 6 6" />
        </svg>
      );
    case "chev-right":
      return (
        <svg {...common} strokeWidth={2.2}>
          <path d="M9 6l6 6-6 6" />
        </svg>
      );
    case "chev-down":
      return (
        <svg {...common}>
          <path d="M6 9l6 6 6-6" />
        </svg>
      );
    case "chev-up":
      return (
        <svg {...common}>
          <path d="M18 15l-6-6-6 6" />
        </svg>
      );
    case "mail":
      return (
        <svg {...common}>
          <rect x="3" y="5" width="18" height="14" rx="2" />
          <path d="M3 7l9 6 9-6" />
        </svg>
      );
    case "chat":
      return (
        <svg {...common}>
          <path d="M21 12a8 8 0 0 1-11.3 7.3L4 20l.7-5.7A8 8 0 1 1 21 12z" />
        </svg>
      );
    case "ellipsis":
      return (
        <svg {...common} fill="currentColor" strokeWidth={0}>
          <circle cx="6" cy="12" r="1.6" />
          <circle cx="12" cy="12" r="1.6" />
          <circle cx="18" cy="12" r="1.6" />
        </svg>
      );
    case "x":
      return (
        <svg {...common} strokeWidth={2.2}>
          <path d="M6 6l12 12M18 6L6 18" />
        </svg>
      );
    case "share":
      return (
        <svg {...common}>
          <path d="M12 3v13" />
          <path d="M8 7l4-4 4 4" />
          <path d="M5 13v6a1 1 0 001 1h12a1 1 0 001-1v-6" />
        </svg>
      );

    /* --- Status bar --- */
    case "signal":
      return (
        <svg {...common} fill="currentColor" strokeWidth={0}>
          <rect x="3"  y="12" width="3" height="5" rx="0.6" />
          <rect x="8"  y="9"  width="3" height="8" rx="0.6" />
          <rect x="13" y="6"  width="3" height="11" rx="0.6" />
          <rect x="18" y="3"  width="3" height="14" rx="0.6" />
        </svg>
      );
    case "wifi":
      return (
        <svg {...common}>
          <path d="M2 8.5C5 5.5 8.5 4 12 4s7 1.5 10 4.5" />
          <path d="M5 12a10 10 0 0114 0" />
          <path d="M8.5 15.5a5 5 0 017 0" />
          <circle cx="12" cy="19" r="1" fill="currentColor" />
        </svg>
      );
    case "battery":
      return (
        <svg {...common}>
          <rect x="2" y="8" width="18" height="9" rx="2.2" />
          <rect x="3.5" y="9.5" width="14" height="6" rx="1" fill="currentColor" />
          <path d="M21 11v3" strokeWidth={2.2} />
        </svg>
      );

    /* --- Content --- */
    case "camera":
      return (
        <svg {...common}>
          <path d="M4 8h3l1.5-2h7L17 8h3a1 1 0 011 1v9a1 1 0 01-1 1H4a1 1 0 01-1-1V9a1 1 0 011-1z" />
          <circle cx="12" cy="13" r="3.5" />
        </svg>
      );
    case "photos":
      return (
        <svg {...common}>
          <rect x="3" y="5" width="18" height="14" rx="2" />
          <circle cx="9" cy="11" r="2" />
          <path d="M4 18l5-5 4 4 3-3 4 4" />
        </svg>
      );
    case "folder":
      return (
        <svg {...common}>
          <path d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" />
        </svg>
      );
    case "doc":
      return (
        <svg {...common}>
          <path d="M6 3h9l4 4v13a2 2 0 01-2 2H6a2 2 0 01-2-2V5a2 2 0 012-2z" />
          <path d="M14 3v4h4" />
          <path d="M8 13h8M8 17h6" />
        </svg>
      );
    case "shield":
      return (
        <svg {...common}>
          <path d="M12 3L4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6l-8-3z" />
        </svg>
      );
    case "shield-check":
      return (
        <svg {...common}>
          <path d="M12 3L4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6l-8-3z" />
          <path d="M9 12l2 2 4-4" />
        </svg>
      );
    case "shield-exclam":
      return (
        <svg {...common}>
          <path d="M12 3L4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6l-8-3z" />
          <path d="M12 8v5" />
          <path d="M12 16v.01" strokeWidth={2.2} />
        </svg>
      );
    case "exclam":
      return (
        <svg {...common}>
          <circle cx="12" cy="12" r="9" />
          <path d="M12 7v6" />
          <path d="M12 16v.01" strokeWidth={2.2} />
        </svg>
      );
    case "warn-tri":
      return (
        <svg {...common}>
          <path d="M12 3L2 20h20L12 3z" />
          <path d="M12 10v5" />
          <path d="M12 18v.01" strokeWidth={2.2} />
        </svg>
      );
    case "check":
      return (
        <svg {...common} strokeWidth={2.2}>
          <path d="M5 12l5 5L20 7" />
        </svg>
      );
    case "refresh":
      return (
        <svg {...common} strokeWidth={1.8}>
          <path d="M20 12a8 8 0 1 1-3-6.24" />
          <path d="M20 4v5h-5" />
        </svg>
      );
    case "check-circle":
      return (
        <svg {...common}>
          <circle cx="12" cy="12" r="9" />
          <path d="M8 12l3 3 5-6" />
        </svg>
      );
    case "info":
      return (
        <svg {...common}>
          <circle cx="12" cy="12" r="9" />
          <path d="M12 11v5" />
          <path d="M12 8v.01" strokeWidth={2.2} />
        </svg>
      );
    case "help":
      return (
        <svg {...common}>
          <circle cx="12" cy="12" r="9" />
          <path d="M9.2 9.5c.3-1.6 1.5-2.5 3-2.5 1.6 0 2.8 1.1 2.8 2.5 0 1.6-1.8 2-2.5 3-.3.4-.5.9-.5 1.5" />
          <path d="M12 17.5v.01" strokeWidth={2.2} />
        </svg>
      );
    case "search":
      return (
        <svg {...common}>
          <circle cx="11" cy="11" r="7" />
          <path d="M21 21l-5-5" />
        </svg>
      );
    case "filter":
      return (
        <svg {...common}>
          <path d="M4 6h16" />
          <path d="M7 12h10" />
          <path d="M10 18h4" />
        </svg>
      );
    case "bolt":
      return (
        <svg {...common} fill="currentColor" strokeWidth={0}>
          <path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z" />
        </svg>
      );
    case "bell":
      return (
        <svg {...common}>
          <path d="M6 9a6 6 0 0112 0v4l1.5 3h-15L6 13V9z" />
          <path d="M10 19a2 2 0 004 0" />
        </svg>
      );
    case "lock":
      return (
        <svg {...common}>
          <rect x="5" y="10" width="14" height="11" rx="2" />
          <path d="M8 10V7a4 4 0 018 0v3" />
        </svg>
      );
    case "card":
      return (
        <svg {...common}>
          <rect x="3" y="6" width="18" height="12" rx="2" />
          <path d="M3 10h18" />
          <path d="M7 15h4" />
        </svg>
      );
    case "gear":
      return (
        <svg {...common}>
          <circle cx="12" cy="12" r="3" />
          <path d="M19 12a7 7 0 00-.1-1.2l2-1.5-2-3.5-2.3.9a7 7 0 00-2.1-1.2L14 3h-4l-.5 2.5A7 7 0 007.4 6.7L5.1 5.8l-2 3.5 2 1.5A7 7 0 005 12c0 .4 0 .8.1 1.2l-2 1.5 2 3.5 2.3-.9a7 7 0 002.1 1.2L10 21h4l.5-2.5a7 7 0 002.1-1.2l2.3.9 2-3.5-2-1.5c0-.4.1-.8.1-1.2z" />
        </svg>
      );
    case "circle-fill":
      return (
        <svg {...common} fill="currentColor" strokeWidth={0}>
          <circle cx="12" cy="12" r="5" />
        </svg>
      );
    case "trash":
      return (
        <svg {...common}>
          <path d="M5 7h14" />
          <path d="M9 7V5a1 1 0 011-1h4a1 1 0 011 1v2" />
          <path d="M7 7l1 13a2 2 0 002 2h4a2 2 0 002-2l1-13" />
        </svg>
      );
    case "moon":
      return (
        <svg {...common}>
          <path d="M20 14.5A8 8 0 0110 4a8 8 0 1010 10.5z" />
        </svg>
      );
    case "arrow-right":
      return (
        <svg {...common} strokeWidth={2.2}>
          <path d="M5 12h14" />
          <path d="M13 5l7 7-7 7" />
        </svg>
      );
    case "building":
      return (
        <svg {...common}>
          <rect x="4" y="3" width="16" height="18" rx="1.5" />
          <path d="M9 8h2M13 8h2M9 12h2M13 12h2M9 16h2M13 16h2" />
        </svg>
      );
    case "briefcase":
      return (
        <svg {...common}>
          <rect x="3" y="7" width="18" height="13" rx="2" />
          <path d="M9 7V5a2 2 0 012-2h2a2 2 0 012 2v2" />
          <path d="M3 13h18" />
        </svg>
      );
    case "home-key":
      return (
        <svg {...common}>
          <path d="M3 10.5L12 3l9 7.5" />
          <path d="M5 10v10h5v-5h4v5h5V10" />
        </svg>
      );

    default:
      return null;
  }
};

/* ============================================================================
 * BrandMark — 서명전에 공식 심볼 (Direction A: Reading-first)
 * 도장 프레임 + 돋보기 + 서명 라인. 200×200 그리드.
 * ========================================================================== */
const BrandMark = ({ size = 28, color = "currentColor" }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 200 200"
    fill="none"
    stroke={color}
    strokeWidth="10"
    strokeLinecap="round"
    strokeLinejoin="round"
    aria-hidden="true"
  >
    <rect x="28" y="28" width="144" height="144" rx="28" />
    <circle cx="90" cy="90" r="30" />
    <path d="M112 112 L140 140" />
    <path d="M56 146 Q82 136 102 148 T150 142" strokeWidth="8" />
  </svg>
);

/* Brand lockup: symbol + wordmark.
 * symbolOnly=true 인 경우(사이드바 접힘 등 좁은 컨테이너) 워드마크를 숨기고
 * 심볼만 렌더해서 컨테이너 밖으로 글자가 삐져나오지 않게 한다.
 */
const BrandLockup = ({ size = 22, color = "currentColor", gap = 8, symbolOnly = false }) => (
  <span style={{ display: "inline-flex", alignItems: "center", gap: symbolOnly ? 0 : gap, color }}>
    <BrandMark size={size} color={color} />
    {!symbolOnly && (
      <span style={{
        fontFamily: "var(--font-display)",
        fontWeight: 700,
        fontSize: size * 0.78,
        letterSpacing: "-0.02em",
        lineHeight: 1,
        color,
        whiteSpace: "nowrap",
      }}>
        서명전에
      </span>
    )}
  </span>
);

window.IOSIcon    = IOSIcon;
window.BrandMark  = BrandMark;
window.BrandLockup = BrandLockup;