// W2Go screens — Home, Outlet (kitchen detail), Browse, Item Detail, Cart

const { useState: useStateB, useEffect: useEffectB, useRef: useRefB, useMemo: useMemoB } = React;

// ───────────────────────────────────────────────────────────────
// 5. HOME — outlets-first
// ───────────────────────────────────────────────────────────────
function HomeScreen({ go, address, user, cart, openItem, openOutlet }) {
  const M = window.W2_MEMBER || {};
  const greetTime = (() => {
    const h = new Date().getHours();
    if (h < 11) return 'Good morning';
    if (h < 16) return 'Good afternoon';
    if (h < 21) return 'Good evening';
    return 'Late night';
  })();
  const firstName = (user?.name || M.name || 'friend').split(' ')[0];

  const featured = W2_ITEMS.filter(i => i.hero).slice(0, 8);
  const collections = window.W2_COLLECTIONS || [];
  const experiences = window.W2_EXPERIENCES || [];
  const offers = window.W2_OFFERS || [];
  const heroCol = collections[0];

  return (
    <div style={{ position: 'absolute', inset: 0, paddingTop: 50, boxSizing: 'border-box',
                  background: 'var(--w-cream)', display: 'flex', flexDirection: 'column' }}>
      {/* Sticky top — greeting + member chip */}
      <div style={{ padding: '12px 18px 8px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <button onClick={() => go('location')} style={{
            flex: 1, display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px 6px 4px',
            background: 'none', border: 'none', fontFamily: 'inherit', cursor: 'pointer', textAlign: 'left'
          }}>
            <div style={{ flex: 1, overflow: 'hidden' }}>
              <div style={{ fontSize: 11, fontWeight: 600, opacity: 0.55 }}>{greetTime},</div>
              <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: -0.5, color: 'var(--w-onyx)',
                            display: 'flex', alignItems: 'center', gap: 7 }}>
                {firstName}
                <span style={{ fontSize: 9, letterSpacing: 1.2, fontWeight: 800, padding: '3px 7px',
                               borderRadius: 5, background: 'linear-gradient(135deg, #C9A24B, #9c7a2e)',
                               color: '#fff', textTransform: 'uppercase' }}>{M.tier || 'Gold'}</span>
              </div>
            </div>
          </button>
          <button onClick={() => go('account')} style={iconBtn}>
            <Ic.Bell size={20}/>
            <span style={{ position: 'absolute', top: 10, right: 11, width: 8, height: 8, borderRadius: 999,
                           background: '#C24A2C', border: '2px solid var(--w-cream)' }}/>
          </button>
        </div>
        {/* location strip */}
        <button onClick={() => go('location')} style={{
          marginTop: 4, display: 'flex', alignItems: 'center', gap: 6, padding: '6px 12px',
          background: 'rgba(23,25,25,0.05)', borderRadius: 999, border: 'none',
          fontFamily: 'inherit', cursor: 'pointer', width: '100%', textAlign: 'left'
        }}>
          <Ic.Pin size={14} style={{ color: 'var(--w-green)' }}/>
          <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--w-onyx)' }}>
            {address?.label || 'Home'} — {address?.line || 'Tower 2, The Pearl'}
          </span>
          <span style={{ fontSize: 11, opacity: 0.5, marginLeft: 'auto', fontWeight: 600 }}>45 min</span>
          <Ic.ChevronD size={14} style={{ opacity: 0.5 }}/>
        </button>
      </div>

      <Scroll pad={130}>
        {/* ─── LOYALTY BAR (Starbucks) ─────────────────────────── */}
        <div style={{ padding: '6px 18px 0' }}>
          <button onClick={() => go('account')} style={{
            width: '100%', display: 'flex', alignItems: 'center', gap: 14, padding: '14px 16px',
            background: 'var(--w-onyx)', border: 'none', borderRadius: 18, cursor: 'pointer',
            fontFamily: 'inherit', textAlign: 'left', position: 'relative', overflow: 'hidden'
          }}>
            <div style={{ position: 'absolute', inset: 0,
                          background: 'radial-gradient(120% 100% at 90% 10%, rgba(201,162,75,0.35), transparent 55%)' }}/>
            <div style={{ position: 'relative', width: 44, height: 44, borderRadius: 12,
                          background: 'linear-gradient(135deg, #C9A24B, #9c7a2e)', flex: 'none',
                          display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>
              <Ic.Spark size={22}/>
            </div>
            <div style={{ position: 'relative', flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                <span style={{ fontSize: 17, fontWeight: 800, color: 'var(--w-cream)', letterSpacing: -0.3 }}>
                  {(M.points || 2480).toLocaleString()}
                </span>
                <span style={{ fontSize: 11, color: 'rgba(249,242,232,0.6)', fontWeight: 600 }}>vibe points</span>
              </div>
              <div style={{ marginTop: 6, height: 5, borderRadius: 3, background: 'rgba(249,242,232,0.15)', overflow: 'hidden' }}>
                <div style={{ width: `${(M.tierProgress || 0.82) * 100}%`, height: '100%',
                              background: 'linear-gradient(90deg, #C9A24B, #e3c578)' }}/>
              </div>
              <div style={{ marginTop: 5, fontSize: 10.5, color: 'rgba(249,242,232,0.65)', fontWeight: 600 }}>
                {M.pointsToNext || 520} pts to {M.nextTier || 'Platinum'} — unlock priority kitchen
              </div>
            </div>
            <Ic.ChevronR size={18} style={{ position: 'relative', color: 'rgba(249,242,232,0.5)' }}/>
          </button>
        </div>

        {/* ─── DISCOVERY HERO — featured collection (Airbnb) ─────── */}
        {heroCol && (
          <div style={{ padding: '16px 18px 0' }}>
            <button onClick={() => openItem(heroCol.items[0])} style={{
              width: '100%', position: 'relative', borderRadius: 24, overflow: 'hidden',
              border: 'none', padding: 0, cursor: 'pointer', fontFamily: 'inherit',
              minHeight: 300, display: 'block', textAlign: 'left'
            }}>
              <img src={heroCol.img} alt="" style={{
                position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover'
              }}/>
              <div style={{ position: 'absolute', inset: 0,
                            background: 'linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.8) 100%)' }}/>
              <div style={{ position: 'relative', padding: 22, minHeight: 300, display: 'flex',
                            flexDirection: 'column', justifyContent: 'space-between' }}>
                <div style={{ display: 'flex', gap: 8 }}>
                  {heroCol.exclusive && (
                    <span style={{ fontSize: 9.5, letterSpacing: 1.6, fontWeight: 800, padding: '6px 10px',
                                   borderRadius: 6, background: 'linear-gradient(135deg, #C9A24B, #9c7a2e)',
                                   color: '#fff' }}>★ {heroCol.kicker}</span>
                  )}
                  {!heroCol.exclusive && <TinyTag color={heroCol.accent}>{heroCol.kicker}</TinyTag>}
                </div>
                <div style={{ color: '#F9F2E8' }}>
                  <div style={{ fontSize: 32, lineHeight: 1.02, fontWeight: 800, letterSpacing: -1,
                                textShadow: '0 2px 8px rgba(0,0,0,0.5)' }}>
                    {heroCol.title}
                  </div>
                  <div style={{ marginTop: 8, fontSize: 14, opacity: 0.92, maxWidth: 300,
                                textShadow: '0 1px 4px rgba(0,0,0,0.5)' }}>
                    {heroCol.sub}
                  </div>
                  <div style={{ marginTop: 16, display: 'inline-flex', alignItems: 'center', gap: 8,
                                padding: '11px 18px', background: 'var(--w-cream)', borderRadius: 999,
                                fontSize: 13.5, fontWeight: 800, color: 'var(--w-onyx)' }}>
                    Explore the menu <Ic.Arrow size={16}/>
                  </div>
                </div>
              </div>
            </button>
          </div>
        )}

        {/* ─── PERSONALIZED OFFERS (Braze intelligence) ─────────── */}
        <div style={{ padding: '18px 0 0' }}>
          <div style={{ display: 'flex', gap: 12, padding: '0 18px', overflowX: 'auto', scrollbarWidth: 'none' }}>
            {offers.map(o => {
              const I = Ic[o.icon] || Ic.Spark;
              return (
                <div key={o.id} style={{
                  flex: '0 0 270px', display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px',
                  background: '#fff', borderRadius: 16, border: '1px solid rgba(23,25,25,0.06)'
                }}>
                  <div style={{ width: 40, height: 40, borderRadius: 11, flex: 'none',
                                background: o.accent + '1a', color: o.accent,
                                display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <I size={20}/>
                  </div>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 800, color: 'var(--w-onyx)', letterSpacing: -0.2 }}>{o.title}</div>
                    <div style={{ fontSize: 11.5, opacity: 0.6, marginTop: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{o.sub}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* ─── KITCHENS (discovery) ────────────────────────────── */}
        <div style={{ padding: '24px 0 6px' }}>
          <SectionHead title="Tonight's Kitchens" sub="8 W Doha restaurants, all open now"
                       action={<TextLink onClick={() => go('browse')}>See all</TextLink>}/>
          <div style={{ display: 'flex', gap: 14, padding: '0 18px', overflowX: 'auto', scrollbarWidth: 'none' }}>
            {W2_OUTLETS.slice(0, 4).map(o => (
              <OutletCard key={o.id} outlet={o} onClick={() => openOutlet(o.id)} size="lg"/>
            ))}
          </div>
        </div>

        {/* ─── CURATED COLLECTIONS (Airbnb editorial) ──────────── */}
        {collections.slice(1).map(col => (
          <div key={col.id} style={{ padding: '20px 18px 0' }}>
            <button onClick={() => openItem(col.items[0])} style={{
              width: '100%', display: 'flex', gap: 14, padding: 12, alignItems: 'center',
              background: '#fff', border: '1px solid rgba(23,25,25,0.06)', borderRadius: 20,
              cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left'
            }}>
              <div style={{ position: 'relative', width: 96, height: 96, borderRadius: 14, overflow: 'hidden', flex: 'none' }}>
                <img src={col.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
                <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(160deg, transparent, ${col.accent}66)` }}/>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 9.5, letterSpacing: 1.4, fontWeight: 800, color: col.accent, textTransform: 'uppercase' }}>
                  {col.kicker}
                </div>
                <div style={{ fontSize: 16, fontWeight: 800, color: 'var(--w-onyx)', letterSpacing: -0.3, marginTop: 3, textWrap: 'pretty' }}>
                  {col.title}
                </div>
                <div style={{ fontSize: 12, opacity: 0.6, marginTop: 3, lineHeight: 1.4, textWrap: 'pretty' }}>
                  {col.sub}
                </div>
              </div>
              <Ic.ChevronR size={18} style={{ opacity: 0.35, flex: 'none' }}/>
            </button>
          </div>
        ))}

        {/* ─── CHEFS' PICKS rail ───────────────────────────────── */}
        <div style={{ padding: '24px 0 6px' }}>
          <SectionHead title="Chefs' Picks" sub="Signature plates across the W"/>
          <div style={{ display: 'flex', gap: 14, padding: '0 18px', overflowX: 'auto', scrollbarWidth: 'none' }}>
            {featured.map(item => (
              <CraveCard key={item.id} item={item} onClick={() => openItem(item.id)}/>
            ))}
          </div>
        </div>

        {/* ─── EXPERIENCES (Airbnb — beyond delivery) ──────────── */}
        <div style={{ padding: '24px 0 6px' }}>
          <SectionHead title="W Doha Experiences" sub="More than delivery — dine, reserve, reset"/>
          <div style={{ display: 'flex', gap: 14, padding: '0 18px', overflowX: 'auto', scrollbarWidth: 'none' }}>
            {experiences.map(x => (
              <div key={x.id} style={{
                flex: '0 0 200px', borderRadius: 20, overflow: 'hidden', position: 'relative',
                cursor: 'pointer', border: '1px solid rgba(23,25,25,0.06)'
              }}>
                <div style={{ position: 'relative', height: 150 }}>
                  <img src={x.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
                  <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.7))' }}/>
                  <div style={{ position: 'absolute', top: 10, left: 10 }}>
                    <TinyTag color="#171919">{x.tag}</TinyTag>
                  </div>
                  <div style={{ position: 'absolute', bottom: 10, left: 12, right: 12, color: '#F9F2E8' }}>
                    <div style={{ fontSize: 15, fontWeight: 800, letterSpacing: -0.2, textShadow: '0 1px 3px rgba(0,0,0,0.5)' }}>{x.title}</div>
                    <div style={{ fontSize: 11, opacity: 0.9, marginTop: 1 }}>{x.sub}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* ─── ALL KITCHENS grid ───────────────────────────────── */}
        <div style={{ padding: '20px 18px 0' }}>
          <div style={{ fontSize: 11.5, fontWeight: 800, letterSpacing: 2, textTransform: 'uppercase',
                        color: 'var(--w-charcoal)', margin: '6px 0 12px', opacity: 0.7 }}>
            All kitchens
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            {W2_OUTLETS.map(o => (
              <OutletCard key={o.id} outlet={o} onClick={() => openOutlet(o.id)} size="sm"/>
            ))}
          </div>
        </div>

        <div style={{ padding: '30px 20px 8px', textAlign: 'center', fontSize: 10.5, letterSpacing: 2.5, opacity: 0.4, fontWeight: 700 }}>
          W2GO · CRAFTED BY W DOHA
        </div>
      </Scroll>
    </div>
  );
}

const iconBtn = {
  width: 44, height: 44, borderRadius: 999, background: 'rgba(23,25,25,0.05)', position: 'relative',
  border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: 'var(--w-onyx)'
};

function SectionHead({ title, sub, action }) {
  return (
    <div style={{ padding: '0 18px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 14 }}>
      <div>
        <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: -0.5 }}>{title}</div>
        {sub && <div style={{ fontSize: 12, opacity: 0.6, marginTop: 2, fontWeight: 500 }}>{sub}</div>}
      </div>
      {action}
    </div>
  );
}

function TextLink({ children, onClick }) {
  return (
    <button onClick={onClick} style={{
      background: 'none', border: 'none', color: 'var(--w-green)', fontWeight: 800, fontSize: 12.5,
      cursor: 'pointer', fontFamily: 'inherit', display: 'inline-flex', alignItems: 'center', gap: 3
    }}>{children} <Ic.ChevronR size={13}/></button>
  );
}

// ─── OUTLET CARD ──────────────────────────────────────────────
function OutletCard({ outlet, onClick, size = 'lg' }) {
  const isLg = size === 'lg';
  return (
    <button onClick={onClick} style={{
      flex: isLg ? '0 0 280px' : 'auto',
      background: '#fff', border: '1px solid rgba(23,25,25,0.06)', borderRadius: 18,
      padding: 0, overflow: 'hidden', cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left',
      display: 'flex', flexDirection: 'column'
    }}>
      <div style={{ position: 'relative', height: isLg ? 150 : 110 }}>
        <img src={outlet.img} alt={outlet.name} style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover'
        }}/>
        <div style={{ position: 'absolute', inset: 0,
                      background: `linear-gradient(180deg, transparent 40%, ${outlet.accent}cc)` }}/>
        <div style={{ position: 'absolute', top: 10, right: 10,
                      background: 'rgba(249,242,232,0.95)', borderRadius: 999, padding: '4px 8px',
                      display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, fontWeight: 700,
                      color: 'var(--w-onyx)' }}>
          <Ic.Star size={11} style={{ color: '#C24A2C' }}/>{outlet.rating}
        </div>
        <div style={{ position: 'absolute', bottom: 10, left: 12, right: 12, color: '#F9F2E8' }}>
          <div style={{ fontSize: 10, letterSpacing: 1.4, fontWeight: 700, opacity: 0.92, textTransform: 'uppercase' }}>
            {outlet.cuisine}
          </div>
          <div style={{ fontSize: isLg ? 19 : 14, fontWeight: 800, letterSpacing: -0.3, lineHeight: 1.1,
                        marginTop: 2, textShadow: '0 1px 4px rgba(0,0,0,0.45)' }}>
            {outlet.name}
          </div>
        </div>
      </div>
      <div style={{ padding: '10px 12px', display: 'flex', alignItems: 'center', gap: 10, fontSize: 11.5, fontWeight: 600 }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, color: 'var(--w-charcoal)' }}>
          <Ic.Clock size={13}/> {outlet.deliveryMin} min
        </span>
        <span style={{ color: 'rgba(23,25,25,0.2)' }}>·</span>
        <span style={{ color: 'var(--w-charcoal)' }}>{W2_money(outlet.deliveryFee)} delivery</span>
        {isLg && <>
          <span style={{ marginLeft: 'auto', color: 'var(--w-green)', display: 'inline-flex', alignItems: 'center', gap: 2 }}>
            Order <Ic.ChevronR size={14}/>
          </span>
        </>}
      </div>
    </button>
  );
}

// ─── CRAVE CARD (item) ───────────────────────────────────────
function CraveCard({ item, onClick }) {
  const outlet = W2_outlet(item.outlet);
  return (
    <button onClick={onClick} style={{
      flex: '0 0 240px', background: 'none', border: 'none', padding: 0, cursor: 'pointer',
      textAlign: 'left', fontFamily: 'inherit'
    }}>
      <div style={{ position: 'relative' }}>
        <Photo tone="warm" src={item.img} tag={item.cat + ' · hero'} height={180} radius={20}/>
        {item.tags?.includes('Spicy') && <div style={{ position: 'absolute', top: 10, left: 10 }}><TinyTag color="#C24A2C">🔥 SPICY</TinyTag></div>}
        <button onClick={(e) => e.stopPropagation()} style={{
          position: 'absolute', top: 10, right: 10, width: 34, height: 34, borderRadius: 999,
          background: 'rgba(249,242,232,0.92)', border: 'none', display: 'flex',
          alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: 'var(--w-onyx)'
        }}><Ic.Heart size={18}/></button>
      </div>
      {outlet && (
        <div style={{ marginTop: 10, fontSize: 10, letterSpacing: 1.2, fontWeight: 700,
                      color: outlet.accent, textTransform: 'uppercase' }}>
          {outlet.short}
        </div>
      )}
      <div style={{ marginTop: 2, fontSize: 15, fontWeight: 700, letterSpacing: -0.2, color: 'var(--w-onyx)', textWrap: 'pretty' }}>
        {item.name}
      </div>
      <div style={{ marginTop: 4, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ fontSize: 13, color: 'var(--w-charcoal)', fontWeight: 700 }}>{W2_money(item.price)}</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4, color: 'var(--w-green)' }}>
          <Ic.Star size={14}/> <span style={{ fontSize: 12, fontWeight: 700 }}>{outlet?.rating || 4.8}</span>
        </div>
      </div>
    </button>
  );
}

// ─── ITEM CARD (grid) ────────────────────────────────────────
function ItemCard({ item, onClick }) {
  const outlet = W2_outlet(item.outlet);
  return (
    <button onClick={onClick} style={{
      background: '#fff', border: '1px solid rgba(23,25,25,0.06)', borderRadius: 18,
      padding: 10, cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit',
      display: 'flex', flexDirection: 'column', gap: 8, position: 'relative'
    }}>
      <Photo tone="cream" src={item.img} tag={item.cat} height={130} radius={12}/>
      {item.tags?.[0] && (
        <div style={{ position: 'absolute', top: 18, left: 18 }}>
          <TinyTag color={item.tags[0] === 'Bestseller' ? '#C24A2C' : (item.tags[0].includes('Vegan') ? '#2D6A3E' : '#171919')}>
            {item.tags[0].toUpperCase()}
          </TinyTag>
        </div>
      )}
      {outlet && (
        <div style={{ fontSize: 10, letterSpacing: 1.1, fontWeight: 700, color: outlet.accent, textTransform: 'uppercase' }}>
          {outlet.short}
        </div>
      )}
      <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: -0.2, color: 'var(--w-onyx)', textWrap: 'pretty' }}>{item.name}</div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 'auto' }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--w-green)' }}>{W2_money(item.price)}</div>
        <div style={{
          width: 28, height: 28, borderRadius: 999, background: 'var(--w-onyx)',
          color: 'var(--w-cream)', display: 'flex', alignItems: 'center', justifyContent: 'center'
        }}><Ic.Plus size={16}/></div>
      </div>
    </button>
  );
}

// ───────────────────────────────────────────────────────────────
// 6. OUTLET — kitchen menu with category tabs
// ───────────────────────────────────────────────────────────────
function OutletScreen({ go, outletId, openItem, switchOutlet }) {
  const outlet = W2_outlet(outletId) || W2_OUTLETS[0];
  const cats = (W2_CATEGORIES[outlet.id] || []);
  const items = W2_ITEMS.filter(i => i.outlet === outlet.id);
  const [activeCat, setActiveCat] = useStateB(cats[0]?.id);
  const [showSwitcher, setShowSwitcher] = useStateB(false);
  const scrollRef = useRefB(null);
  const sectionRefs = useRefB({});

  // Update activeCat as user scrolls (intersection)
  useEffectB(() => {
    if (!scrollRef.current) return;
    const onScroll = () => {
      let visible = cats[0]?.id;
      const top = scrollRef.current.scrollTop;
      for (const c of cats) {
        const el = sectionRefs.current[c.id];
        if (el && el.offsetTop - 160 <= top) visible = c.id;
      }
      setActiveCat(visible);
    };
    const s = scrollRef.current;
    s.addEventListener('scroll', onScroll, { passive: true });
    return () => s.removeEventListener('scroll', onScroll);
  }, [cats.length]);

  const jumpTo = (cId) => {
    setActiveCat(cId);
    const el = sectionRefs.current[cId];
    if (el && scrollRef.current) scrollRef.current.scrollTo({ top: el.offsetTop - 150, behavior: 'smooth' });
  };

  return (
    <div style={{ position: 'absolute', inset: 0, paddingTop: 50, boxSizing: 'border-box',
                  background: 'var(--w-cream)', display: 'flex', flexDirection: 'column' }}>
      {/* Hero */}
      <div style={{ position: 'relative', height: 200, flexShrink: 0 }}>
        <img src={outlet.img} alt={outlet.name} style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover'
        }}/>
        <div style={{ position: 'absolute', inset: 0,
                      background: `linear-gradient(180deg, rgba(0,0,0,0.15) 0%, ${outlet.accent}f0 100%)` }}/>
        <div style={{ position: 'absolute', top: 12, left: 14, right: 14, display: 'flex', justifyContent: 'space-between' }}>
          <button onClick={() => go('home')} style={{
            width: 40, height: 40, borderRadius: 999, background: 'rgba(249,242,232,0.92)',
            backdropFilter: 'blur(10px)', border: 'none', display: 'flex',
            alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: 'var(--w-onyx)'
          }}><Ic.Back size={18}/></button>
          <button onClick={() => null} style={{
            width: 40, height: 40, borderRadius: 999, background: 'rgba(249,242,232,0.92)',
            backdropFilter: 'blur(10px)', border: 'none', display: 'flex',
            alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: 'var(--w-onyx)'
          }}><Ic.Heart size={18}/></button>
        </div>
        <div style={{ position: 'absolute', bottom: 14, left: 18, right: 18, color: '#F9F2E8' }}>
          <div style={{ fontSize: 10.5, letterSpacing: 1.4, fontWeight: 700, opacity: 0.92, textTransform: 'uppercase' }}>
            {outlet.cuisine} · {outlet.tag}
          </div>
          <div style={{ fontSize: 26, fontWeight: 800, letterSpacing: -0.6, lineHeight: 1.05, marginTop: 4,
                        textShadow: '0 2px 6px rgba(0,0,0,0.4)' }}>
            {outlet.name}
          </div>
        </div>
      </div>

      {/* Info bar */}
      <div style={{ background: '#fff', padding: '12px 18px', display: 'flex', alignItems: 'center', gap: 16,
                    borderBottom: '1px solid rgba(23,25,25,0.06)' }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12.5, fontWeight: 700, color: 'var(--w-onyx)' }}>
          <Ic.Star size={14} style={{ color: '#C24A2C' }}/>{outlet.rating}
        </span>
        <span style={{ color: 'rgba(23,25,25,0.2)' }}>·</span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12.5, fontWeight: 600, color: 'var(--w-charcoal)' }}>
          <Ic.Clock size={14}/> {outlet.deliveryMin} min
        </span>
        <span style={{ color: 'rgba(23,25,25,0.2)' }}>·</span>
        <span style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--w-charcoal)' }}>
          {W2_money(outlet.deliveryFee)} delivery
        </span>
        <span style={{ color: 'rgba(23,25,25,0.2)' }}>·</span>
        <span style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--w-charcoal)' }}>
          min {W2_money(outlet.minOrder)}
        </span>
      </div>

      {/* Sticky category tabs */}
      <div style={{ background: 'var(--w-cream)', padding: '12px 16px 8px',
                    borderBottom: '1px solid rgba(23,25,25,0.06)', position: 'relative', zIndex: 3 }}>
        <div style={{ display: 'flex', gap: 6, overflowX: 'auto', scrollbarWidth: 'none' }}>
          {cats.map(c => (
            <button key={c.id} onClick={() => jumpTo(c.id)} style={{
              padding: '8px 14px', borderRadius: 999, border: 'none', cursor: 'pointer',
              background: activeCat === c.id ? outlet.accent : 'rgba(23,25,25,0.06)',
              color: activeCat === c.id ? 'var(--w-cream)' : 'var(--w-onyx)',
              fontFamily: 'inherit', fontWeight: 700, fontSize: 12.5, letterSpacing: 0.2,
              whiteSpace: 'nowrap', flex: 'none'
            }}>{c.label}</button>
          ))}
        </div>
      </div>

      {/* Menu items */}
      <div ref={scrollRef} style={{ flex: 1, overflowY: 'auto', overflowX: 'hidden', paddingBottom: 130 }}>
        {cats.map(c => {
          const inCat = items.filter(i => i.cat === c.id);
          if (!inCat.length) return null;
          return (
            <div key={c.id} ref={el => sectionRefs.current[c.id] = el}>
              <div style={{ padding: '20px 20px 12px', display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ flex: 1, height: 1, background: 'rgba(23,25,25,0.12)' }}/>
                <div style={{ fontSize: 11.5, fontWeight: 800, letterSpacing: 2.2, color: 'var(--w-onyx)' }}>
                  {c.label.toUpperCase()}
                </div>
                <div style={{ flex: 1, height: 1, background: 'rgba(23,25,25,0.12)' }}/>
              </div>
              <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {inCat.map(item => <OutletMenuRow key={item.id} item={item} outlet={outlet} onClick={() => openItem(item.id)}/>)}
              </div>
            </div>
          );
        })}
        <div style={{ padding: '24px 30px', textAlign: 'center', fontSize: 11, letterSpacing: 1.6, opacity: 0.45, fontWeight: 700, lineHeight: 1.6 }}>
          {outlet.blurb}
        </div>
      </div>

      {/* Outlet switcher pill — floating */}
      <button onClick={() => setShowSwitcher(true)} style={{
        position: 'absolute', bottom: 110, left: '50%', transform: 'translateX(-50%)',
        height: 44, padding: '0 22px', borderRadius: 999,
        background: 'var(--w-onyx)', color: 'var(--w-cream)', border: 'none',
        display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'inherit', fontWeight: 700,
        fontSize: 13, letterSpacing: 0.3, cursor: 'pointer',
        boxShadow: '0 8px 24px rgba(0,0,0,0.25)', zIndex: 6,
      }}>
        <Ic.Filter size={16}/> Switch kitchen
      </button>

      {/* Switcher modal */}
      {showSwitcher && (
        <div onClick={() => setShowSwitcher(false)} style={{
          position: 'absolute', inset: 0, background: 'rgba(11,15,15,0.55)',
          backdropFilter: 'blur(6px)', zIndex: 10,
          display: 'flex', alignItems: 'flex-end', animation: 'w-fade-in .25s'
        }}>
          <div onClick={e => e.stopPropagation()} style={{
            width: '100%', background: 'var(--w-cream)', borderRadius: '24px 24px 0 0',
            padding: '14px 18px 30px', animation: 'w-slide-up .3s ease-out'
          }}>
            <div style={{ width: 40, height: 4, background: 'rgba(23,25,25,0.18)', borderRadius: 4, margin: '0 auto 14px' }}/>
            <div style={{ fontSize: 18, fontWeight: 800, letterSpacing: -0.3, marginBottom: 12 }}>Switch kitchen</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {W2_OUTLETS.map(o => (
                <button key={o.id} onClick={() => { setShowSwitcher(false); switchOutlet(o.id); }} style={{
                  display: 'flex', alignItems: 'center', gap: 12, padding: 8, borderRadius: 14,
                  background: o.id === outlet.id ? 'rgba(0,76,75,0.06)' : '#fff',
                  border: o.id === outlet.id ? '2px solid var(--w-green)' : '1px solid rgba(23,25,25,0.06)',
                  cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left'
                }}>
                  <div style={{ width: 50, height: 50, borderRadius: 12, overflow: 'hidden', flex: 'none' }}>
                    <img src={o.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 14, fontWeight: 800 }}>{o.name}</div>
                    <div style={{ fontSize: 11.5, opacity: 0.6 }}>{o.cuisine} · {o.deliveryMin} min · ⭐ {o.rating}</div>
                  </div>
                  {o.id === outlet.id && <Ic.Check size={20} style={{ color: 'var(--w-green)' }}/>}
                </button>
              ))}
            </div>
          </div>
        </div>
      )}
      <style>{`
        @keyframes w-fade-in { from { opacity: 0; } to { opacity: 1; } }
        @keyframes w-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
      `}</style>
    </div>
  );
}

// Single menu row — image right, content left (matches reference screenshots)
function OutletMenuRow({ item, outlet, onClick }) {
  return (
    <button onClick={onClick} style={{
      background: '#fff', border: '1px solid rgba(23,25,25,0.06)', borderRadius: 16,
      padding: 12, display: 'flex', gap: 12, alignItems: 'stretch',
      cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left'
    }}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{ fontSize: 14.5, fontWeight: 800, color: 'var(--w-onyx)', letterSpacing: -0.2, lineHeight: 1.2, textWrap: 'pretty' }}>
          {item.name}
        </div>
        <div style={{ marginTop: 4, fontSize: 12.5, opacity: 0.65, lineHeight: 1.4, textWrap: 'pretty', flex: 1 }}>
          {item.blurb}
        </div>
        <div style={{ marginTop: 8, display: 'flex', alignItems: 'center', gap: 6 }}>
          {item.tags.slice(0, 3).map(t => (
            <span key={t} style={{
              fontSize: 9, fontWeight: 700, letterSpacing: 1, padding: '3px 6px', borderRadius: 4,
              background: t.includes('Vegan') || t === 'Vegetarian' ? 'rgba(63,120,72,0.12)' :
                          t === 'Spicy' ? 'rgba(194,74,44,0.12)' :
                          t === 'Bestseller' || t === 'Signature' ? 'rgba(0,76,75,0.12)' :
                          'rgba(23,25,25,0.08)',
              color: t.includes('Vegan') || t === 'Vegetarian' ? '#2D6A3E' :
                     t === 'Spicy' ? '#C24A2C' :
                     t === 'Bestseller' || t === 'Signature' ? 'var(--w-green)' :
                     'var(--w-charcoal)',
              textTransform: 'uppercase'
            }}>{t}</span>
          ))}
        </div>
        <div style={{ marginTop: 8, fontSize: 14.5, fontWeight: 800, color: 'var(--w-green)' }}>
          {W2_money(item.price)}
        </div>
      </div>
      <div style={{ position: 'relative', width: 96, flex: 'none' }}>
        <Photo tone="cream" src={item.img} tag={item.cat} height={96} width={96} radius={12}/>
        <div style={{
          position: 'absolute', bottom: -6, right: -6, width: 32, height: 32, borderRadius: 999,
          background: outlet.accent, color: '#F9F2E8', display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 2px 8px rgba(0,0,0,0.18)', border: '2px solid var(--w-cream)'
        }}>
          <Ic.Plus size={16} stroke={2.5}/>
        </div>
      </div>
    </button>
  );
}

// ───────────────────────────────────────────────────────────────
// 6b. BROWSE — search across ALL outlets
// ───────────────────────────────────────────────────────────────
function BrowseScreen({ go, openItem, openOutlet }) {
  const [q, setQ] = useStateB('');
  const [outletFilter, setOutletFilter] = useStateB('all');

  const items = W2_ITEMS.filter(i =>
    (outletFilter === 'all' || i.outlet === outletFilter) &&
    (!q || (i.name + ' ' + i.blurb + ' ' + i.tags.join(' ')).toLowerCase().includes(q.toLowerCase()))
  );

  return (
    <div style={{ position: 'absolute', inset: 0, paddingTop: 50, boxSizing: 'border-box',
                  background: 'var(--w-cream)', display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '14px 20px 8px' }}>
        <div style={{ fontSize: 28, fontWeight: 800, letterSpacing: -0.6 }}>Search</div>
        <div style={{ fontSize: 13, opacity: 0.6, marginTop: 2 }}>Across all 8 kitchens at W Doha.</div>
        <div style={{
          marginTop: 12, display: 'flex', alignItems: 'center', gap: 10,
          background: '#fff', borderRadius: 16, padding: '12px 14px',
          border: '1px solid rgba(23,25,25,0.08)'
        }}>
          <Ic.Search size={20} style={{ color: 'rgba(23,25,25,0.45)' }}/>
          <input value={q} onChange={e => setQ(e.target.value)} autoFocus
                 placeholder="Pizza, ceviche, sushi, smoothie…"
                 style={{
                   flex: 1, border: 'none', outline: 'none', background: 'transparent',
                   fontFamily: 'inherit', fontSize: 14, color: 'var(--w-onyx)'
                 }}/>
          <Ic.Sliders size={20} style={{ opacity: 0.45 }}/>
        </div>
      </div>

      {/* Outlet filter */}
      <div style={{ display: 'flex', gap: 8, padding: '4px 20px 8px', overflowX: 'auto', scrollbarWidth: 'none' }}>
        <Chip active={outletFilter === 'all'} onClick={() => setOutletFilter('all')} kind={outletFilter === 'all' ? 'green' : 'default'}>All kitchens</Chip>
        {W2_OUTLETS.map(o => (
          <Chip key={o.id} active={outletFilter === o.id} onClick={() => setOutletFilter(o.id)} kind={outletFilter === o.id ? 'green' : 'default'}>{o.short}</Chip>
        ))}
      </div>

      <Scroll pad={120}>
        <div style={{ padding: '8px 20px 0' }}>
          {items.length === 0 && <div style={{ padding: 24, opacity: 0.55, textAlign: 'center' }}>Nothing matches. Try a different word.</div>}
          {items.map(item => {
            const outlet = W2_outlet(item.outlet);
            return (
              <button key={item.id} onClick={() => openItem(item.id)} style={{
                width: '100%', background: '#fff', border: '1px solid rgba(23,25,25,0.06)',
                borderRadius: 18, marginBottom: 12, padding: 10, display: 'flex', gap: 14,
                alignItems: 'stretch', cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left'
              }}>
                <Photo tone="warm" src={item.img} tag={item.cat} height={96} width={96} radius={12}/>
                <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
                  {outlet && (
                    <div style={{ fontSize: 10, letterSpacing: 1.2, fontWeight: 700, color: outlet.accent, marginBottom: 3, textTransform: 'uppercase' }}>
                      {outlet.short}
                    </div>
                  )}
                  <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--w-onyx)', letterSpacing: -0.2 }}>{item.name}</div>
                  <div style={{ marginTop: 2, fontSize: 12, opacity: 0.65, lineHeight: 1.4, textWrap: 'pretty' }}>{item.blurb}</div>
                  <div style={{ marginTop: 'auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 6 }}>
                    <span style={{ fontSize: 14, fontWeight: 800, color: 'var(--w-green)' }}>{W2_money(item.price)}</span>
                  </div>
                </div>
              </button>
            );
          })}
        </div>
      </Scroll>
    </div>
  );
}

// ───────────────────────────────────────────────────────────────
// 7. ITEM DETAIL
// ───────────────────────────────────────────────────────────────
function ItemDetailScreen({ go, itemId, addToCart }) {
  const item = W2_ITEMS.find(i => i.id === itemId) || W2_ITEMS[0];
  const outlet = W2_outlet(item.outlet);
  const [size, setSize] = useStateB('reg');
  const [spice, setSpice] = useStateB('med');
  const [extras, setExtras] = useStateB([]);
  const [qty, setQty] = useStateB(1);
  const [fav, setFav] = useStateB(false);

  const sizeDelta = W2_DEFAULT_MODIFIERS.size.find(s => s.id === size)?.priceDelta || 0;
  const extrasDelta = extras.reduce((a, id) => a + (W2_DEFAULT_MODIFIERS.extras.find(e => e.id === id)?.priceDelta || 0), 0);
  const total = (item.price + sizeDelta + extrasDelta) * qty;

  const toggle = (arr, set, id) => set(arr.includes(id) ? arr.filter(x => x !== id) : [...arr, id]);

  return (
    <div style={{ position: 'absolute', inset: 0, paddingTop: 50, boxSizing: 'border-box',
                  background: 'var(--w-cream)', display: 'flex', flexDirection: 'column' }}>
      <div style={{ position: 'relative', height: 320 }}>
        <Photo tone="warm" src={item.img} tag={item.cat + ' · hero shot'} height="100%" radius={0}/>
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0.15), transparent 40%)' }}/>
        <div style={{ position: 'absolute', top: 14, left: 14, right: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <button onClick={() => go('home')} style={{
            width: 44, height: 44, borderRadius: 999, background: 'rgba(249,242,232,0.92)',
            backdropFilter: 'blur(10px)', border: 'none', display: 'flex',
            alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: 'var(--w-onyx)'
          }}><Ic.Back size={20}/></button>
          <button onClick={() => setFav(!fav)} style={{
            width: 44, height: 44, borderRadius: 999, background: 'rgba(249,242,232,0.92)',
            backdropFilter: 'blur(10px)', border: 'none', display: 'flex',
            alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: fav ? '#C24A2C' : 'var(--w-onyx)'
          }}>{fav ? <Ic.HeartFill size={20}/> : <Ic.Heart size={20}/>}</button>
        </div>
      </div>

      <Scroll pad={140} style={{ padding: '24px 20px 0' }}>
        {outlet && (
          <button onClick={() => go('outlet')} style={{
            display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px',
            background: outlet.accent, color: '#F9F2E8', border: 'none', borderRadius: 999,
            fontFamily: 'inherit', fontSize: 11, fontWeight: 800, letterSpacing: 1.2, cursor: 'pointer',
            textTransform: 'uppercase'
          }}>{outlet.short} · {outlet.cuisine}</button>
        )}

        <div style={{ marginTop: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 26, fontWeight: 800, letterSpacing: -0.6, lineHeight: 1.1, textWrap: 'pretty' }}>{item.name}</div>
            <div style={{ marginTop: 6, fontSize: 13, opacity: 0.65, display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 4, color: 'var(--w-green)' }}>
                <Ic.Star size={14}/> {outlet?.rating || 4.8} (820)
              </span>
              <span>·</span>
              <span>{outlet?.deliveryMin || 45} min</span>
            </div>
          </div>
          <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--w-green)', whiteSpace: 'nowrap' }}>{W2_money(item.price)}</div>
        </div>

        <div style={{ marginTop: 14, fontSize: 14, lineHeight: 1.55, opacity: 0.78, textWrap: 'pretty' }}>{item.blurb}</div>

        {item.tags.length > 0 && (
          <div style={{ marginTop: 14, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            {item.tags.map(t => (
              <span key={t} style={{
                fontSize: 11, fontWeight: 700, padding: '6px 10px', borderRadius: 999,
                background: 'rgba(23,25,25,0.06)', color: 'var(--w-onyx)', letterSpacing: 0.2
              }}>{t}</span>
            ))}
          </div>
        )}

        <Section title="Size" right={<span style={{ fontSize: 11, opacity: 0.55, fontWeight: 700, letterSpacing: 1 }}>REQUIRED</span>}>
          <div style={{ display: 'flex', gap: 10 }}>
            {W2_DEFAULT_MODIFIERS.size.map(s => (
              <button key={s.id} onClick={() => setSize(s.id)} style={{
                flex: 1, padding: '14px 12px', borderRadius: 16,
                border: size === s.id ? '2px solid var(--w-green)' : '1.5px solid rgba(23,25,25,0.1)',
                background: size === s.id ? 'rgba(0,76,75,0.06)' : '#fff',
                fontFamily: 'inherit', cursor: 'pointer', textAlign: 'left'
              }}>
                <div style={{ fontWeight: 700, fontSize: 14, color: 'var(--w-onyx)' }}>{s.label}</div>
                <div style={{ fontSize: 12, opacity: 0.65, marginTop: 2 }}>{s.priceDelta === 0 ? 'Included' : '+' + W2_money(s.priceDelta)}</div>
              </button>
            ))}
          </div>
        </Section>

        <Section title="Heat level" right={<Ic.Fire size={16} style={{ color: '#C24A2C' }}/>}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
            {W2_DEFAULT_MODIFIERS.spice.map(s => (
              <button key={s.id} onClick={() => setSpice(s.id)} style={{
                padding: '10px 4px', borderRadius: 12,
                border: spice === s.id ? '2px solid var(--w-green)' : '1.5px solid rgba(23,25,25,0.1)',
                background: spice === s.id ? 'rgba(0,76,75,0.06)' : '#fff',
                fontFamily: 'inherit', fontWeight: 700, fontSize: 12.5, color: 'var(--w-onyx)', cursor: 'pointer'
              }}>{s.label}</button>
            ))}
          </div>
        </Section>

        <Section title="Make it extra" right={<span style={{ fontSize: 11, opacity: 0.55, fontWeight: 700, letterSpacing: 1 }}>OPTIONAL</span>}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {W2_DEFAULT_MODIFIERS.extras.map(e => {
              const on = extras.includes(e.id);
              return (
                <button key={e.id} onClick={() => toggle(extras, setExtras, e.id)} style={{
                  display: 'flex', alignItems: 'center', gap: 12, padding: '14px 14px', borderRadius: 14,
                  border: on ? '2px solid var(--w-green)' : '1.5px solid rgba(23,25,25,0.08)',
                  background: on ? 'rgba(0,76,75,0.04)' : '#fff', cursor: 'pointer',
                  fontFamily: 'inherit', textAlign: 'left'
                }}>
                  <div style={{
                    width: 22, height: 22, borderRadius: 6,
                    border: on ? 'none' : '1.5px solid rgba(23,25,25,0.25)',
                    background: on ? 'var(--w-green)' : 'transparent',
                    color: 'var(--w-cream)', display: 'flex', alignItems: 'center', justifyContent: 'center'
                  }}>{on && <Ic.Check size={14} stroke={2.5}/>}</div>
                  <div style={{ flex: 1, fontSize: 14, fontWeight: 600, color: 'var(--w-onyx)' }}>{e.label}</div>
                  <div style={{ fontSize: 13, color: 'var(--w-green)', fontWeight: 700 }}>+{W2_money(e.priceDelta)}</div>
                </button>
              );
            })}
          </div>
        </Section>

        <Section title="Anything else?">
          <textarea placeholder="No onions, extra napkins, leave at the door…"
                    style={{
                      width: '100%', minHeight: 60, padding: '12px 14px', borderRadius: 14,
                      border: '1.5px solid rgba(23,25,25,0.08)', background: '#fff',
                      fontFamily: 'inherit', fontSize: 13, color: 'var(--w-onyx)',
                      outline: 'none', resize: 'none', boxSizing: 'border-box'
                    }}/>
        </Section>
        <div style={{ height: 24 }}/>
      </Scroll>

      <BottomDock>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ display: 'flex', alignItems: 'center', background: 'rgba(23,25,25,0.06)', borderRadius: 999, padding: 4 }}>
            <button onClick={() => setQty(Math.max(1, qty - 1))} style={{
              width: 40, height: 40, borderRadius: 999, background: '#fff', border: 'none',
              display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: 'var(--w-onyx)'
            }}><Ic.Minus size={18}/></button>
            <div style={{ width: 40, textAlign: 'center', fontWeight: 800, fontSize: 16 }}>{qty}</div>
            <button onClick={() => setQty(qty + 1)} style={{
              width: 40, height: 40, borderRadius: 999, background: 'var(--w-onyx)', color: 'var(--w-cream)', border: 'none',
              display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer'
            }}><Ic.Plus size={18}/></button>
          </div>
          <Btn full onClick={() => { addToCart({ item, size, spice, extras, qty }); go('cart'); }}
               iconRight={<span style={{ fontWeight: 800 }}>{W2_money(total)}</span>}>
            Add to bag
          </Btn>
        </div>
      </BottomDock>
    </div>
  );
}

function Section({ title, right, children }) {
  return (
    <div style={{ marginTop: 24 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
        <div style={{ fontSize: 16, fontWeight: 800, letterSpacing: -0.3 }}>{title}</div>
        <div>{right}</div>
      </div>
      {children}
    </div>
  );
}

// ───────────────────────────────────────────────────────────────
// 8. CART — grouped by outlet
// ───────────────────────────────────────────────────────────────
function CartScreen({ go, cart, updateCart, address, openOutlet }) {
  // Group cart by outlet
  const groups = useMemoB(() => {
    const m = {};
    cart.forEach((line, i) => {
      const oid = line.item.outlet;
      if (!m[oid]) m[oid] = { outlet: W2_outlet(oid), lines: [] };
      m[oid].lines.push({ line, idx: i });
    });
    return Object.values(m);
  }, [cart]);

  const sub = cart.reduce((a, c) => a + c.unitPrice * c.qty, 0);
  const delivery = groups.reduce((a, g) => a + (g.outlet?.deliveryFee || 0), 0);
  const serviceFee = sub > 0 ? 4 : 0;
  const total = sub + delivery + serviceFee;

  return (
    <div style={{ position: 'absolute', inset: 0, paddingTop: 50, boxSizing: 'border-box',
                  background: 'var(--w-cream)', display: 'flex', flexDirection: 'column' }}>
      <TopBar onBack={() => go('home')} title="Your bag"
              right={cart.length > 0 ? <button onClick={() => updateCart([])} style={{
                background: 'none', border: 'none', fontFamily: 'inherit', color: 'var(--w-green)',
                fontWeight: 700, fontSize: 13, cursor: 'pointer'
              }}>Clear</button> : null}/>

      <Scroll pad={cart.length ? 220 : 60}>
        {cart.length === 0 ? (
          <div style={{ padding: '60px 30px', textAlign: 'center' }}>
            <div style={{ fontSize: 60, marginBottom: 10 }}>🛍</div>
            <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: -0.4 }}>Bag's empty.</div>
            <div style={{ fontSize: 14, opacity: 0.6, marginTop: 6, lineHeight: 1.55 }}>
              Pick a kitchen — or mix dishes from a few. We'll pack the whole order in one bag.
            </div>
            <div style={{ marginTop: 20 }}><Btn onClick={() => go('home')}>Browse kitchens</Btn></div>
          </div>
        ) : (
          <>
            <div style={{ padding: '12px 20px 8px' }}>
              <div style={{
                background: '#fff', borderRadius: 16, padding: 14, display: 'flex', gap: 12, alignItems: 'center',
                border: '1px solid rgba(23,25,25,0.06)'
              }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 12, background: 'rgba(0,76,75,0.1)',
                  color: 'var(--w-green)', display: 'flex', alignItems: 'center', justifyContent: 'center'
                }}><Ic.Pin size={20}/></div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 10.5, letterSpacing: 1.4, fontWeight: 700, opacity: 0.55 }}>DELIVER TO</div>
                  <div style={{ fontWeight: 700, fontSize: 13.5 }}>{address?.label || 'Home'} — {address?.line || 'Tower 2, The Pearl'}</div>
                </div>
                <button onClick={() => go('location')} style={{
                  background: 'none', border: 'none', color: 'var(--w-green)', fontWeight: 700, fontSize: 12,
                  cursor: 'pointer', fontFamily: 'inherit'
                }}>Change</button>
              </div>
            </div>

            {/* Outlet groups */}
            {groups.map(g => (
              <div key={g.outlet.id} style={{ padding: '8px 20px 0' }}>
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 10, padding: '12px 14px',
                  background: g.outlet.accent + '14', borderRadius: '16px 16px 0 0',
                  border: '1px solid rgba(23,25,25,0.06)', borderBottom: 'none'
                }}>
                  <div style={{ width: 30, height: 30, borderRadius: 8, overflow: 'hidden', flex: 'none' }}>
                    <img src={g.outlet.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 800, color: g.outlet.accent, letterSpacing: -0.1 }}>{g.outlet.name}</div>
                    <div style={{ fontSize: 10.5, opacity: 0.6, fontWeight: 600 }}>{g.lines.length} items · {W2_money(g.outlet.deliveryFee)} delivery</div>
                  </div>
                  <button onClick={() => openOutlet(g.outlet.id)} style={{
                    background: 'none', border: 'none', fontFamily: 'inherit', color: g.outlet.accent,
                    fontWeight: 700, fontSize: 12, cursor: 'pointer'
                  }}>+ Add more</button>
                </div>
                <div style={{ background: '#fff', border: '1px solid rgba(23,25,25,0.06)', borderTop: 'none',
                              borderRadius: '0 0 16px 16px', padding: '10px' }}>
                  {g.lines.map(({ line, idx }) => (
                    <CartLine key={idx} line={line} onChange={(qty) => {
                      const next = [...cart];
                      if (qty <= 0) next.splice(idx, 1); else next[idx] = { ...next[idx], qty };
                      updateCart(next);
                    }}/>
                  ))}
                </div>
              </div>
            ))}

            <div style={{ padding: '14px 20px 0' }}>
              <button onClick={() => go('home')} style={{
                width: '100%', padding: 14, borderRadius: 14,
                background: 'transparent', border: '1.5px dashed rgba(23,25,25,0.18)',
                color: 'var(--w-onyx)', fontFamily: 'inherit', fontWeight: 600, fontSize: 13, cursor: 'pointer'
              }}>+ Add from another kitchen</button>

              <div style={{
                marginTop: 16, background: '#fff', borderRadius: 16, padding: '14px 16px',
                display: 'flex', alignItems: 'center', gap: 12, border: '1px solid rgba(23,25,25,0.06)'
              }}>
                <Ic.Tag size={20} style={{ color: 'var(--w-green)' }}/>
                <input placeholder="Promo code (try CRAVE10)" style={{
                  flex: 1, border: 'none', outline: 'none', background: 'transparent',
                  fontFamily: 'inherit', fontSize: 14, color: 'var(--w-onyx)'
                }}/>
                <button style={{
                  background: 'var(--w-onyx)', color: 'var(--w-cream)', border: 'none', borderRadius: 999,
                  height: 32, padding: '0 14px', fontWeight: 700, fontSize: 12, cursor: 'pointer', fontFamily: 'inherit'
                }}>Apply</button>
              </div>

              <div style={{ marginTop: 16, padding: '6px 4px', fontSize: 13.5 }}>
                <Row label="Subtotal" value={W2_money(sub)}/>
                <Row label={`Delivery (${groups.length} ${groups.length === 1 ? 'kitchen' : 'kitchens'})`} value={W2_money(delivery)}/>
                <Row label="Service fee" value={W2_money(serviceFee)}/>
                <div style={{ height: 1, background: 'rgba(23,25,25,0.1)', margin: '12px 0' }}/>
                <Row big label="Total" value={W2_money(total)}/>
              </div>
            </div>
          </>
        )}
      </Scroll>

      {cart.length > 0 && (
        <BottomDock>
          <Btn full onClick={() => go('checkout')} iconRight={<Ic.Arrow size={18}/>}>
            Checkout · {W2_money(total)}
          </Btn>
        </BottomDock>
      )}
    </div>
  );
}

function CartLine({ line, onChange }) {
  return (
    <div style={{
      padding: 8, marginBottom: 4, display: 'flex', gap: 12,
    }}>
      <Photo tone="warm" src={line.item.img} tag={line.item.cat} height={70} width={70} radius={10}/>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--w-onyx)', letterSpacing: -0.2, lineHeight: 1.2 }}>{line.item.name}</div>
        <div style={{ fontSize: 11.5, opacity: 0.6, marginTop: 2 }}>
          {line.size === 'large' ? 'Large · ' : ''}{line.spice} heat{line.extras.length > 0 ? ` · +${line.extras.length} extras` : ''}
        </div>
        <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', alignItems: 'center', background: 'rgba(23,25,25,0.06)', borderRadius: 999, padding: 2 }}>
            <button onClick={() => onChange(line.qty - 1)} style={{
              width: 26, height: 26, borderRadius: 999, background: '#fff', border: 'none',
              display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: 'var(--w-onyx)'
            }}><Ic.Minus size={14}/></button>
            <div style={{ width: 26, textAlign: 'center', fontWeight: 700, fontSize: 13 }}>{line.qty}</div>
            <button onClick={() => onChange(line.qty + 1)} style={{
              width: 26, height: 26, borderRadius: 999, background: 'var(--w-onyx)', color: 'var(--w-cream)', border: 'none',
              display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer'
            }}><Ic.Plus size={14}/></button>
          </div>
          <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--w-green)' }}>{W2_money(line.unitPrice * line.qty)}</div>
        </div>
      </div>
    </div>
  );
}

function Row({ label, value, big }) {
  return (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '4px 0',
      fontSize: big ? 18 : 13.5, fontWeight: big ? 800 : 600, color: big ? 'var(--w-onyx)' : 'var(--w-charcoal)',
      letterSpacing: big ? -0.3 : 0
    }}>
      <span>{label}</span>
      <span style={{ color: big ? 'var(--w-green)' : 'var(--w-onyx)' }}>{value}</span>
    </div>
  );
}

Object.assign(window, { HomeScreen, OutletScreen, BrowseScreen, ItemDetailScreen, CartScreen });
