// v5 — Engagements section + Escher mark + site footer.
// Shared by the homepage (/) and the standalone contact page (/contact),
// so it lives outside v5-app.jsx (which owns the homepage mount).
// ENGAGEMENT MODES — content-driven cards for the contact section
// ENGAGEMENT MODES — ordered by how long they run, shortest first
const MODES = [
{
name: "Workshop",
range: "1\u20135 days \u00b7 with Portal",
body: "A room with a deadline on it, and a decision before anyone leaves. I run these with Portal.",
fit: "Best when the team has the ingredients and cannot agree on what to do with them.",
href: "mailto:znerold@gmail.com?subject=Workshop%20with%20Portal",
cursor: "1\u20135 days \u00b7 with Portal",
// Idea commercialization timeline coverage — indices into IDEA_STAGES
zones: [0, 1]
},
{
name: "Prototype sprint",
range: "1\u20133 weeks \u00b7 with Portal",
body: "You end up with an artifact you can put in front of someone. It is built to be argued with.",
fit: "Best when the decision is hard and the prototype has to do the convincing.",
href: "mailto:znerold@gmail.com?subject=Prototype%20sprint%20with%20Portal",
cursor: "1\u20133 wks \u00b7 research-fed",
zones: [2, 3, 4]
},
{
name: "Consulting",
range: "4\u201312 weeks",
body: "A named problem with a written scope, and an end date on the calendar. I do the work myself.",
fit: "Best when there is a specific problem and a date it has to be solved by.",
href: "mailto:znerold@gmail.com?subject=Consulting%20engagement",
cursor: "4\u201312 wks \u00b7 scope-defined",
zones: [1, 2, 3, 4]
},
{
name: "Embedded advisory",
range: "3\u20136 months",
body: "I join the meetings you already have rather than adding new ones. Part time, for a few months.",
fit: "Best when the decisions keep arriving and nobody in the room has done this before.",
href: "mailto:znerold@gmail.com?subject=Embedded%20advisory",
cursor: "3\u20136 mo \u00b7 in the room",
zones: [0, 1, 2, 3, 4, 5, 6]
},
{
name: "Selective staff leadership",
range: "Open-ended",
body: "Director or VP roles, in house, on payroll. I am open to it when the mandate is real and the people are ones I want to spend my Mondays with.",
fit: "Best when the mandate is broad enough that nobody has written the job description yet.",
href: "mailto:znerold@gmail.com?subject=Staff%20leadership%20conversation",
cursor: "Full time \u00b7 in house",
zones: [0, 1, 2, 3, 4, 5, 6]
}];
// Idea commercialization timeline — stages a new idea travels through
const IDEA_STAGES = [
{ id: "signal", label: "Signal", note: "Audience and category" },
{ id: "frame", label: "Frame", note: "Thesis and language" },
{ id: "concept", label: "Concept", note: "Directions with range" },
{ id: "validate", label: "Validate", note: "Cut down to one" },
{ id: "prototype", label: "Prototype", note: "Make it real" },
{ id: "ship", label: "Ship", note: "Production and handoff" },
{ id: "scale", label: "Scale", note: "Operate and learn" }];
const V5Engagements = () => {
const [active, setActive] = useState(2); // start on Consulting
const [paused, setPaused] = useState(false);
useEffect(() => {
if (paused) return;
const id = setInterval(() => setActive((a) => (a + 1) % MODES.length), 5500);
return () => clearInterval(id);
}, [paused]);
const pick = (i) => {setPaused(true);setActive(i);};
const activeMode = MODES[active];
const minZone = Math.min(...activeMode.zones);
const maxZone = Math.max(...activeMode.zones);
const N = IDEA_STAGES.length;
return (
{/* Compact opener — headline, then the one line that explains the timeline */}
{/* Idea-commercialization timeline — horizontal, shows active mode's coverage */}
{/* Background line */}
{/* Active coverage band */}
{/* Stage markers */}
{IDEA_STAGES.map((s, i) => {
const isActive = activeMode.zones.includes(i);
return (
{s.label}{s.note}
);
})}
{/* Two-column body — mode picker on left, dynamic detail on right */}
{/* Mode picker — linear list of selectable engagements */}
{MODES.map((m, i) =>
)}
{/* Dynamic detail panel — transitions when active mode changes */}
);
};
// ESCHER MARK — three interlocked Borromean rings. Each pair overlaps with an
// alternating over/under weave (A>B, B>C, C>A) so no ring sits consistently in front;
// the eye keeps trying to resolve the stacking order. Minimal at rest, hover starts a
// slow rotation and a soft diffused halo, click twirls 540° flipping the weave parity.
const EscherMark = () => {
const [twirl, setTwirl] = React.useState(0);
return (
);
};
// SUBSTANTIAL FOOTER — colophon-style closing surface
const V5Footer = () => {
return (
);
};
// FOOT FIELD (pattern audit 19) — a slim band directly above the footer where the
// ASCII field resolves AVAILABLE: the masthead's device, bookending the page. Low
// opacity, and pointer-reactive only: the engine's `still` option paints once, plays
// the word in when the band comes into view, and otherwise moves only under the
// pointer. Mounted on / and /about (never /contact, never the 404, which keeps its
// own full-viewport field). The static pages get the same band from the footer
// snapshot (_tools/shell-footer). Nothing renders under 1024.
const V5_FOOT_FIELD_WORD = "AVAILABLE";
const V5FootField = () => {
const Field = typeof window.V5AsciiField === "function" ? window.V5AsciiField : null;
return (
);
};
// COLOPHON (pattern audit 16) — the four-pair meta grid that closes /about: what the
// site is set in, built on, drawn with, and when. One grid, four pairs, no sentences
// under a value. Said plainly: the "AI design engineering" claim wants the evidence.
const V5_COLOPHON = [
{ k: "Type", v: "Area Inktrap · Adobe Fonts" },
{ k: "Stack", v: "Static HTML · React · Vercel" },
{ k: "Engine", v: "ASCII field and motion layer · hand-built" },
{ k: "Built", v: "2026 · with Claude Code" }];
const V5Colophon = () => {
return (