/* global React */
// Animated network visualization — used in hero and section backgrounds.
const NetworkBg = ({ density = 'normal', variant = 'hero', animate = true }) => {
const svgRef = React.useRef(null);
const rafRef = React.useRef(null);
const tRef = React.useRef(0);
// Generate node positions (deterministic per variant)
const config = React.useMemo(() => {
const counts = { sparse: 18, normal: 28, dense: 42 };
const n = counts[density] || 28;
const seed = variant === 'hero' ? 7 : variant === 'experience' ? 13 : 19;
const rand = mulberry32(seed);
const nodes = [];
for (let i = 0; i < n; i++) {
nodes.push({
x: rand() * 100,
y: rand() * 100,
r: 1.2 + rand() * 2.4,
phase: rand() * Math.PI * 2,
speed: 0.4 + rand() * 0.6,
});
}
// Connect close neighbors
const edges = [];
for (let i = 0; i < nodes.length; i++) {
const dists = [];
for (let j = 0; j < nodes.length; j++) {
if (i === j) continue;
const dx = nodes[i].x - nodes[j].x;
const dy = nodes[i].y - nodes[j].y;
dists.push({ j, d: Math.sqrt(dx * dx + dy * dy) });
}
dists.sort((a, b) => a.d - b.d);
const k = 2 + Math.floor(rand() * 2);
for (let m = 0; m < k; m++) {
const a = i;
const b = dists[m].j;
if (a < b && dists[m].d < 32) {
edges.push({ a, b, d: dists[m].d, phase: rand() * Math.PI * 2 });
}
}
}
// Add a few signal pulses along edges
const pulses = [];
for (let i = 0; i < Math.min(6, edges.length); i++) {
const e = edges[Math.floor(rand() * edges.length)];
pulses.push({ edge: e, offset: rand() * 100, speed: 8 + rand() * 12 });
}
return { nodes, edges, pulses };
}, [density, variant]);
React.useEffect(() => {
if (!animate) return;
let start = performance.now();
const tick = () => {
const now = performance.now();
tRef.current = (now - start) / 1000;
const svg = svgRef.current;
if (svg) {
// Update node pulse circles
const pulseEls = svg.querySelectorAll('[data-node-pulse]');
pulseEls.forEach((el, i) => {
const node = config.nodes[i];
if (!node) return;
const t = tRef.current * node.speed + node.phase;
const scale = 1 + Math.sin(t * 2) * 0.4 + 1.2;
const op = 0.15 + (Math.sin(t * 2) * 0.5 + 0.5) * 0.35;
el.setAttribute('r', node.r * scale);
el.setAttribute('opacity', op);
});
// Move pulses along edges
const pulseDots = svg.querySelectorAll('[data-pulse]');
pulseDots.forEach((el, i) => {
const p = config.pulses[i];
if (!p) return;
const a = config.nodes[p.edge.a];
const b = config.nodes[p.edge.b];
const t = ((tRef.current * p.speed + p.offset) % 100) / 100;
const x = a.x + (b.x - a.x) * t;
const y = a.y + (b.y - a.y) * t;
el.setAttribute('cx', x);
el.setAttribute('cy', y);
const fade = Math.sin(t * Math.PI);
el.setAttribute('opacity', fade);
});
}
rafRef.current = requestAnimationFrame(tick);
};
rafRef.current = requestAnimationFrame(tick);
return () => cancelAnimationFrame(rafRef.current);
}, [animate, config]);
const lineColor = variant === 'hero' ? 'rgba(0, 123, 255, 0.18)' : 'rgba(255, 255, 255, 0.10)';
const lineColorStrong = variant === 'hero' ? 'rgba(77, 168, 255, 0.45)' : 'rgba(255, 255, 255, 0.25)';
const nodeColor = variant === 'hero' ? '#4DA8FF' : '#FFFFFF';
const pulseColor = '#00D4FF';
return (
);
};
// Concentric ring 5G/coverage motif for hero right side
const HeroViz = () => {
return (
);
};
// Mulberry32 PRNG for deterministic node placement
function mulberry32(seed) {
let a = seed;
return function() {
a |= 0; a = a + 0x6D2B79F5 | 0;
let t = Math.imul(a ^ a >>> 15, 1 | a);
t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
return ((t ^ t >>> 14) >>> 0) / 4294967296;
};
}
Object.assign(window, { NetworkBg, HeroViz });