// Shared payment-method row — used by BOTH the consumer pricing page
// (wipeaway/pricing.jsx) and the business page (wipeaway-biz/pricing-business.jsx).
// Single source of truth: previously each page carried its own copy, which is
// how the two drifted apart (the consumer copy kept white icons long after the
// business copy was fixed for the white theme). Load this BEFORE either pricing
// file. Colours use currentColor / lt- tokens so it inherits whatever theme is set.
(function () {
  if (document.getElementById('wa-payrow-styles')) return;
  const s = document.createElement('style');
  s.id = 'wa-payrow-styles';
  s.textContent = `
  .pay-row{margin-top:22px;padding-top:17px;border-top:1px solid var(--lt-border);display:flex;align-items:center;justify-content:center;gap:15px;}
  .pay-lock{display:inline-flex;align-items:center;color:var(--lt-muted);}
  .pay-marks{display:flex;align-items:center;gap:17px;}
  .pay-marks .pm{display:inline-flex;align-items:center;height:20px;opacity:.7;color:var(--lt-text);font-family:'Hanken Grotesk',sans-serif;font-weight:800;font-size:14px;letter-spacing:.02em;white-space:nowrap;}
  .pay-marks .pm svg{display:block;}
  .pm-visa{font-style:italic;letter-spacing:.07em;font-size:15.5px;}
  .pm-ap{gap:3px;}
  .pm-ap svg{width:15px;height:18px;}
  .pm-ap span{font-weight:600;}
  .pm-gp{gap:3px;font-weight:700;}
  .pm-gp b{font-weight:800;font-size:15px;}
  .pm-gp span{font-weight:600;}
  .pm-mc svg{width:33px;height:20px;}
  `;
  document.head.appendChild(s);
})();

function PayRow({ dark }) {
  return (
    <div className={'pay-row' + (dark ? ' pay-row-dark' : '')}>
      <span className="pay-lock"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg></span>
      <div className="pay-marks">
        <span className="pm pm-visa" title="Visa">VISA</span>
        <span className="pm pm-mc" title="Mastercard"><svg viewBox="0 0 38 24" fill="none"><circle cx="15" cy="12" r="9" fill="currentColor" fillOpacity="0.5" /><circle cx="23" cy="12" r="9" fill="currentColor" fillOpacity="0.92" /></svg></span>
        <span className="pm pm-ap" title="Apple Pay"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 12.04c-.03-2.6 2.13-3.85 2.22-3.91-1.21-1.77-3.1-2.01-3.77-2.04-1.6-.16-3.13.94-3.94.94-.81 0-2.07-.92-3.4-.89-1.75.03-3.36 1.02-4.26 2.58-1.82 3.16-.47 7.83 1.3 10.4.86 1.25 1.89 2.66 3.23 2.61 1.3-.05 1.79-.84 3.36-.84 1.57 0 2.01.84 3.39.81 1.4-.02 2.29-1.28 3.15-2.54.99-1.45 1.4-2.86 1.42-2.93-.03-.01-2.73-1.05-2.76-4.16zM14.47 4.36c.71-.86 1.19-2.06 1.06-3.25-1.02.04-2.26.68-2.99 1.54-.66.76-1.23 1.98-1.08 3.15 1.14.09 2.3-.58 3.01-1.44z" /></svg><span>Pay</span></span>
        <span className="pm pm-gp" title="Google Pay"><b>G</b><span>Pay</span></span>
      </div>
    </div>);
}

Object.assign(window, { PayRow });