{months === 999 ? '∞' : months === 0 ? '🎉 Done!' : `${months} mo`}

{label} {field && } {note &&

{note}

}

); }; const Metric = ({ label, value, est, good, neutral }) => ( ); const Compare = ({ label, yours, bench, unit = '', lower = false }) => { const diff = bench > 0 ? ((yours - bench) / bench * 100) : 0; const isNeutral = Math.abs(diff) <= 0.5; const good = lower ? yours <= bench : yours >= bench; const colorClass = isNeutral ? 'text-amber-500' : (good ? 'text-emerald-600' : 'text-red-500'); const bgClass = isNeutral ? 'bg-amber-100 text-amber-700' : (good ? 'bg-emerald-100 text-emerald-700' : 'bg-red-100 text-red-700'); return ( ); }; const getSarcasticComment = (type, isGood) => { const comments = { verdict: { good: [ "🚀 Marketing ROI goes brrrrr!", "💰 Your accountant just cracked a smile (that's rare)!", "🎯 You're not just marketing, you're printing money!", "🏆 Someone call Forbes, we found a winner!", "🍾 Pop the champagne, this campaign SLAPS!", "⚡ Efficiency so good, even your competitors are jealous!" ], bad: [ "🔥 Congrats, you're Meta's favorite charity donor!", "💸 At this rate, selling lemonade would be MORE profitable!", "😬 Your CFO just fainted. Again. Call 911.", "🎪 This ain't marketing, it's a circus without tickets!", "💀 Even Nigerian princes have better ROI than this...", "🏴‍☠️ Burning money would be more entertaining at this point!" ] }, cac: { good: [ "👑 CAC royalty! Customers basically pay YOU to sell them stuff!", "🎪 Getting customers cheaper than circus peanuts!", "✨ Your competitors are stress-eating right now.", "🦄 This CAC is so good it's almost illegal!", "🎰 Vegas wishes their odds were this good!", "🧙 Magic? Nah, just superior marketing wizardry!" ], bad: [ "💀 Paying more per customer than their lifetime value? Bold strategy, Cotton.", "🤑 Each customer costs more than a Michelin-star dinner. Yikes.", "📉 Your CAC is giving 'I should've stayed in bed' energy.", "🔨 Breaking even? More like breaking your budget!", "🎢 This CAC roller coaster only goes DOWN, baby!", "💸 At this rate, you're basically paying people NOT to buy!" ] }, breakeven: { good: [ "⚖️ Above break-even! You can actually pay rent this month!", "🏆 Making money? In THIS economy?! Absolute legend!", "💪 Break-even who? You're BREAKING profit records!", "🎊 Your bank account is doing the happy dance!", "🌟 Profitability called, it wants to be your bestie!", "🚀 Not just breaking even, you're breaking the SOUND BARRIER!" ], bad: [ "🕳️ Below break-even... but hey, at least the vibes are immaculate?", "😅 Break-even is just a suggestion anyway, right? RIGHT?!", "🎢 Riding the loss roller coaster. Wheee... *nervous laughter*", "🏴‍☠️ Profitability is playing hard to get. Very hard.", "💔 Break-even ghosted you like a bad Tinder date!", "🤡 Math says you're losing money. But what does math know, really?" ] }, funnel: { good: [ "🎯 Funnel smoother than fresh peanut butter!", "💫 Clicks converting like it's Black Friday every day!", "🔥 Gary Vee would literally frame this funnel on his wall.", "🏅 This funnel is chef's kiss perfection!", "🌊 Conversions flowing like Niagara Falls!", "🎰 Every click is a jackpot. DING DING DING!" ], bad: [ "🚰 More leaks than the Titanic on its last day.", "😵 Clicks in, tumbleweeds out. Classic.", "🤷 Visitors are confused. Customers are... nowhere?", "🕳️ Your funnel has more holes than Swiss cheese!", "👻 Conversions went ghost mode. Spooky!", "🎪 People are clicking just for the entertainment value!" ] }, risk: { good: [ "🛡️ Sleeping like a baby tonight! Zero stress!", "😎 Chill vibes only. Risk is your little cousin.", "🍀 Lucky you! Risk is more manageable than a house plant!", "🏖️ So low-risk you could run this from a beach!", "🦘 Risk hopped away. Australia is jealous!", "☁️ Risk level: fluffy cloud. You're good!" ], bad: [ "🎰 Las Vegas casinos would call THIS risky.", "😰 High risk = high reward... or high regret. Coin flip time!", "⚠️ Your risk assessment needs a risk assessment!", "🌋 Risk volcano about to erupt! Run!", "💣 This risk is ticking louder than a bomb!", "🏴‍☠️ Arrr, ye be sailing dangerous waters, matey!" ] }, time: { good: [ "⚡ Fast track to success! Buckle up!", "🏃 Hit your goals before your next coffee break!", "🚄 Speed running profitability like a pro gamer!", "🎯 Time to target: Yesterday. Let's GO!", "⏰ So fast, time itself is confused!", "🦅 Flying to your goals at eagle speed!" ], bad: [ "🐌 Patience, young grasshopper... you'll need LOTS of it.", "📅 Your grandkids will celebrate this achievement. Maybe.", "⏳ Time to target: Yes. Just... yes.", "🦖 By the time you hit target, dinosaurs might be back!", "☕ Better brew some strong coffee. You'll be here a while.", "🧓 Retirement plan? This IS your retirement plan now!" ] }, persona: { good: [ "🎯 Customer persona? *Chef's kiss* Perfetto!", "👥 You know your audience like your Netflix password!", "🔮 Your targeting is straight-up magical!", "🧠 Mind-reader level targeting. Impressive!", "🎭 Persona game so strong, Shakespeare is taking notes!", "💎 Diamond-precision targeting. Flawless!" ], bad: [ "🎭 Persona as confused as a cat at a dog show.", "👻 Your ideal customer is... invisible? Ghosts?", "🤔 Time to actually MEET your customers. Like, IRL.", "🎪 Targeting everyone = targeting no one. Circus logic!", "🌀 Persona spinning like a confused weather vane!", "🤷 Who's your customer? Great question. You tell us!" ] } }; const arr = comments[type]?.[isGood ? 'good' : 'bad'] || ["Keep going! (You got this... probably)"]; return arr[Math.floor(Math.random() * arr.length)]; }; function App() { const saved = typeof localStorage !== 'undefined' ? JSON.parse(localStorage.getItem('mfData4') || 'null') : null; const getIndustryDefaults = (id) => { const ind = industries[id]; const b = ind.y26; const baseOrders = 500; const traffic = Math.round(baseOrders / (b.cr / 100)); const budget = Math.round(baseOrders * ind.cac); return { traffic, budget, orders: baseOrders }; }; const defaultIndustry = 'ecom_fashion'; const defaults = getIndustryDefaults(defaultIndustry); const [industry, setIndustry] = useState(saved?.industry || defaultIndustry); const [margin, setMargin] = useState(saved?.margin || industries[defaultIndustry].margin); const [ltv, setLtv] = useState(saved?.ltv || industries[defaultIndustry].ltv); const [cpc, setCpc] = useState(saved?.cpc || industries[defaultIndustry].y26.cpc); const [cpm, setCpm] = useState(saved?.cpm || industries[defaultIndustry].y26.cpm); const [ctr, setCtr] = useState(saved?.ctr || industries[defaultIndustry].y26.ctr); const [cr, setCr] = useState(saved?.cr || industries[defaultIndustry].y26.cr); const [aov, setAov] = useState(saved?.aov || industries[defaultIndustry].y26.aov); const [traffic, setTraffic] = useState(saved?.traffic || defaults.traffic); const [budget, setBudget] = useState(saved?.budget || defaults.budget); const [actualOrders, setActualOrders] = useState(saved?.actualOrders || defaults.orders); const [targetRev, setTargetRev] = useState(saved?.targetRev || defaults.orders * 2 * industries[defaultIndustry].y26.aov); const [targetOrders, setTargetOrders] = useState(saved?.targetOrders || defaults.orders * 2); const [extraBudget, setExtraBudget] = useState(saved?.extraBudget || defaults.budget); const [monthlyGrowth, setMonthlyGrowth] = useState(saved?.monthlyGrowth || 5); const [scenarioBudgetMode, setScenarioBudgetMode] = useState('needed'); const [fieldCompleted, setFieldCompleted] = useState({}); const markFieldComplete = (field) => { setFieldCompleted(prev => ({ ...prev, [field]: true })); }; // 'needed' or 'new' const [lastTargetEdit, setLastTargetEdit] = useState('orders'); const [scenarios, setScenarios] = useState(saved?.scenarios || { pessimistic: { ctr: 0.87, cr: 1.34, cpc: 0.58, cpm: 10.37 }, realistic: { ctr: 1.24, cr: 1.92, cpc: 0.51, cpm: 9.10 }, optimistic: { ctr: 1.61, cr: 2.50, cpc: 0.46, cpm: 8.19 } }); const [modalOpen, setModalOpen] = useState(null); const handleTargetOrdersChange = (val) => { setTargetOrders(val); setTargetRev(Math.round(val * aov)); setLastTargetEdit('orders'); }; const handleTargetRevChange = (val) => { setTargetRev(val); if (aov > 0) setTargetOrders(Math.round(val / aov)); setLastTargetEdit('revenue'); }; useEffect(() => { if (lastTargetEdit === 'orders' && aov > 0) { setTargetRev(Math.round(targetOrders * aov)); } else if (lastTargetEdit === 'revenue' && aov > 0) { setTargetOrders(Math.round(targetRev / aov)); } }, [aov]); const changeIndustry = (id) => { setIndustry(id); const ind = industries[id]; const b = ind.y26; const defs = getIndustryDefaults(id); setMargin(ind.margin); setLtv(ind.ltv); setAov(b.aov); setCpc(b.cpc); setCpm(b.cpm); setCtr(b.ctr); setCr(b.cr); setTraffic(defs.traffic); setBudget(defs.budget); setActualOrders(defs.orders); setTargetOrders(defs.orders * 2); setTargetRev(defs.orders * 2 * b.aov); setExtraBudget(defs.budget); setMonthlyGrowth(getMonthlyGrowthBenchmark(id)); setScenarios({ pessimistic: { ctr: b.ctr * 0.7, cr: b.cr * 0.7, cpc: b.cpc * 1.15, cpm: b.cpm * 1.15 }, realistic: { ctr: b.ctr, cr: b.cr, cpc: b.cpc, cpm: b.cpm }, optimistic: { ctr: b.ctr * 1.3, cr: b.cr * 1.3, cpc: b.cpc * 0.9, cpm: b.cpm * 0.9 } }); }; const ind = industries[industry]; const yoyChange = getYoYChange(industry); const benchCr = ind.y26.cr; const benchCpc = ind.y26.cpc; const benchCpm = ind.y26.cpm; const benchAov = ind.y26.aov; const benchCac = ind.cac; const benchLtv = ind.ltv; const calc = useMemo(() => { const estOrders = Math.round(traffic * (cr / 100)); const actualCr = traffic > 0 ? (actualOrders / traffic) * 100 : 0; const revenue = actualOrders * aov; const estRevenue = estOrders * aov; const grossProfit = revenue * (margin / 100); const netProfit = grossProfit - budget; const roas = budget > 0 ? revenue / budget : 0; const roi = budget > 0 ? (netProfit / budget) * 100 : 0; const cac = actualOrders > 0 ? budget / actualOrders : 0; const estCac = estOrders > 0 ? budget / estOrders : 0; const maxCac = aov * (margin / 100); const cacLtv = ltv > 0 ? cac / ltv : 0; const payback = maxCac > 0 ? cac / maxCac : 0; const beRoas = margin > 0 ? 100 / margin : 0; const beCpa = maxCac; const beCr = budget > 0 && traffic > 0 && aov > 0 && margin > 0 ? (budget / (traffic * aov * (margin / 100))) * 100 : 0; const visitorValue = traffic > 0 ? revenue / traffic : 0; const estVisitorValue = traffic > 0 ? estRevenue / traffic : 0; const ordersGap = Math.max(0, targetOrders - actualOrders); const revGap = Math.max(0, targetRev - revenue); const actualCrDecimal = actualCr / 100; const extraTrafficNeeded = actualCrDecimal > 0 ? ordersGap / actualCrDecimal : 0; const extraBudgetNeeded = extraTrafficNeeded * cpc; const totalBudgetNeeded = budget + extraBudgetNeeded; const totalAvailableBudget = budget + extraBudget; const extraTrafficWithBudget = cpc > 0 ? extraBudget / cpc : 0; const extraOrdersWithBudget = extraTrafficWithBudget * actualCrDecimal; const revenueWithExtraBudget = (actualOrders + extraOrdersWithBudget) * aov; const grossProfitWithExtra = revenueWithExtraBudget * (margin / 100); const profitWithExtraBudget = grossProfitWithExtra - totalAvailableBudget; const progress = targetRev > 0 ? Math.min(100, (revenue / targetRev) * 100) : 0; const canReach = totalBudgetNeeded <= totalAvailableBudget; const budgetDiff = totalBudgetNeeded - extraBudget; const budgetDiffFromExtra = totalBudgetNeeded - totalAvailableBudget; const months = budgetDiff > 0 ? Math.ceil(Math.log(1 + (budgetDiff / budget)) / Math.log(1 + (monthlyGrowth / 100))) : 0; const cacScore = benchCac > 0 ? Math.min(99, Math.max(1, 100 - ((cac / benchCac) * 50))) : 50; const beScore = beRoas > 0 ? Math.min(99, Math.max(1, (roas / beRoas) * 50)) : 50; const cpcRatio = benchCpc > 0 ? cpc / benchCpc : 1; const crRatio = benchCr > 0 ? actualCr / benchCr : 1; const funnelScore = Math.min(99, Math.max(1, (100 - (cpcRatio - 1) * 50 + (crRatio - 1) * 50))); let risk = 'Low', riskScore = 80; if (roas < beRoas * 0.8 || cacLtv > 0.5) { risk = 'High'; riskScore = 25; } else if (roas < beRoas * 1.2 || cacLtv > 0.33) { risk = 'Medium'; riskScore = 55; } const yoyCacIncrease = parseFloat(yoyChange.cpc); riskScore = Math.max(1, Math.min(99, riskScore - yoyCacIncrease)); const expectedCacNextYear = cac * (1 + yoyCacIncrease / 100); const targetProbability = Math.min(99, Math.max(1, progress * 0.5 + (roas >= beRoas ? 30 : 0) + (cacLtv <= 0.33 ? 20 : 0))); const issues = []; const isOrdersBelowBenchmark = actualOrders < estOrders; const isCrBelowBenchmark = actualCr < benchCr; const isCacAboveBenchmark = cac > benchCac; if (isCrBelowBenchmark) { if (actualCr < benchCr * 0.5) { issues.push({ icon: '🎯', text: 'Targeting & Persona need work', area: 'targeting' }); issues.push({ icon: '💬', text: 'Ad messaging not resonating', area: 'messaging' }); } else if (actualCr < benchCr * 0.8) { issues.push({ icon: '🖥️', text: 'Landing pages need optimization', area: 'landing' }); issues.push({ icon: '🛒', text: 'Checkout has friction', area: 'checkout' }); } } if (isCacAboveBenchmark) { issues.push({ icon: '💸', text: `CAC €${cac.toFixed(0)} > industry €${benchCac}`, area: 'cac' }); } const personaGood = !isCrBelowBenchmark && !isCacAboveBenchmark; const personaIssues = []; if (isCrBelowBenchmark) personaIssues.push('Low CR'); if (isCacAboveBenchmark) personaIssues.push('High CAC'); const targetGrossProfit = targetRev * (margin / 100); const targetNetProfit = targetGrossProfit - totalBudgetNeeded; return { actualOrders, estOrders, revenue, estRevenue, grossProfit, netProfit, roas, roi, actualCr, cac, estCac, maxCac, cacLtv, payback, beRoas, beCpa, beCr, visitorValue, estVisitorValue, revGap, ordersGap, extraBudgetNeeded, extraTrafficNeeded, totalBudgetNeeded, progress, canReach, months, risk, riskScore, isProfitable: netProfit > 0, personaGood, personaIssues, targetProbability, targetNetProfit, issues, isOrdersBelowBenchmark, isCrBelowBenchmark, isCacAboveBenchmark, cacScore, beScore, funnelScore, budgetDiff, budgetDiffFromExtra, revenueWithExtraBudget, profitWithExtraBudget, extraOrdersWithBudget, yoyCacIncrease, expectedCacNextYear, totalAvailableBudget }; }, [traffic, budget, aov, cpc, cr, margin, ltv, targetRev, targetOrders, extraBudget, actualOrders, yoyChange, benchCr, benchCpc, benchCac, monthlyGrowth]); const scenarioCalcs = useMemo(() => { const calcS = (s) => { const newBudget = scenarioBudgetMode === 'needed' ? calc.totalBudgetNeeded : extraBudget; const crDecimal = s.cr / 100; const newTraffic = traffic + calc.extraTrafficNeeded; const orders = Math.round(newTraffic * crDecimal); const rev = orders * aov; const gross = rev * (margin / 100); const profit = Math.round(gross - newBudget); const roas = newBudget > 0 ? rev / newBudget : 0; const scenarioCac = orders > 0 ? newBudget / orders : 0; return { revenue: Math.round(rev), profit, roas, orders, budget: Math.round(newBudget), cac: scenarioCac, reachTarget: rev >= targetRev }; }; return { pessimistic: calcS(scenarios.pessimistic), realistic: calcS(scenarios.realistic), optimistic: calcS(scenarios.optimistic) }; }, [scenarios, calc, traffic, aov, margin, scenarioBudgetMode, extraBudget]); const insights = useMemo(() => { const list = [...calc.issues]; if (calc.roas < calc.beRoas) list.push({ icon: '📉', text: `ROAS ${calc.roas.toFixed(2)}x < BE ${calc.beRoas.toFixed(2)}x`, type: 'danger' }); if (ltv < aov * 2) list.push({ icon: '💎', text: 'Low LTV = one-time buyers', type: 'info' }); return list; }, [calc, ltv, aov]); const getBudgetComment = () => { const diff = calc.budgetDiff; if (diff <= 0) return { text: "🎉 Budget surplus! Buy a yacht?", color: 'text-emerald-600' }; if (diff > budget * 2) return { text: "💸 Triple budget needed. Rob a bank? 🏦", color: 'text-red-500' }; if (diff > budget) return { text: "😬 Double budget needed. Sell a kidney?", color: 'text-amber-600' }; if (diff > budget * 0.5) return { text: "🤔 50%+ more needed. Sweet-talk the CFO!", color: 'text-amber-500' }; return { text: "✨ Almost there! Just a bit more juice.", color: 'text-emerald-500' }; }; const budgetComment = getBudgetComment(); const save = () => { localStorage.setItem('mfData4', JSON.stringify({ industry, margin, ltv, cpc, cpm, ctr, cr, aov, traffic, budget, actualOrders, targetRev, targetOrders, extraBudget, scenarios, monthlyGrowth })); alert('😅 Nah, sorry friend!\n\nThis is a FREE tool made for quick sanity checks, not your enterprise planning solution.\n\nIf you want a REAL marketing plan with actual humans who know what they\'re doing, hit us up at SocialScore.io\n\nNow go forth and conquer! (Or at least try not to burn all your budget in week 1) 🚀'); }; const reset = () => { if (confirm('Whoa there, cowboy! 🤠\n\nYou\'re about to DELETE everything you just did here. Poof! Gone! Like it never happened.\n\nBut here\'s the thing: In real business, there\'s no reset button. Your mistakes stick around like that embarrassing email you sent to "Reply All".\n\nStill want to nuke this and start fresh? Your funeral... 💀')) { localStorage.removeItem('mfData4'); location.reload(); } }; return ( ); } ReactDOM.createRoot(document.getElementById('root')).render();