// site/shared.jsx — components used by both directions.
// Globals it exports onto window: Topbar, Footer, MotionLogo, CalendlyButton,
// EmailCapture, Reveal, useScrollProgress.
const { useState, useEffect, useRef, useMemo } = React;
// ── useIsMobile — true when viewport is at/under the breakpoint (default 768).
function useIsMobile(bp = 820) {
const [m, setM] = useState(
typeof window !== "undefined" ? window.innerWidth <= bp : false
);
useEffect(() => {
const onR = () => setM(window.innerWidth <= bp);
onR();
window.addEventListener("resize", onR);
return () => window.removeEventListener("resize", onR);
}, [bp]);
return m;
}
// ── useScrollProgress — returns 0..1 along window scroll (or a specific element)
function useScrollProgress(ref = null) {
const [p, setP] = useState(0);
useEffect(() => {
const onScroll = () => {
if (ref && ref.current) {
const r = ref.current.getBoundingClientRect();
const vh = window.innerHeight;
// 0 when bottom of element enters viewport, 1 when top leaves
const total = r.height + vh;
const passed = vh - r.top;
setP(Math.max(0, Math.min(1, passed / total)));
} else {
const total = document.documentElement.scrollHeight - window.innerHeight;
setP(total > 0 ? Math.max(0, Math.min(1, window.scrollY / total)) : 0);
}
};
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", onScroll);
return () => {
window.removeEventListener("scroll", onScroll);
window.removeEventListener("resize", onScroll);
};
}, [ref]);
return p;
}
// ── Reveal — fades + slides children in once they enter the viewport.
// Drives opacity/translate directly via Web Animations API so it's robust
// across browsers and sandboxed iframes where CSS transitions occasionally
// stall (e.g. some headless capture environments).
function Reveal({ children, delay = 0, y = 24, once = true, style = {}, className = "" }) {
const ref = useRef(null);
const animatedRef = useRef(false);
useEffect(() => {
if (!ref.current) return;
const el = ref.current;
let raf = 0;
let stopAt = performance.now() + 30_000;
let done = false;
const play = () => {
if (animatedRef.current) return;
animatedRef.current = true;
try {
el.animate(
[
{ opacity: 0, transform: `translateY(${y}px)` },
{ opacity: 1, transform: "translateY(0)" },
],
{
duration: 900,
delay,
easing: "cubic-bezier(0.22,0.61,0.36,1)",
fill: "forwards",
}
);
} catch (_) {
// Fallback: set styles directly
el.style.opacity = "1";
el.style.transform = "translateY(0)";
}
};
const check = () => {
if (!el.isConnected) return true;
const r = el.getBoundingClientRect();
const vh = window.innerHeight || document.documentElement.clientHeight;
const visible = r.top < vh * 0.92 && r.bottom > vh * 0.08;
if (visible) {
play();
return true;
}
return false;
};
const tick = () => {
if (done) return;
if (check() && once) { done = true; return; }
if (performance.now() > stopAt) { done = true; return; }
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
let io;
if ("IntersectionObserver" in window) {
io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
play();
if (once && io) io.disconnect();
done = true;
}
});
}, { threshold: 0.15 });
io.observe(el);
}
const onScroll = () => check();
window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", onScroll);
return () => {
done = true;
if (raf) cancelAnimationFrame(raf);
if (io) io.disconnect();
window.removeEventListener("scroll", onScroll);
window.removeEventListener("resize", onScroll);
};
}, [once, delay, y]);
return (
{children}
);
}
// ── MotionLogo — transparent PNG, blended cleanly. For "scroll" mode applies a
// gentle scroll-tied rotation as a signature gesture.
function MotionLogo({ size = 64, dark = false, mode = "loop", style = {} }) {
const progress = useScrollProgress();
const rot = mode === "scroll" ? progress * 540 : 0;
const src = dark ? window.metisAsset('logoBone') : window.metisAsset('logoIndigo');
return (
);
}
// ── CalendlyButton — opens the Calendly popup widget when the official
// embed script is loaded (window.Calendly), with a graceful fallback to
// opening Calendly in a new tab. Pages load the widget assets in .
function CalendlyButton({ children = "Schedule a consultation", variant = "primary", to, className = "", style = {} }) {
const url = to || window.METIS.LINKS.calendly;
const onClick = (e) => {
if (window.Calendly && typeof window.Calendly.initPopupWidget === "function") {
e.preventDefault();
window.Calendly.initPopupWidget({ url });
}
// else: let the anchor open the link normally
};
return (
e.currentTarget.setAttribute("data-hover", "true")}
onMouseLeave={(e) => e.currentTarget.removeAttribute("data-hover")}
>
{children}
);
}
// ── EmailCapture — non-functional form (the user's backend handles it).
// On submit, we shape it as if the visitor will receive a Google Form link.
function EmailCapture({ tone = "light", compact = false }) {
const [email, setEmail] = useState("");
const [sent, setSent] = useState(false);
const onSubmit = (e) => {
e.preventDefault();
if (!email.match(/.+@.+\..+/)) return;
setSent(true);
};
const isDark = tone === "dark";
const placeholder = "your@work-email.com";
if (sent) {
return (
Received
We've sent a short intake form to {email}. After you complete it, we'll schedule a 30-minute discovery call — your guide arrives once we know what to tailor it for.