// Bureau — main app

const { useState, useEffect } = React;

function ProjectOverlay({ project, onClose }) {
  useEffect(() => {
    if (project) document.body.classList.add("modal-open");
    else document.body.classList.remove("modal-open");
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [project]);

  if (!project) return <div className="pd-overlay" />;
  return (
    <div className="pd-overlay open" onClick={(e) => { if (e.target.classList.contains("pd-overlay")) onClose(); }}>
      <div className="pd-panel">
        <div className="pd-head">
          <div className="pd-tag"><em>§</em> CASE STUDY · {project.id.toUpperCase()} · {project.year}</div>
          <div style={{display:"flex",gap:"10px",alignItems:"center"}}>
            {project.external && (
              <a href={project.external} target="_blank" rel="noopener"
                 style={{fontFamily:"var(--mono)",fontSize:"11px",letterSpacing:"0.08em",textTransform:"uppercase",color:"var(--muted)",padding:"8px 14px",border:"1px solid var(--rule)",fontWeight:600}}>
                Open fullscreen <span style={{fontFamily:"var(--serif)",fontStyle:"italic"}}>↗</span>
              </a>
            )}
            <button className="pd-close" onClick={onClose}>×</button>
          </div>
        </div>
        {project.external ? (
          <iframe src={project.external} className="pd-iframe" title={project.title} />
        ) : (
          <div style={{padding:"60px 32px",overflowY:"auto",flex:1,background:"var(--paper-2)"}}>
            <div style={{fontFamily:"var(--mono)",fontSize:"11px",letterSpacing:"0.12em",textTransform:"uppercase",color:"var(--accent)",marginBottom:"14px",fontWeight:600}}>FORTHCOMING</div>
            <h2 style={{fontFamily:"var(--serif)",fontSize:"56px",fontWeight:500,letterSpacing:"-0.03em",marginBottom:"18px",lineHeight:1.0}}>{project.title}</h2>
            <p style={{fontFamily:"var(--serif)",fontSize:"19px",color:"var(--muted)",lineHeight:1.55,marginBottom:"48px",maxWidth:"58ch"}}>{project.summary}</p>
            <div style={{padding:"80px",background:"var(--paper-3)",border:"1px solid var(--rule)",textAlign:"center",fontFamily:"var(--mono)",fontSize:"12px",color:"var(--muted)",textTransform:"uppercase",letterSpacing:"0.1em"}}>
              Full case study publishing soon.
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function App() {
  const [openProject, setOpenProject] = useState(null);
  return (
    <>
      <window.Cover />
      <window.CaseStudies onOpen={setOpenProject} />
      <window.Numbers />
      <window.Leadership />
      <window.TrackRecord />
      <window.Toolkit />
      <window.Contact />
      <window.Colophon />
      <ProjectOverlay project={openProject} onClose={() => setOpenProject(null)} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(<App />);