{
/* ============================================================
   Content Stack Lab - Case Studies Landing Page
   ============================================================ */
const { useEffect } = React;

const cases = window.caseStudyCards || [];
const admin = window.CSLAdmin || {};
const pageHero = (admin.heroes && admin.heroes["case-studies"]) || {};
const pageCta = (admin.ctas && admin.ctas["case-studies"] && (admin.ctas["case-studies"].main || admin.ctas["case-studies"]["start-call"])) || {};

function DotTitle({ text, as = "h1" }) {
  return <window.CSLRichDotTitle as={as} text={text} />;
}

function CaseHero() {
  return (
    <section className="case-hero dark-theme" id="top">
      <div className="wrap case-hero__inner reveal">
        <DotTitle text={pageHero.heading || "Case studies"} />
        {pageHero.subheading ? <p>{pageHero.subheading}</p> : null}
      </div>
    </section>
  );
}

function CaseGrid() {
  return (
    <section className="sec sec--sunken">
      <div className="wrap">
        <div className="case-grid">
          {cases.map((item) => (
            <a className="case-card reveal" href={item.href} key={item.href || item.brand}>
              <div className="case-card__media" style={{ background: item.gradient }}>
                <image-slot id={item.slot} src={item.image || ""} shape="rect" placeholder={`${item.brand} image`} fit="cover"></image-slot>
              </div>
              <div className="case-card__body">
                <h2>{item.brand}</h2>
                <p>{item.tag}</p>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function CaseCTA() {
  if (!pageCta.heading && !pageCta.subheading) return null;
  return (
    <section className="sec case-cta dark-theme">
      <div className="wrap case-cta__grid">
        <div className="sec-head reveal">
          <p className="eyebrow">Not Sure Where to Start?</p>
          {pageCta.heading ? <DotTitle as="h2" text={pageCta.heading} /> : null}
          {pageCta.subheading ? <p>{pageCta.subheading}</p> : null}
        </div>
        <div className="reveal">
          <window.ConsultationCard slotId="case-studies-consultation-card-avatar" />
        </div>
      </div>
    </section>
  );
}

function CaseStudiesPage() {
  window.useReveal();
  useEffect(() => window.scrollTo(0, 0), []);
  return (
    <div className="case-page-shell">
      <window.Header />
      <main className="dark-theme">
        <CaseHero />
        <CaseGrid />
        <CaseCTA />
      </main>
      <div className="dark-theme">
        <window.SiteFooter />
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<CaseStudiesPage />);
}