/* Section 4 — The Reframe
   Billboard-scale type, dark bg, centered. The emotional anchor. */
function Reframe() {
  return (
    <section className="section--ink section-pad--airy" data-screen-label="04 Reframe" style={{
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Subtle off-axis accent */}
      <div style={{
        position: 'absolute',
        top: '-20%', left: '-10%',
        width: '60%', height: '140%',
        background: 'radial-gradient(ellipse at center, rgba(18,144,207,0.18), transparent 60%)',
        pointerEvents: 'none',
      }} />
      <div style={{
        position: 'absolute',
        bottom: '-20%', right: '-15%',
        width: '50%', height: '120%',
        background: 'radial-gradient(ellipse at center, rgba(136,195,235,0.10), transparent 60%)',
        pointerEvents: 'none',
      }} />

      <div className="container" style={{ position: 'relative', textAlign: 'center' }}>
        <p className="eyebrow eyebrow--light" style={{ marginBottom: 32 }}>The reframe</p>
        <h2 className="h-billboard" style={{ color: 'white', marginBottom: 56 }}>
          Portfolios,<br/>not appointments.
        </h2>
        <div className="body-prose" style={{ maxWidth: 640, margin: '0 auto', textAlign: 'left' }}>
          <p style={{ color: 'rgba(255,255,255,0.82)' }}>
            Most home service companies grow one homeowner at a time. Google Ads.
            Review-chasing. Storm-chasing. Every job is a fresh fight, every January
            resets to zero. Property managers are different. One conversation can win
            you a portfolio of buildings — and a contract that renews automatically
            for years.
          </p>
          <p style={{
            color: 'var(--pmhoa-blue-light)',
            fontWeight: 600,
            fontStyle: 'italic',
            fontSize: 18,
            marginTop: 28,
          }}>
            That's the business we're in.
          </p>
        </div>
      </div>
    </section>
  );
}

window.Reframe = Reframe;