// shared/chrome.jsx — Nav, Footer, scroll-reveal observer, page-transition init.
// Exposes globals: WhitenNav, WhitenFooter, WhitenAnnouncement, useReveal, Mark, Arrow
const Mark = ({ size = 28 }) => (
w
);
const Arrow = ({ size = 14, dir = "right" }) => {
const rot = { right: 0, up: -45, down: 135, left: 180 }[dir] || 0;
return (
);
};
const NAV_ITEMS = [
{ href: "index.html", label: "Home", key: "home" },
{ href: "services.html", label: "Services", key: "services" },
{ href: "workflows.html", label: "Workflows", key: "workflows" },
{ href: "case-studies.html", label: "Case studies", key: "cases" },
{ href: "how-it-works.html", label: "How it works", key: "how" }
];
function WhitenAnnouncement({ children }) {
return (
{children || <>Now booking June 2026 — 2 build slots left}
);
}
function WhitenNav({ active }) {
return (
);
}
function WhitenFooter() {
return (
);
}
function FooterCol({ title, links }) {
return (
{title}
{links.map(([label, href]) => (
-
{label}
))}
);
}
// ─── reveal-on-scroll observer ───
function useReveal() {
React.useEffect(() => {
if (document.documentElement.getAttribute('data-motion') === '0') {
document.querySelectorAll('.reveal').forEach(el => el.classList.add('in'));
return;
}
// immediately reveal anything already in (or near) the viewport so the
// first paint doesn't look blank
const reveal = (el) => {
const r = el.getBoundingClientRect();
if (r.top < window.innerHeight * 1.05 && r.bottom > 0) {
// small stagger to keep some animation life
const delay = parseFloat(getComputedStyle(el).getPropertyValue('--rd')) || 0;
if (delay) setTimeout(() => el.classList.add('in'), delay * 1000);
else el.classList.add('in');
return true;
}
return false;
};
const io = new IntersectionObserver((entries) => {
entries.forEach(en => {
if (en.isIntersecting) {
en.target.classList.add('in');
io.unobserve(en.target);
}
});
}, { threshold: 0.08, rootMargin: "0px 0px -6% 0px" });
document.querySelectorAll('.reveal').forEach(el => {
if (!reveal(el)) io.observe(el);
});
return () => io.disconnect();
}, []);
}
Object.assign(window, {
Mark, Arrow, WhitenNav, WhitenFooter, WhitenAnnouncement, useReveal, NAV_ITEMS
});