// Animated workflow diagram — nodes with pulsing edges firing
const WorkflowDiagram = ({ motion = "standard" }) => {
  const speed = motion === "calm" ? 1 : motion === "hyper" ? 2.5 : 1.5;
  // Node graph: trigger → branch (criteria) → 3 paths
  const nodes = [
    { id: "form", x: 95,  y: 200, label: "Form Submission", kind: "trigger", color: "#06d6a0", sub: "/contact" },
    { id: "score", x: 280, y: 200, label: "Lead Score", kind: "logic", color: "#ffd23f", sub: "if > 60" },
    { id: "owner", x: 500, y: 100, label: "Assign Owner", kind: "action", color: "#ff8c42", sub: "round-robin" },
    { id: "seq",   x: 500, y: 200, label: "Enroll Sequence", kind: "action", color: "#ff8c42", sub: "nurture-saas" },
    { id: "stage", x: 500, y: 300, label: "Set Lifecycle", kind: "action", color: "#ff8c42", sub: "MQL" },
    { id: "slack", x: 720, y: 100, label: "Notify Slack", kind: "action", color: "#ff3366", sub: "#sales-alerts" },
    { id: "wait",  x: 720, y: 200, label: "Wait 2d", kind: "delay", color: "#3a86ff", sub: "branch" },
    { id: "sf",    x: 720, y: 300, label: "Sync Salesforce", kind: "action", color: "#ff3366", sub: "API v2" },
  ];
  const edges = [
    { from: "form", to: "score", delay: 0 },
    { from: "score", to: "owner", delay: 0.6 },
    { from: "score", to: "seq", delay: 0.9 },
    { from: "score", to: "stage", delay: 1.2 },
    { from: "owner", to: "slack", delay: 1.6 },
    { from: "seq", to: "wait", delay: 1.9 },
    { from: "stage", to: "sf", delay: 2.2 },
  ];
  const nodeMap = Object.fromEntries(nodes.map(n => [n.id, n]));
  const totalDur = 4 / speed;

  return (
    <div className="workflow-wrap">
      <style>{`
        .workflow-wrap {
          width: 100%;
          background: var(--bg-card);
          border: 1px solid var(--line);
          border-radius: 18px;
          padding: 32px;
          position: relative;
          overflow: hidden;
        }
        .workflow-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
          padding-bottom: 16px;
          border-bottom: 1px solid var(--line);
        }
        .workflow-title {
          font-family: var(--mono);
          font-size: 12px;
          color: var(--ink-dim);
          letter-spacing: 0.06em;
          text-transform: uppercase;
        }
        .workflow-status {
          display: flex; gap: 12px; align-items: center;
          font-family: var(--mono);
          font-size: 11px;
          color: var(--ink-mute);
        }
        .workflow-status .dot {
          width: 6px; height: 6px;
          border-radius: 50%;
          background: var(--c-green);
          animation: pulse 2s ease-in-out infinite;
          box-shadow: 0 0 8px var(--c-green);
        }
        .workflow-svg {
          width: 100%;
          height: 420px;
          display: block;
        }
        .wf-node-rect {
          fill: var(--bg-elev);
          stroke: var(--line-2);
          stroke-width: 1;
        }
        .wf-node-glow {
          fill: none;
          stroke-width: 1;
          opacity: 0;
        }
        @keyframes nodeGlow {
          0% { opacity: 0; stroke-width: 1; }
          25% { opacity: 1; stroke-width: 2.5; }
          100% { opacity: 0; stroke-width: 1; }
        }
        .wf-edge {
          fill: none;
          stroke: var(--line-2);
          stroke-width: 1.5;
        }
        .wf-edge-pulse {
          fill: none;
          stroke-width: 2.5;
          stroke-linecap: round;
          stroke-dasharray: 30 200;
        }
        @keyframes edgeFire {
          0% { stroke-dashoffset: 230; opacity: 0; }
          10% { opacity: 1; }
          90% { opacity: 1; }
          100% { stroke-dashoffset: 0; opacity: 0; }
        }
        .wf-node-icon {
          font-family: var(--mono);
          font-size: 9px;
          fill: var(--ink-mute);
          text-transform: uppercase;
          letter-spacing: 0.08em;
        }
        .wf-node-label {
          fill: var(--ink);
          font-size: 12px;
          font-family: var(--sans);
          font-weight: 500;
        }
        .wf-node-sub {
          fill: var(--ink-mute);
          font-size: 10px;
          font-family: var(--mono);
        }
        .wf-grid {
          stroke: var(--line);
          stroke-width: 0.5;
          opacity: 0.4;
        }
      `}</style>
      <div className="workflow-header">
        <div className="workflow-title">workflows / mql-routing.json</div>
        <div className="workflow-status">
          <span className="dot"></span>
          <span>LIVE · 12,408 enrollments</span>
        </div>
      </div>
      <svg className="workflow-svg" viewBox="0 0 820 400" preserveAspectRatio="xMidYMid meet">
        {/* grid */}
        <defs>
          <pattern id="wfgrid" width="20" height="20" patternUnits="userSpaceOnUse">
            <path className="wf-grid" d="M 20 0 L 0 0 0 20" fill="none" />
          </pattern>
          <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M 0 0 L 10 5 L 0 10 z" fill="rgba(255,255,255,0.25)" />
          </marker>
        </defs>
        <rect width="820" height="400" fill="url(#wfgrid)" />

        {/* edges */}
        {edges.map((e, i) => {
          const a = nodeMap[e.from], b = nodeMap[e.to];
          const x1 = a.x + 80, y1 = a.y;
          const x2 = b.x - 80, y2 = b.y;
          const mx = (x1 + x2) / 2;
          const path = `M ${x1} ${y1} C ${mx} ${y1}, ${mx} ${y2}, ${x2} ${y2}`;
          return (
            <g key={i}>
              <path className="wf-edge" d={path} markerEnd="url(#arrow)" />
              <path
                className="wf-edge-pulse"
                d={path}
                stroke={b.color}
                style={{
                  animation: `edgeFire ${totalDur}s ease-in-out infinite ${e.delay / speed}s`,
                  filter: `drop-shadow(0 0 4px ${b.color})`,
                }}
              />
            </g>
          );
        })}

        {/* nodes */}
        {nodes.map((n, i) => {
          const w = 160, h = 56;
          const x = n.x - w / 2, y = n.y - h / 2;
          const fireDelay = (edges.find(e => e.to === n.id)?.delay || 0) + 0.3;
          return (
            <g key={n.id}>
              <rect className="wf-node-rect" x={x} y={y} width={w} height={h} rx={8} />
              <rect
                className="wf-node-glow"
                x={x}
                y={y}
                width={w}
                height={h}
                rx={8}
                stroke={n.color}
                style={{
                  animation: `nodeGlow ${totalDur}s ease-in-out infinite ${fireDelay / speed}s`,
                  filter: `drop-shadow(0 0 6px ${n.color})`,
                }}
              />
              {/* corner indicator */}
              <circle cx={x + 12} cy={y + 12} r={3} fill={n.color} />
              <text className="wf-node-icon" x={x + 22} y={y + 15}>{n.kind}</text>
              <text className="wf-node-label" x={x + 12} y={y + 32}>{n.label}</text>
              <text className="wf-node-sub" x={x + 12} y={y + 46}>{n.sub}</text>
            </g>
          );
        })}
      </svg>
    </div>
  );
};

window.WorkflowDiagram = WorkflowDiagram;