// ════════════════════════════════════════════════════════════════
// SynthesisPage — рабочая сессия по проработке идеи
// Открывается из IdeaExpansion → "Открыть синтез-сессию"
// Долгая editorial-страница с пронумерованными разделами + правым рейлом
// ════════════════════════════════════════════════════════════════
const { useMemo: useMemoSyn, useState: useStateSyn } = React;

function SynthesisPage({ idea, onBack }) {
  const D = window.SDH_DATA;

  // Deterministic seed from idea number
  const seed = idea.number;
  const r = (n) => ((seed * 9301 + n * 49297) % 233280) / 233280;
  const pick = (arr, n) => arr[Math.floor(r(n) * arr.length)];

  // Methodology family info
  const family = D.FAMILIES.find(f => f.id === idea.family);
  const methodSteps = METHOD_STEPS[idea.family] || METHOD_STEPS.spe;

  // Section completeness (deterministic)
  const sections = [
    { id: '01', title: 'Постановка задачи',         done: true },
    { id: '02', title: 'Методологический протокол', done: true },
    { id: '03', title: 'Конкурентный ландшафт',     done: true },
    { id: '04', title: 'Клиент и работа',           done: r(11) > 0.4 },
    { id: '05', title: 'Гипотезы для проверки',     done: r(12) > 0.55 },
    { id: '06', title: 'Риски',                     done: r(13) > 0.5 },
    { id: '07', title: 'Следующее действие',        done: r(14) > 0.45 },
  ];
  const completion = sections.filter(s => s.done).length / sections.length;

  // Mock named competitors
  const competitors = useMemoSyn(() => {
    const subset = D.corpus
      .filter(s => s.niche === idea.niche)
      .slice(0, idea.competitors);
    return subset.map((s, i) => ({
      ...s,
      verdict: i < idea.verdicts.viable ? 'viable'
             : i < idea.verdicts.viable + idea.verdicts.validate ? 'validate'
             : 'risky',
    }));
  }, [idea.number]);

  // Notes feed
  const notes = useMemoSyn(() => {
    const authors = ['Е. Орлов', 'А. Седов', 'И. Громова', 'М. Карпов', 'Д. Лебедева'];
    const texts = [
      'Подняли сессию по идее. Семья методологии очевидна — переходим к шагу 02.',
      'Из 7 конкурентов 4 закрылись за последние 18 месяцев. Это сигнал к проверке Customer Pain.',
      'Закрыли первый раунд интервью с потенциальными покупателями. Готовлю выкладку.',
      'Гипотеза о ценовом коридоре подтвердилась. Двигаемся к прототипу.',
      'Снизил уровень риска регуляторики после консультации с юридическим.',
    ];
    return Array.from({ length: 4 }).map((_, i) => ({
      author: pick(authors, i * 3),
      date: new Date(Date.now() - (3 + i * 4) * 86400000).toISOString().slice(0, 10),
      text: texts[(seed + i) % texts.length],
    }));
  }, [idea.number]);

  // Hypothesis list
  const hypotheses = useMemoSyn(() => [
    { id: 'h1', text: 'Целевая аудитория готова платить на 30% выше текущего рыночного предложения.', status: pick(['validated', 'testing', 'pending'], 1) },
    { id: 'h2', text: 'Конкуренты решают задачу нелинейно — есть возможность для упрощения.',         status: pick(['validated', 'testing', 'pending'], 2) },
    { id: 'h3', text: 'Канал привлечения через сообщества разработчиков даст CAC ниже $200.',          status: pick(['validated', 'testing', 'pending'], 3) },
    { id: 'h4', text: 'Технологический стек реализуется силами команды из 4 человек за 8 недель.',     status: pick(['validated', 'testing', 'pending'], 4) },
  ], [idea.number]);

  // Risks
  const risks = useMemoSyn(() => [
    { level: 'high',   title: 'Регуляторная неопределённость',  detail: 'Сектор подпадает под обновляемые нормы 2026 года.' },
    { level: 'medium', title: 'Зависимость от единого поставщика', detail: 'Ключевая компонента доступна у одного вендора.' },
    { level: 'medium', title: 'Длинный цикл продажи',           detail: 'B2B-цикл от первого контакта до контракта 4–6 месяцев.' },
    { level: 'low',    title: 'Технологическая зрелость',       detail: 'Базовые технологии стабильны, риски минимальны.' },
  ], [idea.number]);

  // Decision state
  const [verdict, setVerdict] = useStateSyn(null); // null | 'risky' | 'validate' | 'viable'

  // Owner / due
  const owners = ['Е. Орлов', 'А. Седов', 'И. Громова'];
  const owner = pick(owners, 99);
  const dueDate = new Date(Date.now() + (3 + Math.floor(r(50) * 10)) * 86400000).toISOString().slice(0, 10);

  return (
    <div className="sdh-fade" data-screen-label={`Синтез-сессия · идея ${idea.number}`}>
      {/* HERO */}
      <section style={{
        background: `linear-gradient(180deg, var(--hue-${idea.familyHue}-subtle), var(--surface-canvas))`,
        borderBottom: '1px solid var(--border-subtle)',
        paddingBottom: 'var(--space-8)',
      }}>
        <div className="sdh-container" style={{ paddingTop: 'var(--space-8)' }}>
          {/* breadcrumb */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 'var(--space-4)' }}>
            <button className="sdh-btn sdh-btn--ghost" onClick={onBack} style={{ padding: '5px 10px', fontSize: 12 }}>
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5">
                <path d="M7.5 2 4 6l3.5 4" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
              Идеи
            </button>
            <span style={{ color: 'var(--text-tertiary)' }}>›</span>
            <span className="sdh-mono-label" style={{ marginBottom: 0 }}>идея № {String(idea.number).padStart(2, '0')}</span>
            <span style={{ color: 'var(--text-tertiary)' }}>›</span>
            <span className="sdh-mono-label" style={{ marginBottom: 0, color: 'var(--brand-bronze-deep)' }}>синтез-сессия</span>
          </div>

          {/* title row */}
          <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 'var(--space-8)', alignItems: 'flex-end' }}>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 'var(--space-3)' }}>
                <span className="sdh-section-label" style={{ marginBottom: 0 }}>рабочая сессия</span>
                {idea.focus && <span className="sdh-focus-star">★ в фокусе</span>}
              </div>
              <h1 className="sdh-hero-h" style={{ marginBottom: 'var(--space-4)' }}>
                {idea.title}
              </h1>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                <CategoryPill hue={idea.familyHue}>{idea.familyLabel}</CategoryPill>
                <CategoryPill hue={idea.nicheHue}>{idea.nicheLabel}</CategoryPill>
                <span className="sdh-pill"><span style={{ fontFamily: 'var(--font-mono)' }}>сессия #{seed}</span></span>
              </div>
            </div>

            {/* Progress side card */}
            <div className="sdh-warm-card" style={{
              padding: 'var(--space-6)', '--bg-tint': 'var(--surface-elevated)',
            }}>
              <div className="sdh-mono-label" style={{ marginBottom: 8 }}>
                <InfoLabel
                  title="Прогресс сессии"
                  what="Доля разделов брифа, по которым команда зафиксировала результат."
                  why="Помогает понять, в каком состоянии идея сейчас, и где не хватает данных для решения.">
                  прогресс сессии
                </InfoLabel>
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 'var(--space-3)' }}>
                <div>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 28, fontWeight: 500, color: 'var(--text-primary)' }}>
                    {Math.round(completion * 100)}<span style={{ fontSize: 18, color: 'var(--text-tertiary)' }}>%</span>
                  </span>
                </div>
                <span style={{ fontSize: 11, color: 'var(--text-tertiary)', fontFamily: 'var(--font-mono)' }}>
                  {sections.filter(s => s.done).length} / {sections.length} разделов
                </span>
              </div>
              <div style={{ height: 6, background: 'var(--surface-sunken)', borderRadius: 3, overflow: 'hidden' }}>
                <div style={{
                  width: `${completion * 100}%`, height: '100%',
                  background: 'var(--brand-bronze)',
                  transition: 'width .4s var(--ease-card)',
                }} />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* MAIN BODY: 2 columns */}
      <div className="sdh-container" style={{
        paddingTop: 'var(--space-8)',
        paddingBottom: 'var(--space-16)',
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 1fr) 320px',
        gap: 'var(--space-12)',
      }}>
        {/* LEFT — editorial sections */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-12)', minWidth: 0 }}>
          {/* 01 — Постановка */}
          <SectionBlock num="01" title="Постановка задачи" done={sections[0].done}>
            <p style={{ margin: 0, fontSize: 16, lineHeight: 1.6, color: 'var(--text-secondary)' }}>
              Команда исследует возможность создания продукта по направлению{' '}
              <span style={{ fontWeight: 600, color: 'var(--text-primary)' }}>«{idea.title}»</span>.
              На сегодня семантическая близость к корпусу составляет{' '}
              <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--brand-bronze-deep)' }}>
                {idea.similarity.toFixed(2)}
              </span>
              , что говорит о{' '}
              {idea.similarity >= 0.75 ? 'высокой плотности рынка' : 'формирующемся пространстве возможностей'}.
            </p>
            <p className="sdh-quote" style={{
              marginTop: 'var(--space-4)', marginBottom: 0,
              padding: 'var(--space-3) var(--space-4)',
              borderLeft: '2px solid var(--brand-bronze)',
              background: 'var(--surface-elevated)',
              borderRadius: '0 var(--radius-md) var(--radius-md) 0',
            }}>
              {idea.recommendation}
            </p>
          </SectionBlock>

          {/* 02 — Methodology */}
          <SectionBlock num="02" title="Методологический протокол" done={sections[1].done}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 'var(--space-4)' }}>
              <CategoryPill hue={idea.familyHue}>{family.label2 || family.label}</CategoryPill>
              <span className="sdh-mono-label" style={{ marginBottom: 0 }}>{family.full}</span>
            </div>
            <ol style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
              {methodSteps.map((step, i) => (
                <li key={i} style={{
                  display: 'grid', gridTemplateColumns: '32px 1fr auto', gap: 12,
                  padding: 'var(--space-3) var(--space-4)',
                  background: 'var(--surface-elevated)',
                  border: '1px solid var(--border-subtle)',
                  borderRadius: 'var(--radius-md)',
                }}>
                  <span style={{
                    fontFamily: 'var(--font-mono)', fontSize: 11,
                    color: i < 3 ? 'var(--brand-bronze)' : 'var(--text-tertiary)',
                    fontWeight: 600, paddingTop: 1,
                  }}>{String(i + 1).padStart(2, '0')}</span>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 2 }}>
                      {step.title}
                    </div>
                    <div style={{ fontSize: 12.5, color: 'var(--text-tertiary)', lineHeight: 1.4 }}>
                      {step.detail}
                    </div>
                  </div>
                  <StepStatus status={i < 3 ? 'done' : i === 3 ? 'active' : 'pending'} />
                </li>
              ))}
            </ol>
          </SectionBlock>

          {/* 03 — Competitors */}
          <SectionBlock num="03" title="Конкурентный ландшафт" done={sections[2].done}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-6)', marginBottom: 'var(--space-4)' }}>
              <CompetitorBeeswarm verdicts={idea.verdicts} width={320} height={42} />
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                <Legend dot="rose"    label={`рискованно · ${idea.verdicts.risky}`} />
                <Legend dot="amber"   label={`валидация · ${idea.verdicts.validate}`} />
                <Legend dot="emerald" label={`жизнеспособно · ${idea.verdicts.viable}`} />
              </div>
            </div>
            <div style={{
              border: '1px solid var(--border-subtle)',
              borderRadius: 'var(--radius-md)',
              overflow: 'hidden',
            }}>
              {competitors.slice(0, 6).map((c, i) => (
                <div key={c.id} style={{
                  display: 'grid', gridTemplateColumns: '1fr auto auto', gap: 12,
                  padding: '10px 14px',
                  alignItems: 'center',
                  borderBottom: i === Math.min(5, competitors.length - 1) ? 'none' : '1px solid var(--border-subtle)',
                  background: 'var(--surface-elevated)',
                }}>
                  <div>
                    <div style={{ fontSize: 13.5, fontWeight: 500, color: 'var(--text-primary)' }}>{c.name}</div>
                    <div style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>{c.desc}</div>
                  </div>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-secondary)' }}>{c.geo}</span>
                  <VerdictBadge verdict={c.verdict} />
                </div>
              ))}
              {competitors.length > 6 && (
                <div style={{
                  padding: '10px 14px',
                  background: 'var(--surface-sunken)',
                  fontSize: 12, color: 'var(--text-tertiary)', textAlign: 'center',
                }}>
                  ещё {competitors.length - 6} конкурентов
                </div>
              )}
            </div>
          </SectionBlock>

          {/* 04 — JTBD */}
          <SectionBlock num="04" title="Клиент и работа" done={sections[3].done}>
            <div style={{
              display: 'grid',
              gridTemplateColumns: '1fr 1fr',
              gap: 'var(--space-4)',
            }}>
              <JTBDCard label="кто" content="Руководители R&D в средних промышленных компаниях. 50–500 сотрудников. Лица, принимающие решение по инструментам исследований." hue="info" />
              <JTBDCard label="когда" content="После провала пилотов на коробочных решениях, перед принятием бюджета следующего года." hue="amber" />
              <JTBDCard label="хочет" content="Сократить цикл от гипотезы до измеримого результата в три раза без потери качества данных." hue="emerald" />
              <JTBDCard label="препятствие" content="Отсутствие внутренней экспертизы; высокая чувствительность к стоимости первой интеграции." hue="rose" />
            </div>
          </SectionBlock>

          {/* 05 — Hypotheses */}
          <SectionBlock num="05" title="Гипотезы для проверки" done={sections[4].done}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' }}>
              {hypotheses.map((h, i) => (
                <div key={h.id} style={{
                  display: 'grid', gridTemplateColumns: '24px 1fr 110px', gap: 12,
                  padding: 'var(--space-3) var(--space-4)',
                  background: 'var(--surface-elevated)',
                  border: '1px solid var(--border-subtle)',
                  borderRadius: 'var(--radius-md)',
                  alignItems: 'center',
                }}>
                  <span style={{
                    fontFamily: 'var(--font-mono)', fontSize: 11,
                    color: 'var(--text-tertiary)', textAlign: 'center',
                  }}>H{i + 1}</span>
                  <span style={{ fontSize: 14, color: 'var(--text-primary)', lineHeight: 1.4 }}>{h.text}</span>
                  <HypothesisStatus status={h.status} />
                </div>
              ))}
            </div>
          </SectionBlock>

          {/* 06 — Risks */}
          <SectionBlock num="06" title="Риски" done={sections[5].done}>
            <div style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(2, 1fr)',
              gap: 'var(--space-3)',
            }}>
              {risks.map((rk, i) => (
                <div key={i} style={{
                  padding: 'var(--space-4)',
                  background: 'var(--surface-elevated)',
                  border: '1px solid var(--border-subtle)',
                  borderRadius: 'var(--radius-md)',
                  borderLeft: `3px solid ${rk.level === 'high' ? 'var(--hue-rose)' : rk.level === 'medium' ? 'var(--hue-amber)' : 'var(--hue-emerald)'}`,
                }}>
                  <div className="sdh-mono-label" style={{ marginBottom: 4 }}>
                    риск · {rk.level === 'high' ? 'высокий' : rk.level === 'medium' ? 'средний' : 'низкий'}
                  </div>
                  <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 4 }}>
                    {rk.title}
                  </div>
                  <div style={{ fontSize: 12.5, color: 'var(--text-tertiary)', lineHeight: 1.45 }}>
                    {rk.detail}
                  </div>
                </div>
              ))}
            </div>
          </SectionBlock>

          {/* 07 — Next action */}
          <SectionBlock num="07" title="Следующее действие" done={sections[6].done}>
            <div className="sdh-warm-card" style={{
              padding: 'var(--space-6)',
              '--bg-tint': 'var(--brand-bronze-subtle)',
            }}>
              <div className="sdh-mono-label" style={{ marginBottom: 4 }}>что делаем</div>
              <h3 style={{ margin: 0, fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em', color: 'var(--text-primary)', marginBottom: 'var(--space-3)' }}>
                Провести 5 углублённых интервью с целевой аудиторией для валидации H1 и H3.
              </h3>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 'var(--space-4)', paddingTop: 'var(--space-3)', borderTop: '1px solid var(--border-subtle)' }}>
                <ActionField label="ответственный" value={owner} mono />
                <ActionField label="срок" value={dueDate} mono />
                <ActionField label="формат" value="полевые интервью" />
              </div>
            </div>
          </SectionBlock>
        </div>

        {/* RIGHT RAIL */}
        <aside style={{
          position: 'sticky',
          top: 'calc(var(--header-h) + var(--space-4))',
          alignSelf: 'flex-start',
          maxHeight: 'calc(100vh - var(--header-h) - var(--space-4))',
          overflowY: 'auto',
          display: 'flex', flexDirection: 'column', gap: 'var(--space-4)',
        }}>
          {/* Session meta */}
          <SidePanel title="о сессии">
            <SideRow label="открыта" value="14 мая 2026" />
            <SideRow label="ведущий" value={owner} />
            <SideRow label="фасилитатор" value="С. Кузнецов" />
            <SideRow label="идея" value={`№ ${String(idea.number).padStart(2, '0')}`} mono />
            <SideRow label="семья" value={family.label2 || family.label} />
          </SidePanel>

          {/* Participants */}
          <SidePanel title="участники">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {['Е. Орлов', 'А. Седов', 'И. Громова', 'М. Карпов', 'Д. Лебедева'].map((p, i) => (
                <div key={p} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{
                    width: 26, height: 26, borderRadius: '50%',
                    background: `var(--hue-${['purple', 'emerald', 'amber', 'rose', 'info'][i % 5]}-subtle)`,
                    border: `1px solid var(--hue-${['purple', 'emerald', 'amber', 'rose', 'info'][i % 5]})`,
                    color: `var(--hue-${['purple', 'emerald', 'amber', 'rose', 'info'][i % 5]})`,
                    fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 600,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0,
                  }}>{p.split(' ')[0].charAt(0)}{p.split(' ')[1].charAt(0)}</div>
                  <span style={{ fontSize: 13, color: 'var(--text-primary)' }}>{p}</span>
                </div>
              ))}
            </div>
          </SidePanel>

          {/* Notes */}
          <SidePanel title="ход обсуждения">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
              {notes.map((n, i) => (
                <div key={i} style={{
                  paddingBottom: i === notes.length - 1 ? 0 : 'var(--space-3)',
                  borderBottom: i === notes.length - 1 ? 'none' : '1px dashed var(--border-subtle)',
                }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                    <span style={{ fontSize: 12, color: 'var(--text-primary)', fontWeight: 600 }}>{n.author}</span>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--text-tertiary)' }}>{n.date}</span>
                  </div>
                  <p style={{ margin: 0, fontSize: 12.5, lineHeight: 1.45, color: 'var(--text-secondary)' }}>{n.text}</p>
                </div>
              ))}
            </div>
            <button className="sdh-btn sdh-btn--ghost" style={{ marginTop: 'var(--space-3)', width: '100%', justifyContent: 'center', fontSize: 12 }}>
              + добавить заметку
            </button>
          </SidePanel>
        </aside>
      </div>

      {/* DECISION FOOTER (sticky) */}
      <div style={{
        position: 'sticky',
        bottom: 0,
        background: 'var(--surface-elevated)',
        borderTop: '1px solid var(--border-default)',
        boxShadow: '0 -8px 24px -16px rgba(31, 27, 22, 0.12)',
        zIndex: 30,
      }}>
        <div className="sdh-container" style={{
          padding: 'var(--space-3) var(--space-8)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-6)',
        }}>
          <div>
            <div className="sdh-mono-label" style={{ marginBottom: 2 }}>решение по идее</div>
            <div style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
              {verdict
                ? <React.Fragment>выбрано: <strong style={{ color: 'var(--text-primary)' }}>{verdict === 'viable' ? 'в работу' : verdict === 'validate' ? 'дополнительная валидация' : 'отложить'}</strong></React.Fragment>
                : 'выберите вердикт сессии'}
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <VerdictButton active={verdict === 'risky'}    onClick={() => setVerdict('risky')}    hue="rose"    label="отложить" />
            <VerdictButton active={verdict === 'validate'} onClick={() => setVerdict('validate')} hue="amber"   label="нужна валидация" />
            <VerdictButton active={verdict === 'viable'}   onClick={() => setVerdict('viable')}   hue="emerald" label="в работу" />
            <button className="sdh-btn sdh-btn--bronze" disabled={!verdict}
              style={{ opacity: verdict ? 1 : 0.4, cursor: verdict ? 'pointer' : 'not-allowed' }}>
              Зафиксировать решение
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5">
                <path d="M3 6.5l2 2 4-5" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Subcomponents ────────────────────────────────────────────────
