// sw-pagekit.jsx — Draws every inner page from the copy in pages-copy.js const GROUNDS = { black: { bg: C.black, text: C.white, body: C.grey4, label: C.ember, line: C.line }, slate: { bg: C.slate, text: C.white, body: C.grey4, label: C.ember, line: C.line }, parchment: { bg: C.parchment, text: C.ink, body: C.ink, label: C.emberDeep, line: 'rgba(28,30,26,0.14)' }, }; const ground = (s) => GROUNDS[s.bg] || GROUNDS.black; function Section({ s, children, style = {} }) { const g = ground(s); return (
{s.underlay === 'wheel' &&
} {s.underlay === 'triangles' &&
}
{children}
); } function Heading({ s, children, center }) { const g = ground(s); return (
{s.label && {s.label}} {children && {children}}
); } function Paras({ s, paras, size = 18 }) { const g = ground(s); return paras.map((p, i) => (

{p}

)); } // TidyCal's booking calendar. Its script swaps a div for the calendar, and only scans the page on first load, // so the div is added by hand here and started with TidyCal.init when you come back to the page. // Opens a TidyCal booking page in a new tab (used instead of the embed since 6 Nov 2026) const openTidyCal = (path) => window.open(`https://tidycal.com/${path}`, '_blank', 'noopener'); // TidyCal's booking calendar in a modal window, opened from a button (Readings and the free call, 6 Nov 2026). // Midnight blue with a gold edge; Esc, the close button or a click outside closes it; the page behind doesn't scroll. // TidyCal's own branding stays inside, untouched. function TidyCalModal({ path, label, title }) { const [open, setOpen] = React.useState(false); const closeBtn = React.useRef(null); const opener = React.useRef(null); const scroller = React.useRef(null); React.useEffect(() => { if (!open) return; const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; const key = (e) => { if (e.key === 'Escape') setOpen(false); }; window.addEventListener('keydown', key); // When a time is picked, TidyCal asks to scroll to the top of its calendar, and its script scrolls the page // behind instead. Bring the window back to its top, where the booking summary is, and keep the page still (9 Nov 2026) const keepY = window.scrollY; const msg = (e) => { if (!/^https:\/\/([a-z0-9-]+\.)?tidycal\.com$/.test(e.origin) || typeof e.data !== 'string' || !e.data.includes(':scrollToOffset')) return; scroller.current && scroller.current.scrollTo({ top: 0, behavior: 'smooth' }); setTimeout(() => window.scrollTo(0, keepY), 0); }; window.addEventListener('message', msg); setTimeout(() => closeBtn.current && closeBtn.current.focus(), 30); return () => { document.body.style.overflow = prev; window.removeEventListener('keydown', key); window.removeEventListener('message', msg); opener.current && opener.current.focus(); }; }, [open]); return ( <> setOpen(true)}>{label} {/* Drawn at the end of the page (a portal), so a card's hover lift or a section's layering can't trap it */} {open && ReactDOM.createPortal(
setOpen(false)} className="cal-modal" style={{ position: 'fixed', inset: 0, zIndex: 500, background: 'rgba(5,8,13,0.82)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 'clamp(0px, 3vw, 40px)' }}>
e.stopPropagation()} className="cal-panel" style={{ position: 'relative', width: 'min(760px, 100%)', maxHeight: '92vh', display: 'flex', flexDirection: 'column', background: C.black, border: `1px solid ${C.lineStrong}`, borderTop: `2px solid ${C.ember}`, boxShadow: '0 30px 80px rgba(0,0,0,0.6)' }}>
{title || label}
, document.body )} ); } function TidyCalEmbed({ path }) { const host = React.useRef(null); React.useEffect(() => { const box = host.current; const el = document.createElement('div'); el.className = 'tidycal-embed'; el.dataset.path = path; box.appendChild(el); if (window.TidyCal) { window.TidyCal.init(el); } else if (!document.getElementById('tidycal-script')) { const script = document.createElement('script'); script.id = 'tidycal-script'; script.src = 'https://asset-tidycal.b-cdn.net/js/embed.js'; script.async = true; document.body.appendChild(script); } return () => { box.innerHTML = ''; }; }, [path]); return
; } function Quote({ q, who, s }) { const g = ground(s || {}); return (

150 ? 'normal' : T.serifStyle, fontSize: 19, lineHeight: 1.6, color: g.text, marginBottom: 10 }}>“{q}”

