const { useState, useEffect } = React;
/* -------- Brand mark -------- */
const Logo = ({ size = 22, dark = false }) => (
Portal
Pulse
);
const Btn = ({ variant = "primary", children, href = "#", ...rest }) => (
{children}
);
const Tick = () => (
);
const Assurance = ({ items }) => (
{items.map((t, i) => (
{t}
))}
);
const SectionMarker = ({ num, label }) => (
{num}{label}
);
/* ===========================================================
HERO DIAGRAM — "The Portal Listener"
A mechanical/operational schematic. Concentric scopes of
what's being observed, with a dashed purple pulse-ring
as the agent boundary. Small mono labels around the ring.
=========================================================== */
const PortalListener = () => {
const ringNodes = [
{ a: -70, label: "workflows" },
{ a: -20, label: "pipelines" },
{ a: 30, label: "properties" },
{ a: 80, label: "reports" },
{ a: 130, label: "users" },
{ a: 180, label: "lifecycle" },
{ a: 225, label: "deals" },
{ a: 280, label: "contacts" },
];
const teal = "hsl(var(--pp-dark-teal))";
const rad = (deg) => (deg * Math.PI) / 180;
return (
);
};
/* ===========================================================
PROBLEM CHARTS — each explains the pain without words
=========================================================== */
/* Forecast fan — actual line + widening band of maybes */
const ChartForecast = () => {
const ink = "hsl(var(--pp-ink))";
const teal = "hsl(var(--pp-dark-teal))";
return (
);
};
/* Drift — workflow firing count, one rail quietly diverging */
const ChartDrift = () => {
const ink = "hsl(var(--pp-ink))";
const teal = "hsl(var(--pp-dark-teal))";
return (
);
};
/* Adoption — dot matrix of reps, most green, a block of muted */
const ChartAdoption = () => {
const ink = "hsl(var(--pp-ink))";
const teal = "hsl(var(--pp-dark-teal))";
const cols = 20, rows = 7;
const dots = [];
for (let r = 0; r < rows; r++) {
for (let c = 0; c < cols; c++) {
const idx = r * cols + c;
// A contiguous patch on the right-bottom have "invented their own taxonomy"
const off = (r >= 3 && c >= 11) || (r === 2 && c >= 16);
dots.push({ x: 24 + c * 13, y: 40 + r * 12, off, idx });
}
}
return (
);
};
/* ===========================================================
TRUST JOURNEY — a single horizontal curve, 12 weeks.
Beats hang off it as short labels. Week 8 dips then recovers.
=========================================================== */
const TrustJourney = () => {
const teal = "hsl(var(--pp-dark-teal))";
const ink = "hsl(var(--pp-ink))";
const purple = "#8B5CF6";
// The trust curve — starts low, climbs, dips at wk8, recovers higher.
const weeks = [
{ w: 1, t: "connect", x: 60, y: 170, client: "read-only access" },
{ w: 2, t: "first pulse", x: 160, y: 150, client: "3 findings surfaced" },
{ w: 3, t: "approve play", x: 260, y: 128, client: "clean slate signed" },
{ w: 5, t: "delegate", x: 400, y: 102, client: "scope, not line items" },
{ w: 8, t: "the moment", x: 560, y: 148, client: "a workflow misfires", highlight: true },
{ w: 9, t: "recovery", x: 640, y: 96, client: "reverted · explained" },
{ w: 12, t: "ops review", x: 820, y: 60, client: "evidence · not vibes" },
];
const pathD = "M 40 188 "
+ "C 110 186, 140 158, 160 150 "
+ "S 240 132, 260 128 "
+ "S 360 108, 400 102 "
+ "S 500 90, 540 115 "
+ "C 560 138, 560 148, 560 148 "
+ "C 590 130, 620 105, 640 96 "
+ "S 760 68, 820 60";
return (
);
};
/* ===========================================================
PLAY DIAGRAMS — tiny operational schematics per play
=========================================================== */
/* Clean Slate — a cluster with some nodes being pruned */
const PlayDiagramCleanSlate = () => {
const teal = "hsl(var(--pp-dark-teal))";
const ink = "hsl(var(--pp-ink))";
return (
);
};
/* Pipeline Integrity — bent rail becomes a straightened one */
const PlayDiagramPipeline = () => {
const teal = "hsl(var(--pp-dark-teal))";
const ink = "hsl(var(--pp-ink))";
return (
);
};
/* Lead Source — tangled many → organized few */
const PlayDiagramLeadSource = () => {
const teal = "hsl(var(--pp-dark-teal))";
const ink = "hsl(var(--pp-ink))";
// 14 tangled sources on left, merged to 5 on right
const leftSources = Array.from({ length: 14 }).map((_, i) => ({ x: 14, y: 20 + i * 7 }));
const rightSources = Array.from({ length: 5 }).map((_, i) => ({ x: 300, y: 30 + i * 18 }));
return (
);
};
const PLAY_DIAGRAMS = [PlayDiagramCleanSlate, PlayDiagramPipeline, PlayDiagramLeadSource];
/* ===========================================================
PORTAL BOUNDARY — mechanical diagram for the Security col
=========================================================== */
const PortalBoundary = () => {
const teal = "hsl(var(--pp-dark-teal))";
const ink = "hsl(var(--pp-ink))";
return (
);
};
Object.assign(window, {
Logo, Btn, Assurance, SectionMarker,
PortalListener,
ChartForecast, ChartDrift, ChartAdoption,
TrustJourney,
PLAY_DIAGRAMS,
PortalBoundary,
});