Integrations Beam

"use client";

import { createRef, useMemo, useRef } from "react";
import type { ReactNode } from "react";
const css = `.igb { 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); }
.igb-in { max-width: var(--ds-container, 1120px); margin-inline: auto;
  padding-inline: var(--ds-gutter, clamp(18px, 5vw, 54px)); }
.igb-eyebrow { margin: 0 0 var(--ds-2, 8px); text-align: center;
  font-family: var(--ds-font-mono, ui-monospace, monospace);
  font-size: var(--ds-text-xs, 0.75rem); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ds-accent, oklch(0.72 0.16 300)); }
.igb-h { margin: 0; text-align: center;
  font-size: var(--ds-text-xl, 2rem); font-weight: 700;
  letter-spacing: var(--ds-tracking-tight, -0.03em); }
.igb-sub { margin: var(--ds-2, 8px) auto 0; max-width: 560px; text-align: center;
  font-size: var(--ds-text-sm, 0.92rem); line-height: var(--ds-leading-body, 1.55);
  color: var(--ds-muted, oklch(0.72 0.02 265)); }

/* схема: колонка сервисов — хаб — колонка сервисов. Лучи рисуются в этом же
   контейнере (position: relative обязателен: концы меряются offset-цепочкой) */
.igb-board { position: relative; display: grid;
  grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(20px, 6vw, 84px); margin-top: var(--ds-7, 54px); }
.igb-col { display: grid; gap: var(--ds-3, 14px); min-width: 0; }
.igb-node { position: relative; z-index: 1; display: flex; align-items: center;
  gap: 10px; min-width: 0; padding: 12px 14px;
  border: 1px solid var(--ds-border, oklch(0.3 0.02 275));
  border-radius: var(--ds-radius, 14px);
  background: var(--ds-surface, oklch(0.17 0.02 273)); }
.igb-node > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--ds-font-mono, ui-monospace, monospace);
  font-size: var(--ds-text-sm, 0.86rem); letter-spacing: 0.08em;
  color: var(--ds-muted, oklch(0.72 0.02 265)); }
.igb-node::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ds-accent, oklch(0.72 0.16 300)); opacity: 0.8; }
.igb-hub { position: relative; z-index: 1; display: grid; place-items: center;
  width: clamp(72px, 10vw, 96px); aspect-ratio: 1; border-radius: 24px;
  border: 1px solid var(--ds-border, oklch(0.3 0.02 275));
  background: var(--ds-surface, oklch(0.17 0.02 273));
  box-shadow: 0 0 0 6px var(--ds-bg, oklch(0.14 0.02 275)),
    0 0 34px oklch(from var(--ds-accent, oklch(0.72 0.16 300)) l c h / 0.28);
  font-weight: 800; font-size: var(--ds-text-lg, 1.2rem);
  letter-spacing: var(--ds-tracking-tight, -0.03em); }

/* СОКЕТ ФОНА — контракт как у остальных секций */
.igb { position: relative; isolation: isolate; }
.igb-bg { position: absolute; inset: 0; z-index: -1; }
.igb[data-slot-bg] { background: transparent; }
.igb-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.igb[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); }
.igb[data-tone="dark"] .igb-bg::after {
  background: oklch(0.09 0.02 265 / calc(var(--igb-scrim, 0.5) * 0.9)); }
.igb[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); }
.igb[data-tone="light"] .igb-bg::after {
  background: oklch(0.99 0 0 / calc(var(--igb-scrim, 0.5) * 0.9)); }
`;
import { AnimatedBeam } from "@/components/animated-beam";

export interface IntegrationsBeamProps {
  eyebrow?: string;
  title?: string;
  sub?: string;
  /** Буквы в центральном узле — обычно инициалы бренда. */
  hub?: string;
  /** Названия сервисов: первая половина встаёт слева, вторая — справа. */
  items?: string[];
  /**
   * Сокет фона: любой эффект с `mount.role: "background"`, например `<AuroraField />`.
   * Занят — секция снимает собственную заливку, чтобы не спорить за слой.
   */
  background?: ReactNode;
  /** Какой текст читается поверх фона; приходит из `mount.tone` подставленной записи. */
  tone?: "dark" | "light";
  /** Плотность скрима между фоном и текстом; 0 — выключить. */
  scrim?: number;
}

