/* axiomlens-content.ru.jsx – Russian edition of the AxiomLens flagship article.
   Same structure & components as axiomlens-content.jsx, Russian copy sourced from
   the live ru/case-study-axiomlens.html. Exports <AxiomCase/>.
   Depends on core.jsx + casestudy-shared.jsx (ZoomImg). */

const AIMG = "../assets/";

/* ---- animated count-up (scroll-triggered, with non-painting fallback) ---- */
function useCountUp(target, run, dur = 1300) {
  const [val, setVal] = useState(0);
  useEffect(() => {
    if (!run) return;
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {setVal(target);return;}
    let raf = 0,start = 0,done = false;
    const tick = (t) => {
      if (!start) start = t;
      const p = Math.min((t - start) / dur, 1);
      setVal(Math.round((1 - Math.pow(1 - p, 3)) * target));
      if (p < 1) raf = requestAnimationFrame(tick);else done = true;
    };
    raf = requestAnimationFrame(tick);
    const fb = setTimeout(() => {if (!done) setVal(target);}, dur + 500);
    return () => {cancelAnimationFrame(raf);clearTimeout(fb);};
  }, [run, target, dur]);
  return val;
}

function Stat({ to, pre = "", suf = "", text, label }) {
  const ref = useRef(null);
  const [run, setRun] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const inView = () => {
      const r = el.getBoundingClientRect();
      return r.top < (window.innerHeight || 800) * 0.85 && r.bottom > 0;
    };
    if (inView()) {setRun(true);return;}
    const onScroll = () => {if (inView()) {setRun(true);cleanup();}};
    const t = setTimeout(() => {setRun(true);cleanup();}, 2500);
    function cleanup() {window.removeEventListener("scroll", onScroll);clearTimeout(t);}
    window.addEventListener("scroll", onScroll, { passive: true });
    return cleanup;
  }, []);
  const n = useCountUp(to == null ? 0 : to, run);
  return (
    <div className="gm-stat" ref={ref}>
      <div className="gm-stat-n">{text ? text : <span className="accent">{pre}{n}{suf}</span>}</div>
      <div className="gm-stat-k">{label}</div>
    </div>);

}

/* ---- list helpers ---- */
function KL({ items }) {
  return <ul className="cs-steps">{items.map(([b, t], i) => <li className="cs-li" key={i}><strong>{b}</strong> {t}</li>)}</ul>;
}
function PlainList({ items }) {
  return <ul className="cs-steps">{items.map((t, i) => <li className="cs-li" key={i}>{t}</li>)}</ul>;
}

function Persona({ avatar, name, role, tag, blurb, needs, pains }) {
  return (
    <Reveal className="ax-pcard">
      <span className="tag tag-accent ax-persona-tag">{tag}</span>
      <div className="ax-persona-head">
        <img className="ax-avatar" src={avatar} alt={name + " — аватар"} loading="lazy" />
        <div className="ax-persona-id">
          <span className="ax-persona-name">{name}</span>
          <span className="ax-persona-role mono-sm">{role}</span>
        </div>
      </div>
      <p className="cs-p ax-persona-blurb">{blurb}</p>
      <div className="ax-pcard-block">
        <div className="ax-sub5">Что нужно с первого взгляда</div>
        <PlainList items={needs} />
      </div>
      <div className="ax-pcard-block">
        <div className="ax-sub5">Болевые точки</div>
        <PlainList items={pains} />
      </div>
    </Reveal>);

}

/* ---- horizontal, scroll-snap carousel of clickable iteration frames ---- */
function Carousel({ items }) {
  const trackRef = useRef(null);
  const [atStart, setAtStart] = useState(true);
  const [atEnd, setAtEnd] = useState(false);
  const update = useCallback(() => {
    const t = trackRef.current;
    if (!t) return;
    setAtStart(t.scrollLeft <= 2);
    setAtEnd(t.scrollLeft + t.clientWidth >= t.scrollWidth - 2);
  }, []);
  useEffect(() => {update();}, [update]);
  const move = (dir) => {
    const t = trackRef.current;
    if (!t) return;
    const card = t.querySelector(".ax-car-slide");
    const w = card ? card.getBoundingClientRect().width + 16 : t.clientWidth * 0.8;
    t.scrollBy({ left: dir * w, behavior: "smooth" });
  };
  return (
    <div className="ax-car">
      <div className="ax-car-track" ref={trackRef} onScroll={update}>
        {items.map(([img, cap], i) =>
        <div className="ax-car-slide" key={i}>
            <span className="ax-car-tag">{String(i + 1).padStart(2, "0")}</span>
            <ZoomImg src={AIMG + img} alt={typeof cap === "string" ? cap : "Итерация"} caption={cap} />
          </div>
        )}
      </div>
      <div className="ax-car-nav">
        <span className="ax-car-hint mono-sm">Тяните или жмите →</span>
        <div className="ax-car-btns">
          <button className="ax-car-btn" onClick={() => move(-1)} disabled={atStart} data-hot aria-label="Назад">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6" /></svg>
          </button>
          <button className="ax-car-btn" onClick={() => move(1)} disabled={atEnd} data-hot aria-label="Вперед">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18l6-6-6-6" /></svg>
          </button>
        </div>
      </div>
    </div>);

}

