// pages-cart-checkout.jsx — Cart drawer, checkout, confirmation

function CartDrawer({ open, items, onClose, onInc, onDec, onCheckout, onAdd, onOpen }) {
  if (!open) return null;
  const subtotal = items.reduce((s, i) => s + i.price * i.qty, 0);

  // "People also bought" — products from same brands/blends as cart items, excluding what's already in cart
  const crossSell = React.useMemo(() => {
    if (!items.length) return [];
    const inCart = new Set(items.map(i => i.sku));
    const brands = new Set(items.map(i => i.brand));
    const blends = new Set(items.map(i => i.blend));
    const all = window.PRODUCTS || [];
    const sameBrand = all.filter(p => !inCart.has(p.sku) && brands.has(p.brand));
    const sameBlend = all.filter(p => !inCart.has(p.sku) && !brands.has(p.brand) && blends.has(p.blend));
    return [...sameBrand, ...sameBlend].slice(0, 3);
  }, [items]);

  return (
    <>
      <div className="drawer-scrim" onClick={onClose}/>
      <aside className="drawer">
        <header>
          <h3>Your cart</h3>
          <button className="icon-btn" onClick={onClose} style={{color:'var(--bone)'}}><i data-lucide="x"></i></button>
        </header>
        <div className="body">
          {items.length === 0 && (
            <div style={{textAlign:'center', padding:'40px 0', opacity:.7}}>
              <img src="assets/skull-icon.png" alt="" style={{height: 120, opacity:.5, transform:'rotate(-12deg)'}}/>
              <p style={{color:'var(--fg-3)', fontFamily:'var(--font-ui)', marginTop: 20}}>Empty. Go grab a carton.</p>
              <button className="btn btn-primary" style={{marginTop: 16}} onClick={onClose}>Browse cartons</button>
            </div>
          )}
          {items.map((i) => (
            <div className="line" key={i.sku}>
              <div className="ph">
                <img
                  src={i.image_url || 'assets/skull-icon.png'}
                  alt={i.name}
                  style={i.image_url ? {width:'92%', height:'92%', objectFit:'contain'} : undefined}
                />
              </div>
              <div>
                <div className="name">{i.name}</div>
                <div className="sub">{i.brand} · {i.blend}</div>
                <div className="qty" style={{marginTop:6}}>
                  <button onClick={()=>onDec(i)}>−</button>
                  <span>{i.qty}</span>
                  <button onClick={()=>onInc(i)}>+</button>
                </div>
              </div>
              <div className="price">${(i.price * i.qty).toFixed(2)}</div>
            </div>
          ))}

          {crossSell.length > 0 && (
            <div style={{marginTop: 20, paddingTop: 18, borderTop: '1px dashed var(--ink-2)'}}>
              <div style={{
                fontFamily:'var(--font-ui)', fontWeight:700, letterSpacing:'.12em',
                textTransform:'uppercase', fontSize:11, color:'var(--fg-3)', marginBottom: 10
              }}>
                ★ People also bought
              </div>
              {crossSell.map(p => (
                <div key={p.sku} className="line" style={{cursor:'pointer'}}>
                  <div className="ph" onClick={() => { onClose && onClose(); onOpen && onOpen(p); }}>
                    <img
                      src={p.image_url || 'assets/skull-icon.png'}
                      alt={p.name}
                      loading="lazy" decoding="async"
                      style={p.image_url ? {width:'92%', height:'92%', objectFit:'contain'} : undefined}
                    />
                  </div>
                  <div onClick={() => { onClose && onClose(); onOpen && onOpen(p); }}>
                    <div className="name">{p.name}</div>
                    <div className="sub">{p.brand} · {p.blend}</div>
                    <div style={{fontFamily:'var(--font-mono)', fontSize: 13, color:'var(--acid)', marginTop: 4, fontWeight: 700}}>
                      ${p.price.toFixed(2)}
                    </div>
                  </div>
                  <button
                    className="btn btn-ghost"
                    style={{padding:'6px 10px', fontSize:11, alignSelf:'center'}}
                    disabled={p.stock === 'out'}
                    onClick={(e) => { e.stopPropagation(); onAdd && onAdd(p); }}
                  >
                    {p.stock === 'out' ? '✗' : '+ Add'}
                  </button>
                </div>
              ))}
            </div>
          )}
        </div>
        <div className="footer">
          <div style={{display:'flex', justifyContent:'space-between', marginBottom: 8}}>
            <span style={{fontFamily:'var(--font-ui)', fontWeight:700, letterSpacing:'.12em', textTransform:'uppercase', fontSize:12, color:'var(--fg-3)'}}>Subtotal</span>
            <span style={{fontFamily:'var(--font-mono)', fontWeight:700, fontSize:18, color:'var(--acid)'}}>${subtotal.toFixed(2)} CAD</span>
          </div>
          <p style={{fontSize:11, color:'var(--fg-3)', margin:'0 0 12px'}}>
            {subtotal >= 200 ? '★ Free shipping unlocked.' : `Add $${(200-subtotal).toFixed(2)} for free shipping.`} Anonymous delivery, no signature.
          </p>
          <button className="btn btn-primary btn-block btn-lg" disabled={!items.length} onClick={onCheckout}>
            Checkout · ${subtotal.toFixed(2)}
          </button>
        </div>
      </aside>
    </>
  );
}

