// Sleep, Activity, Nutrition, Mind & Body screens

/* Coach hero band — shared by the pillar screens (Activity / Nutrition / Mind & Body).
   Gives each pillar the Dino + a one-line verdict + the coach's focus, tied back to sleep. */
const PillarHero = ({ mood = 'hello', tag, title, body, cta, onCta }) => (
  <div className="pillar-hero">
    <Mascot score={87} size={120} mood={mood} />
    <div className="pillar-hero-text">
      {tag && <span className="pillar-tag">{tag}</span>}
      <h2 className="pillar-verdict">{title}</h2>
      <p className="pillar-body">{body}</p>
      {cta && <button className="btn primary" onClick={onCta}>{cta}</button>}
    </div>
  </div>
);

/* Sleep Coach — "coach, not dashboard" layout (May refresh).
   LEFT  = coach: living mascot + one-line verdict + ONE primary action + rest of plan.
   RIGHT = evidence: score, night biometrics, stages, 7-night trend, recovery.
   Same data/logic as before — only the hierarchy changed. */
const SleepScreen = ({ onNav }) => {
  const currentDay = window.TODAY_SLEEP_SCORE.ResultData;
  const weekDays = window.WEEK_SLEEP_SCORES;
  const currentDayInput = window.TODAY_SLEEP_SCORE.Sleep;
  
  const I = window.Icons;
  const m = window.MOCK.todayMetrics;
  const persona = currentDay.Persona;
  const recs = window.MOCK.sleepDailyRecs;
  const bio = window.MOCK.sleepBiometrics;
  const [range, setRange] = useState('day');

  const sleepBiometrics = [
    { k: 'HRV',         v: currentDay.HrvPoint,   unit: 'ms' },
    { k: 'Resting HR',  v: currentDay.RestingPoint,   unit: 'bpm' },
    { k: 'Respiratory', v: currentDayInput.Recovery.RespiratoryRate.Average, unit: '/min' },
    { k: 'Total steps₂',    v: currentDayInput.Activity.TodaySteps,   unit: 'steps' },
    { k: 'Calories',   v: currentDayInput.Activity.YesterdayActiveCalories, unit: 'kcal' },
    { k: 'Walking Distance',  v: currentDayInput.Activity.WalkingDistanceMeters,   unit: 'm' },
  ];
  

  const score = currentDay.SleepScore;
  // Verdict words derived from the score — a coach says it, doesn't just show a number.
  const nightWord = score >= 85 ? 'Great night' : score >= 70 ? 'Good night' : score >= 50 ? 'Rough night' : 'Tough night';
  const recoveryWord = score >= 85 ? 'strong recovery' : score >= 70 ? 'good recovery' : score >= 50 ? 'partial recovery' : 'low recovery';

  // Emphasise the last two words of the verdict headline.
  const tWords = persona.persona_title.replace(/\.$/, '').split(' ');
  const head = tWords.slice(0, -2).join(' ');
  const headEm = tWords.slice(-2).join(' ');

  // One primary action (a coach prioritises) + the rest collapsed below.
  const primary = recs.find(r => r.kind === 'activity') || recs[0];
  const rest = recs.filter(r => r !== primary);

  // Score ring math (compact 108px).
  const rs = 108, rstroke = 9, rr = (rs - rstroke) / 2, rc = 2 * Math.PI * rr;
  const roff = rc * (1 - Math.min(1, score / 100));

  const stageRows = [
    { l: 'Deep',  pct: currentDay.DeepPoint, v: currentDay.DeepTotal, c: 'var(--primary-2)' },
    { l: 'REM',   pct: currentDay.RemPoint, v: currentDay.RemTotal, c: 'var(--primary)' },
    { l: 'HRV', pct: currentDay.HrvPoint, v: currentDay.HrvTotal, c: 'var(--accent-cyan)' },
    { l: 'Resting', pct: currentDay.RestingPoint,  v: currentDay.RestingTotal,    c: 'var(--accent-coral)' },
  ];

  // 7-night ribbon: weekDays is the rolling last-7-days window (today last), each day a
  // score (empty days have SleepScore 0). Labels come from each day's own date.
  const dayLabels = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
  // Parse "yyyy-MM-dd" as a local date (avoids the UTC shift of new Date(str)).
  const labelForDate = (s) => {
    if (!s) return '';
    const [y, m, d] = s.split('-').map(Number);
    return dayLabels[new Date(y, m - 1, d).getDay()];
  };
  const todayStr = (() => {
    const n = new Date();
    const p = x => String(x).padStart(2, '0');
    return `${n.getFullYear()}-${p(n.getMonth() + 1)}-${p(n.getDate())}`;
  })();
  // Score → dot colour. 0 / no data = semi-transparent violet.
  const ribColor = (s) => {
    if (!s) return 'rgba(184,169,255,0.4)';
    if (s >= 80) return 'var(--good)';
    if (s >= 66) return 'var(--warn)';
    return 'var(--bad)';
  };

  return (
    <div className="col" style={{ gap: 22 }}>
      {/*<Topbar title="Sleep Coach" subtitle="Tonight's score. Tomorrow's plan." right={*/}
      {/*  <div className="row" style={{ gap: 10 }}>*/}
      {/*    <div className="tabs">{['day','week','month'].map(rg => <button key={rg} className={`tab ${range===rg?'active':''}`} onClick={()=>setRange(rg)}>{rg[0].toUpperCase()+rg.slice(1)}</button>)}</div>*/}
      {/*    <button className="btn primary" onClick={() => onNav && onNav('agent')}><I.Sparkle size={13}/> Chat with Sleep Coach</button>*/}
      {/*  </div>*/}
      {/*}/>*/}

      <div className="sl-grid">
        {/* LEFT — coach */}
        <section className="sl-coach">
          <div className="sl-dino-stage">
            <Mascot score={score} size={188} mood={score >= 75 ? 'love' : 'sleep'}/>
            <span className="sl-verdict-tag"><span className="dot"/>{nightWord} · {currentDay.Persona.persona_tag}</span>
            <h2 className="sl-verdict">{head} <em>{headEm}</em></h2>
            <p className="sl-coach-body">{persona.persona_body}</p>
          </div>

          <div className="sl-action-label">Do this first</div>
          {/*<button className="sl-action" onClick={() => onNav && onNav('agent')}>*/}
          
          <div className="sl-rest">
            {currentDay.DailyRecs.map(r => (
              <div key={r.Title} className="sl-rest-item">
                <span className="em">{r.Emoji}</span>
                <div><div className="t">{r.Title}</div><div className="s">{r.Rationale}</div></div>
                <span className="cat">{r.Category}</span>
              </div>
            ))}
          </div>
        </section>

        {/* RIGHT — evidence */}
        <aside className="sl-evidence">
          <div className="sl-card">
            <div className="sl-label">Sleep score</div>
            <div className="sl-score-row">
              <div className="sl-ring">
                <svg width={rs} height={rs} viewBox={`0 0 ${rs} ${rs}`}>
                  <circle cx={rs/2} cy={rs/2} r={rr} fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth={rstroke}/>
                  <circle cx={rs/2} cy={rs/2} r={rr} fill="none" stroke="url(#slRing)" strokeWidth={rstroke} strokeLinecap="round" strokeDasharray={rc} strokeDashoffset={roff}/>
                  <defs><linearGradient id="slRing" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stopColor="#b8a9ff"/><stop offset="1" stopColor="#8fe3b8"/></linearGradient></defs>
                </svg>
                <div className="val">{score}</div>
              </div>
              <div className="sl-score-meta">
                <div className="big">out of 100</div>
                {/*<div className="delta">{persona.trend === 'up' ? '↑' : '↓'} +{persona.trendDelta} vs avg</div>*/}
                {/*<div className="word">Status: <b>{recoveryWord}</b></div>*/}
              </div>
            </div>
          </div>

          <div className="sl-card">
            <div className="sl-label">Night biometrics</div>
            <div className="sl-metrics">
              {sleepBiometrics.map(b => (
                <div key={b.k} className="sl-metric">
                  <div className="mk">{b.k}</div>
                  <div className="mv">{b.v}<u>{b.unit}</u></div>
                  {/*<div className={`md ${b.tone}`}>{b.note}</div>*/}
                </div>
              ))}
            </div>
          </div>

          <div className="sl-card">
            <div className="sl-label">Sleep stages <span className="muted"></span></div>
            {stageRows.map(s => (
              <div key={s.l} className="sl-stage">
                <span className="nm">{s.l}</span>
                <span className="bar"><span style={{ width: `${s.pct}%`, background: s.c }}/></span>
                <span className="amt">{s.v}</span>
              </div>
            ))}
          </div>

          <div className="sl-card">
            <div className="sl-label">Last 7 nights <span className="muted">avg {window.SleepAverage}</span></div>
            <div className="sl-ribbon">
              {weekDays.map((d, i) => {
                const sc = d.ResultData ? d.ResultData.SleepScore : 0;
                return (
                  <div key={i} className={`sl-rib ${d.Date === todayStr ? 'today' : ''}`}>
                    <div className="d">{labelForDate(d.Date)}</div>
                    <div className="dot" style={{ background: ribColor(sc) }}/>
                    <div className="sc">{sc || '–'}</div>
                  </div>
                );
              })}
            </div>
            <div className="sl-legend">
              <span><i style={{ background: 'var(--good)' }}/>good 80+</span>
              <span><i style={{ background: 'var(--warn)' }}/>fair 66–79</span>
              <span><i style={{ background: 'var(--bad)' }}/>low ≤65</span>
            </div>
          </div>

          <div className="sl-card">
            <div className="sl-label">Recovery</div>
            <div className="sl-recov">
              <div className="sl-rc"><div className="k">Sleep debt</div><div className="v">2h 14m</div><div className="h">over 7 days</div></div>
              <div className="sl-rc"><div className="k">Chronotype</div><div className="v" style={{ fontSize: 17 }}>{currentDay.SleepDNA.chronotype.title}</div><div className="h">{currentDay.SleepDNA.chronotype.desc}</div></div>
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
};

const ActivityScreen = () => {
  const a = window.MOCK.activity;
  const I = window.Icons;
  return (
    <div className="col" style={{ gap: 22 }}>
      <PillarHero
        mood="hello"
        tag="On track"
        title="A light-movement day"
        body={<>You've logged <b>{window.Activity.StepsCount} steps</b> and {window.Activity.WorkoutsCount} workouts this week.</>}
      />
      <div className="grid grid-4">
        <StatCard label="Steps" value={window.Activity.StepsCount} tag={`${Math.round(a.steps/a.stepsGoal*100)}% of goal`} tagTone="violet" spark={window.Activity.Steps}/>
        <StatCard label="Active Calories" value={window.Activity.CaloriesCount} unit=" kcal" tag="On track" tagTone="good" spark={window.Activity.ActiveCalories} color="var(--accent-amber)"/>
        <StatCard label="Workouts" value={window.Activity.WorkoutsCount} unit=" this week" tag="+1 vs last" tagTone="good" spark={window.Activity.Workouts} color="var(--accent-mint)"/>
        <StatCard label="Resting HR" value={window.Activity.RestingHRCount} unit=" bpm" tag="Excellent" tagTone="good" spark={window.Activity.RestingHR} color="var(--accent-cyan)"/>
      </div>

      <div className="grid activity-split">
        <div className="card">
          <div className="card-head"><h3>Weekly Activity</h3><span className="muted" style={{fontSize:12}}>Minutes per day</span></div>
          <BarChart data={window.Activity.ActivityInfo} getValue={d=>d.mins} getLabel={d=>d.d} highlight={(d)=>d.mins>60}/>
        </div>
        <div className="card">
          <h3 style={{ margin: '0 0 12px', fontSize: 15 }}>HR ({window.Activity.HRRecordsCount} records)</h3>
          <div style={{ display: 'grid', gridTemplateColumns: '60px 1fr 40px', alignItems: 'center', gap: 8, marginBottom: 8, fontSize: 12 }}>
            <span className="muted">Min</span>
            <ProgressBar value={window.Activity.HRMin} max={window.Activity.HRMaxVisual} color={['var(--accent-mint)','var(--accent-cyan)','var(--primary)','var(--accent-amber)','var(--bad)'][1]} />
            <span className="mono" style={{ textAlign: 'right' }}>{window.Activity.HRMin}bpm</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '60px 1fr 40px', alignItems: 'center', gap: 8, marginBottom: 8, fontSize: 12 }}>
            <span className="muted">Max</span>
            <ProgressBar value={window.Activity.HRMax} max={window.Activity.HRMaxVisual} color={['var(--accent-mint)','var(--accent-cyan)','var(--primary)','var(--accent-amber)','var(--bad)'][1]} />
            <span className="mono" style={{ textAlign: 'right' }}>{window.Activity.HRMax}pbm</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '60px 1fr 40px', alignItems: 'center', gap: 8, marginBottom: 8, fontSize: 12 }}>
            <span className="muted">Avg</span>
            <ProgressBar value={window.Activity.HRAvg} max={window.Activity.HRMaxVisual} color={['var(--accent-mint)','var(--accent-cyan)','var(--primary)','var(--accent-amber)','var(--bad)'][1]} />
            <span className="mono" style={{ textAlign: 'right' }}>{window.Activity.HRAvg}bpm</span>
          </div>
        </div>
      </div>

      {/*<div className="card">*/}
      {/*  <div className="card-head"><h3>Recent Workouts</h3><button className="btn ghost sm">Log workout <I.Plus size={12}/></button></div>*/}
      {/*  <div className="col" style={{ gap: 8 }}>*/}
      {/*    {a.workouts.map(w => (*/}
      {/*      <div key={w.id} className="row" style={{ padding: 12, background: 'var(--surface-2)', borderRadius: 12, gap: 14 }}>*/}
      {/*        <div style={{ width: 40, height: 40, borderRadius: 10, background: 'rgba(184,169,255,0.15)', display: 'grid', placeItems: 'center' }}><I.Activity size={18} style={{color:'var(--primary)'}}/></div>*/}
      {/*        <div style={{ flex: 1 }}>*/}
      {/*          <div style={{ fontWeight: 600 }}>{w.type}</div>*/}
      {/*          <div className="muted" style={{ fontSize: 12 }}>{w.when}</div>*/}
      {/*        </div>*/}
      {/*        <div style={{ display: 'flex', gap: 18 }}>*/}
      {/*          <div><div className="muted" style={{ fontSize: 10 }}>Duration</div><div className="mono" style={{ fontWeight: 600 }}>{w.mins} min</div></div>*/}
      {/*          <div><div className="muted" style={{ fontSize: 10 }}>Calories</div><div className="mono" style={{ fontWeight: 600 }}>{w.kcal}</div></div>*/}
      {/*          <div><div className="muted" style={{ fontSize: 10 }}>Avg HR</div><div className="mono" style={{ fontWeight: 600 }}>{w.heart}</div></div>*/}
      {/*        </div>*/}
      {/*      </div>*/}
      {/*    ))}*/}
      {/*  </div>*/}
      {/*</div>*/}
    </div>
  );
};

