// calc-result.jsx — Result screen, email gate modal, calculating, animated count-up const { useState: useStateR, useEffect: useEffectR, useRef: useRefR } = React; // ───────────────────────────────────────────────────────────── // Animated count-up // ───────────────────────────────────────────────────────────── function useCountUp(target, duration = 1400, start = 0) { const [val, setVal] = useStateR(start); useEffectR(() => { if (target == null) return; let raf, t0; const ease = (t) => 1 - Math.pow(1 - t, 3); function tick(now) { if (!t0) t0 = now; const p = Math.min((now - t0) / duration, 1); const v = Math.round(start + (target - start) * ease(p)); // Snap to nearest 100 like the real value setVal(Math.round(v / 100) * 100); if (p < 1) raf = requestAnimationFrame(tick); else setVal(target); } raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [target, duration]); return val; } // ───────────────────────────────────────────────────────────── // Report Markdown generator // Mirrors the 3-page content of calc-report.jsx as plain text. // Called by submitLead in app.jsx before POSTing to Kapso. // ───────────────────────────────────────────────────────────── // Ported verbatim from calc-report.jsx getDiagnosis() function getDiagnosisParagraph(inputs, calc) { const fast = inputs.responseTime === 'under_1hr' || inputs.responseTime === '1_4hrs'; const cov = inputs.coverage; if (cov === 'weekdays_only' && !fast) return "You're available roughly 45 hours per week. Your leads come in 168 hours per week. The gap — evenings, Fridays, weekends — is where your revenue is going. Every hour offline is an hour a competitor can reply first."; if (cov === 'weekdays_only' && fast) return "You reply quickly when you're there. The problem is the hours you're not. Evenings, Fridays, and weekends account for 35–45% of all WhatsApp enquiries in the UAE. Those hours are currently unattended."; if (cov === 'weekdays_weekends' && !fast) return "You're available most days, but your response time is giving leads enough time to contact a competitor and hear back first. In the UAE, 78% of customers commit to whoever responds first."; if (cov === 'weekdays_weekends' && fast) return `You're fast and available most of the time. The gap is after-hours — evenings and nights when enquiries come in but nothing goes out. That window is costing you ${window.IDS_fmtAED(calc.monthlyLoss)} per month.`; if (cov === 'always' && !fast) return "You're always reachable, but the speed of your replies is the leak. UAE buyers contact multiple businesses simultaneously. The first reply wins — at your current response time, you're rarely first."; return `You reply quickly and you're always available. Your loss is lower than most — but at ${calc.lossRatePercent}% of enquiries still not converting, there is ${window.IDS_fmtAED(calc.monthlyLoss)} per month in leads that are not being captured, qualified, or followed up.`; } // Ported verbatim from calc-report.jsx getWhyThree() function getWhyThreeParagraph(inputs, calc, industryObj) { const enq = inputs.weeklyEnquiries >= 200 ? '200+' : inputs.weeklyEnquiries; return `You handle ${inputs.dealValue >= 50000 ? 'high-value' : 'time-sensitive'} ${industryObj.name.toLowerCase()} leads in a market where the first reply wins. With ${enq} enquiries per week and ${calc.responseTimeReadable}, your biggest gap is ${calc.coverageMultiplierPercent > 0 ? "coverage — leads going cold while you're offline" : 'speed — competitors replying first'}. These three workflows address that gap in order of ROI.`; } function generateReportMD(inputs, calc, industryObj, name) { const workflows = window.IDS_scoreWorkflows(inputs); const dateStr = new Date().toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' }); const respObj = window.IDS_RESPONSE.find(r => r.id === inputs.responseTime); const covObj = window.IDS_COVERAGE.find(c => c.id === inputs.coverage); const enq = inputs.weeklyEnquiries >= 200 ? '200+' : inputs.weeklyEnquiries; const annual = calc.monthlyLoss * 12; const lossWithPilot = Math.round((calc.monthlyLoss * 0.25) / 100) * 100; const netWithPilot = calc.monthlyLoss - lossWithPilot - 5000; const fmt = window.IDS_fmtAED; const workflowBlocks = workflows.map((w, i) => [ `### ${w.isStartHere ? '★ ' : ''}${i + 1}. ${w.name}${w.isStartHere ? ' — START HERE' : ''}`, '', w.does, '', `**Recovers:** ${w.recovers}`, `**Complexity:** ${w.complexity} · Live in 48 hours`, '', ].join('\n')).join('\n'); return [ '# WhatsApp Revenue Report · Ibrahim Digital Solutions', '', '', '## Your Situation', `**Prepared for:** ${name} · ${dateStr}`, '', '### Diagnosis', getDiagnosisParagraph(inputs, calc), '', '### Your Situation', '| | |', '|---|---|', `| Industry | ${industryObj.name} |`, `| Average ${industryObj.dealLabel} value | ${fmt(inputs.dealValue)} |`, `| Weekly enquiries | ${enq} messages |`, `| Response time | ${respObj.label} |`, `| Coverage | ${covObj.label} |`, '', '### The Bottom Line', `**Monthly loss:** ${fmt(calc.monthlyLoss)}`, `**Weekly loss:** ${fmt(calc.weeklyLoss)}`, `**Annual loss:** ${fmt(annual)}`, '', '', '## Workflow Recommendations', `**Based on:** ${industryObj.name} · ${respObj.label} · ${covObj.label}`, '', '### Why These Three', getWhyThreeParagraph(inputs, calc, industryObj), '', workflowBlocks, '', '## The Numbers, Side by Side', '', '| | Doing nothing | Starting the pilot |', '|---|---|---|', '| Setup cost | AED 0 | AED 0 |', '| Monthly cost | AED 0 | AED 5,000 |', `| Monthly loss | ${fmt(calc.monthlyLoss)} | ${fmt(lossWithPilot)} |`, `| Net position | −${fmt(calc.monthlyLoss)} | +${fmt(netWithPilot)} |`, '', `Every month you wait costs you ${fmt(calc.monthlyLoss)}.`, `Every month with the pilot costs you AED 5,000.`, `The difference is ${fmt(netWithPilot)} — in your pocket, not your competitors'.`, '', "### Your Next Step — Try it free. See it work. Then decide.", '**AED 0** to start · **48 hrs** to live · **No contract**', '', '**WhatsApp:** +44 7842 552606', '**Instagram:** @ibrahim.prompted', ].join('\n'); } // ───────────────────────────────────────────────────────────── // Loss vs Captured visual breakdown bar // ───────────────────────────────────────────────────────────── function LossBar({ lossPct }) { const lostPct = Math.round(lossPct); const keptPct = 100 - lostPct; return (
{lostPct}% LEAKING {keptPct}% CAPTURED
); } // ───────────────────────────────────────────────────────────── // Result screen — forest background, full bleed // ───────────────────────────────────────────────────────────── function ResultScreen({ inputs, calc, onUnlock, onBack, industryObj }) { const monthly = useCountUp(calc.monthlyLoss); const totalLossPct = Math.round(calc.lossRatePercent * (1 + calc.coverageMultiplierPercent / 100)); const cappedLossPct = Math.min(totalLossPct, 95); return (
{/* Top chrome */}
YOUR RESULT
{/* Diagnostic */}

