/* Видео с дрона. Принимает любую ссылку YouTube/Vimeo; показываем кадр-превью
   с кнопкой Play, плеер подгружается по клику. Если владелец запретил
   встраивание или встраивание блокируется, рядом всегда есть прямая ссылка. */
(() => {
const { Icon } = window.RespectorGroupDesignSystem_21eac1;

const parse = url => {
  const u = String(url || "").trim();
  if (!u) return null;
  let m = u.match(/youtu\.be\/([\w-]{6,})/) || u.match(/[?&]v=([\w-]{6,})/) || u.match(/youtube\.com\/embed\/([\w-]{6,})/) || u.match(/youtube\.com\/shorts\/([\w-]{6,})/);
  if (m) return { kind: "yt", id: m[1], embed: "https://www.youtube-nocookie.com/embed/" + m[1], watch: "https://www.youtube.com/watch?v=" + m[1], poster: "https://i.ytimg.com/vi/" + m[1] + "/maxresdefault.jpg" };
  m = u.match(/vimeo\.com\/(?:video\/)?(\d+)/);
  if (m) return { kind: "vimeo", id: m[1], embed: "https://player.vimeo.com/video/" + m[1], watch: "https://vimeo.com/" + m[1], poster: null };
  return { kind: "other", id: null, embed: u, watch: u, poster: null };
};

function DroneVideo({ src, title }) {
  const v = parse(src);
  const [play, setPlay] = React.useState(false);
  const frame = { position: "absolute", inset: 0, width: "100%", height: "100%", border: 0 };
  return (
    <div style={{ marginTop: "var(--space-10)" }}>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: "var(--space-4)" }}>
        <span className="rg-eyebrow">Видео с дрона</span>
        {v && <a href={v.watch} target="_blank" rel="noopener" style={{ fontSize: "var(--fs-caption)" }}>Открыть на YouTube</a>}
      </div>
      {!v ? (
        <div style={{ marginTop: "var(--space-4)", aspectRatio: "16/9", background: "var(--stone-100)", border: "1px dashed var(--border-hairline)", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "var(--space-3)", color: "var(--text-muted)" }}>
          <Icon name="video" size={26} />
          <span style={{ fontSize: "var(--fs-body-sm)" }}>Видеообзор с дрона появится здесь</span>
        </div>
      ) : play ? (
        <div style={{ marginTop: "var(--space-4)", position: "relative", aspectRatio: "16/9", background: "#000" }}>
          <iframe src={v.embed + "?autoplay=1&rel=0"} title={title || "Видео с дрона"} allow="autoplay; fullscreen; encrypted-media" allowFullScreen referrerPolicy="strict-origin-when-cross-origin" style={frame} />
        </div>
      ) : (
        <button type="button" onClick={() => setPlay(true)} aria-label="Смотреть видео с дрона"
          style={{ marginTop: "var(--space-4)", position: "relative", display: "block", width: "100%", aspectRatio: "16/9", padding: 0, border: 0, background: "#000", cursor: "pointer", overflow: "hidden" }}>
          {v.poster && <img src={v.poster} alt="" onError={e => { if (!/hqdefault/.test(e.currentTarget.src)) e.currentTarget.src = v.poster.replace("maxresdefault", "hqdefault"); }} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />}
          <span style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", background: "linear-gradient(180deg,rgba(7,27,49,.12),rgba(7,27,49,.5))" }}>
            <span style={{ display: "grid", placeItems: "center", width: 68, height: 68, borderRadius: "var(--radius-pill)", background: "rgba(255,255,255,.92)", color: "var(--navy-800)" }}>
              <Icon name="play" size={26} />
            </span>
          </span>
        </button>
      )}
      {v && <p style={{ marginTop: "var(--space-3)", fontSize: "var(--fs-caption)", color: "var(--text-muted)" }}>Если плеер не запускается — видео закрыто для встраивания, откройте его на YouTube.</p>}
    </div>
  );
}
window.DroneVideo = DroneVideo;
window.adToEmbedVideo = url => { const v = parse(url); return v ? v.embed : ""; };
})();