function Generations() {
  const gens = [
    {
      num: "Generation 01",
      title: "Data catalogs",
      desc: "Documents metadata so humans can browse and search. Definitions live as passive text descriptions.",
      limit: "Documentation, not execution. Humans read; nothing enforces.",
    },
    {
      num: "Generation 02",
      title: "Semantic layers",
      desc: "Centralizes underlying logic for BI tools. Technical-first, built to serve dashboards, not business meaning.",
      limit: "BI only. AI agents still guess at what anything means.",
    },
    {
      num: "Generation 03",
      title: "Defined Intelligence",
      desc: "Business definitions as the single source of truth — governed, mapped to technical assets, and consumed by both humans and AI through one contract. The first mile self-service analytics never had.",
      limit: "Humans and AI, aligned. This is Clearmetric.",
    },
  ];
  return (
    <section className="section" id="generations">
      <div className="wrap">
        <SectionHead num="02" kicker="Three generations of analytics">
          Analytics tools solved yesterday's problem. Clearmetric is built for the one in front of you: a generation where answers need to be consistent across every human — and every agent.
        </SectionHead>
        <div className="gen-grid">
          {gens.map((g, i) => (
            <div className={"gen " + (i === 2 ? "gen--current" : "")} key={i}>
              <div className="gen__num">{g.num}</div>
              <div className="gen__title">{g.title}</div>
              <div className="gen__desc">{g.desc}</div>
              <div className="gen__limit">
                <span className="label">{i === 2 ? "What it gives you" : "Where it breaks"}</span>
                {g.limit}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Generations = Generations;