/* lets-partner.jsx — page components for the "Working Life" volume. * * Defines three page-level pieces: * • RolesSection — the 4 roles as tabs on a horizontal rule + the active * role's copy below. Deep-linkable via #/ (driven by * activeSlug + onSelectRole, owned by app.jsx). Tan palette, * no black box. Lives on the ABOUT ME page now. * • AboutMe — the default landing: a page header → RolesSection → * (How I lead · What I hold). * • ServicesPage — the standalone "Services" page: header + sub-header + * the "How we engage / four ways in" material + CTA. */ /* global React, ReactDOM, ROLES, ENGAGEMENT_MODES, Leadership, Bloom, Splatter */ const { useEffect: useEffectLP, useRef: useRefLP } = React; /* ============================================================ MobileNavTray — shared left slide-out drawer for the mobile sub-navigation. Reused by the About-me roles strip (below) and the career-story timeline (career-journey.jsx, which loads after this file, so window.MobileNavTray is defined by then). The TRIGGER renders in normal flow and is shown only at narrow widths via CSS — a single "where am I" bar carrying the current selection. The SCRIM + PANEL are portaled to so the fixed drawer is never clipped by a sticky or overflow-scrolling ancestor (the masthead, the sticky timeline, the scroll strips). Props: eyebrow — mono kicker shown on the trigger + panel head current — { num, label } painted on the closed trigger so the reader always sees where they are without opening title — the panel heading (also the dialog's a11y label) children — render-prop: (close) => tray body. `close` lets an item dismiss the tray the moment it's selected. ============================================================ */ function MobileNavTray({ eyebrow, current, title, children }) { const [open, setOpen] = React.useState(false); const panelRef = React.useRef(null); const close = React.useCallback(() => setOpen(false), []); /* While open: lock body scroll, wire ESC, and move focus into the panel for keyboard + screen-reader users. All undone on close. */ React.useEffect(() => { if (!open) return; const prevOverflow = document.body.style.overflow; document.body.style.overflow = "hidden"; function onKey(e) { if (e.key === "Escape") setOpen(false); } document.addEventListener("keydown", onKey); const t = setTimeout(() => { if (panelRef.current) panelRef.current.focus(); }, 40); return () => { document.body.style.overflow = prevOverflow; document.removeEventListener("keydown", onKey); clearTimeout(t); }; }, [open]); const drawer = (
{eyebrow}

{title}

{typeof children === "function" ? children(close) : children}
); return ( <> {ReactDOM.createPortal(drawer, document.body)} ); } /* ============================================================ RolesSection — 4 role tabs + the active role's panel. ============================================================ */ function RolesSection({ activeSlug, onSelectRole }) { const roles = (typeof ROLES !== "undefined" && ROLES) || []; /* No hash → default the first role active. A valid slug → that role active. */ const openSlug = activeSlug || (roles[0] && roles[0].slug) || null; const activeRole = roles.find((r) => r.slug === openSlug) || roles[0] || null; const didDeepLink = useRefLP(Boolean(activeSlug)); /* If the visitor arrived via a role-specific URL, the matching tab is already active — bring the tab strip into view once on mount so the deep link lands on the relevant content. */ useEffectLP(() => { if (!didDeepLink.current || !openSlug) return; const t = setTimeout(() => { const el = document.getElementById("roles-tabs"); if (el) { const y = el.getBoundingClientRect().top + window.scrollY - 130; window.scrollTo({ top: y, behavior: "smooth" }); } }, 120); return () => clearTimeout(t); }, []); if (!activeRole) return null; const sell = activeRole.sell || {}; return (
{/* Tabs sit on the horizontal rule; selecting one swaps the copy below and updates the #/ hash (no reload). */}
{roles.map((r) => { const active = openSlug === r.slug; return ( ); })}
{/* Mobile: the four-up tab strip collapses to a left slide-out tray. The trigger shows the active role; the tray lists all four. */} {(close) => (
    {roles.map((r) => { const active = openSlug === r.slug; return (
    • ); })}
)} {/* Active role panel — clearer hierarchy: a lead statement, then the specific problems, then the outcome + what it looks like + CTA. Tan treatment throughout (no black box). */}
{/* LEFT — the role header (No. + title, top-aligned with the right column's "problems" header), then the main copy, "what it looks like in practice", and the CTA. */}
{/* Role header — names the active role; changes when you switch tabs. */}
{activeRole.num}

{activeRole.title}

{/* Lead — the outcome statement combined with the role summary. */}

{sell.outcome ? `${sell.outcome} ` : ""}{sell.value}

What it looks like in practice
    {(activeRole.looksLike || []).map((b, i) => (
  • {b}
    • ))}
Let’s connect →
{/* RIGHT — the specific problems this role solves. */}

The problems I solve

    {(sell.problems || []).map((p, i) => (
  1. {String(i + 1).padStart(2, "0")}

    {p.title}

    {p.body}

    2. ))}
); } /* ============================================================ AboutMe — default landing. New page header → roles → Leadership. ============================================================ */ function AboutMe({ activeSlug, onSelectRole }) { return (
{/* Watercolour atmosphere — blooms + ink/accent specks, matching the Career story page's speck style. */} {typeof Bloom !== "undefined" && ( <> )} {typeof Splatter !== "undefined" && ( <> )}
{/* Eyebrow + header (sub-header removed for a simpler page). */}
About me · Anastasia Vastola

Four Areas of Expertise

{/* The four roles (moved here from the Services page) */} {/* Cross-promo → Services (#services) + Career story (#journey). */}
{typeof SubstackSignup !== "undefined" && } How we engage → View case studies →
{/* Existing About me content — How I lead · What I hold (unchanged copy). */} {typeof Leadership !== "undefined" && }
); } /* ============================================================ ServicesPage — standalone "Services" page: header + sub-header + "How we engage / four ways in" + closing CTA. ============================================================ */ function ServicesPage() { return (
{typeof Bloom !== "undefined" && ( <> )}
{/* Page eyebrow only — headline + sub-header removed for a simpler page. */}
Services · For founders, executives & operators
{/* ===== HOW WE ENGAGE — the full "four ways in" material ===== */}
How we engage

Four ways in

{(typeof ENGAGEMENT_MODES !== "undefined" ? ENGAGEMENT_MODES : []).map((m) => (
{m.n}

{m.title}

{m.duration}

{m.body}

))}
{/* Cross-promo → the Career story page (#journey switches the view). */}
{typeof SubstackSignup !== "undefined" && } Want the proof? View case studies →
); } Object.assign(window, { RolesSection, AboutMe, ServicesPage, MobileNavTray });