/* ============================================================
   CART + MULTI-STEP CHECKOUT + CONFIRMATION — Nigeria-first
   ============================================================ */
const NG_STATES = ['Lagos', 'FCT (Abuja)', 'Rivers', 'Oyo', 'Kano', 'Kaduna', 'Enugu', 'Anambra', 'Delta', 'Edo', 'Ogun', 'Akwa Ibom', 'Abia', 'Other'];
const COUNTRIES = ['Nigeria', 'United Kingdom', 'United States', 'Ghana', 'United Arab Emirates', 'Canada'];

function CartPage() {
  const { cartLines, subtotal, setQty, removeItem, money, nav } = useStore();
  if (cartLines.length === 0) {
    return (
      <div className="container" style={{ padding: 'clamp(70px,12vw,140px) var(--gutter)', textAlign: 'center', maxWidth: 560 }}>
        <I.bag width={52} height={52} style={{ opacity: .3, margin: '0 auto 18px' }} />
        <h1 style={{ fontSize: 'clamp(34px,5vw,52px)' }}>Your cart is empty</h1>
        <button className="btn btn-gold btn-lg" style={{ marginTop: 24 }} onClick={() => nav('shop')}>Shop all products</button>
      </div>
    );
  }
  const shipping = subtotal >= BB.BRAND.shipping.freeThreshold ? 0 : BB.BRAND.shipping.flat;
  return (
    <div className="container wide" style={{ padding: 'clamp(36px,5vw,64px) var(--gutter) clamp(64px,9vw,110px)' }}>
      <h1 style={{ fontSize: 'clamp(36px,5vw,60px)', marginBottom: 36 }}>Your Cart</h1>
      <div className="cart-layout">
        <div>
          {cartLines.map(l => {
            const c = BB.catOf(l.product);
            const veh = l.product.cat === 'vehicles';
            return (
            <div key={l.idx} style={{ display: 'flex', gap: 20, padding: '24px 0', borderBottom: '1px solid var(--line)' }}>
              <Ph src={l.product.img} label="" variant={l.product.ph} style={{ width: 110, height: 110, borderRadius: 'var(--r-md)', flexShrink: 0, cursor: 'pointer' }} onClick={() => nav('product', { id: l.product.id })} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
                  <div>
                    <span className="cat-tag">{c?.short}</span>
                    <h3 onClick={() => nav('product', { id: l.product.id })} style={{ fontSize: 22, cursor: 'pointer', lineHeight: 1.15, marginTop: 3 }}>{l.product.name}</h3>
                    <p style={{ fontSize: 13, color: 'var(--ink-soft)', marginTop: 4 }}>{Object.keys(l.opts || {}).length > 0 ? Object.entries(l.opts).map(([k, v]) => `${k}: ${v}`).join(' · ') : BB.specLine(l.product)}</p>
                  </div>
                  <span style={{ fontFamily: 'var(--serif)', fontWeight: 600, fontSize: 22, whiteSpace: 'nowrap' }}>{money(l.lineTotal)}</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 16 }}>
                  {veh ? (
                    <span style={{ fontSize: 12.5, color: 'var(--ink-soft)', display: 'inline-flex', gap: 7, alignItems: 'center' }}><I.car width={16} height={16} style={{ color: 'var(--gold-deep)' }} /> Sold as listed · qty 1</span>
                  ) : (
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6, border: '1.5px solid var(--line)', borderRadius: 100, padding: 4, background: 'var(--ivory)' }}>
                      <button className="qbtn" onClick={() => setQty(l.idx, l.qty - 1)} aria-label="Decrease"><I.minus width={15} height={15} /></button>
                      <span style={{ minWidth: 26, textAlign: 'center' }}>{l.qty}</span>
                      <button className="qbtn" onClick={() => setQty(l.idx, l.qty + 1)} aria-label="Increase"><I.plus width={15} height={15} /></button>
                    </div>
                  )}
                  <button onClick={() => removeItem(l.idx)} className="link-u" style={{ fontSize: 13, color: 'var(--ink-soft)' }}>Remove</button>
                </div>
              </div>
            </div>);
          })}
          <button onClick={() => nav('shop')} className="link-u" style={{ marginTop: 24, fontSize: 14, display: 'inline-flex', gap: 8, alignItems: 'center' }}><span style={{ transform: 'rotate(180deg)', display: 'inline-flex' }}><I.arrow width={16} height={16} /></span> Continue shopping</button>
        </div>
        <OrderSummary subtotal={subtotal} shipping={shipping} cta="Proceed to checkout" onCta={() => nav('checkout')} />
      </div>
    </div>
  );
}

