// icons.jsx — Lucide-style single-weight stroke icons + shared helpers for ITbyPeople.
// Stroke 1.75, round caps/joins to match the logo's arc. Exported to window.

const Icon = ({ name, size = 20, color = 'currentColor', strokeWidth = 1.75, style = {} }) => {
  const paths = {
    network: <><circle cx="12" cy="5" r="2.2" /><circle cx="5" cy="19" r="2.2" /><circle cx="19" cy="19" r="2.2" /><path d="M10.4 6.7 6.6 16.9M13.6 6.7l3.8 10.2M7.2 19h9.6" /></>,
    server: <><rect x="3.5" y="4" width="17" height="6.2" rx="1.6" /><rect x="3.5" y="13.8" width="17" height="6.2" rx="1.6" /><path d="M7 7.1h.01M7 16.9h.01" /></>,
    shield: <><path d="M12 3.2 5 6v5.4c0 4.1 2.9 7.1 7 8.4 4.1-1.3 7-4.3 7-8.4V6l-7-2.8Z" /><path d="m9.2 11.8 1.9 1.9 3.7-3.9" /></>,
    cloud: <><path d="M7 18.5a4 4 0 0 1-.4-7.98A5 5 0 0 1 16.5 9.5a3.5 3.5 0 0 1 .5 6.96" /><path d="M7 18.5h9.6" /></>,
    sparkles: <><path d="M12 4.2 13.4 9 18 10.4 13.4 11.8 12 16.6 10.6 11.8 6 10.4l4.6-1.4L12 4.2Z" /><path d="M18 4v3M19.5 5.5h-3" /></>,
    growth: <><path d="M4 19h16" /><path d="M5 15l4-4 3 3 6-7" /><path d="M18 7h-3.4M18 7v3.4" /></>,
    calendar: <><rect x="3.6" y="5" width="16.8" height="15.4" rx="2" /><path d="M3.6 9.4h16.8M8 3v3.6M16 3v3.6" /></>,
    message: <><path d="M5 5.5h14a1.5 1.5 0 0 1 1.5 1.5v8a1.5 1.5 0 0 1-1.5 1.5H9l-4 3.2V7A1.5 1.5 0 0 1 6.5 5.5Z" /></>,
    check: <><path d="m5 12.5 4.2 4.3L19 7" /></>,
    clock: <><circle cx="12" cy="12" r="8.2" /><path d="M12 7.6V12l3 1.8" /></>,
    arrowRight: <><path d="M5 12h14M13 6l6 6-6 6" /></>,
    phone: <><path d="M6.5 4.5h3l1.4 3.6-2 1.4a11 11 0 0 0 5 5l1.4-2 3.6 1.4v3a1.6 1.6 0 0 1-1.7 1.6A14.5 14.5 0 0 1 5 6.2 1.6 1.6 0 0 1 6.5 4.5Z" /></>,
    mail: <><rect x="3.6" y="5.6" width="16.8" height="12.8" rx="2" /><path d="m4.4 7 7.6 5.4L19.6 7" /></>,
    user: <><circle cx="12" cy="8.4" r="3.4" /><path d="M5.5 19.2a6.6 6.6 0 0 1 13 0" /></>,
    send: <><path d="M20 4 9.5 14.5M20 4l-6.5 16-3.5-7.5L2.5 9 20 4Z" /></>,
    sliders: <><path d="M4 7h10M18 7h2M4 17h2M10 17h10" /><circle cx="16" cy="7" r="2" /><circle cx="8" cy="17" r="2" /></>,
    alert: <><path d="M12 4.8 2.8 19.2h18.4L12 4.8Z" /><path d="M12 10v4M12 17h.01" /></>,
    zap: <><path d="M13 3 5 13h6l-1 8 8-10h-6l1-8Z" /></>,
    ticket: <><path d="M3.5 8a1.5 1.5 0 0 1 1.5-1.5h14A1.5 1.5 0 0 1 20.5 8v1.6a2 2 0 0 0 0 4v1.6a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 15v-1.6a2 2 0 0 0 0-4V8Z" /><path d="M14 6.5v11" /></>,
    chevronLeft: <><path d="M14 6l-6 6 6 6" /></>,
    chevronRight: <><path d="M10 6l6 6-6 6" /></>,
    x: <><path d="M6 6l12 12M18 6 6 18" /></>,
    dot: <><circle cx="12" cy="12" r="3" /></>,
    star: <><path d="M12 3.5l2.6 5.3 5.9.9-4.2 4.1 1 5.8-5.3-2.8-5.3 2.8 1-5.8L3.5 9.7l5.9-.9L12 3.5Z" /></>,
    monitor: <><rect x="3.5" y="4.5" width="17" height="11.4" rx="1.8" /><path d="M9 20h6M12 15.9V20" /></>,
    refresh: <><path d="M19 8a7 7 0 0 0-12.4-2.2M5 16a7 7 0 0 0 12.4 2.2" /><path d="M18.6 3.4V8H14M5.4 20.6V16H10" /></>,
    database: <><ellipse cx="12" cy="6" rx="7" ry="2.6" /><path d="M5 6v12c0 1.4 3.1 2.6 7 2.6s7-1.2 7-2.6V6" /><path d="M5 12c0 1.4 3.1 2.6 7 2.6s7-1.2 7-2.6" /></>,
    key: <><circle cx="7.6" cy="15.4" r="3.4" /><path d="m10 13 9.5-9.5M16.5 6 19 8.5M14 8.5l2.2 2.2" /></>,
    wifi: <><path d="M4.8 9.4a11 11 0 0 1 14.4 0M7.6 12.8a7 7 0 0 1 8.8 0M10.3 16.1a3 3 0 0 1 3.4 0" /><path d="M12 19.3h.01" /></>,
    layers: <><path d="M12 3.4 21 8l-9 4.6L3 8l9-4.6Z" /><path d="m3.4 12.4 8.6 4.4 8.6-4.4M3.4 16.2 12 20.6l8.6-4.4" /></>,
    compass: <><circle cx="12" cy="12" r="8.2" /><path d="m15.6 8.4-2.1 5.1-5.1 2.1 2.1-5.1 5.1-2.1Z" /></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
      strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"
      style={{ display: 'block', flexShrink: 0, ...style }} aria-hidden="true">
      {paths[name] || null}
    </svg>
  );
};

