// Modale détail liquid glass
function Modal({ work, lang, onClose }) {
  const t = window.I18N[lang];
  const open = !!work;

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

  // Render shell always so transition runs
  const w = work;

  return (
    <div className={"modal-backdrop" + (open ? " open" : "")} onClick={onClose}>
      <div className="modal lg" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close lg lg-pill" onClick={onClose} aria-label="close">
          <svg viewBox="0 0 24 24"><path d="M5 5L19 19M19 5L5 19" /></svg>
        </button>
        {w && (
          <>
            <div className="modal-player">
              {(() => {
                const ytId = window.getYouTubeId(w.link);
                return ytId ? (
                  <iframe
                    src={`https://www.youtube.com/embed/${ytId}`}
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowFullScreen
                    style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: "none" }}
                  />
                ) : null;
              })()}
            </div>
            <div className="modal-info">
              <div className="tag-row">
                <span className="pill">{w.type[lang] || w.type.fr}</span>
                <span className="pill">{w.year}</span>
              </div>
              <h3>{w.title[lang] || w.title.fr}</h3>
              <p className="lead">{w.synopsis && (w.synopsis[lang] || w.synopsis.fr)}</p>
              <dl className="credits">
                {[
                  [t.modal.client, w.client],
                  [t.modal.agency, w.agency],
                  [t.modal.director, w.director],
                  [t.modal.prod, w.prod],
                  [t.modal.editor, w.editor],
                  [w.recurrence ? t.modal.recurrence : t.modal.runtime, w.recurrence || w.runtime],
                ].filter(([, val]) => val).map(([label, val]) => (
                  <React.Fragment key={label}>
                    <dt>{label}</dt><dd>{val}</dd>
                  </React.Fragment>
                ))}
              </dl>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

window.Modal = Modal;