/* EquiWork website — shared content primitives: inset exhibit, CTA band, page header. */
const sharedDS = window.EquiWorkDesignSystem_e8fee2;

/* Inset exhibit — warm training slides framed as document figures: hairline border, filing bracket, caption. */
function Exhibit({ src, alt, caption, style }) {
  return (
    <figure style={{ position: "relative", margin: 0, background: "#fff", border: "1px solid var(--hairline)", borderRadius: "var(--radius-lg)", padding: 12, boxShadow: "0 1px 2px rgba(11,42,47,.05)", ...style }}>
      <span aria-hidden="true" style={{ position: "absolute", top: -1, left: -1, width: 16, height: 16, borderTop: "2px solid var(--brass-500)", borderLeft: "2px solid var(--brass-500)", borderTopLeftRadius: "var(--radius-lg)" }}></span>
      <img src={src} alt={alt || caption} style={{ display: "block", width: "100%", height: "auto", borderRadius: "calc(var(--radius-lg) - 6px)" }} />
      {caption && <figcaption style={{ margin: 0, padding: "12px 6px 2px", fontSize: 13, lineHeight: 1.5, color: "var(--ink-600)" }}><span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--brass-700)", marginRight: 8 }}>EXHIBIT</span>{caption}</figcaption>}
    </figure>
  );
}

/* Closing dark CTA band — one per page. */
function CtaBand({ eyebrow = "Engage", title, lead, ctaLabel = "Request a consultation", onClick }) {
  return (
    <section style={{ background: "var(--surface-teal)", padding: "80px 24px" }}>
      <div style={{ maxWidth: "var(--container)", margin: "0 auto" }}>
        <div style={{ marginBottom: 18 }}><span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}><span style={{ width: 24, height: 2, background: "var(--brass-300)" }}></span><span style={{ fontSize: 12, fontWeight: 600, letterSpacing: "1.4px", textTransform: "uppercase", color: "var(--brass-300)" }}>{eyebrow}</span></span></div>
        <h2 style={{ margin: 0, maxWidth: "22ch", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 36, lineHeight: 1.22, letterSpacing: "-0.3px", color: "var(--on-teal)" }}>{title}</h2>
        {lead && <p style={{ margin: "16px 0 0", maxWidth: "54ch", fontSize: 18, lineHeight: 1.6, color: "var(--on-teal-mute)" }}>{lead}</p>}
        <div style={{ marginTop: 30 }}>
          <sharedDS.Button size="lg" variant="secondary" style={{ background: "transparent", color: "var(--on-teal)", borderColor: "var(--on-teal)" }} onClick={onClick}>{ctaLabel}</sharedDS.Button>
        </div>
      </div>
    </section>
  );
}

/* Page header on parchment with breadcrumb. */
function PageHead({ crumbs, eyebrow, title, standfirst, children, wide }) {
  return (
    <section style={{ background: "var(--parchment)", padding: "40px 24px 64px" }}>
      <div style={{ maxWidth: "var(--container)", margin: "0 auto" }}>
        {crumbs && <div style={{ marginBottom: 24 }}><sharedDS.Breadcrumb items={crumbs} /></div>}
        {eyebrow && <div style={{ marginBottom: 16 }}><sharedDS.Eyebrow>{eyebrow}</sharedDS.Eyebrow></div>}
        <h1 style={{ margin: 0, maxWidth: wide ? "24ch" : "18ch", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 44, lineHeight: 1.16, letterSpacing: "-0.4px", color: "var(--teal-800)" }}>{title}</h1>
        {standfirst && <p style={{ margin: "20px 0 0", maxWidth: "58ch", fontSize: 20, lineHeight: 1.6, color: "var(--ink-800)" }}>{standfirst}</p>}
        {children}
      </div>
    </section>
  );
}

/* Long-form styles reused across screens. */
const proseStyles = {
  h2: { margin: "36px 0 10px", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 28, lineHeight: 1.3, letterSpacing: "-0.2px", color: "var(--teal-800)" },
  h3: { margin: "0 0 8px", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 23, lineHeight: 1.3, color: "var(--teal-800)" },
  p: { margin: "0 0 18px", maxWidth: "68ch", fontSize: 18, lineHeight: 1.62, color: "var(--ink-900)" },
  citation: { fontFamily: "var(--font-mono)", fontSize: 14, fontStyle: "normal", color: "var(--brass-700)" },
  footnote: { fontSize: 14, lineHeight: 1.55, color: "var(--ink-600)" },
  pull: { margin: "30px 0", padding: "0 0 0 24px", borderLeft: "3px solid var(--brass-500)", fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 21, lineHeight: 1.5, color: "var(--ink-900)", maxWidth: "60ch" },
};

Object.assign(window, { Exhibit, CtaBand, PageHead, proseStyles });