// Fit.jsx
function Fit() {
  const yes = [
    'You have real revenue and real customers.',
    'You feel operational friction from growth.',
    'You know your systems are slowing you down.',
    'You want a long-term technical partner, not a one-off build.',
  ];
  const no = [
    'You just need a quick website.',
    'You want more tools without changing how things run.',
    'You’re still pre-revenue.',
    'You’re shopping price, not fit.',
  ];
  return (
    <section className="fit" id="fit">
      <div className="fit__head">
        <div className="eyebrow reveal">Fit</div>
        <h2 className="reveal reveal-1">We work best<br/>with a few.</h2>
      </div>
      <div className="fit__grid">
        <div className="fit__col">
          <div className="eyebrow">Good fit if you &mdash;</div>
          <ul className="fit__list fit__list--yes">
            {yes.map((l, i) => (
              <li key={i} className={`reveal reveal-${(i % 3) + 1}`}>
                <span className="mark">+</span>{l}
              </li>
            ))}
          </ul>
        </div>
        <div className="fit__col">
          <div className="eyebrow">Probably not if &mdash;</div>
          <ul className="fit__list fit__list--no">
            {no.map((l, i) => (
              <li key={i} className={`reveal reveal-${(i % 3) + 1}`}>
                <span className="mark">&mdash;</span>{l}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}
window.Fit = Fit;