// Use cases grid — what people actually draw their line for.

const UseCases = () => {
  const cases = [
    {
      icon: <Icon.Receipt/>,
      tag: 'Taxes',
      title: 'Cover an AMT or tax bill',
      body: 'Exercising ISOs can trigger a five- or six-figure AMT bill long before any cash exists. Draw what you owe and keep the shares that created it.',
    },
    {
      icon: <Icon.Options/>,
      tag: 'Options',
      title: 'Exercise before they expire',
      body: 'Stock options have a clock. When you leave, or when they lapse, you usually have 90 days to come up with the strike. Fund the exercise without a fire sale.',
    },
    {
      icon: <Icon.Diversify/>,
      tag: 'Balance',
      title: 'Cash without a taxable event',
      body: 'Selling, even in a tender or secondary, triggers capital gains and resets your exposure. Borrowing against your shares isn’t a sale, so you get liquidity with no tax bill, and you keep every share.',
    },
    {
      icon: <Icon.Bridge/>,
      tag: 'Timing',
      title: 'Bridge to your liquidity event',
      body: 'A house, a wedding, a new baby, a runway between jobs. Two-year, interest-only terms that bridge you to the tender, secondary, or IPO.',
    },
  ];

  return (
    <section className="section" id="uses">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">04 / Use cases</div>
          <h2 className="h2">Your line, your call.</h2>
          <p className="section-sub">
            Draw it for anything, we don&rsquo;t ask why. These are just the
            reasons people reach for it most.
          </p>
        </div>

        <div className="uses">
          {cases.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>

        <p className="uses-foot">
          A house, a tax bill, a second bet, or whatever you&rsquo;re navigating.
        </p>
      </div>
    </section>
  );
};

window.UseCases = UseCases;