// bha-immunizations.jsx — Pediatric Immunization Schedule (Family Plan, members 18 & under)

const IZ_C = window.BHA_COLORS

// CDC base schedule for children 0-18, condensed to milestones (illustrative for prototype)
// Each vaccine: name, ages (months as numbers, or 'NM' for newborn), doses needed, notes
const CDC_SCHEDULE = [
  { code: 'HepB',     name: 'Hepatitis B',            ages: ['Birth','1-2 mo','6-18 mo'],                  desc: 'Protects against liver infection.' },
  { code: 'RV',       name: 'Rotavirus',              ages: ['2 mo','4 mo','6 mo'],                        desc: 'Prevents severe diarrhea in infants.' },
  { code: 'DTaP',     name: 'DTaP',                   ages: ['2 mo','4 mo','6 mo','15-18 mo','4-6 yr'],    desc: 'Diphtheria, Tetanus, and Pertussis (whooping cough).' },
  { code: 'Hib',      name: 'Hib',                    ages: ['2 mo','4 mo','6 mo','12-15 mo'],             desc: 'Prevents Haemophilus influenzae type b infections.' },
  { code: 'PCV',      name: 'Pneumococcal (PCV)',     ages: ['2 mo','4 mo','6 mo','12-15 mo'],             desc: 'Protects against pneumonia and meningitis.' },
  { code: 'IPV',      name: 'Polio (IPV)',            ages: ['2 mo','4 mo','6-18 mo','4-6 yr'],            desc: 'Prevents poliomyelitis.' },
  { code: 'Flu',      name: 'Influenza',              ages: ['6 mo+ annually'],                            desc: 'Yearly flu shot recommended for all kids 6 months and older.' },
  { code: 'MMR',      name: 'MMR',                    ages: ['12-15 mo','4-6 yr'],                         desc: 'Measles, Mumps, Rubella.' },
  { code: 'VAR',      name: 'Varicella',              ages: ['12-15 mo','4-6 yr'],                         desc: 'Chickenpox.' },
  { code: 'HepA',     name: 'Hepatitis A',            ages: ['12-23 mo (2 doses, 6 mo apart)'],            desc: 'Protects against liver infection from food/water.' },
  { code: 'Tdap',     name: 'Tdap',                   ages: ['11-12 yr'],                                  desc: 'Adolescent booster for tetanus, diphtheria, pertussis.' },
  { code: 'HPV',      name: 'HPV',                    ages: ['11-12 yr (2-3 doses)'],                      desc: 'Prevents human papillomavirus and HPV-linked cancers.' },
  { code: 'MenACWY',  name: 'Meningococcal (MenACWY)',ages: ['11-12 yr','16 yr booster'],                  desc: 'Prevents bacterial meningitis.' },
  { code: 'MenB',     name: 'Meningococcal B',        ages: ['16-18 yr (shared decision)'],                desc: 'Additional meningitis protection for older teens.' },
  { code: 'COVID',    name: 'COVID-19',               ages: ['6 mo+ per current CDC guidance'],            desc: 'Stay up to date per current CDC recommendations.' },
]