const ITEMS = ["Stripe", "Postgres", "Slack", "Telegram", "Notion", "Webhooks"];

/**
 * Интеграции живой схемой: сервисы по бокам, продукт в центре, по связям бегут
 * импульсы — вариант `integrations-orbit` для случая, когда нужна ЧИТАЕМАЯ схема
 * «что откуда куда», а не декоративная орбита: у орбиты подписи едут по кругу,
 * здесь каждая связь — прямая линия с направлением.
 *
 * Лучи не рисуются секцией: это запись `animated-beam` (registryDependencies),
 * которая меряет концы по offset-раскладке живых узлов и переживает ресайз.
 * Слева импульсы идут К хабу (данные входят), справа — ОТ хаба (события выходят):
 * направление и есть смысл схемы.
 */
export function IntegrationsBeam({
  eyebrow = "интеграции",
  title = "Встаёт в середину вашего стека",
  sub = "Данные входят слева, события выходят справа. Всё по вебхукам и открытому API — без коннекторов на заказ.",
  hub = "M",
  items = ITEMS,
  background,
  tone,
  scrim = 0.5,
}: IntegrationsBeamProps) {
  const boardRef = useRef<HTMLDivElement>(null);
  const hubRef = useRef<HTMLDivElement>(null);
  // стабильные ref'ы на каждый узел: лучи меряют концы по живым элементам
  const nodeRefs = useMemo(() => items.map(() => createRef<HTMLDivElement>()), [items.length]);
  const half = Math.ceil(items.length / 2);
  const left = items.slice(0, half);
  const right = items.slice(half);

  return (
    <section
      className="igb"
      data-slot-bg={background ? "" : undefined}
      data-tone={tone}
      style={{ textAlign: "start", ["--igb-scrim" as string]: scrim }}
    >
      <style href="motiva-integrations-beam" precedence="medium">{css}</style>

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

      <div className="igb-in">
        {eyebrow && <p className="igb-eyebrow" data-slot="eyebrow">{eyebrow}</p>}
        {title && <h2 className="igb-h" data-slot="title">{title}</h2>}
        {sub && <p className="igb-sub" data-slot="sub">{sub}</p>}

        <div className="igb-board" ref={boardRef}>
          <div className="igb-col">
            {left.map((it, i) => (
              <div key={it} ref={nodeRefs[i]} className="igb-node">
                <span data-slot="items" data-idx={i}>{it}</span>
              </div>
            ))}
          </div>

          {hub && <div ref={hubRef} className="igb-hub" data-slot="hub">{hub}</div>}

          <div className="igb-col">
            {right.map((it, i) => (
              <div key={it} ref={nodeRefs[half + i]} className="igb-node">
                <span data-slot="items" data-idx={half + i}>{it}</span>
              </div>
            ))}
          </div>

          {/* связи: слева данные ВХОДЯТ (импульс к хабу), справа события ВЫХОДЯТ */}
          {left.map((it, i) => (
            <AnimatedBeam
              key={`l-${it}`}
              containerRef={boardRef}
              fromRef={nodeRefs[i]!}
              toRef={hubRef}
              curvature={(i - (left.length - 1) / 2) * -34}
              duration={4.2}
              delay={i * 0.55}
            />
          ))}
          {right.map((it, i) => (
            <AnimatedBeam
              key={`r-${it}`}
              containerRef={boardRef}
              fromRef={hubRef}
              toRef={nodeRefs[half + i]!}
              curvature={(i - (right.length - 1) / 2) * -34}
              duration={4.2}
              delay={0.28 + i * 0.55}
            />
          ))}
        </div>
      </div>
    </section>
  );
}