Video Facade

"use client";

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

export interface VideoFacadeProps {
  eyebrow?: string;
  title?: string;
  sub?: string;
  /** Адрес видеофайла. Байты не качаются, пока человек не покажет намерение. */
  src?: string;
  /** Кадр-заставка. Он и есть единственное, что грузится до клика. */
  poster?: string;
  /** Пропорции кадра (формат «16 / 9»). */
  ratio?: string;
  /** Подпись под кадром. */
  caption?: string;
  /** Длительность как её показывать (формат «2:14»). */
  duration?: string;
  /** Что произносит диктор на кнопке (формат «Смотреть: как это работает»). */
  playLabel?: string;
  /**
   * Сокет фона: любой эффект с `mount.role: "background"`, например `<AuroraField />`.
   * Занят — секция снимает собственную заливку, чтобы не спорить за слой.
   */
  background?: ReactNode;
  /** Какой текст читается поверх фона; приходит из `mount.tone` подставленной записи. */
  tone?: "dark" | "light";
  /** Плотность скрима между фоном и текстом (формат «0.5»); 0 — выключить. */
  scrim?: number;
}

/**
 * Видео-секция, построенная как ФАСАД: до клика на странице лежит картинка и кнопка,
 * а не плеер.
 *
 * Наивный вариант — вставить плеер сразу. Он выглядит так же, но стоит сотен килобайт
 * ещё до того, как кто-нибудь решил смотреть: браузер тянет метаданные, а встроенный плеер
 * чужого сервиса — вдобавок свой скрипт, шрифты и куки. Платят за это ВСЕ посетители
 * страницы, включая тех (а их большинство), кто до видео не доскроллит.
 *
 * Здесь `preload="none"`: до намерения не скачивается ни один байт видео, весь вес секции —
 * это кадр-заставка. Намерение ловится раньше клика — на наведении и на фокусе с клавиатуры
 * подключается `preload="metadata"`, поэтому к моменту нажатия начало ролика уже в пути
 * и «подумать» плееру не приходится. Это и есть весь фокус: экономия без задержки.
 *
 * Кнопка — настоящая `<button>` с подписью, а не картинка с треугольником: по фасаду
 * должно быть можно запустить видео с клавиатуры и понять на слух, что это вообще такое.
 * Родные элементы управления появляются в момент запуска: до него они показывали бы
 * шкалу пустого, ещё не загруженного ролика.
 */
export function VideoFacade({
  eyebrow = "как это работает",
  title = "Две минуты вместо страницы текста",
  sub = "Показываем сборку страницы из блоков от пустого холста до готового макета.",
  src = "https://motiva.pages.dev/video/demo-960x540.mp4",
  poster = "https://motiva.pages.dev/video/demo-960x540-poster.jpg",
  ratio = "16 / 9",
  caption = "Запись экрана, без монтажа и ускорения.",
  duration = "0:08",
  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 }}
    >
      <style>{`
        .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: 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; }
        }
      `}</style>

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

      <div className="vfc-in">
        {eyebrow && <p className="vfc-eyebrow">{eyebrow}</p>}
        <h2 className="vfc-h">{title}</h2>
        {sub && <p className="vfc-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">
                {duration}
              </span>
            )}
          </button>
        </div>

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