// Topology / data-flow background for hero
const Topology = () => {
  // Stable network of nodes connected by curved paths.
  const nodes = [
    { id: "edge-1", x: 90, y: 110, kind: "edge", label: "edge·fra" },
    { id: "edge-2", x: 470, y: 88, kind: "edge", label: "edge·sgp" },
    { id: "core-1", x: 200, y: 240, kind: "core" },
    { id: "core-2", x: 380, y: 220, kind: "core" },
    { id: "core-3", x: 290, y: 350, kind: "core", primary: true },
    { id: "db-1", x: 110, y: 430, kind: "db", label: "db·primary" },
    { id: "db-2", x: 470, y: 430, kind: "db", label: "db·replica" },
    { id: "obj", x: 290, y: 510, kind: "obj", label: "object store" },
  ];

  const edges = [
    ["edge-1", "core-1"],
    ["edge-2", "core-2"],
    ["core-1", "core-3"],
    ["core-2", "core-3"],
    ["core-1", "core-2"],
    ["core-3", "db-1"],
    ["core-3", "db-2"],
    ["core-3", "obj"],
    ["db-1", "db-2"],
  ];

  const findNode = (id) => nodes.find((n) => n.id === id);

  return (
    <svg viewBox="0 0 580 580" preserveAspectRatio="xMidYMid meet">
      <defs>
        <radialGradient id="bgGlow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="oklch(0.74 0.05 240 / 0.06)" />
          <stop offset="100%" stopColor="transparent" />
        </radialGradient>
        <linearGradient id="lineGrad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="oklch(0.74 0.06 240 / 0.55)" />
          <stop offset="100%" stopColor="oklch(0.74 0.06 240 / 0.25)" />
        </linearGradient>
        <linearGradient id="nodeGrad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="oklch(0.92 0.02 240)" />
          <stop offset="100%" stopColor="oklch(0.74 0.08 240)" />
        </linearGradient>
        <filter id="soft" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="2.5" />
        </filter>
      </defs>

      <circle cx="290" cy="290" r="240" fill="url(#bgGlow)" />

      {/* Concentric rings */}
      {[120, 180, 240].map((r, i) => (
        <circle
          key={r}
          cx="290" cy="290" r={r}
          fill="none"
          stroke="oklch(1 0 0 / 0.05)"
          strokeWidth="1"
          strokeDasharray={i === 1 ? "2 6" : undefined}
        />
      ))}

      {/* Edges */}
      {edges.map(([a, b], i) => {
        const A = findNode(a);
        const B = findNode(b);
        const mx = (A.x + B.x) / 2;
        const my = (A.y + B.y) / 2 - 14;
        const d = `M ${A.x} ${A.y} Q ${mx} ${my} ${B.x} ${B.y}`;
        return (
          <g key={i}>
            <path d={d} fill="none" stroke="oklch(1 0 0 / 0.08)" strokeWidth="1.2" />
            <path
              d={d}
              fill="none"
              stroke="url(#lineGrad)"
              strokeWidth="1.4"
              className="flow-path"
              style={{ animationDelay: `${i * 0.3}s` }}
            />
          </g>
        );
      })}

      {/* Nodes */}
      {nodes.map((n) => {
        const isCore = n.kind === "core";
        const isPrimary = n.primary;
        const r = isPrimary ? 14 : isCore ? 9 : 7;
        return (
          <g key={n.id}>
            <circle cx={n.x} cy={n.y} r={r + 4} fill="oklch(0.17 0.013 260)" />
            <circle
              cx={n.x} cy={n.y} r={r}
              fill={isPrimary ? "url(#nodeGrad)" : "oklch(0.26 0.018 260)"}
              stroke={isPrimary ? "oklch(1 0 0 / 0.35)" : "oklch(1 0 0 / 0.18)"}
              strokeWidth="1"
              className={isPrimary ? "topo-node-pulse" : ""}
            />
            {isPrimary && (
              <circle cx={n.x} cy={n.y} r="3" fill="oklch(1 0 0 / 0.95)" />
            )}
            {n.label && (
              <text
                x={n.x}
                y={n.y + (n.kind === "edge" ? -14 : 22)}
                textAnchor="middle"
                fontFamily="JetBrains Mono, monospace"
                fontSize="9.5"
                fill="oklch(0.62 0.015 260)"
                letterSpacing="0.5"
              >
                {n.label}
              </text>
            )}
          </g>
        );
      })}

      {/* Travelling pulses along key edges */}
      {[
        { from: "edge-1", to: "core-1", delay: 0 },
        { from: "edge-2", to: "core-2", delay: 0.8 },
        { from: "core-1", to: "core-3", delay: 1.4 },
        { from: "core-2", to: "core-3", delay: 0.4 },
        { from: "core-3", to: "db-1", delay: 2.2 },
        { from: "core-3", to: "obj", delay: 1.8 },
      ].map((p, i) => {
        const A = findNode(p.from);
        const B = findNode(p.to);
        const mx = (A.x + B.x) / 2;
        const my = (A.y + B.y) / 2 - 14;
        const d = `M ${A.x} ${A.y} Q ${mx} ${my} ${B.x} ${B.y}`;
        return (
          <circle key={i} r="2" fill="oklch(0.95 0.02 240 / 0.85)">
            <animateMotion dur="3.4s" repeatCount="indefinite" begin={`${p.delay}s`} path={d} />
            <animate attributeName="opacity" values="0;1;1;0" dur="3.4s" repeatCount="indefinite" begin={`${p.delay}s`} />
          </circle>
        );
      })}
    </svg>
  );
};

window.Topology = Topology;