// SubpageHero.jsx — compact hero for sub-pages
function LDSubpageHero({ eyebrow, title, sub, kicker }) {
  return (
    <section style={{
      position: "relative",
      background: "var(--ld-cream)",
      overflow: "hidden",
      padding: "72px 0 64px",
      borderBottom: "1px solid var(--ld-line)",
    }}>
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(700px 400px at 50% 0%, rgba(255,214,10,0.10), transparent 70%)",
        pointerEvents: "none",
      }}/>
      <div className="ld-container-wide" style={{ position: "relative", textAlign: "center", maxWidth: 900, marginLeft: "auto", marginRight: "auto" }}>
        <span className="ld-eyebrow ld-eyebrow-dot" style={{ justifyContent: "center" }}>{eyebrow}</span>
        <h1 className="ld-display" style={{
          marginTop: 20,
          fontSize: "clamp(40px, 5.4vw, 64px)",
          letterSpacing: "-2px",
          lineHeight: 1.18,
        }}>
          {title}
        </h1>
        <p className="ld-lead" style={{ marginTop: 36, fontSize: 19, maxWidth: 640, marginLeft: "auto", marginRight: "auto" }}>
          {sub}
        </p>
        {kicker && (
          <div style={{ marginTop: 32, display: "flex", justifyContent: "center", gap: 12, flexWrap: "wrap" }}>
            {kicker}
          </div>
        )}
      </div>
    </section>
  );
}
window.LDSubpageHero = LDSubpageHero;