// v-settings.jsx — Settings: storefront, hours, delivery, payouts, team, notifications

const SET_FLD = { width:'100%', boxSizing:'border-box', background:'rgba(255,255,255,0.55)', border:'1px solid var(--soft-line)', borderRadius:10, padding:'10px 12px', fontFamily:'var(--font-body)', fontSize:13.5, color:'var(--fg-primary)', outline:'none' };
const SET_LBL = { fontFamily:'var(--font-display)', fontWeight:700, fontSize:10.5, letterSpacing:'0.06em', textTransform:'uppercase', color:'var(--warm-stone)', marginBottom:7, display:'block' };

const SET_HOURS_INIT = [
  { d:'Monday',    open:true,  from:'16:00', to:'22:30' },
  { d:'Tuesday',   open:true,  from:'16:00', to:'22:30' },
  { d:'Wednesday', open:true,  from:'16:00', to:'22:30' },
  { d:'Thursday',  open:true,  from:'16:00', to:'23:00' },
  { d:'Friday',    open:true,  from:'12:00', to:'23:30' },
  { d:'Saturday',  open:true,  from:'12:00', to:'23:30' },
  { d:'Sunday',    open:false, from:'12:00', to:'22:00' },
];
const SET_TEAM = [
  { n:'Marco Bellini',  role:'Owner',   init:'MB', you:true },
  { n:'Priya Shah',     role:'Manager', init:'PS' },
  { n:'Tom Okafor',     role:'Kitchen', init:'TO' },
];
const SET_NOTIFS_INIT = [
  { id:'orders',   label:'New orders',            desc:'Sound + push for every incoming order', on:true },
  { id:'reviews',  label:'New reviews',            desc:'When a customer leaves a rating',       on:true },
  { id:'campaign', label:'Campaign milestones',    desc:'Budget 80% spent, A/B winner found',    on:true },
  { id:'payout',   label:'Payouts',                desc:'When a weekly payout lands',            on:true },
  { id:'digest',   label:'Weekly digest',          desc:'Monday morning performance summary',    on:false },
];

function SetSection({ icon, title, sub, children, footer }) {
  return (
    <Card pad={0} style={{ overflow:'hidden' }}>
      <div style={{ padding:'15px 20px 13px', borderBottom:'1px solid var(--soft-line)', display:'flex', alignItems:'center', justifyContent:'space-between', gap:12 }}>
        <div>
          <Eyebrow>{icon} &nbsp;{title}</Eyebrow>
          {sub && <div style={{ fontFamily:'var(--font-body)', fontSize:11.5, color:'var(--warm-stone)', marginTop:4 }}>{sub}</div>}
        </div>
        {footer}
      </div>
      <div style={{ padding:'16px 20px 18px' }}>{children}</div>
    </Card>
  );
}

