// Vi brand atoms — uses the official Vi wordmark PNG.
// Red 'Vi' + yellow exclamation dot. Authentic brand colors only — no gradient.

const VI = {
  red: '#ED1C24',      // Vi primary red (from logo)
  redDeep: '#C8131A',  // pressed / hover
  yellow: '#FFCB05',   // Vi yellow dot
  black: '#0a0a0e',
  ink: '#15161a',
  paper: '#fbfaf6',
  paper2: '#f1efe7',
  line: '#e5e1d4',
  lineStrong: '#d4cebc',
  soft: '#6b6c75',
  body: '#3a3b42',
  green: '#0f8a5f',
  amber: '#b8500d',
};

// The "Vi" wordmark — uses the official PNG. `mode` is kept for API compatibility
// but the brand mark is rendered identically; "white" applies a CSS filter for
// dark backgrounds.
const ViLogo = ({ height = 24, mode = 'brand' }) => {
  const filter = mode === 'white'
    ? 'brightness(0) invert(1)'
    : 'none';
  return (
    <img
      src="assets/vi-logo.png"
      alt="Vi"
      style={{
        height, width: 'auto', display: 'block',
        filter,
      }}
    />
  );
};

// Small circular Vi badge — used as an avatar-style affordance
const ViSticker = ({ size = 32, dark = false }) => (
  <div style={{
    width: size, height: size, borderRadius: '50%',
    background: dark ? '#0a0a0e' : '#fff',
    border: `1px solid ${dark ? 'rgba(255,255,255,0.1)' : VI.line}`,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    flexShrink: 0, padding: size * 0.18, boxSizing: 'border-box',
  }}>
    <ViLogo height={size * 0.5} />
  </div>
);

// DPDP shield glyph — used near consent CTAs
const DPDPShield = ({ size = 14, color = VI.green }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M7 1 L12 3 V7 C12 9.8 9.8 11.8 7 13 C4.2 11.8 2 9.8 2 7 V3 L7 1Z"
      stroke={color} strokeWidth="1.3" fill="none" strokeLinejoin="round" />
    <path d="M5 7 L6.5 8.5 L9 5.8" stroke={color} strokeWidth="1.4" fill="none"
      strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

Object.assign(window, { VI, ViLogo, ViSticker, DPDPShield });