// StoryBrand Hero — passes the "grunt test": what / how life gets better / how to get it
function SBHero({ onOpenModal, onOpenGuide, layout }) {
  const isFullBleed = layout === 'fullbleed';

  const eyebrow = <div className="hero-eyebrow">For Austin Homebuyers</div>;

  const title = (
    <h1 className="hero-title">
      Buy your Austin home<br/>
      <em>with a way out.</em>
    </h1>
  );

  const sub = (
    <p className="hero-sub">
      Most buyers commit to $600,000+ before spending a single night in
      the house. We help you tour, buy, and ... if the home isn't right ...
      <b style={{ color: isFullBleed ? '#fff' : 'var(--ink)', fontWeight: 500 }}> sell it for free </b>
      for up to 18 months.
    </p>
  );

  const ctas = (
    <div className="cta-pair">
      <button className="btn-primary" onClick={onOpenModal}>
        Book a Buyer Call →
      </button>
      <button className="cta-transitional" onClick={onOpenGuide}>
        Get the Free Austin Buyer Guide
      </button>
    </div>
  );

  const trust = (
    <div className="hero-trust">
      Owner-occupied Austin homes purchased with a Byrne Real Estate Group agent.
    </div>
  );

  if (isFullBleed) {
    return (
      <section id="top" className="hero sb-hero hero-fullbleed">
        <div className="hero-inner">
          <div className="hero-media">
            <img
              src="assets/hero-home.jpg"
              alt="A modern Austin home at golden hour"
              onError={(e) => { e.target.style.display = 'none'; }}
            />
            <div className="placeholder" aria-hidden="true">
              <span>◊</span>
              <span>Austin home photograph</span>
            </div>
          </div>
          <img
            className="shield"
            src="assets/byrne-guarantee-shield.png"
            alt="The Byrne Buyer Guarantee shield"
          />
          <div className="hero-content">
            {eyebrow}
            {title}
            {sub}
            {ctas}
            {trust}
          </div>
        </div>
      </section>
    );
  }

  return (
    <section id="top" className="hero sb-hero">
      <div className="hero-inner">
        <div className="hero-copy">
          {eyebrow}
          {title}
          {sub}
          {ctas}
          {trust}
        </div>
        <div className="hero-media">
          <img
            src="assets/hero-home.jpg"
            alt="A modern Austin home at golden hour"
            onError={(e) => { e.target.style.display = 'none'; }}
          />
          <div className="placeholder" aria-hidden="true">
            <span>◊</span>
            <span>Austin home photograph</span>
          </div>
          <img
            className="shield"
            src="assets/byrne-guarantee-shield.png"
            alt="The Byrne Buyer Guarantee shield"
          />
        </div>
      </div>
    </section>
  );
}

window.SBHero = SBHero;