/* Access code entry + partitioned program store, ERG sub-stores, Executive tier page, Mobile flow */
/* globals React, Icon, ProductImage, ProductCard */

// ——————— Access code entry ———————
const AccessCode = ({ onNav, setProgram }) => {
  const [code, setCode] = React.useState('');
  const [err, setErr] = React.useState('');
  const [working, setWorking] = React.useState(false);
  const submit = () => {
    setErr(''); setWorking(true);
    setTimeout(() => {
      const prog = window.PROGRAMS.find(p => p.code.toLowerCase() === code.trim().toLowerCase());
      setWorking(false);
      if (prog) { setProgram(prog); onNav('program'); }
      else setErr('We couldn\'t find that access code. Check for typos or ask the admin who sent it.');
    }, 450);
  };
  return (
    <div style={{ maxWidth: 1200, margin: '0 auto', padding: '48px 32px 80px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
        <div>
          <div className="chip chip-outline" style={{ marginBottom: 20 }}><Icon name="ticket" size={14}/> Program access</div>
          <h1 className="u-h1" style={{ margin: 0, marginBottom: 16, fontSize: 'clamp(40px,5vw,64px)' }}>Got a code?</h1>
          <p style={{ fontSize: 18, color: 'var(--u-text-2)', marginBottom: 28, maxWidth: 460 }}>
            Enter the access code you received from your admin, ERG lead, or manager. You'll see a curated set of items — just pick your size and ship-to address.
          </p>
          <div style={{ display: 'flex', gap: 10, marginBottom: 10, maxWidth: 440 }}>
            <input autoFocus value={code} onChange={e => { setCode(e.target.value.toUpperCase()); setErr(''); }} onKeyDown={e => e.key === 'Enter' && submit()}
              className="input" style={{ flex: 1, fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 17, letterSpacing: '0.06em', padding: '16px 18px', background: '#fff', border: '1px solid ' + (err ? '#D44333' : 'var(--u-line-strong)') }}
              placeholder="UBER-XX-XXXX"/>
            <button onClick={submit} className="btn btn-primary btn-lg" disabled={!code || working}>{working ? 'Checking…' : 'Enter'}</button>
          </div>
          {err && <div style={{ fontSize: 13, color: '#D44333', marginBottom: 10 }}>{err}</div>}
          <div style={{ fontSize: 13, color: 'var(--u-text-2)', marginBottom: 28 }}>
            Try a demo code: <button onClick={() => setCode('UBER-NH-2026')} className="mono" style={{ background: '#F6F6F6', border: 0, padding: '3px 8px', borderRadius: 3, cursor: 'pointer' }}>UBER-NH-2026</button> or <button onClick={() => setCode('UBER-ERG-PRIDE26')} className="mono" style={{ background: '#F6F6F6', border: 0, padding: '3px 8px', borderRadius: 3, cursor: 'pointer' }}>UBER-ERG-PRIDE26</button>
          </div>
          <div style={{ fontSize: 13, color: 'var(--u-text-3)' }}>Don't have a code? <button onClick={() => onNav('landing')} style={{ background:'transparent', border:0, cursor:'pointer', padding:0, fontSize: 13, textDecoration: 'underline' }}>Back to the main store</button>.</div>
        </div>
        <div>
          <div style={{ background: '#F6F6F6', padding: 28, borderRadius: 16 }}>
            <div className="uppercase" style={{ color: 'var(--u-text-3)', marginBottom: 12 }}>What a program looks like</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {[
                { i: 'gift', t: 'Curated set of items', d: 'The admin picks a short list. You pick one.' },
                { i: 'user', t: 'Self-select your size', d: 'We auto-ship in the right fit to the right place.' },
                { i: 'shield', t: 'Budget pre-approved', d: 'No cost to you — the program\'s sponsor covers it.' },
                { i: 'truck', t: 'Ships globally', d: 'US, EMEA, APAC fulfillment.' },
              ].map(s => (
                <div key={s.t} style={{ display: 'flex', gap: 14, padding: 12, background: '#fff', borderRadius: 8 }}>
                  <div style={{ width: 36, height: 36, background: '#000', borderRadius: 6, display:'flex', alignItems:'center', justifyContent:'center', color: '#fff', flexShrink: 0 }}><Icon name={s.i} size={18}/></div>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 600 }}>{s.t}</div>
                    <div style={{ fontSize: 13, color: 'var(--u-text-2)' }}>{s.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
window.AccessCode = AccessCode;

// ——————— Program (partitioned) store ———————
const ProgramStore = ({ program, onOpen, onNav }) => {
  if (!program) return null;
  const items = program.items.map(id => window.CATALOG.find(p => p.id === id) || window.ERG_CATALOG.find(p => p.id === id)).filter(Boolean);
  return (
    <div>
      <div style={{ background: '#000', color: '#fff' }}>
        <div style={{ maxWidth: 1440, margin: '0 auto', padding: '32px 32px 24px' }}>
          <button onClick={() => onNav('landing')} style={{ background:'transparent', border:0, cursor:'pointer', color:'rgba(255,255,255,0.6)', fontSize: 13, padding: 0, display:'flex', alignItems:'center', gap: 6, marginBottom: 20 }}>
            <Icon name="chevron-left" size={14}/> Main store
          </button>
          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 40, alignItems: 'end' }}>
            <div>
              <div style={{ display:'flex', alignItems:'center', gap: 10, marginBottom: 12 }}>
                <span className="chip chip-eats"><Icon name="ticket" size={12}/> Program access</span>
                <span className="mono" style={{ fontSize: 12, opacity: 0.5 }}>{program.code}</span>
              </div>
              <h1 className="u-h1" style={{ margin: 0, fontSize: 'clamp(36px,4.5vw,60px)' }}>{program.name}</h1>
              <p style={{ fontSize: 16, opacity: 0.75, marginTop: 12, marginBottom: 0, maxWidth: 640 }}>{program.desc}</p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, fontSize: 13 }}>
              {[
                { l: 'Sponsor', v: program.owner },
                { l: 'Budget', v: program.budget },
                { l: 'Expires', v: program.expires },
                { l: 'Items', v: `Pick 1 of ${items.length}` },
              ].map(r => (
                <div key={r.l}>
                  <div style={{ opacity: 0.5, textTransform: 'uppercase', letterSpacing: '0.06em', fontSize: 11, marginBottom: 3 }}>{r.l}</div>
                  <div style={{ fontWeight: 500 }}>{r.v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '40px 32px 64px' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 24 }}>
          <h2 className="u-h3" style={{ margin: 0 }}>Available in this program</h2>
          <div style={{ fontSize: 13, color: 'var(--u-text-2)' }}>{items.length} items · curated by {program.owner}</div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
          {items.map(p => <ProductCard key={p.id} product={p} onOpen={onOpen}/>)}
        </div>
      </div>
    </div>
  );
};
window.ProgramStore = ProgramStore;

// ——————— ERG store (unified across all 15 ERGs) ———————
const ERGStore = ({ onOpen, onNav }) => {
  const all = window.ERG_CATALOG;
  const apparel = all.filter(p => p.sub === 'Shared apparel');
  const bags = all.filter(p => p.sub === 'Bags & carry');
  const plush = all.filter(p => p.sub === 'Plush keychains');
  return (
    <div>
      {/* Hero — neutral Uber black, ERG roll-call as visual anchor (not a rainbow) */}
      <section style={{ background: '#0B0B0B', color: '#fff', position: 'relative', overflow: 'hidden' }}>
        <div style={{ maxWidth: 1440, margin: '0 auto', padding: '64px 32px 48px', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 48, alignItems: 'end' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
              <div className="chip" style={{ background: 'rgba(255,255,255,0.08)', color: '#fff', border: '1px solid rgba(255,255,255,0.14)' }}><Icon name="users" size={12}/> Employee Resource Groups</div>
              <span style={{ fontSize: 12, opacity: 0.5 }}>15 ERGs · one shared collection</span>
            </div>
            <h1 className="u-h1" style={{ margin: 0, fontSize: 'clamp(48px,7vw,88px)', letterSpacing: '-0.03em' }}>
              One collection.<br/><span style={{ opacity: 0.5 }}>Fifteen communities.</span>
            </h1>
            <p style={{ fontSize: 17, maxWidth: 520, marginTop: 20, opacity: 0.75, lineHeight: 1.5 }}>
              Shared apparel, bags, and lanyards that co-brand to your ERG. Plus a plush keychain set — one per group, collect your own or gift across ERGs.
            </p>
            <div style={{ display: 'flex', gap: 32, marginTop: 28, fontSize: 13 }}>
              <div><div style={{ opacity: 0.5, textTransform: 'uppercase', letterSpacing: '0.06em', fontSize: 11, marginBottom: 3 }}>Budget</div><div style={{ fontWeight: 500 }}>ERG-funded · 1 item / member</div></div>
              <div><div style={{ opacity: 0.5, textTransform: 'uppercase', letterSpacing: '0.06em', fontSize: 11, marginBottom: 3 }}>Sponsor</div><div style={{ fontWeight: 500 }}>ERG Council at Uber</div></div>
              <div><div style={{ opacity: 0.5, textTransform: 'uppercase', letterSpacing: '0.06em', fontSize: 11, marginBottom: 3 }}>Shipping</div><div style={{ fontWeight: 500 }}>US · EMEA · APAC</div></div>
            </div>
          </div>
          {/* ERG name wall — every group, same weight */}
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px 8px', alignItems: 'flex-end', justifyContent: 'flex-end' }}>
            {plush.map((p, i) => (
              <span key={p.id} style={{ fontSize: 13, padding: '6px 12px', borderRadius: 100, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', color: 'rgba(255,255,255,0.85)' }}>{p.erg}</span>
            ))}
          </div>
        </div>
      </section>

      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '32px 32px 64px' }}>
        <CategoryChips current="erg" onNav={onNav}/>

        {/* Shared apparel */}
        <div style={{ marginTop: 8, marginBottom: 48 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 20, borderBottom: '1px solid var(--u-line)', paddingBottom: 12 }}>
            <div>
              <div className="uppercase" style={{ color: 'var(--u-text-3)', marginBottom: 4 }}>01 · Shared apparel</div>
              <h2 className="u-h3" style={{ margin: 0 }}>Co-brandable tees.</h2>
            </div>
            <div style={{ fontSize: 13, color: 'var(--u-text-2)', maxWidth: 340, textAlign: 'right' }}>{"\n"}</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
            {apparel.map(p => <ProductCard key={p.id} product={p} onOpen={onOpen}/>)}
          </div>
        </div>

        {/* Bags & carry */}
        <div style={{ marginBottom: 48 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 20, borderBottom: '1px solid var(--u-line)', paddingBottom: 12 }}>
            <div>
              <div className="uppercase" style={{ color: 'var(--u-text-3)', marginBottom: 4 }}>02 · Bags & carry</div>
              <h2 className="u-h3" style={{ margin: 0 }}>Totes, lanyards, and stickers</h2>
            </div>
            <div style={{ fontSize: 13, color: 'var(--u-text-2)' }}>{bags.length} items · co-brandable</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
            {bags.map(p => <ProductCard key={p.id} product={p} onOpen={onOpen}/>)}
          </div>
        </div>

        {/* Plush collection — 15 ERGs */}
        <div>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 20, borderBottom: '1px solid var(--u-line)', paddingBottom: 12 }}>
            <div>
              <div className="uppercase" style={{ color: 'var(--u-text-3)', marginBottom: 4 }}>03 · Plush collection</div>
              <h2 className="u-h3" style={{ margin: 0 }}>One keychain per ERG.</h2>
            </div>
            <div style={{ fontSize: 13, color: 'var(--u-text-2)' }}>{plush.length} collectibles · $10 each</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16 }}>
            {plush.map(p => (
              <button key={p.id} onClick={() => onOpen(p)} style={{ background: 'transparent', border: 0, padding: 0, textAlign: 'left', cursor: 'pointer' }}>
                <ProductImage product={p} showLabel={false}/>
                <div style={{ marginTop: 10, fontSize: 13, fontWeight: 500, lineHeight: 1.3 }}>{p.erg}</div>
                <div style={{ fontSize: 12, color: 'var(--u-text-2)', marginTop: 2 }}>Plush keychain · ${p.price}</div>
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};
window.ERGStore = ERGStore;

// ——————— Executive ———————
const Executive = ({ onOpen, onNav }) => {
  const items = window.CATALOG.filter(p => p.tier === 'premium' && p.sku !== 'ACC-BG-006');
  return (
    <div style={{ background: '#0B0B0B', color: '#fff' }}>
      <section style={{ maxWidth: 1440, margin: '0 auto', padding: '72px 32px 96px' }}>
        <button onClick={() => onNav('landing')} style={{ background:'transparent', border:0, cursor:'pointer', color:'rgba(255,255,255,0.6)', fontSize: 13, padding: 0, display:'flex', alignItems:'center', gap: 6, marginBottom: 20 }}>
          <Icon name="chevron-left" size={14}/> Main store
        </button>
        <CategoryChips current="executive" onNav={onNav} theme="dark"/>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'end', marginBottom: 64 }}>
          <div>
            <div className="chip chip-gold" style={{ marginBottom: 20 }}><Icon name="sparkle" size={12}/> Presentation-grade</div>
            <h1 className="u-h1" style={{ margin: 0, fontSize: 'clamp(48px,6vw,80px)' }}>Executive<br/>& client gifting.</h1>
          </div>
          <p style={{ fontSize: 17, opacity: 0.75, lineHeight: 1.55, maxWidth: 520 }}>
            Curated by Brand Desk in partnership with executive offices. Every item is presentation-ready: premium materials, monogrammed on request, and shipped in custom gift packaging.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {items.map(p => (
            <button key={p.id} onClick={() => onOpen(p)} style={{ background: 'transparent', border: 0, padding: 0, textAlign: 'left', cursor: 'pointer', color: '#fff' }}>
              <div style={{ aspectRatio: '3/4', borderRadius: 14, overflow: 'hidden', background: '#1A1814', position: 'relative' }}>
                {p.image ? (
                  <img src={p.image} alt={p.name} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}/>
                ) : (
                  <div className="img-ph is-premium" style={{ width: '100%', height: '100%', borderRadius: 0 }}>
                    <div className="ph-badge">Image · {p.sku}</div>
                    <div className="ph-label">{p.sub}</div>
                  </div>
                )}
              </div>
              <div style={{ padding: '16px 2px 0' }}>
                <div style={{ fontSize: 11, color: 'var(--u-premium-gold)', letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 6 }}>{p.sub}</div>
                <div style={{ fontSize: 18, fontWeight: 500, marginBottom: 6 }}>{p.name}</div>
                <div style={{ fontSize: 14, opacity: 0.7 }}>From ${p.price}</div>
              </div>
            </button>
          ))}
        </div>
        <div style={{ padding: '40px 32px', marginTop: 56, background: '#15140F', border: '1px solid #2A2620', borderRadius: 16, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
          {[
            { t: 'Hand-inspected', d: 'QA on every unit before it ships.' },
            { t: 'Custom packaging', d: 'Gift-ready with handwritten card option.' },
            { t: 'Monogramming', d: 'Debossed initials or full company mark.' },
            { t: 'White-glove delivery', d: 'Signature on delivery for top-tier orders.' },
          ].map(f => (
            <div key={f.t}>
              <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 6, color: 'var(--u-premium-gold)' }}>{f.t}</div>
              <div style={{ fontSize: 13, opacity: 0.7 }}>{f.d}</div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
};
window.Executive = Executive;

// ——————— Mobile flow (phone frame) ———————
const MobileFlow = () => {
  const [step, setStep] = React.useState(0);
  const steps = ['Splash','Two paths','Home','Browse','ERG store','Product','Cart','Pay','Done'];
  const phoneStyle = { width: 320, height: 680, background: '#fff', borderRadius: 36, overflow: 'hidden', border: '10px solid #111', boxShadow: '0 30px 60px rgba(0,0,0,0.18)', position: 'relative', flexShrink: 0 };
  const StatusBar = () => (
    <div style={{ height: 36, background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 20px', fontSize: 12, fontWeight: 600 }}>
      <span>9:41</span>
      <span style={{ width: 60, height: 20, background: '#000', borderRadius: 12 }}/>
      <span style={{ display:'flex', gap: 3 }}><span style={{ width: 16, height: 10, background: '#000', borderRadius: 2 }}/><span style={{ width: 14, height: 10, background: '#000', borderRadius: 1 }}/></span>
    </div>
  );
  return (
    <div>
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '48px 32px 24px' }}>
        <div className="uppercase" style={{ color: 'var(--u-text-3)', marginBottom: 8 }}>Mobile · Personal purchase</div>
        <h1 className="u-h2" style={{ margin: 0, marginBottom: 10 }}>The store, on your phone.</h1>
        <p style={{ color: 'var(--u-text-2)', fontSize: 16, margin: 0, marginBottom: 32, maxWidth: 620 }}>The full personal purchase flow fits in a pocket. Tap a step to preview.</p>
        <div style={{ display: 'flex', gap: 8, marginBottom: 32, flexWrap: 'wrap' }}>
          {steps.map((s, i) => (
            <button key={i} onClick={() => setStep(i)} style={{ padding: '8px 14px', borderRadius: 999, background: i === step ? '#000' : '#F6F6F6', color: i === step ? '#fff' : '#000', border: 0, cursor: 'pointer', fontSize: 13, fontWeight: 500 }}>{i+1}. {s}</button>
          ))}
        </div>
      </div>
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 32px 64px', display: 'flex', gap: 24, overflowX: 'auto' }}>
        {steps.map((s, i) => (
          <div key={i} style={{ ...phoneStyle, outline: i === step ? '3px solid var(--u-eats)' : 'none', outlineOffset: 4 }}>
            <StatusBar/>
            {i === 0 && (
              <div style={{ height: 'calc(100% - 36px)', position:'relative', overflow:'hidden', background:'#000', color:'#fff' }}>
                {/* Full-bleed hero image */}
                <img src="images/splash-hero.png" alt="" aria-hidden="true" style={{ position:'absolute', inset: 0, width:'100%', height:'100%', objectFit:'cover', objectPosition:'60% center' }}/>
                {/* Dark gradient overlay for legibility */}
                <div aria-hidden="true" style={{ position:'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0.55) 65%, rgba(0,0,0,0.88) 100%)' }}/>
                {/* Top logo */}
                <div style={{ position:'relative', padding:'18px 18px 0', display:'flex', alignItems:'center', gap: 10 }}>
                  <UberMark size={18} color="#fff"/>
                  <span style={{ width: 1, height: 14, background:'rgba(255,255,255,0.3)' }}/>
                  <span style={{ fontSize: 12, fontWeight: 500 }}>Employee Store</span>
                </div>
                {/* Content */}
                <div style={{ position:'absolute', left: 18, right: 18, bottom: 20 }}>
                  <div style={{ display:'inline-flex', alignItems:'center', gap: 6, padding:'5px 10px', background:'rgba(255,255,255,0.12)', backdropFilter:'blur(8px)', WebkitBackdropFilter:'blur(8px)', borderRadius: 999, fontSize: 10, fontWeight: 500, marginBottom: 14 }}>
                    <span style={{ width: 5, height: 5, borderRadius:'50%', background:'var(--u-eats)' }}/>
                    Uber internal · SSO required
                  </div>
                  <div style={{ fontFamily:'var(--font-display)', fontSize: 26, fontWeight: 700, letterSpacing:'-0.035em', lineHeight: 0.98 }}>
                    Welcome to the<br/>Uber Employee Store.
                  </div>
                  <div style={{ fontSize: 12, opacity: 0.82, lineHeight: 1.45, margin:'12px 0 18px' }}>
                    Official merch, gifting, and program kits for every team at Uber. Sign in with your Uber SSO to get started.
                  </div>
                  <button className="btn btn-block" style={{ background:'#fff', color:'#000', padding: '13px 16px', fontSize: 13, gap: 10 }}>
                    <span style={{ width: 16, height: 16, borderRadius:'50%', border:'2px solid #000', position:'relative', display:'inline-flex', alignItems:'center', justifyContent:'center' }}><span style={{ width: 6, height: 6, borderRadius:'50%', background:'#000' }}/></span>
                    <span>Continue with Uber SSO</span>
                    <span style={{ width: 1, height: 12, background:'rgba(0,0,0,0.15)' }}/>
                    <Icon name="arrow-right" size={14}/>
                  </button>
                  <div style={{ marginTop: 10, fontSize: 10, opacity: 0.6, display:'flex', alignItems:'center', gap: 6 }}>
                    <Icon name="shield" size={11}/>
                    <span>Secured by Okta · auth.uber.com</span>
                  </div>
                </div>
              </div>
            )}
            {i === 1 && (
              <div style={{ height: 'calc(100% - 36px)', overflow:'auto', background:'#000', color:'#fff' }}>
                {/* Header */}
                <div style={{ padding:'14px 18px', display:'flex', alignItems:'center', justifyContent:'space-between', borderBottom:'1px solid rgba(255,255,255,0.08)' }}>
                  <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
                    <UberMark size={16} color="#fff"/>
                    <span style={{ fontSize: 11, fontWeight: 500, opacity: 0.85 }}>Employee Store</span>
                  </div>
                  <span style={{ width: 22, height: 22, borderRadius:'50%', background:'#2a2a2a', display:'inline-flex', alignItems:'center', justifyContent:'center', fontSize: 9, fontWeight: 600 }}>JC</span>
                </div>
                {/* Headline */}
                <div style={{ padding:'22px 18px 10px', textAlign:'center' }}>
                  <div style={{ fontFamily:'var(--font-display)', fontSize: 24, fontWeight: 700, letterSpacing:'-0.035em', lineHeight: 1 }}>One store.<br/>Two ways to order.</div>
                  <div style={{ fontSize: 11, opacity: 0.7, marginTop: 6 }}>Choose how you want to order.</div>
                </div>
                {/* Corporate card */}
                <div style={{ margin:'10px 14px 10px', padding: 16, borderRadius: 14, background:'#0B0B0B', border:'1px solid rgba(255,255,255,0.08)' }}>
                  <div style={{ height: 96, marginBottom: 12, borderRadius: 10, overflow: 'hidden', position: 'relative', background: '#000' }}>
                    <img src={"images/corporate-hero-mobile.png"} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center' }}/>
                  </div>
                  <div style={{ display:'flex', alignItems:'center', gap: 8, marginBottom: 8 }}>
                    <div style={{ width: 28, height: 28, borderRadius: 999, background:'rgba(255,255,255,0.08)', display:'flex', alignItems:'center', justifyContent:'center' }}><Icon name="building" size={13}/></div>
                    <div style={{ fontFamily:'var(--font-display)', fontSize: 15, fontWeight: 700 }}>Corporate order</div>
                  </div>
                  <div style={{ fontSize: 11, lineHeight: 1.4, opacity: 0.7, marginBottom: 10 }}>For teams, programs, events, and bulk orders.</div>
                  <div style={{ display:'flex', alignItems:'center', gap: 6, padding:'5px 9px', background:'rgba(255,255,255,0.06)', border:'1px solid rgba(255,255,255,0.08)', borderRadius: 999, fontSize: 10, marginBottom: 10, width:'fit-content' }}>
                    <Icon name="doc" size={10}/>Integrated with Coupa & Zip
                  </div>
                  <ul style={{ listStyle:'none', padding: 0, margin: 0, display:'grid', gap: 5, marginBottom: 12 }}>
                    {['PO-based ordering','Routed through Coupa / Zip','Approval workflow'].map(b => (
                      <li key={b} style={{ display:'flex', alignItems:'center', gap: 6, fontSize: 10.5 }}>
                        <span style={{ width: 13, height: 13, borderRadius:'50%', background:'rgba(6,193,103,0.2)', color:'var(--u-eats)', display:'inline-flex', alignItems:'center', justifyContent:'center' }}><Icon name="check" size={8}/></span>
                        <span>{b}</span>
                      </li>
                    ))}
                  </ul>
                  <button className="btn btn-block" style={{ background:'#fff', color:'#000', padding:'11px 14px', fontSize: 12 }}>
                    Start a team order <Icon name="arrow-right" size={12}/>
                  </button>
                </div>
                {/* Personal card */}
                <div style={{ margin:'10px 14px 20px', padding: 16, borderRadius: 14, background:'#F6F4EE', color:'#111', border:'1px solid rgba(0,0,0,0.06)' }}>
                  <div style={{ height: 96, marginBottom: 12, borderRadius: 10, overflow: 'hidden', position: 'relative', background: '#EDE8DC' }}>
                    <img src="images/personal-hero-mobile.png" alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center' }}/>
                  </div>
                  <div style={{ display:'flex', alignItems:'center', gap: 8, marginBottom: 8 }}>
                    <div style={{ width: 28, height: 28, borderRadius: 999, background:'rgba(0,0,0,0.06)', display:'flex', alignItems:'center', justifyContent:'center' }}><Icon name="user" size={13}/></div>
                    <div style={{ fontFamily:'var(--font-display)', fontSize: 15, fontWeight: 700 }}>Personal order</div>
                  </div>
                  <div style={{ fontSize: 11, lineHeight: 1.4, color:'rgba(0,0,0,0.65)', marginBottom: 10 }}>For you. Shop and pay with your personal credit card.</div>
                  <ul style={{ listStyle:'none', padding: 0, margin: 0, display:'grid', gap: 5, marginBottom: 12 }}>
                    {['Pay with credit card','Ship to your door','Returns made easy'].map(b => (
                      <li key={b} style={{ display:'flex', alignItems:'center', gap: 6, fontSize: 10.5 }}>
                        <span style={{ width: 13, height: 13, borderRadius:'50%', background:'rgba(6,193,103,0.15)', color:'var(--u-eats)', display:'inline-flex', alignItems:'center', justifyContent:'center' }}><Icon name="check" size={8}/></span>
                        <span>{b}</span>
                      </li>
                    ))}
                  </ul>
                  <button className="btn btn-block" style={{ background:'var(--u-eats)', color:'#000', padding:'11px 14px', fontSize: 12 }}>
                    Shop for yourself <Icon name="arrow-right" size={12}/>
                  </button>
                </div>
              </div>
            )}
            {i === 2 && (
              <div style={{ height: 'calc(100% - 36px)', overflow: 'hidden' }}>
                <div style={{ padding: '14px 18px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--u-line)' }}>
                  <span style={{ fontSize: 20, fontWeight: 800, letterSpacing: '-0.04em' }}>Uber</span>
                  <Icon name="cart" size={20}/>
                </div>
                <div style={{ position: 'relative', background: '#000', color: '#fff', padding: '28px 18px', overflow: 'hidden' }}>
                  {/* Full-bleed hero image */}
                  <img src="images/store-hero.webp" alt="" aria-hidden="true" style={{ position:'absolute', inset: 0, width:'100%', height:'100%', objectFit:'cover', objectPosition:'center 35%' }}/>
                  {/* Gradient overlay for legibility */}
                  <div aria-hidden="true" style={{ position:'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.75) 100%)' }}/>
                  <div style={{ position:'relative' }}>
                    <div style={{ display:'inline-flex', alignItems:'center', gap: 6, padding:'4px 9px', background:'rgba(255,255,255,0.1)', backdropFilter:'blur(8px)', WebkitBackdropFilter:'blur(8px)', borderRadius: 999, fontSize: 10, fontWeight: 500, marginBottom: 12 }}>
                      <span style={{ width: 5, height: 5, borderRadius:'50%', background:'var(--u-eats)' }}/>
                      Now live globally
                    </div>
                    <h2 style={{ fontSize: 26, fontWeight: 700, letterSpacing: '-0.035em', lineHeight: 0.98, margin: 0 }}>The official Uber employee store.</h2>
                    <button className="btn btn-eats btn-block" style={{ marginTop: 20 }}>Shop all<Icon name="arrow-right" size={14}/></button>
                    <button className="btn btn-block" style={{ marginTop: 10, background:'rgba(0,0,0,0.4)', color: '#fff', backdropFilter:'blur(8px)', WebkitBackdropFilter:'blur(8px)', boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.3)' }}>I have an access code</button>
                  </div>
                </div>
                <div style={{ padding: 18 }}>
                  <div style={{ fontSize: 12, color: 'var(--u-text-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 10 }}>Programs & collections</div>
                  {/* ERG collection card — mirrors desktop landing */}
                  <div style={{ borderRadius: 14, overflow: 'hidden', border: '1px solid var(--u-line)', marginBottom: 12 }}>
                    <div style={{ aspectRatio: '3/2', position: 'relative', overflow: 'hidden', background:'#EDE8DC' }}>
                      <img src="images/mobile/erg-card.png" alt="ERG collection" style={{ position:'absolute', inset: 0, width:'100%', height:'100%', objectFit:'cover', display:'block' }}/>
                      <div style={{ position: 'absolute', bottom: 10, left: 12, color: '#111', fontWeight: 700, fontSize: 15, letterSpacing: '-0.02em', textShadow:'0 1px 2px rgba(255,255,255,0.4)' }}>ERG collection</div>
                    </div>
                    <div style={{ padding: 12 }}>
                      <div style={{ fontSize: 11, color: 'var(--u-text-2)', lineHeight: 1.4, marginBottom: 8 }}>Shared co-brandable apparel and bags, plus a plush keychain for each of the 15 ERGs.</div>
                      <div style={{ fontWeight: 600, fontSize: 11, display:'flex', alignItems:'center', gap: 6 }}>Enter ERG store <Icon name="arrow-right" size={11}/></div>
                    </div>
                  </div>
                  {/* Executive tier card */}
                  <div style={{ borderRadius: 14, overflow: 'hidden', border: '1px solid var(--u-line)', marginBottom: 18, background:'#0B0B0B', color:'#fff' }}>
                    <div style={{ aspectRatio: '3/2', position: 'relative', background:'linear-gradient(135deg,#1a1203 0%, #0B0B0B 100%)' }}>
                      <div style={{ position:'absolute', top: 10, left: 12, padding:'3px 8px', borderRadius: 999, fontSize: 9, fontWeight: 600, background:'var(--u-premium-gold)', color:'#1a1203' }}>Presentation-grade</div>
                      <div style={{ position: 'absolute', bottom: 10, left: 12, fontWeight: 700, fontSize: 15, letterSpacing: '-0.02em' }}>Executive & client gifting</div>
                    </div>
                    <div style={{ padding: 12 }}>
                      <div style={{ fontSize: 11, opacity: 0.75, lineHeight: 1.4, marginBottom: 8 }}>Premium materials, presentation-ready packaging.</div>
                      <div style={{ fontWeight: 600, fontSize: 11, display:'flex', alignItems:'center', gap: 6, color:'var(--u-premium-gold)' }}>View executive collection <Icon name="arrow-right" size={11}/></div>
                    </div>
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--u-text-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 10 }}>Browse by category</div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 6 }}>
                    {[
                      { label: 'Apparel', img: 'images/categories/apparel.jpg' },
                      { label: 'Accessories', img: 'images/categories/accessories.jpg' },
                      { label: 'Drinkware', img: 'images/categories/drinkware.jpg' },
                      { label: 'Tech', img: 'images/categories/tech.jpg' },
                    ].map(c => (
                      <div key={c.label}>
                        <div style={{ aspectRatio: '4/5', borderRadius: 10, overflow:'hidden', background:'var(--u-surface-2)' }}>
                          <img src={c.img} alt={c.label} style={{ width:'100%', height:'100%', objectFit:'cover', display:'block' }}/>
                        </div>
                        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginTop: 6 }}>
                          <span style={{ fontSize: 11, fontWeight: 600 }}>{c.label}</span>
                          <Icon name="arrow-right" size={11}/>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            )}
            {i === 3 && (
              <div style={{ height: 'calc(100% - 36px)', overflow: 'hidden', display:'flex', flexDirection:'column' }}>
                <div style={{ padding: '12px 18px', borderBottom: '1px solid var(--u-line)', display: 'flex', alignItems: 'center', gap: 10 }}>
                  <Icon name="chevron-left" size={20}/>
                  <span style={{ fontWeight: 600, fontSize: 15 }}>Apparel</span>
                </div>
                <div style={{ padding: '10px 18px 6px' }}>
                  <div style={{ fontSize: 11, color:'var(--u-text-2)', marginBottom: 8 }}>T-shirts, sweatshirts, outerwear.</div>
                  <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', fontSize: 11 }}>
                    <span style={{ color:'var(--u-text-2)' }}>{window.CATALOG.filter(p => p.cat === 'Apparel').length} items</span>
                    <span style={{ display:'inline-flex', alignItems:'center', gap: 4, color:'var(--u-text)' }}>Sort: Featured <Icon name="chevron-left" size={10} style={{ transform:'rotate(-90deg)' }}/></span>
                  </div>
                </div>
                <div style={{ padding: '6px 18px 10px', display:'flex', gap: 6, overflowX:'auto' }}>
                  {['All brands','All tiers','All sizes'].map((t,ix) => (
                    <span key={t} style={{ padding: '5px 10px', background:'#fff', color:'#000', border:'1px solid var(--u-line-strong)', borderRadius: 999, fontSize: 11, whiteSpace:'nowrap', display:'inline-flex', alignItems:'center', gap: 4 }}>{t} <Icon name="chevron-left" size={9} style={{ transform:'rotate(-90deg)' }}/></span>
                  ))}
                </div>
                <div style={{ padding: 10, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, overflowY:'auto' }}>
                  {window.CATALOG.filter(p => p.cat === 'Apparel').slice(0,4).map(p => (
                    <div key={p.id}>
                      <ProductImage product={p} showLabel={false}/>
                      <div style={{ fontSize: 9, color: 'var(--u-text-3)', letterSpacing: '0.04em', textTransform: 'uppercase', marginTop: 6 }}>{p.cat} · {p.sub}</div>
                      <div style={{ fontSize: 11, marginTop: 2, fontWeight: 500 }}>{p.name}</div>
                      <div style={{ fontSize: 11, fontWeight: 600 }}>${p.price}</div>
                    </div>
                  ))}
                </div>
              </div>
            )}
            {i === 4 && (
              <div style={{ height: 'calc(100% - 36px)', overflow:'auto' }}>
                {/* ERG store header */}
                <div style={{ padding: '14px 18px', display:'flex', alignItems:'center', gap: 10, borderBottom: '1px solid var(--u-line)' }}>
                  <Icon name="chevron-left" size={18}/>
                  <span style={{ fontWeight: 600, fontSize: 14 }}>ERG collection</span>
                </div>
                {/* Hero */}
                <div style={{ background: '#0B0B0B', color: '#fff', padding: '20px 18px 22px' }}>
                  <div style={{ display:'inline-flex', alignItems:'center', gap: 6, padding:'4px 9px', background:'rgba(255,255,255,0.08)', border:'1px solid rgba(255,255,255,0.14)', borderRadius: 999, fontSize: 10, fontWeight: 500, marginBottom: 10 }}>
                    <Icon name="users" size={11}/> 15 ERGs · one collection
                  </div>
                  <div style={{ fontFamily:'var(--font-display)', fontSize: 22, fontWeight: 700, letterSpacing:'-0.035em', lineHeight: 1 }}>
                    One collection.<br/><span style={{ opacity: 0.5 }}>Fifteen communities.</span>
                  </div>
                  <div style={{ fontSize: 11, opacity: 0.72, lineHeight: 1.45, marginTop: 10 }}>
                    Shared co-brandable apparel and bags, plus a plush keychain for each ERG.
                  </div>
                </div>
                {/* Shared apparel */}
                <div style={{ padding: '16px 18px 8px' }}>
                  <div style={{ fontSize: 10, color: 'var(--u-text-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 4 }}>01 · Shared apparel</div>
                  <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 10 }}>Co-brandable tees.</div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                    {window.ERG_CATALOG.filter(p => p.sub === 'Shared apparel').map(p => (
                      <div key={p.id}>
                        <ProductImage product={p} showLabel={false}/>
                        <div style={{ fontSize: 10.5, marginTop: 5, fontWeight: 500, lineHeight: 1.25 }}>{p.name}</div>
                        <div style={{ fontSize: 10, color: 'var(--u-text-2)' }}>${p.price}</div>
                      </div>
                    ))}
                  </div>
                </div>
                {/* Plush grid */}
                <div style={{ padding: '14px 18px 20px' }}>
                  <div style={{ fontSize: 10, color: 'var(--u-text-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 4 }}>03 · Plush collection</div>
                  <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 10 }}>One keychain per ERG.</div>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
                    {window.ERG_CATALOG.filter(p => p.sub === 'Plush keychains').map(p => (
                      <div key={p.id}>
                        <ProductImage product={p} showLabel={false}/>
                        <div style={{ fontSize: 9, marginTop: 4, fontWeight: 500, lineHeight: 1.2 }}>{p.erg}</div>
                        <div style={{ fontSize: 9, color: 'var(--u-text-2)' }}>${p.price}</div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            )}
            {i === 5 && (() => {
              const p = window.ERG_CATALOG.find(x => x.id === 'er-ap-01') || window.CATALOG[0];
              return (
              <div style={{ height: 'calc(100% - 36px)', overflow: 'auto' }}>
                <div style={{ position: 'relative' }}>
                  <ProductImage product={p} showLabel={false}/>
                  <div style={{ position: 'absolute', top: 12, left: 12, width: 32, height: 32, borderRadius:'50%', background:'rgba(255,255,255,0.9)', display:'flex', alignItems:'center', justifyContent:'center' }}><Icon name="chevron-left" size={18}/></div>
                </div>
                <div style={{ padding: 18 }}>
                  <div style={{ fontSize: 9, color: 'var(--u-text-3)', letterSpacing:'0.04em', textTransform: 'uppercase', marginBottom: 8 }}>{p.cat} · {p.sub || 'ERG'} · SKU {p.sku}</div>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight: 700, fontSize: 20, letterSpacing:'-0.02em', lineHeight: 1.05, marginBottom: 8 }}>{p.name}</div>
                  <div style={{ fontWeight: 600, fontSize: 18, marginBottom: 16 }}>${p.price}</div>
                  <div style={{ fontSize: 11, fontWeight: 600, marginBottom: 6 }}>Size</div>
                  <div style={{ display: 'flex', gap: 6, marginBottom: 16 }}>
                    {['XS','S','M','L','XL','XXL'].map((s,ix) => <span key={s} style={{ flex: 1, textAlign:'center', padding: '8px 0', fontSize: 11, fontWeight: ix === 2 ? 600 : 500, background: ix === 2 ? '#000' : '#fff', color: ix === 2 ? '#fff' : '#000', border: '1px solid '+(ix===2 ? '#000' : 'var(--u-line-strong)'), borderRadius: 6 }}>{s}</span>)}
                  </div>
                  <div style={{ display:'flex', gap: 8 }}>
                    <button className="btn btn-primary" style={{ flex: 1, padding: '12px 16px', fontSize: 13 }}>Add to cart</button>
                    <button className="btn btn-outline" style={{ padding: '12px 14px' }}><Icon name="heart" size={16}/></button>
                  </div>
                </div>
              </div>
              );
            })()}
            {i === 6 && (
              <div style={{ height: 'calc(100% - 36px)', overflow: 'hidden' }}>
                <div style={{ padding: '12px 18px', borderBottom: '1px solid var(--u-line)', display:'flex', alignItems:'center', gap: 10 }}><Icon name="chevron-left" size={20}/><span style={{ fontWeight: 600 }}>Cart (2)</span></div>
                {[window.ERG_CATALOG.find(x => x.id === 'er-ap-01'), window.ERG_CATALOG.find(x => x.id === 'er-pl-pride')].filter(Boolean).map(p => (
                  <div key={p.id} style={{ padding: '14px 18px', borderBottom: '1px solid var(--u-line)', display:'grid', gridTemplateColumns: '56px 1fr auto', gap: 10, alignItems:'center' }}>
                    <div style={{ width: 56 }}><ProductImage product={p} showLabel={false}/></div>
                    <div>
                      <div style={{ fontSize: 12, fontWeight: 500 }}>{p.name}</div>
                      <div style={{ fontSize: 10, color:'var(--u-text-2)' }}>{p.sizes ? 'Size M · Qty 1' : 'Qty 1'}</div>
                    </div>
                    <div style={{ fontWeight: 600, fontSize: 13 }}>${p.price}</div>
                  </div>
                ))}
                <div style={{ padding: 18 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, padding: '4px 0' }}><span style={{ color:'var(--u-text-2)' }}>Subtotal</span><span>$32.00</span></div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, padding: '4px 0' }}><span style={{ color:'var(--u-text-2)' }}>Shipping</span><span>Free</span></div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 15, fontWeight: 700, padding: '10px 0', borderTop: '1px solid var(--u-line)', marginTop: 6 }}><span>Total</span><span>$34.72</span></div>
                  <button className="btn btn-primary btn-block" style={{ marginTop: 10 }}>Checkout <Icon name="arrow-right" size={14}/></button>
                  <div style={{ fontSize: 10, color: 'var(--u-text-2)', marginTop: 10, display:'flex', gap: 5, alignItems:'center', justifyContent:'center' }}>
                    <Icon name="lock" size={10}/> Secure checkout
                  </div>
                </div>
              </div>
            )}
            {i === 7 && (
              <div style={{ height: 'calc(100% - 36px)', overflow: 'auto' }}>
                <div style={{ padding: '12px 18px', borderBottom: '1px solid var(--u-line)', display:'flex', alignItems:'center', gap: 10 }}><Icon name="chevron-left" size={20}/><span style={{ fontWeight: 600 }}>Payment</span></div>
                <div style={{ padding: 18 }}>
                  <label className="label" style={{ fontSize: 10 }}>Ship to</label>
                  <div style={{ padding: 12, background: '#F6F6F6', borderRadius: 6, fontSize: 12, marginBottom: 14 }}>Jordan Chen<br/>1725 3rd St, SF CA 94158</div>
                  <div style={{ padding: 10, background: 'var(--u-eats-tint)', borderRadius: 6, fontSize: 11, marginBottom: 14, display:'flex', gap: 8, alignItems:'center' }}>
                    <Icon name="check" size={12} style={{ color: 'var(--u-eats-dark)' }}/>
                    Employee discount (25%) applied automatically.
                  </div>
                  <label className="label" style={{ fontSize: 10 }}>Card number</label>
                  <input className="input" value="•••• •••• •••• 4242" readOnly style={{ fontSize: 13 }}/>
                  <div style={{ display:'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 10 }}>
                    <div><label className="label" style={{ fontSize: 10 }}>Expiration</label><input className="input" value="09/28" readOnly style={{ fontSize: 13 }}/></div>
                    <div><label className="label" style={{ fontSize: 10 }}>CVC</label><input className="input" value="•••" readOnly style={{ fontSize: 13 }}/></div>
                  </div>
                  <button className="btn btn-primary btn-block" style={{ marginTop: 16 }}>Place order · $34.72</button>
                </div>
              </div>
            )}
            {i === 8 && (
              <div style={{ height: 'calc(100% - 36px)', padding: 20, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', overflow:'auto' }}>
                <div style={{ width: 48, height: 48, borderRadius: 24, background: 'var(--u-eats)', display:'flex', alignItems:'center', justifyContent:'center', marginTop: 20, marginBottom: 16 }}><Icon name="check" size={22} style={{ color:'#000' }}/></div>
                <div style={{ fontFamily:'var(--font-display)', fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>Order placed.</div>
                <div style={{ fontSize: 11, color: 'var(--u-text-2)', marginTop: 6, marginBottom: 16 }}>UB-482139<br/>We've emailed a receipt to jordan.chen@uber.com.</div>
                <div style={{ width: '100%', background: '#F6F6F6', borderRadius: 8, padding: 12, textAlign: 'left', fontSize: 10.5, marginBottom: 14 }}>
                  <div style={{ fontWeight: 600, marginBottom: 6, fontSize: 11 }}>What's next</div>
                  <div style={{ color:'var(--u-text-2)', lineHeight: 1.6 }}>✓ Brand Desk approved<br/>✓ Card charged<br/>· Ships in 2–3 days<br/>· Survey in 48h post-delivery</div>
                </div>
                <button className="btn btn-primary btn-block" style={{ fontSize: 12, padding:'11px 14px' }}>Continue shopping</button>
                <button className="btn btn-secondary btn-block" style={{ fontSize: 12, padding:'11px 14px', marginTop: 8 }}>Preview post-delivery survey</button>
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
};
window.MobileFlow = MobileFlow;