// Home — kid overview with caregiver attribution, last log, next action
const { Icon, Phone, TabBar, HomeIndicator, TopBar } = window;

function HomeOverview() {
  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 24px' }}>
          {/* Greeting */}
          <div style={{ padding: '14px 22px 4px' }}>
            <div style={{ fontSize: 12.5, color: T.textMute, letterSpacing: 0.4, fontWeight: 600 }}>
              THURSDAY · 2:14 AM
            </div>
            <h1 style={{
              margin: '8px 0 0', fontSize: 28, fontWeight: 700,
              color: T.text, letterSpacing: -0.7, lineHeight: 1.1,
            }}>One of yours is sick.</h1>
          </div>

          {/* Sick card — Maeve */}
          <div style={{ padding: '16px 22px 0' }}>
            <SickKidCard/>
          </div>

          {/* Well card — Henry */}
          <div style={{ padding: '10px 22px 0' }}>
            <WellKidCard/>
          </div>

          {/* Add a kid */}
          <div style={{ padding: '10px 22px 0' }}>
            <button style={{
              width: '100%', padding: '12px 16px',
              background: 'transparent', border: `1.5px dashed ${T.line2}`,
              borderRadius: 14, color: T.textMute,
              fontFamily: UN.font.body, fontSize: 13, fontWeight: 500,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            }}>
              <Icon name="plus" size={14} color={T.textMute} strokeWidth={2}/>
              Add a kid
            </button>
          </div>

          {/* Recent caregiver activity feed */}
          <div style={{ padding: '24px 22px 0' }}>
            <h3 style={{
              margin: '0 0 8px', fontSize: 11, color: T.textMute,
              letterSpacing: 0.7, fontWeight: 700, textTransform: 'uppercase',
            }}>Activity across everyone</h3>
            {[
              { who: 'Grandma', tone: '#d3a89a', what: '2.5mL Tylenol', when: '12m', kid: 'M', kidTone: '#d3a89a' },
              { who: 'Sarah',   tone: '#a5b8c9', what: '5oz Pedialyte', when: '4h',  kid: 'M', kidTone: '#d3a89a' },
              { who: 'You',     tone: '#c2b39a', what: 'Vomit · small', when: '4h',  kid: 'M', kidTone: '#d3a89a' },
            ].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: 24, height: 24, borderRadius: 24, background: r.tone,
                  color: '#fff', fontSize: 10, fontWeight: 700,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>{r.who[0]}</div>
                <div style={{ flex: 1, fontSize: 13.5, color: T.text, fontWeight: 500, letterSpacing: -0.1 }}>
                  <strong style={{ fontWeight: 700 }}>{r.who}</strong> logged <span style={{ color: T.textDim, fontWeight: 500 }}>{r.what}</span>
                </div>
                <div style={{
                  width: 18, height: 18, borderRadius: 18, background: r.kidTone,
                  color: '#fff', fontSize: 8.5, fontWeight: 700,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>{r.kid}</div>
                <span style={{ fontSize: 11, color: T.textMute, fontWeight: 500, fontVariantNumeric: 'tabular-nums', width: 30, textAlign: 'right' }}>{r.when}</span>
              </div>
            ))}
          </div>
        </div>
        <TabBar mode="d" active="home"/>
        <HomeIndicator mode="d"/>
      </div>
    </Phone>
  );
}