{calc.diagnostic}

{/* The number */}
{window.IDS_fmtAED(monthly)}
lost every month from missed WhatsApp enquiries
{/* Visual breakdown bar */}

The fix costs AED 5,000/month.
You're losing {window.IDS_fmtAED(calc.monthlyLoss)}.

Every week you wait costs you another {window.IDS_fmtAED(calc.weeklyLoss)}.

Personalised to your business · Free · AED 0

{onBack && ( )}
); } function Breakdown({ calc, inputs, industryObj }) { const dealLabel = industryObj?.dealLabel || 'sale'; const lines = [ `${inputs.weeklyEnquiries >= 200 ? '200+' : inputs.weeklyEnquiries} enquiries/week × ${window.IDS_fmtAED(inputs.dealValue)} per ${dealLabel}`, `${calc.lossRatePercent}% lost to ${calc.responseTimeReadable}`, calc.coverageMultiplierPercent > 0 ? `Coverage gap adds ${calc.coverageMultiplierPercent}% to your losses` : `Always-on coverage — no multiplier`, ]; return (
{lines.map((l, i) => (
0{i + 1} {l}
))}
); } // ───────────────────────────────────────────────────────────── // Email / WhatsApp gate modal // ───────────────────────────────────────────────────────────── const GCC_DIAL_CODES = [ { code: '+971', country: 'UAE' }, { code: '+966', country: 'Saudi' }, { code: '+974', country: 'Qatar' }, { code: '+965', country: 'Kuwait' }, { code: '+968', country: 'Oman' }, { code: '+973', country: 'Bahrain' }, ]; // Normalise typed digits into a local mobile number. // Strips: non-digits, leading zeros, accidentally re-typed country code. function cleanLocalNumber(raw, dialCode) { let digits = (raw || '').replace(/\D/g, ''); const codeDigits = dialCode.replace('+', ''); if (digits.startsWith(codeDigits)) digits = digits.slice(codeDigits.length); return digits.replace(/^0+/, ''); } function EmailGate({ open, onClose, onSubmit }) { const [name, setName] = useStateR(''); const [dialCode, setDialCode] = useStateR('+971'); const [phone, setPhone] = useStateR(''); const [submitting, setSubmitting] = useStateR(false); if (!open) return null; const localDigits = cleanLocalNumber(phone, dialCode); const valid = name.trim().length > 0 && localDigits.length >= 7; function submit(e) { e.preventDefault(); if (!valid || submitting) return; setSubmitting(true); // E.164 format for Kapso / WhatsApp APIs: + const whatsapp = dialCode + localDigits; // Call immediately — real async work in submitLead drives the loading state onSubmit({ name: name.trim(), whatsapp }); } return (
{!submitting ? (
UNLOCK YOUR REPORT

Where should we send your report?

Your personalised report includes workflow recommendations built for your business. It's free.

setName(e.target.value)} placeholder="First name" className="form-input" style={{ marginBottom: 14 }} />
setPhone(e.target.value)} placeholder="50 123 4567" className="form-input" style={{ flex: 1, minWidth: 0 }} />

