/* Section 6 — What PMHOA Pro Does
   Editorial intro + 4-step horizontal flow with numbered cards,
   closing pull quote. */
function WhatWeDo() {
  return (
    <section id="service" className="section--light section-pad" data-screen-label="07 Service">
      <div className="container">
        <div style={{ maxWidth: 760, marginBottom: 'clamp(48px, 6vw, 80px)' }}>
          <p className="eyebrow">The service</p>
          <h2 className="h-section" style={{ marginBottom: 28 }}>
            We build property management relationships in your territory, on your behalf.
          </h2>
          <div className="body-prose">
            <p>
              PMHOA Pro is a done-for-you outbound sales operation. We work as your
              commercial sales team — under your brand, in your territory.
            </p>
            <p style={{ color: 'var(--fg-muted)', fontWeight: 500 }}>
              Here's what we actually do:
            </p>
          </div>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 1,
          background: 'var(--border)',
          borderRadius: 14,
          overflow: 'hidden',
          border: '1px solid var(--border)',
        }}>
          <Step
            n="01"
            title="Research"
            body="We map every property management decision-maker in your service area. The people who control the work, what they manage, and what they're worth."
          />
          <Step
            n="02"
            title="Outreach"
            body="We engage them across email, phone, and Zoom using a sales process built specifically for the property management buyer — built to start relationships, not chase one-off jobs."
          />
          <Step
            n="03"
            title="Relationship building"
            body="We move PMs from cold to warm to actively engaged. We respond to inquiries. We earn top-of-mind awareness and become a preferred vendor."
          />
          <Step
            n="04"
            title="You Step In"
            body="When a PM is ready to give you a bid, we engage your boots-on-the-ground team — your service technicians or estimators — to pass the opportunity off cleanly. You handle the work. We keep the relationship hot and start building the next one."
            last
          />
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 80,
          marginTop: 'clamp(56px, 6vw, 80px)',
          alignItems: 'start',
        }} className="two-col">
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'auto 1fr',
            gap: 16,
            padding: '28px 32px',
            background: 'white',
            borderRadius: 12,
            border: '1px solid var(--border)',
          }}>
            <div style={{
              width: 8, alignSelf: 'stretch',
              background: 'var(--pmhoa-ink)',
              borderRadius: 4,
            }} />
            <div>
              <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--fg-subtle)', marginBottom: 6 }}>
                We handle
              </div>
              <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.015em' }}>
                The pipeline.
              </div>
              <p style={{ margin: '10px 0 0', color: 'var(--fg-muted)', fontSize: 15, lineHeight: 1.5 }}>
                Research. Outreach. Relationships. Nurturing.
              </p>
            </div>
          </div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'auto 1fr',
            gap: 16,
            padding: '28px 32px',
            background: 'white',
            borderRadius: 12,
            border: '1px solid var(--border)',
          }}>
            <div style={{
              width: 8, alignSelf: 'stretch',
              background: 'var(--pmhoa-blue)',
              borderRadius: 4,
            }} />
            <div>
              <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--fg-subtle)', marginBottom: 6 }}>
                You handle
              </div>
              <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.015em' }}>
                The work.
              </div>
              <p style={{ margin: '10px 0 0', color: 'var(--fg-muted)', fontSize: 15, lineHeight: 1.5 }}>
                Crews. Equipment. Service quality. Delivery.
              </p>
            </div>
          </div>
        </div>

        <Cascade />
      </div>
    </section>
  );
}

function Step({ n, title, body, last }) {  return (
    <div style={{
      background: 'white',
      padding: '28px 24px 28px',
      display: 'grid',
      gap: 12,
      alignContent: 'start',
      position: 'relative',
    }}>
      <div style={{
        display: 'flex', alignItems: 'baseline', gap: 12,
      }}>
        <span className="tnum" style={{
          fontFamily: 'var(--font-condensed)',
          fontSize: 14,
          fontWeight: 700,
          color: 'var(--pmhoa-blue)',
          letterSpacing: '0.08em',
        }}>{n}</span>
        <div style={{
          flex: 1, height: 1,
          background: 'var(--border)',
        }} />
        {!last && (
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--neutral-300)" strokeWidth="2" style={{ flexShrink: 0 }}>
            <path d="M5 12h14M13 5l7 7-7 7" />
          </svg>
        )}
      </div>
      <h4 style={{
        margin: '6px 0 0',
        fontSize: 20,
        fontWeight: 800,
        letterSpacing: '-0.015em',
      }}>{title}</h4>
      <p style={{
        margin: 0,
        fontSize: 14,
        lineHeight: 1.55,
        color: 'var(--fg-muted)',
      }}>{body}</p>
    </div>
  );
}

/* Cascade — stair-step left-aligned visualization of the bids → relationships → interactions → daily sales chain */
function Cascade() {
  const rows = [
    { lead: 'Bids and jobs', tail: 'relationships', indent: 0 },
    { lead: 'Relationships', tail: 'quality interactions', indent: 1 },
    { lead: 'Quality interactions', tail: 'daily sales efforts', indent: 2 },
  ];
  return (
    <div style={{
      margin: 'clamp(64px, 8vw, 100px) 0 0',
      padding: '48px 0 0',
      borderTop: '1px solid var(--border)',
    }}>
      <p className="eyebrow">The chain</p>
      <div style={{ display: 'grid', gap: 8, marginTop: 12 }}>
        {rows.map((row, i) => (
          <div
            key={i}
            style={{
              paddingLeft: `calc(${row.indent} * clamp(24px, 3vw, 44px))`,
              display: 'flex',
              alignItems: 'baseline',
              gap: 12,
            }}
          >
            {i > 0 && (
              <span aria-hidden="true" style={{
                color: 'var(--pmhoa-blue)',
                fontSize: 22,
                lineHeight: 1,
                fontWeight: 400,
                transform: 'translateY(-2px)',
                flexShrink: 0,
              }}>
                ↳
              </span>
            )}
            <p style={{
              margin: '6px 0',
              fontSize: 'clamp(17px, 1.6vw, 22px)',
              fontWeight: 500,
              fontStyle: 'italic',
              lineHeight: 1.4,
              letterSpacing: '-0.008em',
              color: 'var(--fg)',
              textWrap: 'pretty',
            }}>
              <strong style={{ fontWeight: 700, fontStyle: 'normal', color: 'var(--fg)' }}>{row.lead}</strong>
              {' are a result of '}
              <span style={{ color: 'var(--pmhoa-blue)', fontWeight: 600, fontStyle: 'normal' }}>{row.tail}.</span>
            </p>
          </div>
        ))}
      </div>
      <p style={{
        marginTop: 28,
        paddingTop: 20,
        borderTop: '1px dashed var(--border)',
        color: 'var(--fg-muted)',
        fontWeight: 600,
        fontSize: 16,
        maxWidth: '60ch',
      }}>
        That's the work we do every day, on your behalf.
      </p>
    </div>
  );
}

window.WhatWeDo = WhatWeDo;