// Section header — eyebrow + title + meta line. Used for every major section.
const SectionHeader = ({ index, eyebrow, title, meta }) => (
  <header style={{
    display: "grid",
    gridTemplateColumns: "minmax(180px, 220px) 1fr auto",
    gap: 48,
    alignItems: "baseline",
    paddingBottom: 32,
    marginBottom: 48,
    borderBottom: "1px solid var(--jh-rule-strong)",
  }}>
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <span style={{
        fontFamily: "var(--jh-font-mono)",
        fontSize: 11,
        letterSpacing: "0.32em",
        color: "var(--jh-amber)",
      }}>§ {index}</span>
      <span style={{
        fontFamily: "var(--jh-font-mono)",
        fontSize: 11,
        letterSpacing: "0.22em",
        textTransform: "uppercase",
        color: "var(--jh-fg-3)",
      }}>{eyebrow}</span>
    </div>
    <h2 style={{
      fontFamily: "var(--jh-font-display)",
      fontWeight: 900,
      fontSize: "clamp(48px, 6vw, 96px)",
      lineHeight: 0.9,
      letterSpacing: "-0.025em",
      textTransform: "uppercase",
      color: "var(--jh-fg)",
      margin: 0,
    }}>{title}</h2>
    {meta ? (
      <span style={{
        fontFamily: "var(--jh-font-mono)",
        fontSize: 10,
        letterSpacing: "0.22em",
        textTransform: "uppercase",
        color: "var(--jh-fg-3)",
        whiteSpace: "nowrap",
        alignSelf: "end",
      }}>{meta}</span>
    ) : <span />}
  </header>
);
window.SectionHeader = SectionHeader;

// SectionWrap — consistent gutters + max-width + id anchor.
const SectionWrap = ({ id, label, children, padding = "128px 0" }) => (
  <section
    id={id}
    data-screen-label={label}
    style={{
      padding,
      borderBottom: "1px solid var(--jh-rule)",
    }}
  >
    <div style={{
      maxWidth: "var(--jh-max-w)",
      margin: "0 auto",
      padding: "0 var(--jh-gutter)",
    }}>
      {children}
    </div>
  </section>
);
window.SectionWrap = SectionWrap;