function Checkout({ items, onBack, onComplete, onMount }) {
  React.useEffect(() => { onMount && onMount(); }, []);
  const [step, setStep] = React.useState(0);
  const [form, setForm] = React.useState({
    email: '', name: '', phone: '',
    address: '', city: '', province: 'ON', postal: '',
    payment: 'etransfer'
  });
  const [submitting, setSubmitting] = React.useState(false);
  const [submitError, setSubmitError] = React.useState('');

  // Coupon state — pre-fill from referral link or WELCOME10 if guest
  const initialCoupon = (() => {
    try {
      const ref = (window.getStoredReferral && window.getStoredReferral()) || '';
      return ref;
    } catch { return ''; }
  })();
  const [couponInput, setCouponInput] = React.useState(initialCoupon);
  const [couponCode, setCouponCode] = React.useState(null);
  const [couponDiscount, setCouponDiscount] = React.useState(0);
  const [couponMsg, setCouponMsg] = React.useState(initialCoupon ? `★ Referral code ${initialCoupon} ready to apply` : '');
  const [couponLoading, setCouponLoading] = React.useState(false);

  const subtotal = items.reduce((s, i) => s + i.price * i.qty, 0);
  const baseShip = subtotal >= 200 ? 0 : 15;
  // Free-shipping coupons zero out the shipping cost; other coupons reduce subtotal.
  const isFreeShipCoupon = couponDiscount > 0 && couponDiscount === baseShip && couponMsg.toLowerCase().includes('free');
  const ship = isFreeShipCoupon ? 0 : baseShip;
  const itemDiscount = isFreeShipCoupon ? 0 : couponDiscount;
  const total = Math.max(0, subtotal - itemDiscount + ship);

  const update = (k) => (e) => setForm({...form, [k]: e.target.value});

  const next = () => setStep(s => Math.min(3, s + 1));
  const back = () => setStep(s => Math.max(0, s - 1));

  const steps = ['Cart', 'Address', 'Payment', 'Review'];

  const applyCoupon = async () => {
    const code = couponInput.trim().toUpperCase();
    if (!code) return;
    setCouponLoading(true); setCouponMsg('');
    try {
      const r = await window.api.post('/coupons/validate', { code, subtotal });
      setCouponCode(r.coupon.code);
      setCouponDiscount(r.discount);
      const t = r.coupon.discount_type;
      setCouponMsg(
        t === 'free_shipping' ? `★ Free shipping with ${r.coupon.code}` :
        t === 'percentage'    ? `★ ${r.coupon.discount_value}% off with ${r.coupon.code} (−$${r.discount.toFixed(2)})` :
                                 `★ −$${r.discount.toFixed(2)} off with ${r.coupon.code}`
      );
    } catch (err) {
      setCouponCode(null);
      setCouponDiscount(0);
      setCouponMsg('✗ ' + (err.message || 'Invalid coupon'));
    } finally {
      setCouponLoading(false);
    }
  };

  const clearCoupon = () => {
    setCouponCode(null); setCouponDiscount(0); setCouponMsg(''); setCouponInput('');
  };

  const placeOrder = async () => {
    if (!items.length) { setSubmitError('Your cart is empty.'); return; }
    if (!form.email.trim() || !form.name.trim() || !form.address.trim() || !form.city.trim() || !form.postal.trim()) {
      setSubmitError('Please fill in all shipping fields.');
      setStep(1);
      return;
    }
    setSubmitting(true); setSubmitError('');
    try {
      const payload = {
        email: form.email.trim(),
        phone: form.phone || undefined,
        ship_full_name: form.name.trim(),
        ship_line_1: form.address.trim(),
        ship_city: form.city.trim(),
        ship_province: form.province,
        ship_postal_code: form.postal.trim().toUpperCase(),
        payment_method: form.payment,
        items: items.map(i => ({ sku: i.sku, quantity: i.qty })),
        coupon_code: couponCode || undefined,
      };
      const res = await window.api.post('/orders', payload);
      onComplete(res.order.order_number);
    } catch (err) {
      setSubmitError(err.message || 'Order failed. Please check your details and try again.');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div style={{marginTop: 24}}>
      <button className="btn btn-ghost" onClick={onBack}><i data-lucide="arrow-left"></i> Keep shopping</button>
      <h1 className="page-title" style={{marginTop: 24}}>Check<em>out</em>.</h1>

      <div className="checkout-steps">
        {steps.map((s, i) => (
          <div key={s} className={"checkout-step " + (i === step ? 'active' : i < step ? 'done' : '')}
               onClick={()=>{ if (i <= step) setStep(i); }}>
            <span className="step-num">{i < step ? '✓' : i+1}</span>
            <span>{s}</span>
          </div>
        ))}
      </div>

      <div className="checkout-grid">
        <div>
          {step === 0 && (
            <fieldset>
              <legend>Cart</legend>
              {items.length === 0 && <p>Empty cart. Go grab a carton.</p>}
              {items.map(i => (
                <div className="line" key={i.sku} style={{borderBottomColor:'var(--ink-2)'}}>
                  <div className="ph">
                    <img
                      src={i.image_url || 'assets/skull-icon.png'}
                      alt={i.name}
                      style={i.image_url ? {width:'92%', height:'92%', objectFit:'contain'} : undefined}
                    />
                  </div>
                  <div>
                    <div className="name" style={{color:'var(--bone)'}}>{i.name}</div>
                    <div className="sub">{i.brand} · qty {i.qty}</div>
                  </div>
                  <div className="price">${(i.price * i.qty).toFixed(2)}</div>
                </div>
              ))}
              <div style={{marginTop: 16, textAlign:'right'}}>
                <button className="btn btn-primary btn-lg" onClick={next} disabled={!items.length}>Continue to address →</button>
              </div>
            </fieldset>
          )}

          {step === 1 && (
            <fieldset className="checkout-form">
              <legend>Ship to</legend>
              <div className="row-2">
                <div><label className="label">Email</label><input className="field" value={form.email} onChange={update('email')}/></div>
                <div><label className="label">Phone (optional)</label><input className="field" value={form.phone} onChange={update('phone')} placeholder="for tracking texts"/></div>
              </div>
              <div><label className="label">Full name</label><input className="field" value={form.name} onChange={update('name')} placeholder="As on the box label"/></div>
              <div><label className="label">Street address</label><input className="field" value={form.address} onChange={update('address')} placeholder="123 Main St, Apt 4"/></div>
              <div className="row-3">
                <div><label className="label">City</label><input className="field" value={form.city} onChange={update('city')}/></div>
                <div><label className="label">Province</label>
                  <select className="field" value={form.province} onChange={update('province')}>
                    {['ON','BC','AB','SK','MB','NB','NS','PEI','NL','YT','NT'].map(p=><option key={p}>{p}</option>)}
                  </select>
                </div>
                <div><label className="label">Postal</label><input className="field" value={form.postal} onChange={update('postal')} placeholder="A1A 1A1"/></div>
              </div>
              <p style={{fontSize: 12, color:'var(--fg-3)', margin: 0}}>
                ★ We don't ship to QC or NU. Box arrives plain — no "Mad Smokes" anywhere on it.
              </p>
              <div style={{display:'flex', justifyContent:'space-between', marginTop: 8}}>
                <button className="btn btn-ghost" onClick={back}>← Back</button>
                <button className="btn btn-primary btn-lg" onClick={next}>Continue to payment →</button>
              </div>
            </fieldset>
          )}

          {step === 2 && (
            <fieldset className="checkout-form">
              <legend>Payment</legend>
              <div className="payment-method">
                {[
                  {id:'etransfer', name:'E-Transfer', sub:'Preferred · 5% off applied'},
                  {id:'crypto',    name:'Crypto',    sub:'BTC / ETH / LTC'},
                  {id:'prepaid',   name:'Prepaid Visa/MC', sub:'No reload cards'}
                ].map(pm => (
                  <label key={pm.id} className={form.payment === pm.id ? 'active' : ''}>
                    <input type="radio" name="pm" checked={form.payment === pm.id} onChange={()=>setForm({...form, payment: pm.id})}/>
                    <div>
                      <div className="pm-name">{pm.name}</div>
                      <div className="pm-sub">{pm.sub}</div>
                    </div>
                  </label>
                ))}
              </div>
              <p style={{fontSize: 12, color:'var(--fg-3)', margin: 0}}>
                Payment instructions sent immediately after order. Your order ships when payment confirms (usually under an hour).
              </p>
              <div style={{display:'flex', justifyContent:'space-between'}}>
                <button className="btn btn-ghost" onClick={back}>← Back</button>
                <button className="btn btn-primary btn-lg" onClick={next}>Review order →</button>
              </div>
            </fieldset>
          )}

          {step === 3 && (
            <fieldset className="checkout-form">
              <legend>Review</legend>
              <div style={{background:'var(--ink-soft)', border:'2px solid var(--ink-2)', padding: 18, borderRadius: 4}}>
                <div className="t-eyebrow">Ship to</div>
                <div style={{fontFamily:'var(--font-mono)', fontSize: 13, color:'var(--bone)', marginTop: 6}}>
                  {form.name || '—'}<br/>
                  {form.address || '—'}<br/>
                  {form.city}, {form.province} {form.postal}
                </div>
              </div>
              <div style={{background:'var(--ink-soft)', border:'2px solid var(--ink-2)', padding: 18, borderRadius: 4}}>
                <div className="t-eyebrow">Payment</div>
                <div style={{fontFamily:'var(--font-mono)', fontSize: 13, color:'var(--bone)', marginTop: 6, textTransform:'uppercase'}}>
                  {form.payment === 'etransfer' ? 'E-Transfer (5% off)' : form.payment === 'crypto' ? 'Crypto' : 'Prepaid card'}
                </div>
              </div>

              {/* Coupon */}
              <div style={{background:'var(--ink-soft)', border:'2px solid var(--ink-2)', padding: 18, borderRadius: 4}}>
                <div className="t-eyebrow" style={{marginBottom: 10}}>Promo code</div>
                {couponCode ? (
                  <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap: 12}}>
                    <div style={{color:'var(--acid)', fontFamily:'var(--font-mono)', fontSize:13, fontWeight:700}}>
                      {couponMsg}
                    </div>
                    <button type="button" className="btn btn-ghost" style={{padding:'6px 10px', fontSize: 11}} onClick={clearCoupon}>
                      Remove
                    </button>
                  </div>
                ) : (
                  <>
                    <div style={{display:'grid', gridTemplateColumns: '1fr auto', gap: 8}}>
                      <input
                        className="field"
                        placeholder="WELCOME10"
                        value={couponInput}
                        onChange={e=>setCouponInput(e.target.value.toUpperCase())}
                        onKeyDown={e=>{ if (e.key === 'Enter') { e.preventDefault(); applyCoupon(); } }}
                        disabled={couponLoading}
                      />
                      <button type="button" className="btn btn-ink" onClick={applyCoupon} disabled={couponLoading || !couponInput.trim()}>
                        {couponLoading ? '…' : 'Apply'}
                      </button>
                    </div>
                    {couponMsg && (
                      <div style={{
                        fontSize: 12, marginTop: 8, fontFamily:'var(--font-mono)', fontWeight: 700,
                        color: couponMsg.startsWith('★') ? 'var(--acid)' : 'var(--ember)',
                      }}>
                        {couponMsg}
                      </div>
                    )}
                  </>
                )}
              </div>

              <p style={{fontSize: 12, color:'var(--fg-3)', margin: 0}}>
                By placing the order you confirm you're of legal smoking age in your province.
              </p>
              {submitError && (
                <div style={{background:'var(--blood)', color:'var(--bone)', padding:'10px 14px',
                             fontFamily:'var(--font-mono)', fontSize:12, fontWeight:700, borderRadius:4}}>
                  ★ {submitError}
                </div>
              )}
              <div style={{display:'flex', justifyContent:'space-between'}}>
                <button className="btn btn-ghost" onClick={back} disabled={submitting}>← Back</button>
                <button className="btn btn-primary btn-lg" onClick={placeOrder} disabled={submitting || !items.length}>
                  <i data-lucide="check"></i> {submitting ? 'Placing…' : `Place order · $${total.toFixed(2)}`}
                </button>
              </div>
            </fieldset>
          )}
        </div>

        <div className="summary-card">
          <h4>Order summary</h4>
          {items.map(i => (
            <div className="summary-line" key={i.sku}>
              <span className="l">{i.name} × {i.qty}</span>
              <span className="v">${(i.price * i.qty).toFixed(2)}</span>
            </div>
          ))}
          <div className="summary-line">
            <span className="l">Subtotal</span>
            <span className="v">${subtotal.toFixed(2)}</span>
          </div>
          {couponCode && itemDiscount > 0 && (
            <div className="summary-line" style={{color: 'var(--acid)'}}>
              <span className="l">Discount ({couponCode})</span>
              <span className="v">−${itemDiscount.toFixed(2)}</span>
            </div>
          )}
          <div className="summary-line">
            <span className="l">Shipping {isFreeShipCoupon && couponCode ? `(${couponCode})` : ''}</span>
            <span className="v">{ship === 0 ? 'FREE' : `$${ship.toFixed(2)}`}</span>
          </div>
          <div className="summary-line total">
            <span className="l">Total CAD</span>
            <span className="v">${total.toFixed(2)}</span>
          </div>
          <p style={{fontSize: 11, color:'var(--smoke-500)', marginTop: 14, lineHeight: 1.5}}>
            ★ Plain-packed box. Tracked Canada Post. No signature, no ID, no markings. 2–4 biz days.
          </p>
        </div>
      </div>
    </div>
  );
}

