// Hero — editorial chrome, numbers-forward subhead.
function HpHero({ bg }) {
  return (
    <section
      className="hp-section--xl"
      style={{
        background: bg,
        borderBottom: "1px solid var(--rule)",
      }}
    >
      <div className="hp-container">
        <div className="hp-eyebrow-row">
          <span className="eyebrow">Performance Affiliate Marketing · Nutra · Digital · Pay-per-Call</span>
          <span className="eyebrow hp-hide-sm">2× ClickBank Platinum · 2024 / 2025</span>
        </div>
        <h1 className="hp-hero-title">
          <span style={{ position: "relative", display: "inline-block" }}>
            <span style={{ fontWeight: 500 }}>Offers</span>
            <span style={{ position: "absolute", left: 0, bottom: -8, width: "100%", height: 6, background: "var(--coral)" }} />
          </span>
          {" that "}
          <span style={{ fontWeight: 200 }}>scale.</span>
        </h1>

        <div
          className="hp-grid hp-grid-2"
          style={{ marginTop: 64 }}
        >
          <p className="hp-hero-sub">
            Scale Media LLC is a performance media-buying studio for offer owners on
            {" "}<strong style={{ fontWeight: 500, color: "var(--ink)" }}>ClickBank</strong>,
            {" "}<strong style={{ fontWeight: 500, color: "var(--ink)" }}>Digistore24</strong>,
            {" "}<strong style={{ fontWeight: 500, color: "var(--ink)" }}>Buygoods</strong>,
            {" "}<strong style={{ fontWeight: 500, color: "var(--ink)" }}>Maxweb</strong>,
            {" "}<strong style={{ fontWeight: 500, color: "var(--ink)" }}>MarketCall</strong>,
            {" "}<strong style={{ fontWeight: 500, color: "var(--ink)" }}>Aragon</strong> and
            {" "}<strong style={{ fontWeight: 500, color: "var(--ink)" }}>Ray</strong>.
            {" "}<span style={{ color: "var(--coral-700)" }}>$1M+ in tested ad spend.</span>
            {" "}Two ClickBank Platinum awards. Nutra, digital products, and pay-per-call insurance — run profitably at scale.
          </p>
          <div style={{ display: "flex", gap: 12, justifySelf: "start", flexWrap: "wrap" }}>
            <a href="contact.html" className="hp-btn hp-btn--primary">Get in touch →</a>
            <a href="contact.html?type=offer" className="hp-btn hp-btn--ghost">Submit your offer</a>
          </div>
        </div>
      </div>
    </section>
  );
}
window.HpHero = HpHero;