No spam. Your number is used to send the report and nothing else.

) : (
SENDING TO WHATSAPP

Your report will arrive in a moment.

)}
); } // ───────────────────────────────────────────────────────────── // Result screen — 12-month projection variant (chosen design) // ───────────────────────────────────────────────────────────── function ResultScreenAnnual({ inputs, calc, industryObj, onUnlock, onBack }) { const annual = calc.monthlyLoss * 12; const monthly = useCountUp(calc.monthlyLoss); return (
YOUR RESULT · 12 MONTH

{calc.diagnostic}

UNCHECKED, OVER 12 MONTHS
{window.IDS_fmtAED(annual)}

The fix costs AED 60,000/year. You're losing {window.IDS_fmtAED(annual)}.

{onBack && ( )}
); } function TimeRow({ label, value, last }) { return (
{label} {value}
); } // ───────────────────────────────────────────────────────────── // Success screen — shown after the gate is submitted. // The report itself is sent via WhatsApp (delivered out-of-band, // not rendered in the app). // ───────────────────────────────────────────────────────────── function ReportSentScreen({ calc, lead, onRestart }) { const phone = lead?.whatsapp || 'your WhatsApp'; const lossLabel = window.IDS_fmtAED(calc.monthlyLoss); const waText = encodeURIComponent(`Hi, I just did the WhatsApp revenue audit — looks like I'm losing ${lossLabel} a month. Can you tell me more about the pilot?`); const waLink = `https://wa.me/447842552606?text=${waText}`; const igLink = 'https://www.instagram.com/ibrahim.prompted/'; return (
REPORT INCOMING
ON ITS WAY

Your report's on the way.

We'll WhatsApp it to {phone} in the next few minutes. It includes the three workflows we'd build first for your business — and a side-by-side of what doing nothing costs.

YOUR LEAK

{window.IDS_fmtAED(calc.monthlyLoss)} per month, every month, until you fix it.

WHILE YOU WAIT

Want to start the pilot today? Message us — we'll have you live in 48 hours.

); } Object.assign(window, { ResultScreen, ResultScreenAnnual, ReportSentScreen, EmailGate, useCountUp, LossBar, generateReportMD });