/* Profile / Settings */
function ProfileScreen({ onNav, onBack, onLogout, lang, onSetLang }) {
  const [langSheet, setLangSheet] = React.useState(false);
  const Group = ({ header, children }) => (
    <React.Fragment>
      <SectionLabel>{header}</SectionLabel>
      <div style={cardWrap}>{children}</div>
    </React.Fragment>
  );
  const Row = ({ icon, tint, ic, title, detail, last, danger }) => (
    <React.Fragment>
      <button onClick={()=>jlToast(title, { icon })} style={{ width:'100%', textAlign:'left', background:'transparent', border:0, cursor:'pointer', fontFamily:'var(--font-sans)', display:'flex', alignItems:'center', gap:12, padding:'13px 14px' }}>
        <span style={{ width:34, height:34, borderRadius:9, background:tint, display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name={icon} size={17} color={ic} /></span>
        <div style={{ flex:1, fontSize:14.5, fontWeight:600, color: danger?'var(--danger-500)':'var(--ink)' }}>{title}</div>
        {detail && <span style={{ fontSize:13, color:'var(--gray-500)' }}>{detail}</span>}
        <Icon name="chevron-right" size={18} color="var(--gray-400)" />
      </button>
      {!last && <Divider />}
    </React.Fragment>
  );
  const NavRow = ({ icon, tint, ic, title, detail, last, onClick }) => (
    <React.Fragment>
      <button onClick={onClick} style={{ width:'100%', textAlign:'left', background:'transparent', border:0, cursor:'pointer', fontFamily:'var(--font-sans)', display:'flex', alignItems:'center', gap:12, padding:'13px 14px' }}>
        <span style={{ width:34, height:34, borderRadius:9, background:tint, display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name={icon} size={17} color={ic} /></span>
        <div style={{ flex:1, fontSize:14.5, fontWeight:600, color:'var(--ink)' }}>{title}</div>
        {detail && <span style={{ fontSize:13, color:'var(--gray-500)' }}>{detail}</span>}
        <Icon name="chevron-right" size={18} color="var(--gray-400)" />
      </button>
      {!last && <Divider />}
    </React.Fragment>
  );
  return (
    <div style={{ background:'var(--gray-50)', minHeight:'100%' }}>
      <div style={{ paddingTop:54, padding:'54px 18px 6px', display:'flex', alignItems:'center', gap:6 }}>
        {onBack && <button onClick={onBack} style={{ width:38, height:38, borderRadius:'999px', border:0, background:'transparent', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer', marginLeft:-8 }}><Icon name="arrow-left" size={22} color="var(--ink)" /></button>}
        <div style={{ fontSize:26, fontWeight:800, color:'var(--ink)', letterSpacing:'-.02em' }}>{jlT('profile')}</div>
      </div>
      {langSheet && (
        <div onClick={()=>setLangSheet(false)} style={{ position:'absolute', inset:0, zIndex:70, background:'rgba(10,20,40,.4)', display:'flex', alignItems:'flex-end' }}>
          <div onClick={e=>e.stopPropagation()} style={{ width:'100%', background:'#fff', borderRadius:'22px 22px 0 0', padding:'10px 18px 30px' }}>
            <div style={{ width:40, height:4, borderRadius:'999px', background:'var(--gray-300)', margin:'0 auto 16px' }} />
            <div style={{ fontSize:18, fontWeight:800, color:'var(--ink)', marginBottom:4 }}>{jlT('lang_title')}</div>
            <div style={{ fontSize:13, color:'var(--gray-500)', marginBottom:14 }}>{jlT('lang_sub')}</div>
            <div style={{ display:'flex', flexDirection:'column', gap:9 }}>
              {(window.JL_LANGS||[]).map(l => {
                const on = lang === l.id;
                return (
                  <button key={l.id} onClick={()=>{ onSetLang(l.id); setLangSheet(false); }} style={{ display:'flex', alignItems:'center', gap:12, padding:'14px', borderRadius:13, cursor:'pointer', fontFamily:'var(--font-sans)', textAlign:'left', border: on?'1.5px solid var(--navy-600)':'1px solid var(--gray-200)', background: on?'var(--blue-100)':'#fff' }}>
                    <span style={{ width:38, height:38, borderRadius:'999px', background:'var(--gray-100)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:12, fontWeight:800, color:'var(--navy-600)', fontFamily:'var(--font-mono)', flex:'0 0 auto' }}>{l.flag}</span>
                    <span style={{ flex:1, fontSize:15.5, fontWeight:700, color:'var(--ink)' }}>{l.label}</span>
                    {on && <Icon name="check" size={20} color="var(--navy-600)" />}
                  </button>
                );
              })}
            </div>
          </div>
        </div>
      )}
      <div style={{ padding:'10px 18px 110px' }}>
        <div style={{ display:'flex', alignItems:'center', gap:14, background:'#fff', border:'1px solid var(--gray-200)', borderRadius:16, padding:'16px', boxShadow:'var(--shadow-sm)' }}>
          <Avatar initials="JH" color="navy" size={56} />
          <div>
            <div style={{ fontSize:18, fontWeight:800, color:'var(--ink)' }}>Jermaine Hatten</div>
            <div style={{ fontSize:13, color:'var(--gray-500)' }}>{jlT('parent_role')} · jermaine@email.com</div>
          </div>
        </div>

        <Group header={jlT('children')}>
          {(window.JL_CHILDREN||[]).map((c,i,a) => (
            <Row key={c.id} icon="graduation-cap" tint="var(--success-100)" ic="var(--success-500)" title={c.name} detail={c.gradeLabel} last={i===a.length-1} />
          ))}
        </Group>

        <Group header={jlT('settings')}>
          <NavRow icon="bell" tint="var(--blue-100)" ic="var(--blue-500)" title={jlT('p_notifications')} onClick={()=>onNav('notifsettings')} />
          <Row icon="car-front" tint="var(--gold-100)" ic="var(--gold-600)" title={jlT('p_pickup')} />
          <NavRow icon="languages" tint="var(--blue-100)" ic="var(--blue-500)" title={jlT('p_language')} detail={(window.JL_LANGS.find(l=>l.id===lang)||{}).label} onClick={()=>setLangSheet(true)} last />
        </Group>

        <Group header={jlT('security')}>
          <Row icon="lock" tint="var(--gray-200)" ic="var(--gray-600)" title={jlT('p_password')} />
          <Row icon="scan-face" tint="var(--gray-200)" ic="var(--gray-600)" title={jlT('p_faceid')} last />
        </Group>

        <Group header={jlT('help')}>
          <NavRow icon="life-buoy" tint="var(--info-100)" ic="var(--info-500)" title={jlT('p_help')} onClick={()=>onNav('help')} />
          <NavRow icon="play" tint="var(--gold-100)" ic="var(--gold-600)" title={jlT('p_replay')} onClick={()=>onNav('onboarding')} />
          <NavRow icon="info" tint="var(--gray-200)" ic="var(--gray-600)" title={jlT('p_about')} detail="v1.0" onClick={()=>jlToast('JewelLink EDU · v1.0', { icon:'info' })} last />
        </Group>

        <button onClick={onLogout} style={{ width:'100%', marginTop:16, background:'#fff', color:'var(--danger-500)', border:'1px solid var(--gray-200)', borderRadius:12, padding:'14px', fontWeight:700, fontSize:14.5, cursor:'pointer', fontFamily:'var(--font-sans)' }}>{jlT('log_out')}</button>
      </div>
      <BottomNav active="profile" onNav={onNav} />
    </div>
  );
}
Object.assign(window, { ProfileScreen });