/* eslint-disable no-undef */
// =====================================================
// Страницы визуализаций — каждая со вступлением + интерактив
// =====================================================

function VizPageDirectionField() {
  return (
    <React.Fragment>
      <div className="eyebrow">Визуализация · к главе 1</div>
      <h1 className="page-title">Поле направлений</h1>
      <p className="lede">
        Уравнение {"$y' = f(x, y)$"} в каждой точке плоскости задаёт <em className="h-teal">наклон</em>. Семейство этих наклонов
        и есть поле направлений. Интегральная кривая всегда «течёт» вдоль него.
      </p>
      <DirectionFieldViz />
      <h3>Что попробовать</h3>
      <ul>
        <li>Поменять уравнение справа: классическое {"$y'=x-y$"} с асимптотой {"$y=x-1$"}; логистическое {"$y'=y(1-y)$"} с устойчивым {"$y=1$"} и неустойчивым {"$y=0$"}; периодически качающееся {"$y'=\\sin x-y$"}.</li>
        <li>Кликнуть в любой точке холста — оттуда стартует новая интегральная кривая.</li>
        <li>Менять плотность поля направлений ползунком.</li>
      </ul>
    </React.Fragment>
  );
}

function VizPageBlowUp() {
  return (
    <React.Fragment>
      <div className="eyebrow">Визуализация · к главе 2</div>
      <h1 className="page-title">Взрыв решения за конечное время</h1>
      <p className="lede">
        Правая часть {"$f(y)=y^2$"} <em className="h-orange">локально</em> липшицева, поэтому Пикар гарантирует
        единственное решение в окрестности любой точки. Но это решение продолжается лишь до {"$x=1/y_0$"} —
        там {"$|y(x)|\\to\\infty$"} за конечное время.
      </p>
      <BlowUpViz />
      <h3>Связь с теорией</h3>
      <p>
        Это <em className="h-orange">альтернатива 2</em> теоремы о продолжении: уход в бесконечность за конечное время.
        Точное решение {"$y(x)=\\dfrac{y_0}{1-y_0 x}$"} имеет вертикальную асимптоту в точке {"$x^* = 1/y_0$"};
        перетягивая ползунок {"$y_0$"}, можно увидеть, как точка взрыва уезжает по гиперболе.
      </p>
    </React.Fragment>
  );
}

function VizPageClairaut() {
  return (
    <React.Fragment>
      <div className="eyebrow">Визуализация · к главе 1.7</div>
      <h1 className="page-title">Уравнение Клеро: семейство прямых и огибающая</h1>
      <p className="lede">
        Уравнение Клеро {"$y = x\\,y' + \\psi(y')$"} имеет два типа решений:
        семейство прямых {"$y=Cx+\\psi(C)$"} (общее) и огибающую (особое).
        В каждой точке огибающей касается одна из прямых — там нарушается единственность задачи Коши.
      </p>
      <ClairautViz />
      <h3>Что происходит математически</h3>
      <p>
        Дифференцируя {"$y=Cx+\\psi(C)$"} по {"$C$"} и приравнивая к нулю, получаем {"$x+\\psi'(C)=0$"}.
        Из этого выражаем {"$C=C(x)$"} и подставляем — получается уравнение огибающей в параметрической форме
        {"$x = -\\psi'(C),\\,y = -C\\psi'(C)+\\psi(C)$"}.
      </p>
      <p>
        Для {"$\\psi(p)=-p^2/4$"}: {"$x=C/2,\\,y=C^2/4$"} → исключая {"$C$"}: <em className="h-orange">парабола {"$y=x^2$"}</em>.
      </p>
    </React.Fragment>
  );
}

