Cafés & kitchens

Order in, take away, or sit down. Every café here runs on HimLocal — no external redirects.

{data.cafes.map(c => (

onOpenCafe(c.id)}>

{c.modes.map(m => ( {m === 'dinein' ? 'Dine-in' : m === 'takeaway' ? 'Takeaway' : 'Delivery'} ))}

{c.name}

{c.loc}

{c.tag}

))}

); } window.WebCafesList = WebCafesList; // ─── Cafe detail page (menu + service mode + cart) ─────── function WebCafeDetail({ data, cafe, cart, onBack, onMode, mode, onAdd, onQty, onCheckout }) { const [customizing, setCustomizing] = useStateWCafe(null); const [activeSect, setActiveSect] = useStateWCafe(cafe?.menu?.[0]?.section); const [orderNote, setOrderNote] = useStateWCafe(''); const c = cafe; if (!c) return null; const cartLines = cart.map(it => ({ ...it, item:findItem(c, it.itemId) })).filter(l => l.item); const subtotal = cartLines.reduce((s, l) => s + l.unitPrice * l.qty, 0); const delivery = mode === 'delivery' ? 40 : 0; const tax = Math.round(subtotal * 0.05); const total = subtotal + delivery + tax; const scrollToSect = (name) => { setActiveSect(name); const el = document.getElementById('cafe-sect-' + name.replace(/\s+/g, '-')); if (el) el.scrollIntoView({ behavior:'smooth', block:'start' }); }; const quickAdd = (item) => { const hasOpts = (item.variants && item.variants.length > 0) || (item.addons && item.addons.length > 0); if (hasOpts) { setCustomizing(item); return; } onAdd(item, { unitPrice:item.price, qty:1, customLabel:'' }); }; // Quantity of a no-option item in cart (sum across lines) const itemQtyInCart = (itemId) => cart.filter(l => l.itemId === itemId && !l.customLabel).reduce((s, l) => s + l.qty, 0); const lineIdForItem = (itemId) => cart.find(l => l.itemId === itemId && !l.customLabel)?.lineId; return (

{c.loc}

{c.name}

{c.tag} · {c.hours}

{['dinein','takeaway','delivery'].map(m => { const avail = c.modes.includes(m); return ( ); })}

{c.story}

{/* Sticky category nav */}

{c.menu.map(sect => ( ))}

{c.menu.map(sect => (

{sect.section}

{sect.items.length} {sect.items.length === 1 ? 'item' : 'items'}

{sect.items.map(it => { const hasOpts = (it.variants && it.variants.length > 0) || (it.addons && it.addons.length > 0); const qty = itemQtyInCart(it.id); const lineId = lineIdForItem(it.id); return (

hasOpts ? setCustomizing(it) : null}>

{it.name}

{it.desc}

₹{it.price.toLocaleString()}

{hasOpts &&

Customize

} {!hasOpts && qty > 0 ? (

e.stopPropagation()}> {qty}

) : ( )}

); })}

))}

What people say

{c.reviews.map((r, i) => (

{r.author} {r.when} · {'★'.repeat(r.stars)}

{r.text}

))}

{/* Right sidebar: cart */}

{cartLines.length === 0 ? (

Your order

Add items from the menu — your cart will live here.

) : ( <>

Your order

{mode === 'dinein' ? 'Dine-in' : mode === 'takeaway' ? 'Takeaway' : 'Delivery'}

{cartLines.map((l, i) => (

{l.item.name}

{l.customLabel &&

{l.customLabel}

}

₹{(l.unitPrice * l.qty).toLocaleString()} {l.qty}

))}

Subtotal₹{subtotal.toLocaleString()}

{mode === 'delivery' &&

Delivery₹{delivery}

}

GST (5%)₹{tax.toLocaleString()}

Total₹{total.toLocaleString()}

Special instructions Optional

setOrderNote(e.target.value)}
                  placeholder="Allergies, less spicy, no onion, less butter…"
                  style={{width:'100%',minHeight:54,padding:'8px 10px',borderRadius:8,background:'white',border:'1px solid var(--border-2)',font:'400 13px var(--font-body)',color:'var(--fg-1)',resize:'vertical'}}/>
                <div style={{font:'400 11px var(--font-body)',color:'var(--fg-3)',marginTop:4}}>{orderNote.length}/200 · Sent to the kitchen as-is.</div>
              </div>
              <button className="w2-cafe__sb-cta" onClick={() => onCheckout({ subtotal, delivery, tax, total, mode, note:orderNote.trim() || undefined })}>
                {mode === 'delivery' ? 'Set delivery address →' : mode === 'takeaway' ? 'Pick up at café →' : 'Place order at table →'}
              </button>
            </>
          )}
        </aside>
      </div>

