// HimLocal — Web v2 Shop, Profile drawer, Cart drawer, Cafés modal, Payment

const { useState: useStateWShop, useMemo: useMemoWShop } = React;

function WebShop({ data, initialCat = 'all', onAddToCart, onOpenProduct }) {
  const [cat, setCat] = useStateWShop(initialCat);
  const [query, setQuery] = useStateWShop('');
  const [wishlist, setWishlist] = useStateWShop(() => new Set());
  const toggleWish = (id) => setWishlist(prev => {
    const next = new Set(prev);
    next.has(id) ? next.delete(id) : next.add(id);
    return next;
  });
  React.useEffect(() => { setCat(initialCat); }, [initialCat]);

  const D = data;
  const cats = D.shopCategories;

  const filtered = useMemoWShop(() => {
    let list = D.shopProducts;
    if (cat !== 'all') list = list.filter(p => p.cat === cat);
    if (query.trim()) {
      const q = query.toLowerCase();
      list = list.filter(p => p.name.toLowerCase().includes(q) || D.shopVendors[p.vendor]?.name.toLowerCase().includes(q));
    }
    return list;
  }, [cat, query]);

  const byVendor = useMemoWShop(() => {
    const g = {};
    filtered.forEach(p => { (g[p.vendor] ||= []).push(p); });
    return g;
  }, [filtered]);

  const heroCat = cats.find(c => c.id === 'wool');

  return (
    <div className="w2-shop w2-route">
      <div className="w2-shop__head">
        <div className="w2-shop__head-inner">
          <div className="w2-shop__head-row">
            <div>
              <h1 className="w2-shop__title">Shop <em>local.</em></h1>
              <div className="w2-shop__subtitle">Yak-wool blankets from Kibber. Slow-cooked ghee from three families in Mud. Apricots from Kalpa.</div>
            </div>
            <div className="w2-shop__search">
              <window.WIcon name="search" size={16}/>
              <input placeholder="Search ghee, wool, honey, gucchi…" value={query} onChange={e => setQuery(e.target.value)}/>
            </div>
          </div>
          <div className="w2-shop__catbar">
            <button className={`w2-shop__catchip ${cat === 'all' ? 'is-on' : ''}`} onClick={() => setCat('all')}>All</button>
            {cats.map(c => (
              <button key={c.id} className={`w2-shop__catchip ${cat === c.id ? 'is-on' : ''}`} onClick={() => setCat(c.id)}>{c.name}</button>
            ))}
          </div>
        </div>
      </div>

      <div className="w2-shop__body">
        {cat === 'all' && !query && (
          <>
            <div className="w2-shop-hero">
              <div className="w2-shop-hero__bg" style={{ backgroundImage:`url(${heroCat.img})` }}/>
              <div className="w2-shop-hero__scrim"/>
              <div className="w2-shop-hero__copy">
                <div className="w2-shop-hero__lbl">Featured · This week</div>
                <div className="w2-shop-hero__title">Yak wool, from <em>11 looms above Kibber.</em></div>
                <div className="w2-shop-hero__body">A women-led cooperative spinning yak wool by hand since 1989. Each piece is signed by the weaver.</div>
                <button className="w2-shop-hero__cta" onClick={() => setCat('wool')}>Shop the collection →</button>
              </div>
            </div>

            <div className="w2-sech">
              <div>
                <h2 className="w2-sech__t">Browse <em>categories</em></h2>
                <div className="w2-sech__sub">Six product families. Each backed by a single vendor or cooperative.</div>
              </div>
              <span className="w2-sech__more" style={{cursor:'default'}}>{cats.length} groups</span>
            </div>
            <div className="w2-cats">
              {cats.map(c => (
                <button key={c.id} className="w2-cat" onClick={() => setCat(c.id)}>
                  <div className="w2-cat__bg" style={{ backgroundImage:`url(${c.img})` }}/>
                  <div className="w2-cat__scrim"/>
                  <div className="w2-cat__name">{c.name}</div>
                  <div className="w2-cat__sub">{c.sub}</div>
                </button>
              ))}
            </div>
          </>
        )}

        <div className="w2-sech">
          <div>
            <h2 className="w2-sech__t">
              {cat === 'all' ? <>Featured <em>artisans</em></> : cats.find(c => c.id === cat)?.name}
            </h2>
            <div className="w2-sech__sub">
              {cat === 'all' ? 'Every product carries a name, a place and an altitude.' : cats.find(c => c.id === cat)?.sub}
            </div>
          </div>
          <span className="w2-sech__more" style={{cursor:'default'}}>{filtered.length} products</span>
        </div>

        {Object.keys(byVendor).length === 0 ? (
          <div style={{padding:'60px 20px',textAlign:'center',color:'var(--fg-3)',background:'var(--bg-paper)',borderRadius:14,border:'1px solid var(--border-1)'}}>
            <div style={{fontFamily:'var(--font-display)',fontStyle:'italic',fontSize:22,color:'var(--slate-700)',marginBottom:8}}>Nothing matches “{query}”.</div>
            <div style={{font:'400 13px var(--font-body)'}}>Try a broader term, or browse by category.</div>
          </div>
        ) : (
          Object.entries(byVendor).map(([vid, prods]) => {
            const v = D.shopVendors[vid];
            if (!v) return null;
            return (
              <div key={vid} className="w2-vendor">
                <div className="w2-vendor__story">
                  <div className="w2-vendor__img" style={{ backgroundImage:`url(${v.img})` }}>
                    <div className="w2-vendor__img-copy">
                      <div className="w2-vendor__loc">{v.loc}</div>
                      <div className="w2-vendor__name">{v.name}</div>
                    </div>
                  </div>
                  <div className="w2-vendor__body">
                    <div className="w2-vendor__copy">{v.story}</div>
                    <div className="w2-vendor__meta">{cats.find(c => c.id === v.cat)?.name?.toUpperCase()} · {prods.length} products in stock</div>
                  </div>
                </div>
                <div className="w2-prods">
                  {prods.map(p => (
                    <div key={p.id} className="w2-prod" role="link" tabIndex={0}
                      onClick={() => onOpenProduct && onOpenProduct(p.id)}
                      onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onOpenProduct && onOpenProduct(p.id); } }}
                      style={{cursor:'pointer'}}>
                      <div className="w2-prod__img" style={{ backgroundImage:`url(${p.img})` }}>
                        <button className="w2-prod__add"
                          onClick={e => { e.stopPropagation(); onAddToCart(p.id); }}
                          aria-label="Add to cart">+</button>
                      </div>
                      <div className="w2-prod__body">
                        <div className="w2-prod__name">{p.name}</div>
                        <div className="w2-prod__meta">{p.weight}</div>
                        <div className="w2-prod__price">₹{p.price.toLocaleString()}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            );
          })
        )}

        {/* Full vertical product grid — everything in the current filter */}
        {filtered.length > 0 && (
          <div className="w2-sech" style={{marginTop:42}}>
            <div>
              <h2 className="w2-sech__t">Browse <em>all</em></h2>
              <div className="w2-sech__sub">A flat grid of every product matching {query ? `“${query}”` : cat === 'all' ? 'this shop' : cats.find(c => c.id === cat)?.name}. Tap the heart to save for later.</div>
            </div>
            <span className="w2-sech__more" style={{cursor:'default'}}>{filtered.length} products · {wishlist.size} saved</span>
          </div>
        )}
        {filtered.length > 0 && (
          <div className="w2-allprods">
            {filtered.map(p => {
              const v = D.shopVendors[p.vendor];
              const wished = wishlist.has(p.id);
              return (
                <div key={p.id} className="w2-allprod" role="link" tabIndex={0}
                  onClick={() => onOpenProduct && onOpenProduct(p.id)}
                  onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onOpenProduct && onOpenProduct(p.id); } }}>
                  <div className="w2-allprod__img" style={{ backgroundImage:`url(${p.img})` }}>
                    <button className={`w2-allprod__wish ${wished ? 'is-on' : ''}`}
                      onClick={e => { e.stopPropagation(); toggleWish(p.id); }}
                      aria-label={wished ? 'Remove from wishlist' : 'Save to wishlist'}>
                      {wished ? '♥' : '♡'}
                    </button>
                  </div>
                  <div className="w2-allprod__body">
                    <div className="w2-allprod__maker">{v?.name}</div>
                    <div className="w2-allprod__name">{p.name}</div>
                    <div className="w2-allprod__foot">
                      <span className="w2-allprod__price">₹{p.price.toLocaleString()}</span>
                      <button className="w2-allprod__add"
                        onClick={e => { e.stopPropagation(); onAddToCart(p.id); }}
                        aria-label="Add to basket">+</button>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        )}

        {cat === 'all' && !query && (
          <div style={{display:'flex',alignItems:'center',gap:20,padding:'28px 32px',marginTop:24,background:'var(--bg-paper)',border:'1px solid var(--border-1)',borderRadius:18}}>
            <div style={{width:64,height:64,borderRadius:14,background:'var(--slate-700)',color:'white',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
              <window.WIcon name="mountain" size={28}/>
            </div>
            <div style={{flex:1,minWidth:0}}>
              <div style={{font:'600 11px var(--font-body)',letterSpacing:'.16em',textTransform:'uppercase',color:'var(--leaf-700)'}}>Coming soon</div>
              <div style={{fontFamily:'var(--font-display)',fontSize:24,fontWeight:500,letterSpacing:'-.018em',color:'var(--slate-700)',marginTop:4}}>Shop <em style={{fontWeight:400,fontStyle:'italic'}}>gear</em></div>
              <div style={{font:'400 13.5px var(--font-body)',color:'var(--fg-2)',marginTop:6,lineHeight:1.55,maxWidth:560}}>Tents, base layers, crampons. A separate kit-shop, opening late 2026 — the local-product shop you're in now stays focused on what's made up here.</div>
            </div>
            <button style={{padding:'12px 22px',borderRadius:999,background:'transparent',border:'1px solid var(--border-2)',font:'600 12.5px var(--font-body)',color:'var(--slate-700)',cursor:'pointer',flexShrink:0}}>Notify me</button>
          </div>
        )}
      </div>
    </div>
  );
}
window.WebShop = WebShop;

// ─── Cart drawer ─────────────────────────────────────────
function WebCartDrawer({ data, items, onClose, onQty, onCheckout }) {
  const D = data;
  const lines = items.map(it => ({ ...it, prod:D.shopProducts.find(p => p.id === it.id) })).filter(it => it.prod);
  const sub  = lines.reduce((s, it) => s + it.prod.price * it.qty, 0);
  const ship = sub > 0 ? 120 : 0;
  const tax  = Math.round(sub * 0.05);
  const total = sub + ship + tax;
  return (
    <>
      <div className="w2-detail-backdrop" onClick={onClose}/>
      <div className="w2-cart-drawer">
        <div className="w2-cart-drawer__head">
          <div>
            <div className="w2-cart-drawer__title">Your <em>basket</em></div>
            <div className="w2-cart-drawer__count">{lines.length} {lines.length === 1 ? 'item' : 'items'} · ships in 3—7 days</div>
          </div>
          <button className="w2-cart-drawer__close" onClick={onClose}>×</button>
        </div>
        <div className="w2-cart-drawer__body">
          {lines.length === 0 ? (
            <div style={{padding:'60px 20px',textAlign:'center'}}>
              <div style={{fontFamily:'var(--font-display)',fontSize:22,fontStyle:'italic',fontWeight:500,color:'var(--slate-700)',marginBottom:8}}>No items in your basket.</div>
              <div style={{font:'400 13px var(--font-body)',color:'var(--fg-2)'}}>Browse the local-product shop and tap the + on any product.</div>
            </div>
          ) : (
            lines.map(it => {
              const v = D.shopVendors[it.prod.vendor];
              const key = it.lineKey || it.id;
              return (
                <div key={key} className="w2-cart-row">
                  <div className="w2-cart-row__img" style={{ backgroundImage:`url(${it.prod.img})` }}/>
                  <div className="w2-cart-row__body">
                    <div className="w2-cart-row__name">{it.prod.name}</div>
                    <div className="w2-cart-row__maker">{v?.name} · {v?.loc}</div>
                    {it.variant && (
                      <div style={{font:'500 11.5px var(--font-mono)',color:'var(--leaf-700)',letterSpacing:'.04em',marginTop:4}}>{it.variant}</div>
                    )}
                    {it.note && (
                      <div style={{font:'400 11.5px var(--font-body)',color:'var(--fg-3)',background:'var(--bone-100)',border:'1px solid var(--border-1)',borderRadius:6,padding:'5px 8px',marginTop:6,lineHeight:1.4}}>
                        <span style={{fontWeight:600,color:'var(--fg-2)'}}>Note · </span>{it.note}
                      </div>
                    )}
                    <div className="w2-cart-row__row">
                      <span className="w2-cart-row__price">₹{(it.prod.price * it.qty).toLocaleString()}</span>
                      <span className="w2-cart-row__qty">
                        <button onClick={() => onQty(key, -1)}>−</button>
                        <span>{it.qty}</span>
                        <button onClick={() => onQty(key, 1)}>+</button>
                      </span>
                    </div>
                  </div>
                </div>
              );
            })
          )}
        </div>
        {lines.length > 0 && (
          <div className="w2-cart-drawer__sum">
            <div className="w2-cart-line"><span>Subtotal</span><span style={{fontFamily:'var(--font-mono)'}}>₹{sub.toLocaleString()}</span></div>
            <div className="w2-cart-line"><span>Shipping (3—7 days)</span><span style={{fontFamily:'var(--font-mono)'}}>₹{ship}</span></div>
            <div className="w2-cart-line"><span>GST (5%)</span><span style={{fontFamily:'var(--font-mono)'}}>₹{tax.toLocaleString()}</span></div>
            <div className="w2-cart-line" style={{borderTop:'1px dashed var(--border-1)',marginTop:8,paddingTop:10}}>
              <strong>Total</strong><strong style={{fontFamily:'var(--font-mono)'}}>₹{total.toLocaleString()}</strong>
            </div>
            <button className="w2-cart-pay" onClick={() => onCheckout(total)}>Checkout · pay ₹{total.toLocaleString()}</button>
          </div>
        )}
      </div>
    </>
  );
}
window.WebCartDrawer = WebCartDrawer;

// ─── Profile drawer ─────────────────────────────────────
function WebProfileDrawer({ data, onClose, onOpenItin, onOpenReceipt }) {
  const p = data.profile;
  const [tab, setTab] = useStateWShop('bookings');
  return (
    <>
      <div className="w2-detail-backdrop" onClick={onClose}/>
      <div className="w2-profile-drawer">
        <div className="w2-profile-drawer__head">
          <button className="w2-profile-drawer__close" onClick={onClose}>×</button>
          <div className="w2-profile-drawer__row">
            <div className="w2-profile-drawer__avatar" style={{ backgroundImage:`url(${p.avatar})` }}/>
            <div>
              <div className="w2-profile-drawer__name">{p.name}</div>
              <div className="w2-profile-drawer__handle">{p.handle} · {p.city}</div>
            </div>
          </div>
          <div className="w2-profile-drawer__stats">
            <div className="w2-profile-drawer__stat"><div className="w2-profile-drawer__statn">{p.bookings.length}</div><div className="w2-profile-drawer__statl">Stays</div></div>
            <div className="w2-profile-drawer__stat"><div className="w2-profile-drawer__statn">{p.orders.length}</div><div className="w2-profile-drawer__statl">Orders</div></div>
            <div className="w2-profile-drawer__stat"><div className="w2-profile-drawer__statn">{(p.myActivities||[]).length}</div><div className="w2-profile-drawer__statl">Activities</div></div>
            <div className="w2-profile-drawer__stat"><div className="w2-profile-drawer__statn">{p.savedItins.length}</div><div className="w2-profile-drawer__statl">Trips</div></div>
          </div>
          <div className="w2-profile-drawer__tabs">
            <button className={`w2-profile-drawer__tab ${tab === 'bookings' ? 'is-on' : ''}`} onClick={() => setTab('bookings')}>Stays</button>
            <button className={`w2-profile-drawer__tab ${tab === 'orders' ? 'is-on' : ''}`} onClick={() => setTab('orders')}>Orders</button>
            <button className={`w2-profile-drawer__tab ${tab === 'activities' ? 'is-on' : ''}`} onClick={() => setTab('activities')}>Activities</button>
            <button className={`w2-profile-drawer__tab ${tab === 'account' ? 'is-on' : ''}`} onClick={() => setTab('account')}>Account</button>
          </div>
        </div>
        <div className="w2-profile-drawer__body">
          {tab === 'bookings' && (<>
            <div className="w2-profile-drawer__sect-t">Stays · upcoming &amp; past</div>
            {p.bookings.map(b => (
              <div key={b.ref} className="w2-prow" style={{cursor:'pointer'}} onClick={() => onOpenReceipt && onOpenReceipt('booking', b)}>
                <div className="w2-prow__icon" style={{background:b.status === 'Refunded' ? 'var(--bone-100)' : 'var(--leaf-100)',color:b.status === 'Refunded' ? 'var(--fg-3)' : 'var(--leaf-700)'}}>◈</div>
                <div className="w2-prow__body">
                  <div className="w2-prow__name">{b.title}</div>
                  <div className="w2-prow__meta">{b.dates} · {b.ref}</div>
                  <span className={`w2-prow__status ${b.status === 'Confirmed' ? 'w2-prow__status--ok' : 'w2-prow__status--gone'}`}>{b.status}</span>
                </div>
                <div className="w2-prow__amt">₹{b.amount.toLocaleString()}</div>
              </div>
            ))}
            <div className="w2-profile-drawer__sect-t" style={{marginTop:20}}>Saved itineraries</div>
            {p.savedItins.map(it => (
              <div key={it.id} className="w2-prow" onClick={onOpenItin}>
                <div className="w2-prow__icon" style={{background:'var(--lavender-100)',color:'var(--lavender-700)'}}>◎</div>
                <div className="w2-prow__body">
                  <div className="w2-prow__name">{it.title}</div>
                  <div className="w2-prow__meta">{it.region} · {it.days} days · by {it.by}</div>
                </div>
                <div style={{font:'600 10px var(--font-body)',letterSpacing:'.14em',textTransform:'uppercase',color:'var(--slate-600)'}}>Open →</div>
              </div>
            ))}
          </>)}

          {tab === 'orders' && (<>
            <div className="w2-profile-drawer__sect-t">Shop orders</div>
            {p.orders.map(o => (
              <div key={o.ref} className="w2-prow" style={{cursor:'pointer'}} onClick={() => onOpenReceipt && onOpenReceipt('order', o)}>
                <div className="w2-prow__icon" style={{background:'var(--sky-100)',color:'var(--sky-700)'}}>⊛</div>
                <div className="w2-prow__body">
                  <div className="w2-prow__name">{o.title}</div>
                  <div className="w2-prow__meta">{o.ref} · {o.eta}</div>
                  <span className={`w2-prow__status ${o.status === 'Shipped' ? 'w2-prow__status--ship' : 'w2-prow__status--gone'}`}>{o.status}</span>
                </div>
                <div className="w2-prow__amt">₹{o.total.toLocaleString()}</div>
              </div>
            ))}
            <div className="w2-profile-drawer__sect-t" style={{marginTop:20}}>Café orders</div>
            {(p.cafeOrders||[]).map(o => (
              <div key={o.ref} className="w2-prow" style={{cursor:'pointer'}} onClick={() => onOpenReceipt && onOpenReceipt('cafe-order', o)}>
                <div className="w2-prow__icon" style={{background:'rgba(229,169,59,.18)',color:'#8B5A2B'}}>☕</div>
                <div className="w2-prow__body">
                  <div className="w2-prow__name">{o.cafe} · {o.mode}</div>
                  <div className="w2-prow__meta">{o.items} · {o.eta}</div>
                  <span className={`w2-prow__status ${o.status === 'Completed' ? 'w2-prow__status--gone' : 'w2-prow__status--ship'}`}>{o.status}</span>
                </div>
                <div className="w2-prow__amt">₹{o.total.toLocaleString()}</div>
              </div>
            ))}
          </>)}

          {tab === 'activities' && (<>
            <div className="w2-profile-drawer__sect-t">My activities</div>
            {(p.myActivities||[]).length === 0
              ? <div style={{padding:'40px 8px',textAlign:'center',color:'var(--fg-3)',font:'400 13px var(--font-body)'}}>No activities booked yet.</div>
              : p.myActivities.map(a => (
                  <div key={a.ref} className="w2-prow" style={{cursor:'pointer'}} onClick={() => onOpenReceipt && onOpenReceipt('activity', a)}>
                    <div className="w2-prow__icon" style={{background:'var(--leaf-100)',color:'var(--leaf-700)'}}>★</div>
                    <div className="w2-prow__body">
                      <div className="w2-prow__name">{a.title}</div>
                      <div className="w2-prow__meta">{a.vendor} · {a.date}</div>
                      <span className={`w2-prow__status ${a.status === 'Confirmed' ? 'w2-prow__status--ok' : 'w2-prow__status--gone'}`}>{a.status}{a.voucher ? ` · ${a.voucher}` : ''}</span>
                    </div>
                    <div className="w2-prow__amt">₹{a.total.toLocaleString()}</div>
                  </div>
                ))}
          </>)}

          {tab === 'account' && (<>
            <div className="w2-profile-drawer__sect-t">Personal</div>
            <div style={{padding:'12px 0',borderBottom:'1px solid var(--border-1)'}}>
              <div style={{font:'400 12px var(--font-body)',color:'var(--fg-3)'}}>Full name</div>
              <div style={{font:'600 14px var(--font-body)',color:'var(--slate-700)',marginTop:2}}>{p.name}</div>
            </div>
            <div style={{padding:'12px 0',borderBottom:'1px solid var(--border-1)'}}>
              <div style={{font:'400 12px var(--font-body)',color:'var(--fg-3)'}}>Email</div>
              <div style={{font:'600 14px var(--font-body)',color:'var(--slate-700)',marginTop:2}}>aanya.rana@example.com</div>
            </div>
            <div className="w2-profile-drawer__sect-t" style={{marginTop:20}}>Saved addresses</div>
            {p.addresses.map(a => (
              <div key={a.id} style={{padding:'12px 0',borderBottom:'1px solid var(--border-1)'}}>
                <div style={{display:'flex',justifyContent:'space-between'}}>
                  <div style={{font:'600 12px var(--font-body)',letterSpacing:'.14em',textTransform:'uppercase',color:'var(--slate-700)'}}>{a.label}{a.isDefault && <span style={{fontSize:9,padding:'2px 6px',marginLeft:6,background:'var(--leaf-100)',color:'var(--leaf-700)',borderRadius:4}}>DEFAULT</span>}</div>
                  <button style={{background:0,border:0,font:'600 10px var(--font-body)',letterSpacing:'.14em',color:'var(--fg-3)',cursor:'pointer'}}>EDIT</button>
                </div>
                <div style={{font:'400 13px var(--font-body)',color:'var(--fg-2)',marginTop:4,lineHeight:1.5}}>{a.line1}{a.line2 ? `, ${a.line2}` : ''}<br/>{a.city}, {a.state} · {a.pincode}</div>
                <div style={{font:'400 11px var(--font-mono)',color:'var(--fg-3)',marginTop:3}}>{a.phone}</div>
              </div>
            ))}
            <button style={{width:'100%',padding:12,margin:'10px 0',background:0,border:'2px dashed var(--border-2)',borderRadius:10,cursor:'pointer',font:'600 12.5px var(--font-body)',color:'var(--slate-700)'}}>+ Add new address</button>

            <div className="w2-profile-drawer__sect-t" style={{marginTop:20}}>Payment methods</div>
            {(p.paymentMethods||[]).map(m => (
              <div key={m.id} className="w2-prow">
                <div className="w2-prow__icon">{m.kind === 'upi' ? '₹' : '▭'}</div>
                <div className="w2-prow__body">
                  <div className="w2-prow__name">{m.label}</div>
                  <div className="w2-prow__meta">{m.detail}</div>
                </div>
                {m.isDefault && <span style={{font:'600 9px var(--font-body)',letterSpacing:'.14em',color:'var(--leaf-700)'}}>DEFAULT</span>}
              </div>
            ))}

            <div className="w2-profile-drawer__sect-t" style={{marginTop:20}}>Notifications</div>
            {Object.entries(p.notifications||{}).map(([k, v]) => (
              <div key={k} className="w2-toggle">
                <div className="w2-toggle__body">
                  <div className="w2-toggle__name">{({tripReminders:'Trip reminders',orderUpdates:'Order updates',hostMessages:'Host messages',marketing:'Marketing emails',weeklyDigest:'Weekly digest'})[k] || k}</div>
                  <div className="w2-toggle__sub">{({tripReminders:'Day-of nudges & check-in prompts',orderUpdates:'Shipped / out for delivery / delivered',hostMessages:'When a host replies',marketing:'Occasional drops & launches',weeklyDigest:'New trails & creator routes'})[k] || ''}</div>
                </div>
                <div className={`w2-toggle__sw ${v ? 'is-on' : ''}`}/>
              </div>
            ))}

            <button style={{width:'100%',padding:'10px 12px',marginTop:18,background:0,border:'1px solid var(--border-2)',borderRadius:8,font:'600 12px var(--font-body)',color:'var(--terracotta)',cursor:'pointer'}}>Sign out</button>
          </>)}
        </div>
      </div>
    </>
  );
}
window.WebProfileDrawer = WebProfileDrawer;

// ─── Cafés external-redirect modal ─────────────────────
function WebCafesModal({ cafes, onClose }) {
  return (
    <div className="w2-ext-back" onClick={onClose}>
      <div className="w2-ext" onClick={e => e.stopPropagation()}>
        <div className="w2-ext__lbl">External · Zomato passthrough</div>
        <div className="w2-ext__title">Cafés &amp; kitchens</div>
        <div className="w2-ext__body">
          We don't book café tables ourselves. Tap a café to open the menu in the Zomato app — you'll come back here to check in on the return.
        </div>
        <div className="w2-ext__list">
          {cafes.map(c => (
            <button key={c.id} className="w2-ext__cafe">
              <div className="w2-ext__cafe-img" style={{ backgroundImage:`url(${c.img})` }}/>
              <div className="w2-ext__cafe-body">
                <div className="w2-ext__cafe-name">{c.name}</div>
                <div className="w2-ext__cafe-loc">{c.loc}</div>
                <div className="w2-ext__cafe-tag">{c.tag}</div>
              </div>
              <div className="w2-ext__cafe-arrow">↗</div>
            </button>
          ))}
        </div>
        <button className="w2-ext__btn" onClick={onClose}>Close</button>
      </div>
    </div>
  );
}
window.WebCafesModal = WebCafesModal;

// ─── Payment modal ─────────────────────────────────────
function WebPaymentModal({ title, amount, lineItems = [], onClose, onPaid }) {
  const [step, setStep] = useStateWShop('confirm');
  return (
    <div className="w2-pay-back" onClick={onClose}>
      <div className="w2-pay" onClick={e => e.stopPropagation()}>
        {step === 'confirm' && (
          <>
            <div className="w2-pay__lbl">Razorpay · Secure checkout</div>
            <div className="w2-pay__title">{title}</div>
            {(lineItems.length ? lineItems : [['Total', `₹${amount.toLocaleString()}`]]).map(([l, r], i) => (
              <div key={i} className="w2-pay__line"><span>{l}</span><span style={{fontFamily:'var(--font-mono)'}}>{r}</span></div>
            ))}
            <div className="w2-pay__total"><span>Total</span><span style={{fontFamily:'var(--font-mono)'}}>₹{amount.toLocaleString()}</span></div>
            <div className="w2-pay__methods">
              {['UPI','Card','Net banking','Wallet'].map((m, i) => (
                <button key={m} className={`w2-pay__method ${i === 0 ? 'is-on' : ''}`}>{m}</button>
              ))}
            </div>
            <button className="w2-pay__cta" onClick={() => { setStep('paying'); setTimeout(() => setStep('done'), 1200); }}>
              Confirm &amp; pay ₹{amount.toLocaleString()}
            </button>
          </>
        )}
        {step === 'paying' && (
          <div style={{textAlign:'center',padding:'48px 0',fontFamily:'var(--font-display)',fontStyle:'italic',color:'var(--fg-2)',fontSize:18}}>Authorising with your bank…</div>
        )}
        {step === 'done' && (
          <div style={{textAlign:'center',padding:'20px 0 4px'}}>
            <div style={{width:72,height:72,borderRadius:'50%',background:'var(--himlocal-green)',color:'#0F2410',display:'flex',alignItems:'center',justifyContent:'center',font:'700 32px var(--font-body)',margin:'0 auto 18px',boxShadow:'0 0 0 8px rgba(11,218,81,.15)'}}>✓</div>
            <div style={{fontFamily:'var(--font-display)',fontSize:30,fontWeight:500,color:'var(--slate-700)',margin:'0 0 8px'}}>Reserved.</div>
            <div style={{color:'var(--fg-2)',fontSize:14,marginBottom:24}}>Your host has been notified.</div>
            <button className="w2-pay__cta" onClick={onPaid}>Done</button>
          </div>
        )}
      </div>
    </div>
  );
}
window.WebPaymentModal = WebPaymentModal;