// Inline SVG icons — minimal, K-modern.
function IconMenu({ size = 24, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round">
      <path d="M4 7h16M4 12h16M4 17h16" />
    </svg>
  );
}
function IconClose({ size = 24, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round">
      <path d="M6 6l12 12M18 6L6 18" />
    </svg>
  );
}
function IconArrow({ size = 16, color = "currentColor", dir = "right" }) {
  const rot = { right: 0, left: 180, up: -90, down: 90 }[dir];
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ transform: `rotate(${rot}deg)` }}>
      <path d="M5 12h14M13 6l6 6-6 6" />
    </svg>
  );
}
function IconCheck({ size = 16, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 12l5 5L20 6" />
    </svg>
  );
}
function IconShield({ size = 16, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-4z" />
      <path d="M9 12l2 2 4-4" />
    </svg>
  );
}
function IconSpark({ size = 16, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8" />
    </svg>
  );
}
function IconChat({ size = 16, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 12a8 8 0 0 1-11.3 7.3L4 21l1.7-5.7A8 8 0 1 1 21 12z" />
    </svg>
  );
}
function IconBook({ size = 16, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 4h6a4 4 0 0 1 4 4v12a3 3 0 0 0-3-3H4z" />
      <path d="M20 4h-6a4 4 0 0 0-4 4v12a3 3 0 0 1 3-3h7z" />
    </svg>
  );
}
function IconUser({ size = 16, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="8" r="4" />
      <path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6" />
    </svg>
  );
}
// SNS
function IconFacebook({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M13 22v-8h3l1-4h-4V7.5c0-1.2.5-2 2-2h2V2h-3c-3 0-5 1.8-5 5v3H6v4h3v8z"/></svg>
  );
}
function IconInstagram({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg>
  );
}
function IconYoutube({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M22 8.5a3 3 0 0 0-2-2C18 6 12 6 12 6s-6 0-8 .5a3 3 0 0 0-2 2C2 10 2 12 2 12s0 2 .3 3.5a3 3 0 0 0 2 2C6 18 12 18 12 18s6 0 8-.5a3 3 0 0 0 2-2c.3-1.5.3-3.5.3-3.5s0-2-.3-3.5zM10 15V9l5 3z"/></svg>
  );
}
function IconKakao({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M12 3C6.5 3 2 6.5 2 11c0 3 2 5.5 5 7l-1 4 4.5-3c.5 0 1 0 1.5.1 5.5 0 10-3.5 10-8s-4.5-8-10-8z"/></svg>
  );
}

// Person silhouettes (abstract, K-modern)
function PersonSilhouetteA({ className }) {
  return (
    <svg viewBox="0 0 400 500" className={className} preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="ps-a" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="var(--silh-top, #1D4ED8)" />
          <stop offset="1" stopColor="var(--silh-bot, #0B1F3A)" />
        </linearGradient>
      </defs>
      <rect width="400" height="500" fill="var(--silh-bg, #E0F2FE)" />
      {/* circular halo */}
      <circle cx="200" cy="220" r="180" fill="var(--silh-halo, #fff)" opacity="0.18" />
      {/* shoulders */}
      <path d="M40 500 C 60 400, 130 360, 200 360 C 270 360, 340 400, 360 500 Z" fill="url(#ps-a)" />
      {/* head */}
      <circle cx="200" cy="240" r="80" fill="url(#ps-a)" />
      {/* glasses suggestion */}
      <rect x="160" y="232" width="32" height="14" rx="3" fill="var(--silh-bg, #E0F2FE)" opacity="0.55" />
      <rect x="208" y="232" width="32" height="14" rx="3" fill="var(--silh-bg, #E0F2FE)" opacity="0.55" />
      <line x1="192" y1="239" x2="208" y2="239" stroke="var(--silh-bg, #E0F2FE)" strokeWidth="2" opacity="0.55" />
    </svg>
  );
}

function PersonSilhouetteScene({ className }) {
  // group with students — abstract crowd
  return (
    <svg viewBox="0 0 400 280" className={className} preserveAspectRatio="xMidYMid slice">
      <rect width="400" height="280" fill="var(--silh-bg, #E0F2FE)" />
      <circle cx="200" cy="180" r="120" fill="var(--silh-halo, #fff)" opacity="0.2" />
      {/* back row small heads */}
      <g fill="var(--silh-mid, #93C5FD)">
        <circle cx="80" cy="160" r="22" />
        <circle cx="320" cy="160" r="22" />
        <circle cx="130" cy="150" r="20" />
        <circle cx="270" cy="150" r="20" />
      </g>
      <g fill="var(--silh-mid, #93C5FD)">
        <path d="M50 280 C 50 220, 110 200, 130 280 Z" />
        <path d="M270 280 C 290 200, 350 220, 350 280 Z" />
        <path d="M100 280 C 100 230, 160 220, 170 280 Z" />
        <path d="M230 280 C 240 220, 300 230, 300 280 Z" />
      </g>
      {/* center figure */}
      <circle cx="200" cy="120" r="50" fill="var(--silh-top, #1D4ED8)" />
      <path d="M120 280 C 130 200, 200 180, 200 180 C 200 180, 270 200, 280 280 Z" fill="var(--silh-top, #1D4ED8)" />
    </svg>
  );
}

Object.assign(window, {
  IconMenu, IconClose, IconArrow, IconCheck, IconShield, IconSpark,
  IconChat, IconBook, IconUser,
  IconFacebook, IconInstagram, IconYoutube, IconKakao,
  PersonSilhouetteA, PersonSilhouetteScene,
});
