/* Clear Mint — extra pages: Family Members, Activity, Bank Connect.
   Compact, wired to real CM data. window.PageFamilyMembers / PageActivity /
   PageBankConnect. Depends on cm-charts (CMIcon) + cm-data + cm-ai-kit (useStore). */
(function () {
const Ic = window.CMIcon;
const G='#10915F', GOLD='var(--gold)', TEAL='#0E9F8E', BL='#3E7CC4', PU='#8A6E9E', PINK='#D8688F', SL='#9AA7B2', RD='var(--red-500)', AM='#B5740F';
const usd0 = n => '$' + Math.round(Number(n||0)).toLocaleString('en-CA');
const initials = n => (n||'').split(' ').map(w=>w[0]).slice(0,2).join('').toUpperCase();
const ROLE_C = { Admin:G, Self:G, Partner:PU, Spouse:PU, Teen:BL, Child:AM, Member:TEAL, Viewer:SL };

function Card({ children, style }) {
  return <div className="cm-tile" style={{background:'var(--surface)', border:'1px solid var(--line)', borderRadius:'var(--r-card)', padding:'22px 24px', ...style}}>{children}</div>;
}
function SectionTitle({ children, sub }) {
  return <div style={{marginBottom:16}}><div className="st-mini-title">{children}</div>{sub && <div className="st-mini-sub">{sub}</div>}</div>;
}

/* ============================ FAMILY MEMBERS ============================ */
function PageFamilyMembers() {
  const CM = window.useStore ? window.useStore() : window.CM;
  const fam = CM.S.family || [];
  const accts = CM.S.accounts || [];
  const cards = CM.S.cards || [];
  const palette = [G,PU,BL,AM,TEAL,PINK];
  return (
    <div style={{display:'flex', flexDirection:'column', gap:20}}>
      <div className="st-summary" style={{borderRadius:'var(--r-card)', overflow:'hidden', border:'1px solid var(--line)'}}>
        {[['Members', String(fam.length), G],['Admins', String(fam.filter(m=>/admin|self/i.test((m.role||'')+(m.relation||''))).length||1), PU],['Linked Accounts', String(accts.length), TEAL],['Shared Cards', String(cards.length), AM]].map((s,i)=>(
          <div className="st-tile" key={i}>
            <div className="st-tile-label">{s[0]}</div>
            <div className="st-tile-val num" style={{color:s[2]}}>{s[1]}</div>
          </div>
        ))}
      </div>
      <Card>
        <div className="cm-row" style={{justifyContent:'space-between', marginBottom:16}}>
          <SectionTitle sub="Everyone with access to your family workspace">Household Members</SectionTitle>
          <button className="cm-btn cm-btn-primary"><Ic.Plus size={16}/>Invite Member</button>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(280px,1fr))', gap:14}}>
          {fam.length ? fam.map((m,i)=>{
            const role = m.role || (/(self)/i.test(m.relation||'')?'Admin':'Member');
            const col = ROLE_C[role] || palette[i%palette.length];
            return (
              <div key={i} style={{display:'flex', alignItems:'center', gap:13, padding:'16px 16px', border:'1px solid var(--line)', borderRadius:'var(--r-ctrl)'}}>
                <span style={{width:46, height:46, flex:'0 0 46px', borderRadius:'50%', background:m.color||col, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:800, fontSize:16}}>{initials(m.name)}</span>
                <div style={{flex:1, minWidth:0}}>
                  <div className="t-label" style={{color:'var(--ink-900)', fontSize:14.5}}>{m.name}</div>
                  <div className="t-caption">{m.relation || role}{m.age?` · Age ${m.age}`:''}</div>
                </div>
                <span className="cm-pill" style={{background:'var(--mint-50)', color:col, fontWeight:700}}>{role}</span>
              </div>
            );
          }) : <div className="t-caption">No family members yet — invite someone to get started.</div>}
        </div>
      </Card>
    </div>
  );
}

/* ============================ ACTIVITY ============================ */
function PageActivity() {
  const CM = window.useStore ? window.useStore() : window.CM;
  const [who, setWho] = React.useState('All');

  const entries = (CM.familyActivity ? CM.familyActivity() : (CM.S.activityLog||[]).slice())
    .map(a => ({
      who: a.who || a.user || 'You',
      role: a.role || '',
      cat: a.cat || 'general',
      action: a.action || a.what || a.msg || 'made a change',
      detail: a.detail || '',
      ts: a.ts || a.when || a.date || ''
    }));

  const ACT_META = {
    import:     { Ic: Ic.Transactions, c: G },
    account:    { Ic: Ic.Bank,         c: G },
    card:       { Ic: Ic.Card,         c: PU },
    bill:       { Ic: Ic.Bills,        c: AM },
    goal:       { Ic: Ic.Goals,        c: TEAL },
    vault:      { Ic: Ic.Vault,        c: BL },
    member:     { Ic: Ic.User,         c: '#C79A3B' },
    budget:     { Ic: Ic.Budget,       c: PINK },
    investment: { Ic: Ic.Investments,  c: PU },
    insurance:  { Ic: Ic.Insurance,    c: TEAL },
    settings:   { Ic: Ic.Settings,     c: SL },
    login:      { Ic: Ic.Lock,         c: SL },
    report:     { Ic: Ic.Reports,      c: BL },
    general:    { Ic: Ic.Spark,        c: G }
  };
  const palette = [G,PU,BL,AM,TEAL,PINK];
  const memberColor = (n) => { let h=0; for(let i=0;i<(n||'').length;i++) h=(h*31+n.charCodeAt(i))|0; return palette[Math.abs(h)%palette.length]; };

  const D = (ts) => { const d = ts instanceof Date ? ts : new Date(ts); return isNaN(d) ? null : d; };
  const timeAgo = (ts) => {
    const d = D(ts); if(!d) return '';
    const s = Math.floor((Date.now()-d.getTime())/1000);
    if(s<60) return 'Just now';
    if(s<3600) return Math.floor(s/60)+'m ago';
    if(s<86400) return Math.floor(s/3600)+'h ago';
    const days = Math.floor(s/86400);
    if(days===1) return 'Yesterday';
    if(days<7) return days+'d ago';
    return d.toLocaleDateString('en-CA',{month:'short',day:'numeric'});
  };
  const dayKey = (ts) => {
    const d = D(ts); if(!d) return 'Earlier';
    const t = new Date(); t.setHours(0,0,0,0);
    const diff = Math.floor((t - new Date(d.getFullYear(),d.getMonth(),d.getDate()))/86400000);
    if(diff<=0) return 'Today';
    if(diff===1) return 'Yesterday';
    if(diff<7) return 'This week';
    if(diff<30) return 'This month';
    return 'Earlier';
  };

  const people = ['All'].concat(entries.reduce((acc,e)=>{ if(acc.indexOf(e.who)<0) acc.push(e.who); return acc; },[]));
  const filtered = who==='All' ? entries : entries.filter(e=>e.who===who);

  // summary stats
  const todayCount = entries.filter(e => dayKey(e.ts)==='Today').length;
  const activeMembers = entries.reduce((acc,e)=>{ if(acc.indexOf(e.who)<0) acc.push(e.who); return acc; },[]).length;

  // group filtered entries by day bucket, preserving order
  const order = ['Today','Yesterday','This week','This month','Earlier'];
  const groups = {};
  filtered.forEach(e => { const k=dayKey(e.ts); (groups[k]=groups[k]||[]).push(e); });
  const groupList = order.filter(k=>groups[k] && groups[k].length);

  return (
    <div style={{display:'flex', flexDirection:'column', gap:20, maxWidth:900}}>
      <div className="st-summary" style={{borderRadius:'var(--r-card)', overflow:'hidden', border:'1px solid var(--line)'}}>
        {[['Total actions', String(entries.length), G],['Active members', String(activeMembers), PU],['Today', String(todayCount), TEAL]].map((s,i)=>(
          <div className="st-tile" key={i}>
            <div className="st-tile-label">{s[0]}</div>
            <div className="st-tile-val num" style={{color:s[2]}}>{s[1]}</div>
          </div>
        ))}
      </div>

      <Card>
        <div className="cm-row" style={{justifyContent:'space-between', alignItems:'flex-start', flexWrap:'wrap', gap:12, marginBottom:14}}>
          <SectionTitle sub="Everything your family members have done across the workspace">Family Activity</SectionTitle>
          <div className="cm-actfilter">
            {people.map((p,i)=>(
              <button key={i} className={`cm-actfilter-btn ${who===p?'on':''}`} onClick={()=>setWho(p)}>
                {p==='All'?'All members':p.split(' ')[0]}
              </button>
            ))}
          </div>
        </div>

        {groupList.length ? groupList.map((gk)=>(
          <div key={gk} style={{marginBottom:18}}>
            <div className="cm-actday">{gk}</div>
            <div>
              {groups[gk].map((a,i)=>{
                const meta = ACT_META[a.cat] || ACT_META.general;
                const mc = memberColor(a.who);
                return (
                  <div className="cm-actrow" key={i}>
                    <span className="cm-actrow-av" style={{background:mc}}>{initials(a.who)}</span>
                    <span className="cm-actrow-ic" style={{color:meta.c, background:'var(--mint-50)'}}><meta.Ic size={15}/></span>
                    <div className="cm-actrow-body">
                      <div className="cm-actrow-line">
                        <b>{a.who}</b> {a.action}
                      </div>
                      {a.detail && <div className="cm-actrow-detail">{a.detail}</div>}
                    </div>
                    <span className="cm-actrow-time num">{timeAgo(a.ts)}</span>
                  </div>
                );
              })}
            </div>
          </div>
        )) : <div className="t-caption" style={{padding:'24px 0', textAlign:'center'}}>No activity recorded yet.</div>}
      </Card>
    </div>
  );
}

/* ============================ BANK CONNECT ============================ */
const INSTITUTIONS = [
  { name:'TD Bank', dom:'td.com', c:'#1B7A43', pop:true },
  { name:'RBC Royal Bank', dom:'rbcroyalbank.com', c:'#0051A5', pop:true },
  { name:'Scotiabank', dom:'scotiabank.com', c:'#E2231A', pop:true },
  { name:'BMO', dom:'bmo.com', c:'#0079C1', pop:true },
  { name:'CIBC', dom:'cibc.com', c:'#B8002E', pop:true },
  { name:'National Bank', dom:'nbc.ca', c:'#E2231A', pop:true },
  { name:'Tangerine', dom:'tangerine.ca', c:'#FF6200', pop:true },
  { name:'Wealthsimple', dom:'wealthsimple.com', c:'#000000', pop:true },
  { name:'Desjardins', dom:'desjardins.com', c:'#00874E' },
  { name:'EQ Bank', dom:'eqbank.ca', c:'#5A2A82' },
  { name:'Simplii Financial', dom:'simplii.com', c:'#E4002B' },
  { name:'Chase', dom:'chase.com', c:'#117ACA' },
  { name:'Bank of America', dom:'bankofamerica.com', c:'#012169' },
  { name:'Wells Fargo', dom:'wellsfargo.com', c:'#D71E2B' },
  { name:'Citi', dom:'citi.com', c:'#003B70' },
  { name:'Capital One', dom:'capitalone.com', c:'#004977' },
  { name:'American Express', dom:'americanexpress.com', c:'#2671B9' },
  { name:'PNC', dom:'pnc.com', c:'#F58025' },
  { name:'US Bank', dom:'usbank.com', c:'#D71E28' },
  { name:'Ally', dom:'ally.com', c:'#751E66' },
  { name:'Discover', dom:'discover.com', c:'#F76B1C' },
];
function BankLogo({ dom, name, c, size=40, radius=10 }){
  const [err,setErr]=React.useState(false);
  const url = !err && dom ? (window.primaryLogoUrl ? window.primaryLogoUrl(dom, size) : ('https://www.google.com/s2/favicons?sz=128&domain='+dom)) : null;
  if(url) return <img src={url} alt={name} width={size} height={size} onError={()=>setErr(true)} style={{width:size, height:size, objectFit:'contain', borderRadius:radius, background:'#fff', border:'1px solid var(--line)', padding:5, flexShrink:0}}/>;
  return <span style={{width:size, height:size, flex:`0 0 ${size}px`, borderRadius:radius, background:c||G, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:800, fontSize:Math.round(size*0.34)}}>{initials(name)}</span>;
}

const CONNECT_STEPS = [
  { n:'1', t:'Select Your Bank', s:'Choose your bank from the list' },
  { n:'2', t:'Secure Login', s:'Log in with your banking credentials' },
  { n:'3', t:'Authorize Access', s:'Review and authorize the connection' },
  { n:'4', t:'Import & Sync', s:'Your accounts and transactions sync' },
];

function ConnectModal({ bank, onClose, onPlaid, onFile, fileRef, status }){
  if(!bank) return null;
  return (
    <div onClick={onClose} style={{position:'fixed', inset:0, zIndex:200, background:'rgba(20,32,26,.45)', backdropFilter:'blur(3px)', display:'flex', alignItems:'center', justifyContent:'center', padding:20}}>
      <div onClick={e=>e.stopPropagation()} style={{width:440, maxWidth:'100%', background:'var(--surface)', borderRadius:18, border:'1px solid var(--line)', boxShadow:'0 30px 70px -24px rgba(20,40,30,.5)', padding:'26px 26px 24px'}}>
        <div style={{display:'flex', alignItems:'center', gap:13, marginBottom:6}}>
          <BankLogo dom={bank.dom} name={bank.name} c={bank.c} size={46} radius={12}/>
          <div style={{flex:1, minWidth:0}}>
            <div style={{fontFamily:'var(--font-serif)', fontSize:19, fontWeight:700, color:'var(--ink-900)'}}>Connect {bank.name}</div>
            <div className="t-caption">Choose how you'd like to connect.</div>
          </div>
          <button onClick={onClose} style={{border:0, background:'none', cursor:'pointer', color:'var(--ink-400)', fontSize:20, lineHeight:1}}>×</button>
        </div>
        <div style={{display:'flex', flexDirection:'column', gap:11, marginTop:14}}>
          <button onClick={onPlaid} style={{display:'flex', alignItems:'center', gap:13, textAlign:'left', border:'1px solid var(--line)', borderRadius:13, padding:'15px 16px', background:'var(--mint-50)', cursor:'pointer', fontFamily:'inherit'}}>
            <span style={{width:40, height:40, borderRadius:11, background:G, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}><Ic.Lock size={19}/></span>
            <div style={{flex:1}}>
              <div className="t-label" style={{color:'var(--ink-900)'}}>Connect instantly with Plaid</div>
              <div className="t-caption">Secure, read-only link. Auto-syncs your transactions.</div>
            </div>
            <Ic.ChevR size={16} style={{color:G}}/>
          </button>
          <button onClick={()=>fileRef.current&&fileRef.current.click()} style={{display:'flex', alignItems:'center', gap:13, textAlign:'left', border:'1px solid var(--line)', borderRadius:13, padding:'15px 16px', background:'var(--surface)', cursor:'pointer', fontFamily:'inherit'}}>
            <span style={{width:40, height:40, borderRadius:11, background:'rgba(62,124,196,.14)', color:BL, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}><Ic.File size={19}/></span>
            <div style={{flex:1}}>
              <div className="t-label" style={{color:'var(--ink-900)'}}>Import a statement (OFX / QFX / CSV)</div>
              <div className="t-caption">Upload a downloaded statement — marks {bank.name} connected.</div>
            </div>
            <Ic.ChevR size={16} style={{color:BL}}/>
          </button>
          <input ref={fileRef} type="file" accept=".ofx,.qfx,.csv,.pdf,.txt" style={{display:'none'}} onChange={onFile}/>
        </div>
        {status && <div style={{marginTop:14, fontSize:12.5, color:status.indexOf('Connected')===0||status.indexOf('Connected via')>=0?'var(--green-600)':'var(--ink-600)', background:'var(--mint-50)', border:'1px solid var(--line)', borderRadius:10, padding:'10px 12px', lineHeight:1.5}}>{status}</div>}
        <div style={{display:'flex', alignItems:'center', gap:7, marginTop:14, color:'var(--ink-400)'}}>
          <Ic.Lock size={13}/><span className="t-caption">256-bit encryption · read-only · disconnect anytime.</span>
        </div>
      </div>
    </div>
  );
}

// Lazy-load the Plaid Link SDK (only when the user actually clicks "Connect with Plaid").
function loadPlaid(){
  return new Promise(function(resolve, reject){
    if(window.Plaid) return resolve(window.Plaid);
    var s=document.createElement('script');
    s.src='https://cdn.plaid.com/link/v2/stable/link-initialize.js';
    s.onload=function(){ window.Plaid?resolve(window.Plaid):reject(new Error('Plaid SDK unavailable')); };
    s.onerror=function(){ reject(new Error('Could not load the Plaid SDK')); };
    document.head.appendChild(s);
  });
}
function PageBankConnect() {
  const CM = window.useStore ? window.useStore() : window.CM;
  const accts = CM.S.accounts || [];
  const cards = CM.S.cards || [];
  const connectedBanks = (CM.S.settings && CM.S.settings.connectedBanks) || [];
  const linked = accts.length + cards.length;
  const [q, setQ] = React.useState('');
  const [tab, setTab] = React.useState('Popular');
  const [sel, setSel] = React.useState(null);
  const [status, setStatus] = React.useState('');
  const fileRef = React.useRef(null);

  const markConnected = name => { try { CM.mutate(function(){ CM.S.settings = CM.S.settings || {}; var set = {}; (CM.S.settings.connectedBanks||[]).forEach(function(n){ set[n]=1; }); set[name]=1; CM.S.settings.connectedBanks = Object.keys(set); }); } catch(e){} };
  const open = bank => { setSel(bank); setStatus(''); };
  const onFile = e => {
    const f = e.target.files && e.target.files[0]; if(!f || !sel) return;
    const ext = (f.name.split('.').pop()||'').toLowerCase();
    const type = ext==='csv'?'csv':(ext==='pdf'?'pdf':'ofx');
    setStatus('Importing '+f.name+'…');
    if(window.CMimport && window.CMimport.importFile){
      window.CMimport.importFile(f, null, null).then(function(res){
        markConnected(sel.name);
        setStatus('Connected — imported '+((res&&res.added)||0)+' transaction'+(((res&&res.added)||0)===1?'':'s')+'.');
        setTimeout(function(){ setSel(null); setStatus(''); }, 1600);
      }).catch(function(err){ setStatus('Could not read that file: '+((err&&err.message)||'unknown error')+'. Try an OFX/QFX export.'); });
    } else { markConnected(sel.name); setSel(null); }
    e.target.value='';
  };
  const connectPlaid = () => {
    if(!sel) return; const inst = sel.name;
    if(!(CM.api && CM.api.plaidLinkToken)){ setStatus('Plaid isn’t available right now. You can import a statement instead.'); return; }
    setStatus('Opening secure Plaid connection…');
    // 1) get a link_token from /api/plaid/create-link-token  2) open the real Plaid Link widget
    // 3) on success, exchange the public_token via /api/plaid/exchange.
    CM.api.plaidLinkToken(inst).then(function(res){
      var token = res && (res.link_token || res.linkToken);
      if(!token){ throw new Error((res && res.error) || 'no link token returned'); }
      return loadPlaid().then(function(Plaid){
        Plaid.create({
          token: token,
          onSuccess: function(public_token){
            setStatus('Linking '+inst+'…');
            var ex = (CM.api && CM.api.plaidExchange) ? CM.api.plaidExchange(public_token, inst) : Promise.resolve();
            ex.then(function(){
              markConnected(inst);
              setStatus('Connected '+inst+' — importing your accounts and transactions…');
              // Pull the linked accounts + recent transactions and merge them into the store.
              if(CM.api && CM.api.plaidTransactions && CM.importPlaid){
                return CM.api.plaidTransactions().then(function(data){
                  var r = CM.importPlaid(data) || {};
                  var n = r.added||0, na = (r.accounts||0)+(r.cards||0);
                  if(na || n){ setStatus('Connected '+inst+' via Plaid — imported '+na+' account'+(na===1?'':'s')+' and '+n+' transaction'+(n===1?'':'s')+'.'); }
                  else { setStatus('Connected '+inst+' via Plaid — no new transactions yet. They’ll appear on the next sync.'); }
                  setTimeout(function(){ setSel(null); setStatus(''); }, 2400);
                });
              }
              setStatus('Connected '+inst+' via Plaid — your accounts will sync shortly.');
              setTimeout(function(){ setSel(null); setStatus(''); }, 1800);
            })
              .catch(function(err){ markConnected(inst); setStatus('Linked '+inst+', but the sync handshake failed'+((err&&err.message)?' ('+err.message+')':'')+' — try again or import a statement.'); });
          },
          onExit: function(err){ setStatus(err ? ('Plaid closed: '+(err.display_message||err.error_message||'cancelled')) : 'Plaid connection cancelled.'); }
        }).open();
      });
    }).catch(function(err){ setStatus('Could not start Plaid for '+inst+': '+((err&&err.message)||'unavailable')+'. You can import a statement instead.'); });
  };
  const [syncing, setSyncing] = React.useState(false);
  const [syncMsg, setSyncMsg] = React.useState('');
  const syncPlaid = () => {
    if(!(CM.api && CM.api.plaidTransactions && CM.importPlaid)) return;
    setSyncing(true); setSyncMsg('Syncing…');
    CM.api.plaidTransactions().then(function(data){
      var r = CM.importPlaid(data) || {};
      var n = r.added||0, na = (r.accounts||0)+(r.cards||0);
      if(!(data && data.items)){ setSyncMsg('No Plaid-linked banks yet — connect one above first.'); }
      else if(na || n){ setSyncMsg('Synced — '+na+' account'+(na===1?'':'s')+' updated, '+n+' new transaction'+(n===1?'':'s')+'.'); }
      else { setSyncMsg('Up to date — no new transactions.'); }
    }).catch(function(err){ setSyncMsg('Sync failed: '+((err&&err.message)||'try again shortly')+'.'); })
      .then(function(){ setSyncing(false); setTimeout(function(){ setSyncMsg(''); }, 4000); });
  };

  const filtered = INSTITUTIONS.filter(function(b){ return b.name.toLowerCase().indexOf(q.toLowerCase())>=0; }).filter(function(b){ return q ? true : (tab==='Popular' ? b.pop : true); });
  const instByName = {}; INSTITUTIONS.forEach(function(b){ instByName[b.name]=b; });
  const bankWithoutAccounts = connectedBanks.filter(function(n){ return !accts.some(function(a){ return (a.bank||a.name||'').toLowerCase().indexOf(n.toLowerCase())>=0; }); });

  const Step = ({s,i,last}) => (
    <div style={{display:'flex', alignItems:'flex-start', gap:0, flex:1, minWidth:0}}>
      <div style={{display:'flex', flexDirection:'column', alignItems:'center', flex:'0 0 auto', textAlign:'center', width:'100%'}}>
        <div style={{display:'flex', alignItems:'center', width:'100%'}}>
          <div style={{flex:1, height:2, background:i===0?'transparent':'var(--line)'}}/>
          <span style={{width:34, height:34, borderRadius:999, flexShrink:0, background:i===0?G:'var(--surface)', color:i===0?'#fff':'var(--ink-400)', border:'1.5px solid '+(i===0?G:'var(--line)'), display:'flex', alignItems:'center', justifyContent:'center', fontWeight:800, fontSize:13}}>{i===3?<Ic.Check size={16}/>:s.n}</span>
          <div style={{flex:1, height:2, background:last?'transparent':'var(--line)'}}/>
        </div>
        <div className="t-label" style={{color:i===0?'var(--green-600)':'var(--ink-700)', marginTop:9}}>{s.t}</div>
        <div className="t-caption" style={{maxWidth:150}}>{s.s}</div>
      </div>
    </div>
  );

  return (
    <div style={{display:'flex', flexDirection:'column', gap:20}}>
      <div style={{display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:16, flexWrap:'wrap'}}>
        <div>
          <h1 style={{fontFamily:'var(--font-serif)', fontSize:26, fontWeight:700, color:'var(--ink-900)', margin:0}}>Bank Connections</h1>
          <div className="st-mini-sub" style={{marginTop:4}}>Securely connect your bank accounts to import transactions and keep your data up to date.</div>
        </div>
        <div style={{display:'flex', alignItems:'center', gap:9, color:G}}>
          <Ic.Shield size={18}/><div><div className="t-label" style={{color:'var(--ink-900)'}}>Your data is secure</div><div className="t-caption">256-bit bank-level encryption</div></div>
        </div>
      </div>

      <Card>
        <SectionTitle sub="Follow these simple steps to connect your bank securely.">Connect Your Bank Account</SectionTitle>
        <div style={{display:'flex', gap:0}} className="cm-connect-steps">
          {CONNECT_STEPS.map(function(s,i){ return <Step key={i} s={s} i={i} last={i===CONNECT_STEPS.length-1}/>; })}
        </div>
      </Card>

      <div style={{display:'grid', gridTemplateColumns:'1fr 330px', gap:20, alignItems:'start'}} className="cm-bank-grid">
        <Card>
          <SectionTitle sub="Search for your bank or choose from the list.">Select Your Bank</SectionTitle>
          <div style={{position:'relative', marginBottom:14}}>
            <Ic.Search size={16} style={{position:'absolute', left:13, top:12, color:'var(--ink-400)'}}/>
            <input value={q} onChange={e=>setQ(e.target.value)} placeholder="Search for your bank…" style={{width:'100%', padding:'11px 13px 11px 38px', borderRadius:11, border:'1px solid var(--line)', fontFamily:'inherit', fontSize:13.5, background:'var(--surface)', color:'var(--ink-900)'}}/>
          </div>
          {!q && <div style={{display:'flex', gap:22, borderBottom:'1px solid var(--line)', marginBottom:16}}>
            {['Popular','All Banks'].map(function(t){ const v=t==='All Banks'?'All':'Popular'; const on=tab===v; return <button key={t} onClick={()=>setTab(v)} style={{border:0, background:'none', cursor:'pointer', fontFamily:'inherit', padding:'0 1px 11px', fontSize:13.5, fontWeight:on?700:600, color:on?'var(--green-600)':'var(--ink-500)', borderBottom:'2px solid '+(on?'var(--green-600)':'transparent'), marginBottom:-1}}>{t}</button>; })}
          </div>}
          <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(150px,1fr))', gap:12}}>
            {filtered.map(function(b,i){ return (
              <button key={i} onClick={()=>open(b)} className="cm-tile" style={{display:'flex', flexDirection:'column', alignItems:'center', gap:10, padding:'18px 12px', border:'1px solid var(--line)', borderRadius:14, cursor:'pointer', background:'var(--surface)', fontFamily:'inherit', transition:'.15s'}}>
                <BankLogo dom={b.dom} name={b.name} c={b.c} size={44} radius={11}/>
                <span className="t-label" style={{color:'var(--ink-900)', textAlign:'center', lineHeight:1.25}}>{b.name}</span>
              </button>
            ); })}
            {!filtered.length && <div className="t-caption" style={{gridColumn:'1/-1', textAlign:'center', padding:'20px 0'}}>No banks match "{q}". You can still import a statement from any bank below.</div>}
          </div>
          <div style={{display:'flex', alignItems:'center', gap:8, marginTop:16, padding:'11px 14px', background:'var(--mint-50)', borderRadius:11, border:'1px solid var(--line)'}}>
            <Ic.Lock size={15} style={{color:G}}/><span className="t-caption">We use <b style={{color:'var(--ink-700)'}}>Plaid</b> to securely connect your accounts, or import OFX/CSV from any institution.</span>
          </div>
        </Card>

        <div style={{display:'flex', flexDirection:'column', gap:20}}>
          <Card>
            <SectionTitle sub="">Your Security is Our Priority</SectionTitle>
            {[
              { ic:<Ic.Shield size={18}/>, t:'Bank-Level Security', s:'256-bit encryption and secure tokenization protect your data.' },
              { ic:<Ic.Lock size={18}/>, t:'Read-Only Access', s:'We only read your data — we cannot move money or make changes.' },
              { ic:<Ic.User size={18}/>, t:"You're in Control", s:'Add or remove bank connections anytime you want.' },
            ].map(function(r,i){ return (
              <div key={i} style={{display:'flex', gap:12, padding:'10px 0', borderBottom:i<2?'1px solid var(--line)':'none'}}>
                <span style={{width:34, height:34, flex:'0 0 34px', borderRadius:10, background:'var(--mint-100)', color:G, display:'flex', alignItems:'center', justifyContent:'center'}}>{r.ic}</span>
                <div><div className="t-label" style={{color:'var(--ink-900)'}}>{r.t}</div><div className="t-caption" style={{lineHeight:1.5}}>{r.s}</div></div>
              </div>
            ); })}
          </Card>

          <Card>
            <div style={{display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:10}}>
              <SectionTitle sub={linked||connectedBanks.length?'Manage your existing connections.':'No connections yet — pick a bank to start.'}>Connected Accounts</SectionTitle>
              <button onClick={syncPlaid} disabled={syncing} title="Pull the latest transactions from your linked banks" style={{flexShrink:0, display:'flex', alignItems:'center', gap:6, border:'1px solid var(--line)', background:'var(--surface)', color:syncing?'var(--ink-400)':'var(--green-600)', borderRadius:9, padding:'6px 11px', fontFamily:'inherit', fontSize:12.5, fontWeight:700, cursor:syncing?'default':'pointer'}}>
                <Ic.Repeat size={14}/>{syncing?'Syncing…':'Sync now'}
              </button>
            </div>
            {syncMsg && <div className="t-caption" style={{margin:'2px 0 10px', color:'var(--ink-600)'}}>{syncMsg}</div>}
            <div>
              {accts.map(function(a,i){ const dom = window.resolveLogoDomain ? window.resolveLogoDomain(a.bank||a.name) : null; return (
                <div className="cm-row" key={'a'+i} style={{gap:11, padding:'11px 0', borderBottom:'1px solid var(--line)'}}>
                  <BankLogo dom={dom} name={a.bank||a.name} size={32} radius={9}/>
                  <div style={{flex:1, minWidth:0}}><div className="t-label" style={{color:'var(--ink-900)'}}>{a.name}</div><div className="t-caption">{usd0(a.balance)} · {a.type||'Account'}</div></div>
                  <span className="cm-pill cm-pill-green">Connected</span>
                </div>
              ); })}
              {cards.map(function(c,i){ const dom = window.resolveLogoDomain ? window.resolveLogoDomain(c.issuer||c.name) : null; return (
                <div className="cm-row" key={'c'+i} style={{gap:11, padding:'11px 0', borderBottom:'1px solid var(--line)'}}>
                  <BankLogo dom={dom} name={c.issuer||c.name} size={32} radius={9}/>
                  <div style={{flex:1, minWidth:0}}><div className="t-label" style={{color:'var(--ink-900)'}}>{c.name}</div><div className="t-caption">Credit card ···· {c.last4||''}</div></div>
                  <span className="cm-pill cm-pill-green">Connected</span>
                </div>
              ); })}
              {bankWithoutAccounts.map(function(n,i){ const b=instByName[n]; const dom=b?b.dom:(window.resolveLogoDomain?window.resolveLogoDomain(n):null); return (
                <div className="cm-row" key={'b'+i} style={{gap:11, padding:'11px 0', borderBottom:i<bankWithoutAccounts.length-1?'1px solid var(--line)':'none'}}>
                  <BankLogo dom={dom} name={n} c={b&&b.c} size={32} radius={9}/>
                  <div style={{flex:1, minWidth:0}}><div className="t-label" style={{color:'var(--ink-900)'}}>{n}</div><div className="t-caption">Connected · import a statement to sync</div></div>
                  <span className="cm-pill cm-pill-green">Connected</span>
                </div>
              ); })}
              {!linked && !connectedBanks.length && <div className="t-caption" style={{padding:'8px 0'}}>Your connected banks and cards will appear here.</div>}
            </div>
          </Card>
        </div>
      </div>

      <ConnectModal bank={sel} onClose={()=>{setSel(null);setStatus('');}} onPlaid={connectPlaid} onFile={onFile} fileRef={fileRef} status={status}/>
    </div>
  );
}

window.PageFamilyMembers = PageFamilyMembers;
window.PageActivity = PageActivity;
window.PageBankConnect = PageBankConnect;
})();