// Abstract workgraph visualization — nodes + edges showing humans + AI agents flowing across tasks
const Workgraph = () => {
  const accent = 'var(--accent)';
  const ink = 'var(--ink)';
  const muted = 'var(--muted)';
  const surface = 'var(--surface)';
  const line = 'var(--line)';

  // Nodes: type h=human, a=agent, t=task, o=outcome
  const nodes = [
    { id: 'n1', type: 'h', x: 80,  y: 90,  label: 'Sales Rep' },
    { id: 'n2', type: 'a', x: 230, y: 60,  label: 'Lead qualifier' },
    { id: 'n3', type: 't', x: 380, y: 110, label: 'Discovery call' },
    { id: 'n4', type: 'h', x: 530, y: 70,  label: 'AE' },
    { id: 'n5', type: 'a', x: 680, y: 130, label: 'Notes agent' },

    { id: 'n6', type: 'a', x: 90,  y: 220, label: 'Intake bot' },
    { id: 'n7', type: 't', x: 240, y: 250, label: 'Triage' },
    { id: 'n8', type: 'h', x: 400, y: 240, label: 'Specialist' },
    { id: 'n9', type: 'a', x: 560, y: 280, label: 'Drafting agent' },
    { id: 'n10',type: 'o', x: 720, y: 250, label: 'Resolved' },

    { id: 'n11',type: 'h', x: 150, y: 380, label: 'Manager' },
    { id: 'n12',type: 't', x: 320, y: 400, label: 'Approval' },
    { id: 'n13',type: 'a', x: 480, y: 410, label: 'Compliance check' },
    { id: 'n14',type: 'o', x: 660, y: 380, label: 'Shipped' },
  ];

  const edges = [
    ['n1','n2'], ['n2','n3'], ['n3','n4'], ['n4','n5'], ['n5','n10'],
    ['n6','n7'], ['n7','n8'], ['n8','n9'], ['n9','n10'],
    ['n11','n12'], ['n12','n13'], ['n13','n14'],
    ['n2','n7'], ['n8','n12'], ['n4','n8'],
  ];

  const byId = Object.fromEntries(nodes.map(n => [n.id, n]));

  const nodeShape = (n) => {
    const r = 14;
    if (n.type === 'h') return <circle cx={n.x} cy={n.y} r={r} fill={surface} stroke={ink} strokeWidth="1.5" />;
    if (n.type === 'a') return <rect x={n.x-r} y={n.y-r} width={r*2} height={r*2} fill={ink} />;
    if (n.type === 'o') return <circle cx={n.x} cy={n.y} r={r-2} fill={accent} />;
    // task — diamond
    return <rect x={n.x-r} y={n.y-r} width={r*2} height={r*2} fill={surface} stroke={ink} strokeWidth="1.2" transform={`rotate(45 ${n.x} ${n.y})`} />;
  };

  return (
    <div className="workgraph">
      <div className="workgraph-frame">
        <div className="workgraph-chrome">
          <span className="wg-dot" /><span className="wg-dot" /><span className="wg-dot" />
          <div className="wg-title">Customer Operations</div>
          <div className="wg-meta">live · 14 nodes</div>
        </div>
        <svg viewBox="0 0 800 470" className="workgraph-svg" preserveAspectRatio="xMidYMid meet">
          <defs>
            <pattern id="grid" width="32" height="32" patternUnits="userSpaceOnUse">
              <path d="M32 0H0V32" fill="none" stroke={line} strokeWidth="0.5" />
            </pattern>
          </defs>
          <rect width="800" height="470" fill="url(#grid)" />

          {/* edges */}
          {edges.map(([a,b], i) => {
            const A = byId[a], B = byId[b];
            const mx = (A.x + B.x) / 2;
            const my = (A.y + B.y) / 2 - 20;
            return (
              <path
                key={i}
                d={`M ${A.x} ${A.y} Q ${mx} ${my} ${B.x} ${B.y}`}
                fill="none"
                stroke={muted}
                strokeWidth="1"
                strokeDasharray={B.type === 'o' ? '0' : '3 3'}
                opacity="0.7"
              />
            );
          })}

          {/* moving particle on a key edge */}
          <circle r="3" fill={accent}>
            <animateMotion dur="3.2s" repeatCount="indefinite" path="M 80 90 Q 155 50 230 60" />
          </circle>
          <circle r="3" fill={accent}>
            <animateMotion dur="4s" repeatCount="indefinite" begin="0.6s" path="M 240 250 Q 320 220 400 240" />
          </circle>
          <circle r="3" fill={accent}>
            <animateMotion dur="3.6s" repeatCount="indefinite" begin="1.2s" path="M 480 410 Q 570 380 660 380" />
          </circle>

          {/* nodes */}
          {nodes.map(n => (
            <g key={n.id}>
              {nodeShape(n)}
              <text x={n.x} y={n.y + 32} textAnchor="middle" fontSize="11" fill={ink} fontFamily="var(--font-mono)" letterSpacing="0.02em">
                {n.label}
              </text>
            </g>
          ))}

          {/* lane labels */}
          <text x="20" y="30" fontSize="10" fill={muted} fontFamily="var(--font-mono)" letterSpacing="0.12em">SALES</text>
          <text x="20" y="200" fontSize="10" fill={muted} fontFamily="var(--font-mono)" letterSpacing="0.12em">SUPPORT</text>
          <text x="20" y="360" fontSize="10" fill={muted} fontFamily="var(--font-mono)" letterSpacing="0.12em">FULFILLMENT</text>
        </svg>
        <div className="workgraph-legend">
          <span className="lg-item"><span className="lg-circle" /> Human</span>
          <span className="lg-item"><span className="lg-square" /> AI agent</span>
          <span className="lg-item"><span className="lg-diamond" /> Task</span>
          <span className="lg-item"><span className="lg-out" /> Outcome</span>
        </div>
      </div>
    </div>
  );
};

window.Workgraph = Workgraph;