// Line icons — lightweight, stroke-based, for nav/features/etc.
const IconBase = ({ children, size = 20, stroke = 1.8, className = '' }) => (
  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24"
       fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
       className={className}>
    {children}
  </svg>
);

const IconLogo = ({ size = 28, className = '' }) => (
  <svg width={size} height={size} viewBox="0 0 40 40" className={className} aria-hidden="true">
    <defs>
      <linearGradient id="hy-g" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0" stopColor="#003876"/>
        <stop offset="1" stopColor="#103e89"/>
      </linearGradient>
    </defs>
    <rect x="2" y="2" width="36" height="36" rx="10" fill="url(#hy-g)"/>
    {/* H mark */}
    <path d="M11 10v20M29 10v20M11 20h18" stroke="#fff" strokeWidth="3" strokeLinecap="round"/>
    {/* spark */}
    <circle cx="31" cy="10" r="2.6" fill="#cf9417"/>
  </svg>
);

const IconChat       = (p) => <IconBase {...p}><path d="M21 12a8 8 0 1 1-3.1-6.3L21 4l-1 4.1A8 8 0 0 1 21 12Z"/><path d="M8 12h.01M12 12h.01M16 12h.01"/></IconBase>;
const IconBook       = (p) => <IconBase {...p}><path d="M4 5a2 2 0 0 1 2-2h13v16H7a3 3 0 0 0-3 3V5Z"/><path d="M9 7h7M9 11h7"/></IconBase>;
const IconQuestion   = (p) => <IconBase {...p}><circle cx="12" cy="12" r="9"/><path d="M9.5 9.5a2.5 2.5 0 0 1 5 0c0 1.6-2 2-2.5 3.5"/><path d="M12 17h.01"/></IconBase>;
const IconStar       = (p) => <IconBase {...p}><path d="M12 3l2.7 5.8 6.3.9-4.6 4.3 1.1 6.3L12 17.7l-5.6 2.6 1.1-6.3L2.9 9.7l6.3-.9L12 3Z"/></IconBase>;
const IconSpark      = (p) => <IconBase {...p}><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"/></IconBase>;
const IconLoop       = (p) => <IconBase {...p}><path d="M4 12a8 8 0 0 1 13.7-5.6L21 9"/><path d="M21 4v5h-5"/><path d="M20 12a8 8 0 0 1-13.7 5.6L3 15"/><path d="M3 20v-5h5"/></IconBase>;
const IconCheck      = (p) => <IconBase {...p}><path d="M5 13l4 4L19 7"/></IconBase>;
const IconArrow      = (p) => <IconBase {...p}><path d="M5 12h14M13 5l7 7-7 7"/></IconBase>;
const IconBolt       = (p) => <IconBase {...p}><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8z"/></IconBase>;
const IconShield     = (p) => <IconBase {...p}><path d="M12 3l8 3v5c0 5-3.5 8.6-8 10-4.5-1.4-8-5-8-10V6l8-3Z"/><path d="M9 12l2 2 4-4"/></IconBase>;
const IconGlobe      = (p) => <IconBase {...p}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></IconBase>;
const IconMenu       = (p) => <IconBase {...p}><path d="M4 7h16M4 12h16M4 17h16"/></IconBase>;
const IconClose      = (p) => <IconBase {...p}><path d="M6 6l12 12M18 6L6 18"/></IconBase>;
const IconChevron    = (p) => <IconBase {...p}><path d="M9 6l6 6-6 6"/></IconBase>;
const IconDot        = ({ size = 6, className = '' }) => <span className={cx('inline-block rounded-full', className)} style={{width:size,height:size,background:'currentColor'}} />;
const IconSearch     = (p) => <IconBase {...p}><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></IconBase>;
const IconBell       = (p) => <IconBase {...p}><path d="M6 8a6 6 0 1 1 12 0c0 7 3 7 3 9H3c0-2 3-2 3-9Z"/><path d="M10 21h4"/></IconBase>;
const IconHome       = (p) => <IconBase {...p}><path d="M3 11l9-8 9 8"/><path d="M5 10v10h14V10"/></IconBase>;
const IconGift       = (p) => <IconBase {...p}><path d="M3 8h18v5H3z"/><path d="M5 13v8h14v-8"/><path d="M12 8v13"/><path d="M12 8s-2-5-5-5a2.5 2.5 0 0 0 0 5Z"/><path d="M12 8s2-5 5-5a2.5 2.5 0 0 1 0 5Z"/></IconBase>;
const IconProfessor  = (p) => <IconBase {...p}><path d="M12 3 3 7l9 4 9-4-9-4Z"/><path d="M7 9v5c0 1.7 2.2 3 5 3s5-1.3 5-3V9"/><path d="M21 7v5"/></IconBase>;
const IconUpload     = (p) => <IconBase {...p}><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/><path d="M12 15V3"/><path d="M7 8l5-5 5 5"/></IconBase>;
const IconBoard      = (p) => <IconBase {...p}><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M12 18v3"/><path d="M7 9h6M7 13h4"/><circle cx="16.5" cy="11" r="1.5"/></IconBase>;
const IconSlides     = (p) => <IconBase {...p}><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M12 17v4M8 21h8"/><path d="M7 8h7M7 11h4"/></IconBase>;
const IconCompass    = (p) => <IconBase {...p}><circle cx="12" cy="12" r="9"/><path d="m15.5 8.5-2 5-5 2 2-5 5-2Z"/></IconBase>;
const IconPlug       = (p) => <IconBase {...p}><path d="M9 2v6M15 2v6"/><path d="M7 8h10v3a5 5 0 0 1-10 0V8Z"/><path d="M12 16v6"/></IconBase>;
const IconTrophy     = (p) => <IconBase {...p}><path d="M8 4h8v5a4 4 0 0 1-8 0V4Z"/><path d="M8 6H5a2 2 0 0 0 0 4h1M16 6h3a2 2 0 0 1 0 4h-1"/><path d="M12 13v4M9 21h6M10 21v-2.5a2 2 0 0 1 4 0V21"/></IconBase>;
const IconUsers      = (p) => <IconBase {...p}><circle cx="9" cy="8" r="3.2"/><path d="M3.5 20a5.5 5.5 0 0 1 11 0"/><path d="M16 5.2a3.2 3.2 0 0 1 0 5.6"/><path d="M17 15.4a5.5 5.5 0 0 1 3.5 4.6"/></IconBase>;

Object.assign(window, {
  IconBase, IconLogo, IconChat, IconBook, IconQuestion, IconStar, IconSpark,
  IconLoop, IconCheck, IconArrow, IconBolt, IconShield, IconGlobe, IconMenu,
  IconClose, IconChevron, IconDot, IconSearch, IconBell, IconHome, IconGift,
  IconProfessor, IconUpload, IconBoard, IconSlides, IconCompass,
  IconPlug, IconTrophy, IconUsers,
});