// Commerce screens: Home, PDP, Box/Cart

function GLHome({ app, go }) {
  // Launch catalog: pasta sets only — single-category UX, no filter tabs
  const items = GL_PASTA;
  const hero = { kicker: 'Complete Meal Kits', title: <>5-minute<br/>Gourmet<br/>Dinner</>, sub: 'Everything you need in one box.' };

  const subMode = app.shopMode === 'sub';

  return (
    <div style={{ width: '100%', height: '100%', background: GL.paper, display: 'flex', flexDirection: 'column' }}>
      <GLTopBar
        center={<div className="gl-display" style={{ fontSize: 18, letterSpacing: '0.06em', color: GL.ink }}>GUSTAI LAB</div>}
        right={
          <button onClick={() => go('me')} aria-label="Profile" style={{
            width: 36, height: 36, borderRadius: '50%',
            background: GL.offwhite, border: `1px solid ${GL.line}`,
            display: 'grid', placeItems: 'center',
          }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={GL.ink} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
              <path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM4 21a8 8 0 1 1 16 0"/>
            </svg>
          </button>
        }
      />

      <div style={{ flex: 1, overflowY: 'auto', paddingBottom: 96 }} className="gl-noscroll">
        {/* Hero */}
        <div style={{ padding: 16 }}>
          <div style={{
            position: 'relative', height: 360, borderRadius: 12, overflow: 'hidden',
            background: '#1a1a1a', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
            padding: 24,
          }}>
            <div style={{ position: 'absolute', inset: 0, background: 'url(https://images.unsplash.com/photo-1551183053-bf91a1d81141?w=1200&q=80) center/cover' }}/>
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.75) 100%)' }}/>
            <div className="gl-slide-up" style={{ position: 'relative', zIndex: 2, color: '#fff', textAlign: 'center' }}>
              <div className="gl-kicker" style={{ color: GL.teal, marginBottom: 10 }}>{hero.kicker}</div>
              <h1 className="gl-display" style={{ fontSize: 44, lineHeight: 0.88, margin: '0 0 12px' }}>{hero.title}</h1>
              {hero.sub && <p style={{ fontSize: 13, fontWeight: 500, color: 'rgba(255,255,255,0.85)', margin: 0 }}>{hero.sub}</p>}
            </div>
          </div>
        </div>

        {/* Shop mode toggle: Subscribe vs À la carte */}
        <div style={{ margin: '14px 16px 0' }}>
          <div style={{ marginBottom: 8 }}/>
          <div style={{ padding: 4, background: GL.offwhite, borderRadius: 12, display: 'flex', border: `1px solid ${GL.line}` }}>
            {[
              { id: 'alc', t1: 'À La Carte',  t2: 'One-time order' },
              { id: 'sub', t1: 'Subscribe',   t2: 'Pre-pay · Save up to 12%' },
            ].map(o => {
              const on = o.id === app.shopMode;
              return (
                <button key={o.id} onClick={() => app.setShopMode(o.id)}
                  style={{ flex: 1, padding: '12px 0', borderRadius: 9, background: on ? '#fff' : 'transparent', boxShadow: on ? '0 1px 4px rgba(0,0,0,0.08)' : 'none', color: on ? GL.ink : GL.muted, fontSize: 12, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', display: 'flex', flexDirection: 'column', gap: 2, transition: 'all .15s', cursor: 'pointer' }}>
                  <span style={{ color: on ? (o.id === 'sub' ? GL.teal : GL.ink) : 'inherit' }}>{o.t1}</span>
                  <span style={{ fontSize: 9, opacity: 0.7, fontWeight: 500, letterSpacing: '0.06em', textTransform: 'none' }}>{o.t2}</span>
                </button>
              );
            })}
          </div>
          {subMode && (
            <div style={{ marginTop: 8, padding: '10px 12px', background: `${GL.teal}10`, border: `1px solid ${GL.teal}40`, borderRadius: 8, fontSize: 11.5, color: GL.ink, lineHeight: 1.5 }}>
              Tap items to build your standing order. Pick a schedule + duration on the next step. Pay once via QR — we deliver every cycle.
            </div>
          )}
        </div>

        {/* Section header */}
        <div style={{ margin: '24px 20px 20px', textAlign: 'center' }}>
          <div style={{ height: 2, background: GL.line, marginBottom: 20 }}/>
          <h2 className="gl-display" style={{ fontSize: 32, margin: 0, color: GL.ink, letterSpacing: '0.01em' }}>Pasta + Sauce Sets</h2>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, marginTop: 10 }}>
            <div style={{ height: 1, width: 32, background: GL.teal }}/>
            <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.18em', color: GL.teal, textTransform: 'uppercase' }}>Hand-made pasta & signature sauce</div>
            <div style={{ height: 1, width: 32, background: GL.teal }}/>
          </div>
          <div style={{ height: 2, background: GL.line, marginTop: 20 }}/>
        </div>

        {/* Grid */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, padding: '0 16px' }}>
          {items.map(p => (
            <div key={p.id} onClick={() => go('pdp', p)} style={{ cursor: 'pointer' }}>
              <div style={{ position: 'relative' }}>
                <GLImage src={p.img} label={p.name} ratio="4/5" radius={8}/>
                <button onClick={e => { e.stopPropagation(); app.addItem(p); }}
                  style={{
                    position: 'absolute', bottom: 10, right: 10, width: 40, height: 40, borderRadius: '50%',
                    background: subMode ? GL.teal : '#fff', boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
                    display: 'grid', placeItems: 'center',
                  }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={GL.ink} strokeWidth="2.5" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>
                </button>
              </div>
              <div style={{ padding: '10px 4px 0' }}>
                <div className="gl-display" style={{ fontSize: 12, color: GL.ink, letterSpacing: '0.03em' }}>{p.name}</div>
                <div style={{ fontSize: 11, color: GL.muted, marginTop: 2 }}>Pasta · {p.pair}</div>
                {p.diet_labels && p.diet_labels.length > 0 && (
                  <div style={{ marginTop: 6 }}><GLDietBadges labels={p.diet_labels} mode="compact"/></div>
                )}
                <div style={{ fontSize: 11, fontWeight: 700, color: GL.teal, marginTop: 6, letterSpacing: '0.06em' }}>{p.price} THB</div>
              </div>
            </div>
          ))}
        </div>

        {/* Footer card */}
        <div style={{ margin: '32px 16px 0', padding: 24, background: GL.offwhite, borderRadius: 10, border: `1px solid ${GL.line}`, textAlign: 'center' }}>
          <div className="gl-kicker" style={{ color: GL.muted, marginBottom: 10 }}>The Gustai Standard</div>
          <div style={{ fontSize: 16, fontWeight: 700, color: GL.ink, lineHeight: 1.4, marginBottom: 16 }}>
            Chef-curated pairings of fresh pasta and slow-cooked sauces.
          </div>
          <button onClick={() => go('lab')} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, borderBottom: `2px solid ${GL.teal}`, paddingBottom: 2, fontSize: 13, fontWeight: 700, color: GL.ink }}>
            How It Works
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          </button>
        </div>
      </div>

      <GLTabBar active="home" onNav={go} shopMode={app.shopMode} cartCount={(app.shopMode === 'sub' ? (app.subTemplate || []) : app.cart).length}/>
    </div>
  );
}

