/* CỘI — Cart, Checkout, Order Confirmation */

const { useState: useCart, useEffect: useEffectCart, useMemo: useMemoCart } = React;
const { Page: CartPage_, PageHero: CartHero_ } = window.SonPage;

// ============================== CART
function CartPageRoot() {
  const [items, setItems] = useCart(() => window.CoiCart.get());
  useEffectCart(() => {
    const onChange = () => setItems(window.CoiCart.get());
    window.addEventListener('coi-cart-changed', onChange);
    return () => window.removeEventListener('coi-cart-changed', onChange);
  }, []);

  const subtotal = items.reduce((s, i) => s + i.priceN * i.qty, 0);
  const shipping = subtotal === 0 ? 0 : subtotal >= 200 ? 0 : 18;
  const total = subtotal + shipping;

  return (
    <CartPage_ navDefaultDark={true}>
      <CartHero_
        num="01"
        eyebrow="YOUR BAG"
        title={items.length > 0 ? <>The <em>cart.</em></> : <>An <em>empty</em> bag.</>}
        sub={items.length > 0
          ? `${items.reduce((s, i) => s + i.qty, 0)} pouches · ready for checkout. Every order ships with its own anchored receipt.`
          : "Your bag is empty. Add a pouch from the shop to begin."}
      >
        <div className="crumbs"><a href="index.html">Home</a><span className="sep">/</span><span>Bag</span></div>
      </CartHero_>

      <section className="bag-section paper" data-screen-label="Cart">
        <div className="container">
          {items.length === 0 ? (
            <div className="bag-empty">
              <div className="eyebrow gold" style={{ color: 'var(--gold)' }}>◆ EMPTY BAG</div>
              <h3 style={{ fontFamily: 'var(--serif)', fontWeight: 300, fontSize: 48, margin: '16px 0' }}>
                Begin in the <em style={{ fontStyle: 'italic', color: 'var(--gold)' }}>shop.</em>
              </h3>
              <a className="btn solid" href="shop.html" style={{ marginTop: 16 }}>Open shop <span className="arrow">→</span></a>
            </div>
          ) : (
            <div className="bag-grid">
              <div>
                <div className="eyebrow gold" style={{ marginBottom: 16 }}>/ {items.length} ITEM{items.length !== 1 ? 'S' : ''}</div>
                {items.map(it => (
                  <div className="bag-item" key={it.id}>
                    <a className="bag-thumb" href={`product.html?id=${it.id}`} style={{ backgroundImage: `url(${it.img})` }} />
                    <div>
                      <div style={{ fontFamily: 'var(--serif)', fontSize: 22, fontWeight: 400 }}>{it.name}</div>
                      <div style={{ fontSize: 12, opacity: 0.65, marginTop: 4 }}>{it.sub}</div>
                    </div>
                    <div className="qty" style={{ border: '1px solid var(--line)' }}>
                      <button onClick={() => window.CoiCart.updateQty(it.id, it.qty - 1)}>−</button>
                      <span>{it.qty}</span>
                      <button onClick={() => window.CoiCart.updateQty(it.id, it.qty + 1)}>+</button>
                    </div>
                    <div style={{ fontFamily: 'var(--mono)', fontSize: 16, textAlign: 'right' }}>
                      ${it.priceN * it.qty}
                      <div style={{ fontSize: 10, opacity: 0.55, marginTop: 4 }}>${it.priceN} · {it.weight}</div>
                    </div>
                    <button
                      onClick={() => window.CoiCart.remove(it.id)}
                      style={{ fontSize: 11, letterSpacing: '0.15em', textTransform: 'uppercase', opacity: 0.55 }}
                    >Remove</button>
                  </div>
                ))}

                <div style={{ marginTop: 32, padding: 24, border: '1px solid var(--line)', fontSize: 13, opacity: 0.78 }}>
                  <div className="eyebrow gold" style={{ marginBottom: 8 }}>◆ INCLUDED</div>
                  Every pouch ships with its hangtag passport. Every order receipt is anchored to FloraChain. Returns accepted on unopened pouches within 30 days.
                </div>
              </div>

              <aside className="bag-summary">
                <h3>Order summary</h3>
                <div className="row">
                  <span>Subtotal</span>
                  <span className="mono">${subtotal}</span>
                </div>
                <div className="row">
                  <span>Shipping {subtotal >= 200 && <em style={{ color: 'var(--gold)', fontStyle: 'italic' }}>· free</em>}</span>
                  <span className="mono">{shipping === 0 ? 'Free' : `$${shipping}`}</span>
                </div>
                <div className="row">
                  <span>Anchored receipt</span>
                  <span className="mono" style={{ color: 'var(--gold)' }}>Included</span>
                </div>
                <div className="row total">
                  <span>Total</span>
                  <span>${total}</span>
                </div>
                <a className="btn solid" href="checkout.html" style={{ marginTop: 24, width: '100%', justifyContent: 'center' }}>
                  Checkout · ${total} <span className="arrow">→</span>
                </a>
                <a className="btn" href="shop.html" style={{ marginTop: 12, width: '100%', justifyContent: 'center' }}>
                  Continue shopping
                </a>

                {subtotal < 200 && (
                  <div style={{ marginTop: 24, padding: 16, background: 'var(--paper)', fontSize: 12, opacity: 0.78 }}>
                    Add <strong>${200 - subtotal}</strong> more for free worldwide shipping.
                  </div>
                )}
              </aside>
            </div>
          )}
        </div>
      </section>
    </CartPage_>
  );
}

