// Case Study screen — Land Sterling HQ (or any project)

function CaseStudy({ slug }) {
  const project = window.HORTON.projects.find(p => p.slug === slug) || window.HORTON.projects[0];
  // For the flagship slug we have the rich narrative. For others, fall back to a structured-but-light version.
  const cs = (slug === "land-sterling-hq")
    ? window.HORTON.caseStudy
    : null;

  const [lbIndex, setLbIndex] = useState(null);
  const gallery = project.gallery;

  const openLb = i => setLbIndex(i);
  const closeLb = () => setLbIndex(null);
  const prev = () => setLbIndex(i => (i - 1 + gallery.length) % gallery.length);
  const next = () => setLbIndex(i => (i + 1) % gallery.length);

  return (
    <main className="page-fade">
      <EditorialTopBar />
      {/* Hero */}
      <section className="cs-hero">
        <div className="cs-hero-bg" style={{ backgroundImage: `url(${project.hero})` }} />
        <div className="cs-hero-content wrap">
          <div className="mono fade-in" style={{ color: "color-mix(in oklch, white 75%, transparent)", marginBottom: "2rem", animationDelay: "100ms" }}>
            <a href="#/projects" style={{ display: "inline-flex", alignItems: "center", gap: "0.5rem", opacity: 0.85 }}>
              ← Projects
            </a>
            <span style={{ margin: "0 1rem", opacity: 0.4 }}>·</span>
            <span>{project.sectorName}</span>
          </div>
          <h1 className="h-display fade-in" style={{ animationDelay: "180ms", maxWidth: "16ch" }}>
            {project.name}
          </h1>
          {cs && (
            <p className="body-lg fade-in" style={{ animationDelay: "260ms", maxWidth: "50ch", marginTop: "1.5rem", color: "color-mix(in oklch, white 88%, transparent)" }}>
              {cs.brief.lead}
            </p>
          )}
        </div>
      </section>

      {/* Metadata bar */}
      <section className="wrap" style={{ paddingTop: 0, paddingBottom: 0 }}>
        <div className="cs-meta">
          <div className="cs-meta-cell">
            <div className="k">Client</div>
            <div className="v">{cs?.client || project.name}</div>
          </div>
          <div className="cs-meta-cell">
            <div className="k">Sector</div>
            <div className="v">{project.sectorName}</div>
          </div>
          <div className="cs-meta-cell">
            <div className="k">Location</div>
            <div className="v">{project.location}</div>
          </div>
          <div className="cs-meta-cell">
            <div className="k">Scope</div>
            <div className="v">{project.scope}</div>
          </div>
          <div className="cs-meta-cell">
            <div className="k">Year</div>
            <div className="v">{project.year}</div>
          </div>
        </div>
      </section>

      {cs ? <CaseStudyBody cs={cs} project={project} openLb={openLb} /> : <CaseStudyShortBody project={project} openLb={openLb} />}

      <Lightbox
        images={gallery}
        index={lbIndex}
        onClose={closeLb}
        onPrev={prev}
        onNext={next}
        caption={`${project.name} · ${lbIndex !== null ? `${lbIndex + 1} / ${gallery.length}` : ""}`}
      />
    </main>
  );
}

