// Project detail overlay
const { useEffect: useEffectO, useState: useStateO } = React;

function ProjectOverlay({ project, onClose }) {
  const [playing, setPlayingO] = useStateO(false);

  useEffectO(() => {
    if (!project) return;
    setPlayingO(false);
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [project, onClose]);

  if (!project) return null;

  return (
    <div className="overlay" onClick={onClose}>
      <div className="overlay-inner" onClick={(e) => e.stopPropagation()}>
        <div className="overlay-bar mono">
          <span>{project.id}&nbsp;/&nbsp;{project.title.toUpperCase()}</span>
          <span>{project.year}{project.location ? ` · ${project.location}` : ""}</span>
          <button className="overlay-close" onClick={onClose} data-cursor="link" data-cursor-label="CLOSE">
            CLOSE&nbsp;[ESC]
          </button>
        </div>

        <div className="overlay-hero">
          {playing && project.youtube ? (
            <div style={{ position: "relative", width: "100%", aspectRatio: "21/9", background: "#000" }}>
              <iframe
                src={`https://www.youtube.com/embed/${project.youtube}?autoplay=1&rel=0&modestbranding=1&vq=hd1080`}
                style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: "none" }}
                allow="autoplay; fullscreen"
                allowFullScreen
              />
            </div>
          ) : (
            <>
              <StillPlaceholder project={project} aspect="21/9" frame="HERO STILL" />
              {project.youtube && (
                <div className="overlay-play">
                  <button onClick={() => setPlayingO(true)} data-cursor="view" data-cursor-label="">
                    <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
                      <path d="M5 3 L19 11 L5 19 Z" fill="currentColor" />
                    </svg>
                    <span className="mono">PLAY</span>
                  </button>
                </div>
              )}
            </>
          )}
        </div>

        <div className="overlay-body">
          <div className="overlay-meta">
            <div><div className="omk mono">CLIENT</div><div>{project.client}</div></div>
            <div><div className="omk mono">ROLE</div><div>{project.role}</div></div>
            <div><div className="omk mono">FORMAT</div><div>{project.format}</div></div>
            <div><div className="omk mono">YEAR</div><div>{project.year}</div></div>
            {project.location && (
              <div><div className="omk mono">LOCATION</div><div>{project.location}</div></div>
            )}
          </div>

          <div className="overlay-text">
            {project.description && (
              <p className="overlay-lede">{project.description}</p>
            )}
          </div>

          {/* Stills section hidden for now — uncomment to restore
          <div className="overlay-stills">
            <StillPlaceholder project={project} aspect="3/2" frame="STILL 02" />
            <StillPlaceholder project={project} aspect="3/2" frame="STILL 03" />
            <StillPlaceholder project={project} aspect="3/2" frame="STILL 04" />
          </div>
          */}

          {project.credits && project.credits.length > 0 && (
            <div className="overlay-credits mono">
              <div className="oc-h">CREDITS</div>
              <div className="oc-grid">
                {project.credits.map((c, i) => (
                  <div key={i}><span>{c.r}</span><span>{c.n}</span></div>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

window.ProjectOverlay = ProjectOverlay;