Integrations Orbit

"use client";

import type { ReactNode } from "react";
import { useEffect, useRef } from "react";

export interface Integration {
  /** Название сервиса. */
  name: string;
  /** Монограмма в кружке (формат «Fg», 1–2 знака). Не задана — берётся первая буква названия. */
  mark?: string;
  /** Что именно связывает (формат «вебхуки»). */
  note?: string;
  href?: string;
}

export interface IntegrationsOrbitProps {
  eyebrow?: string;
  title?: string;
  sub?: string;
  /** Центральный узел — ваш продукт. */
  hubMark?: string;
  hubLabel?: string;
  items?: Integration[];
  foot?: string;
  /**
   * Сокет фона: любой эффект с `mount.role: "background"`, например `<AuroraField />`.
   * Занят — секция снимает собственную заливку, чтобы не спорить за слой.
   */
  background?: ReactNode;
  /** Какой текст читается поверх фона; приходит из `mount.tone` подставленной записи. */
  tone?: "dark" | "light";
  /** Плотность скрима между фоном и текстом (формат «0.5»); 0 — выключить. */
  scrim?: number;
}

const ITEMS: Integration[] = [
  { name: "Почта", mark: "Пч", note: "письма и ответы" },
  { name: "Календарь", mark: "Кл", note: "встречи в оба конца" },
  { name: "Хранилище", mark: "Хр", note: "файлы проектов" },
  { name: "Мессенджер", mark: "Мс", note: "уведомления в канал" },
  { name: "Трекер", mark: "Тр", note: "задачи и статусы" },
  { name: "Платежи", mark: "Пл", note: "счета и возвраты" },
  { name: "Аналитика", mark: "Ан", note: "события и воронки" },
  { name: "Склад", mark: "Ск", note: "остатки по API" },
];

/**
 * Интеграции кольцом вокруг центрального узла: восемь сервисов на орбите, спицы к центру,
 * кольцо медленно поворачивается, подписи остаются в горизонте.
 *
 * Раскладка по кругу посчитана СРЕДСТВАМИ CSS — `cos()` и `sin()` от угла элемента, — а не
 * в JavaScript. Наивный вариант (посчитать координаты скриптом и проставить их инлайном)
 * стоит пересчёта на каждый ресайз: чтение размеров контейнера, цикл по узлам, запись стилей.
 * Здесь радиус задан ОДНОЙ переменной в процентах от квадратного кольца, поэтому изменение
 * ширины — это обычная перерисовка, и на телефоне композиция ужимается без единого кадра
 * работы скрипта. Меняется число сервисов — меняется только `--n`.
 *
 * Кольцо крутит контейнер (`transform`, композитор), а каждый узел крутится ВСТРЕЧНО с той же
 * длительностью: без этого монограммы и подписи через полкруга оказываются вверх ногами.
 * Наведение и фокус ставят обе анимации на паузу — по движущейся мишени не попасть ни мышью,
 * ни глазом, и это не косметика, а условие того, что по ссылкам вообще можно кликнуть.
 */
