/* TopUp — 對齊 TopUpPage.vue */

function TopUpPage({ navigate, onBack }) {
  const toast = useToast();
  return (
    <div className="zen-page">
      <PageHeader title="加值" onBack={onBack || (() => navigate("/me"))} />
      <div className="zen-content">
        <div className="content-wrapper">
          <ZenCard>
            <div className="balance-hero">
              <div className="label">目前餘額</div>
              <div className="value">{SEED_POINTS.toLocaleString()} 點</div>
            </div>
          </ZenCard>
          <div>
            <div className="section-label" style={{ marginTop: 0 }}>選擇方案，立即加值</div>
            <div className="product-grid">
              {SEED_PRODUCTS.map((p) => (
                <button
                  key={p.id}
                  type="button"
                  className="product-card"
                  onClick={() => toast.push(`（Mock）購買 ${p.points} 點`, "success")}
                >
                  <div className="product-points">{p.points.toLocaleString()} 點</div>
                  <div className="product-price">{p.price}</div>
                </button>
              ))}
            </div>
          </div>
          <p className="card-subtitle">此為設計 mockup，不會進行真實付款或入帳。</p>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TopUpPage });