// Site entry — main dossier page + URL-hash-driven slide-over for project detail.

function Site() {
  const r = window.RESUME;
  const projects = r.projects.filter(p => !p.disabled);

  // URL hash: ''  => main, '#/project/<id>' => detail page
  const parseHash = () => {
    const m = (window.location.hash || '').match(/^#\/project\/([\w-]+)/);
    if (!m) return null;
    return projects.find(p => p.id === m[1])?.id || null;
  };

  const [activeId, setActiveId] = React.useState(parseHash);

  React.useEffect(() => {
    const onHash = () => setActiveId(parseHash());
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const open = (id) => {
    window.location.hash = `#/project/${id}`;
  };
  const close = () => {
    history.pushState(null, '', window.location.pathname + window.location.search);
    setActiveId(null);
  };

  const active = activeId ? projects.find(p => p.id === activeId) : null;

  // Detail REPLACES the main page (not overlay) so it's full-width and easy to read.
  if (active) {
    return (
      <ProjectDetail
        project={active}
        projects={projects}
        onClose={close}
        onSelect={open}
      />
    );
  }
  return <DossierMain onOpenProject={open} />;
}

ReactDOM.createRoot(document.getElementById('root')).render(<Site />);