/* Project detail — full-bleed hero, intro, gallery, next-project link. */
function ProjectDetail({ id, go }) {
  const DS = window.OcaInteriorsDesignSystem_2c041d;
  const P = window.OcaPlaceholders;
  const { NavBar, GalleryGrid } = DS;
  const data = window.ocaProjects[id] || window.ocaProjects["live-oak"];

  return (
    <div style={{ background: "var(--oca-white)", minHeight: "100%" }}>
      <div style={{ background: "var(--surface-page)" }}>
        <NavBar active="Projects" items={window.ocaNavItems(go)} />
      </div>

      {/* full-bleed hero */}
      <div style={{
        height: 560,
        backgroundImage: /gradient|url\(/.test(data.hero) ? data.hero : 'url("' + data.hero + '")',
        backgroundSize: "cover",
        backgroundPosition: "center",
      }} />

      {/* intro */}
      <div style={{
        maxWidth: "var(--max-content)", margin: "0 auto", padding: "64px 40px 40px",
        display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 64, alignItems: "start",
      }}>
        <div>
          <h1 data-edit={`project.${id || 'detail'}.title`} style={{
            margin: 0, fontFamily: "var(--font-display)", fontWeight: 400,
            fontSize: 46, lineHeight: 1.08, color: "var(--text-heading)",
          }}>{data.title}</h1>
          <p data-edit={`project.${id || 'detail'}.meta`} style={{
            margin: "16px 0 0", fontFamily: "var(--font-body)", fontSize: 17,
            color: "var(--text-muted)",
          }}>{data.meta}</p>
        </div>
        <div style={{ textAlign: "center" }}>
          <p data-edit={`project.${id || 'detail'}.body`} style={{
            margin: 0, fontFamily: "var(--font-body)", fontSize: 19, lineHeight: 1.62,
            color: "var(--text-body)",
          }}>{data.body}</p>
          <p data-edit={`project.${id || 'detail'}.credits`} data-edit-html="true" style={{
            margin: "18px 0 0", fontFamily: "var(--font-body)", fontSize: 18,
            color: "var(--text-body)",
          }}>
            Built by <u>{data.builder}</u>, photography by <u>{data.photographer}</u>.
          </p>
        </div>
      </div>

      {/* gallery */}
      <div style={{ maxWidth: "var(--max-content)", margin: "0 auto", padding: "32px 40px 24px" }}>
        <GalleryGrid columns={2} gap={20} images={data.gallery} />
      </div>

      {/* next project */}
      <a
        href="#"
        onClick={(e) => { e.preventDefault(); go("project:" + data.nextId); }}
        style={{
          display: "flex", justifyContent: "flex-end", alignItems: "center", gap: 16,
          maxWidth: "var(--max-content)", margin: "0 auto", padding: "24px 40px 80px",
          textDecoration: "none",
        }}
      >
        <span style={{ fontFamily: "var(--font-display)", fontSize: 38, fontWeight: 400, color: "var(--text-heading)" }}>
          {data.nextLabel}
        </span>
        <span style={{ fontSize: 32, color: "var(--oca-pine-600)" }}>›</span>
      </a>

      <window.Footer />
    </div>
  );
}

window.ocaProjects = {
  "live-oak": {
    title: "Live Oak Residence, TX",
    meta: "New build, 2024; Project and interiors by Oca.",
    body: "This house was designed to preserve the existing trees and to work with the natural slope of the terrain, integrating stepped volumes and retaining walls that follow the topography. Large doors and windows frame the views of the surroundings while material choices and a restrained palette bring in the calm and relaxed environment the homeowners wanted.",
    builder: "Camelot Custom Homes",
    photographer: "Frank Garnica",
    hero: window.OcaPlaceholders.exterior,
    gallery: [
      window.OcaPlaceholders.dining, window.OcaPlaceholders.garden,
      { src: window.OcaPlaceholders.forest, span: 2 }, window.OcaPlaceholders.bedroom,
      window.OcaPlaceholders.hallway, window.OcaPlaceholders.living,
    ],
    nextId: "torch-lake", nextLabel: "Torch Lake | New Build",
  },
  "torch-lake": {
    title: "Torch Lake, MI",
    meta: "New build; Project and interiors by Oca.",
    body: "A serene lakeside retreat where wide glazing dissolves the line between the living spaces and the water beyond. A warm, restrained material palette keeps the focus on light, view, and the quiet rhythm of the day.",
    builder: "Local Builders", photographer: "Frank Garnica",
    hero: window.OcaPlaceholders.living,
    gallery: [
      window.OcaPlaceholders.kitchen, window.OcaPlaceholders.bedroom,
      window.OcaPlaceholders.bath, { src: window.OcaPlaceholders.garden, span: 2 },
    ],
    nextId: "canonero", nextLabel: "Canonero | Remodel",
  },
  "canonero": {
    title: "Canonero, TX",
    meta: "Remodel; Interiors by Oca.",
    body: "A full kitchen and living remodel that opens the home to its garden. Deep green cabinetry, warm brass, and woven textures bring a layered, collected-over-time feel to a bright, contemporary shell.",
    builder: "Camelot Custom Homes", photographer: "Frank Garnica",
    hero: window.OcaPlaceholders.kitchen,
    gallery: [
      window.OcaPlaceholders.dining, window.OcaPlaceholders.hallway,
      window.OcaPlaceholders.living, { src: window.OcaPlaceholders.terracotta, span: 2 },
    ],
    nextId: "park-hollow", nextLabel: "Park Hollow | Remodel",
  },
  "park-hollow": {
    title: "Park Hollow, TX",
    meta: "Remodel; Interiors by Oca.",
    body: "A primary suite and bath remodel centered on calm and light. Stone, plaster, and pale oak create a spa-like quiet, with restrained detailing that lets the materials speak.",
    builder: "Camelot Custom Homes", photographer: "Frank Garnica",
    hero: window.OcaPlaceholders.bath,
    gallery: [
      window.OcaPlaceholders.bedroom, window.OcaPlaceholders.hallway,
      window.OcaPlaceholders.bath, { src: window.OcaPlaceholders.garden, span: 2 },
    ],
    nextId: "live-oak", nextLabel: "Live Oak Residence | New Build",
  },
};

window.ProjectDetail = ProjectDetail;