/* eslint-disable */ /* JCK 2026 Sales Playbook — UI shell + icons + routing. Loads data from window.PLAYBOOK and views from window.PB_VIEWS. */ const { useState, useEffect, useMemo, useRef, useCallback } = React; /* ------- Icon component ------- Minimal inline SVG icons (Lucide-style, 1.6 stroke). */ const ICON_PATHS = { MessageCircle: 'M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z', Search: 'M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14z M21 21l-4.3-4.3', Box: 'M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z M3.27 6.96 12 12.01l8.73-5.05 M12 22.08V12', Camera: 'M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z M12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8z', Sparkles: 'M12 3l1.9 5.7L19 10l-5.1 1.3L12 17l-1.9-5.7L5 10l5.1-1.3z M19 17l.8 2.4 2.2.6-2.2.6L19 23l-.8-2.4-2.2-.6 2.2-.6z M5 3l.8 2.4 2.2.6-2.2.6L5 9l-.8-2.4-2.2-.6 2.2-.6z', LayoutGrid: 'M3 3h7v7H3z M14 3h7v7h-7z M14 14h7v7h-7z M3 14h7v7H3z', Target: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z M12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12z M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4z', Tag: 'M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z M7 7h.01', GitBranch: 'M6 3v12 M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M18 9c0 2-2 5-7 5H9', Gift: 'M20 12v10H4V12 M2 7h20v5H2z M12 22V7 M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z', Users: 'M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2 M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z M23 21v-2a4 4 0 0 0-3-3.87 M16 3.13a4 4 0 0 1 0 7.75', HelpCircle: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3 M12 17h.01', Home: 'M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z M9 22V12h6v10', Map: 'M1 6v16l7-3 8 3 7-3V4l-7 3-8-3-7 2z M8 3v17 M16 7v17', GitFork: 'M12 21V9 M5 6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M19 6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M5 6c0 6 7 3 7 9 M19 6c0 6-7 3-7 9', AlertTriangle: 'M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z M12 9v4 M12 17h.01', CheckCircle: 'M22 11.08V12a10 10 0 1 1-5.93-9.14 M22 4L12 14.01l-3-3', Play: 'M5 3l14 9-14 9z', ChevronLeft: 'M15 18l-6-6 6-6', ChevronRight: 'M9 18l6-6-6-6', ChevronDown: 'M6 9l6 6 6-6', ChevronUp: 'M18 15l-6-6-6 6', ArrowRight: 'M5 12h14 M12 5l7 7-7 7', Hand: 'M18 11V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v0 M14 10V4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v2 M10 10.5V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v8 M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-1.4-5.5-3L1 13.5a1.65 1.65 0 0 1 4-2v1', Mic: 'M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z M19 10v2a7 7 0 0 1-14 0v-2 M12 19v4 M8 23h8', Eye: 'M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z', Lightbulb: 'M9 18h6 M10 22h4 M15.09 14A6 6 0 1 0 9 14 c.5 1 1 2 1 3v1h4v-1c0-1 .5-2 1-3z', DollarSign: 'M12 1v22 M17 5H9.5a3.5 3.5 0 1 0 0 7h5a3.5 3.5 0 1 1 0 7H6', Frown: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z M16 16s-1.5-2-4-2-4 2-4 2 M9 9h.01 M15 9h.01', Smile: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z M8 14s1.5 2 4 2 4-2 4-2 M9 9h.01 M15 9h.01', X: 'M18 6L6 18 M6 6l12 12', Check: 'M20 6L9 17l-5-5', Circle: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z', Filter: 'M22 3H2l8 9.46V19l4 2v-8.54L22 3z', RotateCcw: 'M1 4v6h6 M3.51 15a9 9 0 1 0 2.13-9.36L1 10', Layers: 'M12 2l10 5-10 5L2 7l10-5z M2 17l10 5 10-5 M2 12l10 5 10-5', Briefcase: 'M20 7h-6V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v3H2c-1.1 0-2 .9-2 2v11a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V9c0-1.1-.9-2-2-2z', Zap: 'M13 2L3 14h9l-1 8 10-12h-9l1-8z', Crown: 'M2 4l3 12h14l3-12-6 7-4-7-4 7-6-7z M2 20h20', Flame: 'M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.07-2.14-.22-4.05 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.15.43-2.3 1-3a2.5 2.5 0 0 0 2.5 2.5z', Brain: 'M12 5a3 3 0 0 0-3-3 3 3 0 0 0-2.99 2.66 3 3 0 0 0-2.2 4.6 3 3 0 0 0 .77 5.43A3 3 0 0 0 8 19a3 3 0 0 0 4 1V5z M12 5a3 3 0 0 1 3-3 3 3 0 0 1 2.99 2.66 3 3 0 0 1 2.2 4.6 3 3 0 0 1-.77 5.43A3 3 0 0 1 16 19a3 3 0 0 1-4 1V5z', Compass: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z M16.24 7.76L14.12 14l-5.66 2.12 2.12-5.66z', Stethoscope: 'M11 2v2 M5 2v2 M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1 M8 15a6 6 0 0 0 12 0v-3 M20 12a2 2 0 1 0 0-4 2 2 0 0 0 0 4z', Award: 'M12 15a7 7 0 1 0 0-14 7 7 0 0 0 0 14z M8.21 13.89L7 23l5-3 5 3-1.21-9.12', Sparkle: 'M9.94 14.34L4 12l5.94-2.34L12 4l2.06 5.66L20 12l-5.94 2.34L12 20z', TrendingUp: 'M22 7l-9 9-4-4-7 7 M16 7h6v6', Phone: 'M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z', Disc: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4z', Sun: 'M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10z M12 1v2 M12 21v2 M4.22 4.22l1.42 1.42 M18.36 18.36l1.42 1.42 M1 12h2 M21 12h2 M4.22 19.78l1.42-1.42 M18.36 5.64l1.42-1.42', ArrowDownRight: 'M7 7l10 10 M17 7v10H7', Image: 'M3 3h18v18H3z M8.5 11a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z M21 15l-5-5L5 21' }; function Icon({ name, size = 16, stroke = 1.6, ...rest }) { const d = ICON_PATHS[name] || ICON_PATHS.Circle; const paths = d.split(' M').map((p, i) => i === 0 ? p : 'M' + p); return ( {paths.map((p, i) => )} ); } /* --------- Search engine: build a flat searchable index from STAGES + everything --------- */ function buildSearchIndex() { const { STAGES, STAGES_GLB, PRICING, PRICING_GLB, DOWNSELL, DOWNSELL_GLB, OBJECTIONS, MAX_OFFERS, GLB_OFFERS, EXISTING_OFFERS, EXISTING_OFFERS_GLB, SIGNALS, FAQS } = window.PLAYBOOK; const idx = []; const push = (stage, viewId, snippet) => idx.push({ stage, viewId, snippet }); const indexStages = (stageArr, suffix) => { stageArr.forEach(s => { if (s.new && s.new.kind === 'bullets') s.new.items.forEach(t => push(s.label + suffix, 'demo', t)); if (s.existing && s.existing.kind === 'bullets') s.existing.items.forEach(t => push(s.label + suffix, 'compare', t)); if (s.new && s.new.kind === 'demo-steps') s.new.steps.forEach(st => push(s.label + ' — NEW' + suffix, 'demo', (st.label ? '['+st.label+'] ' : '') + st.text)); if (s.existing && s.existing.kind === 'demo-steps') s.existing.steps.forEach(st => push(s.label + ' — EXISTING' + suffix, 'demo', (st.label ? '['+st.label+'] ' : '') + st.text)); if (s.notes) s.notes.forEach(n => push(s.label + ' — Notes' + suffix, 'demo', n)); }); }; indexStages(STAGES, ''); // Index GLB-unique stages (glb-demo is the only stage not in STAGES) const glbUnique = (STAGES_GLB || []).filter(s => !STAGES.find(x => x.id === s.id)); indexStages(glbUnique, ' (GLB script)'); Object.values(PRICING).forEach(p => { if (p.script) push(p.name, 'pricing', p.script); }); if (PRICING_GLB) Object.values(PRICING_GLB).forEach(p => { if (p.script) push(p.name + ' (GLB script)', 'pricing', p.script); }); push('Down-selling', 'demo', DOWNSELL.question); push('Down-selling — Yes', 'demo', DOWNSELL.yes.text); push('Down-selling — No', 'demo', DOWNSELL.no.text); push('Down-selling — Yes', 'demo', DOWNSELL.yes.salesPrice); push('Down-selling — No', 'demo', DOWNSELL.no.salesPrice); if (DOWNSELL_GLB) { push('Down-selling (GLB script)', 'demo', DOWNSELL_GLB.text); push('Down-selling (GLB script)', 'demo', DOWNSELL_GLB.salesPrice); } (OBJECTIONS.library || []).forEach(cat => cat.items.forEach(it => push('Objection — ' + cat.title, 'demo', it.text))); [['Max Elite Kit', MAX_OFFERS.eliteKit], ['Max standalone', MAX_OFFERS.standalone], ['GLB Elite Kit', GLB_OFFERS.eliteKit], ['GLB standalone', GLB_OFFERS.standalone] ].forEach(([n, set]) => { [set.offer1, set.offer2, set.offer3].forEach(o => { push(n + ' — ' + o.label, 'pricing', o.text); }); }); EXISTING_OFFERS.forEach(o => push('Existing customers', 'pricing', '('+o.letter+') ' + o.text)); if (EXISTING_OFFERS_GLB) EXISTING_OFFERS_GLB.forEach(o => push('Existing customers (GLB script)', 'pricing', '('+o.letter+') ' + o.text)); SIGNALS.noBudget.items.forEach(t => push('No-budget signals', 'demo', t)); SIGNALS.hasBudget.items.forEach(t => push('Has-budget signals', 'demo', t)); FAQS.forEach(f => { push('FAQ: ' + f.q, 'demo', f.a); }); return idx; } function highlight(text, q) { if (!q) return text; const parts = text.split(new RegExp('(' + q.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&') + ')', 'gi')); return parts.map((p, i) => p.toLowerCase() === q.toLowerCase() ? {p} : {p} ); } /* ----- nav definition ----- */ const NAV = [ { id: 'demo', label: 'Sales Demo', icon: 'Play', sub: 'Full script — stage by stage' }, { id: 'pricing', label: 'Pricing & Offers', icon: 'Tag', sub: 'All prices and offer ladders' } ]; /* ----- App ----- */ function App() { // hash-based routing const initial = (window.location.hash || '#demo').slice(1); const initialView = initial.split('/')[0]; const [viewId, setViewId] = useState(NAV.find(n => n.id === initialView) ? initialView : 'demo'); const [query, setQuery] = useState(''); const [showResults, setShowResults] = useState(false); const [script, setScript] = useState('max'); // 'max' | 'glb' const searchRef = useRef(null); // hash sync — both directions useEffect(() => { if (window.location.hash !== '#' + viewId) { window.history.replaceState(null, '', '#' + viewId); } }, [viewId]); useEffect(() => { const onHash = () => { const id = (window.location.hash || '#demo').slice(1).split('/')[0]; if (NAV.find(n => n.id === id)) setViewId(id); }; window.addEventListener('hashchange', onHash); return () => window.removeEventListener('hashchange', onHash); }, []); // keyboard shortcut useEffect(() => { const onKey = (e) => { if (e.key === '/' && document.activeElement?.tagName !== 'INPUT') { e.preventDefault(); searchRef.current?.focus(); } if (e.key === 'Escape') { setShowResults(false); searchRef.current?.blur(); } }; document.addEventListener('keydown', onKey); return () => document.removeEventListener('keydown', onKey); }, []); const index = useMemo(buildSearchIndex, []); const results = useMemo(() => { if (!query.trim()) return []; const q = query.trim().toLowerCase(); return index.filter(r => (r.snippet || '').toLowerCase().includes(q) || (r.stage || '').toLowerCase().includes(q) ).slice(0, 30); }, [query, index]); const nav = (id) => { setViewId(id); window.scrollTo({ top: 0 }); setShowResults(false); setQuery(''); }; const currentNav = NAV.find(n => n.id === viewId) || NAV[0]; const V = window.PB_VIEWS; const viewProps = { nav, query, setQuery, script, setScript }; const viewMap = { demo: , pricing: }; return (
{currentNav.label}
e.stopPropagation()}> { setQuery(e.target.value); setShowResults(true); }} onFocus={() => setShowResults(true)} /> / {showResults && query && (
{results.length === 0 ?
No matches in the script.
: results.map((r, i) => (
nav(r.viewId)}>
{r.stage}
{highlight(r.snippet, query)}
)) }
)}
{viewMap[viewId] || viewMap.overview}
); } ReactDOM.createRoot(document.getElementById('root')).render(); window.Icon = Icon;