// components/icons.jsx — SVG icon components, Lucide-style 24px stroke

const svgBase = (size, className, style, children) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"
       className={className} style={{ flexShrink: 0, display: 'inline-block', ...style }}
       aria-hidden="true">
    {children}
  </svg>
);

const IcoShield = ({ size=18, className='', style={} }) => svgBase(size, className, style,
  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
);

const IcoKey = ({ size=18, className='', style={} }) => svgBase(size, className, style,
  <><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" /></>
);

const IcoScroll = ({ size=18, className='', style={} }) => svgBase(size, className, style,
  <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><polyline points="14 2 14 8 20 8" /><line x1="16" y1="13" x2="8" y2="13" /><line x1="16" y1="17" x2="8" y2="17" /><polyline points="10 9 9 9 8 9" /></>
);

const IcoAlertTriangle = ({ size=18, className='', style={} }) => svgBase(size, className, style,
  <><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" /><line x1="12" y1="9" x2="12" y2="13" /><line x1="12" y1="17" x2="12.01" y2="17" /></>
);

const IcoBarChart = ({ size=18, className='', style={} }) => svgBase(size, className, style,
  <><line x1="18" y1="20" x2="18" y2="10" /><line x1="12" y1="20" x2="12" y2="4" /><line x1="6" y1="20" x2="6" y2="14" /></>
);

const IcoLayers = ({ size=18, className='', style={} }) => svgBase(size, className, style,
  <><polygon points="12 2 2 7 12 12 22 7 12 2" /><polyline points="2 17 12 22 22 17" /><polyline points="2 12 12 17 22 12" /></>
);

const IcoGithub = ({ size=18, className='', style={} }) => svgBase(size, className, style,
  <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
);

const IcoTerminal = ({ size=18, className='', style={} }) => svgBase(size, className, style,
  <><polyline points="4 17 10 11 4 5" /><line x1="12" y1="19" x2="20" y2="19" /></>
);

const IcoCheck = ({ size=18, className='', style={} }) => svgBase(size, className, style,
  <polyline points="20 6 9 17 4 12" />
);

const IcoCheckCircle = ({ size=18, className='', style={} }) => svgBase(size, className, style,
  <><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" /><polyline points="22 4 12 14.01 9 11.01" /></>
);

const IcoArrowRight = ({ size=18, className='', style={} }) => svgBase(size, className, style,
  <><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></>
);

const IcoX = ({ size=18, className='', style={} }) => svgBase(size, className, style,
  <><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></>
);

const IcoMenu = ({ size=18, className='', style={} }) => svgBase(size, className, style,
  <><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="18" x2="21" y2="18" /></>
);

const IcoCopy = ({ size=18, className='', style={} }) => svgBase(size, className, style,
  <><rect x="9" y="9" width="13" height="13" rx="2" ry="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" /></>
);

const IcoZap = ({ size=18, className='', style={} }) => svgBase(size, className, style,
  <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
);

const IcoLock = ({ size=18, className='', style={} }) => svgBase(size, className, style,
  <><rect x="3" y="11" width="18" height="11" rx="2" ry="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></>
);

const IcoCode = ({ size=18, className='', style={} }) => svgBase(size, className, style,
  <><polyline points="16 18 22 12 16 6" /><polyline points="8 6 2 12 8 18" /></>
);

const IcoStar = ({ size=18, className='', style={} }) => svgBase(size, className, style,
  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
);

const IcoExternalLink = ({ size=18, className='', style={} }) => svgBase(size, className, style,
  <><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /><polyline points="15 3 21 3 21 9" /><line x1="10" y1="14" x2="21" y2="3" /></>
);

const IcoSearch = ({ size=18, className='', style={} }) => svgBase(size, className, style,
  <><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /></>
);

const IcoBookOpen = ({ size=18, className='', style={} }) => svgBase(size, className, style,
  <><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" /><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" /></>
);

const IcoServer = ({ size=18, className='', style={} }) => svgBase(size, className, style,
  <><rect x="2" y="2" width="20" height="8" rx="2" ry="2" /><rect x="2" y="14" width="20" height="8" rx="2" ry="2" /><line x1="6" y1="6" x2="6.01" y2="6" /><line x1="6" y1="18" x2="6.01" y2="18" /></>
);

const IcoActivity = ({ size=18, className='', style={} }) => svgBase(size, className, style,
  <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
);

const IcoUsers = ({ size=18, className='', style={} }) => svgBase(size, className, style,
  <><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></>
);

const IcoChevronRight = ({ size=18, className='', style={} }) => svgBase(size, className, style,
  <polyline points="9 18 15 12 9 6" />
);

const IcoChevronDown = ({ size=18, className='', style={} }) => svgBase(size, className, style,
  <polyline points="6 9 12 15 18 9" />
);

const IcoGlobe = ({ size=18, className='', style={} }) => svgBase(size, className, style,
  <><circle cx="12" cy="12" r="10" /><line x1="2" y1="12" x2="22" y2="12" /><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" /></>
);

const IcoCpu = ({ size=18, className='', style={} }) => svgBase(size, className, style,
  <><rect x="4" y="4" width="16" height="16" rx="2" /><rect x="9" y="9" width="6" height="6" /><line x1="9" y1="1" x2="9" y2="4" /><line x1="15" y1="1" x2="15" y2="4" /><line x1="9" y1="20" x2="9" y2="23" /><line x1="15" y1="20" x2="15" y2="23" /><line x1="20" y1="9" x2="23" y2="9" /><line x1="20" y1="14" x2="23" y2="14" /><line x1="1" y1="9" x2="4" y2="9" /><line x1="1" y1="14" x2="4" y2="14" /></>
);

const IcoPackage = ({ size=18, className='', style={} }) => svgBase(size, className, style,
  <><line x1="16.5" y1="9.4" x2="7.5" y2="4.21" /><path d="M21 16V8a2 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" /><polyline points="3.27 6.96 12 12.01 20.73 6.96" /><line x1="12" y1="22.08" x2="12" y2="12" /></>
);

Object.assign(window, {
  IcoShield, IcoKey, IcoScroll, IcoAlertTriangle, IcoBarChart, IcoLayers,
  IcoGithub, IcoTerminal, IcoCheck, IcoCheckCircle, IcoArrowRight, IcoX,
  IcoMenu, IcoCopy, IcoZap, IcoLock, IcoCode, IcoStar, IcoExternalLink,
  IcoSearch, IcoBookOpen, IcoServer, IcoActivity, IcoUsers,
  IcoChevronRight, IcoChevronDown, IcoGlobe, IcoCpu, IcoPackage,
});