// ============================== CHECKOUT
function CheckoutPageRoot() {
  const [step, setStep] = useCart(1);
  const [items, setItems] = useCart(() => window.CoiCart.get());
  const [form, setForm] = useCart({
    email: '', firstName: '', lastName: '', phone: '',
    address: '', address2: '', city: '', postal: '', country: 'Vietnam',
    shipMethod: 'express',
    cardName: '', cardNumber: '', cardExpiry: '', cardCvc: '',
    saveInfo: true
  });

  useEffectCart(() => {
    const onChange = () => setItems(window.CoiCart.get());
    window.addEventListener('coi-cart-changed', onChange);
    return () => window.removeEventListener('coi-cart-changed', onChange);
  }, []);

  const subtotal = items.reduce((s, i) => s + i.priceN * i.qty, 0);
  const shipping = items.length === 0 ? 0 :
    form.shipMethod === 'standard' ? (subtotal >= 200 ? 0 : 18) :
    form.shipMethod === 'express' ? 28 :
    48; // hand-delivered
  const tax = Math.round(subtotal * 0.085);
  const total = subtotal + shipping + tax;

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

  const placeOrder = () => {
    const ref = window.CoiCart.newOrderRef();
    const order = {
      ref,
      items,
      subtotal, shipping, tax, total,
      contact: {
        email: form.email,
        name: `${form.firstName} ${form.lastName}`,
        phone: form.phone
      },
      ship: {
        address: form.address,
        address2: form.address2,
        city: form.city,
        postal: form.postal,
        country: form.country,
        method: form.shipMethod
      },
      cardLast4: (form.cardNumber || '').replace(/\s/g, '').slice(-4) || '4242',
      placedAt: new Date().toISOString(),
      bltHash: '0x' + Array.from({length: 12}, () => Math.floor(Math.random()*16).toString(16)).join('') + '..' + Array.from({length: 6}, () => Math.floor(Math.random()*16).toString(16)).join(''),
      block: 5234908 + Math.floor(Math.random() * 1000),
      floraTx: 'flora1tx' + Math.random().toString(36).slice(2, 12)
    };
    window.CoiOrder.save(order);
    window.CoiCart.clear();
    location.href = 'order-confirmation.html';
  };

  if (items.length === 0) {
    return (
      <CartPage_ navDefaultDark={true}>
        <CartHero_
          eyebrow="CHECKOUT"
          title={<>An <em>empty</em> bag.</>}
          sub="There is nothing to check out. Add a pouch from the shop to begin."
        >
          <div className="crumbs"><a href="cart.html">Bag</a><span className="sep">/</span><span>Checkout</span></div>
        </CartHero_>
        <section className="bag-section paper">
          <div className="container">
            <div className="bag-empty">
              <a className="btn solid" href="shop.html">Open shop <span className="arrow">→</span></a>
            </div>
          </div>
        </section>
      </CartPage_>
    );
  }

  return (
    <CartPage_ navDefaultDark={true}>
      <CartHero_
        num="01"
        eyebrow="CHECKOUT"
        title={<>Almost <em>there.</em></>}
        sub="Four steps · contact, shipping, payment, review. Every order ships with its anchored receipt."
      >
        <div className="crumbs">
          <a href="cart.html">Bag</a><span className="sep">/</span><span>Checkout</span>
        </div>
      </CartHero_>

      <section className="section paper" data-screen-label="Checkout">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 64 }} className="checkout-layout">

            {/* MAIN */}
            <div>
              <Steps step={step} setStep={setStep} />

              {step === 1 && (
                <div className="checkout-step">
                  <h3 className="step-title">Contact</h3>
                  <p className="step-sub">We'll send your order confirmation and FloraChain anchor receipt here.</p>
                  <form className="form" onSubmit={(e) => { e.preventDefault(); setStep(2); }}>
                    <div className="form-row"><div className="lbl">EMAIL</div><input required type="email" value={form.email} onChange={e => update('email', e.target.value)} placeholder="you@domain.com" /></div>
                    <div className="form-grid-2">
                      <div className="form-row"><div className="lbl">FIRST NAME</div><input required value={form.firstName} onChange={e => update('firstName', e.target.value)} /></div>
                      <div className="form-row"><div className="lbl">LAST NAME</div><input required value={form.lastName} onChange={e => update('lastName', e.target.value)} /></div>
                    </div>
                    <div className="form-row"><div className="lbl">PHONE</div><input type="tel" value={form.phone} onChange={e => update('phone', e.target.value)} placeholder="+1 …" /></div>
                    <StepNav next="Continue · Shipping" prev={null} />
                  </form>
                </div>
              )}

              {step === 2 && (
                <div className="checkout-step">
                  <h3 className="step-title">Shipping</h3>
                  <p className="step-sub">Worldwide. Climate-controlled freight. End-of-chain anchor confirms arrival.</p>
                  <form className="form" onSubmit={(e) => { e.preventDefault(); setStep(3); }}>
                    <div className="form-row"><div className="lbl">ADDRESS</div><input required value={form.address} onChange={e => update('address', e.target.value)} placeholder="Street + number" /></div>
                    <div className="form-row"><div className="lbl">APARTMENT / SUITE (OPTIONAL)</div><input value={form.address2} onChange={e => update('address2', e.target.value)} /></div>
                    <div className="form-grid-2">
                      <div className="form-row"><div className="lbl">CITY</div><input required value={form.city} onChange={e => update('city', e.target.value)} /></div>
                      <div className="form-row"><div className="lbl">POSTAL CODE</div><input required value={form.postal} onChange={e => update('postal', e.target.value)} /></div>
                    </div>
                    <div className="form-row">
                      <div className="lbl">COUNTRY</div>
                      <select value={form.country} onChange={e => update('country', e.target.value)}>
                        <option>Vietnam</option><option>United States</option><option>United Kingdom</option><option>France</option><option>Italy</option><option>Germany</option><option>Japan</option><option>Singapore</option><option>Australia</option><option>United Arab Emirates</option>
                      </select>
                    </div>

                    <div style={{ marginTop: 16 }}>
                      <div className="lbl" style={{ marginBottom: 12 }}>SHIPPING METHOD</div>
                      <ShipOption v="standard" form={form} update={update} label="Standard · 7–11 days" desc="Climate-controlled freight. Free over $200." price={subtotal >= 200 ? 'Free' : '$18'} />
                      <ShipOption v="express" form={form} update={update} label="Express · 3–5 days" desc="Priority DHL air freight." price="$28" />
                      <ShipOption v="hand" form={form} update={update} label="Hand-delivered · 24h (HCMC, HN, ĐN)" desc="Cội courier with signature." price="$48" />
                    </div>

                    <StepNav next="Continue · Payment" prev={() => setStep(1)} />
                  </form>
                </div>
              )}

              {step === 3 && (
                <div className="checkout-step">
                  <h3 className="step-title">Payment</h3>
                  <p className="step-sub">Demo checkout · no card will be charged.</p>
                  <form className="form" onSubmit={(e) => { e.preventDefault(); setStep(4); }}>
                    <div className="form-row"><div className="lbl">CARDHOLDER</div><input required value={form.cardName} onChange={e => update('cardName', e.target.value)} placeholder="Name on card" /></div>
                    <div className="form-row">
                      <div className="lbl">CARD NUMBER</div>
                      <input required value={form.cardNumber}
                        onChange={e => update('cardNumber', formatCard(e.target.value))}
                        placeholder="4242 4242 4242 4242" maxLength="23" />
                    </div>
                    <div className="form-grid-2">
                      <div className="form-row">
                        <div className="lbl">EXPIRY</div>
                        <input required value={form.cardExpiry}
                          onChange={e => update('cardExpiry', formatExpiry(e.target.value))}
                          placeholder="MM / YY" maxLength="7" />
                      </div>
                      <div className="form-row">
                        <div className="lbl">CVC</div>
                        <input required value={form.cardCvc}
                          onChange={e => update('cardCvc', e.target.value.replace(/\D/g, '').slice(0,4))}
                          placeholder="3-4 digits" />
                      </div>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 8, fontSize: 12, opacity: 0.78 }}>
                      <input type="checkbox" id="saveInfo" checked={form.saveInfo} onChange={e => update('saveInfo', e.target.checked)} />
                      <label htmlFor="saveInfo">Save info for the next order</label>
                    </div>
                    <StepNav next="Continue · Review" prev={() => setStep(2)} />
                  </form>
                </div>
              )}

              {step === 4 && (
                <div className="checkout-step">
                  <h3 className="step-title">Review</h3>
                  <p className="step-sub">Confirm and place your order. We'll anchor your receipt to FloraChain within sixty seconds.</p>

                  <ReviewBlock title="Contact" edit={() => setStep(1)}>
                    {form.firstName} {form.lastName}<br/>
                    {form.email}{form.phone && <><br/>{form.phone}</>}
                  </ReviewBlock>
                  <ReviewBlock title="Ship to" edit={() => setStep(2)}>
                    {form.address}{form.address2 && <>, {form.address2}</>}<br/>
                    {form.city}, {form.postal}<br/>
                    {form.country}
                    <div style={{ fontFamily: 'var(--mono)', fontSize: 11, opacity: 0.65, marginTop: 8, textTransform: 'uppercase', letterSpacing: '0.15em' }}>
                      {form.shipMethod === 'standard' ? 'STANDARD · 7–11D' : form.shipMethod === 'express' ? 'EXPRESS · 3–5D' : 'HAND-DELIVERED · 24H'}
                    </div>
                  </ReviewBlock>
                  <ReviewBlock title="Payment" edit={() => setStep(3)}>
                    {form.cardName}<br/>
                    <span style={{ fontFamily: 'var(--mono)' }}>•••• •••• •••• {(form.cardNumber || '').replace(/\s/g,'').slice(-4) || '••••'}</span>
                  </ReviewBlock>

                  <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
                    <button className="btn" onClick={() => setStep(3)}>Back</button>
                    <button className="btn gold" style={{ flex: 1, justifyContent: 'center' }} onClick={placeOrder}>
                      Place order · ${total} <span className="arrow">→</span>
                    </button>
                  </div>

                  <p style={{ fontSize: 11, opacity: 0.55, marginTop: 16, lineHeight: 1.6 }}>
                    By placing this order you agree to Cội's terms and privacy policy. Demo checkout — no card will be charged. Your receipt will be anchored to FloraChain.
                  </p>
                </div>
              )}
            </div>

            {/* ORDER SUMMARY */}
            <aside className="bag-summary checkout-aside">
              <h3>{items.reduce((s, i) => s + i.qty, 0)} item{items.reduce((s,i)=>s+i.qty,0) !== 1 ? 's' : ''} · ${total}</h3>
              {items.map(it => (
                <div key={it.id} style={{ display: 'grid', gridTemplateColumns: '60px 1fr auto', gap: 12, alignItems: 'center', padding: '12px 0', borderBottom: '1px solid var(--line)' }}>
                  <div style={{ width: 60, height: 60, background: '#0d0a07', backgroundImage: `url(${it.img})`, backgroundSize: 'contain', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', position: 'relative' }}>
                    <span style={{ position: 'absolute', top: -6, right: -6, background: 'var(--ink)', color: 'var(--paper)', borderRadius: '50%', width: 20, height: 20, fontSize: 10, fontFamily: 'var(--mono)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{it.qty}</span>
                  </div>
                  <div>
                    <div style={{ fontFamily: 'var(--serif)', fontSize: 14 }}>{it.name}</div>
                    <div style={{ fontSize: 11, opacity: 0.6, marginTop: 2 }}>{it.weight}</div>
                  </div>
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 13 }}>${it.priceN * it.qty}</div>
                </div>
              ))}
              <div className="row"><span>Subtotal</span><span className="mono">${subtotal}</span></div>
              <div className="row"><span>Shipping</span><span className="mono">{shipping === 0 ? 'Free' : '$' + shipping}</span></div>
              <div className="row"><span>Tax (est.)</span><span className="mono">${tax}</span></div>
              <div className="row total"><span>Total</span><span>${total}</span></div>
            </aside>
          </div>
        </div>
      </section>
    </CartPage_>
  );
}

