// Small reusable visual widgets (icons, sparklines, funnel rows, etc.)
// Expose React hooks globally so all Babel scripts share them safely.
window.useState = React.useState;
window.useEffect = React.useEffect;
window.useRef = React.useRef;
window.useMemo = React.useMemo;



// ============ Icons (Lucide-style inline SVGs) ============
function Icon({ name, size = 16, strokeWidth = 2, className = "" }) {
  const paths = {
    home: <><path d="M3 9.5L12 3l9 6.5"/><path d="M5 9v11h14V9"/><path d="M9 20v-6h6v6"/></>,
    inbox: <><path d="M3 12h6l1 3h4l1-3h6"/><path d="M3 12V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v7"/><path d="M3 12v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/></>,
    pipeline: <><rect x="3" y="3" width="6" height="6" rx="1"/><rect x="3" y="15" width="6" height="6" rx="1"/><rect x="15" y="9" width="6" height="6" rx="1"/><path d="M9 6h6"/><path d="M9 18h6"/><path d="M12 6v12"/></>,
    campaign: <><path d="M3 11l18-7v16L3 13z"/><path d="M7 12v4"/><path d="M11 11v5"/></>,
    persona: <><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></>,
    analytics: <><path d="M4 19V5"/><path d="M4 19h16"/><path d="M8 15v-4"/><path d="M12 15V8"/><path d="M16 15v-6"/></>,
    settings: <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h0a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h0a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v0a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></>,
    bell: <><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"/></>,
    search: <><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></>,
    plus: <><path d="M12 5v14M5 12h14"/></>,
    send: <><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4z"/></>,
    reply: <><path d="M9 17l-5-5 5-5"/><path d="M4 12h11a5 5 0 0 1 5 5v4"/></>,
    sparkles: <><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="m5.6 18.4 2.1-2.1"/><path d="m16.3 7.7 2.1-2.1"/></>,
    arrow_up: <><path d="m18 15-6-6-6 6"/></>,
    arrow_down: <><path d="m6 9 6 6 6-6"/></>,
    arrow_right: <><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></>,
    pause: <><rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/></>,
    play: <><polygon points="6 3 20 12 6 21 6 3"/></>,
    filter: <><path d="M22 3H2l8 9.5V21l4-2v-6.5z"/></>,
    download: <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M7 10l5 5 5-5"/><path d="M12 15V3"/></>,
    refresh: <><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/></>,
    check: <><path d="M20 6 9 17l-5-5"/></>,
    x: <><path d="M18 6 6 18"/><path d="M6 6l12 12"/></>,
    flag: <><path d="M4 22V4"/><path d="M4 4h12l-2 4 2 4H4"/></>,
    sliders: <><path d="M21 4H14"/><path d="M10 4H3"/><path d="M21 12H12"/><path d="M8 12H3"/><path d="M21 20H16"/><path d="M12 20H3"/><circle cx="12" cy="4" r="2"/><circle cx="10" cy="12" r="2"/><circle cx="14" cy="20" r="2"/></>,
    bolt: <><path d="m13 2-3 7h7l-9 13 3-9H4l9-11z"/></>,
    user_plus: <><circle cx="9" cy="8" r="4"/><path d="M2 21c0-4 3-7 7-7s7 3 7 7"/><path d="M19 8v6"/><path d="M16 11h6"/></>,
    clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 7 9-7"/></>,
    pen: <><path d="M12 19l7-7 3 3-7 7H12v-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/></>,
    sparkle: <><path d="M12 3l1.9 5.6L19 10.5l-5.1 1.9L12 18l-1.9-5.6L5 10.5l5.1-1.9z"/></>,
    cpu: <><rect x="5" y="5" width="14" height="14" rx="2"/><path d="M9 9h6v6H9z"/><path d="M9 2v3"/><path d="M15 2v3"/><path d="M9 19v3"/><path d="M15 19v3"/><path d="M2 9h3"/><path d="M2 15h3"/><path d="M19 9h3"/><path d="M19 15h3"/></>,
    log: <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M8 13h8"/><path d="M8 17h5"/></>,
    menu: <><path d="M3 6h18"/><path d="M3 12h18"/><path d="M3 18h18"/></>,
    arrow_left: <><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" className={className}>
      {paths[name] || null}
    </svg>
  );
}

// ============ Sparkline ============
function Sparkline({ data, height = 40, color }) {
  if (!data || !data.length) return null;
  const w = 100, h = 100;
  const min = Math.min(...data), max = Math.max(...data);
  const range = max - min || 1;
  const points = data.map((v, i) => [
    (i / (data.length - 1)) * w,
    h - ((v - min) / range) * h * 0.9 - 5,
  ]);
  const line = points.map((p, i) => `${i ? 'L' : 'M'}${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(' ');
  const area = `${line} L${w},${h} L0,${h} Z`;
  return (
    <svg className="spark" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{ height }}>
      <defs>
        <linearGradient id="sg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={color || "var(--primary)"} stopOpacity="0.25"/>
          <stop offset="100%" stopColor={color || "var(--primary)"} stopOpacity="0"/>
        </linearGradient>
      </defs>
      <path d={area} fill="url(#sg)"/>
      <path d={line} className="line" style={{ stroke: color || "var(--primary)" }}/>
      {/* Last-point dot */}
      <circle cx={points[points.length-1][0]} cy={points[points.length-1][1]} r="1.5" fill={color || "var(--primary)"}/>
    </svg>
  );
}

// ============ Funnel ============
function Funnel({ rows }) {
  const max = rows[0].value;
  return (
    <div className="funnel">
      {rows.map((r) => (
        <div key={r.label} className="funnel-row">
          <div className="label">{r.label}</div>
          <div className="bar" style={{ width: `${(r.value / max) * 100}%` }} />
          <div className="v">{r.value.toLocaleString()}</div>
          <div className="pct">{(r.pct * 100).toFixed(r.pct < 0.01 ? 2 : 1)}%</div>
        </div>
      ))}
    </div>
  );
}

// ============ Status badge ============
function Status({ kind, children }) {
  return <span className={`status dot ${kind}`}>{children || kind}</span>;
}

// ============ Tiny ring meter ============
function Ring({ pct = 0.5, size = 36, stroke = 4, color = "var(--primary)", label }) {
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const off = c * (1 - pct);
  return (
    <div style={{ position: "relative", width: size, height: size, display: "inline-block" }}>
      <svg width={size} height={size}>
        <circle cx={size/2} cy={size/2} r={r} stroke="var(--border)" strokeWidth={stroke} fill="none"/>
        <circle cx={size/2} cy={size/2} r={r} stroke={color} strokeWidth={stroke} fill="none"
                strokeDasharray={c} strokeDashoffset={off} strokeLinecap="round"
                transform={`rotate(-90 ${size/2} ${size/2})`}
                style={{ transition: "stroke-dashoffset 600ms var(--ease)" }}/>
      </svg>
      {label && (
        <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center",
                      fontSize: 10, fontFamily: "var(--font-mono)", fontWeight: 600 }}>{label}</div>
      )}
    </div>
  );
}

Object.assign(window, { Icon, Sparkline, Funnel, Status, Ring });