/* global React */
// Плавающее мини-видео слева снизу. Только десктоп. Появляется через 3.5с,
// автоплей без звука; клик увеличивает на месте и включает звук.
const { useState: useStateV, useEffect: useEffectV, useRef: useRefV } = React;

function VideoTeaser() {
  const [mount, setMount] = useStateV(false);
  const [shown, setShown] = useStateV(false);
  const [open, setOpen] = useStateV(false);
  const [closed, setClosed] = useStateV(false);
  const ref = useRefV(null);

  useEffectV(() => {
    if (!window.matchMedia("(min-width: 901px)").matches) return; // mobile: не монтируем
    setMount(true);
    const t = setTimeout(() => setShown(true), 3500);
    return () => clearTimeout(t);
  }, []);

  useEffectV(() => {
    const v = ref.current;
    if (!v) return;
    v.muted = !open;
    if (open) { v.controls = true; v.currentTime = 0; }
    v.play().catch(() => {});
  }, [mount, open]);

  if (!mount || closed) return null;
  const enlarge = () => { if (!open) setOpen(true); };

  return React.createElement("div", { className: `lp-video-teaser${shown ? " shown" : ""}${open ? " open" : ""}` },
    React.createElement("button", { className: "vt-close", "aria-label": "Закрыть видео", onClick: (e) => { e.stopPropagation(); setClosed(true); } }, "×"),
    React.createElement("video", { ref, className: "vt-video", src: "assets/video/mereke.mp4", loop: true, autoPlay: true, playsInline: true, preload: "auto", onClick: enlarge }),
    !open && React.createElement("div", { className: "vt-hint", onClick: enlarge },
      React.createElement("span", { className: "vt-play", "aria-hidden": "true" }, "►"),
      React.createElement("span", null, "Звук")));
}

Object.assign(window, { VideoTeaser });