// State school-entry requirements (illustrative — represents typical state mandates)
// For each state, list of vaccine codes required for school/childcare entry (K-12 typical)
// Source: state DOH school requirement summaries (general, simplified for prototype)
const STATE_REQUIREMENTS = {
  GA: { name: 'Georgia',        k12: ['DTaP','IPV','MMR','VAR','HepB','HepA','Hib','PCV'], adolescent: ['Tdap','MenACWY'], notes: 'Form 3231 required. HPV strongly recommended.' },
  AL: { name: 'Alabama',        k12: ['DTaP','IPV','MMR','VAR','HepB','Hib','PCV'],        adolescent: ['Tdap'],            notes: 'Blue Card (IMM-50) required for entry.' },
  CA: { name: 'California',     k12: ['DTaP','IPV','MMR','VAR','HepB','Hib'],              adolescent: ['Tdap','MenACWY'], notes: 'Personal belief exemptions not allowed.' },
  FL: { name: 'Florida',        k12: ['DTaP','IPV','MMR','VAR','HepB','Hib'],              adolescent: ['Tdap'],            notes: 'DH 680 form required.' },
  IL: { name: 'Illinois',       k12: ['DTaP','IPV','MMR','VAR','HepB','HepA','Hib','PCV'], adolescent: ['Tdap','MenACWY'], notes: 'Annual physical with immunization record required.' },
  MD: { name: 'Maryland',       k12: ['DTaP','IPV','MMR','VAR','HepB','HepA','Hib','PCV'], adolescent: ['Tdap','MenACWY','HPV'], notes: 'HPV required for 9th grade entry.' },
  MI: { name: 'Michigan',       k12: ['DTaP','IPV','MMR','VAR','HepB'],                    adolescent: ['Tdap','MenACWY'], notes: 'Waivers require health dept education session.' },
  MS: { name: 'Mississippi',    k12: ['DTaP','IPV','MMR','VAR','HepB','Hib','PCV'],        adolescent: ['Tdap'],            notes: 'Only medical exemptions; one of the strictest mandates.' },
  NC: { name: 'North Carolina', k12: ['DTaP','IPV','MMR','VAR','HepB','Hib','PCV'],        adolescent: ['Tdap','MenACWY'], notes: 'MenACWY required for 7th grade and 12th grade entry.' },
  NJ: { name: 'New Jersey',     k12: ['DTaP','IPV','MMR','VAR','HepB','Hib','PCV','Flu'],  adolescent: ['Tdap','MenACWY'], notes: 'Annual flu required for preschool/childcare.' },
  NY: { name: 'New York',       k12: ['DTaP','IPV','MMR','VAR','HepB','HepA','Hib','PCV'], adolescent: ['Tdap','MenACWY'], notes: 'No religious exemption since 2019.' },
  OH: { name: 'Ohio',           k12: ['DTaP','IPV','MMR','VAR','HepB'],                    adolescent: ['Tdap','MenACWY'], notes: '' },
  PA: { name: 'Pennsylvania',   k12: ['DTaP','IPV','MMR','VAR','HepB'],                    adolescent: ['Tdap','MenACWY'], notes: 'MenACWY required for grades 7 and 12.' },
  TX: { name: 'Texas',          k12: ['DTaP','IPV','MMR','VAR','HepB','HepA','Hib','PCV'], adolescent: ['Tdap','MenACWY'], notes: 'Form 9.169 required.' },
  VA: { name: 'Virginia',       k12: ['DTaP','IPV','MMR','VAR','HepB','HepA','Hib','PCV'], adolescent: ['Tdap','MenACWY','HPV'], notes: 'HPV required for 6th grade entry (with opt-out).' },
  DC: { name: 'D.C.',           k12: ['DTaP','IPV','MMR','VAR','HepB','HepA','Hib','PCV'], adolescent: ['Tdap','MenACWY','HPV'], notes: 'HPV required for 6th-12th grade.' },
}

const STATE_LIST = Object.entries(STATE_REQUIREMENTS).map(([code, s]) => ({ code, ...s }))

// Mock per-child immunization history (vaccines given). Real app reads from EHR.
const IZ_HISTORY = {
  child: { // Amir, 8
    HepB: 3, RV: 3, DTaP: 4, Hib: 4, PCV: 4, IPV: 3, MMR: 1, VAR: 1, HepA: 2, Flu: 6,
  },
  teen: { // Maya, 15
    HepB: 3, DTaP: 5, Hib: 4, PCV: 4, IPV: 4, MMR: 2, VAR: 2, HepA: 2, Tdap: 1, HPV: 2, MenACWY: 1, Flu: 8,
  },
}

