// ─────────────────────────────────────────────────────────────
// Section C · Join-forest flows.
//
// Three variants — they're complementary, not alternatives:
// C1 · Open join — single tap. Preview sheet → "Join" → animated
// bead-onto-ladder, lands in your forests list.
// C2 · Moderated — requires moderator approval. Includes the
// "request with a note" beat + pending state +
// decision view from the moderator's side.
// C3 · Referral code — a small inline flow for "I have a code".
//
// All three share a Forest-preview sheet at the top — what a stranger
// sees before deciding.
// ─────────────────────────────────────────────────────────────
// ─── Shared forest preview header (read-only) ───
function ForestPreviewHero({ forest }) {
const intensity = forestIntensity(forest);
return (
);
}
// Live "what they're saying right now" tease — the strongest hook for
// converting a stranger into a member. Two pulses of recent activity.
function ForestLivePeek() {
return (
What's growing
{PHILOSOPHY_ROOTS.slice(0, 3).map(p => (
{p.handle}· {p.age}
{p.hot && }
{p.body}
))}
);
}
// Members preview row — mutual folk first.
function MembersStrip({ members = PHILOSOPHY_MEMBERS_PREVIEW }) {
return (
Who's in
{members.slice(0, 6).map((m, i) => (
))}
4 from your folk · + 1.8k strangers
);
}
// ──────────────────────────────────────────────────────────────
// C1 · Open join.
// "Slow Cooking" — public + open. One sustained tap, animated
// confirmation, then the forest lives in the user's list.
// ──────────────────────────────────────────────────────────────
function JoinC1_Open() {
const forest = DISCOVER_FORESTS.find(f => f.id === 'd2'); // Slow Cooking
const [state, setState] = React.useState('preview'); // preview | joining | joined
React.useEffect(() => {
if (state !== 'joining') return;
const id = setTimeout(() => setState('joined'), 900);
return () => clearTimeout(id);
}, [state]);
return (
{/* Fixed bottom CTA */}
{state === 'preview' && (
setState('joining')}>Join — one tap
)}
{state === 'joining' && (
Growing your place here…
)}
{state === 'joined' && }
{state === 'preview' && (
Members can leave at any time. You'll arrive as a Stranger.
)}
);
}
function JoinedConfirmation({ forest }) {
return (
You're in {forest.name}
Take a slow loop before you plant — there's no rush.
Enter →
);
}
// ──────────────────────────────────────────────────────────────
// C2 · Moderated join.
// Software & Web — public but moderated. The note field is
// optional but encouraged; the pending state is calm, with a
// trace of "you sent it" persistence. Plus, the moderator-side
// view of the same request.
// ──────────────────────────────────────────────────────────────
function JoinC2_Moderated() {
const forest = DISCOVER_FORESTS.find(f => f.id === 'd4'); // Software & Web
const [phase, setPhase] = React.useState('preview'); // preview | writing | pending
const [note, setNote] = React.useState('');
return (
{/* Moderation note */}
Moderators read each request. A short note about why you'd plant here
usually gets you in within a day.
{phase === 'pending' && (
Pending · sent just now
"{note || 'I write web tooling and want to think out loud about it with people who do too.'}"
We'll surface a quiet Sunlight notification when a moderator decides.
)}
{phase === 'preview' && (
setPhase('writing')}>
Request to join · with a note
)}
{phase === 'writing' && (