// Case study page — extends Odoo (or any project) with materials/process narrative + divisions used
function CaseStudy({ slug, onNav }) {
  const { PROJECTS } = window.DI;
  const project = PROJECTS.find((p) => p.slug === slug) || PROJECTS[0];
  const [lbIdx, setLbIdx] = useState(null);

  // Find prev/next in same library
  const idx = PROJECTS.findIndex((p) => p.slug === project.slug);
  const prev = PROJECTS[(idx - 1 + PROJECTS.length) % PROJECTS.length];
  const next = PROJECTS[(idx + 1) % PROJECTS.length];

  // Per-project narrative (the differentiator — materials/process + outcome)
  const narratives = {
    odoo: {
      brief: "Odoo's first regional headquarters needed to set a benchmark for office wellness and Belgian-rooted design culture, while accommodating rapid growth across 90,000 sq ft in Dubai South.",
      concept: "An interior that reads as one continuous landscape — open studios, quiet pockets, café-as-lobby — rather than a corridor of meeting rooms. Materially honest: timber, glazing, exposed services.",
      materials: ["European oak veneer (joinery, FSC)", "Microcement underfoot", "Acoustic timber slats", "Powder-coated steel framing", "Brushed brass detailing"],
      process: "Six of our seven divisions on one PO. Joinery and upholstery shop-fabricated 1,400 linear metres of millwork at DIP; metal & glass produced the partition system in-house; signage and furniture were drawn into the same coordination model from day one.",
      outcome: "Delivered on programme over a 22-week build, with a 2-year defect liability period and post-occupancy snagging closed within 30 days. Recognised in 2024 with Highly Commended — Office Wellness at the CID Awards.",
    },
    accor: {
      brief: "A regional HQ for Accor reflecting the group's hospitality DNA — but in a workplace, for staff, not guests.",
      concept: "Hotel-grade materials and warmth, with the speed and resolution of a corporate fit-out.",
      materials: ["Travertine reception detailing", "Walnut joinery", "Custom upholstered banquettes", "Architectural lighting"],
      process: "Turnkey delivery led by our joinery and furniture divisions, with Kristina Zanic Consultants on design.",
      outcome: "Best Fit-Out Project of the Year. Quoted by Alexandra Woop, Executive Director, Accor.",
    },
  };
  const story = narratives[project.slug] || {
    brief: `A ${project.scope.toLowerCase()} project in ${project.location} for a ${project.sectorLabel.toLowerCase()} client. Delivered as part of our ongoing portfolio.`,
    concept: "Materially considered, programme-led, delivered turnkey across our in-house divisions.",
    materials: ["—  Materials brief pending client sign-off"],
    process: "Coordinated by our in-house teams; full division breakdown available on enquiry.",
    outcome: "Delivered with a 2-year defect liability period.",
  };

  return (
    <div className="page-enter">
      {/* Hero */}
      <section style={{ background: "var(--paper)", paddingTop: "5rem" }}>
        <div className="container">
          <div style={{ display: "flex", gap: "0.5rem", alignItems: "center", marginBottom: "2rem" }}>
            <button onClick={() => onNav("projects")} className="eyebrow" style={{ background: "transparent", border: 0, padding: 0, cursor: "pointer", color: "var(--graphite)" }}>
              ← All projects
            </button>
            <span className="eyebrow" style={{ color: "var(--graphite)", opacity: 0.5 }}> · </span>
            <span className="eyebrow">{project.sectorLabel}</span>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: "1.5rem", alignItems: "end" }}>
            <div style={{ gridColumn: "span 8" }} className="case-title">
              <h1 className="h1">{project.name}</h1>
              {project.award && (
                <div style={{ marginTop: "1rem", display: "inline-flex", alignItems: "center", gap: "0.5rem", padding: "0.4rem 0.8rem", background: "var(--ink)", color: "var(--paper)" }}>
                  <span style={{ color: "var(--accent)" }}>★</span>
                  <span className="eyebrow" style={{ color: "var(--paper)" }}>{project.award}</span>
                </div>
              )}
            </div>
            <div style={{ gridColumn: "span 4" }} className="case-meta-top">
              <div className="eyebrow" style={{ marginBottom: "0.5rem" }}>Sector index</div>
              <div className="num display" style={{ fontSize: "3rem", color: "var(--ink)", lineHeight: 1 }}>
                {String(idx + 1).padStart(2, "0")}<span style={{ color: "var(--graphite)", fontSize: "0.5em" }}>/{String(PROJECTS.length).padStart(2, "0")}</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Hero image */}
      <section style={{ paddingTop: "3rem", paddingBottom: "0" }}>
        <div className="container">
          <div className="img-hover" style={{ aspectRatio: "16/9", cursor: "zoom-in" }} onClick={() => setLbIdx(0)}>
            <img src={project.gallery[0]} alt={project.name} />
          </div>
        </div>
      </section>

      {/* Metadata bar */}
      <section className="section--tight" style={{ paddingTop: "3rem", paddingBottom: "3rem", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <div className="meta-bar" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: "1.5rem", borderTop: "1px solid var(--line)", paddingTop: "2rem" }}>
            {[
              { label: "Sector", value: project.sectorLabel },
              { label: "Location", value: project.location },
              { label: "Size", value: project.size && project.size !== "—" ? project.size : "Not disclosed" },
              { label: "Scope", value: project.scope },
              { label: "Year", value: project.year },
              { label: "Divisions", value: `${project.divisions.length} in-house` },
            ].map((m) => (
              <div key={m.label} className="meta-cell">
                <div className="eyebrow">{m.label}</div>
                <div style={{ marginTop: "0.6rem", fontFamily: "var(--font-display)", fontSize: "1.1rem", color: "var(--ink)" }}>{m.value}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Narrative */}
      <section className="section bg-paper">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: "3rem" }}>
            <div style={{ gridColumn: "span 4" }} className="narr-side">
              <Eyebrow>The brief</Eyebrow>
              <p className="lead" style={{ marginTop: "1.25rem" }}>{story.brief}</p>
            </div>
            <div style={{ gridColumn: "span 8" }} className="narr-main">
              <h2 className="h2" style={{ maxWidth: "32em" }}>{story.concept}</h2>
            </div>
          </div>
        </div>
      </section>

      {/* Image full-bleed */}
      {project.gallery[1] && (
        <section style={{ background: "var(--mist)", padding: "3rem 0" }}>
          <div style={{ padding: "0 var(--pad-page)" }}>
            <div className="img-hover" style={{ aspectRatio: "16/9", cursor: "zoom-in" }} onClick={() => setLbIdx(1)}>
              <img src={project.gallery[1]} alt={project.name} />
            </div>
          </div>
        </section>
      )}

      {/* Materials + Process */}
      <section className="section bg-paper">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: "3rem" }}>
            <div style={{ gridColumn: "span 5" }} className="mat-side">
              <Eyebrow>Materials</Eyebrow>
              <ul style={{ listStyle: "none", padding: 0, margin: "1.5rem 0 0", borderTop: "1px solid var(--line)" }}>
                {story.materials.map((m, i) => (
                  <li key={i} style={{ padding: "1rem 0", borderBottom: "1px solid var(--line)", display: "grid", gridTemplateColumns: "32px 1fr", gap: "1rem", alignItems: "baseline" }}>
                    <span className="num" style={{ color: "var(--graphite)", fontSize: "0.75rem" }}>{String(i + 1).padStart(2, "0")}</span>
                    <span style={{ fontFamily: "var(--font-display)", fontSize: "1.05rem", color: "var(--ink)" }}>{m}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div style={{ gridColumn: "span 7" }} className="mat-main">
              <Eyebrow>Made in our factory</Eyebrow>
              <h3 className="display" style={{ marginTop: "1.25rem", fontSize: "clamp(1.5rem, 2.4vw, 2.25rem)", lineHeight: 1.2, color: "var(--ink)", fontWeight: 400, letterSpacing: "-0.015em" }}>
                {story.process}
              </h3>

              {/* Division breakdown */}
              <div style={{ marginTop: "2.5rem", borderTop: "1px solid var(--line)" }}>
                <div className="eyebrow" style={{ marginTop: "1.5rem", marginBottom: "1rem" }}>Divisions on this project</div>
                <div style={{ display: "flex", gap: "0.4rem", flexWrap: "wrap" }}>
                  {project.divisions.map((d) => (
                    <span key={d} className="chip" aria-pressed="true">{d}</span>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Gallery grid */}
      {project.gallery.length > 2 && (
        <section className="section--tight" style={{ background: "var(--mist)", padding: "4rem 0" }}>
          <div className="container">
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "2rem", alignItems: "baseline" }}>
              <h3 className="display" style={{ fontSize: "1.5rem" }}>Gallery</h3>
              <span className="eyebrow">{project.gallery.length} images</span>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: "1.25rem" }} className="gallery-grid">
              {project.gallery.slice(2).map((src, i) => (
                <div key={src} style={{ gridColumn: i % 3 === 0 ? "span 8" : "span 4" }} className="gallery-cell">
                  <div className="img-hover" style={{ aspectRatio: i % 3 === 0 ? "16/10" : "3/4", cursor: "zoom-in" }} onClick={() => setLbIdx(i + 2)}>
                    <img src={src} alt="" />
                  </div>
                </div>
              ))}
            </div>
          </div>
          <style>{`
            @media (max-width: 880px) {
              .gallery-cell { grid-column: 1 / -1 !important; }
            }
          `}</style>
        </section>
      )}

      {/* Outcome */}
      <section className="section bg-paper">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: "3rem", alignItems: "center" }}>
            <div style={{ gridColumn: "span 7" }} className="out-text">
              <Eyebrow>Outcome</Eyebrow>
              <p className="display" style={{ marginTop: "1rem", fontSize: "clamp(1.5rem, 2.5vw, 2.25rem)", lineHeight: 1.25, color: "var(--ink)", fontWeight: 400, letterSpacing: "-0.015em" }}>
                {story.outcome}
              </p>
            </div>
            <div style={{ gridColumn: "span 5" }} className="out-cta">
              <div style={{ background: "var(--ink)", color: "var(--paper)", padding: "2.5rem" }}>
                <div className="eyebrow" style={{ color: "rgba(255,255,255,0.5)" }}><span className="dot"></span>Similar brief?</div>
                <h3 className="display" style={{ fontSize: "1.5rem", marginTop: "1rem", lineHeight: 1.2, color: "var(--paper)" }}>
                  Start a {project.sectorLabel.toLowerCase()} project with the same team.
                </h3>
                <div style={{ marginTop: "1.5rem" }}>
                  <button className="btn btn--accent" onClick={() => onNav("contact")}>Start a project <Arrow /></button>
                </div>
              </div>
            </div>
          </div>

          {/* Photographer credit + rights disclosure */}
          <div style={{ marginTop: "4rem", paddingTop: "1.5rem", borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: "1rem" }}>
            <span className="eyebrow">Photography · credit pending client sign-off</span>
            <span className="eyebrow">Case study extends existing Size · Location · Sector · Scope metadata with materials/process + divisions used</span>
          </div>
        </div>
      </section>

      {/* Prev / Next */}
      <section style={{ borderTop: "1px solid var(--line)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr" }}>
          <a href="#" onClick={(e) => { e.preventDefault(); onNav(`project:${prev.slug}`); }}
            style={{ padding: "3rem var(--pad-page)", borderRight: "1px solid var(--line)", color: "var(--ink)", transition: "background 150ms" }}
            onMouseEnter={(e) => e.currentTarget.style.background = "var(--mist)"}
            onMouseLeave={(e) => e.currentTarget.style.background = ""}>
            <div className="eyebrow">← Previous</div>
            <div className="display" style={{ marginTop: "0.5rem", fontSize: "1.5rem" }}>{prev.name}</div>
          </a>
          <a href="#" onClick={(e) => { e.preventDefault(); onNav(`project:${next.slug}`); }}
            style={{ padding: "3rem var(--pad-page)", textAlign: "right", color: "var(--ink)", transition: "background 150ms" }}
            onMouseEnter={(e) => e.currentTarget.style.background = "var(--mist)"}
            onMouseLeave={(e) => e.currentTarget.style.background = ""}>
            <div className="eyebrow">Next →</div>
            <div className="display" style={{ marginTop: "0.5rem", fontSize: "1.5rem" }}>{next.name}</div>
          </a>
        </div>
      </section>

      {lbIdx !== null && (
        <Lightbox images={project.gallery} index={lbIdx} onClose={() => setLbIdx(null)} onIndex={setLbIdx} />
      )}

      <style>{`
        @media (max-width: 880px) {
          .case-title, .case-meta-top { grid-column: 1 / -1 !important; }
          .narr-side, .narr-main, .mat-side, .mat-main, .out-text, .out-cta { grid-column: 1 / -1 !important; }
          .meta-bar { grid-template-columns: repeat(2, 1fr) !important; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { CaseStudy });