// ─────────────────────────────────────────────────────────────
// Falcon — shared bits used across every screen
// Premium dark/light multi-currency banking. Powered by Kobble.
// ─────────────────────────────────────────────────────────────

// Brand tokens are read from CSS vars so the Tweaks panel can repaint
// every screen by mutating :root. Defaults below mirror the Kobble system.
const FALCON = {
  brand: 'Moneta',
  tagline: 'Payment rails · Worldwide',
};

// Moneta wordmark — "MONETA" with the E rendered as three bars (=),
// gradient running pink → light-blue → green, plus "Worldwide" subtitle.
function MonetaWordmark({ size = 18, dark = true, withSub = false }) {
  // size = letter height in px
  const w = size * 7.6, h = size * (withSub ? 1.7 : 1);
  const sub = dark ? '#FFFFFF' : '#0E1F1C';
  return (
    <svg width={w} height={h} viewBox={`0 0 152 ${withSub ? 34 : 20}`} style={{ display:'block' }}>
      <defs>
        <linearGradient id="mw-grad" x1="0" x2="1" y1="0" y2="0">
          <stop offset="0"   stopColor="#FF5DAA"/>
          <stop offset="0.5" stopColor="#5BD9EC"/>
          <stop offset="1"   stopColor="#3DD68C"/>
        </linearGradient>
      </defs>
      <text x="0" y="16"
        fill="url(#mw-grad)"
        style={{ fontFamily:'Montserrat, sans-serif', fontWeight: 300, fontSize: 18, letterSpacing: '0.04em' }}>
        MON<tspan style={{ letterSpacing: 0 }}>≡</tspan>TA
      </text>
      {withSub && (
        <text x="38" y="30" fill={sub}
          style={{ fontFamily:'Montserrat, sans-serif', fontWeight: 700, fontSize: 9, letterSpacing:'0.02em' }}>
          Worldwide
        </text>
      )}
    </svg>
  );
}

// SVG flag chips (small, monogram-style — no real flag artwork needed at this scale)
function FlagChip({ code, size = 22 }) {
  const palettes = {
    AED: { a: '#0E1F1C', b: '#0E1F1C', c: '#0E1F1C' }, // overridden below
    USD: { a: '#0E1F1C', b: '#0E1F1C', c: '#0E1F1C' },
    GBP: { a: '#0E1F1C', b: '#0E1F1C', c: '#0E1F1C' },
    EUR: { a: '#0E1F1C', b: '#0E1F1C', c: '#0E1F1C' },
  };
  // Stylised flag chips with simplified bands. These are intentionally
  // schematic — used as identity not literal flags.
  const flag = {
    AED: ( // UAE: red bar + green/white/black tricolour
      <svg width={size} height={size} viewBox="0 0 22 22">
        <defs><clipPath id={`c-aed-${size}`}><circle cx="11" cy="11" r="11"/></clipPath></defs>
        <g clipPath={`url(#c-aed-${size})`}>
          <rect x="0" y="0" width="6" height="22" fill="#CE1126"/>
          <rect x="6" y="0" width="16" height="7.3" fill="#00732F"/>
          <rect x="6" y="7.3" width="16" height="7.4" fill="#FFFFFF"/>
          <rect x="6" y="14.7" width="16" height="7.3" fill="#000000"/>
        </g>
      </svg>
    ),
    USD: (
      <svg width={size} height={size} viewBox="0 0 22 22">
        <defs><clipPath id={`c-usd-${size}`}><circle cx="11" cy="11" r="11"/></clipPath></defs>
        <g clipPath={`url(#c-usd-${size})`}>
          <rect x="0" y="0" width="22" height="22" fill="#FFFFFF"/>
          {[0,2,4,6,8,10].map((i) => <rect key={i} x="0" y={i*1.83} width="22" height="1.83" fill="#B22234"/>)}
          <rect x="0" y="0" width="11" height="11" fill="#3C3B6E"/>
        </g>
      </svg>
    ),
    GBP: (
      <svg width={size} height={size} viewBox="0 0 22 22">
        <defs><clipPath id={`c-gbp-${size}`}><circle cx="11" cy="11" r="11"/></clipPath></defs>
        <g clipPath={`url(#c-gbp-${size})`}>
          <rect width="22" height="22" fill="#012169"/>
          <path d="M0 0 L22 22 M22 0 L0 22" stroke="#FFFFFF" strokeWidth="3"/>
          <path d="M0 0 L22 22 M22 0 L0 22" stroke="#C8102E" strokeWidth="1.4"/>
          <path d="M11 0 V22 M0 11 H22" stroke="#FFFFFF" strokeWidth="4"/>
          <path d="M11 0 V22 M0 11 H22" stroke="#C8102E" strokeWidth="2.2"/>
        </g>
      </svg>
    ),
    EUR: (
      <svg width={size} height={size} viewBox="0 0 22 22">
        <defs><clipPath id={`c-eur-${size}`}><circle cx="11" cy="11" r="11"/></clipPath></defs>
        <g clipPath={`url(#c-eur-${size})`}>
          <rect width="22" height="22" fill="#003399"/>
          {Array.from({length:12}).map((_,i)=>{
            const a = (i/12)*Math.PI*2; const x = 11 + Math.cos(a)*6.5; const y = 11 + Math.sin(a)*6.5;
            return <circle key={i} cx={x} cy={y} r="0.9" fill="#FFCC00"/>;
          })}
        </g>
      </svg>
    ),
  };
  return <div style={{ width: size, height: size, lineHeight: 0 }}>{flag[code]}</div>;
}