const SCREENS = [
{
  n: "01", k: "Главный дашборд", img: "Axiom_Main.png",
  cap: <><strong>Главный дашборд.</strong> Общий обзор денежного потока: ключевые метрики, тренды и AI-инсайты в одном окне.</>,
  h: "Экран для ежедневной работы + знакомство с продуктом",
  desc: [
  "Главный дашборд – это экран, который пользователи видят чаще всего. Тут собраны ключевые цифры, тренды, AI-инсайты и последние счета в одном рабочем экране, чтобы одного взгляда было достаточно для понимания того, требует ли что-нибудь внимания сегодня.",
  "Поскольку это первый экран, который видит пользователь, он должен был удерживать баланс между плотной информацией, визуальным спокойствием и понятными следующими шагами. Он также задает визуальный язык всего продукта, поэтому именно он пережил больше всего итераций – от ранних вайрфреймов до нескольких hi-fi-версий, описанных в разделе «Процесс дизайна и итерации»."],

  dec: [
  ["Карточки метрик", "по доходам, расходам, чистой прибыли и налогам плюс короткие заметки о тренде к прошлому месяцу дают быстрый срез ситуации."],
  ["Обзор денежного потока", "показывает, как вы пришли к текущему состоянию за выбранный период, и дает простой переход к полной картине."],
  ["Панель AI-инсайтов", "простым языком подсвечивает риски и возможности и включает прямые ссылки на нужные экраны."],
  ["Таблица последних счетов", "отражает текущую картину по клиентам и суммам с понятными статусами и действиями в один клик."],
  ["Темный, спокойный интерфейс", "с плотной сеткой и сдержанными цветами делает насыщенные данные читаемыми, не превращая экран в торговый терминал (а еще он круто выглядит)."]]

},
{
  n: "02", k: "Обзор денежного потока", img: "Cashflow_Overview.png",
  cap: <><strong>Обзор денежного потока.</strong> График притока и оттока с фильтрами и карточками инсайтов – что изменилось и за счет чего.</>,
  h: "Взгляд на динамику дает понимание, что за ней стоит",
  desc: [
  "На этом экране пользователь переключается с главного дашборда на картину движения денег за выбранный период – по счетам и разным периодам. В выбранном режиме как приток, так и отток раскладываются по неделям."],

  dec: [
  ["График с единой шкалой", "и легкой сеткой показывает приток и отток рядом – тренды и провалы видны сразу."],
  ["Фильтры по счету, году и кварталу/месяцу", "отвечают на вопросы типа «Каким был Q4 по основному счету?» без перехода на другие экраны."],
  ["Карточки под графиком", "переводят цифры на понятный язык: когда сезонный всплеск, где можно сэкономить и какие счета уже тянут квартал вниз."],
  ["Минимум интерфейсного шума", "вокруг графика – второстепенные действия вроде «экспорта отчета» убраны в сторону, но всегда под рукой."]]

},
{
  n: "03", k: "Счета", img: "Invoices_Overivew.png",
  cap: <><strong>Список счетов.</strong> Плотная, но понятная таблица со статусами, быстрыми действиями и карточками инсайтов для работы с длинной историей.</>,
  h: "Рабочая лошадка любого самозанятого",
  desc: [
  "Здесь Геннадий и Мин управляют входящими платежами. Экран совмещает ключевые метрики по счетам с плотной, но читаемой таблицей, так что за несколько секунд можно перейти от «Сколько денег зависло в счетах?» к «За какие взяться в первую очередь?»."],

  dec: [
  ["Карточки сверху", "дают быстрый обзор: всего выставлено, оплачено, просрочено и какая средняя задержка оплаты."],
  ["Фильтры по статусу, счету и году", "позволяют быстро сузить список без перехода на другой экран."],
  ["Аккуратная таблица счетов", "удобна для быстрого просмотра и сортировки даже длинной истории."],
  ["Действия прямо в строке таблицы", "позволяют выполнить типовые задачи в один клик без копания в меню."]]

},
{
  n: "04", k: "Детали счета", img: "invoice_details.png",
  cap: <><strong>Детали счета.</strong> Оверлей с данными клиента, разбивкой по позициям, итогами и наглядной лентой оплаты.</>,
  h: "Детали счета под рукой, без потери фокуса",
  desc: [
  "Открытие счета не должно мешать работе. Детальная карточка появляется поверх списка: можно быстро проверить данные, отправить напоминание, посмотреть историю или скачать PDF – потом закрыть ее и продолжить ровно с того места, где был пользователь."],

  dec: [
  ["Оверлей поверх списка", "оставляет пользователя в разделе счетов, а не уводит на отдельную страницу."],
  ["Блок клиента", "(контакты и адрес для выставления счета) расположен наверху для удобной быстрой сверки."],
  ["Блок с суммами", "явно разводит нетто, НДС и итог – так сложнее неправильно прочитать сумму."],
  ["Лента истории", "когда счет создан, отправлен, просмотрен и оплачен – поэтому «мы ничего не получали» будет гиблой отговоркой, если и клиент и специалист работают в AxiomLens."]]

}];


const LOGOS = [
["Axiom_White_Square.png", "01", "Диафрагма камеры плюс дорожки «платы» – попытка скрестить образ линзы с ощущением умной системы."],
["Axiom_White_Horizontal.png", "02", "Тот же знак с горизонтальным логотипом – лучше смотрится в заголовках и на белом фоне."],
["Axiom_Square_Old_Font.png", "03", "Иконка на основе графика на темном фоне: финансовый смысл читается, но выглядит немного агрессивно."],
["Axiom_Logo_Horizontal.png", "04", "Финальное направление – логотип шрифтом Electrolize сохраняет легкий техно-оттенок, палитра стала мягче."]];


