// SectionHeader — eyebrow row + display headline.
// Format: <italic numeral> / <UPPERCASE TRACKED EYEBROW>
// Per the brief; the numeral and slash are bordeaux, the eyebrow is muted ink.
function SectionHeader({ number, eyebrow, title, dark = false }) {
  const mutedColor = dark ? "rgba(255,255,255,0.55)" : "var(--ink-muted)";
  const titleColor = dark ? "var(--ink-inverse)" : "var(--ink)";

  return (
    <div>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 22 }}>
        <span
          style={{
            fontFamily: "var(--font-display)",
            fontStyle: "italic",
            fontWeight: 400,
            fontSize: 20,
            color: "var(--accent)",
            lineHeight: 1,
          }}
        >
          {number}
        </span>
        <span
          style={{
            fontFamily: "var(--font-display)",
            fontStyle: "italic",
            fontWeight: 300,
            fontSize: 20,
            color: "var(--accent)",
            opacity: 0.6,
            lineHeight: 1,
          }}
        >
          /
        </span>
        <span
          style={{
            fontFamily: "var(--font-ui)",
            fontWeight: 500,
            fontSize: 13,
            letterSpacing: "0.18em",
            textTransform: "uppercase",
            color: mutedColor,
          }}
        >
          {eyebrow}
        </span>
      </div>
      <h2
        style={{
          fontFamily: "var(--font-display)",
          fontWeight: 400,
          fontVariationSettings: '"opsz" 96',
          fontSize: "clamp(1.875rem, 4vw, 3rem)",
          lineHeight: 1.08,
          letterSpacing: "-0.015em",
          color: titleColor,
          margin: 0,
          maxWidth: "20ch",
        }}
      >
        {title}
      </h2>
    </div>
  );
}

Object.assign(window, { SectionHeader });