Video Facade

"use client";

const css = `.vfc { 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); }
.vfc-in { max-width: var(--ds-container, 1120px); margin-inline: auto;
  padding-inline: var(--ds-gutter, clamp(18px, 5vw, 54px));
  display: grid; justify-items: center; text-align: center; }

.vfc-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)); }
.vfc-h { margin: 0; max-width: 20ch; 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); }
.vfc-sub { margin: var(--ds-3, 12px) 0 0; max-width: 52ch; text-wrap: pretty;
  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)); }

.vfc-frame { position: relative; margin: var(--ds-6, 36px) 0 0; width: 100%;
  max-width: var(--vfc-maxw, 880px); aspect-ratio: var(--vfc-ratio, 16 / 9); overflow: hidden;
  --tx: 0; --ty: 0;
  /* доворот кадра к курсору: только transform, раскладка не пересчитывается */
  transform: perspective(1100px)
    rotateX(calc(var(--ty, 0) * -3.5deg)) rotateY(calc(var(--tx, 0) * 3.5deg));
  border-radius: var(--ds-radius-lg, 18px);
  background: var(--ds-surface, oklch(0.18 0.02 275));
  border: 1px solid var(--ds-border, oklch(0.3 0.02 275));
  box-shadow: var(--ds-shadow-lg, 0 24px 60px oklch(0 0 0 / 0.35)); }
.vfc-video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Слой фасада: живёт только до запуска. Он же затемняет кадр, чтобы подпись
   и кнопка читались на любом постере. */
.vfc-face { position: absolute; inset: 0; display: grid; place-items: center;
  border: 0; padding: 0; cursor: pointer; color: inherit;
  background: linear-gradient(180deg,
    oklch(0.09 0.02 265 / 0.18) 0%, oklch(0.09 0.02 265 / 0.5) 100%);
  transition: opacity var(--ds-base, 0.32s) var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); }
.vfc-face[hidden] { display: none; }

/* кнопка тянется навстречу курсору — смещение маленькое, чтобы она не убегала
   из-под пальца; translate и scale — отдельные свойства, поэтому не спорят */
.vfc-play { translate: calc(var(--tx, 0) * 14px) calc(var(--ty, 0) * 14px);
  display: grid; place-items: center; width: 68px; aspect-ratio: 1;
  border-radius: var(--ds-radius-pill, 999px);
  background: var(--ds-accent, oklch(0.78 0.16 300));
  color: var(--ds-accent-fg, oklch(0.16 0.02 275));
  box-shadow: 0 0 0 0 var(--ds-accent-ring, oklch(0.72 0.16 300 / 0.35));
  transition: scale var(--ds-base, 0.32s) var(--ds-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
              box-shadow var(--ds-base, 0.32s) var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); }
.vfc-face:is(:hover, :focus-visible) .vfc-play { scale: 1.07;
  box-shadow: 0 0 0 12px var(--ds-accent-soft, oklch(0.72 0.16 300 / 0.1)); }
.vfc-face:focus-visible { outline: 2px solid var(--ds-accent, oklch(0.78 0.16 300));
  outline-offset: -4px; }
.vfc-tri { width: 0; height: 0; margin-left: 5px;
  border-left: 20px solid currentColor;
  border-top: 12px solid transparent; border-bottom: 12px solid transparent; }

.vfc-badge { position: absolute; right: 12px; bottom: 12px; padding: 4px 10px;
  border-radius: var(--ds-radius-pill, 999px);
  background: oklch(0.09 0.02 265 / 0.62); color: oklch(0.96 0.01 265);
  font-family: var(--ds-font-mono, ui-monospace, monospace);
  font-size: var(--ds-text-xs, 0.75rem); font-variant-numeric: tabular-nums;
  backdrop-filter: blur(6px); }

.vfc-cap { margin: var(--ds-3, 12px) 0 0; max-width: 52ch;
  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)); }

/* СОКЕТ ФОНА. Слой на z-index -1 внутри своего stacking context: поверх заливки
   секции, но под содержимым — вёрстке кадра знать о нём не нужно. */
.vfc-bg { position: absolute; inset: 0; z-index: -1; }
.vfc[data-slot-bg] { background: transparent; }
.vfc-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.vfc[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); }
.vfc[data-tone="dark"] .vfc-bg::after {
  background: oklch(0.09 0.02 265 / calc(var(--vfc-scrim, 0.5) * 0.9)); }
.vfc[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); }
.vfc[data-tone="light"] .vfc-bg::after {
  background: oklch(0.99 0 0 / calc(var(--vfc-scrim, 0.5) * 0.9)); }

@media (prefers-reduced-motion: reduce) {
  .vfc-face, .vfc-play { transition: none; }
}
`;
import type { ReactNode } from "react";
import { useEffect, useRef, useState } from "react";