function statusFor(vCode, age, history) {
  const v = CDC_SCHEDULE.find(x => x.code === vCode)
  if (!v) return { state: 'unknown', label: 'Unknown' }
  const given = (history && history[vCode]) || 0
  // Simple ruleset for status
  if (vCode === 'Flu' || vCode === 'COVID') {
    return given > 0
      ? { state: 'current', label: 'Up to date (annual)' }
      : { state: 'due', label: 'Annual dose recommended' }
  }
  if (vCode === 'Tdap' && age >= 11 && given < 1) return { state: 'due', label: 'Due now (11-12 yr booster)' }
  if (vCode === 'HPV' && age >= 11 && given < 2) return { state: 'due', label: `Series in progress (${given}/2-3)` }
  if (vCode === 'MenACWY' && age >= 11 && given < 1) return { state: 'due', label: 'Due now (11-12 yr)' }
  if (vCode === 'MenACWY' && age >= 16 && given < 2) return { state: 'due', label: 'Booster due at 16' }
  if (vCode === 'MenB' && age >= 16) return { state: 'optional', label: 'Shared decision (16-18 yr)' }
  if (given >= v.ages.length) return { state: 'current', label: 'Series complete' }
  if (given > 0) return { state: 'partial', label: `${given}/${v.ages.length} doses received` }
  if (age < 1) return { state: 'upcoming', label: 'Coming up in first year' }
  return { state: 'overdue', label: `Missing all ${v.ages.length} doses` }
}

const STATUS_COLOR = {
  current:  { bg: '#E4F2E8', border: '#1A5228', text: '#1A5228', icon: '✓' },
  partial:  { bg: '#FEF3DD', border: '#7A5108', text: '#7A5108', icon: '◐' },
  due:      { bg: '#FDE8E5', border: '#C0392B', text: '#C0392B', icon: '!' },
  overdue:  { bg: '#FDE8E5', border: '#8C1225', text: '#8C1225', icon: '!' },
  upcoming: { bg: '#EEF4FF', border: '#1F4E8A', text: '#1F4E8A', icon: '○' },
  optional: { bg: '#F0EEEA', border: '#8A8580', text: '#6B6560', icon: '?' },
  unknown:  { bg: '#F0EEEA', border: '#8A8580', text: '#6B6560', icon: '?' },
}

