/* EOMA landing v3 · Who EOMA is for (§7) — fit / no-fit honesty */

function WhoItsFor() {
  const fit = [
    "SaaS companies (any vertical, 5–200 employees)",
    "E-commerce brands with a discoverable category",
    "B2B services (agencies, consultancies, professional services)",
    "Boutique professional services (clinics, studios, practices)",
    "Education (online courses, schools, academies)",
    "Local businesses with a website + a category people search for",
    "Founders & marketing-of-one teams ($79/mo Starter built for you)",
    "Agencies running 3–15 brands ($229/mo Practice tier)",
  ];
  const noFit = [
    "You only sell to walk-in customers with no website",
    "You sell exclusively B2G or government procurement",
    "You're a pre-launch idea without a website",
    "You need real-time alerts (we update weekly, not hourly)",
    "You expect us to fix paid ads, email funnels or SEO outside AI search",
  ];

  return (
    <section className="fit-section" id="for-who">
      <div className="fit-head">
        <span className="eyebrow">
          <span className="dot dot-coral" />
          <span>Be honest with yourself</span>
        </span>
        <h2 className="t-display-lg">
          EOMA isn't for everyone.
          <br />
          Here's the honest test.
        </h2>
      </div>

      <div className="fit-grid">
        <article className="fit-card yes">
          <h3>EOMA works for</h3>
          <ul className="fit-list">
            {fit.map((line, i) => (
              <li key={i} className="fit-row">
                <span className="ic" aria-hidden="true">
                  ✓
                </span>
                <span>{line}</span>
              </li>
            ))}
          </ul>
        </article>

        <article className="fit-card no">
          <h3>EOMA is not for you (yet) if</h3>
          <ul className="fit-list">
            {noFit.map((line, i) => (
              <li key={i} className="fit-row">
                <span className="ic" aria-hidden="true">
                  ✗
                </span>
                <span>{line}</span>
              </li>
            ))}
          </ul>
        </article>
      </div>

      <p className="fit-closer">
        Still not sure? <a href="/signup">Get started</a> — 14-day trial, cancel anytime.
      </p>
    </section>
  );
}

Object.assign(window, { WhoItsFor });