// Lab tab: Process, Extrusion Deep Dive, Sourcing & Raw Materials

function GLLab({ app, go }) {
  const [sub, setSub] = React.useState('process'); // process | extrusion | sourcing
  return (
    <div style={{ width: '100%', height: '100%', background: '#fff', display: 'flex', flexDirection: 'column' }}>
      <GLTopBar center={<div className="gl-display" style={{ fontSize: 15, letterSpacing: '0.18em' }}>GUSTAI LAB</div>}/>

      {/* Cook Timer banner */}
      <button onClick={() => go('cook')} style={{
        width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '14px 20px', background: GL.ink, cursor: 'pointer', border: 'none',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 36, height: 36, borderRadius: '50%', border: `2px solid ${GL.teal}`, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={GL.teal} strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
          </div>
          <div style={{ textAlign: 'left' }}>
            <div className="gl-display" style={{ fontSize: 13, color: '#fff', letterSpacing: '0.06em' }}>Pasta Cook Timer</div>
            <div style={{ fontSize: 11, color: GL.mutedDark, marginTop: 1 }}>Perfect al dente — every time</div>
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.14em', color: GL.teal, textTransform: 'uppercase' }}>Open</span>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={GL.teal} strokeWidth="2.2" strokeLinecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
        </div>
      </button>

      {/* Sub tabs */}
      <div style={{ display: 'flex', borderBottom: `1px solid ${GL.line}`, padding: '0 16px' }}>
        {[['process','The Process'],['extrusion','Extrusion'],['sourcing','Sourcing']].map(([id, label]) => (
          <button key={id} onClick={() => setSub(id)}
            style={{
              flex: 1, padding: '14px 0', fontSize: 11, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase',
              color: sub === id ? GL.ink : GL.muted,
              borderBottom: `2px solid ${sub === id ? GL.teal : 'transparent'}`, transition: 'all .15s',
            }}>{label}</button>
        ))}
      </div>

      <div style={{ flex: 1, overflowY: 'auto', paddingBottom: 96 }} className="gl-noscroll">
        {sub === 'process' && <LabProcess go={go}/>}
        {sub === 'extrusion' && <LabExtrusion/>}
        {sub === 'sourcing' && <LabSourcing/>}
      </div>

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

function LabProcess({ go }) {
  const { heading, subheading, steps } = GL_LAB_CONTENT.process;
  return (
    <div>
      <div style={{ padding: '24px 20px 16px' }}>
        <h1 className="gl-display" style={{ fontSize: 42, lineHeight: 0.9, margin: 0, color: GL.ink }}>
          The <span style={{ color: GL.teal }}>Process</span>
        </h1>
        <div className="gl-kicker" style={{ color: GL.muted, marginTop: 10, letterSpacing: '0.2em' }}>{subheading}</div>
        <div style={{ height: 1, background: GL.ink, marginTop: 14 }}/>
      </div>
      {steps.map((s, i) => (
        <div key={s.n} style={{ padding: '0 20px 36px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
            <div className="gl-display" style={{ fontSize: 38, color: GL.teal, fontStyle: 'italic' }}>{s.n}</div>
            <div className="gl-kicker" style={{ color: GL.muted }}>{s.label}</div>
          </div>
          <GLImage src={s.img} label={s.label} ratio="16/10" radius={0}/>
          <h2 className="gl-display" style={{ fontSize: 22, lineHeight: 1.1, color: GL.ink, marginTop: 16, fontStyle: 'italic' }}>{s.title}</h2>
          <p style={{ fontSize: 13, color: GL.muted, lineHeight: 1.6, marginTop: 10 }}>{s.body}</p>
          <div style={{ height: 2, background: GL.ink, marginTop: 20 }}/>
        </div>
      ))}
      <div style={{ padding: '0 20px 32px' }}>
        <GLButton variant="primary" onClick={() => go('home')}
          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>}>
          Taste the Result
        </GLButton>
      </div>
    </div>
  );
}

function LabExtrusion() {
  const { heroImg, kicker, heading, cards, ctaLabel } = GL_LAB_CONTENT.extrusion;
  const mapped = cards.map((c, i) => ({
    ...c,
    big: c.bigStat,
    accent: c.accent ? '#F5C64F' : undefined,
    closeable: !!c.accent,
    shapeTag: c.shapeTag ? 'SHAPE' : undefined,
  }));
  return (
    <div style={{ background: GL.darkBg, color: '#fff' }}>
      <div style={{ padding: '24px 20px', background: `url(${heroImg}) center/cover`, height: 280, position: 'relative' }}>
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(14,27,29,0.4) 0%, rgba(14,27,29,0.98) 100%)' }}/>
        <div style={{ position: 'absolute', top: 16, right: 16, display: 'flex', gap: 4 }}>
          <div style={{ width: 12, height: 12, background: GL.teal }}/>
          <div style={{ width: 12, height: 12, border: `2px solid ${GL.teal}` }}/>
        </div>
      </div>
      <div style={{ padding: '24px 20px', borderBottom: `1px solid ${GL.darkBorder}` }}>
        <div className="gl-kicker" style={{ color: GL.teal, marginBottom: 10 }}>{kicker}</div>
        <h1 className="gl-display" style={{ fontSize: 48, lineHeight: 0.9, color: '#fff', margin: 0 }}>
          {heading.split('\n').map((line, i) => <React.Fragment key={i}>{line}{i < heading.split('\n').length - 1 && <br/>}</React.Fragment>)}
        </h1>
      </div>

      {mapped.map((s, i) => (
        <div key={s.n} style={{
          padding: '28px 20px',
          background: s.accent ? '#F5C64F' : 'transparent',
          color: s.accent ? GL.ink : '#fff',
          borderBottom: s.accent ? 'none' : `1px solid ${GL.darkBorder}`,
          position: 'relative',
        }}>
          {s.closeable && (
            <button style={{ position: 'absolute', top: 18, right: 18, width: 28, height: 28, borderRadius: '50%', border: `1.5px solid ${GL.ink}`, display: 'grid', placeItems: 'center' }}>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={GL.ink} strokeWidth="2.5"><path d="M18 6L6 18M6 6l12 12"/></svg>
            </button>
          )}
          <div className="gl-display" style={{ fontSize: 34, color: s.accent ? GL.ink : GL.teal, fontStyle: 'italic', marginBottom: 4 }}>{s.n}</div>
          <h2 className="gl-display" style={{ fontSize: 26, margin: '0 0 14px', color: s.accent ? GL.ink : '#fff' }}>{s.title}</h2>
          {s.big && (
            <>
              <div className="gl-display" style={{ fontSize: 68, color: GL.teal, lineHeight: 1, margin: '20px 0' }}>{s.big}</div>
              <div className="gl-kicker" style={{ color: GL.mutedDark, marginBottom: 14 }}>{s.label}</div>
            </>
          )}
          {s.label && !s.big && (
            <div style={{ display: 'inline-block', background: s.accent ? GL.ink : '#fff', color: s.accent ? '#fff' : GL.ink, fontSize: 10, fontWeight: 800, letterSpacing: '0.14em', padding: '4px 8px', marginBottom: 12 }}>{s.label}</div>
          )}
          <p style={{ fontSize: 13, lineHeight: 1.6, color: s.accent ? 'rgba(10,10,10,0.7)' : GL.mutedDark, marginBottom: 14 }}>{s.body}</p>
          {s.img && <GLImage src={s.img} label={s.title} ratio="4/3" radius={0} dark={!s.accent}/>}
          {s.chips && (
            <div style={{ display: 'flex', gap: 14, marginTop: 12, fontSize: 10, fontWeight: 800, letterSpacing: '0.14em', color: GL.mutedDark }}>
              {s.chips.map((c, j) => (
                <React.Fragment key={c}>
                  <span>{c}</span>
                  {j < s.chips.length - 1 && <span style={{ color: GL.teal }}>//</span>}
                </React.Fragment>
              ))}
            </div>
          )}
          {s.shapeTag && (
            <div style={{ position: 'absolute', bottom: 28, right: 20, textAlign: 'right' }}>
              <div className="gl-kicker" style={{ color: 'rgba(0,0,0,0.5)' }}>SHAPE</div>
              <div className="gl-display" style={{ fontSize: 22, color: GL.ink, letterSpacing: '0.06em' }}>MF-04</div>
            </div>
          )}
        </div>
      ))}

      <div style={{ padding: '20px 20px 32px', background: GL.darkBg, display: 'flex', gap: 10, alignItems: 'center' }}>
        <div style={{ flex: 1 }}>
          <div className="gl-kicker" style={{ color: GL.teal, marginBottom: 4 }}>Ready to cook?</div>
          <button style={{ background: GL.teal, color: GL.ink, padding: '14px 18px', fontSize: 13, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase', display: 'flex', alignItems: 'center', gap: 10, width: '100%', justifyContent: 'space-between' }}>
            {ctaLabel}
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          </button>
        </div>
      </div>
    </div>
  );
}

function LabSourcing() {
  const { heading, subheading, items } = GL_LAB_CONTENT.sourcing;
  return (
    <div style={{ background: '#fff' }}>
      <div style={{ padding: '24px 20px 10px' }}>
        <h1 className="gl-display" style={{ fontSize: 40, lineHeight: 0.92, margin: 0, color: GL.ink }}>
          Sourcing <span style={{ color: GL.teal, fontStyle: 'italic' }}>&</span><br/>Raw Materials
        </h1>
        <p style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.08em', color: GL.muted, marginTop: 14, textTransform: 'uppercase', lineHeight: 1.6 }}>
          {subheading}
        </p>
        <div style={{ height: 1, background: GL.line, marginTop: 14 }}/>
      </div>

      {items.map((it, i) => (
        <div key={it.n} style={{ padding: '24px 20px', borderBottom: `1px solid ${GL.line}`, position: 'relative' }}>
          <div className="gl-display" style={{ position: 'absolute', top: 16, right: 20, fontSize: 56, color: 'rgba(10,10,10,0.08)' }}>{it.n}</div>
          {it.img && <GLImage src={it.img} label={it.title} ratio="16/10" radius={0}/>}
          {it.origin && (
            <div style={{ display: 'inline-block', background: GL.ink, color: '#fff', fontSize: 10, fontWeight: 800, letterSpacing: '0.12em', padding: '5px 10px', marginTop: it.img ? 12 : 0 }}>{it.origin}</div>
          )}
          <h2 className="gl-display" style={{ fontSize: 30, margin: '12px 0 8px', color: GL.ink }}>{it.title}</h2>
          {it.quote && (
            <p style={{ borderLeft: `2px solid ${GL.teal}`, paddingLeft: 12, fontSize: 15, fontStyle: 'italic', color: GL.ink, margin: '14px 0' }}>{it.quote}</p>
          )}
          {it.chips && (
            <div style={{ display: 'flex', gap: 8, marginBottom: 10 }}>
              {it.chips.map(c => <span key={c} style={{ fontSize: 9, fontWeight: 800, letterSpacing: '0.14em', padding: '4px 10px', background: GL.teal, color: GL.ink }}>{c}</span>)}
            </div>
          )}
          <p style={{ fontSize: 13, color: GL.muted, lineHeight: 1.6 }}>{it.body}</p>
          {it.stats && (
            <div style={{ borderTop: `1px solid ${GL.line}`, marginTop: 18 }}>
              {it.stats.map(([k, v]) => (
                <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 0', borderBottom: `1px solid ${GL.line}` }}>
                  <span className="gl-kicker" style={{ color: GL.muted }}>{k}</span>
                  <span className="gl-display" style={{ fontSize: 13, color: GL.ink, letterSpacing: '0.02em' }}>{v}</span>
                </div>
              ))}
            </div>
          )}
          {it.callout && (
            <div style={{ display: 'flex', alignItems: 'center', border: `1px solid ${GL.line}`, padding: 14, marginTop: 16, background: GL.offwhite, justifyContent: 'space-between' }}>
              <div>
                <div className="gl-display" style={{ fontSize: 26, color: GL.ink }}>{it.callout[0]}</div>
                <div className="gl-kicker" style={{ color: GL.muted, marginTop: 2 }}>{it.callout[1]}</div>
              </div>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={GL.teal} strokeWidth="2"><path d="M12 2a10 10 0 1 0 10 10"/><circle cx="12" cy="12" r="4" fill={GL.teal}/></svg>
            </div>
          )}
        </div>
      ))}
      <div style={{ height: 24 }}/>
    </div>
  );
}

// Profile (My Account summary)
function GLProfile({ app, go }) {
  const rows = [
    {
      id: 'subs',
      icon: 'M3 12a9 9 0 0 1 15-6.7l3 3M21 12a9 9 0 0 1-15 6.7l-3-3M15 3h6v6M9 21H3v-6',
      label: 'Subscriptions',
      sub: 'Active · Next: Mon, Oct 12',
      live: true,
    },
    {
      id: 'track',
      icon: 'M3 12h18M3 6h18M3 18h18',
      label: 'Orders & Tracking',
      sub: `Order #GUSTAI-${app.orderNo}`,
      live: true,
    },
    {
      id: 'notify',
      icon: 'M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0',
      label: 'Notifications',
      sub: 'Manage alerts & channel',
      live: true,
    },
    {
      id: 'favorites',
      icon: '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',
      label: 'Favorites',
      get sub() { return app.favorites?.length ? `${app.favorites.length} saved item${app.favorites.length === 1 ? '' : 's'}` : 'No items saved yet'; },
      live: true,
    },
    {
      id: 'addresses',
      icon: 'M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z|12|10|3',
      label: 'Addresses',
      get sub() {
        const def = (app.addresses || []).find(a => a.isDefault);
        return def ? def.label : 'No addresses saved';
      },
      live: true,
    },
  ];

  function handleRow(id) {
    if (id === 'subs')       return go('subs');
    if (id === 'track')      return go('track');
    if (id === 'notify')     return go('notifications');
    if (id === 'favorites')  return go('favorites');
    if (id === 'addresses')  return go('addresses');
  }

  return (
    <div style={{ width: '100%', height: '100%', background: '#fff', display: 'flex', flexDirection: 'column' }}>
      <GLTopBar center={<div className="gl-display" style={{ fontSize: 14, letterSpacing: '0.18em' }}>PROFILE</div>}/>
      <div style={{ flex: 1, overflowY: 'auto', paddingBottom: 96 }} className="gl-noscroll">
        <div style={{ padding: '24px 20px' }}>

          {/* Identity card */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, padding: 18, border: `2px solid ${GL.ink}`, background: GL.offwhite }}>
            <div style={{ width: 56, height: 56, borderRadius: '50%', background: GL.teal, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
              <span className="gl-display" style={{ fontSize: 22, color: GL.ink }}>{(app.userName || 'G')[0].toUpperCase()}</span>
            </div>
            <div style={{ flex: 1 }}>
              <div className="gl-display" style={{ fontSize: 18, color: GL.ink }}>{app.userName || 'Lab Member'}</div>
              <div style={{ fontSize: 12, color: GL.muted, marginTop: 2 }}>
                {app.phone || '+66 ··· ····'}
              </div>
            </div>
          </div>

          <div style={{ marginTop: 24 }}>
            <h2 className="gl-display" style={{ fontSize: 34, color: GL.ink, margin: 0 }}>
              My <span style={{ color: '#B4C1C2' }}>Account</span>
            </h2>
            <div style={{ height: 4, width: 48, background: GL.teal, marginTop: 8 }}/>
          </div>

          {/* Admin panel — only shown to verified owner */}
          {app.isAdmin && (
            <button onClick={() => go('admin')} style={{
              width: '100%', marginTop: 24,
              background: '#1A0A3A', padding: '14px 16px',
              display: 'flex', alignItems: 'center', gap: 14, textAlign: 'left', border: 'none', cursor: 'pointer',
            }}>
              <div style={{ width: 44, height: 44, borderRadius: '50%', border: `2px solid ${GL.teal}`, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={GL.teal} strokeWidth="2" strokeLinecap="round">
                  <rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>
                </svg>
              </div>
              <div style={{ flex: 1 }}>
                <div className="gl-display" style={{ fontSize: 14, color: '#fff', letterSpacing: '0.04em' }}>Admin · Receipt Manager</div>
                <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.45)', marginTop: 2 }}>Review &amp; confirm payments</div>
              </div>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={GL.teal} strokeWidth="2.2" strokeLinecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
            </button>
          )}

          {/* Cook timer feature card */}
          <button onClick={() => go('cook')} style={{
            width: '100%', marginTop: 24,
            background: GL.ink, padding: '18px 16px',
            display: 'flex', alignItems: 'center', gap: 14, textAlign: 'left',
          }}>
            <div style={{ width: 44, height: 44, borderRadius: '50%', border: `2px solid ${GL.teal}`, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={GL.teal} strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
            </div>
            <div style={{ flex: 1 }}>
              <div className="gl-display" style={{ fontSize: 14, color: '#fff', letterSpacing: '0.04em' }}>Pasta Cook Timer</div>
              <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', marginTop: 2 }}>Perfect al dente — every time</div>
            </div>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={GL.teal} strokeWidth="2.2" strokeLinecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          </button>

          <div style={{ marginTop: 20 }}>
            {rows.map(r => (
              <button key={r.id}
                onClick={() => r.live && handleRow(r.id)}
                style={{
                  width: '100%', display: 'flex', alignItems: 'center', gap: 14,
                  padding: '16px 0', borderBottom: `1px solid ${GL.line}`, textAlign: 'left',
                  opacity: r.live ? 1 : 0.4, cursor: r.live ? 'pointer' : 'default',
                }}>
                <div style={{ width: 36, height: 36, border: `1.5px solid ${GL.ink}`, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={GL.ink} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                    <path d={r.icon.split('|')[0]}/>
                    {r.icon.includes('|') && <circle cx={r.icon.split('|')[1]} cy={r.icon.split('|')[2]} r={r.icon.split('|')[3]}/>}
                  </svg>
                </div>
                <div style={{ flex: 1 }}>
                  <div className="gl-display" style={{ fontSize: 14, color: GL.ink, letterSpacing: '0.04em' }}>{r.label}</div>
                  <div style={{ fontSize: 11, color: r.live ? GL.muted : GL.teal, marginTop: 2, fontWeight: r.live ? 400 : 700, letterSpacing: r.live ? 0 : '0.1em', textTransform: r.live ? 'none' : 'uppercase' }}>{r.sub}</div>
                </div>
                {r.live
                  ? <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={GL.muted} strokeWidth="2"><path d="M9 6l6 6-6 6"/></svg>
                  : <div style={{ fontSize: 9, fontWeight: 800, letterSpacing: '0.14em', color: GL.muted, textTransform: 'uppercase' }}>Soon</div>
                }
              </button>
            ))}
          </div>

          {/* Sign out */}
          <button
            onClick={async () => {
              await window.db.auth.signOut();
              app.reset();
            }}
            style={{
              width: '100%', display: 'flex', alignItems: 'center', gap: 14,
              padding: '18px 0', marginTop: 8, textAlign: 'left', cursor: 'pointer', background: 'none', border: 'none',
            }}>
            <div style={{ width: 36, height: 36, border: '1.5px solid #C75B5B', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#C75B5B" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
                <polyline points="16 17 21 12 16 7"/>
                <line x1="21" y1="12" x2="9" y2="12"/>
              </svg>
            </div>
            <div className="gl-display" style={{ fontSize: 14, color: '#C75B5B', letterSpacing: '0.04em' }}>Sign Out</div>
          </button>

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

// Notifications settings screen
function GLNotifications({ app, go }) {
  const [marketing, setMarketing] = React.useState(app.marketingConsent ?? false);
  const [orderAlerts, setOrderAlerts] = React.useState(true);
  const channel = app.channel || 'whatsapp';
  const channelLabel = channel === 'line' ? 'LINE' : 'WhatsApp';
  const channelIcon  = channel === 'line' ? '💬' : '🟢';

  function ToggleRow({ label, sub, value, onChange }) {
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '18px 0', borderBottom: `1px solid ${GL.line}` }}>
        <div style={{ flex: 1 }}>
          <div className="gl-display" style={{ fontSize: 14, color: GL.ink, letterSpacing: '0.04em' }}>{label}</div>
          <div style={{ fontSize: 11, color: GL.muted, marginTop: 3, lineHeight: 1.4 }}>{sub}</div>
        </div>
        <button onClick={() => onChange(!value)} style={{
          width: 48, height: 28, borderRadius: 14,
          background: value ? GL.teal : '#D4DADA',
          position: 'relative', transition: 'background .2s', flexShrink: 0,
        }}>
          <div style={{
            position: 'absolute', top: 2, left: value ? 22 : 2, width: 24, height: 24,
            borderRadius: '50%', background: '#fff', transition: 'left .2s',
            boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
          }}/>
        </button>
      </div>
    );
  }

  return (
    <div style={{ width: '100%', height: '100%', background: '#fff', display: 'flex', flexDirection: 'column' }}>
      <GLTopBar onBack={() => go('me')} center={<div className="gl-display" style={{ fontSize: 14, letterSpacing: '0.18em' }}>NOTIFICATIONS</div>}/>
      <div style={{ flex: 1, overflowY: 'auto', paddingBottom: 96 }} className="gl-noscroll">
        <div style={{ padding: '24px 20px' }}>
          <h1 className="gl-display" style={{ fontSize: 42, lineHeight: 0.9, margin: 0, color: GL.ink }}>
            Your<br/><span style={{ color: '#B4C1C2' }}>Alerts</span>
          </h1>
          <div style={{ height: 4, width: 48, background: GL.teal, marginTop: 10 }}/>

          {/* Channel badge */}
          <div style={{ marginTop: 24, padding: '14px 16px', background: GL.offwhite, border: `1px solid ${GL.line}`, display: 'flex', alignItems: 'center', gap: 12 }}>
            <span style={{ fontSize: 20 }}>{channelIcon}</span>
            <div>
              <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.16em', textTransform: 'uppercase', color: GL.muted }}>Messages sent via</div>
              <div className="gl-display" style={{ fontSize: 16, color: GL.ink, marginTop: 2 }}>{channelLabel}</div>
            </div>
            <div style={{ marginLeft: 'auto', fontSize: 10, fontWeight: 700, color: GL.muted, textAlign: 'right', lineHeight: 1.4 }}>
              Change in<br/>account settings
            </div>
          </div>

          {/* Toggles */}
          <div style={{ marginTop: 20 }}>
            <ToggleRow
              label="Order Updates"
              sub={`Confirmation, packing & delivery status via ${channelLabel}.`}
              value={orderAlerts}
              onChange={setOrderAlerts}
            />
            <ToggleRow
              label="Drop Alerts & Promotions"
              sub={`New products, limited editions, and offers via ${channelLabel}. You consented to this at sign-up — you can withdraw at any time.`}
              value={marketing}
              onChange={v => { setMarketing(v); if (app.setMarketingConsent) app.setMarketingConsent(v); }}
            />
          </div>

          {/* PDPA note */}
          <div style={{ marginTop: 28, padding: '14px 16px', border: `1px solid ${GL.line}`, background: GL.offwhite }}>
            <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.16em', textTransform: 'uppercase', color: GL.muted, marginBottom: 6 }}>Your Rights</div>
            <p style={{ fontSize: 12, color: GL.muted, lineHeight: 1.6, margin: 0 }}>
              Under Thailand's PDPA you may withdraw marketing consent at any time. Order updates are required to fulfil your orders and cannot be disabled while you have an active account.
            </p>
          </div>
        </div>
      </div>
      <GLTabBar active="me" onNav={go} shopMode={app.shopMode} cartCount={(app.shopMode === 'sub' ? (app.subTemplate || []) : app.cart).length}/>
    </div>
  );
}

// Subscriptions dashboard (v3 refined)
function GLSubscriptions({ app, go }) {
  const [paused, setPaused] = React.useState(false);
  const [schedule, setSchedule] = React.useState([true, true, false]);
  const current = app.subscription;

  return (
    <div style={{ width: '100%', height: '100%', background: '#fff', display: 'flex', flexDirection: 'column' }}>
      <GLTopBar onBack={() => go('me')} center={<div className="gl-display" style={{ fontSize: 14, letterSpacing: '0.18em' }}>GUSTAI LAB</div>}/>

      <div style={{ flex: 1, overflowY: 'auto', paddingBottom: 96 }} className="gl-noscroll">
        <div style={{ padding: '20px 20px 0' }}>
          <h1 className="gl-display" style={{ fontSize: 48, lineHeight: 0.9, color: GL.ink, margin: 0 }}>
            My<br/><span style={{ color: '#B4C1C2' }}>Subscriptions</span>
          </h1>
          <div style={{ height: 4, width: 56, background: GL.teal, marginTop: 10 }}/>
        </div>

        <div style={{ padding: '26px 20px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div className="gl-kicker" style={{ color: GL.muted }}>Current Drop</div>
          <span style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.14em', padding: '5px 10px', background: paused ? GL.muted : GL.teal, color: paused ? '#fff' : GL.ink, textTransform: 'uppercase' }}>{paused ? 'Paused' : 'Active'}</span>
        </div>

        <div style={{ margin: '12px 20px 0', border: `2px solid ${GL.ink}`, boxShadow: `4px 4px 0 ${GL.ink}` }}>
          <div style={{ position: 'relative' }}>
            <GLImage src={current.img} label={current.name} ratio="16/10" radius={0}/>
            <div style={{ position: 'absolute', top: 12, left: 12, background: GL.ink, color: '#fff', fontSize: 10, fontWeight: 800, letterSpacing: '0.14em', padding: '5px 10px' }}>NEXT: MON, OCT 12</div>
            <div style={{ position: 'absolute', top: 12, right: 12, background: '#fff', color: GL.ink, fontSize: 10, fontWeight: 800, letterSpacing: '0.14em', padding: '5px 10px', border: `1px solid ${GL.ink}` }}>PASTA + SAUCE SET</div>
          </div>
          <div style={{ padding: 18 }}>
            <h3 className="gl-display" style={{ fontSize: 22, color: GL.ink, margin: '0 0 8px' }}>{current.name}</h3>
            <p style={{ fontSize: 12, color: GL.muted, lineHeight: 1.5, margin: 0 }}>Hand-cut ribbon pasta infused with black truffle shavings. Rich, earthy, and perfectly textured.</p>
          </div>
        </div>

        <div style={{ padding: '20px 20px 0' }}>
          <ActionRow label="Swap Pasta Type" onClick={() => go('swap')}
            icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M3 7h14l-4-4M21 17H7l4 4"/></svg>}/>
          <ActionRow label={paused ? 'Resume Drops' : 'Pause Next Drop'} onClick={() => setPaused(!paused)}
            icon={paused ? <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M6 4l14 8-14 8V4z"/></svg>
                        : <div style={{ width: 18, height: 18, borderRadius: '50%', background: GL.ink, display: 'grid', placeItems: 'center' }}><svg width="10" height="10" viewBox="0 0 8 8"><rect x="0" y="0" width="2.5" height="8" fill="#fff"/><rect x="5.5" y="0" width="2.5" height="8" fill="#fff"/></svg></div>}/>
          <ActionRow label="Change Frequency"
            icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M6 12h12M10 18h4"/></svg>}/>
        </div>

        <div style={{ padding: '28px 20px 0' }}>
          <div className="gl-kicker" style={{ color: GL.muted, marginBottom: 4 }}>Upcoming Schedule</div>
          <div style={{ height: 1, background: GL.line, marginBottom: 6 }}/>
          {[
            { mo: 'OCT', d: '19', title: 'Campanelle', sub: 'Semolina & Water', on: schedule[0] },
            { mo: 'OCT', d: '26', title: 'Rigatoni', sub: 'Whole Wheat', on: schedule[1] },
            { mo: 'NOV', d: '02', title: 'Orecchiette', sub: 'Durum Wheat', on: schedule[2] },
          ].map((d, i) => (
            <div key={i} onClick={() => setSchedule(s => s.map((v, j) => j === i ? !v : v))}
              style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '16px 0', borderBottom: `1px solid ${GL.line}`, cursor: 'pointer', opacity: d.on ? 1 : 0.5 }}>
              <div style={{ width: 40, textAlign: 'center' }}>
                <div className="gl-display" style={{ fontSize: 11, color: GL.muted, letterSpacing: '0.1em' }}>{d.mo}</div>
                <div className="gl-display" style={{ fontSize: 22, color: GL.ink }}>{d.d}</div>
              </div>
              <div style={{ flex: 1 }}>
                <div className="gl-display" style={{ fontSize: 15, color: GL.ink, letterSpacing: '0.04em' }}>{d.title}</div>
                <div style={{ fontSize: 11, color: GL.muted, marginTop: 2 }}>{d.sub}</div>
              </div>
              <div style={{ width: 22, height: 22, border: `2px solid ${d.on ? GL.ink : GL.line}`, background: d.on ? GL.teal : '#fff', display: 'grid', placeItems: 'center' }}>
                {d.on && <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={GL.ink} strokeWidth="3" strokeLinecap="round"><path d="M20 6L9 17l-5-5"/></svg>}
              </div>
            </div>
          ))}
        </div>
      </div>

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

function ActionRow({ label, onClick, icon }) {
  return (
    <button onClick={onClick}
      onMouseDown={e => e.currentTarget.style.transform = 'translate(-1px,-1px)'}
      onMouseUp={e => e.currentTarget.style.transform = ''}
      onMouseLeave={e => e.currentTarget.style.transform = ''}
      style={{
        width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '18px 18px', border: `2px solid ${GL.ink}`, background: '#fff', marginBottom: 10,
        fontSize: 13, fontWeight: 800, letterSpacing: '0.08em', textTransform: 'uppercase',
        color: GL.ink, transition: 'transform .1s',
      }}>
      <span>{label}</span>
      <span style={{ color: GL.ink, display: 'grid', placeItems: 'center' }}>{icon}</span>
    </button>
  );
}

// Swap Complete Set (dark variant)
function GLSwapSet({ app, go }) {
  const sets = [
    { id: 'truffle', name: 'Truffle Mafaldine Set', img: 'https://images.unsplash.com/photo-1622973536968-3ead9e780960?w=800&q=80', includes: ['Fresh Mafaldine (200g)', 'Black Truffle Butter', 'Grana Padano DOP'], badge: 'BEST SELLER' },
    { id: 'wagyu',   name: 'Wagyu Bolognese Set',   img: 'https://images.unsplash.com/photo-1587740908075-9e245311e158?w=800&q=80', includes: ['Tagliatelle (200g)', 'Slow-Cooked Wagyu Ragu', '24 Month Parmesan'] },
    { id: 'vodka',   name: 'Spicy Vodka Rigatoni',  img: 'https://images.unsplash.com/photo-1551183053-bf91a1d81141?w=800&q=80', includes: ['Hand-rolled Rigatoni', 'Calabrian Chili Vodka Sauce', 'Basil Oil'], badge: 'NEW' },
    { id: 'cacio',   name: 'Cacio e Pepe Set',      img: null, includes: ['Fresh Tonnarelli (200g)', 'Pecorino Romano Cream', 'Toasted Black Pepper'], soldOut: true },
  ];
  const [selected, setSelected] = React.useState(app.subscription.id);

  return (
    <div style={{ width: '100%', height: '100%', background: GL.darkBg, color: '#fff', display: 'flex', flexDirection: 'column' }}>
      <GLTopBar dark onBack={() => go('subs')} center={<div className="gl-display" style={{ fontSize: 13, letterSpacing: '0.18em', color: '#fff' }}>SWAP SET</div>}
        right={<div className="gl-kicker" style={{ color: GL.teal }}>DROP #42<br/><span style={{color: GL.mutedDark}}>FRI 24 NOV</span></div>}/>

      <div style={{ flex: 1, overflowY: 'auto', padding: '20px 20px 120px' }} className="gl-noscroll">
        <h1 className="gl-display" style={{ fontSize: 34, lineHeight: 0.95, margin: 0 }}>
          Swap Your<br/><span style={{ color: GL.teal }}>Complete Set</span>
        </h1>
        <div style={{ height: 1, background: GL.darkBorder, margin: '20px 0' }}/>

        {sets.map(s => {
          const isSel = selected === s.id;
          return (
            <div key={s.id} style={{
              border: `2px solid ${s.soldOut ? GL.darkBorder : '#fff'}`, marginBottom: 18,
              background: s.soldOut ? 'rgba(255,255,255,0.03)' : GL.darkBg,
              opacity: s.soldOut ? 0.5 : 1,
              boxShadow: isSel ? `4px 4px 0 ${GL.teal}` : 'none',
            }}>
              <div style={{ position: 'relative' }}>
                <GLImage src={s.img} label={s.name} ratio="16/10" radius={0} dark/>
                {s.badge && (
                  <div style={{ position: 'absolute', top: 10, right: 10, background: GL.ink, color: '#fff', fontSize: 9, fontWeight: 800, letterSpacing: '0.12em', padding: '4px 8px', border: `1px solid #fff` }}>{s.badge}</div>
                )}
                {s.soldOut && (
                  <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>
                    <div style={{ background: '#fff', color: GL.ink, fontSize: 11, fontWeight: 800, letterSpacing: '0.16em', padding: '6px 14px', transform: 'rotate(-4deg)' }}>SOLD OUT</div>
                  </div>
                )}
              </div>
              <div style={{ padding: 18 }}>
                <h3 className="gl-display" style={{ fontSize: 18, margin: '0 0 10px', color: '#fff' }}>{s.name}</h3>
                <div style={{ height: 1, background: 'rgba(255,255,255,0.1)', marginBottom: 10 }}/>
                <div className="gl-kicker" style={{ color: GL.mutedDark, marginBottom: 6 }}>Set Includes:</div>
                {s.includes.map(it => (
                  <div key={it} style={{ fontSize: 12, color: GL.mutedDark, padding: '3px 0', display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span style={{ width: 5, height: 5, borderRadius: '50%', background: s.soldOut ? GL.mutedDark : GL.teal }}/>{it}
                  </div>
                ))}
                <button onClick={() => !s.soldOut && setSelected(s.id)} disabled={s.soldOut}
                  style={{
                    width: '100%', marginTop: 14, padding: '14px 16px',
                    background: s.soldOut ? 'transparent' : isSel ? GL.teal : 'transparent',
                    color: s.soldOut ? GL.mutedDark : isSel ? GL.ink : '#fff',
                    border: `2px solid ${s.soldOut ? GL.mutedDark : '#fff'}`,
                    fontSize: 12, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase',
                    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
                    cursor: s.soldOut ? 'not-allowed' : 'pointer',
                  }}>
                  {s.soldOut ? 'Unavailable' : isSel ? 'Selected for Next Drop' : 'Select For Next Drop'}
                  {!s.soldOut && <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>}
                </button>
              </div>
            </div>
          );
        })}
      </div>

      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '16px 20px 28px', background: GL.darkBg, borderTop: `1px solid ${GL.darkBorder}` }}>
        <GLButton variant="teal" onClick={() => { app.setSubscription(sets.find(s => s.id === selected)); go('subs'); }}>
          Confirm Swap
        </GLButton>
      </div>
    </div>
  );
}

// ── Favorites ──────────────────────────────────────────────────────────────────
function GLFavorites({ app, go }) {
  const savedIds = app.favorites || [];
  const items = (window.GL_PASTA || []).filter(p => savedIds.includes(p.id));

  return (
    <div style={{ width: '100%', height: '100%', background: '#fff', display: 'flex', flexDirection: 'column' }}>
      <GLTopBar onBack={() => go('me')} center={<div className="gl-display" style={{ fontSize: 14, letterSpacing: '0.18em' }}>FAVORITES</div>}/>
      <div style={{ flex: 1, overflowY: 'auto', paddingBottom: 96 }} className="gl-noscroll">
        <div style={{ padding: '24px 20px' }}>
          <h1 className="gl-display" style={{ fontSize: 42, lineHeight: 0.9, margin: 0, color: GL.ink }}>
            Your<br/><span style={{ color: '#B4C1C2' }}>Favorites</span>
          </h1>
          <div style={{ height: 4, width: 48, background: GL.teal, marginTop: 10, marginBottom: 24 }}/>

          {items.length === 0 ? (
            <div style={{ textAlign: 'center', padding: '60px 0' }}>
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke={GL.line} strokeWidth="1.5" style={{ display: 'block', margin: '0 auto 20px' }}>
                <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>
              <div className="gl-display" style={{ fontSize: 18, color: GL.muted }}>Nothing saved yet</div>
              <p style={{ fontSize: 13, color: GL.muted, marginTop: 8, lineHeight: 1.5 }}>
                Tap the heart on any product<br/>to save it here.
              </p>
              <div style={{ marginTop: 28 }}>
                <GLButton onClick={() => go('home')} variant="primary"
                  icon={<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>}>
                  Browse Products
                </GLButton>
              </div>
            </div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {items.map(p => (
                <div key={p.id} style={{ display: 'flex', gap: 14, border: `1.5px solid ${GL.line}`, padding: 14, alignItems: 'center' }}>
                  {/* Thumbnail */}
                  <div style={{ width: 72, height: 72, flexShrink: 0, overflow: 'hidden' }}>
                    <img src={p.img} alt={p.name} style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'grayscale(30%)' }}/>
                  </div>
                  {/* Info */}
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="gl-display" style={{ fontSize: 14, color: GL.ink, letterSpacing: '0.04em', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p.name}</div>
                    <div style={{ fontSize: 11, color: GL.muted, marginTop: 3 }}>{p.pair}</div>
                    <div style={{ fontSize: 13, fontWeight: 800, color: GL.ink, marginTop: 6 }}>฿{p.price}</div>
                  </div>
                  {/* Actions */}
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8, flexShrink: 0 }}>
                    <button
                      onClick={() => { app.go('pdp', p); }}
                      style={{ padding: '8px 14px', background: GL.ink, color: '#fff', fontSize: 11, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
                      View
                    </button>
                    <button
                      onClick={() => app.toggleFavorite(p.id)}
                      style={{ padding: '7px 14px', border: `1.5px solid ${GL.line}`, background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
                      <svg width="14" height="14" viewBox="0 0 24 24" fill={GL.teal} stroke={GL.teal} 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>
              ))}
            </div>
          )}
        </div>
      </div>
      <GLTabBar active="me" onNav={go} shopMode={app.shopMode} cartCount={(app.shopMode === 'sub' ? (app.subTemplate || []) : app.cart).length}/>
    </div>
  );
}

// ── Addresses ──────────────────────────────────────────────────────────────────
function GLAddresses({ app, go }) {
  const addresses = app.addresses || [];
  const [adding, setAdding]   = React.useState(false);
  const [editing, setEditing] = React.useState(null); // address object being edited
  const [form, setForm]       = React.useState({ label: '', text: '' });
  const [confirmDelete, setConfirmDelete] = React.useState(null);

  function openAdd() {
    setForm({ label: '', text: '' });
    setEditing(null);
    setAdding(true);
  }
  function openEdit(addr) {
    setForm({ label: addr.label, text: addr.text });
    setEditing(addr);
    setAdding(true);
  }
  function handleSave() {
    if (!form.label.trim() || !form.text.trim()) return;
    const isFirst = addresses.length === 0 && !editing;
    app.saveAddress({
      ...(editing || {}),
      label: form.label.trim(),
      text:  form.text.trim(),
      isDefault: editing ? editing.isDefault : isFirst,
    });
    setAdding(false);
    setEditing(null);
  }
  function handleDelete(id) {
    app.deleteAddress(id);
    setConfirmDelete(null);
  }

  return (
    <div style={{ width: '100%', height: '100%', background: '#fff', display: 'flex', flexDirection: 'column' }}>
      <GLTopBar onBack={() => go('me')} center={<div className="gl-display" style={{ fontSize: 14, letterSpacing: '0.18em' }}>ADDRESSES</div>}/>
      <div style={{ flex: 1, overflowY: 'auto', paddingBottom: 96 }} className="gl-noscroll">
        <div style={{ padding: '24px 20px' }}>
          <h1 className="gl-display" style={{ fontSize: 42, lineHeight: 0.9, margin: 0, color: GL.ink }}>
            Delivery<br/><span style={{ color: '#B4C1C2' }}>Addresses</span>
          </h1>
          <div style={{ height: 4, width: 48, background: GL.teal, marginTop: 10, marginBottom: 24 }}/>

          {/* Address list */}
          {addresses.length === 0 && !adding && (
            <div style={{ textAlign: 'center', padding: '40px 0' }}>
              <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke={GL.line} strokeWidth="1.5" style={{ display: 'block', margin: '0 auto 16px' }}>
                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
              </svg>
              <div className="gl-display" style={{ fontSize: 16, color: GL.muted }}>No addresses saved</div>
              <p style={{ fontSize: 13, color: GL.muted, marginTop: 6 }}>Add a delivery address to speed up checkout.</p>
            </div>
          )}

          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {addresses.map(addr => (
              <div key={addr.id} style={{
                border: `2px solid ${addr.isDefault ? GL.ink : GL.line}`,
                padding: '16px 16px 14px',
                position: 'relative',
                boxShadow: addr.isDefault ? `3px 3px 0 ${GL.ink}` : 'none',
              }}>
                {/* Default badge */}
                {addr.isDefault && (
                  <div style={{ position: 'absolute', top: -1, right: 14, background: GL.teal, color: GL.ink, fontSize: 9, fontWeight: 800, letterSpacing: '0.16em', padding: '3px 8px', textTransform: 'uppercase' }}>
                    Default
                  </div>
                )}
                <div className="gl-display" style={{ fontSize: 14, color: GL.ink, letterSpacing: '0.06em' }}>{addr.label}</div>
                <div style={{ fontSize: 13, color: GL.muted, marginTop: 5, lineHeight: 1.5 }}>{addr.text}</div>

                <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
                  {!addr.isDefault && (
                    <button onClick={() => app.setDefaultAddress(addr.id)} style={{
                      flex: 1, padding: '9px 0', border: `1.5px solid ${GL.ink}`, background: '#fff',
                      fontSize: 10, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase', color: GL.ink,
                    }}>
                      Set Default
                    </button>
                  )}
                  <button onClick={() => openEdit(addr)} style={{
                    flex: 1, padding: '9px 0', border: `1.5px solid ${GL.line}`, background: '#fff',
                    fontSize: 10, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase', color: GL.ink,
                  }}>
                    Edit
                  </button>
                  {addresses.length > 1 && (
                    <button onClick={() => setConfirmDelete(addr.id)} style={{
                      width: 38, border: `1.5px solid ${GL.line}`, background: '#fff',
                      display: 'grid', placeItems: 'center',
                    }}>
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#c0392b" strokeWidth="2.2" strokeLinecap="round">
                        <path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6"/>
                      </svg>
                    </button>
                  )}
                </div>
              </div>
            ))}
          </div>

          {/* Add / Edit form */}
          {adding && (
            <div style={{ marginTop: 20, border: `2px solid ${GL.ink}`, padding: 20 }}>
              <div className="gl-display" style={{ fontSize: 16, color: GL.ink, marginBottom: 16 }}>
                {editing ? 'Edit Address' : 'New Address'}
              </div>
              {[
                { label: 'Label', key: 'label', ph: 'e.g. Home, Office, Villa 5' },
                { label: 'Full Address', key: 'text', ph: 'Street, subdistrict, district, province' },
              ].map(f => (
                <div key={f.key} style={{ marginBottom: 16 }}>
                  <label style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase', color: GL.muted, display: 'block', marginBottom: 6 }}>{f.label}</label>
                  <input
                    value={form[f.key]}
                    onChange={e => setForm(prev => ({ ...prev, [f.key]: e.target.value }))}
                    placeholder={f.ph}
                    style={{ width: '100%', border: `1.5px solid ${GL.ink}`, padding: '12px 14px', fontSize: 14, outline: 'none', boxSizing: 'border-box' }}
                  />
                </div>
              ))}
              <div style={{ display: 'flex', gap: 10, marginTop: 4 }}>
                <button onClick={() => { setAdding(false); setEditing(null); }} style={{
                  flex: 1, padding: '14px 0', border: `1.5px solid ${GL.line}`, background: '#fff',
                  fontSize: 12, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: GL.muted,
                }}>Cancel</button>
                <button onClick={handleSave} disabled={!form.label.trim() || !form.text.trim()} style={{
                  flex: 2, padding: '14px 0', background: form.label.trim() && form.text.trim() ? GL.ink : GL.line,
                  color: '#fff', fontSize: 12, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase',
                }}>Save Address</button>
              </div>
            </div>
          )}

          {/* Add new button */}
          {!adding && (
            <button onClick={openAdd} style={{
              width: '100%', marginTop: 20, padding: '16px 0',
              border: `2px dashed ${GL.line}`, background: 'transparent',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
              fontSize: 12, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase', color: GL.muted,
            }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>
              Add New Address
            </button>
          )}
        </div>
      </div>

      {/* Delete confirmation overlay */}
      {confirmDelete && (
        <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'flex-end', zIndex: 100 }}>
          <div style={{ width: '100%', background: '#fff', padding: '28px 24px 40px' }}>
            <div className="gl-display" style={{ fontSize: 20, color: GL.ink, marginBottom: 10 }}>Remove Address?</div>
            <p style={{ fontSize: 13, color: GL.muted, lineHeight: 1.5, margin: '0 0 24px' }}>
              This address will be permanently removed from your saved list.
            </p>
            <div style={{ display: 'flex', gap: 10 }}>
              <button onClick={() => setConfirmDelete(null)} style={{ flex: 1, padding: '14px 0', border: `1.5px solid ${GL.line}`, fontSize: 12, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase' }}>Keep It</button>
              <button onClick={() => handleDelete(confirmDelete)} style={{ flex: 1, padding: '14px 0', background: '#c0392b', color: '#fff', fontSize: 12, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase' }}>Remove</button>
            </div>
          </div>
        </div>
      )}

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

Object.assign(window, { GLLab, GLProfile, GLNotifications, GLFavorites, GLAddresses, GLSubscriptions, GLSwapSet });