/* Profile / Settings */
function ProfileScreen({ onNav, onBack, onLogout }) {
  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' }}>Profile</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)' }}>Parent · jermaine@email.com</div>
          </div>
        </div>

        <Group header="Children">
          <Row icon="graduation-cap" tint="var(--success-100)" ic="var(--success-500)" title="EJ Hatten" detail="Grade 6" last />
        </Group>

        <Group header="Settings">
          <Row icon="bell" tint="var(--blue-100)" ic="var(--blue-500)" title="Notifications" />
          <Row icon="car-front" tint="var(--gold-100)" ic="var(--gold-600)" title="Pickup Preferences" />
          <Row icon="languages" tint="var(--blue-100)" ic="var(--blue-500)" title="Language" detail="English" last />
        </Group>

        <Group header="Security">
          <Row icon="lock" tint="var(--gray-200)" ic="var(--gray-600)" title="Change Password" />
          <Row icon="scan-face" tint="var(--gray-200)" ic="var(--gray-600)" title="Face ID / Biometrics" last />
        </Group>

        <Group header="Help">
          <NavRow icon="life-buoy" tint="var(--info-100)" ic="var(--info-500)" title="Help & Support" onClick={()=>onNav('help')} />
          <NavRow icon="info" tint="var(--gray-200)" ic="var(--gray-600)" title="About JewelLink" 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)' }}>Log Out</button>
      </div>
      <BottomNav active="profile" onNav={onNav} />
    </div>
  );
}
Object.assign(window, { ProfileScreen });