// Shared primitives — Page frame at US Letter, footer chrome, ridge mark.

const SRPage = ({ children, style = {}, footer, footerSlot, padding = "72px 84px 60px", noFooter, pageNumber, pageOf, doc }) => {
  const f = window.SR_CONTENT.practice;
  return (
    <div className="sr-page" style={{
      width: 816, height: 1056, // 8.5×11 at 96dpi
      background: "var(--sr-cream)",
      color: "var(--sr-ink)",
      fontFamily: "var(--sr-serif)",
      position: "relative",
      padding,
      boxSizing: "border-box",
      overflow: "hidden",
      ...style,
    }}>
      {children}
      {!noFooter && (
        <div style={{
          position: "absolute", left: 84, right: 84, bottom: 32,
          display: "flex", alignItems: "center", justifyContent: "space-between",
          fontFamily: "var(--sr-sans)",
          fontSize: 8.5, letterSpacing: "0.18em", textTransform: "uppercase",
          color: "var(--sr-sage-pale)",
          paddingTop: 14, borderTop: "0.5px solid var(--sr-sage-haze)",
        }}>
          <span style={{ whiteSpace: "nowrap" }}>{f.legal.toUpperCase()}</span>
          {footerSlot}
          <span style={{ whiteSpace: "nowrap" }}>{pageNumber != null ? `${pageNumber} / ${pageOf}` : f.web}</span>
        </div>
      )}
    </div>
  );
};

// Tiny mountain ridge brush mark (echoes the logo)
const RidgeMark = ({ width = 64, color = "var(--sr-sage)", style = {} }) => (
  <svg viewBox="0 0 120 28" width={width} style={{ display: "block", ...style }} preserveAspectRatio="none">
    <path
      d="M 2 22 C 12 20, 18 16, 26 10 C 34 4, 42 6, 50 12 C 56 16, 62 14, 68 10 C 76 4, 86 6, 94 14 C 102 20, 112 22, 118 22"
      stroke={color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" fill="none" opacity="0.85"
    />
    <path
      d="M 30 16 C 36 12, 44 14, 50 18"
      stroke={color} strokeWidth="1.6" strokeLinecap="round" fill="none" opacity="0.5"
    />
  </svg>
);

// A small mountain "•" glyph used as a section divider
const RidgeGlyph = ({ size = 14, color = "var(--sr-sage-mid)" }) => (
  <svg viewBox="0 0 24 12" width={size} height={size * 0.5} style={{ display: "inline-block", verticalAlign: "middle" }}>
    <path d="M 1 11 L 8 3 L 12 7 L 16 2 L 23 11" stroke={color} strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

// Eyebrow small caps
const Eyebrow = ({ children, color, style }) => (
  <div style={{
    fontFamily: "var(--sr-sans)",
    fontSize: 10, letterSpacing: "0.24em",
    textTransform: "uppercase", fontWeight: 500,
    color: color || "var(--sr-sage-pale)",
    ...style,
  }}>{children}</div>
);

const Caps = ({ children, size = 10, tracking = "0.18em", color, style }) => (
  <span style={{
    fontFamily: "var(--sr-sans)", fontSize: size, letterSpacing: tracking,
    textTransform: "uppercase", fontWeight: 500,
    color: color || "var(--sr-sage-mid)",
    ...style,
  }}>{children}</span>
);

Object.assign(window, { SRPage, RidgeMark, RidgeGlyph, Eyebrow, Caps });