/* ============================================================
   CASE STUDY DETAIL
   ============================================================ */
function CaseStudy({ slug, go, mutedMap, toggleMute }) {
  const { PROJECTS, Plate, Reveal, SplitWords } = window;
  const idx = PROJECTS.findIndex((p) => p.slug === slug);
  const p = PROJECTS[idx];
  const next = PROJECTS[(idx + 1) % PROJECTS.length];

  useEffect(() => { window.scrollTo(0, 0); }, [slug]);

  const paras = p.body.split("\n\n");

  return (
    <article className="cs">
      {/* ---- title block ---- */}
      <header className="cs-head page">
        <Reveal as="h1" className="cs-title display" threshold={0.01}>
          <SplitWords text={p.title} />
        </Reveal>
        <Reveal className="cs-year year" threshold={0.01}>({p.year})</Reveal>
        <Reveal className="cs-meta">
          <Meta label="Services" value={p.services} />
          <Meta label="Client" value={p.client} />
          <Meta label="Collaboration" value={p.partner} />
        </Reveal>
      </header>

      {/* ---- hero media ---- */}
      <Reveal className="cs-hero page" threshold={0.01}>
        <Plate
          tint={p.tint}
          label={p.cover}
          corner={p.role}
          video={p.video}
          muted={mutedMap[p.slug] !== false}
          onUnmute={() => toggleMute(p.slug)}
          className="cs-hero-plate clip-reveal"
        />
      </Reveal>

      {/* ---- narrative 01 ---- */}
      <section className="cs-narrative page">
        <div className="cs-narr-num">
          <Reveal as="span" className="num serif">01.</Reveal>
        </div>
        <div className="cs-narr-head">
          <Reveal as="h2" className="h-lg" threshold={0.05}>
            <SplitWords text={p.lead} />
          </Reveal>
        </div>
        <div className="cs-narr-body">
          <Reveal className="tag" style={{ marginBottom: "1.4rem", display: "block" }}>[ Project info ]</Reveal>
          <Reveal className="body-lg fade-up">
            <p style={{ marginBottom: "1.4rem" }}><b>{p.summary}</b></p>
            {paras.map((t, i) => <p key={i} style={{ marginBottom: "1.4rem" }}>{t}</p>)}
          </Reveal>
        </div>
      </section>

      {/* ---- gallery rhythm ---- */}
      <section className="cs-gallery">
        <Reveal className="cs-g-full page">
          <Plate tint={p.tint} label={p.blocks[0]} corner="01 / 04" className="g-full-plate clip-reveal" />
        </Reveal>

        <div className="cs-g-pair page">
          <Reveal><Plate tint={shift(p.tint, 0.06)} label={p.blocks[1]} corner="02" className="g-sq clip-reveal" /></Reveal>
          <Reveal style={{ transitionDelay: "0.08s" }}><Plate tint={shift(p.tint, -0.04)} label={p.blocks[2]} corner="03" className="g-sq clip-reveal" /></Reveal>
        </div>

        {/* ---- narrative 02 ---- */}
        <section className="cs-narrative page">
          <div className="cs-narr-num">
            <Reveal as="span" className="num serif">02.</Reveal>
          </div>
          <div className="cs-narr-head">
            <Reveal as="h2" className="h-lg" threshold={0.05}>
              <SplitWords text={"What we left behind"} />
            </Reveal>
          </div>
          <div className="cs-narr-body">
            <Reveal className="tag" style={{ marginBottom: "1.4rem", display: "block" }}>[ Outcome ]</Reveal>
            <Reveal className="body-lg fade-up">
              <p>A deliverable the team could act on the day it landed — not a PDF that ages in a drawer, but a working model of the {p.role.toLowerCase()} that keeps paying back long after the engagement closes.</p>
            </Reveal>
          </div>
        </section>

        <Reveal className="cs-g-full page">
          <Plate tint={shift(p.tint, 0.03)} label={p.blocks[3]} corner="04 / 04" className="g-wide-plate clip-reveal" />
        </Reveal>
      </section>

      {/* ---- next project ---- */}
      <button className="cs-next page" onClick={() => go({ page: "case", slug: next.slug })}>
        <span className="tag">[ Next project ]</span>
        <div className="cs-next-row">
          <span className="cs-next-title display">{next.title}</span>
          <span className="cs-next-year year">({next.year})</span>
        </div>
        <Plate tint={next.tint} label={next.cover} className="cs-next-plate" />
      </button>
    </article>
  );
}

function Meta({ label, value }) {
  return (
    <div className="cs-meta-item">
      <span className="label">{label}</span>
      <span className="cs-meta-val">[{value}]</span>
    </div>
  );
}

/* lighten/darken an oklch tint string by delta on L */
function shift(tint, d) {
  return `oklch(from ${tint} calc(l + ${d}) c h)`;
}

Object.assign(window, { CaseStudy });