function OrderSummary({ subtotal, shipping, cta, onCta, compact }) {
  const { money } = useStore();
  const total = subtotal + shipping;
  return (
    <aside style={{ background: 'var(--ivory)', border: '1px solid var(--line)', borderRadius: 'var(--r-lg)', padding: 28, boxShadow: 'var(--shadow-sm)', alignSelf: 'start', position: compact ? 'static' : 'sticky', top: 100 }}>
      <h3 style={{ fontSize: 24, marginBottom: 20 }}>Order summary</h3>
      <Row l="Subtotal" v={money(subtotal)} />
      <Row l="Delivery" v={shipping === 0 ? 'Free' : money(shipping)} note={shipping === 0 ? 'Free over ' + money(BB.BRAND.shipping.freeThreshold) : undefined} />
      <hr className="divider" style={{ margin: '16px 0' }} />
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <span style={{ fontWeight: 500 }}>Total</span>
        <span style={{ fontFamily: 'var(--serif)', fontWeight: 700, fontSize: 32 }}>{money(total)}</span>
      </div>
      {cta && <button className="btn btn-gold btn-block btn-lg" style={{ marginTop: 22 }} onClick={onCta}>{cta}</button>}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, marginTop: 16, fontSize: 12, color: 'var(--ink-faint)' }}>
        <I.shield width={15} height={15} /> Secure encrypted checkout
      </div>
    </aside>
  );
}
function Row({ l, v, note }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '7px 0', fontSize: 14.5 }}>
      <span className="muted">{l}{note && <em style={{ display: 'block', fontStyle: 'normal', fontSize: 11.5, color: 'var(--sage-deep)' }}>{note}</em>}</span>
      <span>{v}</span>
    </div>
  );
}