function SectionBlock({ num, title, done, children }) {
  return (
    <section style={{ position: 'relative' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 'var(--space-3)', marginBottom: 'var(--space-4)' }}>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 600,
          color: done ? 'var(--brand-bronze)' : 'var(--text-tertiary)',
          letterSpacing: '0.04em',
        }}>{num}</span>
        <h2 style={{
          margin: 0, fontFamily: 'var(--font-display)', fontStyle: 'italic',
          fontSize: 26, fontWeight: 500, color: 'var(--text-primary)',
          letterSpacing: '-0.015em',
        }}>{title}</h2>
        <span style={{ flex: 1, height: 1, background: 'var(--border-subtle)', marginLeft: 'var(--space-3)', marginRight: 'var(--space-3)' }} />
        <StepStatus status={done ? 'done' : 'pending'} />
      </div>
      <div>{children}</div>
    </section>
  );
}

function StepStatus({ status }) {
  const map = {
    done:    { hue: 'emerald', label: 'готово', icon: '✓' },
    active:  { hue: 'amber',   label: 'в работе', icon: '◐' },
    pending: { hue: 'info',    label: 'ожидает', icon: '◯' },
  };
  const s = map[status] || map.pending;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      fontSize: 11, fontFamily: 'var(--font-mono)',
      color: `var(--hue-${s.hue})`,
      padding: '2px 8px',
      background: `var(--hue-${s.hue}-subtle)`,
      borderRadius: 'var(--radius-full)',
      whiteSpace: 'nowrap',
    }}>
      <span>{s.icon}</span>{s.label}
    </span>
  );
}

