// ─────────────────────────────────────────────────────────────
// Mezoo — Primitives partagées
// Logos en JSX (les SVG sont aussi sur disque dans assets/), composants
// d'interface réutilisés sur toutes les pages, hook scroll-reveal,
// routeur ultra-léger.
// ─────────────────────────────────────────────────────────────
// ── Logos (versions JSX, pilotables par currentColor) ────────────
function MezooMark({ size = 40, ariaHidden = false }) {
return (
);
}
function MezooWordmark({ size = 24, withDot = true }) {
return (
mezoo
{withDot && (
)}
);
}
function MezooLockup({ size = 28, tagline = 'Atelier numérique' }) {
return (
{tagline && (
— {tagline}
)}
);
}
// ── Scroll reveal hook ──────────────────────────────────────────
// IntersectionObserver attaches .is-in once when element enters viewport.
function useReveal() {
React.useEffect(() => {
const els = document.querySelectorAll('.mz-reveal:not(.is-in)');
if (!els.length) return undefined;
const io = new IntersectionObserver((entries) => {
for (const e of entries) {
if (e.isIntersecting) {
e.target.classList.add('is-in');
io.unobserve(e.target);
}
}
}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
els.forEach((el) => io.observe(el));
return () => io.disconnect();
});
}
// Stagger: child indexes drive --reveal-delay so siblings cascade in.
function Reveal({ children, delay = 0, as: As = 'div', ...rest }) {
return (
{children}
);
}
// ── Animated counter (counts up to value once in viewport) ──────
function CountUp({ to, suffix = '', prefix = '', decimals = 0, duration = 1100 }) {
const ref = React.useRef(null);
const [val, setVal] = React.useState(0);
React.useEffect(() => {
const el = ref.current;
if (!el) return undefined;
let raf;
const io = new IntersectionObserver((entries) => {
if (!entries[0].isIntersecting) return;
const start = performance.now();
const step = (now) => {
const t = Math.min(1, (now - start) / duration);
const eased = 1 - Math.pow(1 - t, 3);
setVal(to * eased);
if (t < 1) raf = requestAnimationFrame(step);
};
raf = requestAnimationFrame(step);
io.disconnect();
}, { threshold: 0.5 });
io.observe(el);
return () => { io.disconnect(); cancelAnimationFrame(raf); };
}, [to, duration]);
return {prefix}{val.toFixed(decimals)}{suffix};
}
// ── Italic emphasis (serif over running sans) ───────────────────
function Em({ children }) {
return {children};
}
// ── Eyebrow ─────────────────────────────────────────────────────
function Eyebrow({ children, line = true }) {
return
{children}
;
}
// ── Spec callout — Stratum-style data card ──────────────────────
// Used to inject "technical proof" into Senior-flavored layouts.
function SpecCard({ title, status = 'live', children, meta }) {
return (
);
}
// Tiny key-value spec row used inside SpecCard.
function SpecRow({ k, v }) {
return (
{k}{v}
);
}
// ── Image placeholder (until real captures arrive) ──────────────
function CapturePlaceholder({ label, ratio = '16 / 10', accent = true, dense = false, style }) {
return (