(function () {
  const e = React.createElement;
  const Button = window.ContentStackLabDesignSystem_cbb53c.Button;

  function mountWhenReady(render) {
    if (window.Header && window.SiteFooter && window.getCaseStudy && window.Arrow) {
      render();
      return;
    }
    setTimeout(() => mountWhenReady(render), 40);
  }

  function CaseStudyPage() {
    window.useReveal();
    const sliderRef = React.useRef(null);
    const params = new URLSearchParams(window.location.search);
    const item = window.getCaseStudy(params.get("case"));
    const recentWork = window.CSL.work;
    const caseLinks = {
      OTNexus: "case-study?case=otnexus",
      "Sentinel EHS": "case-study?case=sentinel-ehs",
      "Sapphire Finishing Mills": "case-study?case=sapphire-finishing-mills",
      "Fatima Group": "case-study?case=fatima-group",
      "Irinatech Digital": "case-study?case=irinatech-digital"
    };
    React.useEffect(() => {
      const id = setInterval(() => {
        const slider = sliderRef.current;
        if (!slider) return;
        const max = slider.scrollWidth - slider.clientWidth;
        if (max <= 0) return;
        const card = slider.querySelector(".case-inner-work__card");
        const amount = card ? card.offsetWidth + 24 : slider.clientWidth * 0.8;
        if (slider.scrollLeft >= max - 8) {
          slider.scrollTo({ left: 0, behavior: "smooth" });
        } else {
          slider.scrollBy({ left: amount, behavior: "smooth" });
        }
      }, 3200);
      return () => clearInterval(id);
    }, []);
    React.useEffect(() => window.scrollTo(0, 0), []);
    const renderPoint = (point) => Array.isArray(point)
      ? e("li", { key: point[0] }, e("strong", null, point[0]), ": ", point[1])
      : e("li", { key: point }, point);
    const renderHtml = (html, className) => html
      ? e("div", { className, dangerouslySetInnerHTML: { __html: html } })
      : null;
    // taglines are admin-entered and may carry <b> from the bold toggle
    const renderLead = (text) => text
      ? e("p", { className: "article-lead", dangerouslySetInnerHTML: { __html: text } })
      : null;
    return e("div", { className: "case-page-shell" },
      e(window.Header),
      e("main", { className: "dark-theme" },
        e("section", { className: "article-hero" },
          e("div", { className: "wrap article-hero__grid" },
            e("div", { className: "reveal" },
              e("p", { className: "eyebrow" }, "Case Study"),
              e("h1", null, item.brand, e("span", { className: "dot" }, ".")),
              e("p", null, item.intro),
              e("div", { className: "article-meta-row" },
                ...(item.tag && item.tag !== item.category ? item.tag.split("|").map((t) => t.trim()).filter(Boolean).map((t) => e("span", { key: "tag-" + t }, t)) : []),
                ...(item.category || "").split("|").map((t) => t.trim()).filter(Boolean).map((t) => e("span", { key: t }, t))
              )
            ),
            e("div", { className: "article-visual reveal", style: { background: item.gradient } },
              e("image-slot", { id: `case-inner-${item.slug}`, src: item.image || "", shape: "rect", placeholder: `${item.brand} visuals`, fit: "cover" })
            )
          )
        ),
        e("section", { className: "sec sec--sunken" },
          e("div", { className: "wrap article-layout" },
            e("aside", { className: "article-aside reveal" },
              item.meta.map(([label, value]) => e("div", { className: "article-fact", key: label }, e("span", null, label), e("strong", null, value)))
            ),
            e("article", { className: "article-body reveal" },
              item.overview && e("p", { className: "article-overview" }, item.overview),
              e("h2", null, "The Challenge"),
              renderLead(item.challengeLead),
              e("p", null, item.challenge),
              e("h2", null, "The Approach"),
              renderLead(item.approachLead),
              item.approachHtml ? renderHtml(item.approachHtml, "article-rich") : e("ul", null, (item.approach || []).map(renderPoint)),
              e("h2", null, "The Work"),
              e("p", null, item.work),
              e("h2", null, "The Results"),
              renderLead(item.resultsLead),
              item.resultsHtml ? renderHtml(item.resultsHtml, "article-rich") : e("ul", null, (item.results || []).map(renderPoint)),
              item.resultsNote && e("p", { className: "article-note" }, item.resultsNote),
              e("div", { className: "article-cta" },
                e("h3", null, item.ctaHeading || "Want results like these?"),
                e(Button, { as: "a", href: item.ctaLink || "contact", size: "lg", iconRight: e(window.Arrow) }, item.ctaText || "Let's Talk")
              )
            )
          )
        ),
        e("section", { className: "sec case-inner-work" },
          e("div", { className: "wrap" },
            e("div", { className: "work__head reveal" },
              e("div", { className: "sec-head" },
                e("p", { className: "eyebrow" }, "Recent work"),
                e("h2", null, "The proof is in the pipeline", e("span", { className: "dot" }, ".")),
                e("p", null, "Real brands. Real problems. Real outcomes.")
              )
            ),
            e("div", {
              className: "case-inner-work__slider reveal",
              ref: sliderRef
            },
              recentWork.map((study) =>
                e("a", {
                  className: "case-inner-work__card",
                  href: study.href || "contact",
                  key: study.href || study.brand
                },
                  e("div", { className: "case-inner-work__media", style: { background: study.g } },
                    e("image-slot", { id: `case-slider-${(study.href || study.brand).toLowerCase().replace(/[^a-z0-9]+/g, "-")}`, src: study.image || "", shape: "rect", placeholder: `${study.brand} image`, fit: "cover" })
                  ),
                  e("div", { className: "work__info case-inner-work__body" },
                    e("h3", { className: "work__title" }, study.brand),
                    e("span", { className: "work__tag" }, study.tag)
                  )
                )
              )
            )
          )
        )
      ),
      e("div", { className: "dark-theme" }, e(window.SiteFooter))
    );
  }

  mountWhenReady(() => ReactDOM.createRoot(document.getElementById("root")).render(e(CaseStudyPage)));
})();