/* Section — Why Most Contractors Fail */
function WhyFail() {
  return (
    <section className="section--ink section-pad" data-screen-label="06 Why fail" style={{ position: 'relative', overflow: 'hidden' }}>
      {/* Subtle background accent — top-left blue glow */}
      <div style={{
        position: 'absolute',
        top: '-30%', left: '-15%',
        width: '60%', height: '120%',
        background: 'radial-gradient(ellipse at center, rgba(18,144,207,0.10), transparent 60%)',
        pointerEvents: 'none',
      }} />
      <div className="container" style={{ position: 'relative' }}>
        <div style={{ maxWidth: 820, marginBottom: 56 }}>
          <p className="eyebrow eyebrow--light">The problem</p>
          <h2 className="h-section" style={{ marginBottom: 28, color: 'white' }}>
            <span style={{ color: 'var(--pmhoa-blue-light)' }}>80%</span> of the people home service companies hire to chase property managers <span style={{
              fontStyle: 'italic',
              textDecoration: 'underline',
              textDecorationColor: 'var(--pmhoa-blue-light)',
              textDecorationThickness: '3px',
              textUnderlineOffset: '8px',
            }}>fail</span>.
          </h2>
          <div className="body-prose">
            <p style={{ color: 'rgba(255,255,255,0.82)' }}>
              Most home service companies who go after property management hire a single
              sales rep — a BDR or commercial sales rep — and point them at the market.
              The vast majority fail inside the first year. It comes down to two things.
            </p>
          </div>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(2, 1fr)',
          gap: 48,
          paddingTop: 8,
        }} className="two-col">
          <FailColumn
            number="01"
            title="Skills"
            body={<>
              The job requires a stack of skills no single person has.{' '}
              <span style={{ color: 'rgba(255,255,255,0.95)' }}>
                Lead generation. Lead research. Cold calling. Cold emailing. Copywriting.
                Delivering presentations. Following up over months without becoming annoying.
                Negotiating bids.
              </span>
              {' '}One person hits a ceiling fast.
            </>}
          />
          <FailColumn
            number="02"
            title="Strategy"
            body={<>
              Even with the skills, most BDRs run the wrong play. They cold-call asking for
              work — <span style={{ color: 'var(--pmhoa-blue-light)', fontWeight: 600 }}>and that isn't a strategy, it's a guess.</span>
              {' '}Property managers don't give work to strangers. They give work to vendors
              they trust, and trust takes{' '}
              <span style={{
                color: 'white',
                fontWeight: 700,
                borderBottom: '1px solid rgba(136,195,235,0.5)',
              }}>9 to 12 quality interactions</span>
              {' '}to build. You can't shortcut it with a single sales call.
            </>}
          />
        </div>

        {/* The 80% verdict — large, accent-color, lands like a stamp */}
        <div style={{
          marginTop: 'clamp(56px, 6vw, 80px)',
          paddingTop: 36,
          borderTop: '1px solid rgba(255,255,255,0.12)',
        }}>
          <div style={{
            display: 'flex',
            alignItems: 'baseline',
            flexWrap: 'wrap',
            gap: 'clamp(12px, 1.5vw, 20px)',
          }}>
            <span style={{
              fontSize: 12, fontWeight: 700,
              letterSpacing: '0.16em', textTransform: 'uppercase',
              color: 'rgba(255,255,255,0.5)',
              flexShrink: 0,
            }}>
              The result
            </span>
            <span style={{
              fontFamily: 'var(--font-display)',
              fontWeight: 800,
              fontSize: 'clamp(36px, 4.2vw, 56px)',
              letterSpacing: '-0.025em',
              lineHeight: 1.05,
              color: 'white',
            }}>
              an{' '}
              <span style={{
                color: 'var(--pmhoa-blue-light)',
                borderBottom: '4px solid var(--pmhoa-blue-light)',
                paddingBottom: 2,
              }}>80% failure rate</span>.
            </span>
          </div>
        </div>

        <blockquote style={{
          margin: 'clamp(48px, 6vw, 80px) 0 0',
          padding: '40px 0 0',
          borderTop: '1px solid rgba(255,255,255,0.12)',
          fontStyle: 'italic',
          fontSize: 'clamp(22px, 2.4vw, 30px)',
          fontWeight: 500,
          lineHeight: 1.35,
          letterSpacing: '-0.012em',
          color: 'rgba(255,255,255,0.92)',
          maxWidth: 920,
        }}>
          PMHOA Pro replaces the single-BDR model with a team that has every skill the
          job requires, running a strategy (sales process){' '}
          <span style={{ color: 'var(--pmhoa-blue-light)' }}>built specifically for the property management buyer.</span>
        </blockquote>
      </div>
    </section>
  );
}

function FailColumn({ number, title, body }) {
  return (
    <div style={{
      paddingTop: 24,
      borderTop: '1px solid rgba(255,255,255,0.15)',
    }}>
      <div style={{
        display: 'flex',
        alignItems: 'baseline',
        gap: 16,
        marginBottom: 16,
      }}>
        <span className="tnum" style={{
          fontFamily: 'var(--font-condensed)',
          fontSize: 18,
          fontWeight: 700,
          color: 'var(--pmhoa-blue-light)',
          letterSpacing: '0.06em',
        }}>{number}</span>
        <h3 style={{
          fontSize: 26,
          fontWeight: 800,
          letterSpacing: '-0.02em',
          margin: 0,
          color: 'white',
        }}>{title}</h3>
      </div>
      <p style={{
        fontSize: 16,
        lineHeight: 1.6,
        color: 'rgba(255,255,255,0.7)',
        margin: 0,
        maxWidth: '56ch',
      }}>
        {body}
      </p>
    </div>
  );
}

window.WhyFail = WhyFail;
