go('home')}>} title="Search" right={

} />

setQ(e.target.value)} placeholder="Try 'carrots', 'milk'…" style={{ flex: 1, border: 'none', outline: 'none', fontFamily: T.body, fontSize: 14, fontWeight: 600, color: T.ink, background: 'transparent', minWidth: 0, }}/> {q && }

{!q && (

POPULAR

{['Carrots','Whole milk','Sourdough','Eggs','Apples','Pasta'].map(s => ( ))}

)}

{filtered.map(p => { const prices = STORES.map(s => p.prices[s.id].price); const min = Math.min(...prices), max = Math.max(...prices); return ( ); })} {!filtered.length && (

No matches. Try "milk", "apples"…

)}

); } // ───────────────────────────────────────────────────────── // Product compare (single item) // ───────────────────────────────────────────────────────── function ProductScreen({ productId, go, addToCart, cart, addToast }) { const product = PRODUCTS.find(p => p.id === productId); const [sortBy, setSortBy] = useState('value'); const [savedStore, setSavedStore] = useState(null); const sortedStores = useMemo(() => { const list = [...STORES]; if (sortBy === 'price') return list.sort((a,b) => product.prices[a.id].price - product.prices[b.id].price); if (sortBy === 'quality') return list.sort((a,b) => product.prices[b.id].quality - product.prices[a.id].quality); if (sortBy === 'distance') return list.sort((a,b) => parseFloat(a.distance) - parseFloat(b.distance)); if (sortBy === 'organic') return list.filter(s => product.prices[s.id].organic).concat(list.filter(s => !product.prices[s.id].organic)); // value: combine return list.sort((a,b) => { const A = product.prices[a.id].quality / product.prices[a.id].price; const B = product.prices[b.id].quality / product.prices[b.id].price; return B - A; }); }, [sortBy, productId]); const min = Math.min(...STORES.map(s => product.prices[s.id].price)); const maxQ = Math.max(...STORES.map(s => product.prices[s.id].quality)); const sorts = [ { id: 'value', label: 'Best value' }, { id: 'price', label: 'Cheapest' }, { id: 'quality', label: 'Highest quality' }, { id: 'distance', label: 'Closest' }, { id: 'organic', label: 'Organic only' }, ]; return (

go(-1)}>} title="Compare" right={} /> {/* Hero */}

{product.emoji}

{product.name}

{product.unit} · 5 stores nearby

From ${min.toFixed(2)} Pickup ≤ 30m

{/* Sort chips */}

{sorts.map(s => ( ))}

{/* Rows */}

{sortedStores.map((s, i) => { const offer = product.prices[s.id]; const isCheapest = offer.price === min; const isHighestQ = offer.quality === maxQ; const saved = savedStore === s.id; return (

{isCheapest && (

BEST PRICE

)}

{s.name} {isHighestQ && TOP QUALITY} {offer.organic && ORGANIC}

{s.distance} · {offer.tag}

${offer.price.toFixed(2)}

each

Q {offer.quality} · ★ {s.rating}

); })}

); } // ───────────────────────────────────────────────────────── // Cart compare // ───────────────────────────────────────────────────────── function CartScreen({ cart, setCart, go, addToast, mode, setMode, deliveryPartner }) { const totals = useMemo(() => { const list = STORES.map(s => ({ store: s, ...storeTotal(cart, s.id, { delivery: mode === 'delivery' ? deliveryPartner : null }), })).sort((a,b) => a.total - b.total); return list; }, [cart, mode, deliveryPartner]); if (cart.length === 0) { return (

go('home')}>} title="Your basket" right={

}/>

🧺

Your basket is empty

Add items from the home screen to compare totals.

); } const min = totals[0].total, max = totals[totals.length-1].total; return (

go('home')}>} title="Your basket" right={} /> {/* Cart strip */}

{cart.length} item{cart.length === 1 ? '' : 's'}

{cart.map((line, i) => { const p = PRODUCTS.find(x => x.id === line.productId); return (

{p.emoji}

{p.name}

{p.unit}

{line.qty}

); })}

{/* Mode toggle */}

{['delivery','pickup'].map(m => ( ))}

Total at each store

{mode === 'delivery' ? 'incl. fees' : 'no fees'}

