// Dark section: How it works (employer-sponsored benefit) + why it's built for you.

const HowItWorks = () => {
  const items = [
    { icon: <Icon.Building/>, title: 'Employer-sponsored',  body: 'Enabled by your company as a benefit, so the terms are built for employees, not a retail margin desk.' },
    { icon: <Icon.Hold/>,     title: 'You keep your shares', body: 'You stay the owner of record. Your vested equity backs the line; every share and all the upside stay yours.' },
    { icon: <Icon.Bolt/>,     title: 'Funds in minutes',     body: 'Once your equity is verified, draws settle in minutes. No months-long underwriting marathon.' },
  ];

  return (
    <section className="section dark" id="how">
      <div className="container">
        <div className="section-head" style={{maxWidth: 760}}>
          <div className="eyebrow">03 / How it works</div>
          <h2 className="h2">A benefit your company turns on. Liquidity you turn on.</h2>
          <p className="section-sub">
            Vested Equity is offered through your employer, so the credit line
            is priced and structured for people who actually hold the equity,
            not for a margin account.
          </p>
        </div>

        <div className="never" style={{marginTop: 56}}>
          {items.map((it, i) => (
            <div key={i} className="never-card">
              <div className="never-icon">{it.icon}</div>
              <h4>{it.title}</h4>
              <p>{it.body}</p>
            </div>
          ))}
        </div>

        <p className="never-close">
          The line is secured by your vested equity, the way any asset-backed
          loan is.{' '}
          <strong>
            What is different: it runs through your employer, you keep
            ownership and every bit of the upside, and no move in your 409A can
            force a sale. Your equity finally does something before the exit.
          </strong>
        </p>
      </div>
    </section>
  );
};

window.HowItWorks = HowItWorks;