/* ============================================================
   CHECKOUT — hand off payment to Shopify
   ============================================================ */
function CheckoutPage(){
  const cart = useCart();

  if(cart.lines.length===0){
    return (
      <div className="checkout-done">
        <div className="wrap center">
          <div className="tin" style={{width:96,height:96,margin:"0 auto 22px"}}><div className="gleam"></div><div className="lip"><div className="caviar pearls" style={{borderRadius:"50%"}}></div></div></div>
          <h1 className="h-lg">Your cart is empty</h1>
          <p className="lede" style={{marginTop:14}}>Add a tin to begin checkout.</p>
          <Link to="/" className="btn btn-gold btn-lg" style={{marginTop:24}}>Shop Mye</Link>
        </div>
      </div>
    );
  }

  return (
    <div className="checkout-done">
      <div className="wrap center">
        <span className="value-ic" style={{margin:"0 auto"}}><Icon name="lock" size={26}/></span>
        <h1 className="h-xl" style={{marginTop:14}}>Continue to Shopify Checkout</h1>
        <p className="lede" style={{marginTop:16,maxWidth:"48ch",marginInline:"auto"}}>Payment is handled securely by Shopify. We do not collect card details on this website.</p>
        <button className="btn btn-gold btn-lg" style={{marginTop:24}} onClick={()=>cart.checkout()}>
          <Icon name="lock" size={17}/> Checkout with Shopify · {money(cart.subtotal)}
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { CheckoutPage });