const THUMBS = [
["Wireframe.png", <><strong>01 · Поток вайрфреймов.</strong> Все ключевые зоны в одном потоке – основа первого lo-fi-дашборда.</>],
["Main_dashboard.png", <><strong>02 · Lo-fi-дашборд.</strong> Грубый макет, чтобы проверить плотность и что заслуживает место наверху.</>],
["Early_Design_1.png", <><strong>03 · Первый hi-fi.</strong> Ранний проход по иерархии и зоне быстрого обзора.</>],
["Early_Design_2.png", <><strong>04 · Эксперимент с градиентом.</strong> Больше глубины и градиентов – перед откатом назад.</>],
["Early_Design_3.png", <><strong>05 · Цветовая проба.</strong> Тест статусных цветов и более спокойной, журнальной палитры.</>],
["Axiom_Main.png", <><strong>06 · Финальный дашборд.</strong> Сильные стороны каждого прохода на более четком ритме.</>]];


const COMPONENTS = [
["Cards1.png", <><strong>Карточки метрик.</strong> Для доходов, расходов, прибыли, налогов и показателей по счетам. Один шаблон: подпись, главное число, небольшой тренд или дельта и иконка.</>],
["Pills1.png", <><strong>Статусные ярлыки.</strong> Обозначают состояние оплаты и инсайтов. Одна палитра в таблицах и карточках помогает быстро запомнить значения цветов.</>],
["AI_Cards_Alpha.png", <><strong>Карточки AI-инсайтов.</strong> Более содержательные блоки: иконка, короткий заголовок, пояснение и понятное действие. Они превращают сырые данные в точечные советы.</>],
["Icons_New1.png", <><strong>Набор иконок.</strong> Используется в навигации, метриках и действиях. Толщина линий и скругления совпадают с остальным UI, поэтому иконки поддерживают иерархию.</>]];