function VerdictBadge({ verdict }) {
  const map = {
    risky:    { hue: 'rose',    label: 'рискованно' },
    validate: { hue: 'amber',   label: 'валидация' },
    viable:   { hue: 'emerald', label: 'жизнеспособно' },
  };
  const v = map[verdict] || map.risky;
  return <CategoryPill hue={v.hue} small>{v.label}</CategoryPill>;
}

function HypothesisStatus({ status }) {
  const map = {
    validated: { hue: 'emerald', label: 'подтверждена' },
    testing:   { hue: 'amber',   label: 'тестируется' },
    pending:   { hue: 'info',    label: 'не начата' },
  };
  const s = map[status] || map.pending;
  return (
    <span style={{
      fontFamily: 'var(--font-mono)', fontSize: 10.5,
      color: `var(--hue-${s.hue})`, textAlign: 'right',
      whiteSpace: 'nowrap',
    }}>
      {s.label}
    </span>
  );
}

function JTBDCard({ label, content, hue }) {
  return (
    <div style={{
      padding: 'var(--space-4)',
      background: 'var(--surface-elevated)',
      border: '1px solid var(--border-subtle)',
      borderRadius: 'var(--radius-md)',
      borderTop: `3px solid var(--hue-${hue})`,
    }}>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 10.5,
        color: `var(--hue-${hue})`, letterSpacing: '0.06em',
        textTransform: 'uppercase', marginBottom: 6,
      }}>{label}</div>
      <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.5, color: 'var(--text-secondary)' }}>
        {content}
      </p>
    </div>
  );
}

