// MARA — Cinema modal + VideoCard com hover preview Vimeo
// Carrega DEPOIS de shared.jsx

// ---- Cinema modal (Vimeo player full-screen com chrome de cinema) ----
function CinemaModal({ project, onClose }) {
  React.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]);

  if (!project) return null;
  const id = project.vimeoId;

  return (
    <div className="cinema-modal" onClick={onClose}>
      <div className="cinema-grain" />
      <div className="cinema-curtain left" />
      <div className="cinema-curtain right" />

      <div className="cinema-stage" onClick={e => e.stopPropagation()}>
        <div className="cinema-meta-top">
          <span className="caption" style={{ color: "var(--color-red)" }}>● NOW PLAYING</span>
          <span className="caption">{project.client} · {project.year}</span>
        </div>

        <div className="cinema-screen">
          {id ? (
            <iframe
              src={`https://player.vimeo.com/video/${id}?autoplay=1&title=0&byline=0&portrait=0`}
              frameBorder="0"
              allow="autoplay; fullscreen; picture-in-picture"
              allowFullScreen
            />
          ) : (
            <div className="cinema-placeholder">
              <div className="cinema-marker">
                <span className="caption">VIMEO ID NÃO CONFIGURADO</span>
                <code>js/projects.js → "{project.slug}".vimeoId</code>
              </div>
              <VideoStill tone={0} timecode="--:--:--:--" aspect="21/9" />
            </div>
          )}
        </div>

        <div className="cinema-meta-bot">
          <h3 className="cinema-title">{project.title}</h3>
          <span className="caption">{project.services || project.category}</span>
        </div>
      </div>

      <button className="cinema-close" onClick={onClose} aria-label="Fechar">
        <span>FECHAR</span>
        <svg width="14" height="14" viewBox="0 0 14 14" stroke="currentColor" strokeWidth="1.5">
          <path d="M1 1 L13 13 M13 1 L1 13" />
        </svg>
      </button>
    </div>
  );
}

// ---- VideoCard: still + hover preview Vimeo (se houver) + click abre modal ----
function VideoCard({ project, tone = 0, aspect = "16/10", timecode, onPlay }) {
  const [hover, setHover] = React.useState(false);
  const previewId = project && project.vimeoPreview;

  return (
    <div
      className="video-card"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={(e) => { e.preventDefault(); onPlay && onPlay(project); }}
      style={{ cursor: "pointer" }}
    >
      <VideoStill tone={tone} aspect={aspect} timecode={timecode || `00:0${(tone%5)+1}:14:21`} />
      {previewId && hover && (
        <div className="video-card-preview">
          <iframe
            src={`https://player.vimeo.com/video/${previewId}?autoplay=1&loop=1&muted=1&background=1&controls=0`}
            frameBorder="0"
            allow="autoplay; fullscreen"
          />
        </div>
      )}
    </div>
  );
}

// ---- Hook pra usar o modal globalmente ----
function useCinemaModal() {
  const [active, setActive] = React.useState(null);
  const open = React.useCallback((p) => setActive(p), []);
  const close = React.useCallback(() => setActive(null), []);
  return { active, open, close };
}

Object.assign(window, { CinemaModal, VideoCard, useCinemaModal });