// Deep-tech interactive section — TF-IDF, Correlative Queries, Query Path, Co-occurrence
// These demos give a glimpse into the actual semantic engineering work.
const { useState: useStateDT, useMemo: useMemoDT, useEffect: useEffectDT, useRef: useRefDT } = React;
// ============================================================
// SHARED CORPUS — what "your page" and the top 3 competitors look like
// ============================================================
const DT_CORPUS = {
yours: "Our CRM helps sales teams close more deals. We offer pipeline management, contact tracking, and email automation. Try our CRM today and grow your sales pipeline.",
c1: "A modern CRM platform built for B2B sales teams. Manage your pipeline, automate outreach sequences, qualify leads with intent signals, forecast revenue, and integrate with your existing stack. SOC2 compliant.",
c2: "Sales CRM software with built-in deal scoring, multi-channel sequences, conversation intelligence, revenue forecasting, lead routing, account-based workflows, and native integrations with Salesforce, Hubspot, and Outreach.",
c3: "The revenue operations platform. Pipeline hygiene, deal inspection, win/loss analytics, forecast accuracy, sequence automation, intent data enrichment, ICP targeting, and territory planning , all in one system of record.",
};
// Tiny tokenizer
function tokenize(text) {
return (text || "")
.toLowerCase()
.replace(/[^a-z0-9\s\-]/g, " ")
.split(/\s+/)
.filter(t => t.length > 2 && !DT_STOPWORDS.has(t));
}
const DT_STOPWORDS = new Set(["the","and","for","with","our","you","your","are","not","but","this","that","from","its","has","have","more","one","all","any","into","out","off","can","will","try","get","use","big","new","old","help","helps","today","grow"]);
// TF-IDF: term frequency in doc × log(N / df)
function tfidf(docs) {
const tokenized = docs.map(tokenize);
const N = tokenized.length;
const df = {};
tokenized.forEach(doc => {
new Set(doc).forEach(t => { df[t] = (df[t] || 0) + 1; });
});
return tokenized.map(doc => {
const tf = {};
doc.forEach(t => { tf[t] = (tf[t] || 0) + 1; });
const len = doc.length || 1;
const scores = {};
Object.keys(tf).forEach(t => {
const idf = Math.log((N + 1) / (df[t] + 1)) + 1;
scores[t] = (tf[t] / len) * idf;
});
return scores;
});
}
// ============================================================
// TF-IDF VISUALIZER
// ============================================================
function TFIDFDemo() {
const [editable, setEditable] = useStateDT(DT_CORPUS.yours);
const docs = [editable, DT_CORPUS.c1, DT_CORPUS.c2, DT_CORPUS.c3];
const scores = useMemoDT(() => tfidf(docs), [editable]);
// Union of competitor important terms (avg of top across c1-c3) — what "Google expects"
const expected = useMemoDT(() => {
const merged = {};
[1,2,3].forEach(i => {
Object.entries(scores[i] || {}).forEach(([k,v]) => {
merged[k] = (merged[k] || 0) + v;
});
});
return Object.entries(merged)
.sort((a,b) => b[1] - a[1])
.slice(0, 16)
.map(([term, score]) => ({ term, score }));
}, [scores]);
const yoursScores = scores[0] || {};
const maxExpected = Math.max(...expected.map(e => e.score), 0.01);
const yoursTopTerms = Object.entries(yoursScores).sort((a,b) => b[1]-a[1]).slice(0,8).map(([t]) => t);
const coverage = expected.filter(e => yoursScores[e.term] && yoursScores[e.term] > 0).length;
const coveragePct = Math.round((coverage / expected.length) * 100);
return (
↳ YOUR PAGE COPY · EDIT TO SEE LIVE RECALCULATION
EXPECTED CORPUS · {expected.length} TERMS
VS TOP 3 COMPETITORS
{expected.map((e, i) => {
const yours = yoursScores[e.term] || 0;
const ratio = e.score / maxExpected;
const has = yours > 0;
return (
{String(i+1).padStart(2,"0")}
{e.term}
{has ? "✓ FILLED" : "× MISSING"}
);
})}
↳ Layer 1 / Layer 2 only , this is what Surfer/Clearscope stop at. Real architecture starts at the next tab.
);
}
// ============================================================
// CORRELATIVE QUERIES — entity graph around a seed term
// ============================================================
const DT_CORRELATIONS = {
"crm": [
{ term: "pipeline", weight: 0.92, type: "core" },
{ term: "deal", weight: 0.88, type: "core" },
{ term: "lead scoring", weight: 0.81, type: "core" },
{ term: "forecast accuracy", weight: 0.77, type: "rev-ops" },
{ term: "sequence automation", weight: 0.74, type: "outreach" },
{ term: "conversation intelligence", weight: 0.71, type: "outreach" },
{ term: "intent signals", weight: 0.69, type: "rev-ops" },
{ term: "ICP targeting", weight: 0.66, type: "rev-ops" },
{ term: "territory planning", weight: 0.61, type: "ops" },
{ term: "win/loss analytics", weight: 0.58, type: "rev-ops" },
{ term: "account-based", weight: 0.55, type: "core" },
{ term: "salesforce integration", weight: 0.52, type: "ops" },
],
"topical authority": [
{ term: "semantic frames", weight: 0.94, type: "core" },
{ term: "entity recognition", weight: 0.88, type: "core" },
{ term: "co-occurrence matrix", weight: 0.84, type: "core" },
{ term: "phrase indexing", weight: 0.80, type: "indexing" },
{ term: "knowledge graph", weight: 0.78, type: "indexing" },
{ term: "BERT embeddings", weight: 0.74, type: "model" },
{ term: "MUM cross-modal", weight: 0.70, type: "model" },
{ term: "BM25 ranking", weight: 0.67, type: "model" },
{ term: "query fanout", weight: 0.63, type: "indexing" },
{ term: "topical clusters", weight: 0.60, type: "core" },
{ term: "internal linking", weight: 0.55, type: "indexing" },
{ term: "schema markup", weight: 0.52, type: "indexing" },
],
};
const DT_SEEDS = Object.keys(DT_CORRELATIONS);
function CorrelativeDemo() {
const [seed, setSeed] = useStateDT(DT_SEEDS[0]);
const [hovered, setHovered] = useStateDT(null);
const nodes = DT_CORRELATIONS[seed];
// Layout in radial pattern
const layout = useMemoDT(() => {
const W = 560, H = 460, cx = W/2, cy = H/2;
return nodes.map((n, i) => {
const angle = (i / nodes.length) * Math.PI * 2 - Math.PI / 2;
const r = 150 + (1 - n.weight) * 70;
return { ...n, x: cx + Math.cos(angle) * r, y: cy + Math.sin(angle) * r, cx, cy, W, H };
});
}, [seed]);
const TYPE_COLORS = {
core: "var(--signal)",
"rev-ops": "oklch(0.72 0.14 220)",
outreach: "oklch(0.72 0.14 160)",
indexing: "oklch(0.72 0.14 320)",
ops: "oklch(0.72 0.14 50)",
model: "oklch(0.72 0.14 285)",
};
return (
SEED:
{DT_SEEDS.map(s => (
setSeed(s)}>
{s}
))}
↳ HOVER ANY NODE
{/* concentric rings */}
{[80, 140, 200].map(r => (
))}
{/* edges */}
{layout.map((n, i) => (
))}
{/* center node */}
{seed}
{/* outer nodes */}
{layout.map((n, i) => (
setHovered(i)}
onMouseLeave={() => setHovered(null)}
style={{cursor: "pointer", opacity: hovered === null || hovered === i ? 1 : 0.4, transition: "opacity 0.2s"}}>
{n.term}
w={n.weight.toFixed(2)}
))}
↳ WHAT GOOGLE EXPECTS TO CO-OCCUR
When a user queries "{seed}" , Google's correlative model expects {nodes.length} adjacent entities to appear in any page claiming authority. We mine these from SERP fanouts, BERT embedding neighbors, and the actual top-10 corpora , then engineer them into the brief.
{Object.entries(TYPE_COLORS).slice(0, 5).map(([k,v]) => (
{k}
))}
{hovered !== null && (
SELECTED ENTITY
{nodes[hovered].term}
CORRELATION · {nodes[hovered].weight.toFixed(2)} · CLASS · {nodes[hovered].type}
)}
);
}
// ============================================================
// SEQUENTIAL / QUERY PATH — query journey
// ============================================================
const DT_PATHS = [
{
persona: "VP Sales evaluating CRMs",
steps: [
{ q: "what is a sales pipeline", layer: "Awareness", intent: "informational", note: "Define category, build mental model" },
{ q: "best CRM for B2B sales 2026", layer: "Consideration", intent: "comparative", note: "Shortlist phase , listicles, Reddit, G2" },
{ q: "hubspot vs salesforce vs pipedrive", layer: "Consideration", intent: "comparative", note: "Head-to-head , competitor pages rank here" },
{ q: "[your brand] pricing", layer: "Decision", intent: "navigational", note: "Brand search , already convinced, validating price" },
{ q: "[your brand] vs hubspot reddit", layer: "Decision", intent: "social-proof", note: "Last-mile objection , owns or loses the deal" },
{ q: "[your brand] implementation timeline", layer: "Retention", intent: "transactional", note: "Post-purchase , sets churn baseline" },
],
},
];
function QueryPathDemo() {
const [active, setActive] = useStateDT(2);
const path = DT_PATHS[0];
const step = path.steps[active];
// Auto-advance
useEffectDT(() => {
const id = setInterval(() => setActive(a => (a + 1) % path.steps.length), 4000);
return () => clearInterval(id);
}, []);
return (
↳ PERSONA
{path.persona}
{path.steps.map((s, i) => (
setActive(i)}>
Q{String(i+1).padStart(2,"0")}
{s.q}
{s.layer.toUpperCase()} · {s.intent}
{i < path.steps.length - 1 && (
)}
))}
↳ STEP {active+1} OF {path.steps.length} · {step.layer.toUpperCase()}
"{step.q}"
{step.note}
↳ ASSET WE BUILD FOR THIS STEP
{step.layer === "Awareness" && <>
L3 Pillar page · {step.q} · 2,800 words · 18 semantic frames
L1 FAQ schema · 8 questions targeting people-also-ask
L7 Cialdini · Reciprocity (free downloadable template)
>}
{step.layer === "Consideration" && step.intent === "comparative" && <>
L3 Cluster pages · 1 per competitor combo · interlinked
L4 Comparative tables with verifiable claims
L7 Cialdini · Social Proof + Authority (G2 quotes, real metrics)
OFF Reddit + niche-community presence via earned mentions
>}
{step.layer === "Decision" && <>
L1 Pricing page · brand-defended (no comparison tables)
L7 Cialdini · Scarcity (annual discount window)
L7 Cialdini · Commitment (calculator → ROI proof → demo)
{step.q.includes("reddit") && OFF Organic AMA + customer-led answer threads }
>}
{step.layer === "Retention" && <>
L5 Onboarding hub · author-attributed for entity authority
L7 Cialdini · Liking (founder-led video sequence)
>}
);
}
// ============================================================
// CO-OCCURRENCE MATRIX — heatmap
// ============================================================
function CooccurDemo() {
const TERMS = ["pipeline", "deal", "forecast", "sequence", "intent", "ICP", "territory", "revenue"];
// Pre-computed co-occurrence weights (would be from real corpus)
const MATRIX = [
[1.00, 0.82, 0.71, 0.54, 0.62, 0.48, 0.45, 0.78],
[0.82, 1.00, 0.66, 0.58, 0.55, 0.42, 0.38, 0.74],
[0.71, 0.66, 1.00, 0.44, 0.51, 0.52, 0.40, 0.86],
[0.54, 0.58, 0.44, 1.00, 0.68, 0.55, 0.32, 0.48],
[0.62, 0.55, 0.51, 0.68, 1.00, 0.76, 0.41, 0.58],
[0.48, 0.42, 0.52, 0.55, 0.76, 1.00, 0.62, 0.54],
[0.45, 0.38, 0.40, 0.32, 0.41, 0.62, 1.00, 0.44],
[0.78, 0.74, 0.86, 0.48, 0.58, 0.54, 0.44, 1.00],
];
const [hover, setHover] = useStateDT(null);
return (
CO-OCCURRENCE MATRIX · TOP 8 TERMS
REV-OPS CORPUS · N=412
{TERMS.map(t =>
{t}
)}
{TERMS.map((row, ri) => (
{row}
{TERMS.map((col, ci) => {
const v = MATRIX[ri][ci];
const isHover = hover && (hover.r === ri || hover.c === ci);
const isCell = hover && hover.r === ri && hover.c === ci;
return (
0.6 ? "var(--ink)" : "var(--bone-2)",
}}
onMouseEnter={() => setHover({r: ri, c: ci, v, row, col})}
onMouseLeave={() => setHover(null)}
>
{v.toFixed(2)}
);
})}
))}
↳ READ THIS MATRIX
Each cell is the conditional probability two terms co-occur within a 250-word window across the top-ranking pages for "revenue operations." When you write about forecast , Google expects revenue to follow within sentences 86% of the time. Miss that pair, and you score below threshold on Layer 3.
{hover ? (
SELECTED PAIR
{hover.row} × {hover.col}
P(co-occur · 250w) = {hover.v.toFixed(2)}
{hover.v > 0.7 ? "↳ MUST APPEAR TOGETHER" : hover.v > 0.5 ? "↳ STRONGLY RECOMMENDED" : "↳ OPTIONAL , CONTEXT DEPENDENT"}
) : (
↳ HOVER ANY CELL TO INSPECT
)}
);
}
// ============================================================
// SHELL
// ============================================================
const DT_TABS = [
{ id: "tfidf", num: "01", label: "TF-IDF Coverage", sub: "Are you scoring on the terms that matter?", Component: TFIDFDemo },
{ id: "correl", num: "02", label: "Correlative Queries", sub: "What Google expects to co-appear", Component: CorrelativeDemo },
{ id: "path", num: "03", label: "Sequential / Query Path", sub: "Mapping the buyer's full journey", Component: QueryPathDemo },
{ id: "cooccur", num: "04", label: "Co-occurrence Matrix", sub: "Term pairs across the top corpus", Component: CooccurDemo },
];
function DeepTechSection() {
const [active, setActive] = useStateDT("tfidf");
const Tab = DT_TABS.find(t => t.id === active);
const Active = Tab.Component;
return (
THE ENGINE · LIVE DEMOS
A glimpse into how deep we actually go.
Four of the diagnostics we run on every page before a single sentence is briefed. Play with them. The numbers are real , the corpus is sales/CRM, mapped from the top-10 SERP today.
{DT_TABS.map(t => (
setActive(t.id)}>
{t.num}
{t.label}
{t.sub}
))}
holistic-radar/engine , {Tab.label.toLowerCase().replace(/\s+/g, "-")}.tsx
RUNNING
↳ THESE DEMOS ARE 0.4% OF WHAT WE RUN ON YOUR SITE. THE FULL RADAR SCAN INCLUDES 47 DIAGNOSTICS ACROSS ALL 6 LAYERS.
Book my Radar Scan
);
}
window.DeepTechSection = DeepTechSection;