, document.body);
}
/* Compact bar that arrives once the page has scrolled and steps out of the way
while the reader is moving down. Phones and tablets only. */
function StickyBar({ onOpen }) {
const [visible, setVisible] = React.useState(false);
React.useEffect(() => {
let last = window.scrollY, raf = 0;
const paint = () => {
raf = 0;
const y = window.scrollY;
if (y < 260) setVisible(false);
else if (y < last - 4) setVisible(true);
else if (y > last + 8) setVisible(false);
last = y;
};
const onScroll = () => { if (!raf) raf = requestAnimationFrame(paint); };
window.addEventListener("scroll", onScroll, { passive: true });
return () => { window.removeEventListener("scroll", onScroll); if (raf) cancelAnimationFrame(raf); };
}, []);
return ReactDOM.createPortal(
, document.body);
}
/* Reading progress — a hairline at the very top on phones and tablets. */
function ScrollProgress() {
const ref = React.useRef(null);
React.useEffect(() => {
let raf = 0;
const paint = () => {
raf = 0;
const h = document.documentElement.scrollHeight - window.innerHeight;
const p = h > 40 ? Math.max(0, Math.min(1, window.scrollY / h)) : 0;
if (ref.current) ref.current.style.transform = `scaleX(${p.toFixed(4)})`;
};
const on = () => { if (!raf) raf = requestAnimationFrame(paint); };
paint();
window.addEventListener("scroll", on, { passive: true });
window.addEventListener("resize", on);
const t = setInterval(paint, 900);
return () => { clearInterval(t); window.removeEventListener("scroll", on); window.removeEventListener("resize", on); if (raf) cancelAnimationFrame(raf); };
}, []);
return ReactDOM.createPortal(
, document.body);
}
/* tone="dark" over photography and gradient, "light" on white pages. */
function SiteHeader({ tone = "dark", cta = "Get started", ctaHref, style }) {
const [open, setOpen] = React.useState(false);
const narrow = window.useNarrow ? window.useNarrow() : false;
const dark = tone === "dark";
const Logo = dark ? NavLogoWhite : NavLogoColor;
const Cta = dark ? NavBtnDark : NavBtnLight;
const href = ctaHref || (window.KGLINKS || {}).contact || "Kgotla Contact.html";
const close = React.useCallback(() => setOpen(false), []);
return (