/* Lucide-style line icons — 24×24, 1.75 stroke, round caps. */
function Icon({ name, size = 24, stroke = 1.75, className = '', style = {} }) {
  const P = {
    users: <><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></>,
    package: <><path d="m7.5 4.27 9 5.15"/><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></>,
    link: <><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></>,
    clock: <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
    message: <><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></>,
    wallet: <><path d="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"/><path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4"/></>,
    globe: <><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></>,
    layers: <><path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/></>,
    pen: <><path d="M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z"/><path d="m18 13-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18"/><path d="m2.3 2.3 7.286 7.286"/><circle cx="11" cy="11" r="2"/></>,
    code: <><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></>,
    megaphone: <><path d="m3 11 18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/></>,
    trending: <><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></>,
    server: <><rect width="20" height="8" x="2" y="2" rx="2"/><rect width="20" height="8" x="2" y="14" rx="2"/><line x1="6" x2="6.01" y1="6" y2="6"/><line x1="6" x2="6.01" y1="18" y2="18"/></>,
    bot: <><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></>,
    sun: <><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></>,
    moon: <><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></>,
    arrow: <><line x1="5" x2="19" y1="12" y2="12"/><polyline points="12 5 19 12 12 19"/></>,
    arrowUpRight: <><path d="M7 7h10v10"/><path d="M7 17 17 7"/></>,
    check: <><polyline points="20 6 9 17 4 12"/></>,
    search: <><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></>,
    briefcase: <><path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/><rect width="20" height="14" x="2" y="6" rx="2"/></>,
    menu: <><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="18" y2="18"/></>,
    x: <><path d="M18 6 6 18"/><path d="m6 6 12 12"/></>,
    chevron: <><polyline points="6 9 12 15 18 9"/></>,
    spark: <><path d="M12 3v3"/><path d="M12 18v3"/><path d="M3 12h3"/><path d="M18 12h3"/><path d="m5.6 5.6 2.1 2.1"/><path d="m16.3 16.3 2.1 2.1"/><path d="m18.4 5.6-2.1 2.1"/><path d="m7.7 16.3-2.1 2.1"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
      className={className} style={style} aria-hidden="true">
      {P[name] || null}
    </svg>
  );
}

/* Orbital mark — ink (light bg) / paper (dark bg) / gradient (brand moments). Satellite always vivid. */
let __bneMarkId = 0;
function Mark({ size = 30, variant = 'paper' }) {
  const idRef = React.useRef(null);
  if (idRef.current === null) idRef.current = ++__bneMarkId;
  if (variant === 'gradient') {
    const gid = `bneMarkGrad${idRef.current}`;
    return (
      <svg width={size} height={size} viewBox="-6 -6 112 112" role="img" aria-label="Brand New Edge" style={{ display:'block' }}>
        <defs>
          <linearGradient id={gid} x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="#4300BF"></stop>
            <stop offset="0.5" stopColor="#9B0FC4"></stop>
            <stop offset="1" stopColor="#FF00B1"></stop>
          </linearGradient>
        </defs>
        <g transform="rotate(-24 50 50)">
          <path fillRule="evenodd" fill={`url(#${gid})`} d="M9,50 a41,25 0 1,0 82,0 a41,25 0 1,0 -82,0Z M18,52 a32,16 0 1,0 64,0 a32,16 0 1,0 -64,0Z"></path>
        </g>
        <circle cx="94" cy="27" r="5.3" fill={`url(#${gid})`}></circle>
      </svg>
    );
  }
  const ring = variant === 'ink' ? '#2A0F4F' : variant === 'auto' ? 'var(--text-1)' : '#FFFFFF';
  // On dark/colored backgrounds (paper) the satellite is white & smaller; on light (ink) it stays vivid purple.
  const satFill = variant === 'ink' ? '#7B2FBE' : '#FFFFFF';
  const satR = variant === 'ink' ? 5.3 : 4.2;
  return (
    <svg width={size} height={size} viewBox="-6 -6 112 112" role="img" aria-label="Brand New Edge" style={{ display:'block' }}>
      <g transform="rotate(-24 50 50)">
        <path fillRule="evenodd" fill={ring} d="M9,50 a41,25 0 1,0 82,0 a41,25 0 1,0 -82,0Z M18,52 a32,16 0 1,0 64,0 a32,16 0 1,0 -64,0Z"></path>
      </g>
      <circle cx="94" cy="27" r={satR} fill={satFill}></circle>
    </svg>
  );
}

Object.assign(window, { Icon, Mark });