const { useEffect: useEffectO } = React;

function Overlay({ project, onClose }) {
  useEffectO(() => {
    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 d = project.details;
  return (
    <React.Fragment>
      <div className="overlay-backdrop" onClick={onClose} />
      <aside className="overlay-panel" role="dialog" aria-modal="true">
        <button className="overlay-close" onClick={onClose}>← close [esc]</button>
        <div className="overlay-eyebrow">
          <span className="accent">// case study</span> · {project.kind} · {project.year}
        </div>
        <h1 className="overlay-title">{project.title}</h1>
        <p className="overlay-blurb">{project.blurb}</p>

        <div className="overlay-metrics">
          {project.metrics.map(([v, l], i) => (
            <div className="ov-metric" key={i}>
              <div className="val">{v}</div>
              <div className="lbl">{l}</div>
            </div>
          ))}
        </div>

        <div className="overlay-placeholder">
          <div>
            <b>[PLACEHOLDER]</b>
            hero image / architecture diagram<br />
            for {project.title}
          </div>
        </div>

        <div className="overlay-section">
          <h3>problem</h3>
          <p>{d.problem}</p>
        </div>

        <div className="overlay-section">
          <h3>approach</h3>
          <ul>
            {d.approach.map((a, i) => <li key={i}>{a}</li>)}
          </ul>
        </div>

        <div className="overlay-section">
          <h3>stack</h3>
          <div className="stack-tags">
            {d.stack.map((s) => <Tag key={s}>{s}</Tag>)}
          </div>
        </div>

        <div className="overlay-section">
          <h3>outcomes</h3>
          <ul>
            {d.outcomes.map((o, i) => <li key={i}>{o}</li>)}
          </ul>
        </div>

        <div className="overlay-placeholder" style={{ marginTop: 24 }}>
          <div>
            <b>[PLACEHOLDER]</b>
            link to repo / writeup / demo video
          </div>
        </div>
      </aside>
    </React.Fragment>
  );
}

Object.assign(window, { Overlay });