{
/* ============================================================
   Content Stack Lab - Portfolio Page
   ============================================================ */
const { useEffect, useState } = React;

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

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

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

function PortfolioPills({ pills }) {
  return (
    <div className="portfolio-pills" aria-label="Portfolio focus areas">
      {(pills || []).map((pill) => <span className="portfolio-pill" key={pill}>{pill}</span>)}
    </div>
  );
}

function PortfolioTile({ item }) {
  const content = (
    <div className={`bento-card portfolio-tile reveal${item.size ? " bento-card--" + item.size : ""}`}>
      <div className="bento-card__media" style={{ background: item.gradient }}>
        {item.image ? <img className="portfolio-tile__img" src={item.image} alt={item.title || "Portfolio image"} loading="lazy" /> : <div className="portfolio-tile__empty">Portfolio image</div>}
      </div>
      <div className="bento-card__overlay" />
      {item.title ? <div className="bento-card__caption"><h2>{item.title}</h2></div> : null}
    </div>
  );
  return item.link ? <a className="portfolio-tile__link" href={item.link}>{content}</a> : content;
}

function PortfolioTabs() {
  const [activeTab, setActiveTab] = useState("");
  if (!portfolioTabs.length) return null;

  return (
    <section className="portfolio-tabs-section dark-theme">
      <div className="wrap portfolio-tabs">
        {portfolioTabs.map((tab) => {
          const isActive = activeTab === tab.id;
          const panelId = `${tab.id}-panel`;
          return (
            <article className={`portfolio-tab reveal${isActive ? " active" : ""}`} key={tab.id}>
              <button
                className="portfolio-tab__trigger"
                type="button"
                aria-expanded={isActive}
                aria-controls={panelId}
                onClick={(e) => {
                  const willOpen = !isActive;
                  const trigger = e.currentTarget;
                  setActiveTab(willOpen ? tab.id : "");
                  // Closing a tab above shifts the page up; pull the opened
                  // title back into view once the layout settles.
                  if (willOpen) requestAnimationFrame(() => trigger.scrollIntoView({ block: "start", behavior: "smooth" }));
                }}
              >
                <span>
                  <strong>{tab.title}</strong>
                  {tab.subtitle && tab.subtitle !== tab.title ? <em>{tab.subtitle}</em> : null}
                </span>
                <i aria-hidden="true" />
              </button>
              {isActive && (
                <div className="portfolio-tab__panel" id={panelId}>
                  {tab.pills && tab.pills.length ? <PortfolioPills pills={tab.pills} /> : null}
                  <div className="bento-grid portfolio-bento">
                    {tab.tiles.map((item) => <PortfolioTile item={item} key={item.slot} />)}
                  </div>
                </div>
              )}
            </article>
          );
        })}
      </div>
    </section>
  );
}

function PortfolioCTA() {
  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">Ready to scope it?</p>
          {pageCta.heading ? <DotTitle as="h2" text={pageCta.heading} /> : null}
          {pageCta.subheading ? <p>{pageCta.subheading}</p> : null}
        </div>
        <div className="reveal">
          <window.ConsultationCard slotId="portfolio-consultation-card-avatar" />
        </div>
      </div>
    </section>
  );
}

function PortfolioPage() {
  window.useReveal();
  useEffect(() => window.scrollTo(0, 0), []);
  return (
    <div className="case-page-shell portfolio-page-shell">
      <window.Header />
      <main className="dark-theme">
        <PortfolioHero />
        <PortfolioTabs />
        <PortfolioCTA />
      </main>
      <div className="dark-theme">
        <window.SiteFooter />
      </div>
    </div>
  );
}

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