/* VideoModal — full-screen tutorial sheet with YouTube embed */
(function () {
  const { useEffect } = React;

  function VideoModal({ ex, onClose }) {
    useEffect(() => {
      const onKey = (e) => { if (e.key === "Escape") onClose(); };
      document.addEventListener("keydown", onKey);
      document.body.style.overflow = "hidden";
      return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
    }, [onClose]);

    const ytSearchUrl = `https://www.youtube.com/results?search_query=${encodeURIComponent(ex.query || ex.name)}`;
    const embedUrl = ex.videoId
      ? `https://www.youtube-nocookie.com/embed/${ex.videoId}?rel=0&modestbranding=1`
      : null;

    return (
      <div className="vm-backdrop" onClick={onClose}>
        <div className="vm-sheet" onClick={(e) => e.stopPropagation()}>
          <div className="vm-head">
            <div>
              <div className="vm-eyebrow">Tutorial</div>
              <div className="vm-title">{ex.name}</div>
            </div>
            <button className="vm-close" onClick={onClose} aria-label="Close">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 3l8 8M11 3l-8 8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
            </button>
          </div>
          <div className="vm-player">
            {embedUrl ? (
              <iframe
                src={embedUrl}
                title={`${ex.name} tutorial`}
                allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowFullScreen
                referrerPolicy="strict-origin-when-cross-origin"
              />
            ) : (
              <div className="vm-no-embed">
                <div style={{fontWeight: 600, fontSize: 15, marginBottom: 6}}>No in-app preview for this one</div>
                <div style={{color: "var(--text-dim)", fontSize: 13, marginBottom: 16, lineHeight: 1.5}}>We haven't curated a video yet — but YouTube has dozens of physical-therapist tutorials. Tap below to browse them.</div>
              </div>
            )}
          </div>
          <div className="vm-body">
            <div className="vm-how">
              <div className="vm-section-label">How to do it</div>
              <div>{ex.how}</div>
            </div>
            <a className="vm-link" href={ytSearchUrl} target="_blank" rel="noopener noreferrer">
              <span>More tutorials on YouTube</span>
              <span style={{opacity: 0.6}}>↗</span>
            </a>
          </div>
        </div>
      </div>
    );
  }

  window.VideoModal = VideoModal;
})();