function Steps({ step, setStep }) {
  const labels = ['Contact', 'Shipping', 'Payment', 'Review'];
  return (
    <div className="checkout-steps">
      {labels.map((l, i) => {
        const n = i + 1;
        return (
          <button
            key={l}
            onClick={() => n < step && setStep(n)}
            className={`checkout-step-pill ${n === step ? 'active' : ''} ${n < step ? 'done' : ''}`}
            disabled={n > step}
          >
            <span className="num">0{n}</span>
            <span className="lbl">{l}</span>
          </button>
        );
      })}
    </div>
  );
}

function ShipOption({ v, form, update, label, desc, price }) {
  return (
    <label className={`ship-option ${form.shipMethod === v ? 'active' : ''}`}>
      <input type="radio" name="ship" value={v} checked={form.shipMethod === v} onChange={() => update('shipMethod', v)} />
      <div>
        <div style={{ fontFamily: 'var(--serif)', fontSize: 18 }}>{label}</div>
        <div style={{ fontSize: 12, opacity: 0.65, marginTop: 4 }}>{desc}</div>
      </div>
      <div style={{ fontFamily: 'var(--mono)', fontSize: 14 }}>{price}</div>
    </label>
  );
}

function StepNav({ next, prev }) {
  return (
    <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
      {prev && <button type="button" className="btn" onClick={prev}>Back</button>}
      <button type="submit" className="btn solid" style={{ flex: 1, justifyContent: 'center' }}>{next} <span className="arrow">→</span></button>
    </div>
  );
}