function ImmunizationsScreen({ nav, focusId }) {
  const members = window.__bhaMembers || []
  const kids = members.filter(m => m.age != null && m.age <= 18)
  const initial = (focusId && kids.find(k => k.id === focusId)) || kids[0]
  const [activeId, setActiveId] = React.useState(initial && initial.id)
  const [stateCode, setStateCode] = React.useState((initial && initial.state) || 'GA')
  const [filter, setFilter] = React.useState('all') // all | due | complete | required
  const [aiBusy, setAiBusy] = React.useState(false)
  const [aiNote, setAiNote] = React.useState('')

  const active = kids.find(k => k.id === activeId) || kids[0]
  const stateReq = STATE_REQUIREMENTS[stateCode] || STATE_REQUIREMENTS.GA
  const history = (active && IZ_HISTORY[active.id]) || {}
  const requiredCodes = new Set([...(stateReq.k12 || []), ...(stateReq.adolescent || [])])

  const rows = CDC_SCHEDULE.map(v => {
    const st = statusFor(v.code, (active && active.age) || 0, history)
    const required = requiredCodes.has(v.code)
    return { v, st, required }
  })

  const filtered = rows.filter(r => {
    if (filter === 'due') return r.st.state === 'due' || r.st.state === 'overdue' || r.st.state === 'partial'
    if (filter === 'complete') return r.st.state === 'current'
    if (filter === 'required') return r.required
    return true
  })

  const dueCount = rows.filter(r => r.st.state === 'due' || r.st.state === 'overdue').length
  const reqMissing = rows.filter(r => r.required && (r.st.state === 'due' || r.st.state === 'overdue' || r.st.state === 'partial')).length

  const askAi = async () => {
    if (!active) return
    setAiBusy(true)
    try {
      const dueList = rows.filter(r => r.st.state === 'due' || r.st.state === 'overdue').map(r => r.v.name).join(', ') || 'none currently overdue'
      const reply = await window.bhaAI.complete(
        `You are a warm, caring pediatric advocate. Explain this in VERY simple, plain language that an 8th grader could easily understand. ${active.name} is ${active.age} years old and lives in ${stateReq.name}. Vaccines currently due/overdue: ${dueList}. State school-entry requirements include: ${[...requiredCodes].join(', ')}. Rules: Use short sentences and everyday words, not medical words. In 3-4 short sentences, tell this parent exactly what to do next, including any state-specific notes. Be warm, clear, and encouraging.`
      )
      setAiNote(reply)
    } catch {
      setAiNote(`${active.name} has ${dueCount} vaccine${dueCount === 1 ? '' : 's'} due. ${stateReq.name} requires ${requiredCodes.size} vaccines for school entry. ${stateReq.notes}`)
    }
    setAiBusy(false)
  }

  if (!kids.length) {
    return (
      <div style={{ height: '100%', overflowY: 'auto', background: IZ_C.bg, paddingBottom: 90 }}>
        <SectionHeader title="Immunizations" sub="No children on your plan" onBack={() => nav('profile')} backLabel="Profile" />
        <div style={{ padding: '0 16px' }}>
          <div style={{ background: IZ_C.card, borderRadius: 16, padding: 20, border: `1px solid ${IZ_C.border}`, textAlign: 'center' }}>
            <p style={{ color: IZ_C.muted, fontSize: 14, lineHeight: 1.6, fontFamily: 'DM Sans, sans-serif' }}>
              The Immunization Schedule is available for children 18 and under on the Family Plan. Add a child to your plan to track CDC-recommended and state-required vaccines.
            </p>
          </div>
        </div>
      </div>
    )
  }

  return (
    <div style={{ height: '100%', overflowY: 'auto', background: IZ_C.bg, paddingBottom: 90 }}>
      <SectionHeader title="Immunizations" sub="CDC schedule · State school requirements" onBack={() => nav('profile')} backLabel="Profile" />

      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {/* Member switcher */}
        <div style={{ display: 'flex', gap: 8, overflowX: 'auto', paddingBottom: 2 }}>
          {kids.map(k => {
            const isActive = k.id === activeId
            return (
              <button key={k.id} onClick={() => { setActiveId(k.id); setStateCode(k.state || 'GA'); setAiNote('') }} style={{
                background: isActive ? `linear-gradient(135deg, ${IZ_C.gold}, ${IZ_C.red})` : IZ_C.card,
                color: isActive ? '#fff' : IZ_C.text,
                border: `1.5px solid ${isActive ? 'transparent' : IZ_C.border}`,
                borderRadius: 14, padding: '10px 14px', cursor: 'pointer', flexShrink: 0,
                display: 'flex', alignItems: 'center', gap: 10, fontFamily: 'DM Sans, sans-serif',
                boxShadow: isActive ? '0 4px 12px rgba(192,57,43,0.22)' : 'none',
              }}>
                <div style={{ width: 30, height: 30, borderRadius: 15, background: isActive ? 'rgba(255,255,255,0.2)' : `${IZ_C.gold}20`, color: isActive ? '#fff' : IZ_C.gold, fontSize: 12, fontWeight: 800, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{k.initials}</div>
                <div style={{ textAlign: 'left' }}>
                  <div style={{ fontSize: 13, fontWeight: 700 }}>{k.name.split(' ')[0]}</div>
                  <div style={{ fontSize: 11, opacity: 0.85 }}>{k.role}</div>
                </div>
              </button>
            )
          })}
        </div>

        {/* Status card */}
        <div style={{ background: 'linear-gradient(135deg, #1A1A2E 0%, #2A2A46 100%)', borderRadius: 18, padding: 18, color: '#fff', boxShadow: '0 6px 18px rgba(26,26,46,0.18)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
            <div>
              <p style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1, opacity: 0.75, textTransform: 'uppercase', fontFamily: 'DM Sans, sans-serif' }}>{active.name} · Age {active.age}</p>
              <h2 style={{ fontFamily: 'DM Serif Display, serif', fontSize: 22, marginTop: 4 }}>
                {dueCount === 0 ? 'Fully up to date' : `${dueCount} vaccine${dueCount === 1 ? '' : 's'} due`}
              </h2>
            </div>
            <div style={{ width: 50, height: 50, borderRadius: 25, background: dueCount === 0 ? 'rgba(26,82,40,0.25)' : 'rgba(192,57,43,0.25)', border: `2px solid ${dueCount === 0 ? '#5DBA7C' : '#F1948A'}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>
              {dueCount === 0 ? '✓' : '!'}
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', fontSize: 12, fontFamily: 'DM Sans, sans-serif' }}>
            <span style={{ background: 'rgba(255,255,255,0.10)', borderRadius: 8, padding: '6px 10px' }}>📋 {requiredCodes.size} state-required</span>
            <span style={{ background: 'rgba(255,255,255,0.10)', borderRadius: 8, padding: '6px 10px' }}>⚠️ {reqMissing} required & due</span>
          </div>
        </div>

        {/* State selector */}
        <div style={{ background: IZ_C.card, borderRadius: 16, padding: 16, border: `1px solid ${IZ_C.border}` }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
            <p style={{ color: IZ_C.muted, fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 1, fontFamily: 'DM Sans, sans-serif' }}>State of Residence</p>
            <span style={{ fontSize: 11, color: IZ_C.gold, fontWeight: 600, fontFamily: 'DM Sans, sans-serif' }}>Cross-referenced with school requirements</span>
          </div>
          <select value={stateCode} onChange={e => setStateCode(e.target.value)} style={{
            width: '100%', background: '#F6F2EC', border: `1.5px solid ${IZ_C.border}`, borderRadius: 10,
            padding: '12px 14px', fontFamily: 'DM Sans, sans-serif', fontSize: 14, color: IZ_C.text,
            outline: 'none', appearance: 'none',
            backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23${IZ_C.muted.replace('#','')}' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>")`,
            backgroundRepeat: 'no-repeat', backgroundPosition: 'right 14px center', paddingRight: 36,
          }}>
            {STATE_LIST.map(s => <option key={s.code} value={s.code}>{s.name}</option>)}
          </select>
          {stateReq.notes && (
            <div style={{ marginTop: 10, background: '#FEF3DD', border: `1px solid ${IZ_C.gold}40`, borderRadius: 8, padding: '10px 12px' }}>
              <p style={{ color: '#7A5108', fontSize: 12.5, lineHeight: 1.5, fontFamily: 'DM Sans, sans-serif' }}>
                <strong>{stateReq.name} note:</strong> {stateReq.notes}
              </p>
            </div>
          )}
        </div>

        {/* AI summary */}
        <button onClick={askAi} disabled={aiBusy} className="bha-tap" style={{
          background: aiBusy ? IZ_C.card : 'linear-gradient(135deg, #FEF3DD 0%, #FCE7C8 100%)',
          border: `1.5px solid ${IZ_C.gold}40`, borderRadius: 14, padding: '12px 14px',
          cursor: aiBusy ? 'default' : 'pointer', display: 'flex', alignItems: 'center', gap: 10,
          fontFamily: 'DM Sans, sans-serif', textAlign: 'left',
        }}>
          <div style={{ width: 32, height: 32, borderRadius: 16, background: `${IZ_C.gold}25`, color: IZ_C.gold, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, flexShrink: 0 }}>✨</div>
          <div style={{ flex: 1 }}>
            <p style={{ color: IZ_C.text, fontWeight: 700, fontSize: 13.5 }}>{aiBusy ? 'Generating summary…' : aiNote ? 'Refresh AI Summary' : 'AI Summary for ' + active.name.split(' ')[0]}</p>
            <p style={{ color: IZ_C.muted, fontSize: 11.5, marginTop: 1 }}>State requirements + what to do next</p>
          </div>
        </button>
        {aiNote && (
          <div style={{ background: '#FFF', border: `1px solid ${IZ_C.border}`, borderLeft: `4px solid ${IZ_C.gold}`, borderRadius: 10, padding: '12px 14px' }}>
            <p style={{ color: IZ_C.text, fontSize: 13, lineHeight: 1.6, fontFamily: 'DM Sans, sans-serif' }}>{aiNote}</p>
          </div>
        )}

        {/* Filter tabs */}
        <div style={{ display: 'flex', gap: 6, background: IZ_C.card, borderRadius: 12, padding: 4, border: `1px solid ${IZ_C.border}` }}>
          {[
            { id: 'all',      label: `All (${rows.length})` },
            { id: 'due',      label: `Due (${dueCount + rows.filter(r=>r.st.state==='partial').length})` },
            { id: 'required', label: `Required (${requiredCodes.size})` },
            { id: 'complete', label: `Done` },
          ].map(t => (
            <button key={t.id} onClick={() => setFilter(t.id)} style={{
              flex: 1, background: filter === t.id ? '#fff' : 'transparent',
              border: 'none', borderRadius: 8, padding: '8px 4px', cursor: 'pointer',
              fontFamily: 'DM Sans, sans-serif', fontSize: 11.5,
              fontWeight: filter === t.id ? 700 : 500,
              color: filter === t.id ? IZ_C.text : IZ_C.muted,
              boxShadow: filter === t.id ? '0 2px 6px rgba(0,0,0,0.06)' : 'none',
            }}>{t.label}</button>
          ))}
        </div>

        {/* Vaccine list */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {filtered.length === 0 && (
            <div style={{ background: IZ_C.card, borderRadius: 14, padding: 24, border: `1px dashed ${IZ_C.border}`, textAlign: 'center' }}>
              <p style={{ color: IZ_C.muted, fontSize: 13, fontFamily: 'DM Sans, sans-serif' }}>No vaccines match this filter.</p>
            </div>
          )}
          {filtered.map(({ v, st, required }) => {
            const c = STATUS_COLOR[st.state]
            return (
              <div key={v.code} style={{
                background: '#fff', borderRadius: 14, padding: 14,
                border: `1.5px solid ${st.state === 'due' || st.state === 'overdue' ? c.border : IZ_C.border}`,
                boxShadow: '0 1px 4px rgba(0,0,0,0.04)',
              }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                  <div style={{ width: 36, height: 36, borderRadius: 18, background: c.bg, color: c.text, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 16, flexShrink: 0, border: `1.5px solid ${c.border}40` }}>{c.icon}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
                      <p style={{ color: IZ_C.text, fontWeight: 700, fontSize: 14.5, fontFamily: 'DM Sans, sans-serif' }}>{v.name}</p>
                      {required && (
                        <span style={{ background: '#1A1A2E', color: '#fff', fontSize: 9.5, fontWeight: 700, padding: '2px 7px', borderRadius: 10, letterSpacing: 0.4, textTransform: 'uppercase', fontFamily: 'DM Sans, sans-serif' }}>{stateReq.name.split(' ')[0]} required</span>
                      )}
                    </div>
                    <p style={{ color: c.text, fontSize: 12, fontWeight: 700, marginTop: 3, fontFamily: 'DM Sans, sans-serif' }}>{st.label}</p>
                    <p style={{ color: IZ_C.muted, fontSize: 11.5, marginTop: 6, lineHeight: 1.5, fontFamily: 'DM Sans, sans-serif' }}>{v.desc}</p>
                    <div style={{ marginTop: 8, display: 'flex', flexWrap: 'wrap', gap: 5 }}>
                      {v.ages.map((a, idx) => (
                        <span key={idx} style={{ background: '#F6F2EC', color: IZ_C.muted, fontSize: 10.5, padding: '3px 8px', borderRadius: 6, fontFamily: 'DM Sans, sans-serif' }}>{a}</span>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            )
          })}
        </div>

        {/* Footer CTAs */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 4 }}>
          <GoldBtn primary label="📅 Schedule Vaccine Appointment" onClick={() => nav('schedule')} />
          <GoldBtn outline label="📄 Upload Existing Records" />
          <GoldBtn outline label="📥 Export School Form (PDF)" />
        </div>

        <p style={{ textAlign: 'center', color: IZ_C.muted, fontSize: 10.5, marginTop: 4, fontFamily: 'DM Sans, sans-serif', lineHeight: 1.5 }}>
          Based on CDC Childhood Immunization Schedule and state Department of Health school-entry requirements.<br/>Always confirm with your child's pediatrician.
        </p>
      </div>
    </div>
  )
}

window.ImmunizationsScreen = ImmunizationsScreen