{customizing && (
        <WebItemCustomize item={customizing}
          onClose={() => setCustomizing(null)}
          onAdd={(detail) => { onAdd(customizing, detail); setCustomizing(null); }}/>
      )}
    </div>
  );
}
window.WebCafeDetail = WebCafeDetail;

function findItem(cafe, id) {
  for (const s of cafe.menu) {
    for (const it of s.items) if (it.id === id) return it;
  }
  return null;
}

// ─── Item customize modal ────────────────────────────────
function WebItemCustomize({ item, onClose, onAdd }) {
  const variants = item.variants || [];
  const addons = item.addons || [];
  const [variantIdx, setVariantIdx] = useStateWCafe(variants.length > 0 ? 0 : -1);
  const [addOnPicks, setAddOnPicks] = useStateWCafe([]);
  const [qty, setQty] = useStateWCafe(1);

const unit = item.price + (variantIdx >= 0 ? (variants[variantIdx]?.price || 0) : 0) + addOnPicks.reduce((s, i) => s + (addons[i]?.price || 0), 0);
  const total = unit * qty;

const toggleAddon = (i) => setAddOnPicks(p => p.includes(i) ? p.filter(x => x !== i) : [...p, i]);

const submit = () => {
    const parts = [];
    if (variantIdx >= 0 && variants[variantIdx]) parts.push(variants[variantIdx].name);
    addOnPicks.forEach(i => parts.push('+ ' + addons[i].name));
    onAdd({ unitPrice:unit, qty, customLabel:parts.join(' · ') });
  };

return (
    <div className="w2-cust-back" onClick={onClose}>
      <div className="w2-cust" onClick={e => e.stopPropagation()}>
        <div className="w2-cust__img" style={{ backgroundImage:`url(${item.img})` }}/>
        <div className="w2-cust__body">
          <h2 className="w2-cust__title">{item.name}</h2>
          <div className="w2-cust__desc">{item.desc}</div>

{variants.length > 0 && (
            <div className="w2-cust__group">
              <div className="w2-cust__group-l">Choose one</div>
              <div className="w2-cust__opts">
                {variants.map((v, i) => (
                  <button key={i} className={`w2-cust__opt ${variantIdx === i ? 'is-on' : ''}`} onClick={() => setVariantIdx(i)}>
                    {v.name}
                    <span>{v.price > 0 ? `+₹${v.price}` : 'Included'}</span>
                  </button>
                ))}
              </div>
            </div>
          )}

{addons.length > 0 && (
            <div className="w2-cust__group">
              <div className="w2-cust__group-l">Add ons</div>
              <div className="w2-cust__opts">
                {addons.map((a, i) => (
                  <button key={i} className={`w2-cust__opt ${addOnPicks.includes(i) ? 'is-on' : ''}`} onClick={() => toggleAddon(i)}>
                    {a.name}<span>+₹{a.price}</span>
                  </button>
                ))}
              </div>
            </div>
          )}
        </div>
        <div className="w2-cust__foot">
          <div className="w2-cust__qty">
            <button onClick={() => setQty(q => Math.max(1, q - 1))}>−</button>
            <span>{qty}</span>
            <button onClick={() => setQty(q => q + 1)}>+</button>
          </div>
          <button className="w2-cust__add" onClick={submit}>Add · ₹{total.toLocaleString()}</button>
        </div>
      </div>
    </div>
  );
}
window.WebItemCustomize = WebItemCustomize;

