/* Shared layout kit for Calming Spot sub-pages. Composes Nav + Footer
   (from window) around page content, plus a reusable page hero. */

const { Button: PkButton, Eyebrow: PkEyebrow, ImagePlaceholder: PkPlaceholder } = window.CalmingSpotDesignSystem_cdab4b;

/* Deep page hero that clears the fixed nav.
   scrim: "default" | "light" — how much the photo is darkened.
   mediaPosition: object-position for the photo (e.g. "center 30%"). */
function PageHero({ eyebrow, title, lead, actions, crumb, mediaLabel, mediaSrc, scrim, mediaPosition, decor }) {
  return (
    <header className={"pg-hero" + (scrim === "light" ? " pg-hero--light" : "")}>
      {mediaLabel ? (
        <div className="pg-hero__media"><PkPlaceholder tone="deep" label={mediaLabel} showLabel={false} objectPosition={mediaPosition} src={mediaSrc} /></div>
      ) : null}
      <div className="pg-hero__scrim" aria-hidden="true" />
      {decor ? <div className="pg-hero__decor" aria-hidden="true">{decor}</div> : null}
      {crumb ? (
        <p className="pg-crumb" style={{ marginBottom: 0, paddingTop: 0 }}>
          <a href="index.html">Home</a> &nbsp;/&nbsp; {crumb}
        </p>
      ) : null}
      <div className="pg-hero__inner">
        {eyebrow ? <PkEyebrow>{eyebrow}</PkEyebrow> : null}
        <h1 className="pg-hero__title">{title}</h1>
        {lead ? <p className="pg-hero__lead">{lead}</p> : null}
        {actions ? <div className="pg-hero__actions">{actions}</div> : null}
      </div>
    </header>
  );
}

/* Renders Nav + main(content) + Footer into #root. */
function renderPage(content) {
  const { Nav, Footer } = window;
  ReactDOM.createRoot(document.getElementById("root")).render(
    <>
      <Nav />
      <main>{content}</main>
      <Footer />
    </>
  );
}

/* small check icon for lists */
function PkCheck() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>
  );
}

Object.assign(window, { PageHero, renderPage, PkCheck, PkButton, PkEyebrow, PkPlaceholder });