const NutritionScreen = ({ onNav }) => {
  const n = window.MOCK.nutrition;
  const I = window.Icons;
  const toast = window.useToast();
  const [sentToShop, setSentToShop] = useState(false);
  const total = n.cart.reduce((s, x) => s + x.price, 0);
  return (
    <div className="col" style={{ gap: 22 }}>
      <PillarHero
        mood="love"
        tag="Fuel for recovery"
        title="Eat for steady energy"
        body={<>Wellness flagged <b>low magnesium</b> and vitamin D. Front-load warm protein and water today to match your short-sleep recovery.</>}
        cta={<><I.Sparkle size={13}/> Ask Meal Planner</>}
        onCta={() => onNav('agent')}
      />

      <div className="grid" style={{ gridTemplateColumns: '1.3fr 1fr', gap: 16 }}>
        <div className="card">
          <div className="card-head"><h3>Today's Macros</h3><span className="muted" style={{fontSize:12}}>{n.todayMacros.calories} / {n.todayMacros.caloriesGoal} kcal</span></div>
          <div className="grid grid-3" style={{ gap: 12 }}>
            {[
              {l:'Protein', v:n.todayMacros.protein, g:n.todayMacros.proteinGoal, c:'var(--primary)'},
              {l:'Carbs', v:n.todayMacros.carbs, g:n.todayMacros.carbsGoal, c:'var(--accent-cyan)'},
              {l:'Fat', v:n.todayMacros.fat, g:n.todayMacros.fatGoal, c:'var(--accent-amber)'},
            ].map(m => (
              <div key={m.l} style={{ padding: 12, borderRadius: 12, background: 'var(--surface-2)' }}>
                <div className="muted" style={{ fontSize: 12 }}>{m.l}</div>
                <div className="mono" style={{ fontSize: 22, fontWeight: 600 }}>{m.v}<span style={{fontSize:13, color:'var(--text-3)'}}>g / {m.g}</span></div>
                <div style={{ marginTop: 8 }}><ProgressBar value={m.v} max={m.g} color={m.c}/></div>
              </div>
            ))}
          </div>
        </div>
        <div className="card" style={{ background: 'linear-gradient(180deg, rgba(122,216,224,0.10), transparent)' }}>
          <h3 style={{ margin: '0 0 12px', fontSize: 15 }}>Wellness flagged for you</h3>
          <div className="col" style={{ gap: 8 }}>
            {n.flagged.map(f => (
              <div key={f.name} className="row" style={{ justifyContent: 'space-between', padding: 10, borderRadius: 10, background: 'var(--surface-2)' }}>
                <div>
                  <div style={{ fontWeight: 500 }}>{f.name}</div>
                  <div className="muted" style={{ fontSize: 12 }}>{f.sub}</div>
                </div>
                <span className={`tag ${f.state==='low'?'warn':'good'}`}>{f.state==='low'?'Low':'OK'}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head"><h3>Meal Plan · Today</h3><button className="btn ghost sm">Regenerate <I.Sparkle size={12}/></button></div>
        <div className="grid grid-4" style={{ gap: 12 }}>
          {n.meals.map(meal => (
            <div key={meal.id} style={{ borderRadius: 12, overflow: 'hidden', border: '1px solid var(--border-soft)', background: 'var(--surface-2)' }}>
              <Placeholder label={meal.slot} hue={meal.id==='br'?75:meal.id==='lu'?165:meal.id==='sn'?295:220} height={100}/>
              <div style={{ padding: 12 }}>
                <div className="muted" style={{ fontSize: 11 }}>{meal.slot} · {meal.kcal} kcal</div>
                <div style={{ fontWeight: 600, marginTop: 4 }}>{meal.name}</div>
                <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>{meal.why}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <div className="card">
          <div className="card-head">
            <h3>Ingredient Cart <span className="tag violet" style={{marginLeft:8}}>Shopping Agent</span></h3>
            <span className="mono" style={{ fontWeight: 600 }}>${total.toFixed(2)}</span>
          </div>
          <div className="col" style={{ gap: 6 }}>
            {n.cart.map(i => (
              <div key={i.id} className="row" style={{ justifyContent:'space-between', padding:'8px 10px', borderRadius:8, background:'var(--surface-2)', fontSize:13 }}>
                <div className="row" style={{gap:10}}><I.Cart size={14} className="muted"/><span>{i.name}</span><span className="muted">{i.qty}</span></div>
                <span className="mono">${i.price.toFixed(2)}</span>
              </div>
            ))}
          </div>
          <div className="row" style={{ marginTop: 14, gap: 8 }}>
            <button className="btn primary" style={{flex:1, justifyContent:'center'}} disabled={sentToShop} onClick={() => { setSentToShop(true); toast.push('Cart confirmed — delivery tomorrow 10am'); }}>
              {sentToShop ? <><I.Check size={13}/> Order Confirmed</> : <>Pay with SLEEP <span className="tag violet" style={{marginLeft:6}}>−5%</span></>}
            </button>
            <button className="btn ghost">Card</button>
          </div>
        </div>

        <div className="card">
          <h3 style={{ margin:'0 0 12px', fontSize:15 }}>Agent Handoff</h3>
          <div className="col" style={{gap:10}}>
            {[
              {a:'Wellness', e:'✨', t:'Flagged low magnesium + vitamin D'},
              {a:'Meal Planner', e:'🥗', t:'Drafted 4 meals to address gaps'},
              {a:'Shopping', e:'🛒', t:'Built cart with best prices'},
            ].map((r,i) => (
              <div key={i} className="row" style={{ padding: 10, borderRadius: 10, background: 'var(--surface-2)', gap:10 }}>
                <div style={{ width:32, height:32, borderRadius:8, background:'rgba(184,169,255,0.15)', display:'grid', placeItems:'center', fontSize:14 }}>{r.e}</div>
                <div style={{flex:1}}>
                  <div style={{fontWeight:600, fontSize:13}}>{r.a}</div>
                  <div className="muted" style={{fontSize:12}}>{r.t}</div>
                </div>
                <I.Check size={14} style={{color:'var(--good)'}}/>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

const MindBodyScreen = ({ onWindDown }) => {
  const m = window.MOCK.mindBody;
  const I = window.Icons;
  const [tasks, setTasks] = useState(m.windDownTasks);
  const toast = window.useToast();
  return (
    <div className="col" style={{ gap: 22 }}>
      <PillarHero
        mood="love"
        tag="Calm & steady"
        title="Wind down early tonight"
        body={<>Your mood's held steady at <b>7.2</b>. An earlier wind-down protects your deep sleep — your Dino sleeps better when you do.</>}
        cta={<><I.Moon size={13}/> Tonight's check-in</>}
        onCta={onWindDown}
      />

      <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <div className="card">
          <div className="card-head"><h3>Mood (last 7 days)</h3><span className="mono">7.2 avg</span></div>
          <BarChart data={m.moodHistory} getValue={d=>d.mood} getLabel={d=>d.d} highlight={(d)=>d.mood>=7}/>
          <div className="mood-week">
            {m.moodHistory.map(d => {
              const face = d.mood >= 8 ? '😄' : d.mood >= 7 ? '🙂' : d.mood >= 6 ? '😐' : d.mood >= 5 ? '😕' : '😞';
              return (
                <div key={d.d} className="mood-day">
                  <span className="emoji">{face}</span>
                  <span className="dl">{d.d}</span>
                </div>
              );
            })}
          </div>
        </div>
        <div className="card">
          <div className="card-head"><h3>Tonight's Wind-down</h3><span className="muted" style={{fontSize:12}}>{tasks.filter(t=>t.done).length}/{tasks.length}</span></div>
          <div className="col" style={{gap:6}}>
            {tasks.map(t => (
              <button key={t.id} onClick={() => { setTasks(ts => ts.map(x => x.id===t.id?{...x,done:!x.done}:x)); }}
                className="row" style={{
                  padding: 10, borderRadius: 10,
                  background: t.done?'rgba(143,227,184,0.08)':'var(--surface-2)',
                  border: '1px solid ' + (t.done?'rgba(143,227,184,0.2)':'var(--border-soft)'),
                  gap:12, textAlign:'left', width:'100%',
                }}>
                <div style={{ width: 22, height: 22, borderRadius: 6, border: '1.5px solid ' + (t.done?'var(--good)':'var(--text-3)'), background: t.done?'var(--good)':'transparent', display:'grid', placeItems:'center' }}>
                  {t.done && <I.Check size={12} style={{color:'white'}}/>}
                </div>
                <span style={{fontSize:16}}>{t.icon}</span>
                <div style={{flex:1}}>
                  <div style={{ fontWeight:500, textDecoration: t.done?'line-through':'none', color: t.done?'var(--text-3)':'var(--text)' }}>{t.name}</div>
                  <div className="muted" style={{fontSize:11}}>{t.when}</div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head"><h3>Practice Library</h3><div className="tabs">{['All','Sleep','Calm','Energy'].map(t=><button key={t} className={`tab ${t==='All'?'active':''}`}>{t}</button>)}</div></div>
        <div className="grid grid-3" style={{ gap: 12 }}>
          {m.practices.map(p => (
            <div key={p.id} className="card flat" style={{ padding: 16, background: 'var(--surface-2)', cursor:'pointer' }} onClick={() => toast.push(`${p.name} started`)}>
              <div style={{ fontSize: 28 }}>{p.icon}</div>
              <div style={{ fontWeight: 600, marginTop: 8 }}>{p.name}</div>
              <div className="row" style={{ marginTop: 6, gap: 8 }}>
                <span className="tag">{p.mins} min</span><span className="tag violet">{p.level}</span>
              </div>
              <button className="btn primary sm" style={{ marginTop: 12 }}><I.Play size={11}/> Start</button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { SleepScreen, ActivityScreen, NutritionScreen, MindBodyScreen });