// The problem section + two-underwrite comparison.

const Problem = () => (
  <section className="section fog">
    <div className="container">
      <div className="section-head">
        <div className="eyebrow">01 / The problem</div>
        <h2 className="h2">
          On paper you are a millionaire.<br/>
          Your lender thinks you make $300K.
        </h2>
        <p className="section-sub">
          We understand equity. We count it toward your income to offer you
          better and bigger mortgages.
        </p>
      </div>

      <div className="compare">
        <div className="compare-card bad">
          <div className="compare-cap">Salary alone</div>
          <div className="compare-row">
            <div className="label">Cash income</div>
            <div className="compare-num small">$300K</div>
          </div>
          <div className="compare-row muted">
            <div className="label">Vested equity counted</div>
            <div className="compare-num small">$0</div>
          </div>
          <div className="compare-divider"/>
          <div className="compare-row">
            <div className="label"><strong>Qualifying income</strong></div>
            <div className="compare-num">$300K</div>
          </div>
          <div className="compare-row">
            <div className="label">Home you can reach</div>
            <div className="compare-num">~$1.4M</div>
          </div>
        </div>

        <div className="compare-card good">
          <div className="compare-cap">With your equity counted</div>
          <div className="compare-row">
            <div className="label">Cash income</div>
            <div className="compare-num small">$300K</div>
          </div>
          <div className="compare-row plus">
            <div className="label">
              + Vested equity contribution
              <span className="compare-sub">$5M &times; 5% / yr</span>
            </div>
            <div className="compare-num small accent">$250K</div>
          </div>
          <div className="compare-divider strong"/>
          <div className="compare-row">
            <div className="label"><strong>Qualifying income</strong></div>
            <div className="compare-num hero-num">$550K</div>
          </div>
          <div className="compare-row">
            <div className="label">Home you can reach</div>
            <div className="compare-num hero-num">~$2.6M</div>
          </div>
        </div>
      </div>

      <p className="smallprint">
        Illustrative · $300K base + $5M vested equity · Not a quote or an offer
      </p>
    </div>
  </section>
);

window.Problem = Problem;