// BankLogos.jsx — Original SVG marks for Chilean banks + Apple Pay.
// Hand-built generic financial glyphs (NOT trademarked logos) using each
// brand's known color so they read correctly without copying their actual logo.

function BankLogo({ name, w = 120 }) {
  const brands = {
    'Banco de Chile': { c: '#0033A0', glyph: 'shield' },
    'Santander': { c: '#EC0000', glyph: 'flame' },
    'BCI': { c: '#003DA6', glyph: 'square' },
    'Falabella': { c: '#0E8E3E', glyph: 'leaf' },
    'Itaú': { c: '#EC7000', glyph: 'arc' },
    'Mach': { c: '#FF3358', glyph: 'm' },
    'Tenpo': { c: '#00C2A8', glyph: 'wave' },
    'BancoEstado': { c: '#0050A0', glyph: 'pillar' },
  };
  const b = brands[name] || { c: '#0B1220', glyph: 'square' };

  const Glyph = () => {
    const s = 22;
    const stroke = { fill: 'none', stroke: b.c, strokeWidth: 2.4, strokeLinecap: 'round', strokeLinejoin: 'round' };
    switch (b.glyph) {
      case 'shield':
        return <svg width={s} height={s} viewBox="0 0 24 24"><path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3z" {...stroke} /></svg>;
      case 'flame':
        return <svg width={s} height={s} viewBox="0 0 24 24"><path d="M12 3c1 4 5 5 5 10a5 5 0 11-10 0c0-2 1-3 2-4-.5 2 .5 3 2 3 0-3 1-6 1-9z" {...stroke} /></svg>;
      case 'square':
        return <svg width={s} height={s} viewBox="0 0 24 24"><rect x="3" y="3" width="8" height="8" rx="1.5" {...stroke} /><rect x="13" y="3" width="8" height="8" rx="1.5" {...stroke} /><rect x="3" y="13" width="8" height="8" rx="1.5" {...stroke} /><rect x="13" y="13" width="8" height="8" rx="1.5" fill={b.c} stroke={b.c} /></svg>;
      case 'leaf':
        return <svg width={s} height={s} viewBox="0 0 24 24"><path d="M4 20c0-9 7-16 16-16-1 9-7 16-16 16zM10 14l4-4" {...stroke} /></svg>;
      case 'arc':
        return <svg width={s} height={s} viewBox="0 0 24 24"><path d="M3 18a9 9 0 0118 0" {...stroke} /><circle cx="12" cy="18" r="2.4" fill={b.c} /></svg>;
      case 'm':
        return <svg width={s} height={s} viewBox="0 0 24 24"><path d="M3 20V6l5 7 4-5 4 5 5-7v14" {...stroke} /></svg>;
      case 'wave':
        return <svg width={s} height={s} viewBox="0 0 24 24"><path d="M3 12c3-3 6-3 9 0s6 3 9 0M3 17c3-3 6-3 9 0s6 3 9 0" {...stroke} /></svg>;
      case 'pillar':
        return <svg width={s} height={s} viewBox="0 0 24 24"><path d="M3 9l9-5 9 5v2H3V9zM5 11v9M19 11v9M12 11v9M3 20h18" {...stroke} /></svg>;
      default:
        return null;
    }
  };

  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 10,
      fontFamily: "'Inter', sans-serif",
    }}>
      <Glyph />
      <span style={{ fontWeight: 700, fontSize: 16, color: b.c, letterSpacing: '-0.015em' }}>{name}</span>
    </div>
  );
}

function ApplePayMark({ color = '#0B1220', size = 22 }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color, fontFamily: "'Inter', sans-serif", fontWeight: 600 }}>
      <svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
        {/* generic apple silhouette */}
        <path d="M16.5 12.5c0-2.4 2-3.6 2.1-3.6-1.1-1.7-2.9-1.9-3.5-1.9-1.5-.2-2.9.9-3.6.9-.8 0-1.9-.9-3.2-.8-1.6 0-3.1 1-4 2.4-1.7 3-.4 7.4 1.2 9.8.8 1.2 1.8 2.5 3.1 2.5 1.2 0 1.7-.8 3.2-.8s2 .8 3.2.8c1.3 0 2.2-1.2 3-2.4.9-1.4 1.4-2.7 1.4-2.8-.1-.1-2.7-1-2.9-4.1zM14 5.5c.7-.8 1.1-2 1-3.1-1 .1-2.1.7-2.8 1.5-.6.7-1.2 1.9-1 3 1.1.1 2.2-.6 2.8-1.4z" />
      </svg>
      <span>Pay</span>
    </span>
  );
}

window.BankLogo = BankLogo;
window.ApplePayMark = ApplePayMark;