function VizPagePendulum() {
  return (
    <React.Fragment>
      <div className="eyebrow">Визуализация · к главам 6, 7</div>
      <h1 className="page-title">Маятник: фазовый портрет</h1>
      <p className="lede">
        Математический маятник {"$\\ddot y + \\sin y = 0$"} — двумерная автономная система
        {" $\\dot y=v,\\,\\dot v=-\\sin y$ "}с первым интегралом
        <em className="h-orange"> {"$E=v^2/2-\\cos y$"}</em> (полная энергия).
      </p>
      <PendulumViz />
      <h3>Три режима движения</h3>
      <ul>
        <li><em className="h-teal">E &lt; 1</em>: колебания вокруг центра {"$(2\\pi k, 0)$"} — замкнутые траектории.</li>
        <li><em className="h-teal">E = 1</em>: <b>сепаратрисы</b> — критические траектории, идущие из седла {"$(\\pi+2\\pi k,0)$"} в соседнее седло.</li>
        <li><em className="h-orange">E &gt; 1</em>: вращения — траектория не замкнута, маятник делает полные обороты.</li>
      </ul>
      <h3>С трением</h3>
      <p>
        Включив параметр {"$\\gamma > 0$"}, мы получаем {"$\\ddot y + \\gamma\\dot y + \\sin y = 0$"}.
        Энергия больше не сохраняется — траектории спиралью притягиваются к центрам {"$(2\\pi k,0)$"},
        которые из «центров» превращаются в <em className="h-orange">устойчивые фокусы</em>.
      </p>
    </React.Fragment>
  );
}

function VizPagePhase() {
  return (
    <React.Fragment>
      <div className="eyebrow">Визуализация · к главе 6.2</div>
      <h1 className="page-title">Классификация особых точек 2D-системы</h1>
      <p className="lede">
        Линейная автономная система {"$\\dot{\\mathbf x} = A\\mathbf x$"} в {"$\\mathbb R^2$"} имеет восемь типичных фазовых портретов,
        определяемых собственными значениями матрицы {"$A$"}. Переключайтесь между ними и «крутите» матрицу руками.
      </p>
      <PhasePortraitViz presetDefault="stableNode" />
      <h3>Шпаргалка</h3>
      <ul>
        <li>{"$\\lambda_1,\\lambda_2 \\in \\mathbb R$"}, оба &lt; 0 — устойчивый узел; оба &gt; 0 — неустойчивый; разных знаков — седло.</li>
        <li>{"$\\lambda_{1,2}=\\alpha\\pm i\\beta$"}: фокус (устойчивый при {"$\\alpha < 0$"}); чисто мнимые — центр.</li>
        <li>{"$\\lambda_1=\\lambda_2$"} с одним собственным направлением — вырожденный узел; матрица скалярна — дикритический.</li>
      </ul>
      <p style={{ color: 'var(--fg-mute)' }}>
        А диаграмма Пуанкаре, объединяющая всё это в одну плоскость, —{' '}
        <a href="#viz-poincare">на следующей странице</a>.
      </p>
    </React.Fragment>
  );
}

function VizPagePoincare() {
  return (
    <React.Fragment>
      <div className="eyebrow">Визуализация · к главе 6.2</div>
      <h1 className="page-title">Диаграмма Пуанкаре</h1>
      <p className="lede">
        Тип особой точки 2D-системы целиком определяется двумя инвариантами матрицы:
        следом {"$\\operatorname{tr} A$"} и определителем {"$\\det A$"}. На плоскости этих величин
        получается чёткая картина всех восьми режимов.
      </p>
      <PoincareDiagramViz />
      <h3>Границы регионов</h3>
      <ul>
        <li><span style={{ color: 'var(--orange)' }}>Парабола {"$D=(\\operatorname{tr} A)^2 - 4\\det A=0$"}</span> разделяет узлы и фокусы.</li>
        <li><span style={{ color: 'var(--purple)' }}>Вертикальная ось {"$\\operatorname{tr} A=0$"}</span> при {"$\\det A>0$"} — центры.</li>
        <li><span style={{ color: 'var(--red)' }}>{"$\\det A<0$"}</span> — седло.</li>
        <li>Знак {"$\\operatorname{tr} A$"} различает устойчивость: «слева — стабильно, справа — нет».</li>
      </ul>
      <p>
        Перетягивайте курсором точку по плоскости — увидите, как изменение коэффициентов матрицы перескакивает между режимами.
        Превью в правой панели — фазовый портрет соответствующей системы.
      </p>
    </React.Fragment>
  );
}