// ─── Change bank account modal ──────────────────────────────────
function ChangeBankModal({ onClose, onSave }) {
  const [acctName, setAcctName] = React.useState('');
  const [sort, setSort] = React.useState('');
  const [num, setNum] = React.useState('');
  const fmtSort = (v)=> v.replace(/[^0-9]/g,'').slice(0,6).replace(/(\d{2})(?=\d)/g,'$1-');
  const valid = acctName.trim().length>1 && sort.replace(/[^0-9]/g,'').length===6 && num.replace(/[^0-9]/g,'').length===8;
  const save = ()=> onSave({ name:acctName.trim(), sort:fmtSort(sort), last4:num.replace(/[^0-9]/g,'').slice(-4) });
  return (
    <div onClick={onClose} style={{ position:'fixed', inset:0, zIndex:340, background:'rgba(27,18,13,0.5)', backdropFilter:'blur(3px)', display:'flex', justifyContent:'center', alignItems:'flex-start', padding:'80px 24px', animation:'v-fade 200ms var(--ease-out)' }}>
      <div onClick={(e)=>e.stopPropagation()} style={{ width:'100%', maxWidth:440, background:'var(--bg-surface)', borderRadius:20, boxShadow:'var(--shadow-lg)', overflow:'hidden', animation:'v-pop 240ms var(--ease-out)' }}>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'16px 22px', borderBottom:'1px solid var(--soft-line)' }}>
          <Eyebrow><I.lock c="var(--brand-orange)" s={13}/> &nbsp;Change bank account</Eyebrow>
          <span onClick={onClose} style={{ cursor:'pointer', display:'flex', padding:4 }}><I.x c="var(--warm-stone)" s={16}/></span>
        </div>
        <div style={{ padding:'18px 22px 20px', display:'flex', flexDirection:'column', gap:14 }}>
          <div>
            <span style={SET_LBL}>Account name</span>
            <input value={acctName} onChange={e=>setAcctName(e.target.value)} placeholder="e.g. Fire & Dough Ltd" style={SET_FLD}/>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1.4fr', gap:12 }}>
            <div>
              <span style={SET_LBL}>Sort code</span>
              <input value={fmtSort(sort)} onChange={e=>setSort(e.target.value)} placeholder="00-00-00" inputMode="numeric" style={{ ...SET_FLD, fontFamily:'var(--font-mono)' }}/>
            </div>
            <div>
              <span style={SET_LBL}>Account number</span>
              <input value={num.replace(/[^0-9]/g,'').slice(0,8)} onChange={e=>setNum(e.target.value)} placeholder="8 digits" inputMode="numeric" style={{ ...SET_FLD, fontFamily:'var(--font-mono)' }}/>
            </div>
          </div>
          <div style={{ display:'flex', alignItems:'flex-start', gap:9, padding:'10px 12px', background:'var(--bg-warm)', borderRadius:11 }}>
            <I.shield c="var(--horse-brown)" s={15}/>
            <span style={{ fontFamily:'var(--font-body)', fontSize:11.5, color:'var(--horse-brown)', lineHeight:1.45 }}>New details are verified before payouts switch over. Your current account keeps receiving payouts until verification completes (1–2 working days).</span>
          </div>
          <Btn kind="accent" full disabled={!valid} onClick={save}>Submit for verification</Btn>
        </div>
      </div>
    </div>
  );
}

// ─── Invite teammate modal ───────────────────────────────────────
function InviteModal({ onClose, onInvite }) {
  const [email, setEmail] = React.useState('');
  const [role, setRole] = React.useState('Manager');
  const valid = /.+@.+\..+/.test(email.trim());
  return (
    <div onClick={onClose} style={{ position:'fixed', inset:0, zIndex:340, background:'rgba(27,18,13,0.5)', backdropFilter:'blur(3px)', display:'flex', justifyContent:'center', alignItems:'flex-start', padding:'80px 24px', animation:'v-fade 200ms var(--ease-out)' }}>
      <div onClick={(e)=>e.stopPropagation()} style={{ width:'100%', maxWidth:420, background:'var(--bg-surface)', borderRadius:20, boxShadow:'var(--shadow-lg)', overflow:'hidden', animation:'v-pop 240ms var(--ease-out)' }}>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'16px 22px', borderBottom:'1px solid var(--soft-line)' }}>
          <Eyebrow><I.users c="var(--brand-orange)" s={13}/> &nbsp;Invite a teammate</Eyebrow>
          <span onClick={onClose} style={{ cursor:'pointer', display:'flex', padding:4 }}><I.x c="var(--warm-stone)" s={16}/></span>
        </div>
        <div style={{ padding:'18px 22px 20px', display:'flex', flexDirection:'column', gap:14 }}>
          <div>
            <span style={SET_LBL}>Email</span>
            <input value={email} onChange={e=>setEmail(e.target.value)} placeholder="name@example.com" type="email" style={SET_FLD}/>
          </div>
          <div>
            <span style={SET_LBL}>Role</span>
            <div style={{ display:'flex', gap:8 }}>
              {[['Manager','Menu, orders, campaigns'],['Kitchen','Orders only']].map(([r,d])=>(
                <div key={r} onClick={()=>setRole(r)} role="button" style={{ flex:1, padding:'11px 13px', borderRadius:11, cursor:'pointer', border:'1.5px solid', borderColor: role===r?'var(--brand-orange)':'var(--soft-line)', background: role===r?'rgba(216,90,20,0.07)':'transparent' }}>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:12.5, color:'var(--fg-primary)' }}>{r}</div>
                  <div style={{ fontFamily:'var(--font-body)', fontSize:10.5, color:'var(--warm-stone)', marginTop:2 }}>{d}</div>
                </div>
              ))}
            </div>
          </div>
          <Btn kind="accent" full disabled={!valid} onClick={()=>onInvite(email.trim(), role)}>Send invite</Btn>
        </div>
      </div>
    </div>
  );
}

