// parent-today-screen.jsx — the Today screen body

function ParentTodayScreen() {
  const data = [62, 58, 64, 70, 66, 72, 68, 74, 71, 76, 73, 78, 75, 80, 77];
  return (
    <div style={{
      width: '100%', height: '100%', background: CS.parentBg,
      fontFamily: FONT_BODY, color: CS.parentInk,
      paddingTop: 64, position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ padding: '20px 24px 8px', display: 'flex',
        justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
            <KeelGlyph size={18} ringOpacity={0.7}/>
            <div style={{ fontFamily: FONT_DISPLAY, fontSize: 13, fontWeight: 600,
              letterSpacing: 2.5, color: CS.parentInk }}>KEEL</div>
            <div style={{ width: 1, height: 9, background: 'rgba(26,31,46,0.2)' }}/>
            <div style={{ fontSize: 10, color: CS.parentMuted, letterSpacing: 0.5,
              textTransform: 'uppercase', fontWeight: 700 }}>Thu · May 8</div>
          </div>
          <div style={{ fontFamily: FONT_DISPLAY, fontSize: 30, fontWeight: 500,
            letterSpacing: -0.4 }}>Ella</div>
        </div>
        <div style={{ width: 36, height: 36, borderRadius: 18, background: '#E8E2D0',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 13, fontWeight: 700, color: '#5A4A2A' }}>EM</div>
      </div>

      <div style={{
        margin: '12px 16px 0', borderRadius: 22,
        background: 'linear-gradient(160deg, #E8F1E5, #C9DDC4)',
        padding: '20px 20px 18px',
      }}>
        <ParentBadge state="calm"/>
        <div style={{ fontFamily: FONT_DISPLAY, fontSize: 28, lineHeight: 1.1,
          fontWeight: 500, color: CS.parentSageInk, letterSpacing: -0.5,
          marginTop: 12, marginBottom: 8, textWrap: 'pretty' }}>
          Ella's nervous system looks settled.
        </div>
        <div style={{ fontSize: 14, color: 'rgba(44,62,45,0.7)', lineHeight: 1.4 }}>
          Morning HRV is <b>+8%</b> above her 7-day average.
        </div>
        <div style={{ marginTop: 14 }}>
          <Spark data={data} w={320} h={42} stroke={CS.parentSageInk} fill="rgba(44,62,45,0.12)"/>
          <div style={{ display: 'flex', justifyContent: 'space-between',
            fontSize: 10, color: 'rgba(44,62,45,0.55)', marginTop: 4,
            fontVariantNumeric: 'tabular-nums', letterSpacing: 0.3 }}>
            <span>6 AM</span><span>10 AM</span><span>2 PM</span><span>NOW</span>
          </div>
        </div>
      </div>

      <div style={{ padding: '18px 24px 8px', fontSize: 11, color: CS.parentMuted,
        letterSpacing: 0.6, textTransform: 'uppercase', fontWeight: 700 }}>Right now</div>
      <div style={{ margin: '0 16px', display: 'grid',
        gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        <SignalCell label="Heart rate" value="84" unit="bpm" sub="In range" color={CS.parentCalm}/>
        <SignalCell label="HRV (SDNN)" value="62" unit="ms" sub="+8% vs avg" color={CS.parentCalm}/>
        <SignalCell label="State" value="Resting" sub="Low movement"/>
        <SignalCell label="Recovery" value="Good" sub="Sleep stable"/>
      </div>

      <div style={{ margin: '16px 16px 0', padding: '14px 16px', borderRadius: 14,
        background: CS.parentCard, border: `0.5px solid ${CS.parentLine}` }}>
        <div style={{ fontSize: 11, fontWeight: 700, color: CS.parentMuted,
          textTransform: 'uppercase', letterSpacing: 0.6, marginBottom: 4 }}>Today's heads-up</div>
        <div style={{ fontSize: 14, lineHeight: 1.4, color: CS.parentInk }}>
          After-school window (3:15 – 5:00 PM) is the most likely escalation period.
        </div>
      </div>

      <ParentTabBar active="today"/>
    </div>
  );
}

Object.assign(window, { ParentTodayScreen });