export interface VideoFacadeProps {
  eyebrow?: string;
  title?: string;
  sub?: string;
  /** Адрес видеофайла. Байты не качаются, пока человек не покажет намерение. */
  src?: string;
  /** Кадр-заставка. Он и есть единственное, что грузится до клика. */
  poster?: string;
  /** Пропорции кадра. */
  ratio?: string;
  /**
   * Предел ширины кадра в пикселях. Нужен из-за ВЕРТИКАЛЬНОГО видео:
   * при 9/16 и ширине 880 кадр вырастает до полутора тысяч пикселей и выпихивает
   * всё остальное за экран. Для портретного ролика ставьте 340–420.
   */
  frameMaxWidth?: number;
  /** Подпись под кадром. */
  caption?: string;
  /** Длительность как её показывать. */
  duration?: string;
  /** Что произносит диктор на кнопке. */
  playLabel?: string;
  /**
   * Сокет фона: любой эффект с `mount.role: "background"`, например `<AuroraField />`.
   * Занят — секция снимает собственную заливку, чтобы не спорить за слой.
   */
  background?: ReactNode;
  /** Какой текст читается поверх фона; приходит из `mount.tone` подставленной записи. */
  tone?: "dark" | "light";
  /** Плотность скрима между фоном и текстом; 0 — выключить. */
  scrim?: number;
}

/**
 * Видео-секция, построенная как ФАСАД: до клика на странице лежит картинка и кнопка,
 * а не плеер.
 *
 * Наивный вариант — вставить плеер сразу. Он выглядит так же, но стоит сотен килобайт
 * ещё до того, как кто-нибудь решил смотреть: браузер тянет метаданные, а встроенный плеер
 * чужого сервиса — вдобавок свой скрипт, шрифты и куки. Платят за это ВСЕ посетители
 * страницы, включая тех (а их большинство), кто до видео не доскроллит.
 *
 * Здесь `preload="none"`: до намерения не скачивается ни один байт видео, весь вес секции —
 * это кадр-заставка. Намерение ловится раньше клика — на наведении и на фокусе с клавиатуры
 * подключается `preload="metadata"`, поэтому к моменту нажатия начало ролика уже в пути
 * и «подумать» плееру не приходится. Это и есть весь фокус: экономия без задержки.
 *
 * Кнопка — настоящая `<button>` с подписью, а не картинка с треугольником: по фасаду
 * должно быть можно запустить видео с клавиатуры и понять на слух, что это вообще такое.
 * Родные элементы управления появляются в момент запуска: до него они показывали бы
 * шкалу пустого, ещё не загруженного ролика.
 */