// ─── Edit teammate modal ─────────────────────────────────────────
const ROLE_DESC = { Owner:'Full access · payouts, team, settings', Manager:'Menu, orders, campaigns', Kitchen:'Orders only' };
function MemberModal({ m, onClose, onSave, onRemove, onResend }) {
  const [name, setName] = React.useState(m.n);
  const [role, setRole] = React.useState(m.role);
  const isOwner = m.role==='Owner';
  const roles = isOwner ? ['Owner'] : ['Manager','Kitchen'];
  return (
    <div onClick={onClose} style={{ position:'fixed', inset:0, zIndex:340, background:'rgba(27,18,13,0.5)', backdropFilter:'blur(3px)', display:'flex', justifyContent:'center', alignItems:'flex-start', padding:'80px 24px', animation:'v-fade 200ms var(--ease-out)' }}>
      <div onClick={(e)=>e.stopPropagation()} style={{ width:'100%', maxWidth:440, background:'var(--bg-surface)', borderRadius:20, boxShadow:'var(--shadow-lg)', overflow:'hidden', animation:'v-pop 240ms var(--ease-out)' }}>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'16px 22px', borderBottom:'1px solid var(--soft-line)' }}>
          <Eyebrow><I.users c="var(--brand-orange)" s={13}/> &nbsp;{m.pending?'Pending invite':m.you?'Your account':'Edit teammate'}</Eyebrow>
          <span onClick={onClose} style={{ cursor:'pointer', display:'flex', padding:4 }}><I.x c="var(--warm-stone)" s={16}/></span>
        </div>
        <div style={{ padding:'18px 22px 20px', display:'flex', flexDirection:'column', gap:14 }}>
          <div>
            <span style={SET_LBL}>{m.pending?'Email':'Name'}</span>
            <input value={name} onChange={e=>setName(e.target.value)} disabled={m.pending} style={{ ...SET_FLD, opacity:m.pending?0.6:1 }}/>
          </div>
          <div>
            <span style={SET_LBL}>Role & permissions</span>
            <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
              {roles.map(r=>(
                <div key={r} onClick={()=>setRole(r)} role="button" style={{ display:'flex', alignItems:'center', gap:11, padding:'11px 13px', borderRadius:11, cursor: isOwner?'default':'pointer', border:'1.5px solid', borderColor: role===r?'var(--brand-orange)':'var(--soft-line)', background: role===r?'rgba(216,90,20,0.07)':'transparent' }}>
                  <span style={{ width:16, height:16, borderRadius:'50%', border:'2px solid', borderColor: role===r?'var(--brand-orange)':'var(--soft-line)', background: role===r?'var(--brand-orange)':'transparent', boxShadow: role===r?'inset 0 0 0 3px var(--bg-surface)':'none', flexShrink:0 }}></span>
                  <div>
                    <div style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:12.5, color:'var(--fg-primary)' }}>{r}</div>
                    <div style={{ fontFamily:'var(--font-body)', fontSize:10.5, color:'var(--warm-stone)', marginTop:2 }}>{ROLE_DESC[r]}</div>
                  </div>
                </div>
              ))}
            </div>
            {isOwner && <div style={{ marginTop:8, fontFamily:'var(--font-body)', fontSize:10.5, color:'var(--warm-stone)' }}>Every storefront needs exactly one owner. Contact Lasso support to transfer ownership.</div>}
          </div>
          <div style={{ display:'flex', gap:10, alignItems:'center' }}>
            <Btn kind="accent" style={{ flex:1 }} disabled={!name.trim()} onClick={()=>onSave({ n:name.trim(), role })}>Save changes</Btn>
            {m.pending && <Btn kind="white" onClick={onResend}>Resend</Btn>}
          </div>
          {!m.you && (
            <span onClick={onRemove} style={{ alignSelf:'center', fontFamily:'var(--font-display)', fontWeight:700, fontSize:12, color:'#b0341a', cursor:'pointer' }}>{m.pending?'Cancel invite':'Remove from team'}</span>
          )}
        </div>
      </div>
    </div>
  );
}