// PDP — detailed "in the box" variant
function GLProductDetail({ product, app, go }) {
  const [qty, setQty] = React.useState(1);
  // Mode is sourced from global app state so the PDP toggle stays in sync with
  // the Home toggle. Selecting here also flips the global mode for consistency.
  const mode = app.shopMode || 'alc';
  const setMode = (m) => app.setShopMode(m);
  const p = product || GL_PASTA[0];
  const fav = app.isFavorite ? app.isFavorite(p.id) : false;
  const setFav = () => app.toggleFavorite && app.toggleFavorite(p.id);
  const [expanded, setExpanded] = React.useState('');
  const [shareToast, setShareToast] = React.useState(''); // '' | 'shared' | 'copied'

  async function handleShare() {
    const shareUrl = `${window.location.origin}${window.location.pathname}?product=${p.id}`;
    const shareData = {
      title: `${p.name} — Gustai Lab`,
      text: `${p.short_desc || p.name} · ฿${p.price} · Fresh pasta from Gustai Lab, Phuket.`,
      url: shareUrl,
    };
    try {
      if (navigator.share && navigator.canShare && navigator.canShare(shareData)) {
        await navigator.share(shareData);
        setShareToast('shared');
      } else {
        // Desktop fallback: copy link
        await navigator.clipboard.writeText(shareUrl);
        setShareToast('copied');
      }
    } catch (e) {
      if (e.name !== 'AbortError') {
        // User cancelled — no toast needed
        try { await navigator.clipboard.writeText(shareUrl); setShareToast('copied'); } catch {}
      }
    }
    setTimeout(() => setShareToast(''), 2200);
  }

  return (
    <div style={{ width: '100%', height: '100%', background: GL.paper, display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <div style={{ flex: 1, overflowY: 'auto', paddingBottom: 100 }} className="gl-noscroll">
        {/* Hero image */}
        <div style={{ position: 'relative', height: 380 }}>
          <GLImage src={p.img} label={p.name} ratio="auto" radius={0} style={{ height: '100%', borderRadius: 0 }}/>
          <div style={{ position: 'absolute', top: 56, left: 16, right: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center', zIndex: 2 }}>
            {/* Back */}
            <button onClick={() => go('home')} style={{ width: 40, height: 40, borderRadius: '50%', background: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(10px)', display: 'grid', placeItems: 'center' }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={GL.ink} strokeWidth="2.5" strokeLinecap="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
            </button>
            {/* Share + Favorite */}
            <div style={{ display: 'flex', gap: 8 }}>
              <button onClick={handleShare} style={{ width: 40, height: 40, borderRadius: '50%', background: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(10px)', display: 'grid', placeItems: 'center', position: 'relative' }}>
                <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke={GL.ink} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                  <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
                  <path d="M8.6 13.5l6.8 4M15.4 6.5l-6.8 4"/>
                </svg>
              </button>
              <button onClick={setFav} style={{ width: 40, height: 40, borderRadius: '50%', background: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(10px)', display: 'grid', placeItems: 'center' }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill={fav ? GL.teal : 'none'} stroke={fav ? GL.teal : GL.ink} strokeWidth="2"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21.2l8.8-8.8a5.5 5.5 0 0 0 0-7.8z"/></svg>
              </button>
            </div>
          </div>

          {/* Share / Copy toast */}
          {shareToast && (
            <div style={{
              position: 'absolute', bottom: 72, left: '50%', transform: 'translateX(-50%)',
              background: GL.ink, color: '#fff', padding: '9px 18px',
              fontSize: 12, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase',
              whiteSpace: 'nowrap', zIndex: 10, pointerEvents: 'none',
              animation: 'gl-slide-up 0.2s ease',
            }}>
              {shareToast === 'copied' ? '🔗 Link Copied' : '✓ Shared'}
            </div>
          )}
          <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 60, background: `linear-gradient(180deg, transparent, ${GL.paper})` }}/>
        </div>

        {/* Content */}
        <div style={{ padding: '0 24px' }}>
          {/* Marketing tags only — diet info flows through GLDietBadges below */}
          {(() => {
            const DIET_WORDS = ['VEGETARIAN','VEGAN','GLUTEN-FREE','DAIRY-FREE','GLUTEN FREE','DAIRY FREE','CONTAINS-PORK','CONTAINS-DAIRY','CONTAINS-GLUTEN','CONTAINS-EGGS','CONTAINS-NUTS','CONTAINS-SHELLFISH'];
            const marketing = (p.tags || []).filter(t => !DIET_WORDS.includes(String(t).toUpperCase()));
            if (!marketing.length) return null;
            return (
              <div style={{ display: 'flex', gap: 8, marginBottom: 10 }}>
                {marketing.map(t => (
                  <span key={t} style={{
                    fontSize: 10, fontWeight: 800, letterSpacing: '0.14em', padding: '4px 10px', borderRadius: 999,
                    background: `${GL.teal}22`, color: GL.teal,
                  }}>{t}</span>
                ))}
              </div>
            );
          })()}
          <h1 className="gl-display" style={{ fontSize: 44, lineHeight: 0.92, margin: '0 0 10px', color: GL.ink }}>
            {p.name.split(' ').map((w, i, arr) => (
              <React.Fragment key={i}>{w}{i < arr.length - 1 && <br/>}</React.Fragment>
            ))}
          </h1>

          {/* Short description — tagline under title */}
          {p.short_desc && (
            <p style={{ fontSize: 14, color: GL.muted, fontWeight: 500, margin: '0 0 12px', lineHeight: 1.5 }}>{p.short_desc}</p>
          )}

          {/* Diet labels — prominent on PDP */}
          {p.diet_labels && p.diet_labels.length > 0 && (
            <div style={{ margin: '0 0 18px' }}>
              <GLDietBadges labels={p.diet_labels} mode="full"/>
            </div>
          )}

          {/* In the box pill */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: 14, border: `1px solid ${GL.line}`, background: GL.offwhite, borderRadius: 8, marginBottom: 14 }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={GL.teal} strokeWidth="2"><path d="M3 7l9-4 9 4v10l-9 4-9-4V7zM3 7l9 4 9-4M12 11v10"/></svg>
            <span className="gl-kicker" style={{ color: GL.ink }}>Pasta + Sauce + Toppings Included</span>
          </div>

          {/* In the box list */}
          <div style={{ padding: 18, background: GL.offwhite, borderRadius: 10, border: `1px solid ${GL.line}`, marginBottom: 24 }}>
            <div className="gl-kicker" style={{ color: GL.muted, marginBottom: 10 }}>In the box</div>
            {[`Fresh Extruded ${p.name}`, p.pair, 'Aged Parmigiano Reggiano'].map((item, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 0', fontSize: 14, fontWeight: 500, color: GL.ink }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: GL.teal }}/>{item}
              </div>
            ))}
          </div>

          {/* A la carte vs Subscribe toggle (synced with global shop mode) */}
          <div style={{ padding: 4, background: GL.offwhite, borderRadius: 10, display: 'flex', marginBottom: 10 }}>
            {[
              { id: 'alc', t1: 'A La Carte', t2: 'Single Set' },
              { id: 'sub', t1: 'Subscribe', t2: 'Pre-pay · Save up to 12%' },
            ].map(o => {
              const on = o.id === mode;
              return (
                <button key={o.id} onClick={() => setMode(o.id)}
                  style={{ flex: 1, padding: '12px 0', borderRadius: 8, background: on ? '#fff' : 'transparent', boxShadow: on ? '0 1px 3px rgba(0,0,0,0.08)' : 'none', color: on ? GL.teal : GL.muted, fontSize: 12, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', display: 'flex', flexDirection: 'column', gap: 2, transition: 'all .15s' }}>
                  <span>{o.t1}</span>
                  <span style={{ fontSize: 9, opacity: 0.7, fontWeight: 500, letterSpacing: '0.06em', textTransform: 'none' }}>{o.t2}</span>
                </button>
              );
            })}
          </div>
          {mode === 'sub' && (
            <div style={{ fontSize: 11, color: GL.muted, padding: '4px 2px 16px' }}>Cancel anytime. Pause or skip drops from your profile.</div>
          )}

          {/* Accordions */}
          {[
            { title: 'About',                content: p.long_desc      || 'Made in small batches each morning using imported Italian semolina. Ask us about seasonal specials and chef pairings.' },
            { title: 'Ingredients',          content: p.ingredients    || '• Semolina flour (Imported from Italy)\n• Organic eggs\n• Fresh black summer truffle\n• White truffle oil\n• Sea salt' },
            { title: 'Method',               content: p.method         || 'Bronze-extruded through custom dies for a rough, porous surface. Cold-pressed at under 40°C to preserve protein structure. Slow-dried for 24 hours minimum.' },
            { title: 'Cooking Instructions', content: p.cooking_instr  || '1. Bring a large pot of salted water to a rolling boil.\n2. Add pasta and cook 3–4 minutes until al dente.\n3. Reserve ½ cup pasta water, drain, and toss with sauce.' },
            { title: 'Allergens',            content: p.allergens      || 'Contains: Gluten (wheat), Eggs. May contain traces of nuts. Please inform us of any dietary requirements.' },
            { title: 'Storage',              content: p.storage_info   || 'Keep refrigerated below 4°C. Best consumed within 3 days of delivery. Can be frozen for up to 1 month.' },
          ].map(({ title, content }) => (
            <div key={title} style={{ borderTop: `1px solid ${GL.line}` }}>
              <button onClick={() => setExpanded(expanded === title ? '' : title)}
                style={{ width: '100%', padding: '18px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span className="gl-display" style={{ fontSize: 13, color: GL.ink, letterSpacing: '0.08em' }}>{title}</span>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={GL.muted} strokeWidth="2" style={{ transform: expanded === title ? 'rotate(180deg)' : '', transition: 'transform .2s' }}><path d="M6 9l6 6 6-6"/></svg>
              </button>
              {expanded === title && (
                <div className="gl-fade" style={{ paddingBottom: 16, fontSize: 13, color: GL.muted, lineHeight: 1.6 }}>
                  {content.split('\n').map((l, i) => <div key={i}>{l}</div>)}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>

      {/* Sticky bottom bar */}
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: 16, background: GL.paper, borderTop: `1px solid ${GL.line}`, display: 'flex', gap: 12, alignItems: 'center' }}>
        {/* Qty stepper — used by both modes */}
        <div style={{ display: 'flex', alignItems: 'center', height: 52, background: GL.offwhite, borderRadius: 10, padding: '0 4px' }}>
          <button onClick={() => setQty(Math.max(1, qty - 1))} style={{ width: 40, height: 40, display: 'grid', placeItems: 'center' }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={GL.ink} strokeWidth="2.5" strokeLinecap="round"><path d="M5 12h14"/></svg>
          </button>
          <span style={{ width: 28, textAlign: 'center', fontWeight: 800, fontSize: 15 }}>{qty}</span>
          <button onClick={() => setQty(qty + 1)} style={{ width: 40, height: 40, display: 'grid', placeItems: 'center' }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={GL.ink} strokeWidth="2.5" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>
          </button>
        </div>
        {mode === 'sub' ? (
          <button onClick={() => { for (let i = 0; i < qty; i++) app.addToSubTemplate(p); go('box'); }}
            style={{ flex: 1, height: 52, borderRadius: 10, background: GL.teal, color: GL.ink, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 18px', fontSize: 12, fontWeight: 800, letterSpacing: '0.16em', textTransform: 'uppercase' }}>
            <span>Add to Box</span>
            <span>฿{p.price * qty}/box</span>
          </button>
        ) : (
          <button onClick={() => { for (let i = 0; i < qty; i++) app.addToCart(p); go('box'); }}
            style={{ flex: 1, height: 52, borderRadius: 10, background: GL.ink, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 18px', fontSize: 12, fontWeight: 800, letterSpacing: '0.16em', textTransform: 'uppercase' }}>
            <span>Add to Box</span>
            <span style={{ color: GL.teal }}>฿{p.price * qty}</span>
          </button>
        )}
      </div>
    </div>
  );
}

// Box / Cart — branches between À la carte cart and Subscription template
function GLBox({ app, go }) {
  const subMode = app.shopMode === 'sub';
  const items = subMode ? app.subTemplate : app.cart;
  const subtotal = items.reduce((s, i) => s + i.price * i.qty, 0);
  const delivery = subtotal > 0 ? 60 : 0;
  const total = subtotal + delivery; // À la carte total
  const perBox = subtotal;            // Subscribe: total = subtotal per delivery (delivery handled in onboarding)
  const clearItems = subMode ? app.clearSubTemplate : app.clearCart;
  const updateItemQty = subMode ? app.updateSubQty : app.updateQty;
  const removeItem = subMode ? app.removeFromSubTemplate : app.removeFromCart;

  return (
    <div style={{ width: '100%', height: '100%', background: GL.paper, display: 'flex', flexDirection: 'column' }}>
      <GLTopBar onBack={() => go('home')} center={
        <div className="gl-display" style={{ fontSize: 14, letterSpacing: '0.16em', color: GL.ink }}>
          {subMode ? 'MY SUBSCRIPTION' : 'MY BOX'}
        </div>
      } right={items.length > 0 && (
        <button onClick={clearItems} style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: GL.ink }}>Clear</button>
      )}/>

      <div style={{ flex: 1, overflowY: 'auto', paddingBottom: items.length ? 180 : 24 }} className="gl-noscroll">
        <div style={{ padding: '20px 24px 0' }}>
          <h1 className="gl-display" style={{ fontSize: subMode ? 36 : 48, lineHeight: 0.95, margin: '0 0 12px', color: GL.ink, wordBreak: 'break-word' }}>
            {subMode ? <>My<br/>Subscription</> : <>My<br/>Box</>}
          </h1>
          {subMode && items.length > 0 && (
            <div style={{ padding: '10px 14px', background: `${GL.teal}10`, border: `1px solid ${GL.teal}40`, borderRadius: 8, fontSize: 12, color: GL.ink, lineHeight: 1.5, marginBottom: 12 }}>
              These items will be in <strong>every box</strong>. Pick your schedule and how many deliveries to prepay on the next step.
            </div>
          )}
        </div>

        {items.length === 0 ? (
          <div style={{ padding: '40px 24px', textAlign: 'center' }}>
            <div style={{ width: 80, height: 80, borderRadius: '50%', background: GL.offwhite, margin: '0 auto 20px', display: 'grid', placeItems: 'center' }}>
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke={GL.muted} strokeWidth="1.5"><path d="M3 7l9-4 9 4v10l-9 4-9-4V7zM3 7l9 4 9-4M12 11v10"/></svg>
            </div>
            <div className="gl-display" style={{ fontSize: 20, color: GL.ink, marginBottom: 8 }}>{subMode ? 'No items yet' : 'Your box is empty'}</div>
            <div style={{ fontSize: 13, color: GL.muted, marginBottom: 24 }}>{subMode ? 'Browse and tap items to add them to your standing order.' : 'Start with a fresh-extruded classic.'}</div>
            <GLButton onClick={() => go('home')} variant="primary" style={{ maxWidth: 220, margin: '0 auto' }}>Browse Menu</GLButton>
          </div>
        ) : (
          <div style={{ padding: '0 24px' }}>
            {items.map((it, idx) => (
              <div key={idx} style={{ marginBottom: 20 }}>
                <div style={{ position: 'relative' }}>
                  {!subMode && idx === 0 && (
                    <div style={{ position: 'absolute', top: 12, left: 12, zIndex: 2, background: GL.teal, color: GL.ink, fontSize: 10, fontWeight: 800, letterSpacing: '0.12em', padding: '5px 10px', borderRadius: 999, textTransform: 'uppercase' }}>Subscribe & Save 12%</div>
                  )}
                  {subMode && (
                    <div style={{ position: 'absolute', top: 12, left: 12, zIndex: 2, background: GL.ink, color: '#fff', fontSize: 10, fontWeight: 800, letterSpacing: '0.12em', padding: '5px 10px', borderRadius: 999, textTransform: 'uppercase' }}>In every box · ×{it.qty}</div>
                  )}
                  <GLImage src={it.img} label={it.name} ratio="16/10" radius={8}/>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12 }}>
                  <div className="gl-display" style={{ fontSize: 15, color: GL.ink }}>{it.name}</div>
                  <div style={{ fontWeight: 800, fontSize: 15 }}>฿{it.price}{subMode ? '/box' : ''}</div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 12 }}>
                  <div style={{ display: 'flex', alignItems: 'center', border: `1.5px solid ${GL.line}`, borderRadius: 8, padding: '0 4px', height: 38 }}>
                    <button onClick={() => updateItemQty(idx, it.qty - 1)} style={{ width: 34, display: 'grid', placeItems: 'center', height: 34 }}>
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={GL.ink} strokeWidth="2.5"><path d="M5 12h14"/></svg>
                    </button>
                    <span style={{ width: 28, textAlign: 'center', fontWeight: 700 }}>{it.qty}</span>
                    <button onClick={() => updateItemQty(idx, it.qty + 1)} style={{ width: 34, display: 'grid', placeItems: 'center', height: 34 }}>
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={GL.ink} strokeWidth="2.5"><path d="M12 5v14M5 12h14"/></svg>
                    </button>
                  </div>
                  <button onClick={() => removeItem(idx)} style={{ fontSize: 12, color: GL.teal, borderBottom: `1px solid ${GL.teal}`, paddingBottom: 1 }}>Remove</button>
                </div>
                <div style={{ height: 1, background: GL.line, marginTop: 20 }}/>
              </div>
            ))}
          </div>
        )}
      </div>

      {items.length > 0 && (
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: 20, paddingBottom: 28, background: GL.paper, borderTop: `1px solid ${GL.line}` }}>
          {subMode ? (
            <>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, color: GL.muted, marginBottom: 4 }}><span>Per box</span><span>฿{perBox.toLocaleString()}</span></div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: GL.muted, marginBottom: 10, paddingBottom: 10, borderBottom: `1px dashed ${GL.line}` }}><span>Delivery + duration set on next step</span><span></span></div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 16 }}>
                <span className="gl-display" style={{ fontSize: 15, color: GL.ink, letterSpacing: '0.08em' }}>Per delivery</span>
                <span className="gl-display" style={{ fontSize: 26, color: GL.ink }}>฿{perBox.toLocaleString()}</span>
              </div>
              <GLButton onClick={() => app.requireAuth('subscribe-onboard')} variant="teal"
                icon={<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>}>
                Pick Schedule
              </GLButton>
            </>
          ) : (
            <>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, color: GL.muted, marginBottom: 4 }}><span>Subtotal</span><span>฿{subtotal.toLocaleString()}</span></div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, color: GL.muted, marginBottom: 10, paddingBottom: 10, borderBottom: `1px dashed ${GL.line}` }}><span>Delivery Fee</span><span>฿{delivery}</span></div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 16 }}>
                <span className="gl-display" style={{ fontSize: 15, color: GL.ink, letterSpacing: '0.08em' }}>Total</span>
                <span className="gl-display" style={{ fontSize: 26, color: GL.ink }}>฿{total.toLocaleString()}</span>
              </div>
              <GLButton onClick={() => app.requireAuth('checkout')} variant="primary"
                icon={<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>}>
                Checkout
              </GLButton>
            </>
          )}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { GLHome, GLProductDetail, GLBox });