/* ===== Icons (simple, line-based inline SVG) + shared UI ===== */
const I = ({ d, size = 20, sw = 1.8, fill, style, ...p }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill || "none"}
       stroke={fill ? "none" : "currentColor"} strokeWidth={sw}
       strokeLinecap="round" strokeLinejoin="round" style={style} {...p}>
    {d}
  </svg>
);

const Icon = {
  search:   (p) => <I {...p} d={<><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></>} />,
  download: (p) => <I {...p} d={<><path d="M12 3v12"/><path d="m7 11 5 5 5-5"/><path d="M5 21h14"/></>} />,
  doc:      (p) => <I {...p} d={<><path d="M14 3v5h5"/><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/></>} />,
  cert:     (p) => <I {...p} d={<><circle cx="12" cy="9" r="5"/><path d="M9 13.5 7.5 21l4.5-2.4L16.5 21 15 13.5"/></>} />,
  check:    (p) => <I {...p} d={<path d="m5 12.5 4.5 4.5L19 7"/>} />,
  checkCircle:(p)=> <I {...p} d={<><circle cx="12" cy="12" r="9"/><path d="m8.5 12 2.5 2.5 4.5-5"/></>} />,
  arrowR:   (p) => <I {...p} d={<><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></>} />,
  arrowL:   (p) => <I {...p} d={<><path d="M19 12H5"/><path d="m11 6-6 6 6 6"/></>} />,
  chevR:    (p) => <I {...p} d={<path d="m9 6 6 6-6 6"/>} />,
  x:        (p) => <I {...p} d={<><path d="M18 6 6 18"/><path d="m6 6 12 12"/></>} />,
  plus:     (p) => <I {...p} d={<><path d="M12 5v14"/><path d="M5 12h14"/></>} />,
  upload:   (p) => <I {...p} d={<><path d="M12 16V4"/><path d="m7 9 5-5 5 5"/><path d="M5 20h14"/></>} />,
  user:     (p) => <I {...p} d={<><circle cx="12" cy="8" r="4"/><path d="M5 21a7 7 0 0 1 14 0"/></>} />,
  users:    (p) => <I {...p} d={<><circle cx="9" cy="8" r="3.4"/><path d="M3 20a6 6 0 0 1 12 0"/><path d="M16 5.2a3.4 3.4 0 0 1 0 6.6"/><path d="M18 14.4A6 6 0 0 1 21.5 20"/></>} />,
  cal:      (p) => <I {...p} d={<><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></>} />,
  lock:     (p) => <I {...p} d={<><rect x="4.5" y="10" width="15" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></>} />,
  share:    (p) => <I {...p} d={<><circle cx="6" cy="12" r="2.4"/><circle cx="17" cy="6" r="2.4"/><circle cx="17" cy="18" r="2.4"/><path d="m8.2 11 6.6-3.6M8.2 13l6.6 3.6"/></>} />,
  qr:       (p) => <I {...p} d={<><rect x="4" y="4" width="6" height="6" rx="1"/><rect x="14" y="4" width="6" height="6" rx="1"/><rect x="4" y="14" width="6" height="6" rx="1"/><path d="M14 14h2v2M20 14v6M14 20h6"/></>} />,
  grid:     (p) => <I {...p} d={<><rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="1.5"/></>} />,
  list:     (p) => <I {...p} d={<><path d="M8 6h12M8 12h12M8 18h12"/><circle cx="4" cy="6" r="1"/><circle cx="4" cy="12" r="1"/><circle cx="4" cy="18" r="1"/></>} />,
  eye:      (p) => <I {...p} d={<><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="2.6"/></>} />,
  eyeOff:   (p) => <I {...p} d={<><path d="M10 5.4A10 10 0 0 1 12 5c6 0 10 7 10 7a16 16 0 0 1-3 3.6M6.5 7.5A16 16 0 0 0 2 12s4 7 10 7a10 10 0 0 0 4-.8"/><path d="m4 4 16 16"/></>} />,
  move:     (p) => <I {...p} d={<><path d="M12 3v18M3 12h18"/><path d="m8 7 4-4 4 4M8 17l4 4 4-4M7 8l-4 4 4 4M17 8l4 4-4 4"/></>} />,
  sparkle:  (p) => <I {...p} d={<path d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6z"/>} />,
  table:    (p) => <I {...p} d={<><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18M3 14.5h18M9 9v11"/></>} />,
  logout:   (p) => <I {...p} d={<><path d="M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4"/><path d="M9 12h11M16 8l4 4-4 4"/></>} />,
  settings: (p) => <I {...p} d={<><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1"/></>} />,
  school:   (p) => <I {...p} d={<><path d="M12 3 2 8l10 5 10-5-10-5Z"/><path d="M6 10.5V16c0 1.4 2.7 3 6 3s6-1.6 6-3v-5.5"/></>} />,
  info:     (p) => <I {...p} d={<><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></>} />,
  trophy:   (p) => <I {...p} d={<><path d="M7 4h10v4a5 5 0 0 1-10 0V4Z"/><path d="M17 5h3v2a3 3 0 0 1-3 3M7 5H4v2a3 3 0 0 0 3 3M9 14.5V18M15 14.5V18M8 20h8"/></>} />,
  print:    (p) => <I {...p} d={<><path d="M6 9V3h12v6"/><rect x="4" y="9" width="16" height="8" rx="2"/><path d="M7 17h10v4H7z"/></>} />,
  mail:     (p) => <I {...p} d={<><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></>} />,
};

/* spinner */
const Spinner = ({ size = 18, color }) => (
  <svg className="spin" width={size} height={size} viewBox="0 0 24 24" fill="none"
       style={{ color: color || "currentColor" }}>
    <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="3" opacity="0.2"/>
    <path d="M12 3a9 9 0 0 1 9 9" stroke="currentColor" strokeWidth="3" strokeLinecap="round"/>
  </svg>
);

/* Logo mark — shield + cluster */
const Logo = ({ size = 40 }) => (
  <div style={{ width: size, height: size, borderRadius: 11, position: "relative",
    background: "linear-gradient(150deg, var(--c-primary-500), var(--c-primary-700))",
    display: "grid", placeItems: "center", boxShadow: "var(--sh-sm)", flex: "none" }}>
    <svg width={size * 0.58} height={size * 0.58} viewBox="0 0 24 24" fill="none" stroke="var(--c-gold)" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3 2.5 7.5 12 12l9.5-4.5L12 3Z"/>
      <path d="M6.5 9.8V15c0 1.3 2.5 2.8 5.5 2.8s5.5-1.5 5.5-2.8V9.8" stroke="#fff" opacity="0.92"/>
    </svg>
  </div>
);

/* Modal shell */
const Modal = ({ open, onClose, children, maxW = 560, pad = true }) => {
  React.useEffect(() => {
    const h = (e) => e.key === "Escape" && onClose && onClose();
    if (open) window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 90,
      background: "oklch(0.26 0.04 264 / 0.42)", backdropFilter: "blur(4px)",
      display: "grid", placeItems: "center", padding: 20, animation: "fadeIn .2s ease" }}>
      <div onClick={(e) => e.stopPropagation()} className="card"
        style={{ width: "100%", maxWidth: maxW, maxHeight: "92vh", overflow: "auto",
          padding: pad ? 28 : 0, boxShadow: "var(--sh-lg)", animation: "pop .25s cubic-bezier(.22,1,.36,1)" }}>
        {children}
      </div>
    </div>
  );
};

Object.assign(window, { Icon, Spinner, Logo, Modal });