export function IntegrationsOrbit({
  eyebrow = "интеграции",
  title = "Встаёт в тот стек, который у вас уже есть",
  sub = "Ни одного экспорта в CSV: данные ходят в обе стороны сами, по расписанию или по событию.",
  hubMark = "M",
  hubLabel = "Motiva",
  items = ITEMS,
  foot = "Нужного сервиса нет в списке — открытый REST и вебхуки закрывают остальное.",
  background,
  tone,
  scrim = 0.5,
}: IntegrationsOrbitProps) {
  const ring = useRef<HTMLDivElement>(null);

  /**
   * Кольцо ДОВОРАЧИВАЕТСЯ к курсору: пока мышь ходит по секции, плоскость орбиты слегка
   * наклоняется в её сторону, и композиция перестаёт быть картинкой, которая крутится сама
   * по себе. Наклон маленький (7°) намеренно: на большем узлы начинают расходиться по глубине
   * и подписи теряют читаемость — это уже трюк ради трюка.
   *
   * Правила те же, что у любого курсорного эффекта в каталоге: обработчик пишет ТОЛЬКО
   * координату, вся математика в кадре, значения догоняют цель интерполяцией (иначе кольцо
   * дёргается за каждым событием указателя), а цикл засыпает, когда догнал. Уводишь мышь —
   * кольцо плавно возвращается в исходную плоскость и цикл снова засыпает.
   */
  useEffect(() => {
    const el = ring.current;
    if (!el) return;
    const fine = window.matchMedia("(hover: hover) and (pointer: fine)").matches;
    const frozen =
      document.documentElement.hasAttribute("data-shot") ||
      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (!fine || frozen) return;

    const host = el.closest<HTMLElement>(".ino") ?? el;
    let tx = 0;
    let ty = 0;
    let cx = 0;
    let cy = 0;
    let clientX = 0;
    let clientY = 0;
    let raf = 0;

    const frame = () => {
      raf = 0;
      const box = el.getBoundingClientRect(); // одно чтение на кадр
      if (clientX || clientY) {
        tx = Math.max(-1, Math.min(1, (clientX - (box.left + box.width / 2)) / (box.width / 2)));
        ty = Math.max(-1, Math.min(1, (clientY - (box.top + box.height / 2)) / (box.height / 2)));
      }
      cx += (tx - cx) * 0.12;
      cy += (ty - cy) * 0.12;
      el.style.setProperty("--tx", cx.toFixed(3));
      el.style.setProperty("--ty", cy.toFixed(3));
      if (Math.abs(tx - cx) > 0.002 || Math.abs(ty - cy) > 0.002) raf = requestAnimationFrame(frame);
    };
    const wake = () => {
      if (!raf) raf = requestAnimationFrame(frame);
    };
    const onMove = (e: PointerEvent) => {
      clientX = e.clientX;
      clientY = e.clientY;
      wake();
    };
    const onLeave = () => {
      tx = 0;
      ty = 0;
      clientX = 0;
      clientY = 0;
      wake();
    };
    host.addEventListener("pointermove", onMove);
    host.addEventListener("pointerleave", onLeave);
    return () => {
      host.removeEventListener("pointermove", onMove);
      host.removeEventListener("pointerleave", onLeave);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  return (
    <section
      className="ino"
      data-slot-bg={background ? "" : undefined}
      data-tone={tone}
      style={{ textAlign: "start", ["--ino-scrim" as string]: scrim }}
    >
      <style>{`
        .ino { position: relative; isolation: isolate; width: 100%;
          padding-block: var(--ds-section-y, var(--ds-8, 80px));
          background: var(--ds-bg, oklch(0.14 0.02 275));
          color: var(--ds-fg, oklch(0.95 0.01 265));
          font-family: var(--ds-font, system-ui, sans-serif); }
        .ino-in { max-width: var(--ds-container, 1120px); margin-inline: auto;
          padding-inline: var(--ds-gutter, clamp(18px, 5vw, 54px));
          container-type: inline-size; }

        /* две колонки, пока текст и кольцо помещаются рядом; узко — одна.
           Порог задан контейнером, а не вьюпортом: секцию можно положить в колонку
           конструктора, и она перестроится по СВОЕЙ ширине, а не по ширине окна. */
        .ino-grid { display: grid; gap: var(--ds-7, 54px); align-items: center; }
        @container (min-width: 760px) {
          .ino-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
            gap: var(--ds-8, 80px); }
        }

        .ino-eyebrow { margin: 0 0 var(--ds-3, 12px); text-transform: uppercase;
          font-family: var(--ds-font-mono, ui-monospace, monospace);
          font-size: var(--ds-text-xs, 0.75rem); letter-spacing: 0.14em;
          color: var(--ds-accent, oklch(0.78 0.16 300)); }
        .ino-h { margin: 0; max-width: 18ch; text-wrap: balance;
          font-size: var(--ds-text-xl, 2rem); font-weight: 780; line-height: 1.1;
          letter-spacing: var(--ds-tracking-tight, -0.03em); }
        .ino-sub { margin: var(--ds-3, 12px) 0 0; max-width: 46ch;
          font-size: var(--ds-text-md, 1rem); line-height: var(--ds-leading-body, 1.55);
          color: var(--ds-muted, oklch(0.72 0.02 265)); }
        .ino-foot { margin: var(--ds-5, 24px) 0 0; max-width: 46ch;
          font-family: var(--ds-font-mono, ui-monospace, monospace);
          font-size: var(--ds-text-xs, 0.75rem); line-height: 1.6;
          color: var(--ds-muted, oklch(0.72 0.02 265)); }

        /* КОЛЬЦО. Квадрат: проценты в left/top меряются от ширины и высоты, и у квадрата
           это одна и та же величина — значит радиус можно задать одним числом. */
        .ino-ring { position: relative; width: min(100%, 440px); aspect-ratio: 1;
          margin-inline: auto; --r: 37%; --tx: 0; --ty: 0;
          /* Наклон плоскости орбиты к курсору. Только transform — раскладка узлов
             (проценты от cos/sin) при этом не пересчитывается ни разу. */
          transform: perspective(900px)
            rotateX(calc(var(--ty, 0) * -7deg)) rotateY(calc(var(--tx, 0) * 7deg)); }
        .ino-list { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none;
          animation: ino-spin 84s linear infinite; }
        .ino-item { position: absolute; inset: 0;
          --a: calc(var(--i) / var(--n) * 1turn - 90deg); }

        /* спица: линия от центра наружу, повёрнутая на угол узла.
           Прозрачная у центра — иначе она въезжает под ступицу и пачкает её кромку. */
        .ino-spoke { position: absolute; left: 50%; top: 50%; margin-top: -1px;
          width: var(--r); height: 2px; transform-origin: 0 50%; rotate: var(--a);
          border-radius: 2px; opacity: 0.5;
          background: linear-gradient(90deg,
            transparent 0 46%, var(--ds-accent-ring, oklch(0.72 0.16 300 / 0.35)) 100%);
          transition: opacity var(--ds-base, 0.32s) var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); }

        /* ВАЖНО: рамка узла — это ровно кружок, без подписи. Пока подпись лежала в потоке,
           translate: -50% центрировал пару «кружок + подпись», и центр кружка уезжал вверх
           на половину подписи: замер дал радиусы 151.8…173.8 вместо одного числа, то есть
           монограммы стояли не на окружности, а на смещённой. Подпись — абсолютная. */
        .ino-node { position: absolute;
          left: calc(50% + cos(var(--a)) * var(--r));
          top: calc(50% + sin(var(--a)) * var(--r));
          translate: -50% -50%;
          animation: ino-spin 84s linear infinite reverse;
          width: clamp(46px, 13cqw, 62px); aspect-ratio: 1;
          text-decoration: none; color: inherit; }
        .ino-mark { display: grid; place-items: center; width: 100%; height: 100%;
          border-radius: var(--ds-radius-pill, 999px);
          background: var(--ds-surface, oklch(0.18 0.02 275));
          border: 1px solid var(--ds-border, oklch(0.3 0.02 275));
          font-family: var(--ds-font-mono, ui-monospace, monospace);
          font-size: var(--ds-text-sm, 0.86rem); font-weight: 600;
          color: var(--ds-fg, oklch(0.95 0.01 265));
          transition: border-color var(--ds-base, 0.32s) var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
                      color var(--ds-base, 0.32s) var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
                      scale var(--ds-base, 0.32s) var(--ds-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)); }
        .ino-name { position: absolute; top: calc(100% + 6px); left: 50%; translate: -50% 0;
          font-family: var(--ds-font-mono, ui-monospace, monospace);
          font-size: 0.68rem; letter-spacing: 0.02em; white-space: nowrap;
          color: var(--ds-muted, oklch(0.72 0.02 265)); }

        .ino-item:has(:hover, :focus-visible) .ino-spoke { opacity: 1; }
        .ino-node:is(:hover, :focus-visible) .ino-mark { scale: 1.08;
          color: var(--ds-accent, oklch(0.78 0.16 300));
          border-color: var(--ds-accent-ring, oklch(0.72 0.16 300 / 0.35)); }
        .ino-node:is(:hover, :focus-visible) .ino-name { color: var(--ds-fg, oklch(0.95 0.01 265)); }
        .ino-node:focus-visible { outline: none; }

        /* ступица: она же центр раскладки, поэтому размер задан в процентах кольца */
        .ino-hub { position: absolute; inset: 0; margin: auto;
          width: 34%; aspect-ratio: 1; display: grid; place-items: center; gap: 2px;
          border-radius: var(--ds-radius-pill, 999px);
          background: var(--ds-surface-2, oklch(0.21 0.02 275));
          border: 1px solid var(--ds-accent-ring, oklch(0.72 0.16 300 / 0.35));
          box-shadow: 0 0 0 10px var(--ds-accent-soft, oklch(0.72 0.16 300 / 0.1)); }
        .ino-hub-mark { font-size: clamp(1.3rem, 6cqw, 2rem); font-weight: 800;
          line-height: 1; letter-spacing: -0.04em;
          color: var(--ds-accent, oklch(0.78 0.16 300)); }
        .ino-hub-label { font-family: var(--ds-font-mono, ui-monospace, monospace);
          font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
          color: var(--ds-muted, oklch(0.72 0.02 265)); }

        /* по движущейся мишени не попасть — наведение и фокус останавливают обе анимации */
        .ino-ring:is(:hover, :focus-within) :is(.ino-list, .ino-node) { animation-play-state: paused; }

        @keyframes ino-spin { to { rotate: 360deg; } }

        /* СОКЕТ ФОНА. Слой на z-index -1 внутри своего stacking context: поверх заливки
           секции, но под содержимым — вёрстке кольца знать о нём не нужно. */
        .ino-bg { position: absolute; inset: 0; z-index: -1; }
        .ino[data-slot-bg] { background: transparent; }
        .ino-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
        .ino[data-tone="dark"] { --ds-fg: oklch(0.96 0.01 265); --ds-muted: oklch(0.84 0.02 265);
          --ds-border: oklch(0.98 0.01 265 / 0.16); color: var(--ds-fg); }
        .ino[data-tone="dark"] .ino-bg::after {
          background: oklch(0.09 0.02 265 / calc(var(--ino-scrim, 0.5) * 0.9)); }
        .ino[data-tone="light"] { --ds-fg: oklch(0.2 0.02 265); --ds-muted: oklch(0.42 0.02 265);
          --ds-border: oklch(0.2 0.02 265 / 0.14); color: var(--ds-fg); }
        .ino[data-tone="light"] .ino-bg::after {
          background: oklch(0.99 0 0 / calc(var(--ino-scrim, 0.5) * 0.9)); }

        @media (prefers-reduced-motion: reduce) {
          .ino-list, .ino-node { animation: none; }
          .ino-mark, .ino-spoke { transition: none; }
        }
      `}</style>

      {background && <div className="ino-bg">{background}</div>}

      <div className="ino-in">
        <div className="ino-grid">
          <div>
            {eyebrow && <p className="ino-eyebrow">{eyebrow}</p>}
            <h2 className="ino-h">{title}</h2>
            {sub && <p className="ino-sub">{sub}</p>}
            {foot && <p className="ino-foot">{foot}</p>}
          </div>

          <div className="ino-ring" ref={ring} style={{ ["--n" as string]: items.length }}>
            <ul className="ino-list">
              {items.map((it, i) => (
                <li className="ino-item" key={it.name} style={{ ["--i" as string]: i }}>
                  <span className="ino-spoke" aria-hidden="true" />
                  <a className="ino-node" href={it.href ?? "#"} title={it.note}>
                    <span className="ino-mark" aria-hidden="true">
                      {it.mark ?? it.name.slice(0, 1)}
                    </span>
                    <span className="ino-name">{it.name}</span>
                  </a>
                </li>
              ))}
            </ul>
            <div className="ino-hub">
              <span className="ino-hub-mark">{hubMark}</span>
              <span className="ino-hub-label">{hubLabel}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}