// Currency formatter — keeps tabular alignment.
function fmt(n, code) {
  const symbols = { AED: 'AED ', USD: '$', GBP: '£', EUR: '€' };
  const s = (typeof n === 'number')
    ? n.toLocaleString('en-GB', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
    : n;
  return `${symbols[code] || ''}${s}`;
}

// Mock data
const WALLETS = [
  { code: 'AED', name: 'UAE Dirham',     balance: 2_184_650.40, change: '+1.2%', dir: 'up' },
  { code: 'GBP', name: 'British Pound',  balance:   312_480.12, change: '−0.4%', dir: 'down' },
  { code: 'USD', name: 'US Dollar',      balance:   486_220.00, change: '+0.6%', dir: 'up' },
  { code: 'EUR', name: 'Euro',           balance:    96_410.85, change: '+0.1%', dir: 'up' },
];

const TX = [
  { id:'TX-93021', kind:'fx',     desc:'Convert AED → GBP',          ts:'Today · 14:32',    amt:'−AED 80,000.00', sub:'+£17,144.20', cur:'AED', status:'settled' },
  { id:'TX-93019', kind:'out',    desc:'Al Madar Logistics LLC',     ts:'Today · 11:08',    amt:'−AED 42,500.00', sub:'Invoice #4421', cur:'AED', status:'settled' },
  { id:'TX-93015', kind:'in',     desc:'Sterling House Imports',     ts:'Yesterday · 16:44',amt:'+£28,200.00',     sub:'Receivable',    cur:'GBP', status:'settled' },
  { id:'TX-93010', kind:'fx',     desc:'Convert USD → AED',          ts:'Yesterday · 09:12',amt:'−$15,000.00',     sub:'+AED 55,094.25',cur:'USD', status:'settled' },
  { id:'TX-93002', kind:'out',    desc:'Munich Holdings GmbH',       ts:'25 Apr · 17:02',   amt:'−€8,420.00',      sub:'SEPA',          cur:'EUR', status:'pending' },
  { id:'TX-92998', kind:'in',     desc:'Etihad Aviation Group',      ts:'25 Apr · 12:30',   amt:'+AED 320,000.00', sub:'Wire',          cur:'AED', status:'settled' },
  { id:'TX-92994', kind:'fee',    desc:'FX margin · 12 bps',         ts:'25 Apr · 09:12',   amt:'−AED 96.00',      sub:'Auto',          cur:'AED', status:'settled' },
  { id:'TX-92987', kind:'fx',     desc:'Convert GBP → EUR',          ts:'24 Apr · 15:48',   amt:'−£12,000.00',     sub:'+€14,034.00',   cur:'GBP', status:'settled' },
  { id:'TX-92981', kind:'in',     desc:'Acme Logistics UK Ltd',      ts:'23 Apr · 10:21',   amt:'+£42,800.00',     sub:'SWIFT',         cur:'GBP', status:'settled' },
  { id:'TX-92970', kind:'out',    desc:'Dubai Tax Authority',        ts:'22 Apr · 09:00',   amt:'−AED 184,200.00', sub:'VAT Q1',        cur:'AED', status:'settled' },
];

const BENEFICIARIES = [
  { id:1, name:'Al Madar Logistics LLC', bank:'Emirates NBD',    iban:'AE07 0331 …4421', cur:'AED', favourite:true },
  { id:2, name:'Sterling House Imports', bank:'Barclays UK',     iban:'GB29 NWBK …8765', cur:'GBP', favourite:true },
  { id:3, name:'Munich Holdings GmbH',   bank:'Commerzbank',     iban:'DE89 3704 …2030', cur:'EUR', favourite:false },
  { id:4, name:'Northwind Trade Co.',    bank:'JPMorgan Chase',  iban:'041 0001 5391',   cur:'USD', favourite:false },
  { id:5, name:'Acme Logistics UK Ltd',  bank:'HSBC UK',         iban:'GB94 BARC …1208', cur:'GBP', favourite:false },
  { id:6, name:'Bin Salem Trading',      bank:'First Abu Dhabi', iban:'AE83 0260 …9112', cur:'AED', favourite:false },
];

// Tiny inline icon set (stroke-based, 1.5px, matches iconoir vocabulary)
function Icon({ name, size = 18, stroke = 'currentColor', sw = 1.6 }) {
  const p = {
    width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
    stroke, strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round',
  };
  switch (name) {
    case 'arrow-right':   return <svg {...p}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
    case 'arrow-left':    return <svg {...p}><path d="M19 12H5M11 19l-7-7 7-7"/></svg>;
    case 'arrow-up-right':return <svg {...p}><path d="M7 17 17 7M9 7h8v8"/></svg>;
    case 'arrow-down-left':return <svg {...p}><path d="M17 7 7 17M15 17H7V9"/></svg>;
    case 'swap':          return <svg {...p}><path d="M7 7h13l-3-3M17 17H4l3 3"/></svg>;
    case 'send':          return <svg {...p}><path d="M22 2 11 13M22 2l-7 20-4-9-9-4 20-7Z"/></svg>;
    case 'receive':       return <svg {...p}><path d="M12 4v14M5 12l7 7 7-7"/></svg>;
    case 'plus':          return <svg {...p}><path d="M12 5v14M5 12h14"/></svg>;
    case 'search':        return <svg {...p}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>;
    case 'filter':        return <svg {...p}><path d="M3 5h18l-7 9v6l-4-2v-4L3 5Z"/></svg>;
    case 'download':      return <svg {...p}><path d="M12 3v12M6 11l6 6 6-6M5 21h14"/></svg>;
    case 'check':         return <svg {...p}><path d="m5 12 5 5L20 7"/></svg>;
    case 'check-circle':  return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/></svg>;
    case 'star':          return <svg {...p}><path d="m12 3 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1Z"/></svg>;
    case 'star-filled':   return <svg width={size} height={size} viewBox="0 0 24 24" fill={stroke}><path d="m12 3 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1Z"/></svg>;
    case 'lock':          return <svg {...p}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>;
    case 'shield':        return <svg {...p}><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6l-8-3Z"/></svg>;
    case 'doc':           return <svg {...p}><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z"/><path d="M14 3v5h5M9 13h6M9 17h6"/></svg>;
    case 'chevron':       return <svg {...p}><path d="m9 6 6 6-6 6"/></svg>;
    case 'chevron-down':  return <svg {...p}><path d="m6 9 6 6 6-6"/></svg>;
    case 'clock':         return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case 'info':          return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M12 8v.01M11 12h1v4h1"/></svg>;
    case 'settings':      return <svg {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 0 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 0 1 0-4h.1A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 0 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 0 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"/></svg>;
    case 'logout':        return <svg {...p}><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg>;
    case 'home':          return <svg {...p}><path d="m3 12 9-9 9 9M5 10v10h14V10"/></svg>;
    case 'list':          return <svg {...p}><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>;
    case 'people':        return <svg {...p}><circle cx="9" cy="8" r="3"/><path d="M3 19c0-3 3-5 6-5s6 2 6 5M16 11a3 3 0 1 0 0-6M21 19c0-2-2-4-4-4.5"/></svg>;
    case 'sliders':       return <svg {...p}><path d="M4 21V14M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6"/></svg>;
    case 'eye':           return <svg {...p}><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></svg>;
    case 'spark':         return <svg {...p}><path d="M5 3v4M3 5h4M19 17v4M17 19h4M11 4l2 5 5 2-5 2-2 5-2-5-5-2 5-2 2-5Z"/></svg>;
    case 'building':      return <svg {...p}><path d="M3 21V7l9-4 9 4v14M9 21v-6h6v6M7 11h.01M11 11h.01M15 11h.01M7 15h.01"/></svg>;
    case 'badge-check':   return <svg {...p}><path d="m12 2 2.4 2.1 3.2-.4.7 3.1 3 1.5-1.4 2.9 1.4 2.9-3 1.5-.7 3.1-3.2-.4L12 22l-2.4-2.1-3.2.4-.7-3.1-3-1.5L4.1 12 2.7 9.1l3-1.5.7-3.1 3.2.4L12 2Z"/><path d="m9 12 2 2 4-4"/></svg>;
    case 'arrow-out':     return <svg {...p}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
    case 'more':          return <svg {...p}><circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/></svg>;
    case 'face-id':       return <svg {...p}><path d="M4 8V6a2 2 0 0 1 2-2h2M4 16v2a2 2 0 0 0 2 2h2M16 4h2a2 2 0 0 1 2 2v2M16 20h2a2 2 0 0 0 2-2v-2"/><path d="M9 10v1M15 10v1M9 15s1 1.5 3 1.5S15 15 15 15M12 9v3"/></svg>;
    case 'export':        return <svg {...p}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>;
  }
  return null;
}

Object.assign(window, { FALCON, FlagChip, fmt, WALLETS, TX, BENEFICIARIES, Icon, MonetaWordmark });