function ReviewBlock({ title, children, edit }) {
  return (
    <div style={{ padding: '20px 0', borderTop: '1px solid var(--line)', display: 'grid', gridTemplateColumns: '120px 1fr auto', gap: 24, alignItems: 'baseline' }}>
      <div className="eyebrow gold" style={{ color: 'var(--gold)' }}>{title}</div>
      <div style={{ fontFamily: 'var(--serif)', fontSize: 16, lineHeight: 1.5 }}>{children}</div>
      <button onClick={edit} style={{ fontSize: 11, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--gold)' }}>Edit</button>
    </div>
  );
}

function formatCard(v) {
  const digits = v.replace(/\D/g, '').slice(0, 19);
  return digits.replace(/(.{4})/g, '$1 ').trim();
}
function formatExpiry(v) {
  const d = v.replace(/\D/g, '').slice(0, 4);
  if (d.length <= 2) return d;
  return d.slice(0, 2) + ' / ' + d.slice(2);
}

// ============================== ORDER CONFIRMATION
function ConfirmationPageRoot() {
  const order = window.CoiOrder.get();

  if (!order) {
    return (
      <CartPage_ navDefaultDark={true}>
        <CartHero_
          eyebrow="ORDER NOT FOUND"
          title={<>No <em>recent</em> order.</>}
          sub="We couldn't find a recent order in this session."
        >
          <div className="crumbs"><a href="index.html">Home</a><span className="sep">/</span><span>Confirmation</span></div>
        </CartHero_>
        <section className="bag-section paper">
          <div className="container">
            <div className="bag-empty">
              <a className="btn solid" href="shop.html">Open shop <span className="arrow">→</span></a>
            </div>
          </div>
        </section>
      </CartPage_>
    );
  }

  const anchored = new Date(order.placedAt);
  const dateStr = anchored.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' });
  const timeStr = anchored.toUTCString().slice(17, 25) + ' UTC';

  return (
    <CartPage_ navDefaultDark={true}>
      <section className="confirmation-hero" data-screen-label="Confirmation">
        <div className="container">
          <div className="confirmation-card reveal">
            <div className="passport-status" style={{ justifyContent: 'center' }}>
              <span className="dot" />
              VERIFIED · ANCHORED TO FLORACHAIN
            </div>
            <h1 style={{
              fontFamily: 'var(--serif)', fontWeight: 300,
              fontSize: 'clamp(48px, 7vw, 96px)', lineHeight: 0.95, letterSpacing: '-0.02em',
              margin: '24px 0 16px', textAlign: 'center'
            }}>
              Thank you, <em style={{ fontStyle: 'italic', color: 'var(--gold-2)' }}>{order.contact.name.split(' ')[0]}.</em>
            </h1>
            <p style={{ fontSize: 17, lineHeight: 1.55, opacity: 0.85, maxWidth: 600, margin: '0 auto', textAlign: 'center' }}>
              Order <span style={{ fontFamily: 'var(--mono)', color: 'var(--gold-2)' }}>{order.ref}</span> is placed. A confirmation has been sent to <span style={{ color: 'var(--gold-2)' }}>{order.contact.email}</span>. Your anchored receipt is below.
            </p>

            <div className="confirmation-receipt">
              <div className="receipt-head">
                <div>
                  <div className="eyebrow gold" style={{ color: 'var(--gold-2)' }}>ORDER</div>
                  <div className="mono" style={{ fontSize: 16, marginTop: 4 }}>{order.ref}</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div className="eyebrow gold" style={{ color: 'var(--gold-2)' }}>ANCHORED</div>
                  <div className="mono" style={{ fontSize: 13, marginTop: 4 }}>{dateStr} · {timeStr}</div>
                </div>
              </div>

              <div className="receipt-items">
                {order.items.map(it => (
                  <div key={it.id} className="receipt-row">
                    <div style={{ width: 56, height: 56, background: '#0d0a07', backgroundImage: `url(${it.img})`, backgroundSize: 'contain', backgroundPosition: 'center', backgroundRepeat: 'no-repeat' }} />
                    <div>
                      <div style={{ fontFamily: 'var(--serif)', fontSize: 18 }}>{it.name}</div>
                      <div style={{ fontSize: 11, opacity: 0.65, marginTop: 2, fontFamily: 'var(--mono)', letterSpacing: '0.05em' }}>{it.weight} · QTY {it.qty}</div>
                    </div>
                    <div style={{ fontFamily: 'var(--mono)', fontSize: 14, textAlign: 'right' }}>${it.priceN * it.qty}</div>
                  </div>
                ))}
              </div>

              <div className="receipt-totals">
                <div className="row"><span>Subtotal</span><span className="mono">${order.subtotal}</span></div>
                <div className="row"><span>Shipping · {order.ship.method}</span><span className="mono">{order.shipping === 0 ? 'Free' : '$' + order.shipping}</span></div>
                <div className="row"><span>Tax (est.)</span><span className="mono">${order.tax}</span></div>
                <div className="row total"><span>Total · charged to •••• {order.cardLast4}</span><span>${order.total}</span></div>
              </div>

              <div className="receipt-chain">
                <div className="eyebrow gold" style={{ color: 'var(--gold-2)', marginBottom: 16 }}>FLORACHAIN ANCHOR</div>
                <div className="chain-flow">
                  <div className="chain-node">
                    <div className="stage">01 ORDER</div>
                    <div>{order.ref}</div>
                  </div>
                  <div className="chain-arrow">→</div>
                  <div className="chain-node">
                    <div className="stage">02 BLT HASH</div>
                    <div style={{ fontSize: 10 }}>{order.bltHash.slice(0, 18)}…</div>
                  </div>
                  <div className="chain-arrow">→</div>
                  <div className="chain-node verified">
                    <div className="stage">03 FLORACHAIN</div>
                    <div style={{ fontSize: 10 }}>{order.floraTx.slice(0, 18)}…</div>
                  </div>
                  <div className="chain-arrow">→</div>
                  <div className="chain-node verified">
                    <div className="stage">04 BLOCK</div>
                    <div style={{ fontSize: 10 }}>#{order.block.toLocaleString()}</div>
                  </div>
                </div>
              </div>
            </div>

            <div className="confirmation-next">
              <div className="next-block">
                <div className="eyebrow gold">01 — SHIP</div>
                <h4>{order.ship.method === 'hand' ? '24 hours' : order.ship.method === 'express' ? '3 – 5 days' : '7 – 11 days'}</h4>
                <p>From Cát Lái warehouse to <strong>{order.ship.city}, {order.ship.country}</strong>. We'll email a tracking link as soon as the carton leaves.</p>
              </div>
              <div className="next-block">
                <div className="eyebrow gold">02 — RECEIVE</div>
                <h4>Open the box</h4>
                <p>Inside: your pouches, the letterpress card, and a hangtag passport for every pouch. Scan the QR with your camera to open the chain.</p>
              </div>
              <div className="next-block">
                <div className="eyebrow gold">03 — ARRIVED</div>
                <h4>Anchor confirms</h4>
                <p>When you scan, the end-of-chain anchor commits — your batch is now linked to you, on the public ledger.</p>
              </div>
            </div>

            <div style={{ marginTop: 48, display: 'flex', gap: 12, justifyContent: 'center' }}>
              <a className="btn gold" href={`verify.html`}>Open the ledger <span className="arrow">→</span></a>
              <a className="btn" href="shop.html" style={{ color: 'var(--paper)', borderColor: 'var(--paper)' }}>Continue shopping</a>
            </div>

            <p style={{ marginTop: 48, fontSize: 11, opacity: 0.5, textAlign: 'center', maxWidth: 480, marginLeft: 'auto', marginRight: 'auto' }}>
              Questions? Reply to your confirmation email or write <a href="contact.html" style={{ color: 'var(--gold)' }}>orders@coi.vn</a>. We respond within one business day.
            </p>
          </div>
        </div>
      </section>
    </CartPage_>
  );
}

window.SonCartPages = { CartPageRoot, CheckoutPageRoot, ConfirmationPageRoot };