/* Typeform-style Savings Calculator 6 guided questions → annual hours saved + "what you would have banked last year" Flow: industry → team size → email hours → tools used → pain areas → current spend Output: giant hours/year number, dollar value, what-you-could-have-done cards */ const { useState, useMemo, useEffect } = React; /* ─── Question definitions ─── */ const QUESTIONS = [ { id: 'industry', kind: 'choice', label: 'Which best describes your firm?', sub: 'Pick one — drives our baseline numbers.', options: [ { v:'accounting', t:'Accounting / bookkeeping', i:'calc' }, { v:'insurance', t:'Insurance agency', i:'shield' }, { v:'advisory', t:'Financial advisory / RIA', i:'chart' }, { v:'other', t:'Other small business', i:'puzzle' }, ], }, { id: 'team', kind: 'slider', label: "How many people are on your team?", sub: 'Include everyone who touches client work.', min: 1, max: 20, default: 5, unit: 'people', }, { id: 'emailHours', kind: 'slider', label: "How many hours per week does your team spend on email + inbox triage?", sub: "Total across the whole team. Most 5-person firms say ~15 hrs/week.", min: 2, max: 60, default: 15, unit: 'hrs/week', }, { id: 'crmUpdates', kind: 'slider', label: "Weekly hours on CRM updates, notes, and data entry?", sub: 'Typing client info, logging calls, updating deals.', min: 0, max: 40, default: 12, unit: 'hrs/week', }, { id: 'painAreas', kind: 'multi', label: "What else eats your team's week?", sub: 'Pick all that apply. We only count what you check.', options: [ { v:'invoicing', t:'Invoicing + bookkeeping', i:'bill', hrs:7 }, { v:'content', t:'Content writing + posting', i:'doc', hrs:5 }, { v:'research', t:'Research + data pulls', i:'eye', hrs:6 }, { v:'meetings', t:'Meeting notes + follow-ups', i:'phone', hrs:4 }, { v:'reports', t:'Report generation', i:'chart', hrs:4 }, { v:'proposals', t:'Proposals + quotes', i:'receipt', hrs:3 }, ], }, { id: 'currentSpend', kind: 'choice', label: "What does your firm currently spend on AI tools per month?", sub: "Everything — ChatGPT, Claude, Zapier, Make, agency tools.", options: [ { v: 0, t:'$0 — nothing yet', i:'x' }, { v: 100, t:'~$100 — a few subscriptions', i:'bill' }, { v: 400, t:'~$400 — scattered tools', i:'bill' }, { v: 1000, t:'$1,000+ — we\'re paying a lot', i:'dollar' }, ], }, ]; /* ─── Calculation ─── */ function calcSavings(answers) { const team = answers.team || 5; const industryMult = { accounting:1.0, insurance:0.95, advisory:1.1, other:0.9 }[answers.industry] || 1.0; const emailAutomation = 0.65; // 65% of email hours recoverable const crmAutomation = 0.80; // 80% of CRM updates recoverable const painAutomation = 0.55; // 55% of other pain-area hours recoverable const teamScale = Math.sqrt(team / 5); // scale factor — bigger teams amplify, non-linearly const painHoursWeekly = (answers.painAreas || []).reduce((sum, v) => { const opt = QUESTIONS[4].options.find(o => o.v === v); return sum + (opt ? opt.hrs : 0); }, 0); const emailSaved = (answers.emailHours || 0) * emailAutomation * teamScale * industryMult; const crmSaved = (answers.crmUpdates || 0) * crmAutomation * teamScale * industryMult; const painSaved = painHoursWeekly * painAutomation * teamScale * industryMult; const weeklyHours = emailSaved + crmSaved + painSaved; const annualHours = weeklyHours * 50; // 50 working weeks const hourlyRate = { accounting:85, insurance:75, advisory:125, other:65 }[answers.industry] || 75; const annualDollars = annualHours * hourlyRate; // FTE equivalent (2080 hrs/year is one FTE) const fteEquivalent = annualHours / 2080; // Mammoth cost year 1: setup $4,995 + $1,500/mo × 12 = $22,995 (Growth plan) const mammothCost = 4995 + (1500 * 12); const netSavings = annualDollars - mammothCost; const roiMultiple = annualDollars / mammothCost; const paybackMonths = mammothCost / (annualDollars / 12); return { emailSaved: Math.round(emailSaved), crmSaved: Math.round(crmSaved), painSaved: Math.round(painSaved), weeklyHours: Math.round(weeklyHours), annualHours: Math.round(annualHours), hourlyRate, annualDollars: Math.round(annualDollars), fteEquivalent: fteEquivalent.toFixed(1), mammothCost, netSavings: Math.round(netSavings), roiMultiple: roiMultiple.toFixed(1), paybackMonths: paybackMonths.toFixed(1), }; } /* ─── Main page ─── */ function CalculatorPage() { const [step, setStep] = useState(0); // 0 = intro, 1-6 = questions, 7 = results const [answers, setAnswers] = useState({ industry: null, team: 5, emailHours: 15, crmUpdates: 12, painAreas: [], currentSpend: null, }); const [showConfetti, setShowConfetti] = useState(false); const totalSteps = QUESTIONS.length; const progress = step === 0 ? 0 : step > totalSteps ? 100 : ((step - 1) / totalSteps) * 100; const results = useMemo(() => calcSavings(answers), [answers]); const set = (id, v) => setAnswers(a => ({ ...a, [id]: v })); const toggleMulti = (id, v) => setAnswers(a => { const cur = a[id] || []; return { ...a, [id]: cur.includes(v) ? cur.filter(x => x !== v) : [...cur, v] }; }); const next = () => { if (step === totalSteps) { setStep(totalSteps + 1); setShowConfetti(true); setTimeout(() => setShowConfetti(false), 2500); } else { setStep(s => s + 1); } }; const back = () => setStep(s => Math.max(0, s - 1)); // keyboard nav useEffect(() => { const h = (e) => { if (e.key === 'Enter' && step > 0 && step <= totalSteps && canProceed()) next(); if (e.key === 'ArrowLeft' && step > 0) back(); }; window.addEventListener('keydown', h); return () => window.removeEventListener('keydown', h); }); const canProceed = () => { if (step === 0 || step > totalSteps) return true; const q = QUESTIONS[step - 1]; const v = answers[q.id]; if (q.kind === 'choice') return v !== null && v !== undefined; if (q.kind === 'multi') return Array.isArray(v) && v.length > 0; return true; // slider has default }; const currentQ = step > 0 && step <= totalSteps ? QUESTIONS[step - 1] : null; return (
{/* Progress bar */} {step > 0 && step <= totalSteps && (
)} {/* Intro screen */} {step === 0 && (
60-second calculator

How many hours would you have banked last year?

6 questions. No email required. See exactly what a 5-person firm like yours would have saved — in hours, dollars, and full-time employees.

Press Enter to advance · ← to go back
{/* Preview stat cards */}
{[ { n:'2,080', l:'median hrs saved/yr' }, { n:'$127K', l:'median $ saved/yr' }, { n:'8×', l:'year-1 ROI' }, ].map((s, i) => (
{s.n}
{s.l}
))}
)} {/* Question steps */} {currentQ && (
QUESTION {step} OF {totalSteps}

{currentQ.label}

{currentQ.sub}

{/* CHOICE */} {currentQ.kind === 'choice' && (
{currentQ.options.map((opt, i) => { const selected = answers[currentQ.id] === opt.v; return ( ); })}
)} {/* SLIDER */} {currentQ.kind === 'slider' && (
{answers[currentQ.id]} {currentQ.unit}
set(currentQ.id, parseInt(e.target.value))} className="m-slider" style={{width:'100%'}} />
{currentQ.min} {currentQ.max}
)} {/* MULTI */} {currentQ.kind === 'multi' && (
{currentQ.options.map((opt, i) => { const selected = (answers[currentQ.id] || []).includes(opt.v); return ( ); })}
)} {/* Nav */}
press Enter ↵
)} {/* Results */} {step > totalSteps && ( { setStep(0); }} showConfetti={showConfetti}/> )} {step > totalSteps &&
}
); } /* ─── Results screen ─── */ function ResultsScreen({ results, answers, onRestart, showConfetti }) { const r = results; return ( <> {showConfetti && } {/* Hero number */}
Your numbers

If you'd signed up 12 months ago, you would have banked

{r.annualHours.toLocaleString()}
hours.
= roughly {r.fteEquivalent} full-time {r.fteEquivalent === '1.0' ? 'employee' : 'employees'}, recovered.
{/* Big stat grid */}
{[ { n:`$${r.annualDollars.toLocaleString()}`, l:`Dollar value · @$${r.hourlyRate}/hr`, c:'var(--russet)' }, { n:`${r.roiMultiple}×`, l:'Year-1 ROI', c:'var(--teal)' }, { n:`${r.paybackMonths} mo`, l:'Payback period', c:'var(--gold-deep)' }, { n:`$${r.netSavings.toLocaleString()}`, l:'Net savings year 1', c:'#B85C3C' }, ].map((s, i) => (
{s.n}
{s.l}
))}
{/* Breakdown */}
Where the hours come from

Hours recovered, broken down

Based on the automation rates we measure across our client base. Not promises — actual observed recoveries.

{[ { l:'Email + inbox triage', h:r.emailSaved * 50, pct:65, c:'var(--russet)' }, { l:'CRM updates + notes', h:r.crmSaved * 50, pct:80, c:'var(--teal)' }, { l:'Other pain areas', h:r.painSaved * 50, pct:55, c:'var(--gold-deep)' }, ].map((row, i) => (
{row.l}
{Math.round(row.h).toLocaleString()} hrs/yr ({row.pct}% automated)
))}
{/* What you could have done */}
What {r.annualHours.toLocaleString()} hours means

Instead of doing busywork, you could have…

    {[ `Hired ${Math.floor(r.fteEquivalent)} fewer people`, `Booked ${Math.round(r.annualHours / 8).toLocaleString()} client meetings`, `Taken ${Math.round(r.annualHours / 40).toLocaleString()} weeks of vacation`, `Closed ${Math.round(r.annualHours / 4).toLocaleString()} more billable-hour sprints`, ].map((t, i) => (
  • {Ico.check(13, 'var(--charcoal)')} {t}
    • ))}
{/* Cost comparison */}
The math
Value recovered / year +${r.annualDollars.toLocaleString()}
Mammoth-dev · year 1 all-in −${r.mammothCost.toLocaleString()}
Net savings year 1 ${r.netSavings.toLocaleString()}
{/* CTA + restart */}
Next step

Ready to stop losing {r.annualHours.toLocaleString()} hours a year?

15-minute intro call. No pitch. We'll confirm whether your numbers are conservative or generous — and tell you honestly if we can help.

{/* Share */}
SHARE THIS RESULT
); } /* ─── Confetti (simple) ─── */ function Confetti() { const pieces = Array.from({length:60}, (_, i) => ({ left: Math.random() * 100, delay: Math.random() * 0.8, color: ['var(--russet)','var(--gold)','var(--teal)','#B85C3C','var(--gold-deep)'][i % 5], duration: 2 + Math.random() * 1.5, rot: Math.random() * 360, })); return ( <>
{pieces.map((p, i) => (
))}
); } Object.assign(window, { CalculatorPage });