function AxiomCase() {
  return (
    <div className="cs-view">
      {/* Hero */}
      <section className="cs-section cs-hero">
        <div className="cs-wrap">
          <div className="cs-kicker">
            <Reveal><MonoLabel>Кейс · AxiomLens</MonoLabel></Reveal>
            <Reveal as="span" className="mono-sm" style={{ color: "var(--ink-faint)" }}>· 2025 · ~2 недели · Концепт</Reveal>
          </div>
          <div className="ax-hero-grid">
            <Reveal className="ax-hero-text">
              <h1 className="cs-title">AxiomLens –<br /><span className="accent">Финансовая аналитика для малого бизнеса</span></h1>
              <p className="cs-sub">Четкий план действий из разрозненных данных</p>
              <p className="cs-lead">
                Этот авторский концепт показывает, как SaaS-дашборд может помочь малому и среднему бизнесу и
                фрилансерам видеть денежные потоки и какую пользу можно извлечь из прогнозов на базе ИИ, позволяющих
                действовать на опережение. Я сосредоточился на структурировании насыщенного данными интерфейса,
                сделал ключевые метрики считываемыми с первого взгляда и разработал флоу, которые в любой ситуации
                ощущаются спокойными и надежными.
              </p>
              <div className="ax-skip-wrap">
                <a href="#visuals-start" className="btn btn-accent ax-skip-btn" data-hot>
                  Перейти к визуалам
                  <span className="btn-arrow"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14M6 13l6 6 6-6" /></svg></span>
                </a>
              </div>
            </Reveal>
            <Reveal className="ax-hero-media">
              <ZoomImg src={AIMG + "Axiom_Main.png"} alt="Дашборд денежного потока AxiomLens – главный обзорный экран"
                caption="Главный дашборд AxiomLens собирает ключевые метрики, тренды и инсайты по денежным потокам." />
            </Reveal>
          </div>
        </div>
      </section>

      {/* Stat band */}
      <section className="cs-section gm-stats-sec">
        <div className="cs-wrap">
          <div className="gm-statband">
            <Stat to={4} label="Hi-fi-экранов готово" />
            <Stat to={10} label="Модерируемых юзабилити-сессий" />
            <Stat pre="~" to={2} suf=" нед" label="От набросков до hi-fi" />
            <Stat text={<><span className="accent">1–2</span></>} label="Клика до любой детали" />
          </div>
        </div>
      </section>

      {/* Nutshell */}
      <section className="cs-section">
        <div className="cs-wrap">
          <div className="cs-head"><h2 className="cs-h">Проект в двух словах</h2></div>
          <Reveal className="cs-meta">
            <div className="cs-meta-cell">
              <div className="cs-meta-k">Моя роль</div>
              <div className="cs-meta-v">Концепт продукта, UX/UI-дизайн, UX-исследования, паттерны взаимодействий, информационная архитектура, микротексты, основы визуальной дизайн-системы</div>
            </div>
            <div className="cs-meta-cell">
              <div className="cs-meta-k">Сроки</div>
              <div className="cs-meta-v">~2 недели вечерней работы – от первых набросков до выверенных hi-fi-экранов</div>
            </div>
            <div className="cs-meta-cell">
              <div className="cs-meta-k">Инструменты</div>
              <div className="cs-meta-v">Figma, Google Sheets &amp; Docs, Notion, ChatGPT, UX Pilot</div>
            </div>
          </Reveal>
          <Reveal className="cs-chips cs-mt-m" style={{ justifyContent: "center" }}>
            {["UX дашборда", "Насыщенный данными UI", "Исследования", "Брендинг", "Финансовый SaaS", "Базовая дизайн-система", "Микротексты (EN)"].map((c) =>
            <span className="tag" key={c}>{c}</span>
            )}
          </Reveal>
          <div className="cs-grid2 cs-mt-l">
            <Reveal>
              <h3 className="cs-h" style={{ fontSize: "1.25rem", marginBottom: ".8rem" }}>Вызовы</h3>
              <p className="cs-p">
                Фрилансеры и владельцы малого бизнеса разрываются между кучей банковских приложений, сервисов для
                выставления счетов и таблиц. Цифр вокруг много, но нет простого, наглядного ответа, что происходит
                с деньгами: где назревает кассовый разрыв и какие клиенты тормозят оплату. Типичные дашборды либо
                перегружены графиками, либо дают слишком общую картину, а ИИ-подсказки редко реализованы прозрачно
                и по-настоящему надежно.
              </p>
            </Reveal>
            <Reveal>
              <h3 className="cs-h" style={{ fontSize: "1.25rem", marginBottom: ".8rem" }}>Задача</h3>
              <p className="cs-p">
                Разработать графический концепт сервиса аналитики денежных потоков <strong>AxiomLens</strong>:
                единой платформы, которая объединяет доходы, расходы и счета и дополняет их понятными ИИ-инсайтами.
                Основной акцент на насыщенном данными интерфейсе, который считывается за секунду: с ясной логикой
                переходов между обзорным экраном, управлением счетами и детальной историей, чтобы у пользователя
                было единый обзор на всю финансовую ситуацию.
              </p>
            </Reveal>
          </div>
          <div className="cs-grid2 ax-equal cs-mt-l">
            <Reveal className="cs-panel">
              <h4>Мои основные достижения</h4>
              <PlainList items={[
              "Темный дашборд с понятной иерархией ключевых метрик и трендов",
              "Единый набор карточек (доходы, расходы, налоги и инсайты)",
              "Таблица счетов и детализированный вид (статусы, сроки оплаты и быстрые действия)",
              "Последовательная система компонентов для статусов платежей и иных состояний",
              "Тексты интерфейса с самого начала писались с заделом на локализацию"]
              } />
            </Reveal>
            <Reveal className="cs-panel cs-panel-accent">
              <h4>Результаты</h4>
              <PlainList items={[
              "Консистентный набор из 4 hi-fi-экранов, готовых к передаче в разработку или прототипированию",
              "Информационная архитектура, связывающая денежные потоки, счета и ИИ-инсайты",
              "Базовый набор дизайн-системы (типографика, сетка, карточки, бейджи, стили)",
              "Кейс о постановке задачи, ключевых дизайн-решениях и бизнес-ценности продукта"]
              } />
            </Reveal>
          </div>
        </div>
      </section>

      {/* Problem & Context */}
      <section className="cs-section">
        <div className="cs-wrap">
          <div className="cs-head"><h3 className="cs-h">Проблема и контекст</h3></div>
          <div className="cs-grid2 ax-equal">
            <Reveal>
              <h4 className="gm-subh" style={{ marginTop: 0 }}>Отправная точка</h4>
              <p className="cs-p">
                Вместо того чтобы создавать очередное абстрактное «финансовое приложение», я сфокусировался на
                весьма конкретном сценарии: фаундер или фрилансер открывает дашборд перед началом работы, чтобы быстро
                оценить ситуацию. У него нет времени на глубокий разбор данных – нужно просто за пару секунд понять,
                есть ли что-то, что требует внимания прямо сейчас.
              </p>
              <p className="cs-p">
                В реальности все данные раскиданы по разным сервисам и живут на разных временных шкалах: ежедневные
                движения по счету, ежемесячные подписки, нерегулярные счета и налоги, которые нужно платить
                ежемесячно, ежеквартально или ежегодно. AxiomLens это своего рода эксперимент: как собрать все эти
                временные линии в один рабочий экран, чтобы четко видеть, что уже произошло, что запланировано и что
                может превратиться в проблему, если ничего не менять.
              </p>
              <div className="ax-success ax-success-compact cs-mt-m">
                <div className="ax-sub5" style={{ marginBottom: ".7rem" }}>Критерии успеха · главный экран отвечает</div>
                <div className="ax-questions ax-questions-tight">
                  <p className="ax-q">«Как <span className="accent">сейчас</span> обстоят дела?»</p>
                  <p className="ax-q">«На что нужно <span className="accent">обратить внимание?</span>»</p>
                  <p className="ax-q">«Есть ли на горизонте <span className="accent">риски?</span>»</p>
                </div>
                <p className="ax-success-note">
                  Риски – кассовые разрывы, просроченные счета, крупные предстоящие расходы – сгруппированы в блоках
                  и не спрятаны за фильтрами. Даже самые плотные таблицы и графики остаются легкими для восприятия
                  за счет расположения элементов, цветовой палитры и узнаваемых паттернов.
                </p>
              </div>
            </Reveal>
            <Reveal className="cs-panel ax-wire-panel">
              <h4>Ранняя логика в виде вайрфрейма</h4>
              <p className="cs-p">
                Прежде чем браться за lo-fi-макеты и визуал, я сначала разобрал структуру продукта на уровне экранов.
                Первый вайрфрейм стал картой AxiomLens: какие модули нужны, как устроена навигация и где проходят
                границы сценариев (включая зоны, которых нет на четырех финальных hi-fi-экранах).
              </p>
              <ZoomImg src={AIMG + "Wireframe.png"} alt="Вайрфрейм первой итерации с планируемыми модулями и флоу"
              caption="Карта вайрфреймов первой итерации, на основе которой позже был собран первый lo-fi-прототип." className="ax-wire-fig" />
            </Reveal>
          </div>

          <div className="cs-grid2 cs-mt-l ax-equal">
            <Reveal className="cs-panel">
              <h4>Основные вызовы</h4>
              <PlainList items={[
              "Свести в одну систему данные, которые живут в разных временах и плоскостях.",
              "Создать визуальные сигналы для просрочек, которые бы добавляли срочности, но не вызывали бы панику.",
              "Оформить ИИ-инсайты в короткие, четкие и легко перевариваемые карточки.",
              "Сделать интерфейс понятным людям без бухгалтерского бэкграунда, не жертвуя уровнем детализации."]
              } />
            </Reveal>
            <Reveal className="cs-panel">
              <h4>Ограничения концепта</h4>
              <KL items={[
              ["В MVP поддерживается только один пользователь:", "никаких ролей, разграничения прав и инструментов совместной работы на этом этапе."],
              ["Фокус макета на денежных потоках и счетах;", "это не полноценный бухучет и не сервис подготовки налоговой отчетности."],
              ["Импорт данных из банков и иных сервисов имплицирован;", "концепт сосредоточен на отображении информации и поддержке принятия решений, а не на интеграциях (разработчикам предстоит много работы)."]]
              } />
            </Reveal>
          </div>
        </div>
      </section>

      {/* Users & Goals */}
      <section className="cs-section">
        <div className="cs-wrap">
          <div className="cs-head"><h3 className="cs-h">Пользователи и задачи</h3></div>
          <p className="cs-p">
            Я задумывал AxiomLens не только как универсальный центр управления финансами, но и как инструмент,
            который поможет улучшить финансовую ситуацию. Система использует AI-аналитику и понятные инсайты, чтобы
            подсветить закономерности и события, незаметные человеческому глазу, и помочь управлять денежным потоком
            более осознанно и уверенно.
          </p>

          <div className="ax-ug cs-mt-l">
            <div className="ax-ug-personas">
              <Persona avatar={AIMG + "guy_1.jfif"} name="Геннадий, 33" role="Владелец небольшой креативной студии" tag="Занятой владелец"
              blurb="Ведет бизнес с парой сотрудников и подрядчиков. Между созвонами, переписками и проектами у него есть всего несколько минут на проверку финансов и принятие решений."
              needs={[
              "Закрыты ли ближайшие 2–4 недели (аренда, зарплаты, базовые расходы).",
              "Какие счета просрочены, на какую сумму и как это влияет на текущий месяц.",
              "Быстрый экран «сейчас + перспектива» без еженедельного перелопачивания таблиц."]
              }
              pains={[
              "Данные раскиданы по банкам, таблицам и иным сервисам.",
              "Вечера уходят на сверку цифр вместо бизнеса."]
              } />
              <Persona avatar={AIMG + "girl_1.jfif"} name="Мин, 29" role="Консультант с несколькими постоянными клиентами" tag="Консультант-фрилансер"
              blurb="Работает с несколькими клиентами на бессрочных и проектных договорах. У всех разные условия оплаты, поэтому доход нестабильный и его легко переоценить."
              needs={[
              "Список регулярных счетов и «дыры» в будущих поступлениях.",
              "Разбивка по клиентам и проектам – чтобы понять, кто приносит львиную долю выручки.",
              "Подсказки выставить счет или напомнить клиенту до неловких задержек."]
              }
              pains={[
              "Нет единого места, где видны будущие поступления и кэшфлоу целиком.",
              "Слабые месяцы становятся сюрпризом: проблемы заметны только когда на счете уже мало денег.",
              "Мысли «а отправила ли я тот счет?» по ночам, приводящие к частой фоновой тревоге."]
              } />
            </div>

            <div className="ax-ug-goals">
              <Reveal className="cs-panel">
                <h4>Как выглядит успех</h4>
                <KL items={[
                ["Быстрая проверка пульса.", "Геннадий или Мин открывают дашборд и понимают, что ожидать в ближайшие недели."],
                ["Прозрачный горизонт.", "Будущие просадки и большие траты видно заранее – есть время среагировать."],
                ["Осмысленные сигналы.", "Вместе с каждым предупреждением (просроченные счета, прогнозируемый доход ниже нормы) идут 1–2 предложения действий."],
                ["Низкая когнитивная нагрузка.", "Деталей хватает для решений, но они сгруппированы так, что экран остается спокойным, чистым и под контролем."]]
                } />
              </Reveal>
              <Reveal className="cs-panel">
                <h4>Цели дашборда и дизайна</h4>
                <div className="ax-ug-2col">
                  <div>
                    <div className="ax-sub5">Цели пользователей</div>
                    <PlainList items={[
                    "Видеть текущую ликвидность и 30–45 ближайших дней в одном экране.",
                    "Замечать просроченные и проблемные счета без копания в почте и таблицах.",
                    "Понимать, что двигает тренд вверх или вниз – конкретные клиенты, месяцы или счета.",
                    "Быстрые решения: инвестировать, отложить или поторопить оплату.",
                    "Экспорт обзора для бухгалтера, сооснователя или партнеров."]
                    } />
                  </div>
                  <div>
                    <div className="ax-sub5">Принципы продукта и UX</div>
                    <PlainList items={[
                    "Превратить разрозненные финансовые данные в один надежный рабочий экран, а не стену из графиков.",
                    "Подсвечивать риски чистой, легко считываемой визуализацией.",
                    "Держать навигацию интуитивной: от дашборда к деталям за 1–2 клика.",
                    "Проработать флоу, которые позже масштабируются на налоги, подписки и более глубокие AI-инсайты без переделки ядра."]
                    } />
                  </div>
                </div>
              </Reveal>
              <Reveal className="cs-panel">
                <h4>Ограничения и «не-цели»</h4>
                <div className="ax-twocol">
                  <KL items={[
                  ["Вне рамок:", "полноценный бухучет и система ролей."],
                  ["Интеграции:", "подразумевается, что связь с банком и почтой уже есть."],
                  ["Актуальность:", "показываем статус и время обновления без «ложной точности»."]]
                  } />
                  <KL items={[
                  ["Защита от перегруза:", "вместо россыпи графиков – короткие текстовые сводки."],
                  ["Фокус:", "UI/UX дашборда для одного пользователя в MVP."]]
                  } />
                </div>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      {/* Key Screens */}
      <section className="cs-section" id="visuals-start">
        <span className="ax-anchor" aria-hidden="true"></span>
        <div className="cs-wrap">
          <div className="cs-head"><h3 className="cs-h">Ключевые экраны</h3></div>
          <p className="cs-p" style={{ marginBottom: "2.4rem" }}>
            Здесь представлен ключевой сценарий работы в AxiomLens: от главного дашборда к детальному обзору
            денежного потока и далее к управлению счетами. Вместе эти экраны показывают, как плотные финансовые
            данные складываются в простой цикл – понять ситуацию, заметить проблему, открыть детали, начать действовать.
          </p>
          <div className="ax-screens">
            {SCREENS.map((s, i) =>
            <div className={"ax-screen" + (i % 2 ? " rev" : "")} key={s.n}>
                <Reveal className="ax-screen-text">
                  <div className="ax-index">
                    <span className="ax-index-n">{s.n}</span>
                    <span className="ax-index-k">{s.k}</span>
                  </div>
                  <h4 className="ax-screen-h">{s.h}</h4>
                  {s.desc.map((p, j) => <p className="cs-p" key={j}>{p}</p>)}
                  <div className="ax-sub5 ax-dec-label">Ключевые решения</div>
                  <KL items={s.dec} />
                </Reveal>
                <Reveal className="ax-screen-media">
                  <ZoomImg src={AIMG + s.img} alt={s.k + " – экран"} caption={s.cap} />
                </Reveal>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Logo & Branding */}
      <section className="cs-section">
        <div className="cs-wrap">
          <div className="cs-head"><h3 className="cs-h">Логотип и айдентика</h3></div>
          <p className="cs-p">
            Для финансового продукта доверие часто начинается с логотипа. Внятная айдентика сглаживает многие
            шероховатости ранних версий, а неуклюжая – легко делает даже неплохую концепцию любительской еще до
            первого клика. Для AxiomLens нужно было решение, которое ощущается аналитичным и современным, намекает
            на «умную» помощь ИИ, но при этом в первую очередь воспринимается как финансовый инструмент. Само
            название уже задает направление: <strong>«Axiom»</strong> – как опора на надежную истину,
            <strong>«Lens»</strong> – как способ смотреть на данные под увеличением. Эскизы ниже показывают путь от
            довольно общего знака в духе «AI + диафрагма» к более приземленному символу на основе графиков, который
            лучше отражает суть продукта (хотя до идеала ему еще далеко).
          </p>
          <div className="cs-grid2 ax-equal cs-mt-l">
            <Reveal className="cs-panel">
              <h4>Что стоит за брендом</h4>
              <KL items={[
              ["Финансовая ясность.", "Достаточно серьезный, чтобы доверить ему финансы, но без образа спекулятивного трейдинга или криптоплощадки."],
              ["Умный, но не Sci-Fi.", "Легкий намек на ИИ и автоматизацию, без превращения логотипа в иконку очередного гаджета."],
              ["Устойчивый и приземленный.", "Четкая геометрия и сетка в основе, чтобы считывались структура, надежность и долгая жизнь продукта."]]
              } />
            </Reveal>
            <Reveal className="cs-panel">
              <h4>Логика наименования</h4>
              <KL items={[
              ["Axiom", "– опорное утверждение, надежная база для решений."],
              ["Lens", "– фокус и ясность, прямая метафора того, что мы поможем смотреть вперед."],
              ["AxiomLens", "считывается как «надежные цифры, которые видно ясно»."]]
              } />
            </Reveal>
          </div>
          <Reveal className="cs-mt-l"><h4 className="gm-subh" style={{ marginTop: 0 }}>Эволюция логотипа</h4></Reveal>
          <div className="ax-logos">
            {LOGOS.map(([img, n, desc]) =>
            <Reveal className="ax-logo-card" key={img}>
                <ZoomImg src={AIMG + img} alt={"Логотип AxiomLens, итерация " + n} className="ax-logo-fig" />
                <p className="ax-logo-desc"><span className="ax-logo-n">{n}</span>{desc}</p>
              </Reveal>
            )}
          </div>
        </div>
      </section>

      {/* Design Process & Iterations */}
      <section className="cs-section">
        <div className="cs-wrap">
          <div className="cs-head"><h3 className="cs-h">Процесс дизайна и итерации</h3></div>
          <p className="cs-p">
            К AxiomLens я подошел так же, как к живому продукту: сначала продумал пользовательские сценарии и структуру
            информации, потом сделал серию lo-fi-эскизов и более сфокусированных hi-fi-экранов, а затем прогнал их
            через юзабилити-тесты. Только после этого имело смысл фиксировать финальную визуальную систему. Задача была
            сначала проверить, что логика работает: какие экраны вообще нужны, что каждый из них показывает и насколько
            легко люди проходят весь путь – и уже потом доводить до ума баланс между данными и интерфейсом, иерархию и цвет.
          </p>
          <ol className="ax-steps cs-mt-l">
            {[
            ["Карта сценариев и логика вайрфреймов.", "Сначала я свел ключевые зоны – денежный поток, счета, клиенты, расходы, налоги, инсайты, настройки и мобильную версию – в один общий поток вайрфреймов. Это помогло зафиксировать, какие экраны вообще нужны, как они связаны и на какие вопросы отвечает каждый."],
            ["Lo-fi макет с помощью AI.", "Опираясь на карту сценариев как на бриф, я собрал грубый lo-fi вариант главного дашборда, чтобы проверить плотность информации: какие метрики заслуживают место в верхней части экрана, что можно отправить на второй план и сколько контента вообще поместится на один экран, не превращаясь в кашу."],
            ["Hi-fi итерации и работа с иерархией.", "На этапе hi-fi я перепробовал несколько вариантов расстановки акцентов между быстрым обзором, блоком счетов и графиками. В одних макетах добавлял больше градиентов и глубины, в других – делал подачу более плоской и почти журнальной, чтобы продукт казался спокойным, но при этом оставался премиальным инструментом."],
            ["Юзабилити-тесты и обратная связь.", "Я провел десять удаленных сессий с немецкими фрилансерами, давая им поработать с интерактивным прототипом. Мне было важно увидеть, насколько естественно им даются ключевые сценарии и где появляются непонятные места, тупики в навигации или перегрузка информацией – еще до того, как фиксировать финальное направление. По их комментариям я поменял расположение AI-инсайтов, усилил контраст статусов и смягчил палитру."],
            ["Переход к финальному макету.", "Итоговый дашборд собирает сильные стороны прошлых версий: более наглядный блок со счетами, информативную сводку наверху, последовательные роли цвета и более живой ритм между карточками, графиками и таблицами."]].
            map(([b, t], i) =>
            <li className="ax-step" key={i}>
                <span className="ax-step-n" aria-hidden="true">{String(i + 1).padStart(2, "0")}</span>
                <span className="ax-step-t"><strong>{b}</strong> {t}</span>
              </li>
            )}
          </ol>
          <Reveal className="cs-mt-l"><h4 className="gm-subh" style={{ marginTop: 0 }}>От карты сценариев к финальному дашборду</h4></Reveal>
          <Carousel items={THUMBS} />
        </div>
      </section>

      {/* Design System Foundations */}
      <section className="cs-section">
        <div className="cs-wrap">
          <div className="cs-head"><h3 className="cs-h">Основы дизайн-системы</h3></div>
          <p className="cs-p">
            На довольно ранних этапах я собрал небольшую дизайн-систему, чтобы дашборд по мере развития оставался
            плотным по данным, но читабельным. В центре внимания были типографика, которая держится рядом с цифрами,
            спокойная темная тема и простые паттерны, которые легко перенести на новые экраны.
          </p>
          <div className="ax-dsys cs-mt-l">
            <Reveal className="cs-panel">
              <h4>Типографика</h4>
              <KL items={[
              ["Читается под нагрузкой.", "Кегли выдерживают соседство с плотными таблицами и графиками."],
              ["Двухуровневая иерархия.", "Заголовки ведут взгляд, подписи и подсказки не отвлекают."],
              ["Моноширинные акценты.", "Точечно – для выровненных сумм и «кодовых» деталей."]]
              } />
            </Reveal>
            <Reveal className="cs-panel">
              <h4>Цвет и поверхности</h4>
              <KL items={[
              ["Темный фон.", "Современно, удобно для долгой работы и помогает линиям графиков выделяться. Светлая тема тоже в планах!"],
              ["Мягкие оттенки синего.", "Акценты выглядят аналитично и спокойно, избегая крикливый «growth»-хайп."],
              ["Рамки вместо теней.", "Минимальный объем, чтобы внимание оставалось на данных."]]
              } />
            </Reveal>
            <Reveal className="cs-panel">
              <h4>Отступы и ритм</h4>
              <KL items={[
              ["Единый масштаб.", "Общая система отступов и размеров в секциях и компонентах делает продукт цельным."],
              ["Структура вокруг карточек.", "Плотные данные разбиты на понятные, «дышащие» модули."],
              ["Чистые края.", "Сильные внешние отступы не дают дашборду захламиться и сохраняют ощущение продуманной компоновки."]]
              } />
            </Reveal>
          </div>
          <Reveal className="cs-mt-l"><h4 className="gm-subh" style={{ marginTop: 0 }}>Базовые компоненты</h4></Reveal>
          <p className="cs-p" style={{ marginBottom: "1.6rem" }}>
            Четыре основных семейства компонентов делают здесь большую часть работы. Их повторное использование от
            экрана к экрану помогает продукту оставаться цельным и узнаваемым даже без огромной дизайн-системы.
          </p>
          <div className="ax-comp">
            {COMPONENTS.map(([img, cap], i) =>
            <Reveal className="ax-comp-card" key={i}>
                <ZoomImg src={AIMG + img} alt={typeof cap === "string" ? cap : "Компонент"} caption={cap} className="ax-comp-fig" />
              </Reveal>
            )}
          </div>
        </div>
      </section>

      {/* Next Steps */}
      <section className="cs-section">
        <div className="cs-wrap">
          <div className="cs-head"><h3 className="cs-h">Следующие шаги</h3></div>
          <p className="cs-p">
            AxiomLens пока остается концептом. Чтобы превратить его в рабочий инструмент, понадобилась бы полноценная
            команда: разработчики, специалисты по данным и AI, эксперты по безопасности и комплаенсу, налоговые юристы
            и нормальная служба поддержки. Тем не менее, вопрос «что дальше?» предлагает полезное упражнение. Если
            развивать AxiomLens далее, я бы сосредоточился на следующем:
          </p>
          <Reveal className="ax-next cs-mt-l">
            {[
            ["Светлая и темная темы.", "Темный режим – вариант по умолчанию, но будет создана светлая тема и автопереключение по системным настройкам. Современные браузеры уже поддерживают это, поэтому макет и цвета должны одинаково хорошо работать в обоих режимах."],
            ["Работа с разными валютами и НДС.", "Важно для предпринимателей, которые работают с разными странами: один экран, где суммы, ставки НДС и налоговые правила приводятся к общей картине по всем юрисдикциям."],
            ["Командный режим.", "Роли и права доступа для ситуаций, когда за денежным потоком следит не один человек – основатели, ассистенты или внешние бухгалтеры в общем рабочем пространстве."],
            ["Более глубокие интеграции с банками.", "Сначала – простые встроенные импорты банковских выписок и счетов, потом – прямые интеграции с ключевыми EU-провайдерами (Stripe, PayPal, SEPA, локальные банки), чтобы пользователям не пришлось сверять цифры вручную."],
            ["Разные типы аккаунтов.", "Полноценный режим для владельцев бизнеса и более легкий – для клиентов: общение, просмотр и оплата счетов."],
            ["Налоговый раздел.", "Отдельная зона, где видно, какие налоги применяются, по имеющимся данным считается примерная ставка и показываются ключевые дедлайны и напоминания по каждой стране или региону."]].
            map(([h, t], i) =>
            <div className="ax-next-cell" key={i}>
                <div className="ax-next-h">{h}</div>
                <div className="ax-next-p">{t}</div>
              </div>
            )}
          </Reveal>
        </div>
      </section>

      {/* Learnings */}
      <section className="cs-section">
        <div className="cs-prose">
          <div className="cs-head" style={{ justifyContent: "center" }}><h3 className="cs-h">Уроки</h3></div>
          <p className="cs-p" style={{ textAlign: "center" }}>
            В своей работе над AxiomLens я ставил целью не просто «нарисовать красивый дашборд», а разобраться, что
            на самом деле делает финансовый инструмент удобным и внушающим доверие. Вот несколько вещей, которые мне
            особенно запомнились:
          </p>
          <ul className="cs-steps cs-mt-m">
            {[
            ["Сначала вопросы, потом экраны.", "В какой-то момент я перестал думать «какие еще фичи еще добавить?» и начал спрашивать себя: что юзеру важнее всего понять за первые 30 секунд? Лишний UI сам отвалился. Так стало гораздо проще решить, что должно быть в верхней строке, а что можно спокойно увести в детали."],
            ["Польза от AI зависит от места в интерфейсе.", "С самого начала было понятно, что инсайтам нужен свой отдельный блок, но в продукте с таким количеством данных было сложно найти им правильное место. Юзабилити-сессии помогли прийти к макету, где люди действительно замечают инсайты, и где они не создают помеху."],
            ["Плотность данных обходится дороже, чем кажется.", "На бумаге казалось, что в главный экран влезет «еще один график». В реальности каждый дополнительный блок только усложнял чтение реальных цифр. В итоге я выкинул несколько идей и еще раз убедился, что лучше меньше, но продуманнее, чем стена из «полезных» виджетов."],
            ["Бренд и продукт должны говорить об одном и том же.", "Ранний логотип «диафрагма + платы» выглядел остроумно, но считывался как абстрактный AI-сервис. Переход к более явно финансовому символу сразу выровнял ожидания: еще до текста людям было понятно, с каким типом продукта они имеют дело."],
            ["Даже концепт показывает уровни сложности.", "Когда начинаешь набрасывать «следующие шаги» – налоговую логику, работу с разными валютами, интеграции, роли – быстро понимаешь масштаб. Даже небольшой концепт опирается на тонну разработки, комплаенса и работы с данными. Это хорошее напоминание о том, какая глубина прячется за «простыми» финансовыми продуктами."]].
            map(([b, t], i) => <li className="cs-li" key={i}><strong>{b}</strong> {t}</li>)}
          </ul>
        </div>
      </section>
    </div>);

}

Object.assign(window, { AxiomCase });