function SettingsScreen({ app }) {
  const [hours, setHours] = React.useState(SET_HOURS_INIT);
  const [team, setTeam] = React.useState(SET_TEAM);
  const [bank, setBank] = React.useState({ name:'Barclays Business', detail:'•••• •••• 4821 · 20-45-33', verified:true });
  const [bankOpen, setBankOpen] = React.useState(false);
  const [inviteOpen, setInviteOpen] = React.useState(false);
  const [editIdx, setEditIdx] = React.useState(null);
  const [stmtsOpen, setStmtsOpen] = React.useState(false);
  const [tags, setTags] = React.useState(['Pizza','Wings','Loaded Fries']);
  const [tagEdit, setTagEdit] = React.useState(false);
  const TAG_POOL = ['Pizza','Wings','Loaded Fries','Burgers','Desserts','Sides','Vegan','Halal','Kids'];
  const [notifs, setNotifs] = React.useState(SET_NOTIFS_INIT);
  const [radius, setRadius] = React.useState(4.5);
  const [fee, setFee] = React.useState('1.99');
  const [minOrder, setMinOrder] = React.useState('12');
  const [accepting, setAccepting] = React.useState(true);
  const [name, setName] = React.useState(VENDOR.name);
  const [phone, setPhone] = React.useState('01908 555 214');
  const [email, setEmail] = React.useState('orders@fireanddough.co.uk');
  const [desc, setDesc] = React.useState('Wood-fired pizza, wings and loaded fries — made fresh at Stadium MK.');
  const patchHour = (i,p)=> setHours(hs=>hs.map((h,ix)=>ix===i?{...h,...p}:h));
  const toggleNotif = (id)=> setNotifs(ns=>ns.map(n=>n.id===id?{...n,on:!n.on}:n));
  const reachable = Math.round(520*radius*radius/20.25)*10;

  return (
    <div>
      <PageHead eyebrow="Settings" title="Storefront settings"
        sub="Your profile, hours, delivery zone, payouts and team for Fire & Dough."
        right={<Btn kind="accent" icon={<I.check c="#fff" s={16}/>} onClick={()=>app.toast('Settings saved')}>Save changes</Btn>}/>

      <div style={{ display:'grid', gridTemplateColumns:'1.25fr 1fr', gap:16, alignItems:'start' }}>
        {/* left column */}
        <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
          {/* storefront profile */}
          <SetSection icon={<I.utensils c="var(--brand-orange)" s={13}/>} title="Storefront profile" sub="What customers see on your Lasso page"
            footer={<Pill tone={accepting?'green':'red'} dot>{accepting?'Open':'Paused'}</Pill>}>
            <div style={{ display:'flex', gap:16, marginBottom:16 }}>
              <div style={{ width:72, height:72, borderRadius:18, background:'linear-gradient(135deg,#F28C1B,#D85A14)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-display)', fontWeight:900, fontSize:24, color:'#fff', flexShrink:0, boxShadow:'var(--shadow-orange)' }}>{VENDOR.initials}</div>
              <div style={{ flex:1, minWidth:0 }}>
                <span style={SET_LBL}>Restaurant name</span>
                <input value={name} onChange={e=>setName(e.target.value)} maxLength={40} style={SET_FLD}/>
                <div style={{ display:'flex', gap:7, marginTop:10, flexWrap:'wrap', alignItems:'center' }}>
                  {tags.map(t=>(
                    <Pill key={t} tone="orange">{t}{tagEdit && <span onClick={()=>setTags(ts=>ts.filter(x=>x!==t))} role="button" style={{ marginLeft:5, cursor:'pointer', display:'inline-flex', verticalAlign:'middle' }}><I.x c="#c0500f" s={10}/></span>}</Pill>
                  ))}
                  {tagEdit && TAG_POOL.filter(t=>!tags.includes(t)).map(t=>(
                    <button key={t} onClick={()=>setTags(ts=> ts.length>=5 ? (app.toast('Up to 5 tags'), ts) : [...ts, t])} style={{ display:'inline-flex', alignItems:'center', gap:4, padding:'2.5px 9px', borderRadius:999, border:'1px dashed var(--warm-stone)', background:'transparent', cursor:'pointer', fontFamily:'var(--font-display)', fontWeight:700, fontSize:11, color:'var(--warm-stone)' }}><I.plus c="var(--warm-stone)" s={11}/> {t}</button>
                  ))}
                  <button onClick={()=>{ if (tagEdit && tags.length===0) { app.toast('Keep at least one tag'); return; } setTagEdit(e=>!e); if (tagEdit) app.toast('Cuisine tags updated'); }} style={{ display:'inline-flex', alignItems:'center', gap:4, padding:'2.5px 9px', borderRadius:999, border: tagEdit?'1px solid var(--brand-orange)':'1px dashed var(--warm-stone)', background: tagEdit?'rgba(216,90,20,0.09)':'transparent', cursor:'pointer', fontFamily:'var(--font-display)', fontWeight:700, fontSize:11, color: tagEdit?'#c0500f':'var(--warm-stone)' }}>{tagEdit ? <React.Fragment><I.check c="#c0500f" s={11}/> Done</React.Fragment> : <React.Fragment><I.plus c="var(--warm-stone)" s={11}/> Edit tags</React.Fragment>}</button>
                </div>
              </div>
            </div>
            <div style={{ marginBottom:14 }}>
              <span style={SET_LBL}>Short description</span>
              <textarea value={desc} onChange={e=>setDesc(e.target.value)} maxLength={120} rows={2} style={{ ...SET_FLD, resize:'vertical', lineHeight:1.45 }}></textarea>
            </div>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginBottom:16 }}>
              <div><span style={SET_LBL}>Phone</span><input value={phone} onChange={e=>setPhone(e.target.value)} style={SET_FLD}/></div>
              <div><span style={SET_LBL}>Order email</span><input value={email} onChange={e=>setEmail(e.target.value)} style={SET_FLD}/></div>
            </div>
            <div onClick={()=>{ setAccepting(v=>!v); app.toast(accepting?'Storefront paused — new orders stopped':'Storefront reopened'); }} role="button" style={{ display:'flex', alignItems:'center', gap:12, padding:'12px 14px', background: accepting?'rgba(46,139,78,0.08)':'rgba(193,59,31,0.08)', border:'1px solid', borderColor: accepting?'rgba(46,139,78,0.25)':'rgba(193,59,31,0.25)', borderRadius:12, cursor:'pointer' }}>
              <Toggle on={accepting} onChange={()=>{}} color="var(--live-green)"/>
              <div style={{ flex:1 }}>
                <div style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:13, color:'var(--fg-primary)' }}>{accepting?'Accepting orders':'Storefront paused'}</div>
                <div style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--warm-stone)' }}>{accepting?'Customers can order right now':'Hidden from search until you reopen'}</div>
              </div>
            </div>
          </SetSection>

          {/* opening hours */}
          <SetSection icon={<I.clock c="var(--brand-orange)" s={13}/>} title="Opening hours" sub="Delivery & collection windows">
            {hours.map((h,i)=>(
              <div key={h.d} style={{ display:'flex', alignItems:'center', gap:12, padding:'8px 0', borderBottom: i<hours.length-1?'1px solid var(--soft-line)':'none' }}>
                <div onClick={()=>patchHour(i,{open:!h.open})} role="button" style={{ display:'flex', alignItems:'center', gap:10, width:150, cursor:'pointer', flexShrink:0 }}>
                  <Toggle on={h.open} onChange={()=>patchHour(i,{open:!h.open})}/>
                  <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:13, color: h.open?'var(--fg-primary)':'var(--warm-stone)' }}>{h.d}</span>
                </div>
                {h.open ? (
                  <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                    <input value={h.from} onChange={e=>patchHour(i,{from:e.target.value})} style={{ ...SET_FLD, width:76, padding:'7px 9px', textAlign:'center', fontFamily:'var(--font-mono)', fontSize:12 }}/>
                    <span style={{ fontFamily:'var(--font-body)', fontSize:12, color:'var(--warm-stone)' }}>to</span>
                    <input value={h.to} onChange={e=>patchHour(i,{to:e.target.value})} style={{ ...SET_FLD, width:76, padding:'7px 9px', textAlign:'center', fontFamily:'var(--font-mono)', fontSize:12 }}/>
                  </div>
                ) : <span style={{ fontFamily:'var(--font-body)', fontSize:12, color:'var(--warm-stone)' }}>Closed</span>}
              </div>
            ))}
          </SetSection>

          {/* delivery zone */}
          <SetSection icon={<I.truck c="var(--brand-orange)" s={13}/>} title="Delivery zone & fees" sub="Radius from Stadium MK">
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:8 }}>
              <span style={SET_LBL}>Delivery radius</span>
              <span style={{ fontFamily:'var(--font-display)', fontWeight:900, fontSize:15, color:'var(--brand-orange)' }}>{radius.toFixed(1)} mi</span>
            </div>
            <Slider value={radius} min={1} max={8} step={0.5} onChange={setRadius}/>
            <div style={{ marginTop:8, marginBottom:16, fontFamily:'var(--font-body)', fontSize:11.5, color:'var(--warm-stone)' }}>≈ {reachable.toLocaleString()} reachable customers · covers {radius>=6?'all':'most'} of Milton Keynes</div>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14 }}>
              <div>
                <span style={SET_LBL}>Delivery fee</span>
                <div style={{ position:'relative' }}>
                  <span style={{ position:'absolute', left:12, top:'50%', transform:'translateY(-50%)', fontFamily:'var(--font-display)', fontWeight:800, fontSize:13, color:'var(--warm-stone)' }}>£</span>
                  <input value={fee} onChange={e=>setFee(e.target.value.replace(/[^0-9.]/g,''))} inputMode="decimal" style={{ ...SET_FLD, paddingLeft:26 }}/>
                </div>
              </div>
              <div>
                <span style={SET_LBL}>Minimum order</span>
                <div style={{ position:'relative' }}>
                  <span style={{ position:'absolute', left:12, top:'50%', transform:'translateY(-50%)', fontFamily:'var(--font-display)', fontWeight:800, fontSize:13, color:'var(--warm-stone)' }}>£</span>
                  <input value={minOrder} onChange={e=>setMinOrder(e.target.value.replace(/[^0-9.]/g,''))} inputMode="decimal" style={{ ...SET_FLD, paddingLeft:26 }}/>
                </div>
              </div>
            </div>
          </SetSection>
        </div>

        {/* right column */}
        <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
          {/* payouts */}
          <SetSection icon={<I.pound c="var(--brand-orange)" s={13}/>} title="Payouts" sub="Weekly, every Tuesday"
            footer={<span onClick={()=>setStmtsOpen(true)} style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:12, color:'var(--brand-orange)', cursor:'pointer', whiteSpace:'nowrap' }}>Statements →</span>}>
            <div style={{ display:'flex', alignItems:'center', gap:13, padding:'13px 15px', background:'var(--dark-chocolate)', borderRadius:14, color:'var(--dust-cream)', marginBottom:13 }}>
              <div style={{ width:40, height:40, borderRadius:11, background:'rgba(255,255,255,0.1)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}><I.lock c="#E9B97A" s={17}/></div>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:13.5 }}>{bank.name}</div>
                <div style={{ fontFamily:'var(--font-mono)', fontSize:11.5, color:'#9F8979', marginTop:2 }}>{bank.detail}</div>
              </div>
              <Pill tone={bank.verified?'green':'amber'} dot>{bank.verified?'Verified':'In review'}</Pill>
            </div>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12, marginBottom:13 }}>
              {[['Next payout','£1,918 · Tue'],['VAT number','GB 442 8871 06']].map(([l,v])=>(
                <div key={l} style={{ padding:'10px 12px', background:'rgba(255,255,255,0.45)', border:'1px solid var(--soft-line)', borderRadius:11 }}>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:13, color:'var(--fg-primary)' }}>{v}</div>
                  <div style={{ fontFamily:'var(--font-body)', fontSize:10.5, color:'var(--warm-stone)', marginTop:2 }}>{l}</div>
                </div>
              ))}
            </div>
            <Btn kind="white" full size="sm" onClick={()=>setBankOpen(true)}>Change bank account</Btn>
          </SetSection>

          {/* team */}
          <SetSection icon={<I.users c="var(--brand-orange)" s={13}/>} title="Team" sub="Who can access this dashboard"
            footer={<Btn kind="white" size="sm" icon={<I.plus c="var(--fg-primary)" s={13}/>} onClick={()=>setInviteOpen(true)}>Invite</Btn>}>
            {team.map((m,i)=>(
              <div key={m.n} onClick={()=>setEditIdx(i)} role="button" style={{ display:'flex', alignItems:'center', gap:12, padding:'10px 8px', margin:'0 -8px', borderRadius:10, borderBottom: i<team.length-1?'1px solid var(--soft-line)':'none', cursor:'pointer' }}
                onMouseEnter={e=>e.currentTarget.style.background='var(--bg-warm)'} onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
                <div style={{ width:36, height:36, borderRadius:'50%', background: m.you?'linear-gradient(135deg,#F28C1B,#D85A14)':'var(--bg-warm)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-display)', fontWeight:900, fontSize:12, color: m.you?'#fff':'var(--horse-brown)', flexShrink:0 }}>{m.init}</div>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:13, color:'var(--fg-primary)' }}>{m.n}{m.you && <span style={{ color:'var(--brand-orange)' }}> · You</span>}</div>
                  <div style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--warm-stone)' }}>{m.role==='Owner'?'Full access':m.role==='Manager'?'Menu, orders, campaigns':'Orders only'}</div>
                </div>
                {m.pending
                  ? <Pill tone="amber" dot>Invited</Pill>
                  : <Pill tone={m.role==='Owner'?'orange':m.role==='Manager'?'blue':'grey'}>{m.role}</Pill>}
                <I.chevR c="var(--warm-stone)" s={14}/>
              </div>
            ))}
          </SetSection>

          {/* notifications */}
          <SetSection icon={<I.bell c="var(--brand-orange)" s={13}/>} title="Notifications">
            {notifs.map((n,i)=>(
              <div key={n.id} onClick={()=>toggleNotif(n.id)} role="button" style={{ display:'flex', alignItems:'center', gap:12, padding:'9px 0', borderBottom: i<notifs.length-1?'1px solid var(--soft-line)':'none', cursor:'pointer' }}>
                <Toggle on={n.on} onChange={()=>toggleNotif(n.id)}/>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:12.5, color:'var(--fg-primary)' }}>{n.label}</div>
                  <div style={{ fontFamily:'var(--font-body)', fontSize:10.5, color:'var(--warm-stone)' }}>{n.desc}</div>
                </div>
              </div>
            ))}
          </SetSection>

          {/* danger zone */}
          <Card style={{ borderColor:'rgba(193,59,31,0.3)' }}>
            <Eyebrow color="#b0341a" style={{ marginBottom:10 }}><I.alert c="#b0341a" s={13}/> &nbsp;Danger zone</Eyebrow>
            <div style={{ display:'flex', alignItems:'center', gap:12 }}>
              <div style={{ flex:1 }}>
                <div style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:13, color:'var(--fg-primary)' }}>Close storefront permanently</div>
                <div style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--warm-stone)', marginTop:2 }}>Removes Fire &amp; Dough from Lasso. This can't be undone.</div>
              </div>
              <Btn kind="white" size="sm" style={{ color:'#b0341a' }} onClick={()=>app.toast('Contact support to close your storefront')}>Close…</Btn>
            </div>
          </Card>
        </div>
      </div>

      {bankOpen && <ChangeBankModal onClose={()=>setBankOpen(false)} onSave={(b)=>{ setBank({ name:b.name, detail:`•••• •••• ${b.last4} · ${b.sort}`, verified:false }); setBankOpen(false); app.toast('Bank details submitted — verification in 1–2 working days'); }}/>}
      {inviteOpen && <InviteModal onClose={()=>setInviteOpen(false)} onInvite={(email, role)=>{ setTeam(t=>[...t, { n:email, role, init:email.slice(0,2).toUpperCase(), pending:true }]); setInviteOpen(false); app.toast(`Invite sent to ${email}`); }}/>}
      {stmtsOpen && <window.StatementsModal app={app} onClose={()=>setStmtsOpen(false)}/>}
      {editIdx!==null && team[editIdx] && (
        <MemberModal m={team[editIdx]}
          onClose={()=>setEditIdx(null)}
          onSave={(p)=>{ setTeam(t=>t.map((m,i)=>i===editIdx?{ ...m, ...p, init:p.n.split(/\s+/).map(w=>w[0]).join('').slice(0,2).toUpperCase() }:m)); setEditIdx(null); app.toast('Team member updated'); }}
          onRemove={()=>{ const m=team[editIdx]; setTeam(t=>t.filter((_,i)=>i!==editIdx)); setEditIdx(null); app.toast(m.pending?`Invite to ${m.n} cancelled`:`${m.n} removed from team`); }}
          onResend={()=>{ app.toast(`Invite resent to ${team[editIdx].n}`); }}/>
      )}
    </div>
  );
}

Object.assign(window, { SettingsScreen });