/* Section 3 — The Market Case
   Top: headline + body
   Bottom: 3-stat strip, clean type, no boxes
*/
function MarketCase() {
  return (
    <section id="market" className="section--light section-pad" data-screen-label="03 Market case">
      <div className="container">
        <div style={{ maxWidth: 760, marginBottom: 'clamp(56px, 7vw, 100px)' }}>
          <p className="eyebrow">The opportunity</p>
          <h2 className="h-section" style={{ marginBottom: 28 }}>
            A few thousand decision-makers control $41&nbsp;billion in vendor work.
          </h2>
          <div className="body-prose">
            <p>
              Property managers in the U.S. route an estimated $41&nbsp;billion a year to
              home service vendors — roofing, plumbing, HVAC, restoration, electrical,
              general repairs, etc. The work is concentrated. A few thousand property
              management firms control hundreds of thousands of buildings, and they
              hire the same vendors year after year.
            </p>
            <p>
              If you're not on those vendor lists, you're competing for one-off
              residential jobs while a smaller group of contractors collects recurring
              contracts on hundreds of buildings at a time.
            </p>
          </div>
        </div>

        {/* Stat strip — no boxes, just type */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 32,
          borderTop: '1px solid var(--border)',
          paddingTop: 56,
        }}>
          <Stat
            value="$41B"
            label="Annual U.S. vendor spend routed by property managers"
          />
          <Stat
            value="9 in 10"
            label="Property management firms expanding their portfolios in 2026"
          />
          <Stat
            value="8% YoY"
            label="Growth in the property management market"
          />
        </div>

        <p style={{
          marginTop: 24,
          fontSize: 12,
          color: 'var(--fg-subtle)',
          fontStyle: 'italic',
        }}>
          Sources cited in footer.
        </p>
      </div>
    </section>
  );
}

function Stat({ value, label }) {
  return (
    <div>
      <div className="tnum" style={{
        fontFamily: 'var(--font-display)',
        fontSize: 'clamp(56px, 6.5vw, 96px)',
        fontWeight: 800,
        lineHeight: 0.95,
        letterSpacing: '-0.04em',
        color: 'var(--pmhoa-blue)',
        marginBottom: 16,
      }}>
        {value}
      </div>
      <div style={{
        fontSize: 15,
        color: 'var(--fg-muted)',
        lineHeight: 1.5,
        maxWidth: '28ch',
        textWrap: 'pretty',
      }}>
        {label}
      </div>
    </div>
  );
}

window.MarketCase = MarketCase;