// v-map.jsx — Map Campaigns: real Milton Keynes map, zoom/pan, estate // intelligence, your Stadium MK restaurant, live Lasso drivers + rival nodes. const MAP_LAYERS = [ { id:'heatmap', label:'Demand heatmap', icon:I.droplet }, { id:'density', label:'Customer density', icon:I.density }, { id:'cuisine', label:'Cuisine demand', icon:I.pizza }, { id:'competitor', label:'Competitor pressure',icon:I.swords }, { id:'influence', label:'Vendor influence', icon:I.target }, ]; const MAP_IMG_ASPECT = 1275 / 1233; // native px of mk-map.png // Heat blob descriptor for a given layer function blobFor(e, layer) { if (layer==='heatmap') return { v:e.opportunity/100, color:'255,150,60' }; if (layer==='density') return { v:e.customers/1240, color:'90,170,255' }; if (layer==='cuisine') return { v:e.interest/402, color:'255,140,40' }; if (layer==='influence') return { v:e.influence/45, color:'90,220,140' }; if (layer==='competitor') return { v: e.competitor==='High'?0.95:e.competitor==='Medium'?0.5:0.18, color:'255,90,70' }; return null; } // ─── Hover insight popover (mini card attached to a node) ──────────── function NodePopover({ e, below }) { const s = NODE_STATE[e.state]; const compTone = e.competitor==='High'?'#FF6B57':e.competitor==='Medium'?'#FFC15A':'#7FE3A0'; return (
{e.name} {s.label}
{[ ['Opportunity', e.opportunity, '#FFB061'], ['Your influence', e.influence+'%', s.fill], ['Lasso customers', e.customers.toLocaleString(), '#8FC4FF'], ['Want your food', e.interest, '#FFB061'], ].map(([l,v,c])=>(
{v}
{l}
))}
{e.competitor} rivalry {e.trendDir==='up'?:e.trendDir==='down'?:} {e.trendDir!=='flat'?(e.trendDir==='down'?'−':'+')+e.trendPct+'%':'Flat'}
Click for full insight →
); } // ─── A single estate node (counter-scales with zoom → constant size) ── function EstateNode({ e, selected, dim, invK, onClick, hasCampaign }) { const [hov, setHov] = React.useState(false); const s = NODE_STATE[e.state]; const r = 16 + (e.customers/1240)*13; // 16–29 const size = r*2; const ringR = r + 5; const circ = 2*Math.PI*ringR; const off = circ*(1 - e.influence/100); const active = hov || selected; return (
); } // ─── Rival vendor node ─────────────────────────────────────────────── function RivalNode({ r, invK, dim }) { const [hov, setHov] = React.useState(false); const tone = r.pressure==='High'?'#E0492B':r.pressure==='Medium'?'#C9722A':'#7C675B'; const sz = 30; return (
); } // ─── Your restaurant — Stadium MK home base ────────────────────────── function RestaurantNode({ invK }) { const [hov, setHov] = React.useState(false); return (
); } // ─── Live Lasso drivers (direct-DOM RAF, never re-renders React) ───── function DriverLayer({ viewRef, baseRef }) { const layerRef = React.useRef(null); React.useEffect(()=>{ const layer = layerRef.current; if(!layer) return; const hubs = [...ESTATES.map(e=>({x:e.x,y:e.y})), {x:HQ.x,y:HQ.y}]; const HQpt = { x:HQ.x, y:HQ.y }; const rnd = (a,b)=> a + Math.random()*(b-a); const drivers = []; const N = 13; for (let i=0;i{ const dt = Math.min((now-last)/1000, 0.05); last=now; const invK = 1 / (viewRef.current?.k || 1); for (const d of drivers){ const a = d.route[d.seg], b = d.route[(d.seg+1)%d.route.length]; const dist = Math.max(0.5, Math.hypot(b.x-a.x, b.y-a.y)); d.t += (d.speed*8/dist)*dt; if (d.t>=1){ d.t=0; d.seg=(d.seg+1)%d.route.length; } const ease = d.t<0.5 ? 2*d.t*d.t : 1-Math.pow(-2*d.t+2,2)/2; const x = a.x+(b.x-a.x)*ease, y = a.y+(b.y-a.y)*ease; d.el.style.left = x+'%'; d.el.style.top = y+'%'; d.el.style.transform = `translate(-50%,-50%) scale(${invK})`; } raf=requestAnimationFrame(tick); }; raf=requestAnimationFrame(tick); return ()=>{ cancelAnimationFrame(raf); drivers.forEach(d=>d.el.remove()); }; }, []); return
; } // ─── The map canvas (zoom / pan world) ─────────────────────────────── function MapCanvas({ app, layers, campaignOnly, showDrivers, showRivals, campaignAreas }) { const vpRef = React.useRef(null); const worldRef = React.useRef(null); const [base, setBase] = React.useState({ w:0, h:0 }); // fitted world px const [view, setView] = React.useState({ k:1, tx:0, ty:0 }); const viewRef = React.useRef(view); viewRef.current = view; const baseRef = React.useRef(base); baseRef.current = base; const drag = React.useRef(null); const activeLayers = Object.keys(layers).filter(k=>layers[k]); const invK = 1/view.k; // Fit world to viewport (contain) + centre const fit = React.useCallback(()=>{ const vp = vpRef.current; if(!vp) return; const W = vp.clientWidth, H = vp.clientHeight; let w, h; if (W/H > MAP_IMG_ASPECT) { h = H; w = H*MAP_IMG_ASPECT; } else { w = W; h = W/MAP_IMG_ASPECT; } setBase({ w, h }); setView({ k:1, tx:(W-w)/2, ty:(H-h)/2 }); }, []); React.useEffect(()=>{ fit(); const ro=new ResizeObserver(fit); if(vpRef.current) ro.observe(vpRef.current); return ()=>ro.disconnect(); }, [fit]); const clamp = (v, base)=>{ const vp = vpRef.current; if(!vp) return v; const W=vp.clientWidth, H=vp.clientHeight; const cx = v.tx + base.w*v.k/2, cy = v.ty + base.h*v.k/2; let { tx, ty } = v; if (cx<0) tx -= cx; if (cx>W) tx -= (cx-W); if (cy<0) ty -= cy; if (cy>H) ty -= (cy-H); return { ...v, tx, ty }; }; // wheel zoom toward cursor (native listener so we can preventDefault) React.useEffect(()=>{ const vp = vpRef.current; if(!vp) return; const onWheel=(ev)=>{ ev.preventDefault(); const rect = vp.getBoundingClientRect(); const cx = ev.clientX-rect.left, cy = ev.clientY-rect.top; setView(v=>{ const k2 = Math.min(5, Math.max(1, v.k * (ev.deltaY<0 ? 1.14 : 1/1.14))); const wx = (cx - v.tx)/v.k, wy = (cy - v.ty)/v.k; let nv = { k:k2, tx: cx - wx*k2, ty: cy - wy*k2 }; return clamp(nv, baseRef.current); }); }; vp.addEventListener('wheel', onWheel, { passive:false }); return ()=> vp.removeEventListener('wheel', onWheel); }, []); const onPointerDown=(ev)=>{ if (ev.target.closest('[data-node]')) return; // let nodes handle clicks drag.current = { x:ev.clientX, y:ev.clientY }; ev.currentTarget.setPointerCapture(ev.pointerId); }; const onPointerMove=(ev)=>{ if(!drag.current) return; const dx=ev.clientX-drag.current.x, dy=ev.clientY-drag.current.y; drag.current={ x:ev.clientX, y:ev.clientY }; setView(v=> clamp({ ...v, tx:v.tx+dx, ty:v.ty+dy }, baseRef.current)); }; const onPointerUp=()=>{ drag.current=null; }; const zoomBy=(f)=> setView(v=>{ const vp=vpRef.current; const W=vp.clientWidth, H=vp.clientHeight; const k2=Math.min(5,Math.max(1,v.k*f)); const wx=(W/2-v.tx)/v.k, wy=(H/2-v.ty)/v.k; return clamp({ k:k2, tx:W/2-wx*k2, ty:H/2-wy*k2 }, baseRef.current); }); return (
{ if(!e.target.closest('[data-node]')) app.setSelected(null); }} style={{ position:'relative', flex:1, minWidth:0, borderRadius:16, overflow:'hidden', background:'#081230', border:'1px solid var(--soft-line)', boxShadow:'var(--shadow-sm)', cursor: drag.current?'grabbing':'grab', touchAction:'none' }}> {/* WORLD — everything geographic lives here and shares the transform */}
{/* the Milton Keynes vector basemap (crisp at any zoom) */} {/* Delivery radius from the kitchen (geographic — scales with map) */}
{/* Heat layers (geographic, glow over dark map) */} {activeLayers.map(lid=>(
1?0.72:0.92, zIndex:9 }}> {ESTATES.map(e=>{ const b = blobFor(e, lid); if(!b || b.v<0.12) return null; const rad = 9 + b.v*15; return
; })}
))} {showDrivers && } {showRivals && RIVALS.map(r=>)} {ESTATES.map(e=>( ))}
{/* Zoom controls (outside the scaled world) */}
zoomBy(1.4)}> zoomBy(1/1.4)}>
{/* zoom readout + hint */}
{view.k.toFixed(1)}× Scroll to zoom · drag to pan
); } function ZoomBtn({ children, onClick }) { return ( ); } // ─── Legend (collapsible so it never covers nodes) ─────────────────── function MapLegend({ right=14 }) { const [open, setOpen] = React.useState(false); return (
{open && (
e.stopPropagation()} style={{ marginBottom:8, background:'rgba(16,11,8,0.88)', backdropFilter:'blur(8px)', border:'1px solid rgba(255,255,255,0.12)', borderRadius:12, padding:'12px 14px', boxShadow:'var(--shadow-md)', width:236, animation:'v-popover 160ms var(--ease-out)' }}> Node state
{Object.entries(NODE_STATE).map(([k,v])=>(
{v.label}
))}
Your kitchen · Stadium MK
Rival vendor · saved intel
Live Lasso driver
Ring = your influence %
)}
); } // ─── Intelligence panel (right) ────────────────────────────────────── function StatRow({ label, value, sub, icon:Icon }) { return (
{Icon && } {label}
{value}
{sub &&
{sub}
}
); } function IntelPanel({ app, e }) { const s = NODE_STATE[e.state]; const lvl = influenceLevel(e.influence); const est = estimateFor(e, 200); const compTone = e.competitor==='High'?'red':e.competitor==='Medium'?'amber':'green'; const lvlPct = { Cold:12, Warming:38, Active:64, Stronghold:90 }[lvl]; return (
Area intelligence

{e.name}

{s.label} {e.campaign && }>{e.campaign}}
{e.opportunity}
Opportunity score
{e.influence}%
Your influence · {lvl}
Recent demand trend
{e.competitor}}/>
Vendor influence level {lvl}
{['Cold','Warming','Active','Stronghold'].map(t=>( {t} ))}
{(()=>{ const lc=ACTIVE_CAMPAIGNS.find(c=>(c.status==='live'||c.status==='ending')&&c.area===e.name); if(!lc) return null; const roas=(lc.revenue/lc.spend).toFixed(1); return (
 Campaign performance {lc.status==='live'?'Live':'Ending'}
{lc.name}
{[['Revenue','£'+lc.revenue.toLocaleString()],['ROAS',roas+'×'],['Orders',lc.orders]].map(([l,v])=>(
{v}
{l}
))}
} onClick={()=>app.openCampaign(lc.id)}>View campaign performance
); })()}
 Recommended campaign
{e.rec}
{[['Estimated reach', est.reach.toLocaleString()],['Estimated orders','+'+est.orders],['Estimated revenue','£'+est.revenue.toLocaleString()],['Campaign cost','£'+est.cost]].map(([l,v])=>(
{v}
{l}
))}
Expected ROI range {est.roiLow}–{est.roiHigh}×
} onClick={()=>app.openBuilder(e.id)}>Build campaign for {e.name}
Area-level insight only. Customer addresses are hidden. Lasso never shows individual pins or contact details.
); } function IntelEmpty() { return (
Hover, then select an estate
Hover any estate node for a quick read; click it to pull full anonymised demand, competitor pressure and a recommended campaign here.
Addresses are never shown
); } // ─── Leaflet live-tile map (crisp at every zoom, fully controllable) ── function hexToRgb(h){ const n=parseInt(h.slice(1),16); return `${(n>>16)&255},${(n>>8)&255},${n&255}`; } function buildEstateIcon(e, { selected, camp, dim }) { const s = NODE_STATE[e.state]; const rgb = hexToRgb(s.fill); const r = Math.round(20 + (e.customers/1240)*11); const size = r*2, ringSize = size+10, rr = (ringSize-3)/2; const circ = 2*Math.PI*rr, off = circ*(1 - e.influence/100); const num = e.customers>=1000 ? (e.customers/1000).toFixed(1)+'k' : e.customers; const arrow = e.trendDir==='up' ? '▲' : e.trendDir==='down' ? '▼' : ''; const mega = ''; const html = `
`+ `
`+ `
`+ (camp?``:``)+ ``+ `
${num}${arrow?`${arrow}`:``}
`+ (camp?`${mega}`:``)+ `
`+ `
${e.name}
`+ `
`+ `
`; return L.divIcon({ html, className:'lf-icon', iconSize:[0,0], iconAnchor:[0,0] }); } function estateTooltip(e) { const s = NODE_STATE[e.state]; const tr = e.trendDir==='up' ? `+${e.trendPct}%` : e.trendDir==='down' ? `−${e.trendPct}%` : `Flat`; return `
${e.name}● ${s.label}
`+ `
`+ `
${e.opportunity}
Opportunity
`+ `
${e.influence}%
Your influence
`+ `
${e.customers.toLocaleString()}
Customers
`+ `
${e.interest}
Want your food
`+ `
${e.competitor} rivalry · 7d ${tr}
`+ `
Click for full insight →
`; } function LeafletMap({ app, layers, campaignAreas, campaignOnly, showDrivers, showRivals, liveCount, area, setArea, navOffset=260, rightInset=16, fullscreen=false, onToggleFullscreen, active=true }) { const elRef = React.useRef(null); const mapRef = React.useRef(null); const est = React.useRef({}); // id -> marker const heat = React.useRef({}); // lid -> layerGroup const driverG = React.useRef(null); const rivalG = React.useRef(null); const flashRef = React.useRef(null); const estIdx = React.useRef(-1); const quadIdx = React.useRef(-1); const tourFlight = React.useRef(false); const rafRef = React.useRef(null); const pr = React.useRef({}); pr.current = { app, campaignAreas, campaignOnly, setArea }; // init once React.useEffect(()=>{ if (!window.L || !elRef.current) return; const map = L.map(elRef.current, { zoomControl:false, attributionControl:true, minZoom:10, maxZoom:17, zoomSnap:0.25, wheelPxPerZoomLevel:120, touchZoom:true, dragging:true, bounceAtZoomLimits:true, inertia:true }).setView(MK_CENTER, 12.4); mapRef.current = map; L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', { subdomains:'abcd', maxZoom:19, attribution:'© OpenStreetMap © CARTO', }).addTo(map); L.control.zoom({ position:'bottomleft' }).addTo(map); // dark tooltip style const st = document.createElement('style'); st.textContent = '.leaflet-tooltip.lf-tip{background:rgba(22,15,11,.95);border:1px solid rgba(255,255,255,.14);border-radius:11px;color:#F5EFE7;box-shadow:0 14px 34px -8px rgba(0,0,0,.65);padding:11px 12px;font-family:var(--font-body)}.leaflet-tooltip.lf-tip:before{display:none}'; document.head.appendChild(st); // heat layers rendered into a blurred, low-opacity pane → soft readable heatmap map.createPane('heatPane'); const hp = map.getPane('heatPane'); hp.style.zIndex = 350; hp.style.pointerEvents = 'none'; hp.style.filter = 'blur(20px)'; hp.style.opacity = '0.7'; hp.style.mixBlendMode = 'screen'; const heatRenderer = L.svg({ pane:'heatPane' }); MAP_LAYERS.forEach(l=>{ const g = L.layerGroup(); ESTATES.forEach(e=>{ const b = blobFor(e, l.id); if(!b || b.v<0.12) return; L.circle(ESTATE_LL[e.id], { radius: 900 + b.v*2700, stroke:false, fillColor:`rgb(${b.color})`, fillOpacity: 0.4, interactive:false, pane:'heatPane', renderer:heatRenderer }).addTo(g); }); heat.current[l.id] = g; }); // estate markers ESTATES.forEach(e=>{ const camp = pr.current.campaignAreas.has(e.name); const m = L.marker(ESTATE_LL[e.id], { icon: buildEstateIcon(e,{ selected:false, camp, dim:false }), riseOnHover:true, zIndexOffset: 400 }); m.bindTooltip(estateTooltip(e), { direction:'top', offset:[0,-22], opacity:1, className:'lf-tip', sticky:false }); m.on('click', ()=>{ pr.current.setArea(null); pr.current.app.setSelected(e.id); }); m.addTo(map); est.current[e.id] = m; }); // HQ + delivery radius L.circle(HQ_LL, { radius: 5200, color:'#F28C1B', weight:1.5, dashArray:'5 5', fillColor:'#F28C1B', fillOpacity:0.06, interactive:false }).addTo(map); const hqIcon = L.divIcon({ className:'lf-icon', iconSize:[0,0], iconAnchor:[0,0], html: `
`+ `
`+ `
Fire & Dough
` }); L.marker(HQ_LL, { icon:hqIcon, zIndexOffset:600 }).bindTooltip( `
Fire & Dough
${HQ.sub}
`+ `
${HQ.ordersToday}
orders
`+ `
${HQ.driversOut}
drivers
`+ `
${HQ.avgDeliver}
avg
`, { direction:'top', offset:[0,-30], opacity:1, className:'lf-tip' }).addTo(map); // rivals const rg = L.layerGroup(); RIVALS.forEach(rv=>{ const tone = rv.pressure==='High'?'#E0492B':rv.pressure==='Medium'?'#C9722A':'#7C675B'; const ic = L.divIcon({ className:'lf-icon', iconSize:[0,0], iconAnchor:[0,0], html: `
` }); L.marker(RIVAL_LL[rv.id], { icon:ic, zIndexOffset:200 }).bindTooltip( `
${rv.name}
${rv.cuisine}
${rv.note}
`, { direction:'top', offset:[0,-16], opacity:1, className:'lf-tip' }).addTo(rg); }); rivalG.current = rg; // drivers const dg = L.layerGroup(); const hubs = [...ESTATES.map(e=>ESTATE_LL[e.id]), HQ_LL]; const rnd=(a,b)=>a+Math.random()*(b-a); const drivers = []; for(let i=0;i<11;i++){ const ic = L.divIcon({ className:'lf-icon', iconSize:[0,0], iconAnchor:[0,0], html:'
' }); const m = L.marker(HQ_LL,{ icon:ic, interactive:false, zIndexOffset:100 }); m.addTo(dg); const route=[]; const stops=3+(i%3); for(let j=0;j{ const dt=Math.min((now-last)/1000,0.05); last=now; for(const d of drivers){ const a=d.route[d.seg], b=d.route[(d.seg+1)%d.route.length]; const dist=Math.max(0.004, Math.hypot(b[0]-a[0], b[1]-a[1])); d.t+=(d.speed*0.05/dist)*dt; if(d.t>=1){ d.t=0; d.seg=(d.seg+1)%d.route.length; } const e2=d.t<0.5?2*d.t*d.t:1-Math.pow(-2*d.t+2,2)/2; d.m.setLatLng([a[0]+(b[0]-a[0])*e2, a[1]+(b[1]-a[1])*e2]); } rafRef.current=requestAnimationFrame(tick); }; rafRef.current=requestAnimationFrame(tick); map.on('click', ()=>{ pr.current.app.setSelected(null); pr.current.setArea(null); }); // cinematic motion blur on any pan/zoom ramp let rushT; const rushOn=()=>{ if(tourFlight.current && elRef.current) elRef.current.classList.add('lf-rush'); clearTimeout(rushT); }; const rushOff=()=>{ clearTimeout(rushT); rushT=setTimeout(()=>{ if(elRef.current) elRef.current.classList.remove('lf-rush'); tourFlight.current=false; }, 150); }; map.on('zoomstart movestart', rushOn); map.on('zoomend moveend', rushOff); setTimeout(()=>map.invalidateSize(), 60); return ()=>{ cancelAnimationFrame(rafRef.current); map.remove(); mapRef.current=null; }; }, []); // refresh estate icons on selection / campaign changes const selKey = app.selected || ''; const campKey = [...campaignAreas].sort().join(',') + '|' + campaignOnly; React.useEffect(()=>{ Object.entries(est.current).forEach(([id,m])=>{ const e = ESTATES.find(x=>x.id===id); if(!e) return; const camp = campaignAreas.has(e.name); m.setIcon(buildEstateIcon(e, { selected: app.selected===id, camp, dim: campaignOnly && !camp })); }); if (app.selected && mapRef.current && ESTATE_LL[app.selected]) { mapRef.current.flyTo(ESTATE_LL[app.selected], 14.2, { duration:1.05, easeLinearity:0.16 }); if(tourFlight.current){ const fl=flashRef.current; if(fl){ fl.classList.remove('on'); void fl.offsetWidth; fl.classList.add('on'); } } } }, [selKey, campKey]); // toggle heat layers React.useEffect(()=>{ const map = mapRef.current; if(!map) return; MAP_LAYERS.forEach(l=>{ const g=heat.current[l.id]; if(!g) return; if(layers[l.id]){ if(!map.hasLayer(g)) g.addTo(map); } else if(map.hasLayer(g)) map.removeLayer(g); }); }, [layers]); // toggle drivers / rivals React.useEffect(()=>{ const map=mapRef.current, g=driverG.current; if(!map||!g) return; if(showDrivers){ if(!map.hasLayer(g)) g.addTo(map); } else if(map.hasLayer(g)) map.removeLayer(g); }, [showDrivers]); React.useEffect(()=>{ const map=mapRef.current, g=rivalG.current; if(!map||!g) return; if(showRivals){ if(!map.hasLayer(g)) g.addTo(map); } else if(map.hasLayer(g)) map.removeLayer(g); }, [showRivals]); // tours are manual steppers — each click shifts to the next estate / quadrant const QUAD = [ {id:'N',name:'North MK',ll:[52.085,-0.755]}, {id:'E',name:'East MK',ll:[52.035,-0.690]}, {id:'S',name:'South MK',ll:[51.996,-0.745]}, {id:'W',name:'West MK',ll:[52.035,-0.828]} ]; const stepEstate=()=>{ const order=[...ESTATES].sort((a,b)=>b.opportunity-a.opportunity); estIdx.current=(estIdx.current+1)%order.length; tourFlight.current=true; setArea(null); app.setSelected(order[estIdx.current].id); }; const stepCompass=()=>{ quadIdx.current=(quadIdx.current+1)%QUAD.length; const q=QUAD[quadIdx.current]; tourFlight.current=true; app.setSelected(null); setArea(q.id); if(mapRef.current) mapRef.current.flyTo(q.ll, 13, { duration:1.2, easeLinearity:0.16 }); }; const resetMap=()=>{ tourFlight.current=true; app.setSelected(null); setArea(null); estIdx.current=-1; quadIdx.current=-1; if(mapRef.current) mapRef.current.flyTo(MK_CENTER, 12.4, { duration:0.9 }); }; // campaign-areas mode: reframe the map onto live campaigns + recede everything else React.useEffect(()=>{ const map=mapRef.current; if(!map) return; const hp=map.getPane('heatPane'); if(hp) hp.style.opacity = campaignOnly ? '0.18' : '0.7'; if(campaignOnly){ const lls = ESTATES.filter(e=>campaignAreas.has(e.name)).map(e=>ESTATE_LL[e.id]); if(lls.length) map.flyToBounds(L.latLngBounds(lls).pad(0.6), { duration:1.1, easeLinearity:0.16, maxZoom:13.5 }); } else if(!app.selected){ map.flyTo(MK_CENTER, 12.4, { duration:0.9 }); } }, [campaignOnly]); return (
{active && <>
{area && (
{({N:'North MK',E:'East MK',S:'South MK',W:'West MK'})[area]} · area report →
)} {campaignOnly && (
{liveCount} campaign{liveCount!==1?'s':''} live · {campaignAreas.size} {campaignAreas.size===1?'area':'areas'} spotlighted
)} }
); } // ─── Area report (N·E·S·W quadrant) ────────────────────────────────── function estateQuad(e){ const ll=ESTATE_LL[e.id]; const dlat=ll[0]-MK_CENTER[0], dlng=ll[1]-MK_CENTER[1]; return Math.abs(dlat)>=Math.abs(dlng) ? (dlat>=0?'N':'S') : (dlng>=0?'E':'W'); } function AreaReport({ app, quadId, setArea, campaignAreas }) { const name = ({N:'North MK',E:'East MK',S:'South MK',W:'West MK'})[quadId]; const inq = ESTATES.filter(e=>estateQuad(e)===quadId).sort((a,b)=>b.opportunity-a.opportunity); const customers = inq.reduce((s,e)=>s+e.customers,0); const interest = inq.reduce((s,e)=>s+e.interest,0); const avgOpp = Math.round(inq.reduce((s,e)=>s+e.opportunity,0)/(inq.length||1)); const avgInf = Math.round(inq.reduce((s,e)=>s+e.influence,0)/(inq.length||1)); const camps = ACTIVE_CAMPAIGNS.filter(c=>(c.status==='live'||c.status==='ending') && inq.some(e=>e.name===c.area)); const campRev = camps.reduce((s,c)=>s+c.revenue,0), campSpend = camps.reduce((s,c)=>s+c.spend,0), campOrders = camps.reduce((s,c)=>s+c.orders,0); const blendRoas = campSpend ? (campRev/campSpend).toFixed(1) : '—'; const topOpp = inq[0]; return (
 Area report

{name}

{inq.length} estates · {customers.toLocaleString()} customers in this quadrant
{/* aggregate KPIs */}
{[['Customers',customers.toLocaleString()],['Want your food',interest.toLocaleString()],['Avg opportunity',avgOpp],['Avg influence',avgInf+'%']].map(([l,v])=>(
{v}
{l}
))}
{/* campaign performance in this area */}
 Campaign performance {camps.length===0 ? (
No live campaigns in {name} yet — with {avgOpp} avg opportunity this is open territory.
} onClick={()=>app.openBuilder(topOpp.id)}>Launch in {name}
) : ( <>
{[['Revenue','£'+campRev.toLocaleString()],['Blended ROAS',blendRoas+'×'],['Orders',campOrders]].map(([l,v])=>(
{v}
{l}
))}
{camps.map(c=>(
app.openCampaign(c.id)} style={{ display:'flex', alignItems:'center', gap:10, padding:'9px 0', borderTop:'1px solid var(--soft-line)', cursor:'pointer' }}>
{c.name}
{c.area} · {c.orders} orders
=5?'green':c.roi>=3.5?'amber':'red'} style={{ fontSize:9.5, padding:'2px 7px' }}>{(c.revenue/c.spend).toFixed(1)}×
))} )}
{/* estates in this area */}
Estates · tap for full report {inq.map(e=>{ const s = NODE_STATE[e.state]; const camp = campaignAreas.has(e.name); return (
{ setArea(null); app.setSelected(e.id); }} style={{ display:'flex', alignItems:'center', gap:11, padding:'10px 0', borderBottom:'1px solid var(--soft-line)', cursor:'pointer' }}>
{e.name} {camp && Live}
{e.customers.toLocaleString()} customers · {e.influence}% influence
{e.opportunity}
); })}
); } // ─── Map screen (persistent map; interactive only when active) ──────── function MapScreen({ app, navOffset=260, active=true }) { const [layers, setLayers] = React.useState({ heatmap:false, density:false, cuisine:false, competitor:false, influence:false }); // default: ALL layers off — vendor opts in deliberately const [campaignOnly, setCampaignOnly] = React.useState(false); const [showDrivers, setShowDrivers] = React.useState(false); const [showRivals, setShowRivals] = React.useState(false); const [area, setArea] = React.useState(null); const [fullscreen, setFullscreen] = React.useState(false); const [layersOpen, setLayersOpen] = React.useState(true); // toolbar open so layer toggles are visible const campaignAreas = new Set(ACTIVE_CAMPAIGNS.filter(c=>c.status==='live'||c.status==='ending').map(c=>c.area)); const liveCount = ACTIVE_CAMPAIGNS.filter(c=>c.status==='live'||c.status==='ending').length; const e = ESTATES.find(x=>x.id===app.selected); const toggle = (id)=> setLayers(l=>({ ...l, [id]:!l[id] })); const TOP=16, EDGE=16, BAR_TOP=88, PANEL_W=362; const rightInset = fullscreen ? EDGE : (EDGE + PANEL_W + 12); return (
{/* Full-bleed live map */} setFullscreen(f=>!f)} active={active}/> {/* Dim the map when it is just a backdrop behind another tab */} {!active &&
} {active && <> {/* Floating topbar */}
{/* Floating frosted-glass map-layers toolbar — collapsible */} {!layersOpen ? ( ) : (
Map layers {MAP_LAYERS.map(l=>{ const on = layers[l.id]; return ( ); })}
setShowDrivers(v=>!v)} color="#D85A14" icon={I.truck}>Live drivers setShowRivals(v=>!v)} color="#E0492B" icon={I.swords}>Rivals
setCampaignOnly(v=>!v)} role="button" style={{ display:'inline-flex', alignItems:'center', gap:8, padding:'7px 12px', borderRadius:10, cursor:'pointer', background: campaignOnly ? 'rgba(122,87,201,0.16)' : 'rgba(255,255,255,0.5)', color: campaignOnly ? '#6243ad' : 'var(--fg-primary)', border:'1px solid', borderColor: campaignOnly ? '#7A57C9' : 'rgba(255,255,255,0.5)', fontFamily:'var(--font-display)', fontWeight:700, fontSize:12.5, boxShadow:'var(--shadow-sm)', }}> setCampaignOnly(v=>!v)} color="#7A57C9"/> Campaign areas{campaignAreas.size?` · ${campaignAreas.size}`:''}
)} {/* Right intelligence panel — glides off screen on full-screen */}
{area ? : e ? : }
}
); } function ChipToggle({ on, onClick, color, icon:Icon, children }) { const layerHook = children === 'Live drivers' ? 'drivers' : children === 'Rivals' ? 'rivals' : undefined; return ( ); } Object.assign(window, { MapScreen });