{who}
); } function Buttons({ buttons, navigate, align = 'center' }) { return (
{buttons.map(b => { const act = () => { if (b.href) { window.location.href = b.href; } else { navigate(b.to); window.scrollTo(0, 0); } }; return b.outline ? {b.label} : {b.label}; })}
); } // ── Section types ───────────────────────────────────────────── const KIT = { hero: ({ s }) => (
{s.wheel && (
)}
{s.label}

{s.title}

{s.sub}

), facts: ({ s }) => (
{s.items.map(([k, v]) => (
{k} {v}
))}
), text: ({ s }) => { const g = ground(s); const words = (
{s.heading} {s.quote && } {s.draft && {s.draft}}
); // Photo running to the page edge, with no stripe of padding around it if (s.bleed) return (
{words}
); // Words and portrait over a landscape running the full width if (s.backdrop) return (
{words}
); if (s.manifesto) return (
{words}
Manifesto
); return (
{s.image ? (
{!s.flip && words} {s.flip && words}
) :
{words}
}
); }, story: ({ s }) => (

{s.paras[0]}

), fit: ({ s }) => { const col = (title, items, mark, colour) => (

{title}

); const inner = ( <> {s.heading}
{col(s.yesTitle, s.yes, '✦', C.ember)} {col(s.noTitle, s.no, '·', C.grey3)}
); if (s.backdrop) return (
{inner}
); return
{inner}
; }, // Drawn like the home page's NatureBand: the photo on a taller layer inside the strip, so the photo drift reaches it (9 Nov 2026) band: ({ s }) => (
), cards: ({ s, navigate }) => (
{s.heading && {s.heading}}
{s.items.map(w => ( ))}
), doors: ({ s }) => (
{s.heading}
{s.doors.map(d => (
{d.label}

{d.title}

{d.body}
))}
), gates: ({ s }) => (
{s.heading}
{s.before.when}

{s.before.name}

{s.before.body}
{s.gates.map(gt => (
{gt.n} · {gt.when}

{gt.name}

{gt.theme}

{gt.body}

))}
), movements: ({ s }) => (
{s.heading}
{s.items.map(m => (
{m.n}

{m.title}

{m.body}

))}
), details: ({ s }) => (
{s.heading} {s.credit &&

{s.credit}

}
), list: ({ s }) => (
{s.heading}
    {s.items.map(i => (
  • ✦{i}
    • ))}
{s.quote &&
}
), four: ({ s }) => (
{s.heading}
{s.items.map(it => (

{it.title}

{it.body}

))}
), covenant: ({ s }) => { const li = (i) =>
  • {i}
    • ; return (
    {s.heading}

    To the men at the table

      {s.toMen.map(li)}

    For yourself

      {s.forSelf.map(li)}
    What it asks of you
      {s.asks.map(a =>
    • {a}
      • )}
    ); }, changes: ({ s }) => (
    {s.heading}
    {s.items.map(([soul, plain]) => (

    {soul}

    In practice

    {plain}

    ))}
    ), who: ({ s, navigate }) => (
    {s.heading} {s.buttons && }
    {s.quotes.map(q => )}
    ), holder: ({ s }) => (
    {s.heading}
    ), price: ({ s }) => (
    {s.label} {s.amount}

    {s.note}

    {s.extra}

    {s.draft && {s.draft}}
    {s.steps && (
    The path in {s.steps.map(st => (
    {st.n}

    {st.label}: {st.title}

    {st.body}

    ))}

    {s.after}

    )}
    ), credentials: ({ s }) => { const col = (title, items) => (
    {title}
      {items.map(i =>
    • {i}
      • )}
    ); return (
    {s.heading} {s.worlds ? ({ ...s.worlds[k], rows: s.worlds[k].rows.filter(r => !(s.drop || []).includes(r)).concat((s.extra && s.extra[k]) || []) }))} /> : (
    {col('The boardroom', s.boardroom)} {col('The grove', s.grove)} {s.education && col('Education', s.education)}
    )} {s.draft && {s.draft}}
    ); }, press: () => , ways: ({ navigate }) => , application: ({ s, navigate }) => , videos: ({ s }) => { const videos = useVideos(); return (
    {videos.map(v => (

    {v.title}

    ))}
    ); }, booking: ({ s }) => { const g = ground(s); return (
    {s.heading && {s.heading}} {s.body && } {s.terms &&

    Booking means you’re agreeing to my Terms. A reading missed or cancelled with less than 72 hours’ notice can’t be moved or refunded.

    } {/* A button to the TidyCal page, not the embedded calendar: its white "Powered by" bar looked messy on the page (Krish, 6 Nov 2026) */}
    {s.modal ? : openTidyCal(s.path)}>{s.button || 'Book a reading'}}
    ); }, conversation: ({ s, navigate }) => , newsletter: ({ s }) => , placeholder: ({ s }) => (
    {s.heading} {s.body} {s.draft}
    ), contact: ({ s, navigate }) => , legal: ({ s }) => { const g = ground(s); const items = (list) => (
      {list.map((t, i) =>
    • {t}
      • )}
    ); return (
    {s.draft &&
    {s.draft}
    } {s.clauses.map((c, i) => (

    {i + 1}. {c.h}

    {c.items && !c.paras && items(c.items)} {c.paras && } {c.items && c.paras && items(c.items)} {c.draft &&
    {c.draft}
    } {c.after && }
    ))}

    Last updated: {s.updated}

    ); }, cta: ({ s, navigate }) => (
    {s.image && <>
    }

    {s.heading}

    {s.body}

    {s.buttons && } {s.form && } {s.draft &&
    {s.draft}
    }
    ), }; function DetailRows({ rows, light }) { const line = light ? GROUNDS.parchment.line : C.line; return (
    {rows.map(([k, v]) => (
    {k} {v}
    ))}
    ); } // Two ways in, side by side. Only the one you choose opens, so neither hides the other. function Conversation({ s, navigate }) { const fromHash = () => (window.location.pathname.replace(/\/+$/, '') === '/contact' ? 'write' : null); const [open, setOpen] = React.useState(fromHash); const panel = React.useRef(null); const choose = (id) => { setOpen(id); setTimeout(() => { if (panel.current) window.scrollTo({ top: panel.current.getBoundingClientRect().top + window.scrollY - 68, behavior: 'smooth' }); }, 60); }; React.useEffect(() => { const h = () => { const o = fromHash(); if (o) setOpen(o); }; window.addEventListener('popstate', h); return () => window.removeEventListener('popstate', h); }, []); return ( <>
    {s.choices.map(c => (

    {c.title}

    {c.body}

    {c.id === 'call' && s.booking ? : choose(c.id)}>{c.cta}}
    ))}
    {open === 'call' && } {open === 'write' && }
    ); } function ContactForm({ s, navigate }) { const light = s.bg === 'parchment'; const { status, submit, holder } = useSiteForm('message', light ? 'light' : 'dark'); const g = ground(s); const go = (id) => () => { navigate(id); window.scrollTo(0, 0); }; const inp = { background: light ? '#fff' : C.slate, border: `1px solid ${light ? 'rgba(28,30,26,0.2)' : C.line}`, color: light ? C.ink : C.white, padding: '16px 18px', fontSize: 17, fontFamily: T.font, outline: 'none', width: '100%', boxSizing: 'border-box', borderRadius: 2 }; return (
    {s.heading && {s.heading}}
    {status === 'done' ? (

    Thank you. Your message is on its way to me.{LOCAL ? ' (In the mock-up, nothing is sent.)' : ''}

    ) : (