function ProfileScreen(){
  const [auto,setAuto] = React.useState(true);
  const [notify,setNotify] = React.useState(false);
  return (<div style={{position:'relative',flex:1,overflowY:'auto'}}>
    <ScreenHeader eyebrow="Health profile" title="You" right={<IconButton icon="settings" label="Settings" tone="card" />} />
    <div style={{padding:'0 20px 110px',display:'flex',flexDirection:'column',gap:14}}>
      <Card tone="mist" padding="md" radius="xl" style={{display:'flex',gap:16,alignItems:'center'}}>
        <span style={{width:64,height:64,borderRadius:'var(--radius-blob-2)',background:'var(--gradient-sunrise)',display:'grid',placeItems:'center',fontFamily:'var(--font-display)',fontWeight:800,fontSize:24,color:'var(--forest-800)'}}>AM</span>
        <div style={{flex:1}}>
          <div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:21,color:'var(--text-strong)'}}>Amina M.</div>
          <div style={{fontSize:14,color:'var(--text-muted)'}}>34 · 72.4 kg · Lightly active</div>
        </div>
        <IconButton icon="pencil" label="Edit profile" tone="card" />
      </Card>
      <div style={{display:'flex',gap:12}}>
        {[['Weight','72.4','kg','trending-down'],['Fibre avg','31','g/day','leaf'],['Streak','18','days','flame']].map(([l,v,u,ic])=>
          <Card key={l} padding="sm" style={{flex:1,display:'flex',flexDirection:'column',gap:6}}>
            <Icon name={ic} size={17} color="var(--jade-600)" />
            <span style={{fontFamily:'var(--font-mono)',fontSize:20,color:'var(--text-strong)'}}>{v}</span>
            <span style={{fontSize:11,textTransform:'uppercase',letterSpacing:'.07em',fontWeight:700,color:'var(--text-subtle)'}}>{l}<span style={{opacity:.7}}> {u}</span></span>
          </Card>)}
      </div>
      <Card padding="md">
        <span style={{fontSize:11,fontWeight:700,letterSpacing:'.1em',textTransform:'uppercase',color:'var(--text-subtle)'}}>Conditions & preferences</span>
        <div style={{display:'flex',flexWrap:'wrap',gap:8,marginTop:12}}>
          <Tag selected icon="wheat-off">Gluten-free</Tag><Tag selected icon="activity">PCOS</Tag><Tag icon="plus">Add</Tag>
        </div>
      </Card>
      <Card padding="md" style={{display:'flex',flexDirection:'column',gap:6}}>
        <Switch label="Weekly auto-adjust" description="Suko rewrites the plan each Sunday." checked={auto} onChange={()=>setAuto(!auto)} />
        <span style={{height:1,background:'var(--border-subtle)'}} />
        <Switch label="Nudge me at meal times" checked={notify} onChange={()=>setNotify(!notify)} />
      </Card>
      <Toast tone="info" inline title="Bloods due">Your last iron panel was 5 months ago. Adding fresh results sharpens the plan.</Toast>
    </div>
  </div>);
}
Object.assign(window,{ProfileScreen});