// Connected-dots / network constellation — the brand's one decorative motif.
// Static (no infinite loop on content); gentle one-shot fade handled by parent.
const Constellation = ({ opacity = 0.5, seed = 7 }) => {
  const W = 1200, H = 600;
  let s = seed;
  const rnd = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
  const nodes = Array.from({ length: 34 }, () => ({ x: rnd() * W, y: rnd() * H, r: 1.2 + rnd() * 1.8 }));
  const links = [];
  for (let i = 0; i < nodes.length; i++) {
    for (let j = i + 1; j < nodes.length; j++) {
      const d = Math.hypot(nodes[i].x - nodes[j].x, nodes[i].y - nodes[j].y);
      if (d < 150) links.push([nodes[i], nodes[j], 1 - d / 150]);
    }
  }
  return (
    <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="xMidYMid slice"
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity, pointerEvents: 'none' }} aria-hidden="true">
      {links.map(([a, b, w], i) => (
        <line key={i} x1={a.x} y1={a.y} x2={b.x} y2={b.y} stroke="#0D9E8A" strokeWidth="1" strokeOpacity={w * 0.5} />
      ))}
      {nodes.map((n, i) => (
        <circle key={i} cx={n.x} cy={n.y} r={n.r} fill="#0D9E8A" fillOpacity="0.9" />
      ))}
    </svg>
  );
};

// ---- AI helper: call Claude, expect JSON, parse robustly with a fallback. ----
async function askClaudeJSON(prompt, fallback) {
  try {
    const res = await fetch('/api/ai-chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ prompt }),
    });
    if (!res.ok) return fallback;
    const { text } = await res.json();
    return parseLooseJSON(text) || fallback;
  } catch {
    return fallback;
  }
}

function parseLooseJSON(text) {
  if (!text) return null;
  let t = String(text).trim();
  // strip code fences
  t = t.replace(/^```(?:json)?/i, '').replace(/```$/, '').trim();
  // grab first {...} block
  const start = t.indexOf('{');
  const end = t.lastIndexOf('}');
  if (start !== -1 && end !== -1) t = t.slice(start, end + 1);
  try { return JSON.parse(t); } catch (e) { return null; }
}

Object.assign(window, { Icon, Constellation, askClaudeJSON, parseLooseJSON });