/* Digital Wallet — three "Pay Card" mobile screens.
   UX/layout recreation of a payment-split flow; bank logos replaced with
   neutral generic account icons (no trademarked marks reproduced). */

function WChevron() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M15 18l-6-6 6-6" />
    </svg>);
}

/* generic checking / card icon — basic shapes only */
function WCardIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="6" width="18" height="12" rx="2.5" />
      <line x1="3" y1="10.5" x2="21" y2="10.5" />
      <line x1="6.5" y1="14.5" x2="11" y2="14.5" />
    </svg>);
}

function WPlus() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9" />
      <line x1="12" y1="8" x2="12" y2="16" />
      <line x1="8" y1="12" x2="16" y2="12" />
    </svg>);
}

function WStatusBar() {
  return (
    <div className="w-statusbar">
      <span>9:41</span>
      <span className="w-st-icons">
        <svg width="17" height="11" viewBox="0 0 17 11" fill="#111">
          <rect x="0" y="7" width="3" height="4" rx="1" /><rect x="4.5" y="5" width="3" height="6" rx="1" />
          <rect x="9" y="2.5" width="3" height="8.5" rx="1" /><rect x="13.5" y="0" width="3" height="11" rx="1" />
        </svg>
        <svg width="16" height="12" viewBox="0 0 16 12" fill="none" stroke="#111" strokeWidth="1.6" strokeLinecap="round">
          <path d="M1 4.2a11 11 0 0 1 14 0" /><path d="M3.4 6.8a7 7 0 0 1 9.2 0" /><path d="M6 9.4a3 3 0 0 1 4 0" />
        </svg>
        <svg width="26" height="12" viewBox="0 0 26 12" fill="none">
          <rect x="0.5" y="0.5" width="22" height="11" rx="3" stroke="#111" opacity="0.5" />
          <rect x="2" y="2" width="18" height="8" rx="1.6" fill="#111" />
          <rect x="23.5" y="3.5" width="2" height="5" rx="1" fill="#111" opacity="0.5" />
        </svg>
      </span>
    </div>);
}

function WHeader() {
  return (
    <div className="w-head">
      <span className="w-chev"><WChevron /></span>
      <span className="w-head-title">Pay Card</span>
      <span className="w-cancel">Cancel</span>
    </div>);
}

function WBalance({ card, amount }) {
  return (
    <div className="w-bal">
      <div className="w-card-name">{card}</div>
      <div className="w-bal-label">Pay current balance</div>
      <div className="w-bal-amt">{amount}</div>
    </div>);
}

function WAccount({ tone, name, sub, on }) {
  return (
    <div className="w-acct">
      <span className={"w-acct-ic " + (tone === "alt" ? "w-bank2" : "w-bank")}><WCardIcon /></span>
      <div className="w-acct-body">
        <div className="w-acct-name">{name}</div>
        <div className="w-acct-sub">{sub}</div>
      </div>
      <span className={"w-radio" + (on ? " on" : "")}></span>
    </div>);
}

function WLink() {
  return (
    <div className="w-link"><WPlus /> Link an external account</div>);
}

function WHowCalc() {
  return (
    <div className="w-howcalc">How we calculate your available balance <span className="w-q">?</span></div>);
}

function WNext() {
  return (
    <div className="w-nextwrap"><div className="w-next">Next</div></div>);
}

/* ---------- Frame A: split payment OFF, with tooltip ---------- */
function WalletA() {
  return (
    <div className="w-phone">
      <WHeader />
      <WBalance card="Sapphire Preferred (…5131)" amount="$34.49" />
      <div className="w-payfrom">Pay from</div>
      <div className="w-tip">Turn on to see eligible accounts<span className="x">×</span></div>
      <div className="w-split">Split payment <span className="w-switch"><span className="w-knob"></span></span></div>
      <WAccount name="TOTAL CHECKING (…7590)" sub="$5,390.47 available balance" on={true} />
      <div className="w-acct">
        <span className="w-acct-ic w-bank" style={{ fontSize: "16px" }}>★</span>
        <div className="w-acct-body">
          <div className="w-acct-name">Ultimate Rewards points (…4555)</div>
          <div className="w-acct-sub">20,000 points (equals $200.00)</div>
        </div>
        <span className="w-radio"></span>
      </div>
      <WLink />
      <WHowCalc />
      <div className="w-spacer"></div>
      <WNext />
      <div className="w-home"></div>
    </div>);
}

/* ---------- Frame B: split payment ON, reward card + summary ---------- */
function WalletB() {
  return (
    <div className="w-phone">
      <WHeader />
      <WBalance card="Sapphire Preferred (…5131)" amount="$34.49" />
      <div className="w-payfrom">Pay from</div>
      <div className="w-split">Split payment <span className="w-switch on"><span className="w-knob"></span></span></div>
      <div className="w-info"><span className="dot"></span>You can split your payment between one eligible account and Ultimate Rewards points.</div>
      <WAccount name="TOTAL CHECKING (…7590)" sub="$5,390.47 available balance" />
      <div className="w-rewardcard">
        <div className="w-rc-head">
          <span className="w-rc-star">★</span>
          <span className="w-rc-title">Ultimate Rewards points (…4555)</span>
        </div>
        <div className="w-rc-amt">
          <div>
            <div className="lbl">Amount</div>
            <div className="val">$0.00</div>
          </div>
          <div className="of">of $200.00</div>
        </div>
        <div className="w-rc-foot">Redeeming 0 of 20,000 points</div>
      </div>
      <div className="w-sum-row"><span>TOTAL CHECKING (…7590)</span><span className="dash">—</span></div>
      <div className="w-sum-row"><span>Ultimate Rewards</span><span className="dash">—</span></div>
      <div className="w-sum-row"><span className="w-sum-total">Total payment</span><span className="w-sum-total">$34.49</span></div>
      <WNext />
      <div className="w-home"></div>
    </div>);
}

/* ---------- Frame C: full device, two accounts ---------- */
function WalletC() {
  return (
    <div className="w-phone">
      <WStatusBar />
      <WHeader />
      <WBalance card="Sapphire Preferred (…1098)" amount="$39.83" />
      <div className="w-payfrom">Pay from</div>
      <WAccount name="TOTAL CHECKING (…7590)" sub="$5,390.47 available balance" on={true} />
      <WAccount tone="alt" name="Bank of America Checking (…2253)" sub="$204.19 available balance" />
      <WLink />
      <WHowCalc />
      <div className="w-spacer"></div>
      <WNext />
      <div className="w-home"></div>
    </div>);
}

function WalletScreens() {
  return (
    <div className="w-row">
      <WalletA />
      <WalletB />
      <WalletC />
    </div>);
}

Object.assign(window, { WalletScreens });