// desktop.jsx — all 6 desktop screens

// ──────────────────────────────────────────────────────────────
// DASHBOARD
// ──────────────────────────────────────────────────────────────
function ScrDashboard({ state, dispatch, dashboardLayout, onLayoutChange, onOpenMascotPicker }) {
  return (
    <div className="main no-rail" style={{ padding: '20px 28px 24px' }}>
      <div className="main-col">
        {/* Hero */}
        <div className="spread mb-4">
          <div>
            <div className="eyebrow">Понедельник · 12 мая · доброе утро</div>
            <div className="ttl-xl mt-2">Привет, Аня</div>
            <div className="dim2 mt-2" style={{ maxWidth: 520, fontSize: 14 }}>
              5 привычек на сегодня, 3 шага в работе. До <b style={{color:'var(--text-primary)'}}>уровня «Путешественник»</b> осталось 480 XP.
            </div>
          </div>
          <div className="row">
            <button className="btn" onClick={onOpenMascotPicker}>
              <span style={{ fontSize: 14 }}>{(MASCOT_BY_ID[state.mascotId] || MASCOTS[0]).name === 'Спектр' ? '◆' : '✦'}</span>
              Сменить компаньона
            </button>
            <button className="btn"><Icon.plus /> Новое желание</button>
            <button className="btn primary"><Icon.star /> Привычка</button>
          </div>
        </div>

        {/* Customizable widget grid */}
        <CustomizableDashboard
          state={state}
          dispatch={dispatch}
          layout={dashboardLayout}
          onLayoutChange={onLayoutChange}
        />
      </div>
    </div>
  );
}


