// Telco brand system — the active operator is resolved from the URL path.
//   /airtel  → Airtel    /jio → Jio    /vi (default) → Vi
// Also honoured: ?telco=airtel  and  #jio  (handy for previews where the
// server can't rewrite paths). A Tweak can switch it live.
//
// `VI` is the ACTIVE brand object, mutated in place by applyTelco(). Every
// component reads from it during render, so a re-render after applyTelco()
// repaints the whole prototype in the new operator's identity. The export
// name stays `VI` for backwards-compatibility across the codebase — read it
// as "the telco", not "Vodafone Idea".

// Neutral tokens shared by every operator (paper, ink, status colors).
const SHARED = {
  black: '#0a0a0e',
  ink: '#15161a',
  paper: '#fbfaf6',
  paper2: '#f1efe7',
  line: '#e5e1d4',
  lineStrong: '#d4cebc',
  soft: '#6b6c75',
  body: '#3a3b42',
  green: '#0f8a5f',
  amber: '#b8500d',
  gold: '#FFCB05', // real SIM-chip gold — brand-independent
};

// Per-operator identity.
//   primary  → main CTA / accent color  (kept on the `red` key for compat)
//   accent   → secondary color used in gradients/rings (kept on `yellow` key)
//   darkChip → render the logo on a light chip when it sits on a dark surface
const TELCOS = {
  vi: {
    id: 'vi',
    name: 'Vi',
    red: '#ED1C24',
    redDeep: '#C8131A',
    yellow: '#FFCB05',
    logo: 'assets/vi-logo-v2.png',
    logoH: 24,
    darkChip: false,
    grievance: 'grievance@myvi.in',
    userBase: '200M+',
    label: 'LOGIN WITH VI',
  },
  airtel: {
    id: 'airtel',
    name: 'Airtel',
    red: '#E40000',
    redDeep: '#B80000',
    yellow: '#F5A623',
    logo: 'assets/airtel-logo.png',
    logoH: 22,
    darkChip: true,
    grievance: 'grievance@airtel.in',
    userBase: '370M+',
    label: 'LOGIN WITH AIRTEL',
  },
  jio: {
    id: 'jio',
    name: 'Jio',
    red: '#0B3CC9',     // Jio blue drives the accents
    redDeep: '#082C99',
    yellow: '#1FB6E8',  // cyan secondary
    logo: 'assets/jio-logo.png',
    logoH: 26,
    darkChip: true,
    grievance: 'grievance@jio.com',
    userBase: '470M+',
    label: 'LOGIN WITH JIO',
  },
};

// Resolve the operator id from the URL. Priority: ?telco → subdomain → path segment → #hash → default.
const resolveTelcoId = () => {
  try {
    const q = (new URLSearchParams(location.search).get('telco') || '').toLowerCase();
    if (TELCOS[q]) return q;
    // subdomain: <telco>-demo.otpless.dev  e.g. airtel-demo.otpless.dev → airtel
    const sub = location.hostname.split('.')[0].replace(/-demo$/, '').toLowerCase();
    if (TELCOS[sub]) return sub;
    const segs = location.pathname.toLowerCase().split('/').filter(Boolean);
    for (let i = segs.length - 1; i >= 0; i--) {
      const s = segs[i].replace(/\.html?$/, '');
      if (TELCOS[s]) return s;
    }
    const h = (location.hash || '').replace('#', '').toLowerCase();
    if (TELCOS[h]) return h;
  } catch (e) {}
  return 'vi';
};

// The active brand object — start empty, fill via applyTelco so it stays the
// SAME object reference everywhere (closures capture it once).
const VI = {};

const applyTelco = (id) => {
  const t = TELCOS[id] || TELCOS.vi;
  // wipe brand-specific keys, then assign shared + brand
  Object.keys(VI).forEach((k) => delete VI[k]);
  Object.assign(VI, SHARED, t);
  // reflect into the page chrome (outside React)
  try {
    document.title = `Login with ${t.name} — OTPless pitch`;
    const pill = document.getElementById('page-meta-pill');
    if (pill) pill.textContent = t.label;
  } catch (e) {}
  return id;
};

// initialise immediately so the very first render is already branded
applyTelco(resolveTelcoId());

// ── Logo ──────────────────────────────────────────────────────────────────
// `mode="white"` recolors to white for dark surfaces. `chip` wraps the mark in
// a light tile — used on dark CTAs for operators whose logo is dark (Jio).
const ViLogo = ({ height, mode = 'brand', chip = false }) => {
  const h = height || VI.logoH || 24;
  const img = (
    <img
      src={VI.logo}
      alt={VI.name}
      style={{
        height: h, width: 'auto', display: 'block',
        filter: mode === 'white' ? 'brightness(0) invert(1)' : 'none',
      }}
    />
  );
  if (!chip) return img;
  return (
    <div style={{
      background: '#fff', borderRadius: 8,
      padding: '5px 8px', display: 'inline-flex',
      alignItems: 'center', justifyContent: 'center',
      boxShadow: '0 1px 2px rgba(0,0,0,0.18)',
    }}>{img}</div>
  );
};

// Small circular brand badge — 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 }) => (
  <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 || VI.green} strokeWidth="1.3" fill="none" strokeLinejoin="round" />
    <path d="M5 7 L6.5 8.5 L9 5.8" stroke={color || VI.green} strokeWidth="1.4" fill="none"
      strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

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