/* ---------- Wire transfer account-details modal ---------- */
function WireModal({ amount, onClose }) {
  const B = BB.BRAND.bank;
  const rows = [
    ['Account holder', B.accountHolder],
    ['Bank', B.name],
    ['Swift code', B.swift],
    ['Account number', B.account],
    ['Sort code', B.sortCode],
    ['Currency', 'USD'],
    ['Amount', amount],
    ['Reference', 'Use your order number as the payment reference'],
  ];
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(23,17,9,.5)', backdropFilter: 'blur(3px)', zIndex: 220, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20, animation: 'fade .25s' }}>
      <div onClick={e => e.stopPropagation()} style={{ background: 'var(--ivory)', borderRadius: 'var(--r-lg)', padding: 'clamp(24px,4vw,34px)', maxWidth: 440, width: '100%', boxShadow: 'var(--shadow-lg)', animation: 'scaleIn .3s cubic-bezier(.2,.8,.2,1)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
          <h3 style={{ fontSize: 22 }}>Wire transfer details</h3>
          <button className="icobtn" onClick={onClose} aria-label="Close"><I.close width={20} height={20} /></button>
        </div>
        <dl className="spec-sheet">
          {rows.map(([label, val]) => <div className="spec-row" key={label}><dt>{label}</dt><dd>{val}</dd></div>)}
        </dl>
        <p className="muted" style={{ fontSize: 12.5, marginTop: 16, lineHeight: 1.6 }}>Include your order number in the transfer memo. International wires typically clear in 3–5 business days — we'll confirm your order the moment it lands. These details are also emailed to you.</p>
      </div>
    </div>
  );
}

/* ---------- Checkout (information → shipping → payment) ---------- */
function CheckoutPage() {
  const { cartLines, subtotal, nav, currency, placeOrder, money } = useStore();
  const [step, setStep] = useState(1);
  const [showWire, setShowWire] = useState(false);
  const [form, setForm] = useState({ email: '', firstName: '', lastName: '', address: '', city: '', state: 'Lagos', country: 'Nigeria', postal: '', phone: '', delivery: 'standard', method: 'paystack', marketing: true });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const S = BB.BRAND.shipping;
  const isNGN = currency === BB.BRAND.currency.primary.code;
  const vehicleLines = cartLines.filter(l => l.product.cat === 'vehicles');
  const standardLines = cartLines.filter(l => l.product.cat !== 'vehicles');
  const hasVehicle = vehicleLines.length > 0;
  const hasStandard = standardLines.length > 0;
  const stdShipBase = subtotal >= S.freeThreshold ? 0 : S.flat;
  const shipping = hasStandard ? (form.delivery === 'express' ? S.express : stdShipBase) : 0;
  const total = subtotal + shipping;

  if (cartLines.length === 0) {
    return (
      <div className="container" style={{ padding: '120px var(--gutter)', textAlign: 'center' }}>
        <h1 style={{ fontSize: 44 }}>Nothing to check out</h1>
        <button className="btn btn-gold btn-lg" style={{ marginTop: 24 }} onClick={() => nav('shop')}>Shop all products</button>
      </div>
    );
  }

  const steps = ['Information', 'Shipping', 'Payment'];
  const next = () => setStep(s => Math.min(3, s + 1));
  const pay = () => {
    const order = placeOrder({
      email: form.email, name: `${form.firstName} ${form.lastName}`.trim(), phone: form.phone,
      address: `${form.address}, ${form.city}${form.country === 'Nigeria' && form.state ? ', ' + form.state : ''}, ${form.country}${form.postal ? ' ' + form.postal : ''}`,
      city: form.city, region: form.country, method: form.method, delivery: form.delivery, shipping,
      hasVehicle, hasStandard,
    });
    nav('confirm', { num: order.num });
  };
  const canContinue1 = form.email.includes('@') && form.firstName && form.lastName && form.address && form.city;

  return (
    <div className="container wide" style={{ padding: 'clamp(28px,4vw,48px) var(--gutter) clamp(64px,9vw,110px)' }}>
      <button onClick={() => nav('cart')} className="link-u" style={{ fontSize: 13.5, marginBottom: 18, display: 'inline-flex', gap: 8, alignItems: 'center' }}><span style={{ transform: 'rotate(180deg)', display: 'inline-flex' }}><I.arrow width={15} height={15} /></span> Return to bag</button>
      <h1 style={{ fontSize: 'clamp(34px,5vw,56px)', marginBottom: 8 }}>Checkout</h1>

      {/* stepper */}
      <div style={{ display: 'flex', gap: 8, alignItems: 'center', margin: '20px 0 36px', flexWrap: 'wrap' }}>
        {steps.map((s, i) => (
          <React.Fragment key={s}>
            <button onClick={() => step > i + 1 && setStep(i + 1)} style={{ display: 'flex', alignItems: 'center', gap: 9, fontSize: 13.5, fontWeight: 500, minHeight: 44, padding: '4px 2px', color: step >= i + 1 ? 'var(--ink)' : 'var(--ink-faint)', cursor: step > i + 1 ? 'pointer' : 'default' }}>
              <span style={{ width: 26, height: 26, borderRadius: 100, display: 'grid', placeItems: 'center', fontSize: 12, background: step > i + 1 ? 'var(--sage)' : step === i + 1 ? 'var(--ink)' : 'var(--line)', color: step >= i + 1 ? '#fff' : 'var(--ink-soft)' }}>{step > i + 1 ? <I.check width={14} height={14} /> : i + 1}</span>
              {s}
            </button>
            {i < 2 && <span style={{ flex: '0 1 40px', height: 1, background: 'var(--line)' }} />}
          </React.Fragment>
        ))}
      </div>

      <div className="cart-layout">
        <div>
          {/* dual currency reminder */}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, background: 'var(--sage-soft)', borderRadius: 'var(--r-md)', padding: '14px 18px', marginBottom: 26, flexWrap: 'wrap' }}>
            <span style={{ fontSize: 13.5, display: 'flex', gap: 9, alignItems: 'center' }}><I.globe width={18} height={18} style={{ color: 'var(--sage-deep)' }} /> Paying in <strong>{currency}</strong>{!isNGN && <span className="muted" style={{ fontSize: 12.5 }}>(converted from ₦ at checkout rate)</span>}</span>
            <CurrencySwitch compact />
          </div>

          {step === 1 && (
            <Section title="Contact & delivery">
              <div className="field" style={{ marginBottom: 16 }}><label>Email</label><input className="input" type="email" value={form.email} onChange={e => set('email', e.target.value)} placeholder="you@email.com" /></div>
              <div className="form-row">
                <div className="field"><label>First name</label><input className="input" value={form.firstName} onChange={e => set('firstName', e.target.value)} placeholder="Ada" /></div>
                <div className="field"><label>Last name</label><input className="input" value={form.lastName} onChange={e => set('lastName', e.target.value)} placeholder="Okafor" /></div>
              </div>
              <div className="field" style={{ marginTop: 16 }}><label>Address</label><input className="input" value={form.address} onChange={e => set('address', e.target.value)} placeholder="House number & street" /></div>
              <div className="form-row" style={{ marginTop: 16 }}>
                <div className="field"><label>City</label><input className="input" value={form.city} onChange={e => set('city', e.target.value)} placeholder="Ikeja" /></div>
                <div className="field"><label>Country / Region</label>
                  <select className="input" value={form.country} onChange={e => set('country', e.target.value)} style={{ cursor: 'pointer' }}>
                    {COUNTRIES.map(c => <option key={c}>{c}</option>)}
                  </select>
                </div>
              </div>
              {form.country === 'Nigeria' && (
                <div className="field" style={{ marginTop: 16 }}><label>State</label>
                  <select className="input" value={form.state} onChange={e => set('state', e.target.value)} style={{ cursor: 'pointer' }}>
                    {NG_STATES.map(s => <option key={s}>{s}</option>)}
                  </select>
                </div>
              )}
              <div className="form-row" style={{ marginTop: 16 }}>
                <div className="field"><label>Phone (for the courier)</label><input className="input" value={form.phone} onChange={e => set('phone', e.target.value)} placeholder="+234 …" /></div>
                <div className="field"><label>Postal code</label><input className="input" value={form.postal} onChange={e => set('postal', e.target.value)} placeholder="Optional" /></div>
              </div>
              <button className="btn btn-primary btn-lg" style={{ marginTop: 26 }} disabled={!canContinue1} onClick={next}>Continue to shipping</button>
            </Section>
          )}

          {step === 2 && (
            <Section title="Shipping method">
              {hasStandard && (
                <>
                  <p className="eyebrow" style={{ marginBottom: 10 }}>{hasVehicle ? 'Shippable items' : 'Delivery option'}</p>
                  <p className="muted" style={{ fontSize: 12.5, marginBottom: 12 }}>Rates, windows and tracking are resolved live through Shipbubble, our logistics partner — the specific courier is assigned once you pay.</p>
                  {[
                    ['standard', 'Standard delivery', form.country, '2–5 working days, tracked', stdShipBase === 0 ? 'Free' : money(stdShipBase)],
                    ['express', 'Express delivery', form.country, '1–2 working days, major cities', money(S.express)],
                  ].map(([id, n, region, eta, price]) => (
                    <label key={id} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '15px 18px', border: '1.5px solid ' + (form.delivery === id ? 'var(--gold)' : 'var(--line)'), background: form.delivery === id ? 'var(--gold-soft)' : 'var(--ivory)', borderRadius: 'var(--r-md)', marginBottom: 10, cursor: 'pointer', transition: 'all .25s' }}>
                      <span style={{ width: 18, height: 18, borderRadius: 100, border: '1.5px solid ' + (form.delivery === id ? 'var(--gold-deep)' : 'var(--ink-faint)'), display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                        {form.delivery === id && <span style={{ width: 9, height: 9, borderRadius: 100, background: 'var(--gold-deep)' }} />}
                      </span>
                      <input type="radio" name="ship" checked={form.delivery === id} onChange={() => set('delivery', id)} style={{ position: 'absolute', opacity: 0, width: 0, height: 0 }} />
                      <span style={{ flex: 1 }}><strong style={{ fontWeight: 600 }}>{n}</strong><br /><span style={{ fontSize: 13, color: 'var(--ink-soft)' }}>{region} · {eta}</span></span>
                      <span style={{ fontWeight: 600 }}>{price}</span>
                    </label>
                  ))}
                </>
              )}
              {hasVehicle && (
                <>
                  <p className="eyebrow" style={{ marginTop: hasStandard ? 22 : 0, marginBottom: 10 }}>Vehicle{vehicleLines.length > 1 ? 's' : ''}</p>
                  <label style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '15px 18px', border: '1.5px solid var(--gold)', background: 'var(--gold-soft)', borderRadius: 'var(--r-md)', marginBottom: 10 }}>
                    <span style={{ width: 18, height: 18, borderRadius: 100, border: '1.5px solid var(--gold-deep)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><span style={{ width: 9, height: 9, borderRadius: 100, background: 'var(--gold-deep)' }} /></span>
                    <span style={{ flex: 1 }}><strong style={{ fontWeight: 600 }}>Inspection & handover</strong><br /><span style={{ fontSize: 13, color: 'var(--ink-soft)' }}>In person · {form.city || 'your city'}, {form.country} · scheduled within 24 hours</span></span>
                    <span style={{ fontWeight: 600 }}>Free</span>
                  </label>
                  <p className="muted" style={{ fontSize: 13, marginTop: 4 }}>Vehicles aren't couriered — we call to arrange inspection and in-person handover after payment.</p>
                </>
              )}
              <p className="muted" style={{ fontSize: 13, marginTop: 14 }}>Delivering to: {form.address}, {form.city}, {form.country} — <button className="link-u" style={{ color: 'var(--gold-deep)' }} onClick={() => setStep(1)}>edit</button></p>
              <button className="btn btn-primary btn-lg" style={{ marginTop: 20 }} onClick={next}>Continue to payment</button>
            </Section>
          )}

          {step === 3 && (
            <Section title="Payment">
              <div style={{ display: 'flex', gap: 8, marginBottom: 20, flexWrap: 'wrap' }}>
                {[['paystack', 'Paystack'], ['flutterwave', 'Flutterwave'], ['wire', 'Dollar Wire Transfer']].map(([id, label]) => (
                  <button key={id} onClick={() => set('method', id)} className={`chip ${form.method === id ? 'active' : ''}`} style={{ fontSize: 14, padding: '11px 20px' }}>{label}</button>
                ))}
              </div>
              {(form.method === 'paystack' || form.method === 'flutterwave') && (
                <div style={{ background: 'var(--cream-deep)', borderRadius: 'var(--r-md)', padding: 18, fontSize: 14, lineHeight: 1.65 }}>
                  You'll be securely redirected to {form.method === 'paystack' ? 'Paystack' : 'Flutterwave'} to complete payment in <strong>{currency}</strong>. You'll land back here the moment it's confirmed.
                </div>
              )}
              {form.method === 'wire' && (
                <div style={{ background: 'var(--cream-deep)', borderRadius: 'var(--r-md)', padding: 18, fontSize: 14, lineHeight: 1.65 }}>
                  <p style={{ marginBottom: 10 }}>Pay by international wire transfer in USD. Account details are shown here and will also be emailed to you once you place the order.</p>
                  <button type="button" onClick={() => setShowWire(true)} className="link-u" style={{ color: 'var(--gold-deep)', fontWeight: 600, fontSize: 13.5 }}>View full account details →</button>
                </div>
              )}
              <label style={{ display: 'flex', gap: 10, alignItems: 'flex-start', marginTop: 20, fontSize: 13.5, cursor: 'pointer', color: 'var(--ink-soft)' }}>
                <input type="checkbox" checked={form.marketing} onChange={e => set('marketing', e.target.checked)} style={{ width: 17, height: 17, accentColor: 'var(--gold-deep)', marginTop: 1 }} />
                Keep me posted on new arrivals and offers by email
              </label>
              <button className="btn btn-gold btn-block btn-lg" style={{ marginTop: 20 }} onClick={pay}>Pay {money(total)}</button>
              <p style={{ textAlign: 'center', fontSize: 12, color: 'var(--ink-faint)', marginTop: 14, display: 'flex', gap: 7, justifyContent: 'center', alignItems: 'center' }}><I.shield width={14} height={14} /> Protected by 256-bit SSL encryption</p>
            </Section>
          )}
        </div>

        {/* summary with line items */}
        <aside style={{ background: 'var(--ivory)', border: '1px solid var(--line)', borderRadius: 'var(--r-lg)', padding: 26, boxShadow: 'var(--shadow-sm)', alignSelf: 'start', position: 'sticky', top: 100 }}>
          <h3 style={{ fontSize: 22, marginBottom: 18 }}>In your cart</h3>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 18, maxHeight: 260, overflowY: 'auto' }}>
            {cartLines.map(l => (
              <div key={l.idx} style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                <div style={{ position: 'relative', flexShrink: 0 }}>
                  <Ph src={l.product.img} label="" variant={l.product.ph} style={{ width: 54, height: 54, borderRadius: 'var(--r-sm)' }} />
                  <span style={{ position: 'absolute', top: -7, right: -7, width: 20, height: 20, borderRadius: 100, background: 'var(--ink-soft)', color: '#fff', fontSize: 11, display: 'grid', placeItems: 'center' }}>{l.qty}</span>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <span className="cat-tag" style={{ fontSize: 9.5 }}>{BB.catOf(l.product)?.short}</span>
                  <div style={{ fontSize: 14, fontWeight: 500, lineHeight: 1.2 }}>{l.product.name}</div>
                </div>
                <span style={{ fontSize: 13.5 }}>{money(l.lineTotal)}</span>
              </div>
            ))}
          </div>
          <hr className="divider" />
          <div style={{ paddingTop: 14 }}>
            <Row l="Subtotal" v={money(subtotal)} />
            <Row l="Delivery" v={shipping === 0 ? 'Free' : money(shipping)} />
          </div>
          <hr className="divider" style={{ margin: '12px 0' }} />
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <span style={{ fontWeight: 500 }}>Total</span><span style={{ fontFamily: 'var(--serif)', fontWeight: 700, fontSize: 28 }}>{money(total)}</span>
          </div>
        </aside>
      </div>
      {showWire && <WireModal amount={BB.fmt(total, BB.BRAND.currency.secondary.code)} onClose={() => setShowWire(false)} />}
    </div>
  );
}