// Sick kid card — the rich one. Shows watching + last log + next action.
function SickKidCard() {
  const T = UN.d;
  return (
    <div style={{
      background: T.surface, border: `1px solid ${UN.d.sageEdge}`,
      borderRadius: 22, overflow: 'hidden',
      boxShadow: '0 16px 40px rgba(0,0,0,0.3)',
    }}>
      {/* Top row: identity + status */}
      <div style={{
        padding: '14px 18px 12px',
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div style={{ position: 'relative' }}>
          <div style={{
            width: 44, height: 44, borderRadius: 44,
            background: 'linear-gradient(135deg, #d3a89a, #8b6c5c)',
            color: '#fff', fontWeight: 700, fontSize: 17,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>M</div>
          <div style={{
            position: 'absolute', bottom: -2, right: -2,
            width: 14, height: 14, borderRadius: 14,
            background: UN.d.sev.warm, border: `2.5px solid ${T.surface}`,
          }}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 17, fontWeight: 700, color: T.text, letterSpacing: -0.3 }}>Maeve</div>
          <div style={{ fontSize: 11.5, color: T.textDim, marginTop: 1 }}>
            Stomach flu · Day 3
          </div>
        </div>
        <div style={{
          padding: '5px 10px', borderRadius: 99,
          background: 'rgba(232,176,92,0.18)',
          border: `1px solid rgba(232,176,92,0.32)`,
          fontSize: 10.5, color: UN.d.sev.warm, fontWeight: 700,
          letterSpacing: 0.6, textTransform: 'uppercase',
        }}>WATCH</div>
      </div>

      {/* Hero stats */}
      <div style={{
        padding: '4px 18px 14px',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8,
      }}>
        <div>
          <div style={{ fontSize: 10, color: T.textMute, letterSpacing: 0.6, fontWeight: 700, textTransform: 'uppercase' }}>
            Temp
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 2 }}>
            <span style={{
              fontFamily: UN.font.num, fontSize: 32, fontWeight: 600, letterSpacing: -1.2,
              color: T.text, fontVariantNumeric: 'tabular-nums', lineHeight: 1,
            }}>38.4</span>
            <span style={{ color: T.textDim, fontSize: 12, fontWeight: 500 }}>°C ↓</span>
          </div>
        </div>
        <div>
          <div style={{ fontSize: 10, color: T.textMute, letterSpacing: 0.6, fontWeight: 700, textTransform: 'uppercase' }}>
            Next dose
          </div>
          <div style={{
            fontFamily: UN.font.num, fontSize: 22, fontWeight: 600, letterSpacing: -0.5,
            color: T.text, fontVariantNumeric: 'tabular-nums', lineHeight: 1.1, marginTop: 2,
          }}>1h 22m</div>
          <div style={{ fontSize: 11, color: UN.d.trust, fontWeight: 600, marginTop: 2 }}>
            Tylenol 5mL
          </div>
        </div>
      </div>

      {/* Watching now */}
      <div style={{
        padding: '12px 18px',
        borderTop: `1px solid ${T.line}`,
        background: 'rgba(143,181,162,0.04)',
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div style={{ position: 'relative', width: 50, height: 26 }}>
          {[
            { c: '#d3a89a', l: 'G', live: true },
            { c: '#c2b39a', l: 'Y', live: false },
            { c: '#a5b8c9', l: 'S', live: false, sleeping: true },
          ].map((p, i) => (
            <div key={i} style={{
              position: 'absolute', left: i * 12, top: 0,
              width: 26, height: 26, borderRadius: 26, background: p.c,
              border: `2.5px solid ${T.surface}`,
              color: '#fff', fontSize: 10, fontWeight: 700,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              opacity: p.sleeping ? 0.5 : 1,
            }}>{p.l}</div>
          ))}
        </div>
        <div style={{ flex: 1, fontSize: 12, color: T.textDim, lineHeight: 1.4 }}>
          <strong style={{ color: T.text, fontWeight: 700 }}>Grandma is with her</strong>
          <br/>
          <span style={{ color: T.textMute, fontSize: 11 }}>You + Sarah on call · Sarah sleeping</span>
        </div>
        <div style={{
          width: 10, height: 10, borderRadius: 10, background: T.sage,
          boxShadow: `0 0 0 4px ${T.sageSoft}`, flexShrink: 0,
        }}/>
      </div>

      {/* Last + Next */}
      <div style={{
        padding: '12px 18px',
        borderTop: `1px solid ${T.line}`,
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 10, color: T.textMute, letterSpacing: 0.6, fontWeight: 700, textTransform: 'uppercase' }}>
            Last log
          </div>
          <div style={{ fontSize: 13, color: T.text, fontWeight: 600, marginTop: 3, letterSpacing: -0.1 }}>
            2.5mL Tylenol
          </div>
          <div style={{ fontSize: 11, color: T.textMute, marginTop: 1 }}>
            Grandma · 12m ago
          </div>
        </div>
        <div style={{ width: 1, height: 36, background: T.line2 }}/>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 10, color: UN.d.sev.warm, letterSpacing: 0.6, fontWeight: 700, textTransform: 'uppercase' }}>
            Next action
          </div>
          <div style={{ fontSize: 13, color: T.text, fontWeight: 600, marginTop: 3, letterSpacing: -0.1 }}>
            Wet diaper check
          </div>
          <div style={{ fontSize: 11, color: UN.d.sev.warm, marginTop: 1, fontWeight: 600 }}>
            Due in 50m · hydration cue
          </div>
        </div>
      </div>

      {/* Open CTA */}
      <button style={{
        width: '100%', padding: '14px 18px',
        background: T.sageSoft,
        border: 'none', borderTop: `1px solid ${UN.d.sageEdge}`,
        color: T.sage, fontFamily: UN.font.body,
        fontSize: 14, fontWeight: 700, letterSpacing: -0.1,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <span>Open episode</span>
        <Icon name="chev" size={16} color={T.sage} strokeWidth={2.2}/>
      </button>
    </div>
  );
}

function WellKidCard() {
  const T = UN.d;
  return (
    <div style={{
      padding: '14px 16px',
      background: T.surface, border: `1px solid ${T.line}`,
      borderRadius: 18, display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <div style={{
        width: 40, height: 40, borderRadius: 40,
        background: 'linear-gradient(135deg, #a5b8c9, #5e7990)',
        color: '#fff', fontWeight: 700, fontSize: 15,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>H</div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 15, fontWeight: 700, color: T.text, letterSpacing: -0.2 }}>
          Henry <span style={{ color: T.textDim, fontWeight: 400, fontSize: 12 }}>· 7 yrs</span>
        </div>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 5, marginTop: 3,
          fontSize: 11.5, color: T.sage, fontWeight: 600,
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 6, background: T.sage }}/>
          Well · 24 days
        </div>
      </div>
      <button style={{
        fontSize: 12, color: T.textDim, fontWeight: 600,
        padding: '7px 12px', borderRadius: 99,
        background: T.surface2, border: `1px solid ${T.line2}`,
      }}>Start episode</button>
    </div>
  );
}

window.HomeOverview = HomeOverview;