function IsIsnt() {
  const isnt = [
    "A catalog — documentation humans search and never update.",
    "A traditional BI tool where every dashboard redefines its own logic.",
    "A data warehouse — no row-level data, no query engine.",
    "A chatbot that guesses business meaning from raw tables.",
  ];
  const is = [
    "A governed definition layer — SSOT for every metric, segment, and term.",
    "Canvas workflows for governed exploration on approved definitions.",
    "An MCP server that hands AI agents the same governed context.",
    "A control layer — definitions mapped to your existing tables and models.",
  ];
  return (
    <section className="section section--tinted">
      <div className="wrap">
        <SectionHead num="03" kicker="What Clearmetric is (and isn't)">
          One definition, rendered identically for humans on a canvas and for AI agents over the wire.
        </SectionHead>
        <div className="isnt-grid">
          <div className="isnt">
            <div className="isnt__head">What it's not</div>
            <div className="isnt__title">Clearmetric is not another reporting surface.</div>
            <ul className="isnt__list">
              {isnt.map((t, i) => (
                <li key={i}><span className="tick tick--no">×</span>{t}</li>
              ))}
            </ul>
          </div>
          <div className="isnt isnt--is">
            <div className="isnt__head">What it is</div>
            <div className="isnt__title" style={{ color: '#fff' }}>Clearmetric is the layer that standardizes meaning before anyone reads a number.</div>
            <ul className="isnt__list">
              {is.map((t, i) => (
                <li key={i}><span className="tick tick--yes">✓</span>{t}</li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}
window.IsIsnt = IsIsnt;