// HeroBg — THE canonical Power Texas hero background.
//
// This is the single shared implementation of the hero background used by both
// the homepage hero and interior hero(es). It renders the exact DOM layer stack
// the homepage has always used — base tint + diagonal gradient + center vignette
// + two swirl/pinwheel marks — and its styles live in hero-bg.css under the
// `.pt-herobg*` selectors (the one and only definition of these layers).
//
// Usage: render <HeroBg /> as the FIRST child of a hero container that is
// `position: relative; overflow: hidden`. The layers fill that container
// (position: absolute; inset: 0) and sit behind the hero content. Load
// hero-bg.css on any page that uses it. No page-specific variant exists — both
// pages call this same component so the backgrounds share one source of truth.
function HeroBg() {
  return (
    <div className="pt-herobg" aria-hidden="true">
      <div className="pt-herobg__grad"></div>
      <div className="pt-herobg__vignette"></div>
      <div className="pt-herobg__swirl"></div>
      <div className="pt-herobg__swirl2"></div>
    </div>
  );
}

window.HeroBg = HeroBg;