{totals.map((t, i) => (

{t.store.name} {i === 0 && SAVE ${(max-t.total).toFixed(2)}}

{t.availableCount}/{t.totalCount} items · Q {Math.round(t.avgQuality)} {mode === 'delivery' ? ` · ${deliveryPartner.etaMin}–${deliveryPartner.etaMax}m` : ` · ${t.store.pickupReady}`}

${t.total.toFixed(2)}

{mode === 'delivery' && (

+${(t.fees + t.serviceFee).toFixed(2)} fees

)}

VALUE

QUALITY

))}

); } // ───────────────────────────────────────────────────────── // Delivery vs pickup decision // ───────────────────────────────────────────────────────── function DeliveryScreen({ cart, go, addToast, mode, setMode, deliveryPartner, setDeliveryPartner }) { const totals = STORES.map(s => ({ store: s, ...storeTotal(cart, s.id) })) .sort((a,b) => a.total - b.total); const bestStore = totals[0].store; const pickupOptions = totals.slice(0,3) .map(o => ({ kind: 'pickup', store: o.store, total: o.total, eta: o.store.pickupReady, note: o.store.distance + ' away' })); const deliveryOptions = DELIVERY_PARTNERS.map(p => { const t = storeTotal(cart, bestStore.id, { delivery: p }); return { kind: 'delivery', partner: p, store: bestStore, total: t.total, fees: t.fees + t.serviceFee, eta: `${p.etaMin}–${p.etaMax} min` }; }); const all = [...pickupOptions, ...deliveryOptions].sort((a,b) => a.total - b.total); const cheapest = all[0]; const max = all[all.length-1].total; const [selected, setSelected] = useState(`${cheapest.kind}-${cheapest.kind === 'pickup' ? cheapest.store.id : cheapest.partner.id}`); return (

go('cart')}>} title="How to get it" right={

} />

BEST OVERALL

{cheapest.kind === 'pickup' ? `Pickup at ${cheapest.store.name}` : `${cheapest.partner.name} delivery`}

${cheapest.total.toFixed(2)} — {cheapest.kind === 'pickup' ? `ready in ${cheapest.eta}` : cheapest.eta}. Save ${(max - cheapest.total).toFixed(2)} vs priciest.

{cheapest.kind === 'pickup' ? 'NO FEES' : 'CHEAPEST DELIVERY'} RECOMMENDED

Pick it up

· no fees

{pickupOptions.map((o,i) => { const k = `pickup-${o.store.id}`; const sel = selected === k; return ( ); })}

Deliver to me

· from {bestStore.name}

{deliveryOptions.map((o,i) => { const k = `delivery-${o.partner.id}`; const sel = selected === k; return ( ); })}

); } // ───────────────────────────────────────────────────────── // Lists // ───────────────────────────────────────────────────────── function ListsScreen({ go, setCart, addToast }) { const lists = [ { id: 'staples', name: 'Weekly Staples', count: 7, last: 'Sun', emoji: '🛒', color: T.primarySoft, on: true, items: ['carrots','milk','eggs','apples','spinach','bread','pasta'] }, { id: 'roast', name: 'Sunday Roast', count: 4, last: 'Last week', emoji: '🍗', color: T.accentSoft, on: false, items: ['carrots','spinach','bread','pasta'] }, { id: 'lunches', name: 'Kid Lunches', count: 4, last: 'Mon', emoji: '🥪', color: T.cream, on: true, items: ['milk','bread','apples','eggs'] }, { id: 'pasta', name: 'Pasta Night', count: 3, last: '2 weeks', emoji: '🍝', color: '#FBE3E3', on: false, items: ['pasta','tomato','spinach'] }, ]; return (

} title="My lists" right={}/>

Weekly Staples

Reorders Sundays · next Apr 27

All lists

{lists.map(l => ( ))}

); } // ───────────────────────────────────────────────────────── // Me screen (placeholder) // ───────────────────────────────────────────────────────── function MeScreen({ go }) { return (

); } // ───────────────────────────────────────────────────────── // Root demo component // ───────────────────────────────────────────────────────── function FriendlyDemo() { // Stack-based navigation const [stack, setStack] = useState([{ screen: 'home' }]); const top = stack[stack.length - 1]; const [cart, setCart] = useState(DEFAULT_CART.slice()); const [mode, setMode] = useState('delivery'); const [deliveryPartner, setDeliveryPartner] = useState(DELIVERY_PARTNERS[1]); const [toast, setToast] = useState(null); const toastTimer = useRef(null); const addToast = (msg) => { setToast(msg); clearTimeout(toastTimer.current); toastTimer.current = setTimeout(() => setToast(null), 1800); }; const go = (target) => { if (target === -1) { if (stack.length > 1) setStack(stack.slice(0, -1)); return; } // Tabs reset stack const tabs = ['home','browse','lists','cart','me']; if (tabs.includes(target)) { setStack([{ screen: target }]); } else { setStack([...stack, { screen: target }]); } }; const openProduct = (id) => setStack([...stack, { screen: 'product', productId: id }]); const addToCart = (productId, storeId) => { const existing = cart.find(l => l.productId === productId); if (existing) { setCart(cart.map(l => l.productId === productId ? { ...l, qty: l.qty + 1 } : l)); } else { setCart([...cart, { productId, qty: 1, storeId }]); } }; const screen = top.screen; const tabActive = ['home','browse','lists','cart','me'].includes(screen) ? screen : ( screen === 'product' || screen === 'search' ? 'home' : screen === 'delivery' ? 'cart' : null ); let body = null; if (screen === 'home') body = ; else if (screen === 'browse') body = ; else if (screen === 'search') body = ; else if (screen === 'product') body = ; else if (screen === 'cart') body = ; else if (screen === 'delivery') body = ; else if (screen === 'lists') body = ; else if (screen === 'me') body = ; return (

{body} {tabActive && }

); } Object.assign(window, { FriendlyDemo });