function CaseStudyBody({ cs, project, openLb }) {
  return (
    <>
      {/* Brief */}
      <section className="wrap">
        <div className="cs-narrative">
          <div className="stage-label">01 — The Brief</div>
          <div className="body-copy">
            <h3>The brief.</h3>
            <p className="lead">{cs.brief.lead}</p>
            {cs.brief.body.map((p, i) => <p key={i}>{p}</p>)}
          </div>
        </div>
      </section>

      {/* First image — hero gallery image */}
      <section className="wrap">
        <div className="gallery">
          <div className="g-span-12" onClick={() => openLb(1)}>
            <img src={project.gallery[1]} alt="" loading="lazy" />
          </div>
        </div>
        <PhotoCredit>{cs.photographer}</PhotoCredit>
      </section>

      {/* Concept */}
      <section className="wrap">
        <div className="cs-narrative">
          <div className="stage-label">02 — Concept</div>
          <div className="body-copy">
            <h3>A central spine. <em>Three practice wings.</em></h3>
            {cs.concept.body.map((p, i) => <p key={i}>{p}</p>)}
          </div>
        </div>
      </section>

      {/* Outcomes — split metric row */}
      <section className="wrap" style={{ marginBottom: "5rem" }}>
        <div className="outcomes">
          {cs.metrics.map((m, i) => (
            <div className="outcome" key={i}>
              <div className="big">{m.big}</div>
              <div className="lbl">{m.lbl}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Gallery — split 2 */}
      <section className="wrap">
        <div className="gallery">
          <div className="g-span-8" onClick={() => openLb(2)}>
            <img src={project.gallery[2]} alt="" loading="lazy" />
          </div>
          <div className="g-span-4" onClick={() => openLb(3)}>
            <img src={project.gallery[3]} alt="" loading="lazy" />
          </div>
        </div>
      </section>

      {/* Materials */}
      <section className="wrap">
        <div className="cs-narrative">
          <div className="stage-label">03 — Materials</div>
          <div className="body-copy">
            <h3>Materials &amp; <em>fabrication.</em></h3>
            <p className="lead">{cs.materials.lead}</p>
            {cs.materials.body.map((p, i) => <p key={i}>{p}</p>)}
            <div style={{ marginTop: "2rem", paddingTop: "2rem", borderTop: "1px solid var(--line)" }}>
              <div className="mono" style={{ color: "var(--graphite)", marginBottom: "1rem" }}>Palette · Verified materials</div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "1rem" }}>
                {[
                  { name: "Travertine", c: "#D8CDB9" },
                  { name: "White oak", c: "#C9A47B" },
                  { name: "Brushed bronze", c: "#8E6F45" },
                  { name: "Wool felt", c: "#7A8089" }
                ].map(s => (
                  <div key={s.name}>
                    <div style={{ background: s.c, aspectRatio: "1 / 1", borderRadius: 2, marginBottom: "0.6rem", border: "1px solid color-mix(in oklch, var(--ink) 8%, transparent)" }} />
                    <div style={{ fontFamily: "var(--mono)", fontSize: "0.66rem", letterSpacing: "0.12em", color: "var(--graphite)", textTransform: "uppercase" }}>{s.name}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Quote */}
      <section className="cs-quote">
        <div className="wrap">
          <blockquote>
            &ldquo;The fabrication workshop in Al Quoz is the differentiator.
            <em> Four weeks saved.</em>&rdquo;
          </blockquote>
          <div className="attribution">
            Project director · Land Sterling HQ
            <div style={{ marginTop: "0.5rem", fontSize: "0.65rem", opacity: 0.7 }}>Testimonial illustrative — client to confirm</div>
          </div>
        </div>
      </section>

      {/* Process steps */}
      <section className="wrap" style={{ marginTop: "5rem" }}>
        <div className="eyebrow" style={{ marginBottom: "2rem" }}>
          <span className="sector-dot" style={{ marginRight: "0.6rem" }}></span>
          Programme · Sixteen weeks
        </div>
        <div className="cs-process">
          {cs.process_steps.map(s => (
            <div className="cs-process-cell" key={s.n}>
              <div className="step-n">{s.n}</div>
              <div className="step-t">{s.t}</div>
              <div className="step-d">{s.d}</div>
            </div>
          ))}
        </div>
      </section>

      {/* In-house disciplines used */}
      <section className="wrap" style={{ marginTop: "5rem" }}>
        <div className="cs-narrative">
          <div className="stage-label">04 — In-house</div>
          <div className="body-copy">
            <h3>Eight in-house disciplines, <em>one team.</em></h3>
            <p>Every line below sat inside Horton. No outside design firm, no separate joinery subcontractor.</p>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "0", border: "1px solid var(--line)", marginTop: "2rem" }}>
              {cs.services.map((s, i) => (
                <div key={s} style={{
                  padding: "0.95rem 1.15rem",
                  borderBottom: i < cs.services.length - 2 ? "1px solid var(--line)" : "none",
                  borderRight: i % 2 === 0 ? "1px solid var(--line)" : "none",
                  fontSize: "0.95rem",
                  display: "flex",
                  alignItems: "center",
                  gap: "0.6rem"
                }}>
                  <span className="sector-dot" style={{ background: "var(--accent)" }}></span>
                  {s}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Process narrative + outcome */}
      <section className="wrap">
        <div className="cs-narrative">
          <div className="stage-label">05 — Process</div>
          <div className="body-copy">
            <h3>Approvals ran <em>in parallel.</em></h3>
            {cs.process.body.map((p, i) => <p key={i}>{p}</p>)}
          </div>
        </div>
      </section>

      <section className="wrap">
        <div className="cs-narrative">
          <div className="stage-label">06 — Outcome</div>
          <div className="body-copy">
            <h3>Handed over <em>to plan.</em></h3>
            {cs.outcome.body.map((p, i) => <p key={i}>{p}</p>)}
          </div>
        </div>
      </section>

      {/* Final wide image */}
      <section className="wrap" style={{ marginBottom: "5rem" }}>
        <div className="gallery">
          <div className="g-span-12" onClick={() => openLb(0)}>
            <img src={project.gallery[0]} alt="" loading="lazy" />
          </div>
        </div>
        <PhotoCredit>{cs.photographer}</PhotoCredit>
      </section>

      {/* Next / prev */}
      <NextPrev cs={cs} />

      <CTABand />
    </>
  );
}

function CaseStudyShortBody({ project, openLb }) {
  return (
    <>
      <section className="wrap">
        <div className="cs-narrative">
          <div className="stage-label">01 — The Brief</div>
          <div className="body-copy">
            <h3>The brief.</h3>
            <p className="lead">{project.blurb}</p>
            <p style={{ marginTop: "1.5rem", color: "var(--graphite)", fontStyle: "italic" }}>
              Full case study narrative pending client sign-off. The flagship Land Sterling HQ case study
              shows the structure every project page will follow.
            </p>
            <a href="#/projects/land-sterling-hq" className="btn-arrow" style={{ marginTop: "1.5rem", display: "inline-flex" }}>
              See the Land Sterling HQ case study <ArrowRight />
            </a>
          </div>
        </div>
      </section>

      <section className="wrap" style={{ paddingBottom: "5rem" }}>
        <div className="gallery">
          {project.gallery.map((g, i) => (
            <div key={i} className={i === 0 ? "g-span-12" : (i % 2 === 1 ? "g-span-8" : "g-span-4")} onClick={() => openLb(i)}>
              <img src={g} alt="" loading="lazy" />
            </div>
          ))}
        </div>
        <PhotoCredit>Photography credit TBC with client</PhotoCredit>
      </section>

      <CTABand />
    </>
  );
}

function NextPrev({ cs }) {
  return (
    <section className="wrap" style={{ paddingTop: "3rem", paddingBottom: "5rem" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1rem" }}>
        <a href={`#/projects/${cs.prev.slug}`} style={{
          padding: "2rem 2rem 2rem 2rem",
          background: "var(--mist)",
          display: "flex",
          flexDirection: "column",
          gap: "0.5rem",
          transition: "background 200ms ease"
        }}>
          <div className="mono" style={{ color: "var(--graphite)" }}>← Previous project</div>
          <div className="h-2">{cs.prev.name}</div>
        </a>
        <a href={`#/projects/${cs.next.slug}`} style={{
          padding: "2rem 2rem 2rem 2rem",
          background: "var(--mist)",
          display: "flex",
          flexDirection: "column",
          gap: "0.5rem",
          alignItems: "flex-end",
          textAlign: "right",
          transition: "background 200ms ease"
        }}>
          <div className="mono" style={{ color: "var(--graphite)" }}>Next project →</div>
          <div className="h-2">{cs.next.name}</div>
        </a>
      </div>
    </section>
  );
}

window.CaseStudy = CaseStudy;