function ActionField({ label, value, mono }) {
  return (
    <div>
      <div className="sdh-mono-label" style={{ marginBottom: 2 }}>{label}</div>
      <div style={{
        fontSize: 14, color: 'var(--text-primary)',
        fontFamily: mono ? 'var(--font-mono)' : 'var(--font-sans)',
      }}>{value}</div>
    </div>
  );
}

function SidePanel({ title, children }) {
  return (
    <div style={{
      background: 'var(--surface-elevated)',
      border: '1px solid var(--border-subtle)',
      borderRadius: 'var(--radius-xl)',
      padding: 'var(--space-4)',
    }}>
      <div className="sdh-mono-label" style={{ marginBottom: 'var(--space-3)' }}>{title}</div>
      {children}
    </div>
  );
}

function SideRow({ label, value, mono }) {
  return (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
      padding: '5px 0',
      borderBottom: '1px dashed var(--border-subtle)',
    }}>
      <span style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>{label}</span>
      <span style={{
        fontSize: 12.5, color: 'var(--text-primary)',
        fontFamily: mono ? 'var(--font-mono)' : 'var(--font-sans)',
      }}>{value}</span>
    </div>
  );
}

function VerdictButton({ active, onClick, hue, label }) {
  return (
    <button onClick={onClick} style={{
      padding: '7px 14px',
      borderRadius: 'var(--radius-md)',
      border: `1px solid ${active ? `var(--hue-${hue})` : 'var(--border-default)'}`,
      background: active ? `var(--hue-${hue}-subtle)` : 'var(--surface-elevated)',
      color: active ? `var(--hue-${hue})` : 'var(--text-secondary)',
      fontSize: 13, fontWeight: active ? 600 : 500,
      cursor: 'pointer',
      transition: 'all .15s',
      display: 'inline-flex', alignItems: 'center', gap: 6,
    }}>
      <span style={{ width: 7, height: 7, borderRadius: '50%', background: `var(--hue-${hue})` }} />
      {label}
    </button>
  );
}