// ──────────────────────────────────────────────────────────────
// WISHES — Kanban / Grid / List
// ──────────────────────────────────────────────────────────────
function ScrWishes({ state, dispatch, layout = 'kanban' }) {
  const [dragId, setDragId] = React.useState(null);
  const [dragOver, setDragOver] = React.useState(null);

  // Drag handlers
  const onDragStart = (wid) => (e) => {
    setDragId(wid);
    e.dataTransfer.effectAllowed = 'move';
  };
  const onDragEnd = () => { setDragId(null); setDragOver(null); };
  const onDragOver = (col) => (e) => { e.preventDefault(); setDragOver(col); };
  const onDrop = (zoneId, status) => (e) => {
    e.preventDefault();
    if (dragId) dispatch('moveWish', { id: dragId, zone: zoneId, status });
    setDragId(null); setDragOver(null);
  };

  return (
    <div className="main no-rail" style={{ padding: '20px 20px 24px 28px' }}>
      <div className="main-col">
        {/* Toolbar */}
        <div className="spread mb-4">
          <div>
            <div className="eyebrow">Карта желаний · Семья Соколовы</div>
            <div className="ttl-xl mt-2">{state.wishes.length} желаний по 8 зонам</div>
          </div>
          <div className="row">
            <div className="topbar search" style={{ background: 'var(--bg-card)' }}>
              <Icon.search style={{ width: 14, height: 14 }} /><span>Поиск по желаниям…</span>
            </div>
            <button className="btn"><Icon.team style={{ width: 14, height: 14 }} /> Все</button>
            <button className="btn primary"><Icon.plus /> Новое</button>
          </div>
        </div>

        {/* Layout selector chips */}
        <div className="row mb-4" style={{ gap: 6 }}>
          {[
            { id: 'kanban', label: 'Канбан по зонам' },
            { id: 'status', label: 'По статусу' },
            { id: 'grid',   label: 'Сеткой' },
            { id: 'list',   label: 'Списком' },
          ].map(opt => (
            <button key={opt.id}
              onClick={() => dispatch('layout', opt.id)}
              className="btn"
              style={{
                fontSize: 12, padding: '6px 12px',
                background: layout === opt.id ? 'var(--accent-soft)' : 'transparent',
                borderColor: layout === opt.id ? 'var(--accent)' : 'var(--border)',
                color: layout === opt.id ? 'var(--text-primary)' : 'var(--text-secondary)',
              }}>
              {opt.label}
            </button>
          ))}
          <div style={{ flex: 1 }}></div>
          <span className="eyebrow">Перетаскивай карточки между колонками</span>
        </div>

        {/* Kanban by zone */}
        {layout === 'kanban' && (
          <div style={{ overflowX: 'auto', paddingBottom: 12 }}>
            <div className="kanban">
              {ZONES.map((z) => {
                const items = state.wishes.filter(w => w.zone === z.id);
                return (
                  <div key={z.id}
                       className={`k-col ${z.cls} ${dragOver === z.id ? 'drop' : ''}`}
                       onDragOver={onDragOver(z.id)}
                       onDragLeave={() => setDragOver(null)}
                       onDrop={onDrop(z.id, null)}
                       onDragEnd={onDragEnd}>
                    <div className="kh">
                      <span className="dot" />
                      <span>{z.icon} {z.name}</span>
                      <span className="ct">{items.length}</span>
                    </div>
                    {items.map(w => (
                      <WishCard key={w.id} wish={w}
                        onDragStart={onDragStart(w.id)}
                        dragging={dragId === w.id}
                      />
                    ))}
                    <div className="add">+ Желание</div>
                  </div>
                );
              })}
            </div>
          </div>
        )}

        {/* By status — 3 columns */}
        {layout === 'status' && (
          <div className="kanban cols-3">
            {[
              { id: 'idea', label: 'Идея', icon: '💡' },
              { id: 'progress', label: 'В работе', icon: '⚙️' },
              { id: 'done', label: 'Сделано', icon: '🏆' },
            ].map((col) => {
              const items = state.wishes.filter(w => w.status === col.id);
              return (
                <div key={col.id}
                     className={`k-col ${dragOver === col.id ? 'drop' : ''}`}
                     style={{ '--zc': 'var(--accent)' }}
                     onDragOver={onDragOver(col.id)}
                     onDragLeave={() => setDragOver(null)}
                     onDrop={(e) => { e.preventDefault(); if (dragId) dispatch('moveWish', { id: dragId, status: col.id }); setDragId(null); setDragOver(null); }}
                     onDragEnd={onDragEnd}>
                  <div className="kh">
                    <span style={{ fontSize: 14 }}>{col.icon}</span>
                    <span>{col.label}</span>
                    <span className="ct">{items.length}</span>
                  </div>
                  {items.map(w => <WishCard key={w.id} wish={w} onDragStart={onDragStart(w.id)} dragging={dragId === w.id} />)}
                </div>
              );
            })}
          </div>
        )}

        {/* Grid */}
        {layout === 'grid' && (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(244px, 1fr))', gap: 12 }}>
            {state.wishes.map(w => <WishCard key={w.id} wish={w} />)}
          </div>
        )}

        {/* List */}
        {layout === 'list' && (
          <div className="card flush">
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
              <thead style={{ background: 'var(--bg-app-2)', textAlign: 'left' }}>
                <tr>
                  <th style={{ padding: '10px 14px', fontWeight: 500, color: 'var(--text-tertiary)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Желание</th>
                  <th style={{ padding: '10px 14px', fontWeight: 500, color: 'var(--text-tertiary)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Зона</th>
                  <th style={{ padding: '10px 14px', fontWeight: 500, color: 'var(--text-tertiary)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Статус</th>
                  <th style={{ padding: '10px 14px', fontWeight: 500, color: 'var(--text-tertiary)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Срок</th>
                  <th style={{ padding: '10px 14px', fontWeight: 500, color: 'var(--text-tertiary)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Прогресс</th>
                  <th style={{ padding: '10px 14px', fontWeight: 500, color: 'var(--text-tertiary)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Участники</th>
                </tr>
              </thead>
              <tbody>
                {state.wishes.map(w => {
                  const z = ZONE_BY_ID[w.zone];
                  const pct = w.steps_total ? w.steps_done / w.steps_total : 0;
                  return (
                    <tr key={w.id} style={{ borderTop: '1px solid var(--border-subtle)' }}>
                      <td style={{ padding: '11px 14px' }}>
                        <div className="row" style={{ gap: 10 }}>
                          <span style={{ fontSize: 18 }}>{w.cover}</span>
                          <span style={{ fontWeight: 600 }}>{w.title}</span>
                        </div>
                      </td>
                      <td style={{ padding: '11px 14px' }}><ZoneChip zone={z} sm /></td>
                      <td style={{ padding: '11px 14px' }}>
                        <span style={{ fontSize: 12,
                          color: w.status === 'done' ? 'var(--success)' : w.status === 'progress' ? 'var(--accent-2)' : 'var(--text-tertiary)' }}>
                          {w.status === 'done' ? '✓ Сделано' : w.status === 'progress' ? '⚙ В работе' : '💡 Идея'}
                        </span>
                      </td>
                      <td className="mono dim" style={{ padding: '11px 14px', fontSize: 12 }}>{w.due}</td>
                      <td style={{ padding: '11px 14px', width: 160 }}>
                        <div className="row" style={{ gap: 8 }}>
                          <div style={{ flex: 1, height: 4, background: 'var(--border)', borderRadius: 2 }}>
                            <div style={{ width: `${pct * 100}%`, height: '100%', background: z.color, borderRadius: 2 }} />
                          </div>
                          <span className="mono dim" style={{ fontSize: 11 }}>{w.steps_done}/{w.steps_total}</span>
                        </div>
                      </td>
                      <td style={{ padding: '11px 14px' }}><AvStack users={w.shared} size="sm" /></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// WHEEL
// ──────────────────────────────────────────────────────────────
function ScrWheel({ state, dispatch }) {
  const total = ZONES.reduce((s, z) => s + state.wheel.current[z.id], 0);
  const overall = total / ZONES.length;
  return (
    <div className="main" style={{ gridTemplateColumns: '340px 1fr' }}>
      <div className="main-col">
        <div className="eyebrow">Колесо баланса</div>
        <div className="ttl-xl mt-2">Оцени 8 зон<br/>от 1 до 10</div>
        <p className="dim2 mt-3" style={{ fontSize: 13, lineHeight: 1.5 }}>
          Это твой моментальный снимок. Сохрани, чтобы через месяц увидеть, что изменилось.
          Целевое колесо (пунктир) показывает, к чему стремишься.
        </p>

        <div className="card mt-4" style={{ padding: 16 }}>
          <div className="eyebrow mb-3">Слайдеры</div>
          {ZONES.map(z => {
            const v = state.wheel.current[z.id];
            const t = state.wheel.target[z.id];
            return (
              <div key={z.id} style={{ marginBottom: 12 }}>
                <div className="row" style={{ justifyContent: 'space-between', marginBottom: 5 }}>
                  <div className="row" style={{ gap: 8 }}>
                    <span style={{ color: z.color, fontSize: 14 }}>{z.icon}</span>
                    <span style={{ fontWeight: 500, fontSize: 13 }}>{z.name}</span>
                  </div>
                  <div className="row" style={{ gap: 8, fontFamily: 'var(--font-mono)', fontSize: 12 }}>
                    <span style={{ color: z.color, fontWeight: 700 }}>{v}</span>
                    <span className="dim">/</span>
                    <span className="dim">{t}</span>
                  </div>
                </div>
                <input type="range" min="1" max="10" value={v}
                  onChange={(e) => dispatch('wheel', { zone: z.id, value: Number(e.target.value) })}
                  style={{
                    width: '100%', height: 4, appearance: 'none', WebkitAppearance: 'none',
                    background: `linear-gradient(90deg, ${z.color} 0%, ${z.color} ${v * 10}%, var(--border) ${v * 10}%, var(--border) 100%)`,
                    borderRadius: 2, outline: 'none',
                  }} />
              </div>
            );
          })}
        </div>

        <button className="btn primary mt-4" style={{ width: '100%', justifyContent: 'center' }}>
          Сохранить снимок
        </button>
      </div>

      <div className="main-col">
        {/* Wheel */}
        <div className="card" style={{ display: 'grid', placeItems: 'center', padding: '20px', position: 'relative' }}>
          <LifeWheel size={460} current={state.wheel.current} target={state.wheel.target} />
          <div style={{ position: 'absolute', top: 16, left: 18, display: 'flex', gap: 14, fontSize: 11.5, fontFamily: 'var(--font-mono)' }}>
            <div className="row" style={{ gap: 6 }}><span style={{ width: 12, height: 2, background: 'var(--accent)' }} /> текущее</div>
            <div className="row" style={{ gap: 6 }}><span style={{ width: 12, height: 0, borderTop: '2px dashed var(--gold-2)' }} /> цель</div>
          </div>
          <div style={{ position: 'absolute', top: 16, right: 18 }}>
            <ProgressRing value={overall / 10} size={70} stroke={6} color="var(--accent)" label={overall.toFixed(1)} sub="из 10" />
          </div>
        </div>

        <div className="mt-3" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <div className="card">
            <div className="card-head"><div className="ttl-md">История</div></div>
            <div className="col" style={{ gap: 6 }}>
              {state.wheel.history.map((h, i) => (
                <div key={i} className="row" style={{ gap: 10 }}>
                  <span className="mono dim" style={{ width: 56, fontSize: 12 }}>{h.date}</span>
                  <div style={{ flex: 1, height: 6, background: 'var(--border)', borderRadius: 3 }}>
                    <div style={{ width: `${(h.overall / 10) * 100}%`, height: '100%', background: 'linear-gradient(90deg, var(--accent), var(--accent-2))', borderRadius: 3 }} />
                  </div>
                  <span className="mono" style={{ width: 30, textAlign: 'right', fontWeight: 600, fontSize: 13 }}>{h.overall.toFixed(1)}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="card">
            <div className="card-head"><div className="ttl-md">Слабые зоны</div></div>
            <div className="col" style={{ gap: 8, fontSize: 13 }}>
              {ZONES
                .map(z => ({ z, d: state.wheel.target[z.id] - state.wheel.current[z.id] }))
                .filter(({ d }) => d > 0)
                .sort((a, b) => b.d - a.d).slice(0, 4)
                .map(({ z, d }) => (
                  <div key={z.id} className="row" style={{ gap: 10, justifyContent: 'space-between' }}>
                    <span><span style={{ color: z.color }}>{z.icon}</span> {z.name}</span>
                    <span className="mono" style={{ fontSize: 12, color: 'var(--error)' }}>−{d}</span>
                  </div>
                ))}
            </div>
            <button className="btn mt-3" style={{ width: '100%', justifyContent: 'center', fontSize: 12 }}>
              Создать план улучшения
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// HABITS
// ──────────────────────────────────────────────────────────────
function ScrHabits({ state, dispatch }) {
  const totalToday = state.habits.length;
  const doneToday = state.habits.filter(h => h.doneToday).length;
  const totalStreak = Math.max(...state.habits.map(h => h.streak));
  const avgPct = Math.round(state.habits.reduce((s, h) => s + h.monthPct, 0) / state.habits.length);

  return (
    <div className="main no-rail">
      <div className="main-col">
        <div className="spread mb-4">
          <div>
            <div className="eyebrow">Трекер привычек</div>
            <div className="ttl-xl mt-2">Дневной чек-лист</div>
          </div>
          <button className="btn primary"><Icon.plus /> Привычка</button>
        </div>

        {/* Summary */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 20 }}>
          <SummaryStat label="Лучший стрик" value={totalStreak} suffix="дней" icon={<Icon.fire />} color="var(--gold)" />
          <SummaryStat label="Выполнено сегодня" value={`${doneToday}/${totalToday}`} icon={<Icon.check />} color="var(--success)" />
          <SummaryStat label="% за месяц" value={`${avgPct}%`} color="var(--accent-2)" />
          <SummaryStat label="Активных привычек" value={state.habits.length} color="var(--z-career)" />
        </div>

        {/* Today list */}
        <div className="card mb-4">
          <div className="card-head">
            <div className="ttl-md">Сегодня · понедельник, 12 мая</div>
            <span className="eyebrow mono">{doneToday}/{totalToday}</span>
          </div>
          {state.habits.map(h => {
            const z = ZONE_BY_ID[h.zone];
            return (
              <div key={h.id} className={`habit-row ${z.cls}`}>
                <div className="nm-block">
                  <button className={`check-btn ${h.doneToday ? 'done' : ''}`} onClick={(e) => {
                    dispatch('toggleHabit', h.id);
                    if (!h.doneToday) {
                      const rect = e.currentTarget.getBoundingClientRect();
                      dispatch('xpFloat', { x: rect.left, y: rect.top, xp: 1 });
                    }
                  }}>
                    {h.doneToday && <Icon.check />}
                  </button>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 2 }}>{h.title}</div>
                    <div className="row" style={{ gap: 8 }}>
                      <ZoneChip zone={z} sm />
                      <span className="mono dim" style={{ fontSize: 11 }}>{h.frequency}</span>
                      {h.shared && <span className="mono" style={{ fontSize: 11, color: 'var(--accent-2)' }}>👥 совместная</span>}
                    </div>
                  </div>
                </div>
                <div className="streak">
                  <Icon.fire />
                  <span style={{ fontWeight: 700 }}>{h.streak}</span>
                  <span className="dim" style={{ fontSize: 10 }}>/ {h.longest}</span>
                </div>
                <div className="month-pct">
                  <div style={{ fontWeight: 700 }}>{h.monthPct}%</div>
                  <div style={{ fontSize: 10, color: 'var(--text-tertiary)' }}>за месяц</div>
                </div>
              </div>
            );
          })}
        </div>

        {/* Heatmaps */}
        <div className="ttl-md mb-3">Тепловые карты — год</div>
        <div className="col" style={{ gap: 12 }}>
          {state.habits.map((h, i) => (
            <div key={h.id} className="card">
              <div className="card-head">
                <div className="row" style={{ gap: 10 }}>
                  <ZoneChip zone={h.zone} sm />
                  <span style={{ fontWeight: 600, fontSize: 14 }}>{h.title}</span>
                </div>
                <div className="row" style={{ gap: 14, fontSize: 12, fontFamily: 'var(--font-mono)', color: 'var(--text-tertiary)' }}>
                  <span><Icon.fire style={{ verticalAlign: '-2px' }} /> <b style={{ color: 'var(--gold)' }}>{h.streak}</b></span>
                  <span>~{h.monthPct}%</span>
                  <span>{state.heat[i].filter(x => x > 0).length} / 365 дней</span>
                </div>
              </div>
              <div style={{ overflowX: 'auto' }}>
                <Heatmap data={state.heat[i]} zone={h.zone} />
              </div>
              <div className="row mt-3" style={{ gap: 6, fontSize: 11, color: 'var(--text-tertiary)', justifyContent: 'flex-end' }}>
                <span>меньше</span>
                {[0, 1, 2, 3, 4].map(l => (
                  <span key={l} style={{ width: 11, height: 11, borderRadius: 2,
                                          background: `color-mix(in oklab, ${ZONE_BY_ID[h.zone].color} ${l * 25}%, var(--border))` }} />
                ))}
                <span>больше</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function SummaryStat({ label, value, suffix, icon, color }) {
  return (
    <div className="card" style={{ padding: 14 }}>
      <div className="eyebrow" style={{ fontSize: 10.5 }}>{label}</div>
      <div className="row mt-2" style={{ gap: 8, alignItems: 'baseline' }}>
        {icon && <span style={{ color, display: 'inline-flex' }}>{icon}</span>}
        <span className="mono" style={{ fontSize: 28, fontWeight: 700, color, letterSpacing: '-0.02em' }}>{value}</span>
        {suffix && <span className="dim" style={{ fontSize: 12 }}>{suffix}</span>}
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// PRIORITY MATRIX (Eisenhower)
// ──────────────────────────────────────────────────────────────
function ScrMatrix({ state, dispatch }) {
  const quads = [
    { id: 'q1', label: '1 · Сделать сейчас',   sub: 'Срочно · Важно',           cls: 'q1' },
    { id: 'q2', label: '2 · Запланировать',     sub: 'Не срочно · Важно',        cls: 'q2' },
    { id: 'q3', label: '3 · Делегировать',      sub: 'Срочно · Не важно',        cls: 'q3' },
    { id: 'q4', label: '4 · Отложить',          sub: 'Не срочно · Не важно',     cls: 'q4' },
  ];
  const [dragId, setDragId] = React.useState(null);
  const [dragOver, setDragOver] = React.useState(null);

  return (
    <div className="main no-rail">
      <div className="main-col">
        <div className="spread mb-4">
          <div>
            <div className="eyebrow">Матрица Эйзенхауэра</div>
            <div className="ttl-xl mt-2">Расстановка приоритетов</div>
          </div>
          <div className="row">
            <div className="row" style={{ gap: 4, background: 'var(--bg-card)', padding: 4, borderRadius: 'var(--r-md)', border: '1px solid var(--border)' }}>
              <button className="btn ghost" style={{ background: 'var(--accent-soft)', color: 'var(--accent-2)', padding: '5px 10px', fontSize: 12 }}>Эйзенхауэр</button>
              <button className="btn ghost" style={{ padding: '5px 10px', fontSize: 12 }}>MoSCoW</button>
            </div>
            <button className="btn"><Icon.plus /> Карточка</button>
          </div>
        </div>

        {/* Axes labels */}
        <div style={{ position: 'relative' }}>
          <div className="row" style={{ position: 'absolute', top: -28, left: '50%', transform: 'translateX(-50%)', gap: 10 }}>
            <span className="eyebrow" style={{ color: 'var(--text-secondary)' }}>← не срочно</span>
            <span className="eyebrow">срочно →</span>
          </div>
          <div style={{ position: 'absolute', left: -120, top: '50%', transform: 'rotate(-90deg)', transformOrigin: 'center', display: 'flex', gap: 10 }}>
            <span className="eyebrow" style={{ color: 'var(--text-secondary)' }}>← не важно</span>
            <span className="eyebrow">важно →</span>
          </div>

          <div className="matrix">
            {quads.map((q) => {
              const items = state.priorities.filter(p => p.quad === q.id);
              return (
                <div key={q.id}
                     className={`quad ${q.cls} ${dragOver === q.id ? 'drop' : ''}`}
                     onDragOver={(e) => { e.preventDefault(); setDragOver(q.id); }}
                     onDragLeave={() => setDragOver(null)}
                     onDrop={(e) => { e.preventDefault(); if (dragId) dispatch('priority', { id: dragId, quad: q.id }); setDragId(null); setDragOver(null); }}>
                  <div className="qh">
                    <div>
                      <div className="ql">{q.label}</div>
                      <div className="qm">{q.sub}</div>
                    </div>
                    <div className="qcount">{items.length}/10</div>
                  </div>
                  <div className="qbody">
                    {items.map(p => {
                      const w = WISHES.find(x => x.id === p.wid);
                      if (!w) return null;
                      const z = ZONE_BY_ID[w.zone];
                      return (
                        <div key={p.id}
                             draggable
                             onDragStart={() => setDragId(p.id)}
                             onDragEnd={() => { setDragId(null); setDragOver(null); }}
                             className={`mini-wish ${z.cls} ${dragId === p.id ? 'dragging' : ''}`}>
                          <span>{w.cover}</span>
                          <span style={{ flex: 1 }}>{w.title}</span>
                          <AvStack users={w.shared} size="sm" max={2} />
                        </div>
                      );
                    })}
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Focus zone */}
        <div className="card mt-4" style={{ background: 'linear-gradient(90deg, var(--accent-soft), transparent 60%)', border: '1px solid var(--accent)' }}>
          <div className="row" style={{ alignItems: 'center', justifyContent: 'space-between' }}>
            <div>
              <div className="eyebrow" style={{ color: 'var(--accent-2)' }}>Фокус недели</div>
              <div className="ttl-md mt-2">Топ-3 желания из квадранта «Сделать сейчас»</div>
              <p className="dim2 mt-2" style={{ fontSize: 13 }}>Закрепи 3 цели, чтобы команда видела их в дашборде.</p>
            </div>
            <button className="btn primary">Закрепить как фокус</button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// PROFILE / GAMIFICATION
// ──────────────────────────────────────────────────────────────
function ScrProfile({ state, dispatch }) {
  const earned = BADGES.filter(b => b.earned);
  const locked = BADGES.filter(b => !b.earned);
  return (
    <div className="main">
      <div className="main-col">
        {/* Hero */}
        <div className="profile-hero">
          <Avatar user={ME} size="xl" ring />
          <div style={{ flex: 1 }}>
            <div className="eyebrow">{GROUP.name}</div>
            <div className="ttl-lg mt-2">{ME.full}</div>
            <div className="row mt-2" style={{ gap: 8, marginBottom: 12 }}>
              <span className="lvl-pill">LVL {ME.level} · {PROGRESSION.names[ME.level]}</span>
              <span className="chip" style={{ '--zc': 'var(--gold)', background: 'rgba(245,166,35,0.15)', color: 'var(--gold-2)', borderColor: 'var(--gold)' }}>
                <Icon.fire /> 23 дня
              </span>
              <span className="chip" style={{ '--zc': 'var(--success)', background: 'rgba(52,211,153,0.12)', color: 'var(--success)' }}>
                ✓ 9 бейджей
              </span>
            </div>
            <XPBar big />
          </div>
        </div>

        {/* XP timeline */}
        <div className="mt-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
          <SummaryStat label="XP за неделю" value="+305" color="var(--accent-2)" />
          <SummaryStat label="Желаний завершено" value="3" color="var(--success)" />
          <SummaryStat label="Шагов выполнено" value="14" color="var(--z-career)" />
          <SummaryStat label="Привычек отмечено" value="38" color="var(--gold)" />
        </div>

        {/* Levels track */}
        <div className="card mt-4">
          <div className="card-head">
            <div className="ttl-md">9 уровней пути</div>
            <span className="eyebrow mono">сейчас LVL {ME.level}</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(9, 1fr)', gap: 8 }}>
            {PROGRESSION.names.map((n, i) => {
              const passed = i < ME.level;
              const current = i === ME.level;
              return (
                <div key={i} style={{
                  padding: '10px 8px',
                  borderRadius: 'var(--r-md)',
                  border: `1px solid ${current ? 'var(--accent)' : 'var(--border)'}`,
                  background: current ? 'var(--accent-soft)' : passed ? 'color-mix(in oklab, var(--success) 8%, var(--bg-card))' : 'var(--bg-card)',
                  opacity: passed || current ? 1 : 0.55,
                  textAlign: 'center',
                  position: 'relative',
                }}>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--text-tertiary)', marginBottom: 4 }}>LVL {i}</div>
                  <div style={{ fontWeight: 600, fontSize: 11.5, lineHeight: 1.2 }}>{n}</div>
                  <div className="mono" style={{ fontSize: 10, color: passed ? 'var(--success)' : current ? 'var(--accent-2)' : 'var(--text-tertiary)', marginTop: 4 }}>
                    {PROGRESSION.thresholds[i]}
                  </div>
                  {current && <div style={{ position: 'absolute', bottom: -3, left: '50%', transform: 'translateX(-50%)', width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)', boxShadow: '0 0 8px var(--accent)' }} />}
                </div>
              );
            })}
          </div>
        </div>

        {/* Badges */}
        <div className="card mt-4">
          <div className="card-head">
            <div className="ttl-md">Бейджи · {earned.length}/{BADGES.length}</div>
            <div className="row" style={{ gap: 4 }}>
              <button className="btn ghost" style={{ fontSize: 12, color: 'var(--accent-2)' }}>Получено</button>
              <button className="btn ghost" style={{ fontSize: 12 }}>Все</button>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: 8 }}>
            {[...earned, ...locked].map(b => <BadgeCell key={b.id} badge={b} />)}
          </div>
          <div className="row mt-4" style={{ gap: 8 }}>
            <button className="btn primary" onClick={() => dispatch('showBadge', BADGES[10])}>
              ⚡ Показать получение бейджа
            </button>
            <button className="btn" onClick={() => dispatch('levelUp')}>
              ✨ Показать level up
            </button>
          </div>
        </div>
      </div>
      <div className="right-rail">
        <RailLeaderboard />
        <RailFeed />
      </div>
    </div>
  );
}

Object.assign(window, {
  ScrDashboard, ScrWishes, ScrWheel, ScrHabits, ScrMatrix, ScrProfile,
  SummaryStat,
});