// ---------- Playgrounds (additional interactive sandboxes) ----------

function VizPageParticlePlayground() {
  return (
    <React.Fragment>
      <div className="eyebrow">Песочница · к главе 1</div>
      <h1 className="page-title">Поток в поле направлений</h1>
      <p className="lede">
        Здесь обычное поле направлений превращено в живой поток. Кликайте по полю —
        горсть шариков падает в эту точку и плывёт вдоль интегральных кривых, как листья по реке.
        Цвет показывает скорость или знак производной — это даёт почувствовать поле «телом»,
        а не только глазом.
      </p>
      <ParticlePlaygroundViz />
      <h3>Что попробовать</h3>
      <ul>
        <li>Включи «авто-душ» — слева непрерывно сыплется поток шариков, видна вся структура потока.</li>
        <li>Раскрась по знаку <em>y′</em> — сразу понятно, где функция растёт (синие), где падает (тёплые).</li>
        <li>На {"$y' = xy$"} брось шарики в четырёх четвертях — увидишь сразу четыре разных характера движения.</li>
      </ul>
    </React.Fragment>
  );
}

function VizPagePhaseFlow() {
  return (
    <React.Fragment>
      <div className="eyebrow">Песочница · к главе 6</div>
      <h1 className="page-title">Фазовый поток: брось шарик в поле</h1>
      <p className="lede">
        Двумерные автономные системы в реальном времени.
        Шарик начинает катиться от точки клика, и вы видите трактoрию <em>в процессе</em>,
        а не как застывшую кривую. Цвет хвоста показывает скорость — там, где
        пружина сильнее, шарик летит быстрее, и хвост желтеет.
      </p>
      <PhaseFlowPlaygroundViz />
      <h3>Что попробовать</h3>
      <ul>
        <li><b>Ван-дер-Поль:</b> кликни и в центр, и далеко снаружи — оба шарика выйдут на один и тот же предельный цикл.</li>
        <li><b>Хищник–жертва:</b> любой шарик внутри положительного квадранта движется по замкнутой кривой вокруг точки равновесия — это и есть закон Лотки-Вольтерра.</li>
        <li><b>Маятник с трением:</b> подкрути γ и кликни сверху — шарик спирально стечёт к одному из центров.</li>
        <li><b>Дюффинг:</b> две притягивающие точки — кликни рядом с одной, потом ровно по седлу — почувствуй чувствительность.</li>
      </ul>
    </React.Fragment>
  );
}

function VizPagePhysicalPendulum() {
  return (
    <React.Fragment>
      <div className="eyebrow">Песочница · к главе 7</div>
      <h1 className="page-title">Маятник в реальном времени</h1>
      <p className="lede">
        Две картинки одного и того же объекта: слева — настоящий маятник, который качается, справа —
        точка в фазовой плоскости {"$(y,\\,v)$"}, которая ездит вдоль линии уровня энергии.
        Перетягивайте шар мышью или кликайте на фазовом портрете —
        связь между «физикой» и «фазой» становится ощутимой.
      </p>
      <PhysicalPendulumViz />
      <h3>Что попробовать</h3>
      <ul>
        <li>Запустить с «Малые колебания» — точка в фазовой плоскости описывает аккуратный эллипс. Энергия низкая (синий бар).</li>
        <li>Нажать «Сепаратриса» — траектория ползёт через седло, бесконечно долго подходя к перевёрнутому положению.</li>
        <li>«Вращение» — маятник делает полные обороты, в фазовой плоскости точка уходит на бесконечный вращательный режим.</li>
        <li>Подкрутить трение γ и запустить «Большой размах» — энергия монотонно падает, спираль сходится в центр.</li>
      </ul>
    </React.Fragment>
  );
}

