// Scroll-state variants — what each major screen looks like further down
const { Icon, Phone, TabBar, HomeIndicator, TopBar } = window;

// ═══════════════════════════════════════════════════════════
// Home — scrolled. Activity feed up top + past episodes detailed
// ═══════════════════════════════════════════════════════════
function HomeScrolled() {
  const T = UN.d;
  return (
    <Phone mode="d" time="2:14">
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        <TopBar mode="d" kidName="Maeve" kidTone="#d3a89a" dot="warm" subtitle="DAY 3 · WATCH"/>

        <div style={{ flex: 1, overflowY: 'auto', padding: '6px 0 16px' }}>
          {/* Scroll progress hint */}
          <div style={{
            margin: '4px 22px 8px',
            padding: '6px 10px', borderRadius: 99,
            background: T.surface2, border: `1px solid ${T.line2}`,
            display: 'inline-flex', alignItems: 'center', gap: 6,
            fontSize: 10, color: T.textMute, fontWeight: 600, letterSpacing: 0.3,
          }}>
            <Icon name="chevDown" size={10} color={T.textMute} strokeWidth={2.2}/>
            SCROLLED · TOP HIDDEN
          </div>

          {/* Activity feed expanded */}
          <h3 style={{
            margin: '8px 22px 10px', fontSize: 11, color: T.textMute,
            letterSpacing: 0.7, fontWeight: 700, textTransform: 'uppercase',
          }}>Today · across everyone</h3>
          <div style={{ padding: '0 22px' }}>
            {[
              { who: 'Grandma', tone: '#d3a89a', what: '2.5mL Tylenol', when: '12m', icon: 'pill', tone2: 'trust' },
              { who: 'Sarah',   tone: '#a5b8c9', what: '5oz Pedialyte', when: '4h',  icon: 'drop' },
              { who: 'You',     tone: '#c2b39a', what: 'Vomit · small', when: '4h',  icon: 'vomit', sev: 'warm' },
              { who: 'You',     tone: '#c2b39a', what: '38.6° ear',     when: '4h 30m', icon: 'thermo', sev: 'warm' },
              { who: 'Sarah',   tone: '#a5b8c9', what: '5mL Motrin',    when: '8h',  icon: 'pill', tone2: 'trust' },
              { who: 'You',     tone: '#c2b39a', what: '½ slice toast', when: '8h 30m', icon: 'food' },
              { who: 'Sarah',   tone: '#a5b8c9', what: '39.1° ear',     when: '9h',  icon: 'thermo', sev: 'hot' },
              { who: 'Sarah',   tone: '#a5b8c9', what: 'Throat photo',  when: '14h', icon: 'camera' },
            ].map((r, i, arr) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 10, padding: '9px 0',
                borderBottom: i < arr.length - 1 ? `1px solid ${T.line}` : 'none',
              }}>
                <div style={{
                  width: 22, height: 22, borderRadius: 22, background: r.tone,
                  color: '#fff', fontSize: 9.5, fontWeight: 700,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>{r.who[0]}</div>
                <div style={{
                  width: 24, height: 24, borderRadius: 7,
                  background: r.tone2 === 'trust' ? UN.d.trustSoft :
                              r.sev ? `${UN.d.sev[r.sev]}22` : T.surface2,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0,
                }}>
                  <Icon name={r.icon} size={12}
                        color={r.tone2 === 'trust' ? UN.d.trust : r.sev ? UN.d.sev[r.sev] : T.textDim}
                        strokeWidth={1.9}/>
                </div>
                <div style={{ flex: 1, fontSize: 13, color: T.text, fontWeight: 500, letterSpacing: -0.1 }}>
                  <strong style={{ fontWeight: 600 }}>{r.who}</strong> · {r.what}
                </div>
                <span style={{ fontSize: 11, color: T.textMute, fontWeight: 500, fontVariantNumeric: 'tabular-nums' }}>{r.when}</span>
              </div>
            ))}
          </div>

          {/* Past episodes expanded with thumbnails */}
          <h3 style={{
            margin: '18px 22px 10px', fontSize: 11, color: T.textMute,
            letterSpacing: 0.7, fontWeight: 700, textTransform: 'uppercase',
          }}>Past episodes</h3>
          <div style={{ padding: '0 22px', display: 'flex', flexDirection: 'column', gap: 6 }}>
            {[
              { who: 'Henry', wt: '#a5b8c9', ail: 'Stomach flu', dur: '9 days', when: 'Apr 22',
                peak: '39.5°', doses: 22, retrospective: 'Motrin held it best' },
              { who: 'Maeve', wt: '#d3a89a', ail: 'Cold',        dur: '5 days', when: 'Feb 14',
                peak: '38.2°', doses: 6,  retrospective: 'Self-resolved' },
              { who: 'Maeve', wt: '#d3a89a', ail: 'Ear infection',dur: '10 days',when: 'Dec 3',
                peak: '38.8°', doses: 20, retrospective: 'Amoxicillin · finished', course: true },
            ].map((e, i) => (
              <div key={i} style={{
                background: T.surface, border: `1px solid ${T.line}`, borderRadius: 14,
                padding: '12px 14px',
                display: 'flex', alignItems: 'center', gap: 12,
              }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 36, background: e.wt,
                  color: '#fff', fontWeight: 700, fontSize: 14,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>{e.who[0]}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontSize: 14, color: T.text, fontWeight: 600, letterSpacing: -0.1,
                    display: 'flex', alignItems: 'center', gap: 6,
                  }}>
                    {e.who} · {e.ail}
                    {e.course && (
                      <span style={{
                        fontSize: 9, color: UN.d.trust, fontWeight: 700, letterSpacing: 0.4,
                        padding: '1px 5px', borderRadius: 3, background: UN.d.trustSoft,
                      }}>COURSE</span>
                    )}
                  </div>
                  <div style={{ fontSize: 11, color: T.textMute, marginTop: 1 }}>
                    {e.dur} · {e.when} · peak {e.peak} · {e.doses} doses
                  </div>
                  <div style={{ fontSize: 11.5, color: T.textDim, marginTop: 4, fontStyle: 'italic' }}>
                    "{e.retrospective}"
                  </div>
                </div>
                <Icon name="chev" size={14} color={T.textMute} strokeWidth={1.8}/>
              </div>
            ))}
          </div>
        </div>
        <TabBar mode="d" active="home"/>
        <HomeIndicator mode="d"/>
      </div>
    </Phone>
  );
}

