/* Parent → Health & Nurse: medications, allergies, nurse visits, immunizations. */
function HealthScreen({ onNav, onBack }) {
  const allergies = [
    { n:'Peanuts', sev:'Severe', bg:'var(--danger-100)', fg:'var(--danger-600)', icon:'nut' },
    { n:'Penicillin', sev:'Moderate', bg:'var(--warning-100)', fg:'var(--warning-600)', icon:'pill' },
  ];
  const meds = [
    { n:'Albuterol Inhaler', dose:'As needed for asthma', when:'Kept in nurse\u2019s office', icon:'wind', tint:'var(--info-100)', ic:'var(--info-500)' },
    { n:'Children\u2019s Claritin', dose:'10 mg · once daily', when:'Seasonal · through Jun', icon:'pill', tint:'var(--blue-100)', ic:'var(--blue-500)' },
  ];
  const visits = [
    { r:'Headache — rested 20 min, returned to class', when:'May 28 · 1:15 PM', by:'Nurse Adams', icon:'thermometer' },
    { r:'Scraped knee at recess — cleaned & bandaged', when:'May 14 · 10:40 AM', by:'Nurse Adams', icon:'bandage' },
  ];

  return (
    <div style={{ background:'var(--gray-50)', minHeight:'100%' }}>
      <PushBar titleKey="t_health" onBack={onBack} />
      <div style={{ padding:'14px 18px 40px' }}>
        {/* allergy alert hero */}
        <div style={{ background:'var(--color-grad-hero)', borderRadius:16, padding:'17px 18px', color:'#fff', boxShadow:'var(--shadow-navy)' }}>
          <div style={{ fontSize:10, fontWeight:800, letterSpacing:'.1em', color:'rgba(255,255,255,.7)' }}>ON FILE FOR {jlChild().name.toUpperCase()}</div>
          <div style={{ display:'flex', alignItems:'center', gap:12, marginTop:9 }}>
            <span style={{ width:44, height:44, borderRadius:12, background:'rgba(255,255,255,.16)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name="heart-pulse" size={22} color="var(--gold-400)" /></span>
            <div>
              <div style={{ fontSize:19, fontWeight:800 }}>2 allergies flagged</div>
              <div style={{ fontSize:12.5, color:'rgba(255,255,255,.8)' }}>Shared with staff and the cafeteria</div>
            </div>
          </div>
        </div>

        <SectionLabel action={<span onClick={()=>jlToast('Request sent to school nurse', { icon:'send' })} style={{ fontSize:12, fontWeight:700, color:'var(--blue-500)', cursor:'pointer' }}>Update</span>}>Allergies</SectionLabel>
        <div style={{ display:'flex', flexDirection:'column', gap:11 }}>
          {allergies.map((a,i) => (
            <div key={i} style={{ display:'flex', alignItems:'center', gap:12, background:'#fff', border:'1px solid var(--gray-200)', borderRadius:14, padding:'13px 14px', boxShadow:'var(--shadow-sm)' }}>
              <span style={{ width:40, height:40, borderRadius:11, background:a.bg, display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name={a.icon} size={19} color={a.fg} /></span>
              <div style={{ flex:1, fontSize:14.5, fontWeight:700, color:'var(--ink)' }}>{a.n}</div>
              <Pill bg={a.bg} fg={a.fg}>{a.sev}</Pill>
            </div>
          ))}
        </div>

        <SectionLabel>{jlT('l_medications')}</SectionLabel>
        <div style={cardWrap}>
          {meds.map((m,i) => (
            <React.Fragment key={i}>
              {i>0 && <Divider />}
              <div style={{ display:'flex', alignItems:'center', gap:12, padding:'13px 14px' }}>
                <span style={{ width:38, height:38, borderRadius:10, background:m.tint, display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name={m.icon} size={18} color={m.ic} /></span>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontSize:14.5, fontWeight:700, color:'var(--ink)' }}>{m.n}</div>
                  <div style={{ fontSize:12.5, color:'var(--gray-500)' }}>{m.dose} · {m.when}</div>
                </div>
              </div>
            </React.Fragment>
          ))}
        </div>

        <SectionLabel>{jlT('l_nurse_visits')}</SectionLabel>
        <div style={cardWrap}>
          {visits.map((v,i) => (
            <React.Fragment key={i}>
              {i>0 && <Divider />}
              <div style={{ display:'flex', alignItems:'center', gap:12, padding:'13px 14px' }}>
                <span style={{ width:38, height:38, borderRadius:10, background:'var(--gray-100)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name={v.icon} size={18} color="var(--gray-500)" /></span>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontSize:14, fontWeight:700, color:'var(--ink)' }}>{v.r}</div>
                  <div style={{ fontSize:12, color:'var(--gray-500)' }}>{v.when} · {v.by}</div>
                </div>
              </div>
            </React.Fragment>
          ))}
        </div>

        {/* immunization status */}
        <div style={{ display:'flex', alignItems:'center', gap:11, marginTop:16, background:'var(--success-100)', borderRadius:14, padding:'14px 15px' }}>
          <Icon name="shield-check" size={20} color="var(--success-500)" />
          <div style={{ flex:1 }}>
            <div style={{ fontSize:14, fontWeight:700, color:'var(--success-600)' }}>Immunizations up to date</div>
            <div style={{ fontSize:12.5, color:'var(--success-600)', opacity:.85 }}>Last reviewed Aug 2025 · compliant</div>
          </div>
          <button onClick={()=>jlToast('Opening immunization record…', { icon:'file-text' })} style={{ background:'#fff', border:0, borderRadius:9, padding:'8px 13px', fontWeight:700, fontSize:12.5, color:'var(--success-600)', cursor:'pointer', fontFamily:'var(--font-sans)' }}>View</button>
        </div>

        <button onClick={()=>onNav('messages')} style={{ width:'100%', marginTop:14, display:'flex', alignItems:'center', justifyContent:'center', gap:9, background:'var(--navy-600)', color:'#fff', border:0, borderRadius:12, padding:'14px', fontWeight:700, fontSize:14.5, cursor:'pointer', fontFamily:'var(--font-sans)' }}>
          <Icon name="message-circle" size={18} color="#fff" />Message the School Nurse
        </button>
      </div>
    </div>
  );
}
Object.assign(window, { HealthScreen });