// Homepage "start here" band: one question instead of a task inventory.
// Owners can't let go because they don't know what to let go of, so ask
// where they don't want to spend their time.
function HandOff() {
  return (
    <section id="pain" className="bm-ho">
      <style>{`
        /* Dark band, same treatment as the partner pages' closing band, so the
           page alternates white / grey / white / dark / grey. */
        .bm-ho { background: var(--ink); padding: 96px max(32px, calc((100% - 1040px) / 2)); text-align: center; }
        .bm-ho-eyebrow { font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-mid); margin-bottom: 16px; }
        .bm-ho-h2 { font-family: 'Outfit', sans-serif; font-size: 40px; font-weight: 600; line-height: 1.08; letter-spacing: -.025em; color: #fff; max-width: 900px; margin: 0 auto 18px; }
        .bm-ho-h2 em { font-style: normal; color: var(--blue-mid); display: block; }
        .bm-ho-lead { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.8); max-width: 56ch; margin: 0 auto 32px; }
        .bm-ho-link { display: inline-flex; align-items: center; gap: 9px; background: #fff; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; padding: 16px 28px; border-radius: 12px; transition: background .18s, transform .18s; }
        .bm-ho-link:hover { background: var(--paper-deep); transform: translateY(-1px); }
        @media (max-width: 860px) { .bm-ho { padding: 64px 20px; } .bm-ho-h2 { font-size: 30px; text-wrap: balance; } .bm-ho-h2 em { display: inline; } .bm-ho-lead { font-size: 16px; } }
      `}</style>
      <div className="bm-ho-eyebrow">Start here</div>
      <h2 className="bm-ho-h2">What's the work you're still doing <em>that you don't enjoy?</em></h2>
      <p className="bm-ho-lead">Most owners don't struggle to let go. They just haven't decided where their time should go. You're responsible for the business, not for doing every piece of the work.</p>
      <a href="#cta" className="bm-ho-link" data-booking-modal-trigger data-booking-source="handoff_cta">
        Book your Welcome Call <span aria-hidden="true">&rarr;</span>
      </a>
    </section>
  );
}

Object.assign(window, { HandOff });