// Section 02: Tender offer vs. predatory equity loans vs. Vested Equity.
// The core pitch — an alternative to selling in a tender for people who
// believe the company 10x's from here.

const TENDER_ROWS = [
  {
    label: 'You keep your shares',
    tender: { v: 'no',  t: 'Sold' },
    other:  { v: 'mid', t: 'Pledged to a fund' },
    vested: { v: 'yes', t: 'Yours, collateralized' },
  },
  {
    label: 'You keep 100% of the upside',
    tender: { v: 'no',  t: "Sold at today's price" },
    other:  { v: 'no',  t: 'They take up to 50%' },
    vested: { v: 'yes', t: '100% yours' },
  },
  {
    label: 'Cost',
    tender: { v: 'no',  t: 'Tax + tender haircut' },
    other:  { v: 'no',  t: 'High rate + upside cut' },
    vested: { v: 'yes', t: 'Fixed 15–17% APR' },
  },
  {
    label: 'Triggers a tax bill',
    tender: { v: 'no',  t: 'Capital gains, now' },
    other:  { v: 'yes', t: "No, it's a loan" },
    vested: { v: 'yes', t: "No, it's a loan" },
  },
  {
    label: 'Speed to cash',
    tender: { v: 'no',  t: 'Only at a tender window' },
    other:  { v: 'mid', t: '1–2 weeks' },
    vested: { v: 'yes', t: '~15 minutes' },
  },
  {
    label: 'Approved by your company',
    tender: { v: 'yes', t: 'Company-run' },
    other:  { v: 'no',  t: 'Can breach your terms' },
    vested: { v: 'yes', t: 'Cleared by legal' },
  },
  {
    label: 'Repayment',
    tender: { v: 'mid', t: 'N/A, you sold' },
    other:  { v: 'mid', t: 'Cash payments due' },
    vested: { v: 'yes', t: 'Interest-only, at exit' },
  },
];

const Cell = ({ cell, col, win }) => (
  <div className={'vs-cell vs-' + cell.v + (win ? ' vs-win' : '')}>
    <span className="vs-colname">{col}</span>
    <span className="vs-mark">
      {cell.v === 'yes' ? <Icon.Check size={15}/>
        : cell.v === 'no' ? <Icon.X size={15}/>
        : <span className="vs-dash" />}
    </span>
    <span className="vs-text">{cell.t}</span>
  </div>
);

const TenderCompare = () => (
  <section className="section" id="vs">
    <div className="container">
      <div className="section-head" style={{maxWidth: 760}}>
        <div className="eyebrow">02 / The alternative</div>
        <h2 className="h2">Every way to get liquidity is bad. Except one.</h2>
        <p className="section-sub">
          A tender means selling at today&rsquo;s price and walking away from the
          upside. The &ldquo;equity loans&rdquo; out there hand you cash but take
          a piece of your company and aren&rsquo;t cleared by anyone. Vested is
          the one built with your employer. Keep your shares, keep the
          upside.
        </p>
      </div>

      <div className="vs-table">
        <div className="vs-winpanel" aria-hidden="true">
          <span className="vs-pill">Built with your company</span>
        </div>

        <div className="vs-head">
          <div className="vs-hcell vs-hlabel" />
          <div className="vs-hcell">Sell in a tender</div>
          <div className="vs-hcell">Other equity loans</div>
          <div className="vs-hcell vs-hwin">
            <img src="favicon.svg" className="vs-logo" alt="" />
            Vested Equity
          </div>
        </div>

        {TENDER_ROWS.map((r, i) => (
          <div key={i} className="vs-row">
            <div className="vs-l">{r.label}</div>
            <Cell col="Tender" cell={r.tender} />
            <Cell col="Other loans" cell={r.other} />
            <Cell col="Vested Equity" cell={r.vested} win />
          </div>
        ))}
      </div>

      <p className="smallprint" style={{marginTop: 28}}>
        Illustrative comparison &middot; Terms vary by company and equity &middot;
        No price-triggered call or sale; the line is secured by your equity and
        default is governed by your loan terms &middot; Not a quote or an offer
      </p>
    </div>
  </section>
);

window.TenderCompare = TenderCompare;