/* Section 7 — Routing Module: Done for you / Done with you */
function Routing() {
  return (
    <section id="routing" className="section--light section-pad" data-screen-label="05 Routing">
      <div className="container">
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto clamp(56px, 6vw, 80px)' }}>
          <p className="eyebrow">Two ways to win property management work</p>
          <h2 className="h-section" style={{ marginBottom: 24 }}>
            Done for you, or done with you.
          </h2>
          <p className="lede" style={{ margin: '0 auto', maxWidth: '52ch' }}>
            We work two ways with home service contractors. Choose the path that fits your business.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1px 1fr',
          gap: 0,
          alignItems: 'stretch',
          maxWidth: 1080,
          margin: '0 auto',
          border: '1px solid var(--border)',
          borderRadius: 16,
          overflow: 'hidden',
          background: 'white',
        }}>
          <RoutingColumn
            logo={<img src="brand/pmhoa-logo-dark.png" alt="PMHOA Pro" style={{ height: 26 }} />}
            heading="Done for you."
            body={<>
              We become your commercial sales team. Our people make the calls, send the emails, deliver the presentations, and book the bids and meetings on your behalf. You handle the work that comes in.
              <span style={{ display: 'block', marginTop: 14, fontStyle: 'italic', fontSize: 14, color: 'var(--fg-subtle)' }}>
                Already have a sales rep on staff? We work alongside your existing BDR team.
              </span>
            </>}
            bestFor="Contractors with capacity to take on more work and the operational room to handle it, who would rather invest in outcomes than build internal capability."
            linkText="You're already on the right page. Scroll down to check your territory"
            linkHref="#midcta"
            highlight
          />
          <div style={{ background: 'var(--border)' }} />
          <RoutingColumn
            logo={<img src="brand/10xbdr-red.png" alt="10X Your BDR" style={{ height: 28 }} />}
            heading="Done with you."
            body="We build your Property Management Sales Engine from the inside out — one-on-one, over 12 weeks. Your rep gets the system, the training, and the tools to run it. You own the capability permanently."
            bestFor="Contractors who want to build a repeatable property management sales engine internally — whether they already have a rep or plan to hire one."
            linkText="Learn more about 10X Your BDR"
            linkHref="https://10xyourbdr.com"
            external
          />
        </div>
      </div>
    </section>
  );
}

function RoutingColumn({ logo, heading, body, bestFor, linkText, linkHref, external, highlight }) {
  return (
    <div style={{
      padding: 'clamp(36px, 4vw, 56px)',
      display: 'grid',
      gridTemplateRows: 'auto auto 1fr auto',
      gap: 24,
      background: 'white',
      position: 'relative',
    }}>
      {highlight && (
        <span style={{
          position: 'absolute',
          top: 20, right: 20,
          fontSize: 10,
          fontWeight: 800,
          letterSpacing: '0.14em',
          textTransform: 'uppercase',
          color: 'var(--pmhoa-blue)',
          background: 'rgba(18,144,207,0.10)',
          padding: '4px 8px',
          borderRadius: 4,
        }}>
          You're here
        </span>
      )}
      <div style={{ height: 44, display: 'flex', alignItems: 'center' }}>{logo}</div>

      <div>
        <h3 style={{
          fontSize: 'clamp(28px, 2.6vw, 36px)',
          fontWeight: 800,
          letterSpacing: '-0.022em',
          lineHeight: 1.05,
          margin: '0 0 18px',
        }}>{heading}</h3>
        <div style={{
          margin: 0,
          fontSize: 16,
          lineHeight: 1.55,
          color: 'var(--fg-muted)',
        }}>{body}</div>
      </div>

      <div style={{
        padding: 18,
        background: 'var(--bg-subtle)',
        border: '1px solid var(--border)',
        borderRadius: 10,
      }}>
        <div style={{
          fontSize: 11,
          fontWeight: 800,
          letterSpacing: '0.14em',
          textTransform: 'uppercase',
          color: 'var(--fg-subtle)',
          marginBottom: 8,
        }}>Best for</div>
        <p style={{
          margin: 0,
          fontSize: 14,
          lineHeight: 1.5,
          color: 'var(--fg)',
        }}>{bestFor}</p>
      </div>

      <a
        href={linkHref}
        className="text-link"
        target={external ? '_blank' : undefined}
        rel={external ? 'noopener noreferrer' : undefined}
        style={{ fontWeight: 700 }}
      >
        {linkText}
      </a>
    </div>
  );
}

window.Routing = Routing;