/* Section 9 — Mid-page CTA (full, scarcity-led) */
function MidCTA() {
  return (
    <section id="midcta" className="section--ink section-pad" data-screen-label="09 Mid CTA" style={{ position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(circle at 25% 50%, rgba(18,144,207,0.18), transparent 50%)',
        pointerEvents: 'none',
      }} />
      <div className="container" style={{ position: 'relative' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 6fr) minmax(0, 5fr)',
          gap: 80,
          alignItems: 'center',
        }} className="two-col">
          <div>
            <p className="eyebrow eyebrow--light">The next step</p>
            <h2 className="h-section" style={{ marginBottom: 28, color: 'white' }}>
              See if your territory is open.
            </h2>
            <div className="body-prose">
              <p style={{ color: 'rgba(255,255,255,0.82)' }}>
                We only work with <strong style={{ color: 'white', fontWeight: 700 }}>2 contractors per territory per vertical.</strong> Enter
                your ZIP code and we'll check availability. If your area is open and
                you're the right fit, we'll run a <strong style={{ color: 'white', fontWeight: 700 }}>free property management audit</strong> of
                your service zone — every PM decision-maker in your area, what they
                manage, and what the relationship is worth.
              </p>
            </div>

            {/* Mini scarcity panel */}
            <div style={{
              marginTop: 32,
              display: 'grid',
              gridTemplateColumns: 'repeat(3, 1fr)',
              gap: 0,
              border: '1px solid rgba(255,255,255,0.12)',
              borderRadius: 10,
              overflow: 'hidden',
              maxWidth: 540,
            }}>
              <ScarcityCell value="2" label="contractors per territory, per vertical" />
              <ScarcityCell value="48h" label="territory check turnaround" />
              <ScarcityCell value="0$" label="audit fee" last />
            </div>
          </div>

          <div>
            <CTAButton id="midcta-form" source="midcta" />
          </div>
        </div>
      </div>
    </section>
  );
}

function ScarcityCell({ value, label, last }) {
  return (
    <div style={{
      padding: '16px 18px',
      borderRight: last ? 'none' : '1px solid rgba(255,255,255,0.12)',
    }}>
      <div className="tnum" style={{
        fontFamily: 'var(--font-display)',
        fontSize: 28,
        fontWeight: 800,
        letterSpacing: '-0.02em',
        color: 'white',
        lineHeight: 1,
      }}>{value}</div>
      <div style={{
        fontSize: 12,
        color: 'rgba(255,255,255,0.6)',
        marginTop: 6,
        letterSpacing: '0.01em',
      }}>{label}</div>
    </div>
  );
}

window.MidCTA = MidCTA;