// ── Methodology step library ─────────────────────────────────────
const METHOD_STEPS = {
  spe: [
    { title: 'Артикуляция симбиоза',     detail: 'Описать взаимовыгодную пару продукт–рынок: какую двустороннюю ценность создаём.' },
    { title: 'Карта зависимостей',       detail: 'Зафиксировать критические зависимости продукта от партнёрских ресурсов.' },
    { title: 'Поиск негативного цикла',  detail: 'Найти, где симбиоз может выродиться в паразитизм при росте.' },
    { title: 'Прототип ценностного потока', detail: 'Собрать минимальный поток обмена ценностью между сторонами.' },
    { title: 'Метрика стабильности',     detail: 'Определить наблюдаемый показатель здоровья симбиоза.' },
  ],
  cape: [
    { title: 'Карта способностей',       detail: 'Описать целевые способности (capabilities) клиента, которые расширяет продукт.' },
    { title: 'Разрыв состояний',         detail: 'Замерить дельту между текущим и целевым состоянием способности.' },
    { title: 'Каскад приёма',            detail: 'Расписать, как новая способность интегрируется в существующие практики.' },
    { title: 'Проба на сопротивление',   detail: 'Найти точки психологического и организационного сопротивления.' },
    { title: 'Шкалирование',             detail: 'Определить условия передачи способности внутри организации.' },
  ],
  inot: [
    { title: 'Распознавание узла',       detail: 'Описать узел сети: что в нём накапливается и что течёт сквозь.' },
    { title: 'Топология связи',          detail: 'Зафиксировать тип связей между узлами: иерархия, граф, mesh.' },
    { title: 'Интеллект на ребре',       detail: 'Определить, какие решения принимаются локально, а какие централизованно.' },
    { title: 'Протокол согласия',        detail: 'Описать механизм достижения согласия между узлами в условиях задержки.' },
    { title: 'Деградация и устойчивость', detail: 'Прописать поведение сети при отказе подмножества узлов.' },
  ],
  rosi: [
    { title: 'Снимок состояния',         detail: 'Собрать ландшафт всех сигналов о направлении на момент Т.' },
    { title: 'Векторы интерпретации',    detail: 'Выделить 3–5 интерпретаций ситуации, противоречащих друг другу.' },
    { title: 'Натяжение между векторами', detail: 'Описать, где интерпретации сходятся и где расходятся.' },
    { title: 'Синтетическая гипотеза',   detail: 'Сформулировать гипотезу, объясняющую противоречия.' },
    { title: 'План фальсификации',       detail: 'Определить эксперимент, способный опровергнуть синтез.' },
  ],
};

window.SynthesisPage = SynthesisPage;