// Inline SVG icons (stroke style)
const Icon = ({ d, size = 18, fill, stroke = 'currentColor', sw = 1.7, children }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill || 'none'} stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
    {d ? <path d={d} /> : children}
  </svg>
);

const IconHome = (p) => <Icon {...p}><path d="M3 11l9-8 9 8" /><path d="M5 9.5V21h14V9.5" /></Icon>;
const IconPalette = (p) => <Icon {...p}><path d="M12 22a10 10 0 1 1 10-10c0 2.21-1.79 4-4 4h-1a2 2 0 0 0-2 2v1c0 1.66-1.34 3-3 3z" /><circle cx="7.5" cy="10.5" r="1" fill="currentColor" /><circle cx="11.5" cy="6.5" r="1" fill="currentColor" /><circle cx="16.5" cy="9.5" r="1" fill="currentColor" /></Icon>;
const IconFolder = (p) => <Icon {...p}><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /></Icon>;
const IconBox = (p) => <Icon {...p}><path d="M3 7l9-4 9 4-9 4-9-4z" /><path d="M3 7v10l9 4 9-4V7" /><path d="M12 11v10" /></Icon>;
const IconChart = (p) => <Icon {...p}><path d="M4 19V5" /><path d="M4 19h16" /><path d="M8 15v-4" /><path d="M12 15V9" /><path d="M16 15v-7" /></Icon>;
const IconUser = (p) => <Icon {...p}><circle cx="12" cy="8" r="4" /><path d="M4 21c1.5-4 5-6 8-6s6.5 2 8 6" /></Icon>;
const IconGear = (p) => <Icon {...p}><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9c.2.6.7 1 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z" /></Icon>;
const IconLogout = (p) => <Icon {...p}><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" /><path d="M16 17l5-5-5-5" /><path d="M21 12H9" /></Icon>;
const IconSearch = (p) => <Icon {...p}><circle cx="11" cy="11" r="7" /><path d="M21 21l-4.3-4.3" /></Icon>;
const IconBell = (p) => <Icon {...p}><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" /><path d="M10 21a2 2 0 0 0 4 0" /></Icon>;
const IconHelp = (p) => <Icon {...p}><circle cx="12" cy="12" r="10" /><path d="M9.5 9a2.5 2.5 0 1 1 3.5 2.3c-.9.4-1 1-1 1.7" /><circle cx="12" cy="17" r="0.6" fill="currentColor" /></Icon>;
const IconChev = (p) => <Icon {...p}><path d="M6 9l6 6 6-6" /></Icon>;
const IconChevR = (p) => <Icon {...p}><path d="M9 6l6 6-6 6" /></Icon>;
const IconPlus = (p) => <Icon {...p}><path d="M12 5v14M5 12h14" /></Icon>;
const IconArrowUp = (p) => <Icon {...p}><path d="M7 14l5-5 5 5" /></Icon>;
const IconArrowDown = (p) => <Icon {...p}><path d="M7 10l5 5 5-5" /></Icon>;
const IconStar = (p) => <Icon {...p} fill="currentColor" sw={0}><path d="M12 2l3 7 7 .8-5.2 4.8 1.5 7L12 18l-6.3 3.6 1.5-7L2 9.8 9 9z" /></Icon>;
const IconQr = (p) => <Icon {...p}><rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="3" y="14" width="7" height="7" /><path d="M14 14h3v3h-3z" /><path d="M20 14v3" /><path d="M14 20h3" /><path d="M20 20v1" /></Icon>;
const IconSparkles = (p) => <Icon {...p}><path d="M12 3v6M9 6h6M5 15v4M3 17h4M17 13l1 3 3 1-3 1-1 3-1-3-3-1 3-1z" /></Icon>;
const IconCalendar = (p) => <Icon {...p}><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M3 9h18" /><path d="M8 3v4M16 3v4" /></Icon>;
const IconMap = (p) => <Icon {...p}><path d="M9 4L3 6v14l6-2 6 2 6-2V4l-6 2z" /><path d="M9 4v14M15 6v14" /></Icon>;
const IconDownload = (p) => <Icon {...p}><path d="M12 4v12" /><path d="M7 11l5 5 5-5" /><path d="M5 20h14" /></Icon>;

const Sparkline = ({ data, color = '#C8E530', w = 80, h = 32 }) => {
  const max = Math.max(...data);
  const min = Math.min(...data);
  const range = max - min || 1;
  const pts = data.map((v, i) => {
    const x = (i / (data.length - 1)) * w;
    const y = h - ((v - min) / range) * (h - 4) - 2;
    return `${x},${y}`;
  }).join(' ');
  return (
    <svg className="spark-svg" width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
      <polyline fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" points={pts} />
    </svg>
  );
};

const Donut = ({ data, size = 110, thick = 18 }) => {
  const total = data.reduce((s, d) => s + d.pct, 0);
  const r = (size - thick) / 2;
  const c = 2 * Math.PI * r;
  let offset = 0;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ transform: 'rotate(-90deg)' }}>
      <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="#262626" strokeWidth={thick} />
      {data.map((d, i) => {
        const len = (d.pct / total) * c;
        const el = <circle key={i} cx={size/2} cy={size/2} r={r} fill="none" stroke={d.color} strokeWidth={thick} strokeDasharray={`${len} ${c - len}`} strokeDashoffset={-offset} />;
        offset += len;
        return el;
      })}
    </svg>
  );
};

Object.assign(window, { Icon, IconHome, IconPalette, IconFolder, IconBox, IconChart, IconUser, IconGear, IconLogout, IconSearch, IconBell, IconHelp, IconChev, IconChevR, IconPlus, IconArrowUp, IconArrowDown, IconStar, IconQr, IconSparkles, IconCalendar, IconMap, IconDownload, Sparkline, Donut });