// Home hero — two-block layout: text column on the left, editorial
// portrait on the right. The monogram now lives in the nav; the
// Two-Paths block right below the hero does the routing.
function Hero({ onContact }) {
  return (
    <section className="hero-wrap" data-screen-label="01 Hero">
      <div className="hero-grid">
        {/* LEFT — positioning + credential + actions */}
        <div className="hero-left">
          <div className="hero-left-top">
            <span className="hero-eyebrow">IPV intervention practitioner &amp; consultant</span>
          </div>
          <div>
            <h1 className="hero-headline">I help intervention programs move past compliance toward change</h1>
            <p className="hero-sub">
              I work with programs, the agencies that oversee them, and community partners. Everything I bring has been tested in practice, not just in theory.
            </p>
            <p className="hero-credential">25+ years in direct practice, with facilitator trainings and curricula used by programs nationwide.</p>
            <div className="hero-actions">
              <button className="btn-primary" onClick={onContact}>
                Get in touch
                <span aria-hidden="true">→</span>
              </button>
              <a className="btn-secondary btn-on-dark" href="Services.html">
                Browse services
              </a>
            </div>
          </div>
        </div>

        {/* RIGHT — editorial portrait */}
        <div className="hero-portrait" role="img" aria-label="Portrait of Lee Giordano"></div>
      </div>
    </section>
  );
}

window.HomeHero = Hero;