// Moneta screens — set B: Tx Detail, Beneficiaries, Statements, Settings/About

// ─────────────────────────────────────────────────────────────
// TX DETAIL — reads selected tx from store, handles fx vs out vs in
// ─────────────────────────────────────────────────────────────
function ScreenTxDetail({ dark }) {
  const txList = window.useAppStore(s => s.txList);
  const selectedId = window.useAppStore(s => s.selectedTxId);
  const tx = txList.find(t => t.id === selectedId) || txList[0];
  if (!tx) return null;

  const isFx   = tx.kind === 'fx';
  const isIn   = tx.kind === 'in';
  const isOut  = tx.kind === 'out';
  const heroIcon = isFx ? 'swap' : isIn ? 'arrow-down-left' : 'arrow-up-right';
  const heroLabel = isFx ? 'You converted' : isIn ? 'You received' : 'You sent';

  const SYM = { AED:'AED ', USD:'$', GBP:'£', EUR:'€' };
  const heroAmt = (() => {
    if (isFx) return `${SYM[tx.src]}${(tx.srcAmt||0).toLocaleString('en-GB', { minimumFractionDigits:2, maximumFractionDigits:2 })}`;
    return tx.amt.replace(/^[−+]/, '');
  })();
  const subAmt = isFx ? `${SYM[tx.dst]}${(tx.dstAmt||0).toLocaleString('en-GB',{minimumFractionDigits:2,maximumFractionDigits:2})}` : null;

  // Details rows — different fields per kind
  const rows = isFx ? [
    ['Reference', tx.id],
    ['Rate', tx.rate ? `1 ${tx.src} = ${tx.rate.toFixed(5)} ${tx.dst}` : '—'],
    ['Margin', '12 bps'],
    ['Source',      `${tx.src} Wallet`],
    ['Destination', `${tx.dst} Wallet`],
    ['Initiated by','Aisha Al Marri'],
    ['Approved by', 'Auto · within policy'],
  ] : isOut ? [
    ['Reference', tx.id],
    ['Recipient', tx.recipient || tx.desc],
    ['IBAN', tx.iban || '—'],
    ['Bank', tx.bank || '—'],
    ['Method', tx.method || 'SWIFT · gpi'],
    ['Note', tx.reference || tx.sub],
    ['Initiated by','Aisha Al Marri'],
  ] : [
    ['Reference', tx.id],
    ['From', tx.desc],
    ['Method', tx.sub],
    ['Currency', tx.cur],
    ['Received at', tx.ts.replace(' · ', ' at ')],
  ];

  // Timeline — synth based on tx kind
  const timeline = isFx ? [
    ['14:32:08', `Quote locked at ${tx.rate ? tx.rate.toFixed(5) : '—'}`],
    ['14:32:11', `${SYM[tx.src]}${(tx.srcAmt||0).toLocaleString('en-GB',{minimumFractionDigits:2})} debited`],
    ['14:32:11', `${SYM[tx.dst]}${(tx.dstAmt||0).toLocaleString('en-GB',{minimumFractionDigits:2})} credited`],
    ['14:32:12', 'Confirmation sent'],
  ] : isOut ? [
    ['Now', 'Payment instruction received'],
    ['Now', 'Compliance screening passed'],
    ['Now', `${tx.amt.replace('−','')} debited from wallet`],
    [tx.status==='settled' ? 'Now' : 'Pending', tx.status==='settled' ? 'Beneficiary credited' : 'Awaiting partner bank settlement'],
  ] : [
    ['Now', 'Funds arrived from sender'],
    ['Now', 'Compliance screening passed'],
    ['Now', `${tx.amt} credited`],
  ];

  const onRepeat = () => {
    if (isFx) {
      window.appStore.set({ fx: { from: tx.src, to: tx.dst, amount: String(tx.srcAmt || 0), lockedAt: Date.now(), lockSeconds: 30 } });
      window.nav('fx');
    } else if (isOut) {
      // Find the matching beneficiary if any
      const ben = (window.BENEFICIARIES || []).find(b => b.name === (tx.recipient || tx.desc));
      window.appStore.set({ sendDraft: { ...window.appStore.get().sendDraft, recipientId: ben ? ben.id : window.appStore.get().sendDraft.recipientId, amount: String(Math.abs(tx.srcAmt || tx.dstAmt || 28200)), reference: tx.reference || tx.sub || '' } });
      window.nav('beneficiaries');
    } else {
      window.appStore.showToast('Top-up details copied to clipboard');
    }
  };

  return (
    <div style={{ background: phoneStyles.surface(dark), height:'100%', display:'flex', flexDirection:'column', paddingTop: 56, paddingBottom: 80 }}>
      <ScreenHeader dark={dark} onBack={()=>window.nav('tx-list')}
        leading={<div style={{ width:34, height:34, borderRadius: 2, background: phoneStyles.cardAlt(dark), display:'flex', alignItems:'center', justifyContent:'center', color: phoneStyles.text(dark), cursor:'pointer' }}><Icon name="arrow-left" size={18}/></div>}
        title={isFx ? 'Conversion' : isOut ? 'Outgoing payment' : 'Incoming payment'}
        trailing={<div onClick={()=>window.appStore.showToast('Receipt downloaded')} role="button" style={{ cursor:'pointer', width:34, height:34, borderRadius: 2, background: phoneStyles.cardAlt(dark), display:'flex', alignItems:'center', justifyContent:'center', color: phoneStyles.text(dark) }}><Icon name="download" size={16}/></div>}
      />

      <div className="hide-scroll" style={{ flex: 1, overflowY: 'auto' }}>
      {/* Hero */}
      <div style={{ padding:'4px 16px 0', textAlign:'center' }}>
        <div style={{ width: 64, height: 64, borderRadius: 2, background: 'var(--falcon-primary)', color:'var(--falcon-on-primary)', display:'inline-flex', alignItems:'center', justifyContent:'center' }}>
          <Icon name={heroIcon} size={26} stroke="var(--falcon-on-primary)" sw={2}/>
        </div>
        <div style={{ marginTop: 14, fontSize: 12, color: phoneStyles.muted(dark), fontWeight:600, letterSpacing:'0.06em', textTransform:'uppercase' }}>{heroLabel}</div>
        <div style={{ marginTop: 6, fontFamily:'Montserrat', fontWeight:700, fontSize: 32, letterSpacing:'-0.02em', color: phoneStyles.text(dark), fontVariantNumeric:'tabular-nums' }}>
          {heroAmt}
        </div>
        {subAmt && (
          <div style={{ display:'flex', alignItems:'center', justifyContent:'center', gap:8, marginTop: 6, fontSize: 14, color:'var(--falcon-primary)', fontWeight: 600 }}>
            <Icon name="arrow-right" size={14} stroke="var(--falcon-primary)"/> {subAmt}
          </div>
        )}
        <div style={{ display:'inline-flex', alignItems:'center', gap:6, marginTop:14, padding:'4px 10px', background: tx.status==='pending' ? 'rgba(240,173,78,0.15)' : 'rgba(52,172,18,0.12)', color: tx.status==='pending' ? '#A06813' : '#2C8F0F', borderRadius: 2, fontSize: 11, fontWeight: 600 }}>
          <Icon name={tx.status==='pending' ? 'clock' : 'check-circle'} size={12} stroke={tx.status==='pending' ? '#A06813' : '#2C8F0F'}/>
          {tx.status==='pending' ? 'Pending settlement' : `Settled · ${tx.ts}`}
        </div>
      </div>

      {/* Details */}
      <div style={{ margin:'18px 16px 0', borderRadius: 3, background: phoneStyles.card(dark), border:`1px solid ${phoneStyles.border(dark)}`, padding:'4px 16px' }}>
        {rows.map(([k,v],i,a)=>(
          <div key={k} style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'12px 0', gap: 12, borderBottom: i<a.length-1?`1px solid ${phoneStyles.border(dark)}`:'none' }}>
            <span style={{ fontSize: 12, color: phoneStyles.muted(dark) }}>{k}</span>
            <span style={{ fontSize: 13, fontWeight: 600, color: phoneStyles.text(dark), fontFamily: (k==='Reference'||k==='Rate'||k==='IBAN') ? 'JetBrains Mono, monospace' : 'inherit', fontVariantNumeric:'tabular-nums', textAlign:'right', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{v}</span>
          </div>
        ))}
      </div>

      {/* Timeline */}
      <div style={{ margin:'12px 16px 16px', borderRadius: 3, background: phoneStyles.card(dark), border:`1px solid ${phoneStyles.border(dark)}`, padding: 16 }}>
        <div style={{ fontSize: 11, color: phoneStyles.muted(dark), fontWeight:600, letterSpacing:'0.06em', textTransform:'uppercase', marginBottom: 10 }}>Timeline</div>
        {timeline.map(([t,d],i,a)=>(
          <div key={i} style={{ display:'flex', gap: 12, paddingBottom: i<a.length-1?12:0 }}>
            <div style={{ display:'flex', flexDirection:'column', alignItems:'center' }}>
              <div style={{ width: 10, height: 10, borderRadius: 2, background: 'var(--falcon-primary)' }}/>
              {i<a.length-1 && <div style={{ flex:1, width: 1.5, background: phoneStyles.border(dark), marginTop: 2 }}/>}
            </div>
            <div style={{ flex:1, paddingBottom: 4 }}>
              <div style={{ fontSize: 12, fontWeight: 600, color: phoneStyles.text(dark) }}>{d}</div>
              <div style={{ fontSize: 11, color: phoneStyles.muted(dark), fontFamily:'JetBrains Mono, monospace' }}>{t}</div>
            </div>
          </div>
        ))}
      </div>
      </div>

      <div style={{ padding:'8px 16px 0', display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10 }}>
        <button onClick={()=>window.appStore.showToast('Receipt downloaded')} style={{ height: 48, borderRadius: 2, border:`1px solid ${phoneStyles.border(dark)}`, background: phoneStyles.card(dark), color: phoneStyles.text(dark), fontWeight:600, fontSize: 13, display:'flex', alignItems:'center', justifyContent:'center', gap:6, cursor:'pointer' }}>
          <Icon name="download" size={14} stroke={phoneStyles.text(dark)}/> Receipt
        </button>
        <button onClick={onRepeat} style={{ height: 48, borderRadius: 2, border:0, background:'var(--falcon-primary)', color:'var(--falcon-on-primary)', fontWeight:600, fontSize: 13, display:'flex', alignItems:'center', justifyContent:'center', gap:6, cursor:'pointer' }}>
          <Icon name={isFx?'swap':'arrow-up-right'} size={14} stroke="var(--falcon-on-primary)"/> Repeat
        </button>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// BENEFICIARIES — tapping a row prefills sendDraft + opens send sheet
// ─────────────────────────────────────────────────────────────
function ScreenBeneficiaries({ dark }) {
  const [filterCur, setFilterCur] = React.useState('All');
  const all = window.BENEFICIARIES;
  const filtered = filterCur === 'All' ? all : all.filter(b => b.cur === filterCur);
  const fav  = filtered.filter(b => b.favourite);
  const rest = filtered.filter(b => !b.favourite);

  const counts = { All: all.length, AED: 0, GBP: 0, EUR: 0, USD: 0 };
  all.forEach(b => { counts[b.cur] = (counts[b.cur] || 0) + 1; });

  const pickRecipient = (b) => {
    // Set a sensible default amount per currency
    const defaultAmts = { AED: '42500', GBP: '28200', EUR: '8420', USD: '15000' };
    const draft = window.appStore.get().sendDraft;
    window.appStore.set({ sendDraft: {
      ...draft,
      recipientId: b.id,
      currency: b.cur,
      amount: draft.recipientId === b.id ? draft.amount : defaultAmts[b.cur] || '1000',
    }});
    window.nav('send');
  };

  const Row = ({ b, last }) => (
    <div onClick={()=>pickRecipient(b)} role="button" style={{ cursor:'pointer', display:'flex', alignItems:'center', gap: 12, padding:'12px 0', borderBottom: !last ? `1px solid ${phoneStyles.border(dark)}` : 'none' }}>
      <div style={{ width: 40, height:40, borderRadius: 2, background: 'var(--falcon-primary)', color:'var(--falcon-on-primary)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'Montserrat', fontWeight:700, fontSize: 13 }}>
        {b.name.split(' ').slice(0,2).map(s=>s[0]).join('')}
      </div>
      <div style={{ flex:1, minWidth:0 }}>
        <div style={{ display:'flex', alignItems:'center', gap:6 }}>
          <span style={{ fontSize: 13, fontWeight: 600, color: phoneStyles.text(dark), whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{b.name}</span>
          {b.favourite && <Icon name="star-filled" size={11} stroke="var(--falcon-accent-strong)"/>}
        </div>
        <div style={{ fontSize: 11, color: phoneStyles.muted(dark), fontFamily:'JetBrains Mono, monospace', marginTop: 2 }}>{b.iban}</div>
      </div>
      <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
        <FlagChip code={b.cur} size={16}/>
        <span style={{ fontSize: 11, fontWeight:600, color: phoneStyles.muted(dark) }}>{b.cur}</span>
      </div>
      <Icon name="chevron" size={14} stroke={phoneStyles.faint(dark)}/>
    </div>
  );

  return (
    <div style={{ background: phoneStyles.surface(dark), height:'100%', display:'flex', flexDirection:'column', paddingTop: 56, paddingBottom: 80 }}>
      <ScreenHeader dark={dark} title="Beneficiaries" subtitle={`${all.length} active across 4 currencies`}
        onBack={()=>window.nav('home')}
        trailing={<div onClick={()=>window.appStore.showToast('Add beneficiary — coming soon')} role="button" style={{ cursor:'pointer', height: 34, padding: '0 12px', borderRadius: 2, background:'var(--falcon-primary)', color:'var(--falcon-on-primary)', display:'flex',alignItems:'center', gap:6, fontSize: 12, fontWeight: 600 }}><Icon name="plus" size={14} stroke="var(--falcon-on-primary)" sw={2.2}/> Add</div>}
      />

      {/* Search */}
      <div style={{ padding:'2px 16px 12px' }}>
        <div onClick={()=>window.appStore.showToast('Search coming soon')} role="button" style={{ cursor:'pointer', display:'flex', alignItems:'center', gap:10, background: phoneStyles.card(dark), border:`1px solid ${phoneStyles.border(dark)}`, borderRadius: 2, padding:'10px 14px' }}>
          <Icon name="search" size={16} stroke={phoneStyles.muted(dark)}/>
          <span style={{ fontSize: 13, color: phoneStyles.muted(dark) }}>Search by name, IBAN, or bank</span>
        </div>
      </div>

      {/* Currency filter row */}
      <div className="hide-scroll" style={{ display:'flex', gap: 8, padding:'0 16px 14px', overflowX:'auto' }}>
        {['All','AED','GBP','EUR','USD'].map((c) => {
          const active = c === filterCur;
          return (
            <div key={c} onClick={()=>setFilterCur(c)} role="button" style={{
              cursor:'pointer',
              display:'flex', alignItems:'center', gap: 6,
              padding:'6px 12px', borderRadius: 2, fontSize: 12, fontWeight: 600,
              background: active ? 'var(--falcon-primary)' : phoneStyles.card(dark),
              color: active ? 'var(--falcon-on-primary)' : phoneStyles.text(dark),
              border: `1px solid ${active ? 'transparent' : phoneStyles.border(dark)}`,
              whiteSpace:'nowrap',
            }}>{c} <span style={{ opacity: 0.7 }}>{counts[c] || 0}</span></div>
          );
        })}
      </div>

      <div className="hide-scroll" style={{ flex:1, overflowY:'auto', padding:'0 16px' }}>
        {fav.length > 0 && (
          <>
            <div style={{ fontSize: 11, fontWeight:600, letterSpacing:'0.08em', textTransform:'uppercase', color: phoneStyles.faint(dark), padding:'4px 4px 6px' }}>Favourites</div>
            <div style={{ background: phoneStyles.card(dark), borderRadius: 3, border:`1px solid ${phoneStyles.border(dark)}`, padding:'2px 14px', marginBottom: 14 }}>
              {fav.map((b,i)=>(<Row key={b.id} b={b} last={i===fav.length-1}/>))}
            </div>
          </>
        )}
        {rest.length > 0 && (
          <>
            <div style={{ fontSize: 11, fontWeight:600, letterSpacing:'0.08em', textTransform:'uppercase', color: phoneStyles.faint(dark), padding:'4px 4px 6px' }}>All beneficiaries</div>
            <div style={{ background: phoneStyles.card(dark), borderRadius: 3, border:`1px solid ${phoneStyles.border(dark)}`, padding:'2px 14px' }}>
              {rest.map((b,i)=>(<Row key={b.id} b={b} last={i===rest.length-1}/>))}
            </div>
          </>
        )}
        {filtered.length === 0 && (
          <div style={{ padding: 24, textAlign:'center', fontSize: 12, color: phoneStyles.muted(dark) }}>No beneficiaries in {filterCur}</div>
        )}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// STATEMENTS
// ─────────────────────────────────────────────────────────────
function ScreenStatements({ dark }) {
  const [format, setFormat] = React.useState('PDF');
  const months = [
    { m:'April 2026',  range:'1 – 27 Apr',  net:'+AED 278,860', tx: 142, status:'In progress' },
    { m:'March 2026',  range:'Full month',  net:'+AED 412,180', tx: 168, status:'Ready' },
    { m:'February 2026',range:'Full month', net:'−AED 88,420',  tx: 121, status:'Ready' },
    { m:'January 2026',range:'Full month',  net:'+AED 612,002', tx: 198, status:'Ready' },
    { m:'December 2025',range:'Full month', net:'+AED 184,300', tx: 156, status:'Ready' },
  ];
  const onMonth = (m) => {
    if (m.status === 'Ready') window.appStore.showToast(`${m.m} statement (${format}) downloaded`);
    else window.appStore.showToast(`${m.m} still in progress`);
  };
  return (
    <div style={{ background: phoneStyles.surface(dark), height:'100%', display:'flex', flexDirection:'column', paddingTop: 56, paddingBottom: 80 }}>
      <ScreenHeader dark={dark} title="Statements" subtitle="Multi-currency · downloadable" onBack={()=>window.nav('settings')}/>

      {/* Custom range card */}
      <div style={{ margin:'4px 16px 0', padding: 16, borderRadius: 3, background: phoneStyles.card(dark), border:`1px solid ${phoneStyles.border(dark)}` }}>
        <div style={{ fontSize: 11, color: phoneStyles.muted(dark), fontWeight:600, letterSpacing:'0.06em', textTransform:'uppercase' }}>Custom range</div>
        <div style={{ display:'flex', alignItems:'center', gap: 10, marginTop: 12 }}>
          <div style={{ flex:1, padding:'10px 12px', borderRadius: 2, background: phoneStyles.cardAlt(dark), border:`1px solid ${phoneStyles.border(dark)}` }}>
            <div style={{ fontSize: 10, color: phoneStyles.muted(dark) }}>From</div>
            <div style={{ fontSize: 13, fontWeight:600, color: phoneStyles.text(dark), marginTop: 2 }}>1 Jan 2026</div>
          </div>
          <Icon name="arrow-right" size={14} stroke={phoneStyles.muted(dark)}/>
          <div style={{ flex:1, padding:'10px 12px', borderRadius: 2, background: phoneStyles.cardAlt(dark), border:`1px solid ${phoneStyles.border(dark)}` }}>
            <div style={{ fontSize: 10, color: phoneStyles.muted(dark) }}>To</div>
            <div style={{ fontSize: 13, fontWeight:600, color: phoneStyles.text(dark), marginTop: 2 }}>27 Apr 2026</div>
          </div>
        </div>
        <div style={{ display:'flex', gap: 8, marginTop: 12, alignItems:'center' }}>
          {['PDF','CSV','MT940'].map((f) => (
            <div key={f} onClick={()=>setFormat(f)} role="button" style={{
              cursor:'pointer',
              padding:'6px 12px', borderRadius: 2, fontSize: 12, fontWeight: 600,
              background: f===format ? 'var(--falcon-primary)' : phoneStyles.cardAlt(dark),
              color: f===format ? 'var(--falcon-on-primary)' : phoneStyles.text(dark),
              border: `1px solid ${f===format ? 'transparent' : phoneStyles.border(dark)}`,
            }}>{f}</div>
          ))}
          <div style={{ flex:1 }}/>
          <button onClick={()=>window.appStore.showToast(`Statement (${format}) generated`)} style={{ cursor:'pointer', padding:'6px 14px', borderRadius: 2, border: 0, background:'var(--falcon-primary)', color:'var(--falcon-on-primary)', fontSize: 12, fontWeight: 600, display:'flex', alignItems:'center', gap: 6 }}>
            <Icon name="download" size={13} stroke="var(--falcon-on-primary)"/> Generate
          </button>
        </div>
      </div>

      {/* By month */}
      <div style={{ padding: '20px 16px 6px', fontSize: 11, fontWeight: 600, letterSpacing:'0.08em', textTransform:'uppercase', color: phoneStyles.faint(dark) }}>By month</div>
      <div className="hide-scroll" style={{ flex:1, overflowY:'auto', padding:'0 16px' }}>
        <div style={{ background: phoneStyles.card(dark), borderRadius: 3, border:`1px solid ${phoneStyles.border(dark)}`, padding:'2px 14px' }}>
          {months.map((m,i)=>(
            <div key={m.m} onClick={()=>onMonth(m)} role="button" style={{ cursor:'pointer', display:'flex', alignItems:'center', gap: 12, padding:'14px 0', borderBottom: i<months.length-1?`1px solid ${phoneStyles.border(dark)}`:'none' }}>
              <div style={{ width: 40, height:40, borderRadius: 2, background: phoneStyles.cardAlt(dark), display:'flex',alignItems:'center', justifyContent:'center', color: phoneStyles.text(dark) }}>
                <Icon name="doc" size={18}/>
              </div>
              <div style={{ flex:1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: phoneStyles.text(dark) }}>{m.m}</div>
                <div style={{ fontSize: 11, color: phoneStyles.muted(dark) }}>{m.range} · {m.tx} transactions</div>
              </div>
              <div style={{ textAlign:'right' }}>
                <div style={{ fontSize: 12, fontWeight: 600, color: m.net.startsWith('+')?'#34AC12':phoneStyles.text(dark), fontVariantNumeric:'tabular-nums' }}>{m.net}</div>
                <div style={{ fontSize: 10, color: m.status==='Ready' ? 'var(--falcon-primary)' : '#A06813', fontWeight: 600, marginTop: 2 }}>{m.status}</div>
              </div>
              <Icon name={m.status==='Ready'?'download':'chevron'} size={15} stroke={phoneStyles.muted(dark)}/>
            </div>
          ))}
        </div>
        <div style={{ fontSize: 11, color: phoneStyles.faint(dark), textAlign:'center', margin: 16 }}>Statements retained for 7 years per ADGM regulation</div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// SETTINGS — interactive toggles + sign out
// ─────────────────────────────────────────────────────────────
function ScreenSettings({ dark }) {
  const settings = window.useAppStore(s => s.settings);
  const toggle = (k) => window.appStore.update(`settings.${k}`, !settings[k]);

  const Section = ({ title, children }) => (
    <div style={{ marginBottom: 18 }}>
      <div style={{ fontSize: 11, fontWeight:600, letterSpacing:'0.08em', textTransform:'uppercase', color: phoneStyles.faint(dark), padding:'4px 4px 8px' }}>{title}</div>
      <div style={{ background: phoneStyles.card(dark), borderRadius: 3, border:`1px solid ${phoneStyles.border(dark)}`, padding:'2px 14px' }}>
        {children}
      </div>
    </div>
  );
  const Row = ({ icon, title, sub, trail, last, onClick }) => (
    <div onClick={onClick} role={onClick?'button':undefined} style={{ cursor: onClick ? 'pointer' : 'default', display:'flex', alignItems:'center', gap:12, padding:'12px 0', borderBottom: !last ? `1px solid ${phoneStyles.border(dark)}` : 'none' }}>
      <div style={{ width: 32, height: 32, borderRadius: 2, background: phoneStyles.cardAlt(dark), display:'flex',alignItems:'center', justifyContent:'center', color: phoneStyles.text(dark) }}>
        <Icon name={icon} size={15}/>
      </div>
      <div style={{ flex:1, minWidth: 0 }}>
        <div style={{ fontSize: 13, fontWeight:600, color: phoneStyles.text(dark) }}>{title}</div>
        {sub && <div style={{ fontSize: 11, color: phoneStyles.muted(dark), marginTop: 1 }}>{sub}</div>}
      </div>
      {trail || (onClick && <Icon name="chevron" size={13} stroke={phoneStyles.faint(dark)}/>)}
    </div>
  );

  const KobbleMark = () => (
    <img src="assets/kobble-logo.png" alt="Kobble" style={{ height: 26, width: 'auto', display: 'block', filter: dark ? 'brightness(0) invert(1) sepia(1) hue-rotate(150deg) saturate(4)' : 'none' }}/>
  );

  const onSignOut = () => {
    window.appStore.set({ kybStep: 3 });
    window.appStore.showToast('Signed out');
    window.nav('onboarding');
  };

  return (
    <div style={{ background: phoneStyles.surface(dark), height:'100%', display:'flex', flexDirection:'column', paddingTop: 56, paddingBottom: 80 }}>
      <ScreenHeader dark={dark} title="More" onBack={()=>window.nav('home')}/>

      <div className="hide-scroll" style={{ flex:1, overflowY:'auto', padding:'0 16px' }}>
        {/* Profile card */}
        <div style={{ display:'flex', alignItems:'center', gap: 14, padding: 16, borderRadius: 3, background: phoneStyles.card(dark), border:`1px solid ${phoneStyles.border(dark)}`, marginBottom: 18 }}>
          <div style={{ width: 52, height: 52, borderRadius: 3, background: 'var(--falcon-primary)', color:'var(--falcon-on-primary)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'Montserrat', fontWeight: 700, fontSize: 17 }}>AM</div>
          <div style={{ flex:1, minWidth: 0 }}>
            <div style={{ fontSize: 15, fontWeight:700, color: phoneStyles.text(dark), fontFamily:'Montserrat', letterSpacing:'-0.01em' }}>Aisha Al Marri</div>
            <div style={{ fontSize: 12, color: phoneStyles.muted(dark) }}>Director · Northwind Trade Co.</div>
            <div style={{ fontSize: 11, color:'var(--falcon-primary)', fontWeight: 600, marginTop: 4, display:'flex', alignItems:'center', gap: 4 }}>
              <Icon name="badge-check" size={11} stroke="var(--falcon-primary)"/> Authorised signatory · KYB verified
            </div>
          </div>
        </div>

        <Section title="Account">
          <Row icon="building"   title="Business profile"   sub="Trade licence, address, sector" onClick={()=>window.appStore.showToast('Business profile')}/>
          <Row icon="people"     title="Team & permissions" sub="4 users · 2 admins" onClick={()=>window.appStore.showToast('Team & permissions')}/>
          <Row icon="shield"     title="Security"           sub={`Face ID ${settings.faceId?'on':'off'} · 2FA ${settings.twoFactor?'enabled':'off'}`} onClick={()=>window.appStore.showToast('Security')}/>
          <Row icon="badge-check" title="Compliance"        sub="KYB renewed Mar 2026" last onClick={()=>window.appStore.showToast('Compliance')}/>
        </Section>

        <Section title="Preferences">
          <Row icon="eye"     title="Hide balances on home" trail={<Toggle on={settings.hideBalances} dark={dark} onClick={()=>toggle('hideBalances')}/>}/>
          <Row icon="face-id" title="Sign in with Face ID"  trail={<Toggle on={settings.faceId} dark={dark} onClick={()=>toggle('faceId')}/>}/>
          <Row icon="shield"  title="Two-factor auth"       trail={<Toggle on={settings.twoFactor} dark={dark} onClick={()=>toggle('twoFactor')}/>}/>
          <Row icon="info"    title="Push notifications"    trail={<Toggle on={settings.pushNotifications} dark={dark} onClick={()=>toggle('pushNotifications')}/>}/>
          <Row icon="info"    title="Email notifications"   trail={<Toggle on={settings.emailNotifications} dark={dark} onClick={()=>toggle('emailNotifications')}/>}/>
          <Row icon="info"    title="SMS notifications"     trail={<Toggle on={settings.smsNotifications} dark={dark} onClick={()=>toggle('smsNotifications')}/>} last/>
        </Section>

        <Section title="Documents & support">
          <Row icon="doc"     title="Statements" sub="Monthly · downloadable" onClick={()=>window.nav('statements')}/>
          <Row icon="export"  title="Reports & exports" sub="PDF · CSV · MT940" onClick={()=>window.nav('statements')}/>
          <Row icon="info"    title="Help & support" sub="24/7 in 4 languages" last onClick={()=>window.appStore.showToast('Connecting to support…')}/>
        </Section>

        {/* Powered by Kobble — explicit disclosure block */}
        <div style={{ marginBottom: 18 }}>
          <div style={{ fontSize: 11, fontWeight:600, letterSpacing:'0.08em', textTransform:'uppercase', color: phoneStyles.faint(dark), padding:'4px 4px 8px' }}>Legal & infrastructure</div>
          <div style={{ background: phoneStyles.card(dark), borderRadius: 3, border:`1px solid ${phoneStyles.border(dark)}`, padding: 16 }}>
            <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
              <div style={{ fontSize: 11, fontWeight:600, letterSpacing:'0.06em', textTransform:'uppercase', color: phoneStyles.muted(dark) }}>Powered by</div>
              <KobbleMark/>
            </div>
            <div style={{ fontSize: 12, color: phoneStyles.text(dark), marginTop: 10, lineHeight: 1.55 }}>
              Moneta Worldwide banking services are provided through <b style={{ color: dark?'#02C3DE':'#00574E' }}>Kobble</b>'s regulated banking-as-a-service infrastructure. Multi-currency wallets, FX, and payment rails are delivered via Kobble's licensed banking partners under ADGM and DIFC.
            </div>
            <div style={{ height: 1, background: phoneStyles.border(dark), margin: '14px 0' }}/>
            {[
              ['Terms of service',     'moneta.world/terms'],
              ['Privacy policy',       'moneta.world/privacy'],
              ['Kobble platform terms','kobble.com.au/terms'],
              ['Regulatory disclosures','ADGM · AFSL · AUSTRAC'],
            ].map(([k,v],i,a)=>(
              <div key={k} onClick={()=>window.appStore.showToast(`Opening ${v}`)} role="button" style={{ cursor:'pointer', display:'flex', justifyContent:'space-between', alignItems:'center', padding:'9px 0', borderBottom: i<a.length-1?`1px solid ${phoneStyles.border(dark)}`:'none' }}>
                <span style={{ fontSize: 12, color: phoneStyles.text(dark), fontWeight: 500 }}>{k}</span>
                <div style={{ display:'flex', alignItems:'center', gap: 6, fontSize: 11, color: phoneStyles.muted(dark), fontFamily:'JetBrains Mono, monospace' }}>{v}<Icon name="arrow-up-right" size={11} stroke={phoneStyles.muted(dark)}/></div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ background: phoneStyles.card(dark), borderRadius: 3, border:`1px solid ${phoneStyles.border(dark)}`, padding:'2px 14px', marginBottom: 18 }}>
          <Row icon="logout" title="Sign out" last onClick={onSignOut}/>
        </div>

        <div style={{ textAlign:'center', fontSize: 11, color: phoneStyles.faint(dark), padding: '4px 0 8px' }}>
          Moneta Worldwide · v1.4.2 (build 2614)<br/>
          © 2026 Moneta Worldwide Holdings Ltd. Operated on Kobble.
        </div>
      </div>
    </div>
  );
}

function Toggle({ on, dark, onClick }) {
  return (
    <div onClick={onClick} role={onClick?'button':undefined} style={{
      cursor: onClick ? 'pointer' : 'default',
      width: 38, height: 22, borderRadius: 999,
      background: on ? 'var(--falcon-primary)' : (dark ? 'rgba(255,255,255,0.15)' : 'rgba(14,31,28,0.18)'),
      position:'relative',
      transition:'background .15s',
    }}>
      <div style={{ position:'absolute', top: 2, left: on ? 18 : 2, width: 18, height: 18, borderRadius: 999, background:'#fff', boxShadow:'0 1px 3px rgba(0,0,0,0.2)', transition:'left .15s' }}/>
    </div>
  );
}

Object.assign(window, { ScreenTxDetail, ScreenBeneficiaries, ScreenStatements, ScreenSettings, Toggle });