/* global React */
// ─── Photo placeholder ───────────────────────────────────────
function PhotoSlot({ label, aspect, className = "", style = {}, zoomable = false, children, hideLabel = false }) {
const cls = `bm-photo${zoomable ? " is-zoomable" : ""}${hideLabel ? " bm-photo-with-meta" : ""} ${className}`.trim();
const s = { ...style };
if (aspect) s.aspectRatio = aspect;
return (
{children}
{!hideLabel && [ {label} ] }
);
}
// ─── Editorial photo (image + meta caption strip) ────────────
function EditorialPhoto({ aspect = "4 / 5", frame, tags = [], coords = "CAMBRIDGE · UK", style = {}, zoomable = true, label = "" }) {
return (
{frame && FR. {frame} }
{tags.map((t, i) => {t} )}
{coords}
);
}
// ─── Marquee strip ───────────────────────────────────────────
function Marquee({ items = [], motion = true }) {
const content = items.map((t, i) => (
{t}
●
));
if (!motion) {
return (
);
}
return (
);
}
// ─── Scroll fade-up wrapper ───────────────────────────────────
function FadeIn({ children, delay = 0, as = "div", className = "", ...rest }) {
const ref = React.useRef(null);
const Tag = as;
React.useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
setTimeout(() => el.classList.add("is-in"), delay);
io.unobserve(el);
}
});
}, { threshold: 0.12, rootMargin: "0px 0px -60px 0px" });
io.observe(el);
return () => io.disconnect();
}, [delay]);
return {children} ;
}
// ─── Logo wordmark ────────────────────────────────────────────
function Logo({ onClick, light = false }) {
return (
{ e.preventDefault(); onClick && onClick(); }}
href="#/"
style={light ? { color: "var(--bg-primary)" } : undefined}
>
BoMovement
);
}
// ─── Nav ──────────────────────────────────────────────────────
function Nav({ route, navigate, isMobile }) {
const [scrolled, setScrolled] = React.useState(false);
const [open, setOpen] = React.useState(false);
React.useEffect(() => {
const root = document.querySelector(".bm-scrollroot") || window;
const onScroll = () => {
const y = root === window ? window.scrollY : root.scrollTop;
setScrolled(y > 8);
};
root.addEventListener("scroll", onScroll, { passive: true });
onScroll();
return () => root.removeEventListener("scroll", onScroll);
}, []);
const links = [
{ id: "sessions", label: "FRC Sessions" },
{ id: "masterclass", label: "Masterclass" },
{ id: "about", label: "About" },
];
const go = (id) => { navigate(id); setOpen(false); };
return (
<>
go("home")} />
setOpen(o => !o)} aria-label="Menu">
go("home")} />
setOpen(false)} aria-label="Close" style={{ fontSize: 24 }}>
×
);
}
// ─── Footer (colophon style) ──────────────────────────────────
function Footer({ navigate }) {
return (
);
}
// ─── Masthead jump-list ──────────────────────────────────────
function MastheadJump({ items, navigate }) {
return (
{items.map((it, i) => (
{ e.preventDefault(); navigate(it.id); }}
>
N° {String(i + 1).padStart(2, "0")}
{it.label}
{it.sub}
↗
))}
);
}
// ─── FRC Process scroller (circular B&W steps) ──────────────
function FrcProcess({ steps }) {
const trackRef = React.useRef(null);
const wrapRef = React.useRef(null);
const [progress, setProgress] = React.useState(0);
const [canPrev, setCanPrev] = React.useState(false);
const [canNext, setCanNext] = React.useState(true);
const [hintVisible, setHintVisible] = React.useState(true);
const [activeIx, setActiveIx] = React.useState(0);
const update = React.useCallback(() => {
const el = trackRef.current;
const wrap = wrapRef.current;
if (!el) return;
const max = el.scrollWidth - el.clientWidth;
const p = max > 0 ? el.scrollLeft / max : 0;
setProgress(p);
setCanPrev(el.scrollLeft > 4);
setCanNext(el.scrollLeft < max - 4);
if (wrap) {
wrap.dataset.atStart = el.scrollLeft <= 4;
wrap.dataset.atEnd = el.scrollLeft >= max - 4;
}
// Determine which step is centered
const center = el.scrollLeft + el.clientWidth / 2;
let bestIx = 0; let bestDist = Infinity;
[...el.children].forEach((child, i) => {
const c = child.offsetLeft + child.offsetWidth / 2;
const d = Math.abs(c - center);
if (d < bestDist) { bestDist = d; bestIx = i; }
});
setActiveIx(bestIx);
}, []);
React.useEffect(() => {
const el = trackRef.current;
if (!el) return;
el.addEventListener("scroll", update, { passive: true });
update();
const ro = new ResizeObserver(update);
ro.observe(el);
return () => { el.removeEventListener("scroll", update); ro.disconnect(); };
}, [update]);
// Hide hint after first user scroll
React.useEffect(() => {
if (progress > 0.04 && hintVisible) setHintVisible(false);
}, [progress, hintVisible]);
// Drag-to-scroll on desktop
React.useEffect(() => {
const el = trackRef.current;
if (!el) return;
let down = false, startX = 0, startLeft = 0, moved = false;
const onDown = (e) => {
if (e.button !== undefined && e.button !== 0) return;
down = true; moved = false;
startX = (e.touches ? e.touches[0].pageX : e.pageX) - el.offsetLeft;
startLeft = el.scrollLeft;
el.classList.add("is-dragging");
};
const onMove = (e) => {
if (!down) return;
const x = (e.touches ? e.touches[0].pageX : e.pageX) - el.offsetLeft;
const dx = x - startX;
if (Math.abs(dx) > 4) moved = true;
el.scrollLeft = startLeft - dx;
};
const onUp = () => {
down = false;
el.classList.remove("is-dragging");
// re-snap
el.style.scrollSnapType = "";
};
const onClick = (e) => { if (moved) { e.preventDefault(); e.stopPropagation(); } };
el.addEventListener("mousedown", onDown);
el.addEventListener("click", onClick, true);
window.addEventListener("mousemove", onMove);
window.addEventListener("mouseup", onUp);
return () => {
el.removeEventListener("mousedown", onDown);
el.removeEventListener("click", onClick, true);
window.removeEventListener("mousemove", onMove);
window.removeEventListener("mouseup", onUp);
};
}, []);
const scrollToIx = (i) => {
const el = trackRef.current;
if (!el) return;
const child = el.children[i];
if (!child) return;
el.scrollTo({ left: child.offsetLeft - 64, behavior: "smooth" });
};
const scroll = (dir) => {
const el = trackRef.current;
if (!el) return;
// Compute step width from actual DOM (handles mobile vs desktop: 360+40 vs 280+24)
const first = el.children[0];
const second = el.children[1];
const step = (second && first)
? second.offsetLeft - first.offsetLeft
: 400;
el.scrollBy({ left: dir * step, behavior: "smooth" });
};
return (
The process · FRC
How a session actually unfolds.
scroll(-1)} disabled={!canPrev} aria-label="Previous">
scroll(1)} disabled={!canNext} aria-label="Next">
{steps.map((s, i) => (
N° {String(i + 1).padStart(2, "0")}
{s.tag}
{s.duration}
Step {String(i + 1).padStart(2, "0")} / {String(steps.length).padStart(2, "0")}
{s.title}
{s.body}
))}
{String(activeIx + 1).padStart(2, "0")}
{steps.map((_, i) => (
scrollToIx(i)}
aria-label={`Go to step ${i + 1}`}
aria-current={activeIx === i ? "true" : undefined}
/>
))}
{String(steps.length).padStart(2, "0")}
);
}
// ─── SwapFriendlyMedia ────────────────────────────────────────
function SwapFriendlyMedia({
videoSrc,
audioSrc = "/assets/placeholder_audio.mp3",
imageLabel = "Hands-on stretching · body in motion",
caption = "Founder placeholder. Adam's full video replaces this when he records."
}) {
if (videoSrc) {
return (
);
}
return (
{caption}
);
}
// ─── Pull-quote ──────────────────────────────────────────────
function PullQuote({ children }) {
return (
);
}
// ─── Form bits ────────────────────────────────────────────────
function Field({ label, error, children }) {
return (
{label}
{children}
{error &&
{error}
}
);
}
function RadioGroup({ name, value, options, onChange }) {
return (
{options.map(o => (
))}
);
}
function useFormState(initial) {
const [values, setValues] = React.useState(initial);
const [errors, setErrors] = React.useState({});
const [submitted, setSubmitted] = React.useState(false);
const [submitting, setSubmitting] = React.useState(false);
const [submitError, setSubmitError] = React.useState(null);
const set = (k, v) => {
setValues(prev => ({ ...prev, [k]: v }));
if (errors[k]) setErrors(prev => ({ ...prev, [k]: undefined }));
};
return { values, set, errors, setErrors, submitted, setSubmitted, submitting, setSubmitting, submitError, setSubmitError };
}
// Posts the form values to the n8n webhook (test-mode → routes to duy@sharpr.cloud).
// Form type drives the email template + subject line. Honeypot field name is "website".
async function postEnquiry(formType, values) {
const res = await fetch("https://n8n.sharpr.cloud/webhook/bomo-enquiry", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ form_type: formType, website: "", ...values })
});
if (!res.ok) {
const text = await res.text().catch(() => "");
throw new Error(text ? `Server error: ${text.slice(0, 120)}` : `HTTP ${res.status}`);
}
return res.json().catch(() => ({ ok: true }));
}
function validate(values, required) {
const errs = {};
required.forEach(k => {
const v = values[k];
if (v == null || (typeof v === "string" && v.trim() === "")) {
errs[k] = "This field is required.";
}
});
if (values.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email)) {
errs.email = "Please enter a valid email.";
}
return errs;
}
// ─── Audience icon set (line art) ─────────────────────────────
const AudienceIcon = ({ kind }) => {
const common = { width: 36, height: 36, viewBox: "0 0 36 36", fill: "none", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round", strokeLinejoin: "round" };
if (kind === "desk") return (