function Section({ title, children }) {
  return <div style={{ animation: 'fade .4s' }}><h2 style={{ fontSize: 28, marginBottom: 22 }}>{title}</h2>{children}</div>;
}

/* ---------- Order confirmation ---------- */
function ConfirmPage({ params }) {
  const { orders, nav } = useStore();
  const order = orders.find(o => o.num === params.num) || orders[0];
  if (!order) { return <div className="container" style={{ padding: '120px var(--gutter)', textAlign: 'center' }}><h1>No order found</h1><button className="btn btn-gold" style={{ marginTop: 20 }} onClick={() => nav('shop')}>Shop</button></div>; }
  const hasVehicle = order.lines.some(l => l.cat === 'vehicles');
  const hasStandard = order.lines.some(l => l.cat !== 'vehicles');
  const etaText = order.delivery === 'express' ? '1–2 working days' : '2–5 working days';
  return (
    <div className="container" style={{ padding: 'clamp(50px,7vw,90px) var(--gutter) clamp(64px,9vw,110px)', maxWidth: 720, textAlign: 'center' }}>
      <div style={{ width: 76, height: 76, borderRadius: 100, background: 'var(--sage)', color: '#fff', display: 'grid', placeItems: 'center', margin: '0 auto 24px', animation: 'scaleIn .5s cubic-bezier(.2,.8,.2,1)' }}><I.check width={38} height={38} /></div>
      <h1 style={{ fontSize: 'clamp(36px,5vw,58px)', margin: '14px 0 12px' }}>Thank you — <em style={{ color: 'var(--gold-deep)' }}>it's on the way</em></h1>
      <p className="muted" style={{ fontSize: 16.5 }}>We've emailed your receipt. Order <strong style={{ color: 'var(--ink)' }}>#{order.num}</strong> is now being prepared.</p>
      <div style={{ background: 'var(--ivory)', border: '1px solid var(--line)', borderRadius: 'var(--r-lg)', padding: 26, marginTop: 32, textAlign: 'left', boxShadow: 'var(--shadow-sm)' }}>
        {order.lines.map((l, i) => (
          <div key={i} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, padding: '8px 0', fontSize: 14.5 }}>
            <span>{l.qty} × {l.name}</span><span style={{ whiteSpace: 'nowrap' }}>{BB.fmt(l.price * l.qty, order.currency)}</span>
          </div>
        ))}
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, padding: '8px 0', fontSize: 14.5 }}>
          <span className="muted">Delivery{order.delivery === 'express' ? ' (express)' : ''}</span>
          <span>{!order.shipping ? 'Free' : BB.fmt(order.shipping, order.currency)}</span>
        </div>
        <hr className="divider" style={{ margin: '12px 0' }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', fontWeight: 500 }}><span>Total paid</span><span style={{ fontFamily: 'var(--serif)', fontWeight: 700, fontSize: 22 }}>{BB.fmt(order.subtotal + (order.shipping || 0), order.currency)}</span></div>
        {order.address && <p className="muted" style={{ fontSize: 13, marginTop: 14, lineHeight: 1.5 }}>Delivering to: {order.address}</p>}
        {hasStandard && <p style={{ fontSize: 13, marginTop: 10, color: 'var(--ink-soft)' }}>Delivery via <strong style={{ color: 'var(--ink)' }}>{order.logisticsProvider}</strong> \u2014 courier: {order.courierService} \u00b7 estimated delivery to {order.region}: {etaText}</p>}
        {hasVehicle && <p style={{ fontSize: 13, marginTop: 10, color: 'var(--gold-deep)', fontWeight: 500 }}>Vehicle in this order — we'll call within 24 hours to schedule your inspection & handover.</p>}
        <button onClick={() => nav('account')} className="link-u" style={{ fontSize: 13, color: 'var(--gold-deep)', marginTop: 14, display: 'inline-block' }}>Track this order →</button>
      </div>
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 30, flexWrap: 'wrap' }}>
        <button className="btn btn-primary btn-lg" onClick={() => nav('home')}>Back to home</button>
        <button className="btn btn-outline btn-lg" onClick={() => nav('shop')}>Continue shopping</button>
      </div>
    </div>
  );
}

Object.assign(window, { CartPage, CheckoutPage, ConfirmPage, OrderSummary });