/* AnimatedPipelineHero.jsx
   Pipeline: data.csv → bot.py → automation → dashboard → insight */
function AnimatedPipelineHero({ speed = 1 }) {
  const reduced = useReducedMotion();

  const cy = 120;
  const NODES = [
    { x: 24,  w: 130, kind: "file", label: "data.csv",   sub: "input",   tint: "var(--blue)"  },
    { x: 210, w: 130, kind: "code", label: "bot.py",     sub: "extract", tint: "var(--blue)"  },
    { x: 396, w: 148, kind: "cog",  label: "automation", sub: "process", tint: "var(--green)" },
    { x: 600, w: 148, kind: "dash", label: "dashboard",  sub: "render",  tint: "var(--blue)"  },
    { x: 806, w: 130, kind: "out",  label: "insight",    sub: "deliver", tint: "var(--green)" },
  ];
  const DUR = 7 / speed;
  const DOTS = 6;
  const lineX0 = 154, lineX1 = 806;

  return (
    <div className="panel" style={{ overflow: "hidden" }}>
      <div className="panel-bar">
        <div className="dots"><i></i><i></i><i></i></div>
        <span className="title">pipeline.flow — loop ativo</span>
        <span className="title mono" style={{ marginLeft: "auto", color: "var(--green)" }}>● live</span>
      </div>
      <svg viewBox="0 0 960 240" style={{ display: "block", width: "100%", height: "auto" }}
           role="img" aria-label="Pipeline: data.csv → bot.py → automation → dashboard → insight">

        {/* trilho */}
        <line className="pipe-line" x1={lineX0} y1={cy} x2={lineX1} y2={cy} />
        <path id="heroFlow" d={`M${lineX0},${cy} L${lineX1},${cy}`} fill="none" stroke="none" />

        {/* setas nos vãos */}
        {[192, 378, 582, 786].map((x, i) => (
          <path key={i} d={`M${x},${cy - 4} l6,4 l-6,4`} fill="none"
                stroke="var(--muted)" strokeWidth="1.6" strokeLinecap="round"
                strokeLinejoin="round" opacity="0.55" />
        ))}

        {/* pontos viajando */}
        {!reduced && Array.from({ length: DOTS }).map((_, i) => {
          const tint = i % 2 === 0 ? "var(--green)" : "var(--blue)";
          return (
            <circle key={i} r="3.5" fill={tint}
                    style={{ filter: `drop-shadow(0 0 5px ${tint})` }}>
              <animateMotion dur={DUR + "s"} repeatCount="indefinite"
                             begin={(-(DUR / DOTS) * i) + "s"}>
                <mpath href="#heroFlow" />
              </animateMotion>
            </circle>
          );
        })}

        {/* nós */}
        {NODES.map((n, i) => {
          const h = n.kind === "dash" ? 100 : 64;
          const y = cy - h / 2;
          return (
            <g key={i} className="pipe-node">
              <rect className="body" x={n.x} y={y} width={n.w} height={h} rx="10" />
              <rect x={n.x + 12} y={y + 12} width="8" height="8" rx="2" fill={n.tint} />

              {/* nós simples */}
              {n.kind !== "dash" && n.kind !== "out" && (
                <>
                  <text className="pipe-label" x={n.x + 12} y={cy + 6}>{n.label}</text>
                  <text className="pipe-sub" x={n.x + n.w - 10} y={y + 20}
                        textAnchor="end">{n.sub}</text>
                </>
              )}

              {/* engrenagem */}
              {n.kind === "cog" && !reduced && (
                <g className="cog">
                  <circle cx={n.x + n.w - 20} cy={cy + 14} r="6" fill="none"
                          stroke="var(--green)" strokeWidth="2" strokeDasharray="3 3" />
                </g>
              )}

              {/* dashboard */}
              {n.kind === "dash" && (
                <g>
                  <text className="pipe-sub" x={n.x + 28} y={y + 20}>dashboard</text>
                  <line x1={n.x + 12} y1={y + h - 14} x2={n.x + n.w - 12} y2={y + h - 14}
                        stroke="var(--border)" strokeWidth="1" />
                  {[0, 1, 2, 3].map((b) => {
                    const bw = 18, gap = 10;
                    const bx = n.x + 14 + b * (bw + gap);
                    const baseY = y + h - 14;
                    const maxH = 44;
                    return (
                      <rect key={b} className={`bar b${b + 1}`} x={bx}
                            y={baseY - maxH} width={bw} height={maxH} rx="2" />
                    );
                  })}
                </g>
              )}

              {/* insight */}
              {n.kind === "out" && (
                <g>
                  <text className="pipe-label" x={n.x + 12} y={cy + 6}>insight</text>
                  <text className="pipe-sub" x={n.x + n.w - 10} y={y + 20}
                        textAnchor="end" fill="var(--green)">+38%</text>
                  <path className="spark"
                        d={`M${n.x + 12},${cy + 14} L${n.x + 34},${cy + 6} L${n.x + 58},${cy + 16} L${n.x + 82},${cy - 4} L${n.x + 108},${cy - 10}`}
                        fill="none" stroke="var(--green)" strokeWidth="2"
                        strokeLinecap="round" strokeLinejoin="round" />
                </g>
              )}
            </g>
          );
        })}
      </svg>
    </div>
  );
}

Object.assign(window, { AnimatedPipelineHero });