// ========== MOBILE PREVIEW ==========
const MobilePage = ({ nav }) => {
  const [tab, setTab] = React.useState('explore');
  return (
    <div className="fade-in phone-wrap">
      <div className="phone">
        <div className="phone-screen">
          <div className="phone-notch"/>
          <div className="phone-status">
            <span>9:41</span>
            <span style={{display:'flex', gap: 6, alignItems:'center', fontSize: 12}}>
              <span>●●●●</span>
              <span>100%</span>
            </span>
          </div>
          <div className="phone-body">
            {tab === 'explore' && <MobExplore/>}
            {tab === 'bookings' && <MobBookings/>}
            {tab === 'msg' && <MobMessages/>}
            {tab === 'shop' && <MobShop/>}
            {tab === 'profile' && <MobProfile/>}
          </div>
          <div className="mob-nav">
            {[
              {k:'explore', l:'Explore', i:'search'},
              {k:'bookings', l:'Bookings', i:'calendar'},
              {k:'msg', l:'Messages', i:'msg'},
              {k:'shop', l:'Shop', i:'shop'},
              {k:'profile', l:'Profile', i:'user'},
            ].map(t => (
              <div key={t.k} className={`mob-tab ${tab === t.k ? 'active' : ''}`} onClick={() => setTab(t.k)}>
                <div className="ico-wrap"><Icon name={t.i} size={20} stroke={tab === t.k ? 2 : 1.7}/></div>
                {t.l}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

const MobExplore = () => (
  <div className="mob-page">
    <div className="mob-greet">
      <div>
        <div className="nm">Good morning</div>
        <div className="hi">Chloé <span style={{fontStyle:'italic', color:'var(--primary-deep)'}}>✦</span></div>
      </div>
      <div className="placeholder-av" style={{width: 40, height: 40}}/>
    </div>
    <div className="mob-search"><Icon name="search" size={16}/> Hair, nails, makeup…</div>
    <div className="mob-cat-row">
      {CATEGORIES.map((c, i) => <div key={c.id} className={`mob-cat-chip ${i === 1 ? 'active' : ''}`}>{c.label}</div>)}
    </div>
    <div style={{fontFamily:'Fraunces, serif', fontSize: 22, fontWeight: 500, margin:'10px 0 12px'}}>Near you</div>
    {PROVIDERS.slice(0, 3).map(p => (
      <div key={p.id} className="mob-provider-card">
        <div className="mob-provider-cover">
          <Ph tone={p.tone} style={{fontSize: 10}}>{p.name}</Ph>
          <button style={{position:'absolute', top: 10, right: 10, width: 32, height: 32, borderRadius:'50%', background:'rgba(255,255,255,0.9)', display:'grid', placeItems:'center', border:'none'}}>
            <Icon name="heart" size={14}/>
          </button>
        </div>
        <div className="mob-provider-body">
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
            <div style={{fontWeight: 600, fontSize: 14}}>{p.name}</div>
            <div style={{fontSize: 12}}><Icon name="star" size={11}/> {p.rating}</div>
          </div>
          <div style={{fontSize: 12, color:'var(--muted)', marginTop: 3}}>{p.tagline} · {p.distance}</div>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginTop: 10}}>
            <div style={{fontFamily:'Fraunces, serif', fontSize: 18, fontWeight: 500}}>from ${p.priceMin}</div>
            <button className="btn btn-brand btn-sm">Book</button>
          </div>
        </div>
      </div>
    ))}
  </div>
);

const MobBookings = () => (
  <div className="mob-page">
    <h1>Bookings</h1>
    <div style={{display:'flex', gap: 6, marginBottom: 16}}>
      {['Upcoming','Completed','Cancelled'].map((t, i) => (
        <button key={t} className={`chip ${i === 0 ? 'active' : ''}`} style={{fontSize: 12}}>{t}</button>
      ))}
    </div>
    {BOOKINGS.filter(b => b.status === 'upcoming').map(b => (
      <div key={b.id} style={{background:'#fff', borderRadius: 16, padding: 14, marginBottom: 10, border:'1px solid var(--line)', display:'flex', gap: 12}}>
        <div style={{width: 54, textAlign:'center', background:'var(--sand-2)', borderRadius: 10, padding: 8}}>
          <div style={{fontSize: 9.5, fontWeight: 700, color:'var(--muted)'}}>{b.date}</div>
          <div style={{fontFamily:'Fraunces, serif', fontSize: 22, fontWeight: 500, lineHeight: 1, marginTop: 2}}>{b.day}</div>
        </div>
        <div style={{flex: 1}}>
          <div style={{fontWeight: 600, fontSize: 13.5}}>{b.service}</div>
          <div style={{fontSize: 11.5, color:'var(--muted)', marginTop: 2}}>with {b.providerName}</div>
          <div style={{fontSize: 12, marginTop: 6, display:'flex', alignItems:'center', gap: 6}}>
            <Icon name="clock" size={11}/> {b.time}
          </div>
        </div>
        <div style={{fontFamily:'Fraunces, serif', fontSize: 18, fontWeight: 500, alignSelf:'center'}}>${b.price}</div>
      </div>
    ))}
  </div>
);

const MobMessages = () => (
  <div className="mob-page">
    <h1>Messages</h1>
    <div className="mob-search"><Icon name="search" size={16}/> Search</div>
    {CONVERSATIONS.slice(0, 5).map(c => (
      <div key={c.id} style={{display:'flex', gap: 12, padding:'12px 0', borderBottom:'1px solid var(--line)'}}>
        <div style={{width: 44, height: 44, borderRadius:'50%', background:'var(--grad-coral)', position:'relative', flexShrink: 0}}>
          {c.online && <div style={{position:'absolute', bottom: 0, right: 0, width: 11, height: 11, borderRadius:'50%', background:'var(--teal)', border:'2px solid #fff'}}/>}
        </div>
        <div style={{flex: 1, minWidth: 0}}>
          <div style={{display:'flex', justifyContent:'space-between'}}>
            <div style={{fontWeight: 600, fontSize: 13.5}}>{c.name}</div>
            <div style={{fontSize: 11, color:'var(--muted)'}}>{c.time}</div>
          </div>
          <div style={{fontSize: 12.5, color: c.unread ? 'var(--ink)' : 'var(--muted)', fontWeight: c.unread ? 500 : 400, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', marginTop: 2}}>{c.last}</div>
        </div>
        {c.unread > 0 && <div style={{width: 8, height: 8, background:'var(--coral)', borderRadius:'50%', alignSelf:'center'}}/>}
      </div>
    ))}
  </div>
);

const MobShop = () => (
  <div className="mob-page">
    <h1>Shop</h1>
    <div className="mob-search"><Icon name="search" size={16}/> Products, sellers...</div>
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10}}>
      {PRODUCTS.slice(0, 6).map(p => (
        <div key={p.id} style={{background:'#fff', borderRadius: 14, overflow:'hidden', border:'1px solid var(--line)'}}>
          <div style={{aspectRatio: 1, position:'relative'}}>
            <Ph tone={p.tone} style={{fontSize: 9}}>{p.name.split(' ').slice(0,2).join(' ')}</Ph>
            {p.sale && <div style={{position:'absolute', top: 8, left: 8, background:'var(--coral)', color:'#fff', padding:'2px 6px', borderRadius: 999, fontSize: 9, fontWeight: 700}}>{p.sale}</div>}
          </div>
          <div style={{padding: 10}}>
            <div style={{fontSize: 10, color:'var(--muted)'}}>{p.seller}</div>
            <div style={{fontSize: 11.5, fontWeight: 500, marginTop: 2, lineHeight: 1.3, height: 28, overflow:'hidden'}}>{p.name}</div>
            <div style={{fontFamily:'Fraunces, serif', fontSize: 16, fontWeight: 500, marginTop: 6}}>${p.price}</div>
          </div>
        </div>
      ))}
    </div>
  </div>
);

const MobProfile = () => (
  <div className="mob-page">
    <div style={{textAlign:'center', padding:'20px 0 24px'}}>
      <div className="placeholder-av" style={{width: 88, height: 88, margin:'0 auto'}}/>
      <div style={{fontFamily:'Fraunces, serif', fontSize: 24, fontWeight: 500, marginTop: 12}}>Chloé Alexander</div>
      <div style={{fontSize: 12.5, color:'var(--muted)'}}>Member since 2024 · Kingston, JM</div>
    </div>
    <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap: 8, marginBottom: 20}}>
      {[['Bookings','14'],['Reviews','9'],['Saved','22']].map(([l,v]) => (
        <div key={l} style={{background:'#fff', borderRadius: 14, padding: 12, textAlign:'center', border:'1px solid var(--line)'}}>
          <div style={{fontFamily:'Fraunces, serif', fontSize: 22, fontWeight: 500}}>{v}</div>
          <div style={{fontSize: 11, color:'var(--muted)'}}>{l}</div>
        </div>
      ))}
    </div>
    {['My orders','Favorites','Payment methods','Addresses','Referrals','Help & support','Sign out'].map(x => (
      <div key={x} style={{background:'#fff', padding:'14px 16px', borderRadius: 12, marginBottom: 6, border:'1px solid var(--line)', display:'flex', justifyContent:'space-between', alignItems:'center', fontSize: 13.5, fontWeight: 500}}>
        {x} <Icon name="chevR" size={14}/>
      </div>
    ))}
  </div>
);

// ========== CHECKOUT FLOW ==========
const CheckoutPage = ({ nav, cart, setCart, toast, fireConfetti }) => {
  const [step, setStep] = React.useState(0);
  const subtotal = cart.reduce((s, i) => s + i.price * i.qty, 0);
  const shipping = subtotal > 0 ? 8 : 0;
  const tax = Math.round(subtotal * 0.15);
  const total = subtotal + shipping + tax;
  const [addressId, setAddressId] = React.useState(0);

  const placeOrder = () => {
    setStep(3);
    fireConfetti();
    setTimeout(() => setCart([]), 400);
  };

  return (
    <div className="fade-in">
      <div className="container-narrow">
        <div className="page-head">
          <div>
            <div className="eyebrow">Marketplace</div>
            <h1><span className="i">Checkout</span></h1>
          </div>
          <button className="btn btn-ghost" onClick={() => nav('marketplace')}>← Keep shopping</button>
        </div>

        <div className="checkout-steps">
          {['Shipping','Payment','Review','Confirmation'].map((s, i) => (
            <div key={s} className={`checkout-step ${i === step ? 'active' : i < step ? 'done' : ''}`}>
              <div className="n">{i < step ? '✓' : i + 1}</div>{s}
            </div>
          ))}
        </div>

        <div className="checkout-layout">
          <div>
            <div className="checkout-card">
              {step === 0 && <>
                <h2>Where to?</h2>
                <p style={{color:'var(--muted)', marginBottom: 20}}>Pick a saved address or add a new one.</p>
                {[
                  {n:'Chloé Alexander', a:'14 Barbican Road, Kingston 6, JM', p:'+1 (876) 555-0142', tag:'Home'},
                  {n:'Chloé Alexander', a:'Suite 401, 7 Oxford Rd, New Kingston, JM', p:'+1 (876) 555-0142', tag:'Work'},
                ].map((a, i) => (
                  <div key={i} className={`address-option ${addressId === i ? 'active' : ''}`} onClick={() => setAddressId(i)}>
                    <div className="radio"/>
                    <div style={{flex: 1}}>
                      <div style={{display:'flex', alignItems:'center', gap: 8}}>
                        <span style={{fontWeight: 600, fontSize: 14}}>{a.n}</span>
                        <span className="badge badge-indigo">{a.tag}</span>
                      </div>
                      <div style={{fontSize: 13, color:'var(--ink-2)', marginTop: 4}}>{a.a}</div>
                      <div style={{fontSize: 12, color:'var(--muted)', marginTop: 2}}>{a.p}</div>
                    </div>
                  </div>
                ))}
                <button className="btn btn-outline btn-sm" style={{marginTop: 8}}><Icon name="plus" size={12}/> Add new address</button>

                <h3 style={{fontFamily:'Fraunces, serif', fontSize: 20, margin: '28px 0 14px', fontWeight: 500}}>Delivery speed</h3>
                {[
                  {n:'Standard', d:'3–5 business days', p:'$8.00'},
                  {n:'Express', d:'1–2 business days', p:'$16.00'},
                ].map((o, i) => (
                  <div key={i} className={`address-option ${i === 0 ? 'active' : ''}`}>
                    <div className="radio"/>
                    <div style={{flex: 1, display:'flex', justifyContent:'space-between'}}>
                      <div>
                        <div style={{fontWeight: 600, fontSize: 14}}>{o.n}</div>
                        <div style={{fontSize: 12, color:'var(--muted)', marginTop: 2}}>{o.d}</div>
                      </div>
                      <div style={{fontFamily:'Fraunces, serif', fontSize: 17, fontWeight: 500}}>{o.p}</div>
                    </div>
                  </div>
                ))}

                <button className="btn btn-brand btn-lg" style={{width:'100%', marginTop: 24}} onClick={() => setStep(1)}>
                  Continue to payment <Icon name="arrowRight" size={14}/>
                </button>
              </>}

              {step === 1 && <>
                <h2>Payment</h2>
                <p style={{color:'var(--muted)', marginBottom: 20}}>All payments are secured by Stripe.</p>
                <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 8, marginBottom: 20}}>
                  {[
                    {n:'Card', g:'💳'},
                    {n:'Apple Pay', g:''},
                    {n:'Google Pay', g:'G'},
                  ].map((m, i) => (
                    <button key={m.n} className={i === 0 ? 'btn btn-primary' : 'btn btn-outline'}>{m.n}</button>
                  ))}
                </div>
                <div className="field"><label>Card number</label><input defaultValue="4242 4242 4242 4242"/></div>
                <div className="editor-row-2">
                  <div className="field"><label>Expiry</label><input defaultValue="04/29"/></div>
                  <div className="field"><label>CVC</label><input defaultValue="123"/></div>
                </div>
                <div className="field"><label>Name on card</label><input defaultValue="Chloé Alexander"/></div>
                <label style={{display:'flex', gap: 10, alignItems:'center', fontSize: 13, padding: '8px 0'}}>
                  <input type="checkbox" defaultChecked/>
                  Save this card for future purchases
                </label>
                <div style={{display:'flex', gap: 8, marginTop: 20}}>
                  <button className="btn btn-outline" onClick={() => setStep(0)}>Back</button>
                  <button className="btn btn-brand" style={{flex: 1}} onClick={() => setStep(2)}>Review order</button>
                </div>
              </>}

              {step === 2 && <>
                <h2>Review & place order</h2>
                <p style={{color:'var(--muted)', marginBottom: 20}}>Almost there.</p>
                <div style={{padding: 16, background:'var(--sand)', borderRadius: 12, marginBottom: 14}}>
                  <div className="eyebrow">Shipping to</div>
                  <div style={{fontWeight: 500, fontSize: 14, marginTop: 4}}>Chloé Alexander · 14 Barbican Road, Kingston 6</div>
                  <div style={{fontSize: 12, color:'var(--muted)'}}>Standard · 3–5 business days</div>
                </div>
                <div style={{padding: 16, background:'var(--sand)', borderRadius: 12, marginBottom: 14}}>
                  <div className="eyebrow">Payment</div>
                  <div style={{fontWeight: 500, fontSize: 14, marginTop: 4}}>Visa ending 4242</div>
                </div>
                <div className="eyebrow" style={{marginBottom: 10}}>Items ({cart.length})</div>
                {cart.length === 0 ? (
                  <div style={{padding: 20, textAlign:'center', color:'var(--muted)'}}>Cart is empty. <span onClick={() => nav('marketplace')} style={{color:'var(--primary-deep)', cursor:'pointer', textDecoration:'underline'}}>browse</span></div>
                ) : cart.map(i => (
                  <div key={i.id} style={{display:'flex', gap: 12, padding:'10px 0', borderBottom:'1px solid var(--line)'}}>
                    <div style={{width: 48, height: 48, borderRadius: 8, overflow:'hidden'}}><Ph tone={i.tone} style={{fontSize: 8}}>i</Ph></div>
                    <div style={{flex: 1, fontSize: 13}}>{i.name} <span style={{color:'var(--muted)'}}>× {i.qty}</span></div>
                    <div style={{fontFamily:'Fraunces, serif', fontSize: 16, fontWeight: 500}}>${(i.price * i.qty).toFixed(2)}</div>
                  </div>
                ))}
                <div style={{display:'flex', gap: 8, marginTop: 24}}>
                  <button className="btn btn-outline" onClick={() => setStep(1)}>Back</button>
                  <button className="btn btn-brand" style={{flex: 1}} onClick={placeOrder} disabled={cart.length === 0}>
                    Place order · ${total.toFixed(2)}
                  </button>
                </div>
              </>}

              {step === 3 && <>
                <div style={{textAlign:'center', padding: '20px 0 10px'}}>
                  <div style={{width: 80, height: 80, borderRadius:'50%', background:'var(--grad-card)', margin:'0 auto 20px', display:'grid', placeItems:'center', boxShadow:'0 20px 40px -10px rgba(88,34,200,0.4)'}}>
                    <Icon name="check" size={36} stroke={2.5}/>
                  </div>
                  <div className="eyebrow" style={{color:'var(--teal)'}}>Order confirmed</div>
                  <h2 style={{fontSize: 42, marginTop: 8}}>Thank you, <span style={{fontStyle:'italic'}}>Chloé</span>!</h2>
                  <p style={{fontSize: 16, color:'var(--ink-2)', marginTop: 8}}>Order #CG-{Math.floor(Math.random() * 90000 + 10000)} is on its way.</p>
                </div>
                <div style={{background:'var(--sand)', borderRadius: 14, padding: 20, marginTop: 16}}>
                  <div style={{display:'flex', justifyContent:'space-between', fontSize: 13}}>
                    <span>Estimated delivery</span>
                    <strong>Apr 24 – Apr 27</strong>
                  </div>
                  <div style={{display:'flex', justifyContent:'space-between', fontSize: 13, marginTop: 6}}>
                    <span>Tracking</span>
                    <strong>CG-{Math.floor(Math.random() * 900000 + 100000)}</strong>
                  </div>
                </div>
                <div style={{display:'flex', gap: 8, marginTop: 24}}>
                  <button className="btn btn-outline" style={{flex: 1}} onClick={() => nav('order-tracking')}>Track order</button>
                  <button className="btn btn-brand" style={{flex: 1}} onClick={() => nav('marketplace')}>Keep shopping</button>
                </div>
              </>}
            </div>
          </div>

          {/* Order summary rail */}
          <div>
            <div className="checkout-card" style={{padding: 24, position:'sticky', top: 100}}>
              <div className="eyebrow">Your order</div>
              <div style={{margin:'14px 0', maxHeight: 240, overflowY:'auto'}}>
                {(cart.length === 0 ? [{id:'demo', name:'Hibiscus Hair Oil', tone:'coral', qty: 1, price: 28}] : cart).map(i => (
                  <div key={i.id} style={{display:'flex', gap: 10, alignItems:'center', padding:'8px 0'}}>
                    <div style={{width: 40, height: 40, borderRadius: 8, overflow:'hidden', flexShrink: 0}}>
                      <Ph tone={i.tone} style={{fontSize: 8}}>i</Ph>
                    </div>
                    <div style={{flex: 1, fontSize: 12.5}}>{i.name}</div>
                    <div style={{fontSize: 13, fontWeight: 500}}>${(i.price * i.qty).toFixed(2)}</div>
                  </div>
                ))}
              </div>
              <div className="divider"/>
              <div style={{margin:'14px 0'}}>
                {[['Subtotal', subtotal], ['Shipping', shipping], ['Tax (GCT 15%)', tax]].map(([l, v]) => (
                  <div key={l} style={{display:'flex', justifyContent:'space-between', fontSize: 13, padding:'3px 0'}}>
                    <span style={{color:'var(--muted)'}}>{l}</span>
                    <span>${v.toFixed(2)}</span>
                  </div>
                ))}
              </div>
              <div className="divider"/>
              <div style={{display:'flex', justifyContent:'space-between', padding:'14px 0 4px'}}>
                <span style={{fontSize: 14, fontWeight: 600}}>Total</span>
                <span style={{fontFamily:'Fraunces, serif', fontSize: 28, fontWeight: 500, letterSpacing:'-0.02em'}}>${total.toFixed(2)}</span>
              </div>
              <div style={{fontSize: 11.5, color:'var(--muted)', marginTop: 8, display:'flex', alignItems:'center', gap: 6}}>
                <Icon name="verified" size={12}/> Secured by Stripe
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

// ========== ORDER TRACKING ==========
const OrderTrackingPage = ({ nav }) => {
  const [currentStep, setCurrentStep] = React.useState(2);
  const steps = [
    { k: 'paid', t: 'Payment received', d: 'Apr 21 · 11:42 AM' },
    { k: 'processing', t: 'Seller preparing order', d: 'Apr 21 · 2:18 PM · Island Apothecary' },
    { k: 'shipped', t: 'Shipped', d: 'Apr 22 · 9:30 AM · JamPost #CG-483291' },
    { k: 'out', t: 'Out for delivery', d: 'Expected Apr 24' },
    { k: 'delivered', t: 'Delivered', d: 'Awaiting arrival' },
  ];

  return (
    <div className="fade-in">
      <div className="container-narrow">
        <div className="page-head">
          <div>
            <div className="eyebrow">Order #CG-48291</div>
            <h1>Track <span className="i">order</span></h1>
          </div>
          <div style={{display:'flex', gap: 8}}>
            <button className="btn btn-outline btn-sm">Invoice</button>
            <button className="btn btn-outline btn-sm"><Icon name="msg" size={13}/> Contact seller</button>
          </div>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'1fr 360px', gap: 28, paddingBottom: 80}}>
          <div>
            <div className="checkout-card" style={{padding: 28, marginBottom: 20}}>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom: 8}}>
                <div>
                  <div className="eyebrow">Status</div>
                  <h2 style={{fontFamily:'Fraunces, serif', fontSize: 32, margin: '6px 0 0', fontWeight: 500, letterSpacing:'-0.02em'}}>
                    <span style={{fontStyle:'italic', color:'var(--primary-deep)'}}>Shipped</span>, arriving Apr 24
                  </h2>
                </div>
                <div style={{display:'flex', gap: 6}}>
                  <button onClick={() => setCurrentStep(Math.max(0, currentStep - 1))} className="icon-btn" style={{width: 34, height: 34}}>−</button>
                  <button onClick={() => setCurrentStep(Math.min(4, currentStep + 1))} className="icon-btn" style={{width: 34, height: 34}}>+</button>
                </div>
              </div>
              <div style={{fontSize: 13, color:'var(--muted)', marginBottom: 16}}>
                Use the + / − buttons to simulate order progress.
              </div>
              <div className="track-steps">
                {steps.map((s, i) => (
                  <div key={s.k} className={`track-step ${i < currentStep ? 'done' : i === currentStep ? 'active' : ''}`}>
                    <div className="dot"/>
                    <div className="t">{s.t}</div>
                    <div className="d">{s.d}</div>
                  </div>
                ))}
              </div>
            </div>

            <div className="checkout-card" style={{padding: 28}}>
              <div className="eyebrow" style={{marginBottom: 14}}>Items in this order</div>
              {[
                {n:'Hibiscus Hair Oil — 120ml', s:'Island Apothecary', t:'coral', p: 28, q: 2},
                {n:'Silk Bonnet — Hibiscus Print', s:'Ocean Ritual', t:'rose', p: 32, q: 1},
              ].map((it, i) => (
                <div key={i} style={{display:'flex', gap: 14, padding:'14px 0', borderTop: i > 0 ? '1px solid var(--line)' : 'none', alignItems:'center'}}>
                  <div style={{width: 68, height: 68, borderRadius: 12, overflow:'hidden', flexShrink: 0}}>
                    <Ph tone={it.t} style={{fontSize: 9}}>img</Ph>
                  </div>
                  <div style={{flex: 1}}>
                    <div style={{fontSize: 11.5, color:'var(--muted)'}}>{it.s}</div>
                    <div style={{fontWeight: 500, fontSize: 14, marginTop: 2}}>{it.n}</div>
                    <div style={{fontSize: 12, color:'var(--muted)', marginTop: 4}}>Qty {it.q}</div>
                  </div>
                  <div style={{fontFamily:'Fraunces, serif', fontSize: 20, fontWeight: 500}}>${(it.p * it.q).toFixed(2)}</div>
                </div>
              ))}
            </div>
          </div>

          <div>
            <div className="checkout-card" style={{padding: 22, marginBottom: 16, position:'sticky', top: 100}}>
              <div className="eyebrow">Shipping to</div>
              <div style={{fontSize: 14, fontWeight: 500, marginTop: 6}}>Chloé Alexander</div>
              <div style={{fontSize: 13, color:'var(--ink-2)', lineHeight: 1.5, marginTop: 4}}>14 Barbican Road<br/>Kingston 6, JM</div>

              <div style={{height: 140, borderRadius: 12, overflow:'hidden', marginTop: 14, position:'relative'}}>
                <div className="map-canvas" style={{borderRadius: 12}}>
                  <div className="map-pin active" style={{left:'65%', top:'55%'}}>
                    <div className="p">Delivery</div>
                  </div>
                  <div className="map-pin" style={{left:'25%', top:'35%'}}>
                    <div className="p">Package</div>
                  </div>
                  <svg style={{position:'absolute', inset: 0}}>
                    <path d="M 30% 38% Q 50% 30%, 65% 52%" fill="none" stroke="var(--ink)" strokeWidth="1.5" strokeDasharray="3 3"/>
                  </svg>
                </div>
              </div>

              <div className="divider" style={{margin:'16px 0'}}/>
              <div className="eyebrow" style={{marginBottom: 8}}>Order total</div>
              {[['Subtotal','$88.00'],['Shipping','$8.00'],['Tax','$14.40']].map(([l,v]) => (
                <div key={l} style={{display:'flex', justifyContent:'space-between', fontSize: 12.5, padding:'3px 0'}}>
                  <span style={{color:'var(--muted)'}}>{l}</span><span>{v}</span>
                </div>
              ))}
              <div style={{display:'flex', justifyContent:'space-between', marginTop: 8, paddingTop: 12, borderTop:'1px solid var(--line)'}}>
                <span style={{fontWeight: 600, fontSize: 14}}>Total</span>
                <span style={{fontFamily:'Fraunces, serif', fontSize: 22, fontWeight: 500}}>$110.40</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { MobilePage, CheckoutPage, OrderTrackingPage });