// ZION — accepted payment badges (Visa, Mastercard, PayPal, Klarna, Stripe, Apple Pay, Google Pay)
// Crisp inline SVG / styled wordmarks on white chips — no external image requests.
function PaymentBadges({ align = 'flex-start' }) {
  // Every badge is the SAME fixed size (like a mini card) with its logo centred —
  // uniform proportions are what make a payment row read clean instead of "stretched".
  const chip = {
    width: 40, height: 26, borderRadius: 4, background: '#fff',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 2,
    boxShadow: '0 1px 2px rgba(0,0,0,0.2)', flexShrink: 0, boxSizing: 'border-box', overflow: 'hidden',
  };
  const mark = (size, weight, color, italic) => ({
    fontFamily: 'Arial, Helvetica, sans-serif', fontSize: size, fontWeight: weight,
    color, fontStyle: italic ? 'italic' : 'normal', letterSpacing: '-0.03em', lineHeight: 1,
    whiteSpace: 'nowrap',
  });
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, alignItems: 'center', justifyContent: align }}>
      {/* Visa */}
      <div style={chip}><span style={mark(11, 800, '#1A1F71', true)}>VISA</span></div>

      {/* Mastercard */}
      <div style={chip}>
        <svg width="26" height="16" viewBox="0 0 34 22" aria-label="Mastercard">
          <circle cx="13.5" cy="11" r="8.5" fill="#EB001B" />
          <circle cx="20.5" cy="11" r="8.5" fill="#F79E1B" fillOpacity="0.9" />
        </svg>
      </div>

      {/* PayPal */}
      <div style={chip}><span style={mark(9, 800, '#253B80', true)}>Pay<span style={{ color: '#179BD7' }}>Pal</span></span></div>

      {/* Klarna */}
      <div style={{ ...chip, background: '#FFB3C7' }}><span style={mark(8.5, 800, '#0A0A0A')}>Klarna.</span></div>

      {/* Stripe */}
      <div style={chip}><span style={mark(10, 800, '#635BFF')}>stripe</span></div>

      {/* Apple Pay */}
      <div style={chip}>
        <svg width="9" height="11" viewBox="0 0 814 1000" fill="#000" aria-hidden="true">
          <path d="M788 340c-6 5-112 65-112 199 0 155 136 210 140 211-1 3-22 73-72 145-43 62-89 124-159 124s-92-41-173-41c-79 0-107 42-170 42s-107-58-152-129C29 763 0 615 0 514c0-152 99-233 196-233 51 0 94 42 126 42 31 0 79-44 137-44 22 0 101 2 153 77zM557 137c24-29 41-69 41-110 0-6-1-11-2-16-39 2-86 27-114 60-22 25-42 65-42 106 0 6 1 12 2 14 2 0 6 1 9 1 35 0 79-24 106-55z" />
        </svg>
        <span style={mark(9.5, 600, '#000')}>Pay</span>
      </div>

      {/* Google Pay */}
      <div style={chip}>
        <svg width="10" height="10" viewBox="0 0 48 48" aria-hidden="true">
          <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" />
          <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" />
          <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" />
          <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" />
        </svg>
        <span style={mark(9.5, 600, '#5F6368')}>Pay</span>
      </div>
    </div>
  );
}

window.PaymentBadges = PaymentBadges;