/* global React, window */
const { Brand, Arrow, SiteScrollCtx } = window;
const { motion, AnimatePresence, useScroll } = window.FM || {};
const Mdiv = motion.div || "div";
// Keyboard handler helper — fire fn on Enter or Space
const kp = (fn) => (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); fn(); } };
// Thin sage line that grows with scroll — works with container OR window
function ScrollProgress({ containerRef }) {
const [p, setP] = React.useState(0);
React.useEffect(() => {
const el = containerRef && containerRef.current;
if (el) {
const fn = () => { const t = el.scrollHeight - el.clientHeight; setP(t > 0 ? el.scrollTop / t : 0); };
el.addEventListener('scroll', fn, { passive: true });
return () => el.removeEventListener('scroll', fn);
} else {
const fn = () => { const t = document.documentElement.scrollHeight - window.innerHeight; setP(t > 0 ? window.scrollY / t : 0); };
window.addEventListener('scroll', fn, { passive: true });
return () => window.removeEventListener('scroll', fn);
}
}, []);
return (
);
}
const pageVariants = {
initial: { opacity: 0, y: 20 },
animate: { opacity: 1, y: 0, transition: { duration: 0.55, ease: [0.16, 1, 0.3, 1] } },
exit: { opacity: 0, y: -10, transition: { duration: 0.28, ease: [0.7, 0, 1, 1] } },
};
function Nav({ active, go }) {
const [hidden, setHidden] = React.useState(false);
const lastY = React.useRef(0);
React.useEffect(() => {
const fn = () => {
const y = window.scrollY;
setHidden(y > lastY.current + 4 && y > 120);
lastY.current = y;
};
window.addEventListener('scroll', fn, { passive: true });
return () => window.removeEventListener('scroll', fn);
}, []);
return (
);
}
function MNav({ active, go }) {
const [open, setOpen] = React.useState(false);
const menuId = "mnav-menu";
// Fermer sur Escape + focus trap
React.useEffect(() => {
if (!open) return;
const handleKey = (e) => {
if (e.key === 'Escape') {
setOpen(false);
document.querySelector('.mnav__burger') && document.querySelector('.mnav__burger').focus();
}
};
document.addEventListener('keydown', handleKey);
return () => document.removeEventListener('keydown', handleKey);
}, [open]);
return (
<>
{open ? (
) : null}
);
}
function Footer({ go }) {
return (
);
}
function MFooter({ go }) {
return (
);
}
function Site({ page, projectId, go, isMobile, direction, prod }) {
const wrapRef = React.useRef(null);
React.useEffect(() => {
if (prod) window.scrollTo(0, 0);
else if (wrapRef.current) wrapRef.current.scrollTop = 0;
}, [page, projectId]);
React.useEffect(() => {
const t = setTimeout(() => {
const root = prod ? null : wrapRef.current;
const els = document.querySelectorAll(".fade-up:not(.is-in)");
const io = new IntersectionObserver(
(entries) => entries.forEach((e) => {
if (e.isIntersecting) {
const delay = parseInt(e.target.dataset.delay || 0);
if (delay) e.target.style.transitionDelay = delay + 'ms';
e.target.classList.add("is-in");
}
}),
{ root, threshold: 0.08 }
);
els.forEach((el) => io.observe(el));
return () => io.disconnect();
}, 60);
return () => clearTimeout(t);
}, [page, projectId]);
let Page = null;
if (page === "home") Page = (
direction === "editorial" ? : (
<>
)
);
else if (page === "realisations") Page = ;
else if (page === "project") Page = ;
else if (page === "services") Page = ;
else if (page === "blog") Page = ;
else if (page === "about") Page = ;
else if (page === "contact") Page = ;
const path = page === "project" ? `/realisations/${projectId}/` : (window.PAGES.find((p) => p.id === page)?.path || "/");
if (prod) {
return (
);
}
if (isMobile) {
return (
);
}
return (
);
}
Object.assign(window, { Nav, MNav, Footer, MFooter, Site });