Logos Strip

import type { ReactNode } from "react";
export interface LogosStripProps {
  /** Подпись над полосой. */
  caption?: string;
  /** Названия клиентов (формат «["NORDWIND","AXIOM"]»). */
  items?: string[];
  /** Полный проход ленты, сек (формат «26»). */
  duration?: number;
  /**
   * Сокет фона: любой эффект с `mount.role: "background"`, например `<AuroraField />`.
   * Занят — секция снимает собственную заливку, чтобы не спорить за слой.
   */
  background?: ReactNode;
  /** Какой текст читается поверх фона; приходит из `mount.tone` подставленной записи. */
  tone?: "dark" | "light";
  /** Плотность скрима между фоном и текстом (формат «0.5»); 0 — выключить. */
  scrim?: number;
}

/**
 * Полоса клиентов бесконечной лентой.
 *
 * Бесшовность держится на одном правиле: контент дублируется ровно дважды, а трек едет
 * на `-50%` своей ширины. В точке возврата вторая копия оказывается пиксель-в-пиксель на
 * месте первой — стыка не существует. Никаких замеров и никакого JS.
 *
 * Края растворяются маской, а не градиентной плашкой поверх: маска работает на любом фоне,
 * плашку пришлось бы перекрашивать под каждую тему.
 */
export function LogosStrip({
  caption = "нам доверяют",
  items = ["NORDWIND", "AXIOM", "KERNEL", "LUMA", "VERTEX", "OKAPI", "SOLARIS"],
  duration = 26,
  background,
  tone,
  scrim = 0.5,
}: LogosStripProps) {
  return (
    <section
      className="lgs"
      data-slot-bg={background ? "" : undefined}
      data-tone={tone} style={{ textAlign: "start", ["--lgs-scrim" as string]: scrim, ["--dur" as string]: `${duration}s` }}
    >
      <style>{`
        .lgs { width: 100%; padding-block: var(--ds-section-y, var(--ds-6, 36px));
          background: var(--ds-bg, oklch(0.14 0.02 275));
          font-family: var(--ds-font, system-ui, sans-serif); }
        .lgs-cap { margin: 0 0 var(--ds-4, 16px); text-align: center;
          font-family: var(--ds-font-mono, ui-monospace, monospace);
          font-size: var(--ds-text-xs, 0.75rem); letter-spacing: 0.18em; text-transform: uppercase;
          color: var(--ds-muted, oklch(0.72 0.02 265)); opacity: 0.75; }

        /* contain: inline-size — чтобы ширина ленты не «протекала» наружу: у трека
           width: max-content, и без изоляции родитель в гриде/флексе раздувается
           до суммарной длины всех копий вместо доступной ширины */
        .lgs-wrap { overflow: hidden; contain: inline-size;
          border-block: 1px solid var(--ds-border, oklch(0.3 0.02 275));
          padding-block: var(--ds-3, 12px);
          /* края гасим маской: работает на любом фоне, в отличие от градиентной плашки */
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
        .lgs-track { display: flex; width: max-content; gap: var(--ds-7, 54px);
          padding-left: var(--ds-7, 54px);
          animation: lgs-run var(--dur, 26s) linear infinite; }
        .lgs-wrap:hover .lgs-track { animation-play-state: paused; }
        .lgs-track span { white-space: nowrap;
          font-family: var(--ds-font-mono, ui-monospace, monospace);
          font-size: var(--ds-text-sm, 0.86rem); letter-spacing: 0.16em;
          color: var(--ds-muted, oklch(0.72 0.02 265));
          transition: color var(--ds-fast, 0.18s); }
        .lgs-track span:hover { color: var(--ds-accent, oklch(0.72 0.16 300)); }
        /* трек — ровно две копии, поэтому -50% возвращает его в пиксель-в-пиксель */
        @keyframes lgs-run { to { transform: translateX(-50%); } }

        @media (prefers-reduced-motion: reduce) { .lgs-track { animation: none; } }
        html[data-shot] .lgs-track { animation: none; }
      
        /* СОКЕТ ФОНА. Слой лежит на z-index -1 внутри своего stacking context: он рисуется
           поверх заливки секции, но под всем содержимым — поэтому контенту не нужно ни
           position, ни z-index, и вёрстка секции не меняется вовсе.
           Тон переопределяет ТОКЕНЫ, а не перечисляет классы: все дети и так читают
           --ds-fg/--ds-muted, значит пара фон+текст чинится в одном месте.
           Скрим обязателен: у живого фона яркость гуляет по кадру, и цвет текста, читаемый
           и на провале, и на вспышке, подобрать нельзя — контраст надо создавать. */
        .lgs { position: relative; isolation: isolate; }
        .lgs-bg { position: absolute; inset: 0; z-index: -1; }
        .lgs[data-slot-bg] { background: transparent; }
        .lgs-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
        .lgs[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); }
        .lgs[data-tone="dark"] .lgs-bg::after {
          background: oklch(0.09 0.02 265 / calc(var(--lgs-scrim, 0.5) * 0.9)); }
        .lgs[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); }
        .lgs[data-tone="light"] .lgs-bg::after {
          background: oklch(0.99 0 0 / calc(var(--lgs-scrim, 0.5) * 0.9)); }
      `}</style>

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

      {caption && <p className="lgs-cap">{caption}</p>}
      <div className="lgs-wrap">
        <div className="lgs-track" aria-hidden>
          {[...items, ...items].map((it, i) => (
            <span key={`${it}-${i}`}>{it}</span>
          ))}
        </div>
      </div>
    </section>
  );
}