// The problem section + sell-vs-borrow comparison.

const Problem = () => (
  <section className="section fog">
    <div className="container">
      <div className="section-head">
        <div className="eyebrow">01 / The problem</div>
        <h2 className="h2">
          Don&rsquo;t sell your upside<br/>
          for liquidity.
        </h2>
        <p className="section-sub">
          If you believe the company keeps climbing, selling is the last thing
          you should do. A tender locks in today&rsquo;s price and hands away the
          10&times;. And most of your equity can&rsquo;t be sold anyway:
          double-trigger RSUs don&rsquo;t pay out until a liquidity event, and
          options cost cash plus a tax bill to exercise, with no one to sell to.
          Borrow against your vested shares instead, and take liquidity now
          without triggering taxes or giving up a dollar of the upside.
        </p>
      </div>

      <div className="compare">
        <div className="compare-card bad">
          <div className="compare-cap">Sell $400K in a tender</div>
          <div className="compare-row">
            <div className="label">Vested equity today</div>
            <div className="compare-num small">$1M</div>
          </div>
          <div className="compare-row">
            <div className="label">
              Shares you sell
              <span className="compare-sub">to raise cash</span>
            </div>
            <div className="compare-num small">$400K</div>
          </div>
          <div className="compare-row muted">
            <div className="label">
              Taxes &amp; fees
              <span className="compare-sub">~40% long-term &middot; CA</span>
            </div>
            <div className="compare-num small">&minus;$160K</div>
          </div>
          <div className="compare-divider"/>
          <div className="compare-row">
            <div className="label"><strong>Cash in hand</strong></div>
            <div className="compare-num">$240K<span className="compare-note">$400K sold, less $160K tax</span></div>
          </div>
          <div className="compare-row">
            <div className="label">Your stake at 3&times;, in 2 yrs</div>
            <div className="compare-num hero-num">$1.8M<span className="compare-note">you sold $400K, gone</span></div>
          </div>
        </div>

        <div className="compare-card good">
          <div className="compare-cap">Draw $400K &middot; 40% LTV</div>
          <div className="compare-row">
            <div className="label">Vested equity today</div>
            <div className="compare-num small">$1M</div>
          </div>
          <div className="compare-row">
            <div className="label">
              Shares you sell
              <span className="compare-sub">keep every share</span>
            </div>
            <div className="compare-num small accent">$0</div>
          </div>
          <div className="compare-row plus">
            <div className="label">
              Interest &middot; 2 yrs
              <span className="compare-sub">$400K @ 15&ndash;17% / yr &middot; interest-only</span>
            </div>
            <div className="compare-num small">&minus;$128K</div>
          </div>
          <div className="compare-divider strong"/>
          <div className="compare-row">
            <div className="label"><strong>Cash in hand</strong></div>
            <div className="compare-num">$272K<span className="compare-note">$400K drawn, less $128K interest</span></div>
          </div>
          <div className="compare-row">
            <div className="label">Your stake at 3&times;, in 2 yrs</div>
            <div className="compare-num hero-num">$2.6M<span className="compare-note">+$800K for not selling</span></div>
          </div>
        </div>
      </div>

      {/* Mobile-only side-by-side table. Desktop uses the two cards above. */}
      <div className="compare-table" aria-hidden="true">
        <div className="ct-head">
          <div className="ct-label" />
          <div className="ct-col-head bad">Sell in a tender</div>
          <div className="ct-col-head good">Your line</div>
        </div>
        <div className="ct-row">
          <div className="ct-label">Vested equity</div>
          <div className="ct-val bad">$1M</div>
          <div className="ct-val good">$1M</div>
        </div>
        <div className="ct-row">
          <div className="ct-label">
            Shares sold
            <span className="ct-sub">$400K accessed each way</span>
          </div>
          <div className="ct-val bad muted">$400K</div>
          <div className="ct-val good accent">$0</div>
        </div>
        <div className="ct-divider" />
        <div className="ct-row strong">
          <div className="ct-label">
            Cash in hand
            <span className="ct-sub">after tax vs. after interest</span>
          </div>
          <div className="ct-val bad">$240K</div>
          <div className="ct-val good">$272K</div>
        </div>
        <div className="ct-row strong">
          <div className="ct-label">Stake at 3&times;, 2 yrs</div>
          <div className="ct-val bad">$1.8M</div>
          <div className="ct-val good ct-hero">$2.6M</div>
        </div>
      </div>

      <p className="smallprint">
        Illustrative · $1M vested position at 40% LTV · sell $400K at ~40% long-term California tax
        (federal + state + NIIT) leaves $240K · vs a 2-year interest-only $400K draw at ~16%
        (~$128K interest) leaves $272K · company 3&times; over the term · the stake figure is net of
        repaying the $400K principal · Not a quote or an offer
      </p>
    </div>
  </section>
);

window.Problem = Problem;