const { Button, Eyebrow } = window.NRTRDesignSystem_47db9c;

/**
 * PageHero — interior-page header. Dark sauna-glow band with the leaf mark
 * embossed on the right, an eyebrow (leaf inline) + display title + lede.
 * Matches the homepage hero language at a calmer scale.
 */
function PageHero({ eyebrow, title, lede, primaryLabel, onPrimary, secondaryLabel, secondaryHref, onSecondary, markRight = "-6%" }) {
  return (
    <section style={{ position: "relative", background: "var(--espresso)", color: "var(--linen)", overflow: "hidden" }}>
      <div
        style={{
          position: "absolute",
          inset: 0,
          background: "var(--grad-sauna-glow)",
        }}
      />
      <img
        src="assets/icons/mark-inverted-camel.svg"
        alt=""
        aria-hidden="true"
        style={{ position: "absolute", right: markRight, top: "50%", transform: "translateY(-50%)", height: "150%", width: "auto", opacity: 0.14, pointerEvents: "none" }}
      />
      <div data-hero-group style={{ position: "relative", maxWidth: "var(--container)", margin: "0 auto", padding: "var(--section-pad) var(--space-6)" }}>
        <Eyebrow tone="dark" tracking="0.2em" style={{ fontSize: "12px" }}>
          {eyebrow}
          <span style={{ display: "inline-flex", alignItems: "center", gap: "7px", fontFamily: "var(--font-label)", fontSize: "10px", fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.14em", color: "var(--camel)", border: "1px solid var(--camel-line)", borderRadius: "999px", padding: "4px 11px", background: "var(--camel-glass)", marginLeft: "4px" }}>
            <span aria-hidden="true" style={{ width: 5, height: 5, borderRadius: "50%", background: "var(--camel)", display: "inline-block" }} />
            Opening Spring 2027
          </span>
        </Eyebrow>
        <h1
          style={{
            fontFamily: "var(--font-display)",
            fontWeight: 400,
            fontSize: "var(--fs-hero-page)",
            lineHeight: 1.04,
            letterSpacing: "-0.015em",
            margin: "22px 0 0",
            maxWidth: "18ch",
            color: "var(--linen)",
          }}
        >
          {title}
        </h1>
        {lede && (
          <p
            style={{
              fontFamily: "var(--font-body)",
              fontSize: "clamp(1.05rem, 1.5vw, 1.3rem)",
              lineHeight: 1.55,
              color: "var(--linen)",
              opacity: 0.86,
              maxWidth: "50ch",
              margin: "26px 0 0",
            }}
          >
            {lede}
          </p>
        )}
        {(primaryLabel || secondaryLabel) && (
          <div className="nrtr-hero-cta" style={{ display: "flex", gap: "14px", marginTop: "36px", flexWrap: "wrap" }}>
            {primaryLabel && (
              <Button variant="primary" size="lg" onClick={onPrimary}>{primaryLabel}</Button>
            )}
            {secondaryLabel && (
              onSecondary ? (
                <Button variant="camel" size="lg" onClick={onSecondary}>{secondaryLabel}</Button>
              ) : (
                <Button variant="camel" size="lg" href={secondaryHref}>{secondaryLabel}</Button>
              )
            )}
          </div>
        )}
      </div>
    </section>
  );
}

window.PageHero = PageHero;