// Animated workflow diagram — pure SVG so connections always hit node edges
const WorkflowDiagram = () => {
  // Layout constants (SVG coords)
  const NODE_W = 110;
  const NODE_H = 32;
  const VB_W = 580;
  const VB_H = 360;

  const nodes = [
    { id: 'hubspot',  x: 20,  y: 60,  label: 'HUBSPOT',   color: '#ff7a59', type: 'src' },
    { id: 'gmail',    x: 20,  y: 165, label: 'GMAIL',     color: '#ea4335', type: 'src' },
    { id: 'stripe',   x: 20,  y: 270, label: 'STRIPE',    color: '#635bff', type: 'src' },
    { id: 'ai',       x: 235, y: 110, label: 'AI_PARSE',  color: '#25d4f2', type: 'logic' },
    { id: 'rules',    x: 235, y: 215, label: 'RULES_ENG', color: '#25d4f2', type: 'logic' },
    { id: 'sheets',   x: 450, y: 60,  label: 'SHEETS',    color: '#0f9d58', type: 'dst' },
    { id: 'slack',    x: 450, y: 165, label: 'SLACK',     color: '#a154b3', type: 'dst' },
    { id: 'notion',   x: 450, y: 270, label: 'NOTION',    color: '#ffffff', type: 'dst' },
  ];
  const byId = Object.fromEntries(nodes.map(n => [n.id, n]));

  // Edge connection points: right-edge of source -> left-edge of target
  const edges = [
    ['hubspot', 'ai'],
    ['gmail', 'ai'],
    ['stripe', 'rules'],
    ['gmail', 'rules'],
    ['ai', 'sheets'],
    ['ai', 'slack'],
    ['rules', 'slack'],
    ['rules', 'notion'],
  ];

  const edgeGeom = edges.map(([a, b]) => {
    const na = byId[a], nb = byId[b];
    const x1 = na.x + NODE_W;          // right edge of source
    const y1 = na.y + NODE_H / 2;
    const x2 = nb.x;                    // left edge of target
    const y2 = nb.y + NODE_H / 2;
    const dx = (x2 - x1) * 0.5;
    const d = `M ${x1} ${y1} C ${x1 + dx} ${y1}, ${x2 - dx} ${y2}, ${x2} ${y2}`;
    return { d, x1, y1, x2, y2 };
  });

  return (
    <div style={{ position: 'relative', width: '100%' }}>
      <svg
        viewBox={`0 0 ${VB_W} ${VB_H}`}
        preserveAspectRatio="xMidYMid meet"
        style={{ width: '100%', height: 'auto', display: 'block' }}
      >
        {/* Connection paths */}
        {edgeGeom.map((e, i) => (
          <g key={i}>
            <path d={e.d} stroke="rgba(255,255,255,0.1)" strokeWidth="1.2" fill="none" />
            <path
              d={e.d}
              stroke="#25d4f2"
              strokeWidth="1.2"
              fill="none"
              strokeDasharray="4 6"
              opacity="0.55"
              className="wf-line"
            />
          </g>
        ))}

        {/* Traveling packets */}
        {edgeGeom.map((e, i) => (
          <circle
            key={`p-${i}`}
            r="2.5"
            fill="#25d4f2"
            style={{
              offsetPath: `path("${e.d}")`,
              animation: `travel 2.6s ${(i * 0.32) % 2.6}s linear infinite`,
              filter: 'drop-shadow(0 0 4px #25d4f2)'
            }}
          />
        ))}

        {/* Nodes */}
        {nodes.map(n => {
          const isLogic = n.type === 'logic';
          return (
            <g key={n.id} transform={`translate(${n.x}, ${n.y})`}>
              <rect
                width={NODE_W}
                height={NODE_H}
                rx="8"
                ry="8"
                fill={isLogic ? 'rgba(37,212,242,0.06)' : 'var(--surface)'}
                stroke={isLogic ? 'rgba(37,212,242,0.45)' : 'var(--line-strong)'}
                strokeWidth="1"
                style={isLogic ? { filter: 'drop-shadow(0 0 8px rgba(37,212,242,0.25))' } : undefined}
              />
              <circle cx="14" cy={NODE_H / 2} r="3" fill={n.color} style={{ filter: `drop-shadow(0 0 4px ${n.color})` }} />
              <text
                x="26"
                y={NODE_H / 2 + 3.5}
                fill="var(--fg)"
                style={{
                  fontFamily: 'var(--font-mono)',
                  fontSize: 10,
                  letterSpacing: '0.06em',
                  textTransform: 'uppercase',
                  fontWeight: 500
                }}
              >
                {n.label}
              </text>
            </g>
          );
        })}
      </svg>

      {/* Corner annotations (HTML overlay) */}
      <div style={{ position: 'absolute', top: -22, left: '0%', fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-mute)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
        // sources
      </div>
      <div style={{ position: 'absolute', top: -22, left: '41%', fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-mute)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
        // workflow
      </div>
      <div style={{ position: 'absolute', top: -22, left: '78%', fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-mute)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
        // destinations
      </div>
    </div>
  );
};

Object.assign(window, { WorkflowDiagram });