// ui.jsx — shared building blocks
const { useRef, useEffect, useState } = React;
// ── Animation viability probe ───────────────────────────────────────────────
// Offscreen/throttled iframes pause CSS transitions+animations, which would
// leave reveal-on-scroll content stuck hidden. We measure rAF cadence once; if
// frames are slow (not being rendered) or reduced-motion is set, we mark
// animations non-viable and Reveal renders content statically visible.
let ANIM_VIABLE = null; // null = unknown, true/false once probed
const ANIM_WAITERS = [];
function finalizeAnim(v) {
ANIM_VIABLE = v;
document.documentElement.classList.toggle("anim-off", !v);
ANIM_WAITERS.splice(0).forEach((fn) => fn());
}
(function probeAnim() {
if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
finalizeAnim(false); return;
}
const t0 = performance.now();
requestAnimationFrame(() => requestAnimationFrame(() => {
finalizeAnim((performance.now() - t0) < 200); // ~2 frames should be < ~60ms when rendered
}));
// hard fallback in case rAF never fires
setTimeout(() => { if (ANIM_VIABLE === null) finalizeAnim(false); }, 1200);
})();
function onAnimDecided(fn) { if (ANIM_VIABLE !== null) fn(); else ANIM_WAITERS.push(fn); }
// Safety net: no matter what (paused/throttled/offscreen contexts that freeze
// CSS animations at their hidden keyframe), force every animated element to its
// visible end-state shortly after load. Timers fire even when rAF is throttled,
// so this guarantees content is never stuck invisible. Live browsers complete
// their fades well before this and see no change.
setTimeout(() => { document.documentElement.classList.add("force-shown"); }, 1100);
// Scroll-reveal wrapper. Falls back to statically-visible when animations are
// not viable (throttled/offscreen/reduced-motion).
function Reveal({ children, as = "div", delay = 0, className = "", style = {} }) {
const ref = useRef(null);
// mode: 'static' (visible, no transition) | 'pre' (hidden, armed) | 'in' (revealed)
const [mode, setMode] = useState("static");
useEffect(() => {
const el = ref.current;
if (!el) return;
let cleanup = () => {};
onAnimDecided(() => {
if (!ref.current) return;
if (!ANIM_VIABLE) { setMode("static"); return; }
const vh = window.innerHeight || document.documentElement.clientHeight;
const inView = () => {
const r = el.getBoundingClientRect();
return r.top < vh * 0.85 && r.bottom > 0;
};
if (inView()) {
// gentle entrance for above-fold content
setMode("pre");
requestAnimationFrame(() => requestAnimationFrame(() => ref.current && setMode("in")));
return;
}
// below the fold: arm hidden, reveal on scroll
setMode("pre");
let done = false, raf = 0;
const check = () => {
if (done) return;
if (inView()) { done = true; setMode("in"); detach(); }
};
const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(check); };
const detach = () => {
window.removeEventListener("scroll", onScroll);
window.removeEventListener("resize", onScroll);
cancelAnimationFrame(raf);
};
window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", onScroll);
cleanup = detach;
});
return () => cleanup();
}, []);
const dur = "0.85s";
const tx = `opacity ${dur} ease ${delay}ms, transform ${dur} cubic-bezier(.2,.7,.2,1) ${delay}ms`;
const modeStyle =
mode === "pre" ? { opacity: 0, transform: "translateY(22px)", transition: tx } :
mode === "in" ? { opacity: 1, transform: "none", transition: tx } :
{ opacity: 1, transform: "none" }; // static
const Tag = as;
return (
{children}
);
}
function Eyebrow({ children, align = "left", style = {} }) {
return
{children}
;
}
function GoldButton({ children, onClick, full = false, size = "md", type = "solid", disabled = false }) {
return (
);
}
function OutlineButton({ children, onClick, full = false, size = "md" }) {
return (
);
}
// Circular brand medallion (the processed badge) with a thin gold ring.
function Medallion({ size = 92 }) {
return (
);
}
// Gold serif wordmark for the nav / footer.
function Wordmark({ small = false, onClick }) {
return (
);
}
// Elegant dark placeholder panel standing in for vehicle photography.
function PhotoPlaceholder({ label = "", ratio = "16 / 10", tone = "emerald", round = 0, children }) {
return (
{label ?
{label} : null}
Photography to come
{children}
);
}
// Refined line icons for the value pillars.
function PillarIcon({ name }) {
const common = { width: 38, height: 38, viewBox: "0 0 40 40", fill: "none",
stroke: "currentColor", strokeWidth: 1.25, strokeLinecap: "round", strokeLinejoin: "round" };
const paths = {
curated: ,
glove: ,
reservation: ,
wrench: ,
income: ,
shield: ,
vetted: ,
calendar:,
split: ,
};
return ;
}
// ============ EMAIL FORM PLUMBING (FormSubmit) ============
// Posts the real