// Integration sub-page: nav, hero, animated diagram + legend, seven-step walkthrough,
// governance cards, footer. Reuses Reveal / BloomBackground from the SME profile.
const { useState, useEffect, useRef } = React;
const ItgIco = {
globe: (s = 18) => (),
shield: (s = 18) => (),
lock: (s = 18) => (),
clock: (s = 18) => (),
layers: (s = 18) => (),
spark: (s = 18) => (),
board: (s = 18) => (),
scrub: (s = 18) => (),
arrow: (s = 16) => (),
desktop: (s = 18) => (),
cloud: (s = 18) => (),
phone: (s = 18) => (),
plug: (s = 18) => (),
mail: (s = 18) => (),
loop: (s = 18) => (),
};
function Nav() {
return (
);
}
function Hero({ meta }) {
return (
);
}
function Legend({ items }) {
return (
{items.map((l) => (
{l.label}
))}
);
}
function DiagramSection({ view, tab, setTab, order, views }) {
return (
{order.map((k) => (
))}
{view.eyebrow}
{view.diagTitle}
{view.diagLede}
{view.key === "personal" ? : }
);
}
function StageCard({ s, active, onEnter }) {
return (
{s.n}
{ItgIco[s.icon]()}
{s.title}
{s.detail}
{s.tags.map((t) => {t})}
);
}
function StagesSection({ view }) {
const stages = view.stages;
const [active, setActive] = useState(0);
useEffect(() => {
setActive(0);
if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
const t = setInterval(() => setActive((a) => (a + 1) % stages.length), 2800);
return () => clearInterval(t);
}, [stages]);
return (
{view.flowEyebrow}
{view.flowTitle}
{stages.map((s, i) => (
setActive(i)} />
))}
);
}
function GovernanceSection({ items }) {
return (
SECURITY · COMPLIANCE · AUDIT
The guarantees wrapped around every hop.
Control at the edge, a scrub on the way in, and an immutable trail on the way through — so the profile can be public without the pod being exposed.
{items.map((g, i) => (
{ItgIco[g.icon]()}
{g.title}
{g.body}
))}
{view.governance && }
);
}
ReactDOM.createRoot(document.getElementById("root")).render();