/* Projects index — clickable project cards. */
function Projects({ go }) {
  const DS = window.OcaInteriorsDesignSystem_2c041d;
  const P = window.OcaPlaceholders;
  const { NavBar, ProjectCard } = DS;
  const open = (id) => (e) => { e.preventDefault(); go("project:" + id); };
  return (
    <div style={{ background: "var(--oca-white)", minHeight: "100%" }}>
      <div style={{ background: "var(--surface-page)" }}>
        <NavBar active="Projects" items={window.ocaNavItems(go)} />
      </div>
      <div style={{ maxWidth: "var(--max-content)", margin: "0 auto", padding: "64px 40px 96px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28 }}>
          <ProjectCard title="Live Oak Residence" kind="New Build" image={P.exterior} height={300} onClick={open("live-oak")} />
          <ProjectCard title="Torch Lake" kind="New Build" image={P.living} height={300} onClick={open("torch-lake")} />
          <ProjectCard title="Canonero" kind="Remodel" image={P.kitchen} height={300} onClick={open("canonero")} />
          <ProjectCard title="Park Hollow" kind="Remodel" image={P.bath} height={300} onClick={open("park-hollow")} />
        </div>
      </div>
      <window.Footer />
    </div>
  );
}
window.Projects = Projects;