/* PROJECTS page — full case dossier */
const { useEffect } = React;

function ProjRow({ p, i }) {
  return (
    <article className="proj-row reveal">
      <div className="left">
        <div className="num">CASE · {p.num}</div>
        <div className="jp">{p.jp}</div>
        <div className="year">{p.year}</div>
      </div>
      <div className="center">
        <h3>{p.title}</h3>
        <div className="meta">{p.meta}</div>
        <p>{p.blurb}</p>
        <ul>{p.bullets.map((b, j) => <li key={j}>{b}</li>)}</ul>
        <div className="tags">{p.tags.map((t, j) => <span key={j}>{t}</span>)}</div>
      </div>
      <div className="right">
        <div className="grid-bg"></div>
        <div className="label">[ FIG · {String(i+1).padStart(2,'0')} ]</div>
        <div className="center-text">drop screenshot here<br/>4:3 · clean export</div>
      </div>
    </article>
  );
}

function App() {
  useReveal();
  useEffect(() => { window.loadEra(); }, []);
  return (
    <>
      <PaperLayer />
      <Nav active="projects" />
      <PageHeader
        num="002"
        title="Casework."
        jp="事件簿"
        sub="Six entries from the field. Each a small system designed to stay fast under load, cheap under scale, and quiet at 3 a.m."
        meta={`${String(window.PROJECTS.length).padStart(2,'0')} ENTRIES · 2022—2026`}
      />
      <Marquee text="CASEWORK · 事件簿 · DOSSIER ARCHIVE" count={10} />
      <div className="proj-page">
        {window.PROJECTS.map((p, i) => <ProjRow key={i} p={p} i={i} />)}
      </div>
      <Footer page="projects" />
      <MusicPopup />
    </>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
requestAnimationFrame(() => {
  document.body.classList.add('app-ready');
  document.body.classList.remove('preloader-active');
});