/* global React */ const { useState, useEffect, useRef, useMemo } = React; /* ============================================================ ICONS — minimal line set ============================================================ */ const Icon = ({ name, ...p }) => { const common = { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", ...p }; const paths = { ai: <>, appsec: <>, devsecops: <>, cloud: <>, container: <>, arch: <>, grc: <>, threat: <>, arrow: <>, arrowUR: <>, close: <>, check: <>, linkedin: <>, mail: <>, play: <> }; return ; }; /* ============================================================ MONSEC LOGO MARK — hex with M/keyhole ============================================================ */ const LogoMark = ({ height = 28 }) => (

); /* ============================================================ ANIMATED HERO BACKGROUND — node graph ============================================================ */ const HeroNetwork = () => { const ref = useRef(null); useEffect(() => { const canvas = ref.current; if (!canvas) return; const ctx = canvas.getContext("2d"); let raf; let w = canvas.width = canvas.offsetWidth * devicePixelRatio; let h = canvas.height = canvas.offsetHeight * devicePixelRatio; const N = 38; const nodes = Array.from({length: N}, () => ({ x: Math.random() * w, y: Math.random() * h, vx: (Math.random()-0.5) * 0.25 * devicePixelRatio, vy: (Math.random()-0.5) * 0.25 * devicePixelRatio, r: (1 + Math.random()*1.5) * devicePixelRatio })); const onResize = () => { w = canvas.width = canvas.offsetWidth * devicePixelRatio; h = canvas.height = canvas.offsetHeight * devicePixelRatio; }; window.addEventListener("resize", onResize); const tick = () => { ctx.clearRect(0, 0, w, h); const maxD = 160 * devicePixelRatio; for (const n of nodes) { n.x += n.vx; n.y += n.vy; if (n.x < 0 || n.x > w) n.vx *= -1; if (n.y < 0 || n.y > h) n.vy *= -1; } // edges for (let i = 0; i < N; i++) { for (let j = i+1; j < N; j++) { const a = nodes[i], b = nodes[j]; const dx = a.x-b.x, dy = a.y-b.y; const d = Math.hypot(dx, dy); if (d < maxD) { const alpha = (1 - d/maxD) * 0.35; ctx.strokeStyle = `rgba(0, 255, 156, ${alpha})`; ctx.lineWidth = 0.6 * devicePixelRatio; ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke(); } } } // nodes for (const n of nodes) { ctx.fillStyle = "rgba(0, 255, 156, 0.7)"; ctx.beginPath(); ctx.arc(n.x, n.y, n.r, 0, Math.PI*2); ctx.fill(); } raf = requestAnimationFrame(tick); }; tick(); return () => { cancelAnimationFrame(raf); window.removeEventListener("resize", onResize); }; }, []); return