// Three diagram visuals for Section 3 — Seed, Detect, Trace.
// Pure SVG + CSS, no images.
function SeedDiagram() {
// Three sources feeding into a Snare node, then synthetic records inserted.
return (
);
}
function DetectDiagram() {
// surveillance surfaces — concentric arcs, pings on the rim.
const [pingIdx, setPingIdx] = React.useState(0);
React.useEffect(() => {
const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (reduce) return;
const t = setInterval(() => setPingIdx(i => (i + 1) % 5), 1400);
return () => clearInterval(t);
}, []);
const surfaces = [
{ angle: -110, label: 'TELEGRAM' },
{ angle: -55, label: 'DARKWEB MKT' },
{ angle: 0, label: 'PHISHING' },
{ angle: 55, label: 'COMPETITOR SMS' },
{ angle: 110, label: 'BREACH DUMP' },
];
return (
);
}
function TraceDiagram() {
// Funnel: persona → conversation → attribution
return (
);
}
window.SeedDiagram = SeedDiagram;
window.DetectDiagram = DetectDiagram;
window.TraceDiagram = TraceDiagram;