// ─── Address selector modal ──────────────────────────────
function WebAddressSelector({ addresses, selectedId, title, subtitle, onPick, onAdd, onClose, ctaLabel = 'Continue' }) {
  const [pick, setPick] = useStateWCafe(selectedId || addresses.find(a => a.isDefault)?.id || addresses[0]?.id);
  const [mode, setMode] = useStateWCafe('list');  // 'list' | 'new'
  const [draft, setDraft] = useStateWCafe({ label:'Home', name:'', phone:'', line1:'', line2:'', city:'', state:'', pincode:'' });

if (mode === 'new') {
    const valid = draft.name && draft.phone && draft.line1 && draft.city && draft.pincode;
    return (
      <div className="w2-addr-back" onClick={onClose}>
        <div className="w2-addr" onClick={e => e.stopPropagation()}>
          <div className="w2-addr__lbl">Add new address</div>
          <h2 className="w2-addr__title">Where should we <em>deliver?</em></h2>
          <div className="w2-addr__sub">Drop a pin so the courier (or café cook) finds you fast.</div>
          <div className="w2-addrf__pin">
            <div className="w2-addrf__pin-dot"/>
          </div>
          <div className="w2-addrf__row">
            <div className="w2-addrf__field">
              <label className="w2-addrf__field-l">Label</label>
              <select className="w2-addrf__input" value={draft.label} onChange={e => setDraft(d => ({ ...d, label:e.target.value }))}>
                {['Home','Office','Other'].map(o => <option key={o}>{o}</option>)}
              </select>
            </div>
            <div className="w2-addrf__field">
              <label className="w2-addrf__field-l">Phone</label>
              <input className="w2-addrf__input" placeholder="+91 …" value={draft.phone} onChange={e => setDraft(d => ({ ...d, phone:e.target.value }))}/>
            </div>
          </div>
          <div className="w2-addrf__field" style={{marginBottom:10}}>
            <label className="w2-addrf__field-l">Full name</label>
            <input className="w2-addrf__input" value={draft.name} onChange={e => setDraft(d => ({ ...d, name:e.target.value }))}/>
          </div>
          <div className="w2-addrf__field" style={{marginBottom:10}}>
            <label className="w2-addrf__field-l">Address line 1</label>
            <input className="w2-addrf__input" value={draft.line1} onChange={e => setDraft(d => ({ ...d, line1:e.target.value }))}/>
          </div>
          <div className="w2-addrf__field" style={{marginBottom:10}}>
            <label className="w2-addrf__field-l">Address line 2 (optional)</label>
            <input className="w2-addrf__input" value={draft.line2} onChange={e => setDraft(d => ({ ...d, line2:e.target.value }))}/>
          </div>
          <div className="w2-addrf__row">
            <div className="w2-addrf__field">
              <label className="w2-addrf__field-l">City</label>
              <input className="w2-addrf__input" value={draft.city} onChange={e => setDraft(d => ({ ...d, city:e.target.value }))}/>
            </div>
            <div className="w2-addrf__field">
              <label className="w2-addrf__field-l">Pincode</label>
              <input className="w2-addrf__input" value={draft.pincode} onChange={e => setDraft(d => ({ ...d, pincode:e.target.value }))}/>
            </div>
          </div>
          <div className="w2-addr__actions">
            <button className="w2-addr__cancel" onClick={() => setMode('list')}>← Back</button>
            <button className="w2-addr__continue" disabled={!valid} style={!valid ? { opacity:.5, cursor:'not-allowed' } : null}
              onClick={() => { onAdd({ ...draft, id:'a' + Date.now() }); setMode('list'); }}>Save address</button>
          </div>
        </div>
      </div>
    );
  }

return (
    <div className="w2-addr-back" onClick={onClose}>
      <div className="w2-addr" onClick={e => e.stopPropagation()}>
        <div className="w2-addr__lbl">{title || 'Select address'}</div>
        <h2 className="w2-addr__title">Where do we send it?</h2>
        <div className="w2-addr__sub">{subtitle || 'Pick a saved address, or add a new one.'}</div>
        {addresses.length === 0 && (
          <div style={{padding:'24px 16px',textAlign:'center',color:'var(--fg-3)',background:'var(--bone-100)',borderRadius:10,marginBottom:12}}>
            No addresses saved yet. Add your first below.
          </div>
        )}
        {addresses.map(a => (
          <div key={a.id} className={`w2-addr-card ${pick === a.id ? 'is-on' : ''}`} onClick={() => setPick(a.id)}>
            <div className="w2-addr-card__radio"/>
            <div className="w2-addr-card__body">
              <div className="w2-addr-card__label">
                <span>{a.label}</span>
                {a.isDefault && <span className="w2-addr-card__label-tag">Default</span>}
              </div>
              <div className="w2-addr-card__name">{a.name}</div>
              <div className="w2-addr-card__addr">{a.line1}{a.line2 ? `, ${a.line2}` : ''}<br/>{a.city}, {a.state} · {a.pincode}</div>
              <div className="w2-addr-card__phone">{a.phone}</div>
            </div>
            <button className="w2-addr-card__edit" onClick={e => { e.stopPropagation(); /* edit not wired */ }}>Edit</button>
          </div>
        ))}
        <button className="w2-addr__addnew" onClick={() => setMode('new')}>+ Add new address</button>
        <div className="w2-addr__actions">
          <button className="w2-addr__cancel" onClick={onClose}>Cancel</button>
          <button className="w2-addr__continue" disabled={!pick} onClick={() => onPick(pick)}>{ctaLabel} →</button>
        </div>
      </div>
    </div>
  );
}
window.WebAddressSelector = WebAddressSelector;