function Confirmation({ orderNum, onShop, onTrack }) {
  const [details, setDetails] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [notFound, setNotFound] = React.useState(false);

  React.useEffect(() => {
    if (!orderNum) { setLoading(false); return; }
    setLoading(true); setNotFound(false);
    window.api.get('/tracking/' + encodeURIComponent(orderNum))
      .then(d => setDetails(d))
      .catch(err => {
        setDetails(null);
        if (String(err.message || '').match(/not found/i)) setNotFound(true);
      })
      .finally(() => setLoading(false));
  }, [orderNum]);

  const o = details?.order;
  const items = details?.items || [];

  return (
    <div>
      <div className="confirm-card">
        <img src="assets/skull-icon.png" alt="" className="skull"/>
        <span className="t-eyebrow" style={{background:'var(--ink)', color:'var(--acid)', padding:'4px 10px', borderRadius:999}}>★ Order placed ★</span>
        <h1 style={{marginTop: 14}}>{notFound ? <>Order <em>not found</em>.</> : <>You're<br/>locked in.</>}</h1>
        {!notFound && <p>Confirmation + payment instructions are on their way to your inbox. We'll ship as soon as payment confirms.</p>}
        {notFound && <p>We couldn't find order #{orderNum}. If you just placed it, give it a moment and refresh.</p>}
        <div className="order-num">ORDER #{orderNum}</div>

        {!loading && o && (
          <div style={{
            background:'var(--ink-soft)', border:'2px solid var(--ink-2)', borderRadius: 6,
            padding: 20, marginTop: 24, textAlign:'left', maxWidth: 600, marginLeft:'auto', marginRight:'auto'
          }}>
            {/* Status / placed / shipping */}
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 14, fontSize: 13, fontFamily:'var(--font-mono)', marginBottom: 16}}>
              <div>
                <div className="t-eyebrow" style={{marginBottom: 4}}>Status</div>
                <div style={{color:'var(--bone)', textTransform:'capitalize'}}>{(o.status || '').replace(/_/g,' ')}</div>
              </div>
              <div>
                <div className="t-eyebrow" style={{marginBottom: 4}}>Placed</div>
                <div style={{color:'var(--bone)'}}>
                  {new Date(o.created_at).toLocaleDateString('en-CA', {month:'short', day:'numeric', year:'numeric'})}
                </div>
              </div>
              <div>
                <div className="t-eyebrow" style={{marginBottom: 4}}>Payment</div>
                <div style={{color:'var(--bone)', textTransform:'capitalize'}}>{(o.payment_status || 'pending').replace(/_/g, ' ')}</div>
              </div>
              <div>
                <div className="t-eyebrow" style={{marginBottom: 4}}>Shipping</div>
                <div style={{color:'var(--bone)'}}>{o.shipping_method || 'Canada Post Expedited'}</div>
              </div>
            </div>

            {/* Items */}
            {items.length > 0 && (
              <>
                <div className="t-eyebrow" style={{marginBottom: 8}}>Items</div>
                {items.map((it, i) => (
                  <div key={i} style={{display:'grid', gridTemplateColumns:'48px 1fr auto', gap: 10, alignItems:'center', padding: '8px 0', borderBottom: i < items.length - 1 ? '1px solid var(--ink-2)' : 'none'}}>
                    {it.image_url ? (
                      <img src={it.image_url} alt="" style={{width: 48, height: 48, objectFit:'contain', background:'var(--bone-warm)'}}/>
                    ) : <div style={{width:48, height:48}}/>}
                    <div>
                      <div style={{fontFamily:'var(--font-ui)', fontWeight:700, fontSize: 13, color:'var(--bone)', textTransform:'uppercase'}}>{it.product_name}</div>
                      <div style={{fontFamily:'var(--font-mono)', fontSize: 11, color:'var(--smoke-400)'}}>{it.brand_name} · qty {it.quantity}</div>
                    </div>
                    <div style={{fontFamily:'var(--font-mono)', fontWeight:700, color:'var(--bone)', fontSize: 13}}>${parseFloat(it.line_total).toFixed(2)}</div>
                  </div>
                ))}

                {/* Totals */}
                <div style={{marginTop: 14, paddingTop: 14, borderTop:'2px solid var(--ink-2)', fontFamily:'var(--font-mono)', fontSize: 13}}>
                  <div style={{display:'flex', justifyContent:'space-between', color:'var(--smoke-400)'}}>
                    <span>Subtotal</span><span>${parseFloat(o.subtotal).toFixed(2)}</span>
                  </div>
                  {parseFloat(o.discount_total) > 0 && (
                    <div style={{display:'flex', justifyContent:'space-between', color:'var(--acid)'}}>
                      <span>Discount {o.coupon_code ? `(${o.coupon_code})` : ''}</span>
                      <span>−${parseFloat(o.discount_total).toFixed(2)}</span>
                    </div>
                  )}
                  <div style={{display:'flex', justifyContent:'space-between', color:'var(--smoke-400)'}}>
                    <span>Shipping</span><span>{parseFloat(o.shipping_cost) === 0 ? 'FREE' : '$' + parseFloat(o.shipping_cost).toFixed(2)}</span>
                  </div>
                  <div style={{display:'flex', justifyContent:'space-between', color:'var(--acid)', fontWeight:700, fontSize: 16, marginTop: 6, paddingTop: 6, borderTop:'1px dashed var(--ink-2)'}}>
                    <span>TOTAL CAD</span><span>${parseFloat(o.grand_total).toFixed(2)}</span>
                  </div>
                </div>
              </>
            )}

            {/* Ship address */}
            {o.ship_full_name && (
              <div style={{marginTop: 18, paddingTop: 14, borderTop:'1px dashed var(--ink-2)'}}>
                <div className="t-eyebrow" style={{marginBottom: 4}}>Ship to</div>
                <div style={{fontFamily:'var(--font-mono)', fontSize: 12, color:'var(--bone)', lineHeight: 1.6}}>
                  {o.ship_full_name}<br/>
                  {o.ship_line_1}{o.ship_line_2 ? ', ' + o.ship_line_2 : ''}<br/>
                  {o.ship_city}, {o.ship_province} {o.ship_postal_code}
                </div>
              </div>
            )}
          </div>
        )}

        <div style={{display:'flex', gap: 12, marginTop: 28, justifyContent:'center', flexWrap:'wrap'}}>
          <button className="btn btn-ink btn-lg" onClick={onTrack}>Track this order</button>
          <button className="btn" style={{background:'var(--bone)', color:'var(--ink)', borderColor:'var(--ink)'}} onClick={onShop}>Keep shopping</button>
        </div>
      </div>
    </div>
  );
}

window.CartDrawer = CartDrawer;
window.Checkout = Checkout;
window.Confirmation = Confirmation;