export function VideoFacade({
  eyebrow = "как это работает",
  title = "Две минуты вместо страницы текста",
  sub = "Показываем продукт в деле — короткий ролик вместо длинного описания.",
  src = "https://motiva.pages.dev/video/mesh-1280x720.mp4",
  poster = "https://motiva.pages.dev/video/mesh-1280x720-poster.jpg",
  ratio = "16 / 9",
  frameMaxWidth = 880,
  caption = "Демо-ролик без звука. Свой файл — в пропсы src и poster.",
  duration = "0:09",
  playLabel = "Смотреть видео",
  background,
  tone,
  scrim = 0.5,
}: VideoFacadeProps) {
  const video = useRef<HTMLVideoElement>(null);
  const frame = useRef<HTMLDivElement>(null);
  const [started, setStarted] = useState(false);

  /**
   * Пока фасад не запущен, кадр слегка доворачивается к курсору, а кнопка тянется ему
   * навстречу — «магнитная» кнопка, как в `magnetic-button`. Это не украшение: тянущаяся
   * кнопка сама сообщает, что по кадру можно кликнуть, а неподвижный постер с треугольником
   * с равным успехом может быть картинкой.
   *
   * После запуска эффект ВЫКЛЮЧАЕТСЯ: наклонять играющее видео вслед за мышью — значит
   * мешать его смотреть. Ровно поэтому хук зависит от `started`, а не живёт всегда.
   */
  useEffect(() => {
    const el = frame.current;
    if (!el || started) 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;

    let tx = 0, ty = 0, cx = 0, cy = 0, clientX = 0, clientY = 0, inside = false, raf = 0;

    const tick = () => {
      raf = 0;
      const box = el.getBoundingClientRect(); // одно чтение на кадр
      if (inside) {
        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.14;
      cy += (ty - cy) * 0.14;
      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(tick);
    };
    const wake = () => {
      if (!raf) raf = requestAnimationFrame(tick);
    };
    const onMove = (e: PointerEvent) => {
      inside = true;
      clientX = e.clientX;
      clientY = e.clientY;
      wake();
    };
    const onLeave = () => {
      inside = false;
      tx = 0;
      ty = 0;
      wake();
    };
    el.addEventListener("pointermove", onMove);
    el.addEventListener("pointerleave", onLeave);
    return () => {
      el.removeEventListener("pointermove", onMove);
      el.removeEventListener("pointerleave", onLeave);
      if (raf) cancelAnimationFrame(raf);
      el.style.setProperty("--tx", "0");
      el.style.setProperty("--ty", "0");
    };
  }, [started]);

  /** Намерение: курсор или фокус на кадре. Достаточно один раз — дальше уже грузится. */
  const warm = () => {
    const v = video.current;
    if (v && v.preload === "none") v.preload = "metadata";
  };

  const play = () => {
    const v = video.current;
    if (!v) return;
    v.preload = "auto";
    v.controls = true;
    setStarted(true);
    void v.play().catch(() => {
      /* автозапуск может быть запрещён политикой — элементы управления уже показаны */
    });
  };

  return (
    <section
      className="vfc"
      data-slot-bg={background ? "" : undefined}
      data-tone={tone}
      style={{
        textAlign: "start",
        ["--vfc-scrim" as string]: scrim,
        ["--vfc-ratio" as string]: ratio,
        ["--vfc-maxw" as string]: `${frameMaxWidth}px`,
      }}
    >
      <style href="motiva-video-facade" precedence="medium">{css}</style>

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

      <div className="vfc-in">
        {/* data-slot: адрес слота для inline-правки в конструкторе (/build) */}
        {eyebrow && <p className="vfc-eyebrow" data-slot="eyebrow">{eyebrow}</p>}
        {title && <h2 className="vfc-h" data-slot="title">{title}</h2>}
        {sub && <p className="vfc-sub" data-slot="sub">{sub}</p>}

        <div className="vfc-frame" ref={frame} onPointerEnter={warm}>
          <video
            className="vfc-video"
            ref={video}
            src={src}
            poster={poster}
            preload="none"
            playsInline
          />
          <button
            className="vfc-face"
            type="button"
            hidden={started}
            onClick={play}
            onFocus={warm}
            aria-label={`${playLabel}: ${title}`}
          >
            <span className="vfc-play" aria-hidden="true">
              <span className="vfc-tri" />
            </span>
            {duration && (
              <span className="vfc-badge" aria-hidden="true" data-slot="duration">
                {duration}
              </span>
            )}
          </button>
        </div>

        {caption && <p className="vfc-cap" data-slot="caption">{caption}</p>}
      </div>
    </section>
  );
}