// /employers — the employer / People-team page.
// Rendered by app.jsx when the path is /employers. Same in-browser Babel SPA as
// the rest of the site; reuses the shared classes in styles.css (vs-table,
// steps, final, use-card, fit) plus a few additions in employers.css.
// Registers window.Employers.

const EmployerNav = () => (
  <nav className="nav">
    <div className="container nav-inner">
      <a href="/employers" className="brand">
        <img src="favicon.svg" className="brand-mark" alt="Vested Equity" />
        <span>Vested Equity</span>
      </a>
      <div className="nav-links">
        <a href="#cost">Cost</a>
        <a href="#tax">Tax</a>
        <a href="#rollout">Rollout</a>
      </div>
      <div className="nav-cta">
        <a href="/" className="btn btn-link btn-sm">For employees</a>
        <a href="#talk" className="btn btn-primary btn-sm">
          Talk to us
          <Icon.Arrow />
        </a>
      </div>
    </div>
  </nav>
);

const EmployerHero = () => (
  <section className="hero">
    <div className="container hero-inner">
      <div className="hero-copy">
        <div className="eyebrow">For founders, CFOs &amp; People teams</div>
        <h1 className="display">Liquidity as a benefit.<br />Zero cost to you.</h1>
        <p className="lede">
          Your team draws cash against their vested equity, on their own schedule.
          No tender to run, no round to raise, no shares bought back. Their cap
          table and your treasury stay exactly where they are.
        </p>
        <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
          <a href="#talk" className="btn btn-primary btn-lg">
            Talk to us
            <Icon.Arrow size={16} />
          </a>
          <a href="#cost" className="btn btn-ghost btn-lg">See the numbers</a>
        </div>
        <p className="cta-assurance">No raise · No dilution · Opt-in, per employee.</p>
      </div>

      <div>
        <div className="hero-visual">
          <div className="qcard qcard-front">
            <div className="qcard-head">
              <div className="qcard-head-l">
                <div className="qcard-dots"><span/><span/><span/></div>
                <span className="qcard-title">Cost to the company</span>
              </div>
              <span className="qcard-tag">$0</span>
            </div>
            <div className="qcard-body">
              <h3 className="qcard-heading">Company-run tender vs. Vested</h3>
              <div className="qrow">
                <div className="qrow-label">Primary capital to raise</div>
                <div className="qrow-value">$6.5B → $0</div>
              </div>
              <div className="qrow">
                <div className="qrow-label">Dilution</div>
                <div className="qrow-value">Yes → None</div>
              </div>
              <div className="qrow">
                <div className="qrow-label">Tax withholding</div>
                <div className="qrow-value">Co. funds → Per employee</div>
              </div>
              <div className="qrow">
                <div className="qrow-label">Availability</div>
                <div className="qrow-value">Window → Always-on</div>
              </div>
              <div className="qrow divider"/>
              <div className="qrow highlight">
                <div className="qrow-label">Net cost to you</div>
                <div className="qrow-value">
                  $0
                  <span className="arrow"><Icon.Sparkle/> No raise</span>
                </div>
              </div>
              <div className="qrow highlight">
                <div className="qrow-label">Cap table</div>
                <div className="qrow-value">
                  Untouched
                  <span className="arrow">0 new shares</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// Why offer it — four tight reasons, one line each. No marketing prose.
const EmployerWhy = () => {
  const items = [
    { icon: <Icon.Bolt size={22}/>,   tag: 'Attract', title: 'Win the offer', body: 'Liquidity on day one, not at a tender no one can date. A line a fixed window can’t match.' },
    { icon: <Icon.Shield size={22}/>, tag: 'Retain',  title: 'Remove the reason to leave', body: 'People leave for cash. When staying isn’t staying cash-poor, your best engineers stay.' },
    { icon: <Icon.Sparkle size={22}/>,tag: 'Operate', title: 'No fire drill', body: 'Always-on and per-employee. Not a company-wide event to staff, bank, and lawyer every few years.' },
    { icon: <Icon.NoSale size={22}/>, tag: 'Align',   title: 'Don’t force a sale', body: 'Each person chooses: take some off the table, or hold every share. You never push a sale.' },
  ];
  return (
    <section className="section" id="why">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">01 / Why offer it</div>
          <h2 className="h2">Four reasons. Zero line items.</h2>
        </div>
        <div className="uses uses-4">
          {items.map((c, i) => (
            <div key={i} className="use-card">
              <div className="use-top">
                <div className="use-icon">{c.icon}</div>
                <span className="use-tag">{c.tag}</span>
              </div>
              <h3 className="use-title">{c.title}</h3>
              <p className="use-body">{c.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// One sharp line on conviction. Replaces the brochure-y sermon.
const EmployerAlign = () => (
  <section className="section dark">
    <div className="container">
      <div className="section-head" style={{ maxWidth: 820 }}>
        <div className="eyebrow">Alignment</div>
        <h2 className="h2">Don’t make believers sell.</h2>
        <p className="section-sub">
          A tender pushes everyone to the exit at one price on one date, including
          the people most convinced the company is worth more later. Let them keep
          every share and all the upside, and give the ones who need cash another
          way to get it. That’s the aligned version.
        </p>
      </div>
    </div>
  </section>
);

// The cost: a tender is a financing event; this isn't. Reuses vs-table.
const cellMark = (v) =>
  v === 'yes' ? <Icon.Check size={15}/> : v === 'no' ? <Icon.X size={15}/> : <span className="vs-dash" />;

const CostRow = ({ label, tender, vested }) => (
  <div className="vs-row">
    <div className="vs-rowlabel">{label}</div>
    <div className={'vs-cell vs-' + tender.v}>
      <span className="vs-colname">Company tender</span>
      <span className="vs-mark">{cellMark(tender.v)}</span>
      <span className="vs-text">{tender.t}</span>
    </div>
    <div className="vs-win-wrap">
      <div className={'vs-cell vs-' + vested.v}>
        <span className="vs-colname">Vested Equity</span>
        <span className="vs-mark">{cellMark(vested.v)}</span>
        <span className="vs-text">{vested.t}</span>
      </div>
    </div>
  </div>
);

const COST_ROWS = [
  { label: 'Primary capital raised',  tender: { v: 'no',  t: '$6.5B+' },             vested: { v: 'yes', t: '$0' } },
  { label: 'Dilution',                tender: { v: 'no',  t: 'Yes' },                vested: { v: 'yes', t: 'None · 0 new shares' } },
  { label: 'Funds tax withholding',   tender: { v: 'no',  t: 'Company, in cash' },   vested: { v: 'yes', t: 'Each employee' } },
  { label: 'Coordination',            tender: { v: 'no',  t: 'Company-wide event' }, vested: { v: 'yes', t: 'Always-on, self-serve' } },
  { label: 'Employee access',         tender: { v: 'no',  t: 'Only in the window' }, vested: { v: 'yes', t: 'Anytime' } },
  { label: 'Net cost to company',     tender: { v: 'no',  t: 'A financing event' },  vested: { v: 'yes', t: '$0' } },
];

const EmployerCost = () => (
  <section className="section fog" id="cost">
    <div className="container">
      <div className="section-head" style={{ maxWidth: 820 }}>
        <div className="eyebrow">02 / The cost</div>
        <h2 className="h2">A tender is a financing event. This isn’t.</h2>
        <p className="section-sub">
          To run its 2023 employee program, Stripe raised $6.5B+ at a ~$50B
          valuation, down from $95B, largely to buy back shares and fund the tax
          withholding that hit when RSUs settled. Per-employee liquidity skips all
          of it.
        </p>
      </div>

      <div className="emp-metrics">
        <div className="emp-metric">
          <div className="emp-metric-n">$6.5B+</div>
          <div className="emp-metric-l">Stripe’s 2023 raise to fund liquidity &amp; withholding</div>
        </div>
        <div className="emp-metric">
          <div className="emp-metric-n">$95B<span className="to">→</span>$50B</div>
          <div className="emp-metric-l">Valuation reset the round crystallized</div>
        </div>
        <div className="emp-metric">
          <div className="emp-metric-n accent">$0</div>
          <div className="emp-metric-l">What you raise to offer Vested Equity</div>
        </div>
      </div>

      <div className="vs-table vs-2" style={{ marginTop: 32 }}>
        <div className="vs-head">
          <div className="vs-rowlabel" />
          <div className="vs-col">Company tender</div>
          <div className="vs-col vs-col-win">
            <img src="favicon.svg" className="vs-mark-logo" alt="" />
            Vested Equity
          </div>
        </div>
        {COST_ROWS.map((r, i) => <CostRow key={i} {...r} />)}
      </div>

      <p className="smallprint" style={{ marginTop: 24 }}>
        Stripe figures from public reporting, shown for illustration · Not a quote or an offer
      </p>
    </div>
  </section>
);

// The tax: a reference table, not a lecture.
const TAX_ROWS = [
  { hold: 'Double-trigger RSUs', sub: 'typical at unicorns', trigger: 'Settlement at a liquidity event (e.g. a tender)', on: 'Full market value at settlement, no cost basis', tags: [['ord', 'Ordinary + FICA']], note: 'employer withholds in cash' },
  { hold: 'NSOs', sub: 'non-qualified options', trigger: 'Exercise, then sale', on: 'Spread (FMV − strike), then gain above FMV', tags: [['ord', 'Ordinary'], ['cap', 'Cap gains']] },
  { hold: 'ISOs', sub: 'incentive options', trigger: 'Exercise, then sale', on: 'Spread is an AMT item; full gain at a qualifying sale', tags: [['amt', 'AMT'], ['cap', 'LT cap gains']] },
  { hold: 'Vested shares', sub: 'secondary sale', trigger: 'Only when they sell', on: 'Gain over basis, nothing if they hold', tags: [['cap', 'Cap gains']] },
];

const EmployerTax = () => (
  <section className="section" id="tax">
    <div className="container">
      <div className="section-head" style={{ maxWidth: 820 }}>
        <div className="eyebrow">03 / The tax</div>
        <h2 className="h2">What your team actually pays.</h2>
        <p className="section-sub">
          Liquidity is a tax question as much as a cash question. It depends on the
          instrument and the trigger, and a forced tender tends to pick the worst one.
        </p>
      </div>

      <div className="tax-wrap">
        <table className="tax-table">
          <thead>
            <tr>
              <th>Instrument</th>
              <th>Trigger</th>
              <th>Taxed on</th>
              <th>Treatment</th>
            </tr>
          </thead>
          <tbody>
            {TAX_ROWS.map((r, i) => (
              <tr key={i}>
                <td className="tax-hold">{r.hold}<span className="tax-sub">{r.sub}</span></td>
                <td>{r.trigger}</td>
                <td>{r.on}</td>
                <td>
                  {r.tags.map(([cls, label], j) => (
                    <span key={j} className={'emp-tag ' + cls}>{label}</span>
                  ))}
                  {r.note ? <span className="tax-sub">{r.note}</span> : null}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="taxcmp">
        <div className="taxcmp-col">
          <div className="taxcmp-head">
            <span className="taxcmp-k">Forced tender</span>
            <span className="taxcmp-rate">~37%</span>
          </div>
          <div className="taxcmp-sub">Ordinary income, taxed on the company’s calendar</div>
          <div className="taxcmp-rows">
            <div className="taxcmp-row"><span>Taxed on</span><span className="v">Full value, at ordinary rates</span></div>
            <div className="taxcmp-row"><span>Timing</span><span className="v">Now, not when they choose</span></div>
            <div className="taxcmp-row"><span>Believers</span><span className="v">Sell to cover the bill</span></div>
          </div>
        </div>
        <div className="taxcmp-col taxcmp-col--win">
          <div className="taxcmp-head">
            <span className="taxcmp-k">Employee-controlled</span>
            <span className="taxcmp-rate accent">~15–20%</span>
          </div>
          <div className="taxcmp-sub">Long-term capital gains, on their own timing</div>
          <div className="taxcmp-rows">
            <div className="taxcmp-row"><span>Taxed on</span><span className="v">Only what they sell</span></div>
            <div className="taxcmp-row"><span>Timing</span><span className="v">Their call, or never</span></div>
            <div className="taxcmp-row"><span>Believers</span><span className="v">Keep 100% of the upside</span></div>
          </div>
        </div>
      </div>

      <p className="smallprint" style={{ marginTop: 24 }}>
        Illustrative, not tax, legal, or financial advice · Outcomes depend on grant terms, holding periods, AMT, and residence
      </p>
    </div>
  </section>
);

const EmployerRollout = () => (
  <section className="section dark" id="rollout">
    <div className="container">
      <div className="section-head" style={{ maxWidth: 760 }}>
        <div className="eyebrow">04 / Rollout</div>
        <h2 className="h2">Three steps. No capital.</h2>
      </div>
      <div className="steps">
        <div className="step">
          <div className="step-num">1</div>
          <h3>Approve it</h3>
          <p>We clear Vested Equity as a sanctioned liquidity option with your legal team. No raise, no buyback, no cap-table change.</p>
        </div>
        <div className="step">
          <div className="step-num">2</div>
          <h3>Employees opt in</h3>
          <p>Anyone who wants liquidity uses it for the amount they choose. Anyone who doesn’t, doesn’t.</p>
        </div>
        <div className="step">
          <div className="step-num">3</div>
          <h3>You’re done</h3>
          <p>Your people get the benefit. Your treasury, ownership, and 409A are untouched.</p>
        </div>
      </div>
    </div>
  </section>
);

const EmployerCTA = () => (
  <section className="section tight" id="talk">
    <div className="container">
      <div className="final">
        <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.7)' }}>For founders, CFOs &amp; People leaders</div>
        <h2 className="h2">Offer liquidity. Spend nothing.</h2>
        <p>Send your company and rough cap-table shape. We’ll show you the numbers in 20 minutes.</p>
        <a href="mailto:info@vestedequity.com?subject=Vested%20Equity%20for%20our%20team" className="btn btn-dark btn-lg">
          Talk to us
          <Icon.Arrow size={16}/>
        </a>
      </div>
    </div>
  </section>
);

const Employers = () => (
  <React.Fragment>
    <EmployerNav />
    <EmployerHero />
    <EmployerWhy />
    <EmployerAlign />
    <EmployerCost />
    <EmployerTax />
    <EmployerRollout />
    <EmployerCTA />
  </React.Fragment>
);

window.Employers = Employers;