// sw-launch.jsx — the refined layouts for the two launch pages (6 Nov 2026, approved by Krish the same day).
// The Soul's Compass and The Wheel of Becoming only. The copy is in pages-copy.js; only the presentation differs,
// plus the Wheel's "Recordings" row. Remove this file (and its script tag in index.html) to go back to the originals.
const LAUNCH_PAGES = ['soul-compass', 'wheel'];
const lCream = TOK.cream;
const lSoft = TOK.creamSoft;
// A quiet gold text link with an arrow, for the extra "next step" points down the two pages (Krish, 6 Nov 2026)
// The Compass booking link is the one on the page's own closing button, so they always match
const compassHref = () => window.PAGES['soul-compass'].sections.find(x => x.type === 'cta').buttons[0].href;
function StepLink({ label, href, onClick, color = C.ember, style = {} }) {
return (
{label} →
);
}
const applyLink = (navigate, color, style) => ;
// The page hero as drawn by sw-pagekit.jsx, with one gold button under the italic line (Krish, 6 Nov 2026)
function HeroWithAction({ s, label, onClick, deep }) {
return (
{s.wheel && (
)}
{s.label}
{s.title}
{s.sub}
{label}
);
}
// ── The Soul's Compass ────────────────────────────────────────
const COMPASS = {
hero: ({ s }) => { window.location.href = compassHref(); }} />,
// Opening: the words on the left, and a large wheel to the right as on About's "What I believe";
// its ember travels round the rim as you scroll (the site's "The year turns" touch in sw-interactions.js)
// A wheel to the right, sized to sit inside the section's usual height, so the motif is there without adding space;
// its ember travels round the rim as you scroll (the site's "The year turns" touch in sw-interactions.js)
text: ({ s }) => {
if (s.heading !== 'A needle that settles') return KIT.text({ s });
return (
{s.heading}
);
},
// The five outcomes: numbered, larger and spaced, so they scan at a glance
list: ({ s }) => (
{s.heading}
{s.items.map((it, i) => (
{i + 1}{it.charAt(0).toUpperCase() + it.slice(1)}
))}
{s.quote &&
}
),
// Investment and booking together. "Email to book your place" stays until a direct registration and payment process exists (Krish, 6 Nov 2026)
price: ({ s }) => (
{s.label}{s.amount}
{s.note}
{s.extra}
{ window.location.href = 'mailto:krish@krishsurroy.com?subject=The%20Soul%E2%80%99s%20Compass'; }}>Email to book your place
),
cta: ({ s, navigate }) => KIT.cta({ s: { ...s, buttons: [{ label: 'Email to book your place', href: s.buttons[0].href }] }, navigate }),
};
// ── The Wheel of Becoming ─────────────────────────────────────
const WHEEL = {
hero: ({ s, navigate }) => { navigate('apply'); window.scrollTo(0, 0); }} />,
// "A council, and a year that works on you", with the way to apply at its end
text: ({ s, navigate }) => {
if (s.heading !== 'A council, and a year that works on you') return KIT.text({ s });
return (
);
},
// Who it's for, with the way to apply beside "Who the Soul Awakened Man is"
who: ({ s, navigate }) => (
{s.heading}
{s.buttons && }
{applyLink(navigate)}
{s.quotes.map(q => )}
),
// The eight gates as an almanac, with the wheel beside them: the ember travels round as you read (see GateAlmanac)
gates: ({ s }) => ,
// Movements unchanged, with the recording arrangement added to the details (from the Terms; Krish approved the wording, 6 Nov 2026)
movements: ({ s }) => (
<>
{KIT.movements({ s: { ...s, id: 'how-it-works', details: [...s.details, ['Recordings', 'Ceremonies and councils are recorded, and shared only with the council, in the private course area.']] } })}
),
covenant: ({ s }) => KIT.covenant({ s: { ...s, id: 'covenant' } }),
// The six changes as pairs: the soul's words on the left, a gold thread, the plain words on the right
changes: ({ s }) => (
{s.heading}
In the language of the soulIn practice
{s.items.map(([soul, plain]) => (
{soul}
{plain}
))}
),
// The investment, with the way to apply right beside it
price: ({ s, navigate }) => (
<>
{KIT.price({ s: { ...s, id: 'investment' } })}
{ navigate('apply'); window.scrollTo(0, 0); }}>Apply for the Wheel
),
};
// ── One turn of the year: the gates, with the wheel kept in view ──
// The wheel never moves. Only the ember travels along the rim: clockwise as you read down from Imbolc to Alban Arthan,
// back anticlockwise if you scroll up, and it rests at Alban Arthan when the gates end. With reduced motion it steps
// straight to each gate. (The viewBox differs from the site's other wheels on purpose, so sw-interactions.js leaves it alone.)
const RIM = ['Alban Hefin', 'Lughnasadh', 'Alban Elfed', 'Samhain', 'Alban Arthan', 'Imbolc', 'Alban Eilir', 'Beltane'];
const rimPt = (i, r) => [300 + r * Math.sin(i * Math.PI / 4), 300 - r * Math.cos(i * Math.PI / 4)];
function GateWheel({ size, label, sub, compact }) {
const gid = React.useId().replace(/:/g, '');
const [ex, ey] = rimPt(RIM.indexOf('Imbolc'), 290); // the ember starts at Imbolc and is turned from there
return (
);
}
function GateAlmanac({ s }) {
const root = React.useRef(null);
const rows = React.useRef([]);
const angle = React.useRef(0);
const raf = React.useRef(0);
const [active, setActive] = React.useState(-1); // -1: before the wheel turns; 0 to 7: Imbolc to Alban Arthan
const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const all = [{ ...s.before, n: '', theme: '' }, ...s.gates];
// Which gate is being read: the last row whose top has passed the reading line, 45% down the screen
React.useEffect(() => {
const read = () => {
const line = window.innerHeight * 0.45;
let a = -1;
rows.current.forEach((r, i) => { if (r && r.getBoundingClientRect().top <= line) a = i - 1; });
setActive(a);
};
read();
window.addEventListener('scroll', read, { passive: true });
window.addEventListener('resize', read);
return () => { window.removeEventListener('scroll', read); window.removeEventListener('resize', read); };
}, []);
// Carry the ember to the active gate: 45 degrees a gate, clockwise forward, anticlockwise back
React.useEffect(() => {
const put = (a) => root.current && root.current.querySelectorAll('[data-ember]').forEach(g => g.setAttribute('transform', `rotate(${a} 300 300)`));
const to = Math.max(active, 0) * 45;
cancelAnimationFrame(raf.current);
if (reduced) { angle.current = to; put(to); return; }
const from = angle.current;
if (from === to) { put(to); return; }
const dur = 700 + 220 * Math.min(Math.abs(to - from) / 45, 4);
const t0 = performance.now();
const step = (now) => {
const p = Math.min((now - t0) / dur, 1);
const e = p < 0.5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2;
angle.current = from + (to - from) * e;
put(angle.current);
if (p < 1) raf.current = requestAnimationFrame(step);
};
raf.current = requestAnimationFrame(step);
return () => cancelAnimationFrame(raf.current);
}, [active]);
const cur = all[active + 1];
const label = cur.name;
const sub = active < 0 ? cur.when : `${cur.n} of 8 · ${cur.theme}`;
return (
{s.heading}
{/* Phones: a slim bar with a small wheel stays at the top while the gates scroll past, then leaves with them */}
{label}{sub}
{all.map((gt, i) => {
const on = i - 1 === active;
return (