Object.assign(window, {
  VizPageHome,
  VizPageDirectionField, VizPageBlowUp, VizPageClairaut,
  VizPagePendulum, VizPagePhase, VizPagePoincare,
  VizPageParticlePlayground, VizPagePhaseFlow, VizPagePhysicalPendulum,
});

// Landing / Home page
function VizPageHome() {
  return (
    <React.Fragment>
      <div className="eyebrow">Интерактивный гайд</div>
      <h1 className="page-title">Теоретический минимум по&nbsp;ОДУ</h1>
      <p className="lede">
        Мини‑учебник по годовому курсу обыкновенных дифференциальных уравнений (МФТИ, 3–4 семестры) с
        интерактивными иллюстрациями. Текст — строго по теоретическому минимуму:
        определения, теоремы, «что это значит по сути», якоря и разборы экзаменационных задач.
        Шесть{' '}
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--teal)' }} />
          интерактивов
        </span>
        {' '}и три{' '}
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--orange)' }} />
          песочницы
        </span>
        {' '}встроены прямо в поток глав — отмечены точками в левом меню.
      </p>

      <h2>Содержание</h2>
      <div className="semester-divider">Осенний семестр</div>
      <div className="toc-grid">
        <a className="toc-card" href="#ch-1-1">
          <div className="num">Глава 1.1</div>
          <div className="ttl">Основные понятия</div>
          <div className="desc">ОДУ n-го порядка, задача Коши, общее решение, поле направлений.</div>
        </a>
        <a className="toc-card" href="#viz-direction-field">
          <div className="num">◆ Интерактив</div>
          <div className="ttl">Поле направлений</div>
          <div className="desc">y′ = f(x, y), кликабельные интегральные кривые, четыре уравнения.</div>
        </a>
        <a className="toc-card" href="#viz-particle-playground">
          <div className="num">◆ Песочница</div>
          <div className="ttl">Поток в поле направлений</div>
          <div className="desc">Бросай шарики в поле, цвет — скорость или знак производной.</div>
        </a>
        <a className="toc-card" href="#ch-1-2">
          <div className="num">Глава 1.2 – 1.4</div>
          <div className="ttl">Простейшие типы первого порядка</div>
          <div className="desc">Разделяющиеся переменные, однородные, линейные первого порядка.</div>
        </a>
        <a className="toc-card" href="#ch-1-5">
          <div className="num">Глава 1.5 – 1.6</div>
          <div className="ttl">Полные дифференциалы, Бернулли и Риккати</div>
          <div className="desc">Критерий потенциальности, интегрирующий множитель, обмен заменами.</div>
        </a>
        <a className="toc-card" href="#ch-1-7">
          <div className="num">Глава 1.7</div>
          <div className="ttl">Не разрешённые относительно производной</div>
          <div className="desc">Особое решение, p-дискриминанта, уравнения Лагранжа и Клеро.</div>
        </a>
        <a className="toc-card" href="#viz-clairaut">
          <div className="num">◆ Интерактив</div>
          <div className="ttl">Уравнение Клеро и огибающая</div>
          <div className="desc">Семейство прямых и парабола-огибающая. Четыре варианта ψ(p).</div>
        </a>
        <a className="toc-card" href="#ch-1-8">
          <div className="num">Глава 1.8</div>
          <div className="ttl">Методы понижения порядка</div>
          <div className="desc">Четыре типа уравнений, симметрия как идея понижения порядка.</div>
        </a>
        <a className="toc-card" href="#ch-2">
          <div className="num">Глава 2</div>
          <div className="ttl">Задача Коши: существование и единственность</div>
          <div className="desc">Теорема Пикара. Три альтернативы для максимального интервала.</div>
        </a>
        <a className="toc-card" href="#viz-blowup">
          <div className="num">◆ Интерактив</div>
          <div className="ttl">Взрыв решения за конечное время</div>
          <div className="desc">Контрпример y′ = y² к глобальной разрешимости.</div>
        </a>
        <a className="toc-card" href="#ch-3">
          <div className="num">Глава 3</div>
          <div className="ttl">Линейные ОДУ с постоянными коэффициентами</div>
          <div className="desc">ФСР, квазимногочлен, Эйлер, Жордан, матричная экспонента.</div>
        </a>
      </div>

      <div className="semester-divider">Весенний семестр</div>
      <div className="toc-grid">
        <a className="toc-card" href="#ch-4">
          <div className="num">Глава 4</div>
          <div className="ttl">Зависимость от параметра</div>
          <div className="desc">Уравнение в вариациях, экзаменационный алгоритм.</div>
        </a>
        <a className="toc-card" href="#ch-5">
          <div className="num">Глава 5</div>
          <div className="ttl">Линейные ОДУ с переменными коэффициентами</div>
          <div className="desc">Фундаментальная матрица, Вронскиан, Лиувилль, формула Коши, Штурм.</div>
        </a>
        <a className="toc-card" href="#ch-6">
          <div className="num">Глава 6</div>
          <div className="ttl">Автономные системы. Устойчивость</div>
          <div className="desc">Классификация особых точек, гиперболичность, теорема Ляпунова.</div>
        </a>
        <a className="toc-card" href="#viz-phase">
          <div className="num">◆ Интерактив</div>
          <div className="ttl">Фазовые портреты особых точек</div>
          <div className="desc">Все восемь типов точек 2D-системы + ручная подстройка матрицы.</div>
        </a>
        <a className="toc-card" href="#viz-poincare">
          <div className="num">◆ Интерактив</div>
          <div className="ttl">Диаграмма Пуанкаре</div>
          <div className="desc">Перетягиваемая точка в плоскости (tr A, det A) с превью портрета.</div>
        </a>
        <a className="toc-card" href="#viz-phase-flow">
          <div className="num">◆ Песочница</div>
          <div className="ttl">Фазовый поток</div>
          <div className="desc">Шарики катятся по 2D-системам: Ван-дер-Поль, Лотка–Вольтерра, Дюффинг.</div>
        </a>
        <a className="toc-card" href="#ch-7">
          <div className="num">Глава 7</div>
          <div className="ttl">Первые интегралы автономных систем</div>
          <div className="desc">Сохраняющиеся величины, симметричная форма системы.</div>
        </a>
        <a className="toc-card" href="#viz-pendulum">
          <div className="num">◆ Интерактив</div>
          <div className="ttl">Маятник и фазовый портрет</div>
          <div className="desc">Колебания, сепаратриса, вращения, режим с трением.</div>
        </a>
        <a className="toc-card" href="#viz-physical-pendulum">
          <div className="num">◆ Песочница</div>
          <div className="ttl">Маятник в реальном времени</div>
          <div className="desc">Тяни за шар, кликай по фазовому портрету — связь физики и фазы.</div>
        </a>
        <a className="toc-card" href="#ch-8">
          <div className="num">Глава 8</div>
          <div className="ttl">Линейные УЧП первого порядка</div>
          <div className="desc">Характеристики, общее решение, задача Коши.</div>
        </a>
        <a className="toc-card" href="#ch-9">
          <div className="num">Глава 9</div>
          <div className="ttl">Элементы вариационного исчисления</div>
          <div className="desc">Уравнение Эйлера, изопериметрические задачи, условие Лежандра.</div>
        </a>
      </div>
    </React.Fragment>
  );
}

Object.assign(window, {
  VizPageHome,
  VizPageDirectionField, VizPageBlowUp, VizPageClairaut,
  VizPagePendulum, VizPagePhase, VizPagePoincare,
});