// ═══════════════════════════════════════════════════════════
// Episode — scrolled. Wellbeing detail + recent log + selected dim
// ═══════════════════════════════════════════════════════════
function EpisodeScrolled() {
  const T = UN.d;

  return (
    <Phone mode="d" time="2:14">
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        <TopBar mode="d" kidName="Maeve" kidTone="#d3a89a" dot="warm" subtitle="DAY 3 · WATCH"/>

        <div style={{ flex: 1, overflowY: 'auto', padding: '6px 0 16px' }}>
          {/* Scroll hint + selected chip state */}
          <div style={{
            margin: '4px 22px 8px',
            display: 'flex', alignItems: 'center', gap: 6,
          }}>
            <div style={{
              padding: '6px 10px', borderRadius: 99,
              background: T.surface2, border: `1px solid ${T.line2}`,
              fontSize: 10, color: T.textMute, fontWeight: 600, letterSpacing: 0.3,
              display: 'inline-flex', alignItems: 'center', gap: 6,
            }}>
              <Icon name="chevDown" size={10} color={T.textMute} strokeWidth={2.2}/>
              SCROLLED
            </div>
            <div style={{ flex: 1 }}/>
            <div style={{ fontSize: 11, color: T.textMute }}>Viewing: <strong style={{ color: T.text, fontWeight: 700 }}>Vomit · 3 today</strong></div>
          </div>

          {/* Selected dimension chip set */}
          <div style={{
            padding: '0 22px 8px',
            display: 'flex', gap: 6, overflowX: 'auto',
          }}>
            {[
              { i: 'thermo', t: 'Temp',     n: 18 },
              { i: 'pill',   t: 'Doses',    n: 4 },
              { i: 'vomit',  t: 'Vomit',    n: 3, sel: true },
              { i: 'drop',   t: 'Fluids',   n: 11 },
              { i: 'diaper', t: 'Urine',    n: 5 },
              { i: 'alert',  t: 'Symptoms', n: 4 },
            ].map((d,i) => (
              <div key={i} style={{
                flexShrink: 0,
                display: 'inline-flex', alignItems: 'center', gap: 6,
                padding: '7px 11px', borderRadius: 10,
                background: d.sel ? UN.d.sev.warm : T.surface,
                border: `1.5px solid ${d.sel ? UN.d.sev.warm : T.line2}`,
                color: d.sel ? '#0E1A14' : T.textDim,
                fontSize: 12, fontWeight: d.sel ? 700 : 500,
              }}>
                <Icon name={d.i} size={12} color={d.sel ? '#0E1A14' : T.textDim} strokeWidth={1.9}/>
                {d.t}
                <span style={{ fontSize: 10.5, opacity: 0.7 }}>· {d.n}</span>
              </div>
            ))}
          </div>

          {/* Dedicated vomit dimension view */}
          <div style={{
            margin: '8px 22px 0',
            background: T.surface, border: `1px solid ${T.line}`,
            borderRadius: 18, padding: '14px 16px',
          }}>
            <div style={{
              display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
              marginBottom: 14,
            }}>
              <div>
                <div style={{ fontSize: 10.5, color: T.textMute, letterSpacing: 0.6, fontWeight: 700, textTransform: 'uppercase' }}>Vomit · Day 3</div>
                <div style={{
                  fontFamily: UN.font.num, fontSize: 32, fontWeight: 600, letterSpacing: -1,
                  color: T.text, fontVariantNumeric: 'tabular-nums', marginTop: 2,
                }}>3 <span style={{ fontSize: 14, color: T.textDim, fontWeight: 500 }}>today</span></div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontSize: 10.5, color: T.textMute, letterSpacing: 0.6, fontWeight: 700, textTransform: 'uppercase' }}>Trend</div>
                <div style={{ fontSize: 14, color: T.sage, fontWeight: 700, marginTop: 2 }}>↓ day 2 was 7</div>
              </div>
            </div>

            {/* Daily totals bar chart */}
            <div style={{ display: 'flex', gap: 6, alignItems: 'flex-end', height: 60 }}>
              {[
                { d: 'D1', v: 2 },
                { d: 'D2', v: 7 },
                { d: 'D3', v: 3, current: true },
              ].map((b, i) => (
                <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
                  <div style={{
                    width: '100%', height: `${(b.v / 8) * 100}%`,
                    background: b.current ? UN.d.sev.warm : T.surface2,
                    borderRadius: 4,
                    display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
                    paddingTop: 4,
                    fontSize: 11, color: b.current ? '#0E1A14' : T.textDim, fontWeight: 700,
                    fontVariantNumeric: 'tabular-nums',
                  }}>{b.v}</div>
                  <div style={{ fontSize: 10, color: T.textMute, fontWeight: 600 }}>{b.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Each vomit event */}
          <div style={{ padding: '14px 22px 0' }}>
            <div style={{ fontSize: 10.5, color: T.textMute, fontWeight: 700, letterSpacing: 0.7, textTransform: 'uppercase', marginBottom: 8 }}>
              Today's events
            </div>
            {[
              { t: '10:15 PM', who: 'Y', whoTone: '#c2b39a', size: 'small', after: '10m after Pedialyte' },
              { t:  '6:20 PM', who: 'S', whoTone: '#a5b8c9', size: 'medium', after: 'Right after Motrin' },
              { t:  '2:48 PM', who: 'Y', whoTone: '#c2b39a', size: 'small', after: 'During nap' },
            ].map((e, i, arr) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 11,
                padding: '11px 0',
                borderBottom: i < arr.length - 1 ? `1px solid ${T.line}` : 'none',
              }}>
                <div style={{
                  width: 50, fontFamily: UN.font.num, fontSize: 11, color: T.textMute,
                  fontVariantNumeric: 'tabular-nums', fontWeight: 500,
                }}>{e.t}</div>
                <div style={{
                  width: 22, height: 22, borderRadius: 22, background: e.whoTone,
                  color: '#fff', fontSize: 9.5, fontWeight: 700,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>{e.who}</div>
                <div style={{
                  width: 28, height: 28, borderRadius: 9, background: `${UN.d.sev.warm}22`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <Icon name="vomit" size={13} color={UN.d.sev.warm} strokeWidth={1.9}/>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{
                    fontSize: 13, color: T.text, fontWeight: 600, letterSpacing: -0.1,
                    textTransform: 'capitalize',
                  }}>{e.size}</div>
                  <div style={{ fontSize: 11, color: T.textMute, marginTop: 1 }}>{e.after}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <TabBar mode="d" active="home"/>
        <HomeIndicator mode="d"/>
      </div>
    </Phone>
  );
}

Object.assign(window, { HomeScrolled, EpisodeScrolled });