// funnel-engine.jsx — config-driven six-stage funnel engine.
// entry → framing → exercise → results → insight → cta
// Implements the LIFE180 Funnel Architecture: progress always visible,
// "why we ask" tooltips, anonymous-capture-late (email at results), the three
// priority-ordered CTAs, save-and-resume (localStorage), and an agent overlay.
// Exports window.L180FunnelEngine.
const STAGE_KEYS = ["entry", "framing", "exercise", "results", "insight", "cta"];
const STAGE_LABELS = ["Welcome", "The framework", "The exercise", "Your snapshot", "What it means", "Next step"];
const RATE_LABELS = ["Strongly disagree", "Disagree", "Neutral", "Agree", "Strongly agree"];
function L180FunnelEngine({ cfg, tier, mode, onExit, onContinueNext }) {
const hue = window.l180TierHue(cfg.tierN);
const lsKey = "l180_funnel_" + cfg.key;
const [stage, setStage] = React.useState(0);
const [qi, setQi] = React.useState(0); // exercise question index
const [answers, setAnswers] = React.useState({});
const isTool = cfg.type === "tool";
const isRanker = cfg.type === "rank";
const isReflect = cfg.type === "reflect";
const [ranks, setRanks] = React.useState([]);
const [reflectSel, setReflectSel] = React.useState([]);
const [reflectText, setReflectText] = React.useState("");
const [aiBusy, setAiBusy] = React.useState(false);
const [toolVals, setToolVals] = React.useState(function () {
if (!isTool) return {};
const v = { income: cfg.tool.income.default };
cfg.tool.categories.forEach((c) => { v[c.key] = c.default; });
return v;
});
const [email, setEmail] = React.useState("");
const [emailDone, setEmailDone] = React.useState(false);
const [flags, setFlags] = React.useState({}); // agent: flagged question ids
const [restored, setRestored] = React.useState(false);
const [openWhy, setOpenWhy] = React.useState(null);
// resume
React.useEffect(() => {
try {
const saved = JSON.parse(localStorage.getItem(lsKey) || "null");
if (saved) {
if (saved.answers) setAnswers(saved.answers);
if (saved.toolVals) setToolVals(saved.toolVals);
if (saved.ranks) setRanks(saved.ranks);
if (saved.reflectSel) setReflectSel(saved.reflectSel);
if (typeof saved.reflectText === "string") setReflectText(saved.reflectText);
setStage(saved.stage || 0); setQi(saved.qi || 0);
}
} catch (e) {}
setRestored(true);
}, [lsKey]);
// save
React.useEffect(() => {
if (!restored) return;
try { localStorage.setItem(lsKey, JSON.stringify({ answers, toolVals, ranks, reflectSel, reflectText, stage, qi })); } catch (e) {}
}, [answers, toolVals, ranks, reflectSel, reflectText, stage, qi, restored, lsKey]);
const diagResult = React.useMemo(() => (isTool || isRanker || isReflect) ? null : window.l180ScoreFunnel(cfg, answers), [cfg, answers, isTool, isRanker, isReflect]);
const toolResult = React.useMemo(() => isTool ? window.l180ComputeTool(cfg, toolVals) : null, [cfg, toolVals, isTool]);
const rankResult = React.useMemo(() => isRanker ? window.l180ComputeRanker(cfg, ranks) : null, [cfg, ranks, isRanker]);
const reflectResult = React.useMemo(() => isReflect ? window.l180ComputeReflect(cfg, reflectSel) : null, [cfg, reflectSel, isReflect]);
const result = isTool ? toolResult : isRanker ? rankResult : isReflect ? reflectResult : diagResult;
const arche = cfg.archetypes[result.archetypeKey];
const answeredCount = (isTool || isRanker || isReflect) ? 0 : cfg.questions.filter((q) => answers[q.id] != null).length;
// Claude-assisted reflection helper (Type D)
async function aiAssist() {
if (aiBusy) return;
setAiBusy(true);
try {
const txt = await window.claude.complete(cfg.reflect.aiContext);
if (txt) setReflectText((t) => (t ? t + "\n\n" : "") + txt.trim());
} catch (e) {
setReflectText((t) => t || "I tend to believe… and it shows up when I… What I'd rather believe is…");
}
setAiBusy(false);
}
function setAns(id, v) { setAnswers((a) => ({ ...a, [id]: v })); }
function resetFunnel() { setAnswers({}); setStage(0); setQi(0); setEmailDone(false); try { localStorage.removeItem(lsKey); } catch (e) {} }
// ---------- agent overlay ----------
const agentPrompts = {
entry: "Set the tone: this isn't a quiz, it's an investigation. Ask what prompted them to look at money now.",
framing: "Walk them through the four dimensions in your words. Ask which one they suspect runs the show.",
exercise: "Let them answer honestly — resist guiding. Flag any answer that surprises you for follow-up.",
results: "Read the profile out loud as a human, not an algorithm. Pause on the dominant dimension.",
insight: "Connect the result to a decision they're facing right now. Don't pitch — get curious.",
cta: "Offer the call as the natural next step. The snapshot is theirs regardless.",
};
function AgentPanel() {
if (mode !== "agent") return null;
return (
Agent · conversation prompt
{agentPrompts[STAGE_KEYS[stage]]}
);
}
// ---------- stage bodies ----------
function Body() {
switch (STAGE_KEYS[stage]) {
case "entry":
return (
Tier 0{cfg.tierN} · {cfg.streamName}
{cfg.streamName}
{cfg.entry.hook}
{cfg.entry.why}
{/* faint 6-step preview */}
{STAGE_LABELS.map((l, i) => (
{i + 1}
{l}
))}
{cfg.timeText}
);
case "framing":
return (
The framework
{cfg.framing.concept}
{cfg.framing.framework.map((f, i) => (
{f.name}
{f.desc}
))}
{cfg.framing.receive}
);
case "exercise": {
if (isTool) {
const r = toolResult;
const fmt = (n) => "$" + Math.round(n).toLocaleString();
return (
The calculator
Map your monthly money
{cfg.tool.categories.map((c) => (
))}
{/* live bar */}
Committed {fmt(r.committed)}
Working {fmt(r.working)}
Sleeping {fmt(r.sleeping)}
Monthly surplus: {fmt(r.surplus)}
{r.surplus < 0 && · spending exceeds income}
);
}
if (isRanker) {
const req = cfg.rank.required;
const itemBy = (k) => cfg.rank.items.find((it) => it.key === k);
const themeColor = (k) => { const it = itemBy(k); const t = cfg.rank.themes.find((x) => x.key === it.theme); return t ? t.color : hue; };
const unpicked = cfg.rank.items.filter((it) => !ranks.includes(it.key));
const full = ranks.length >= req;
const move = (i, d) => setRanks((r) => { const a = [...r]; const j = i + d; if (j < 0 || j >= a.length) return r; const tmp = a[i]; a[i] = a[j]; a[j] = tmp; return a; });
const add = (k) => setRanks((r) => (r.length >= req || r.includes(k)) ? r : [...r, k]);
const remove = (k) => setRanks((r) => r.filter((x) => x !== k));
return (
The exercise
{ranks.length} / {req} chosen
Choose the {req} that matter most — then rank them
{ranks.length > 0 && (
{ranks.map((k, i) => (
{i + 1}
{itemBy(k).label}
))}
)}
{!full && (
{unpicked.map((it) => (
))}
)}
);
}
if (isReflect) {
const sel = reflectSel;
const toggle = (id) => setReflectSel((s) => s.includes(id) ? s.filter((x) => x !== id) : [...s, id]);
const hasAI = !!(window.claude && window.claude.complete);
return (
The reflection
{cfg.reflect.selectPrompt}
{cfg.reflect.beliefs.map((b) => (
))}
{hasAI && (
)}