function Problem() {
  const stats = [
    { num: "99", unit: "%", label: "of organizations struggle with consistent business definitions.", src: "Strategy.com, 2026" },
    { num: "$67.4", unit: "B", label: "annual cost of AI hallucinations from missing business context.", src: "Enterprise Blueprint, 2026" },
    { num: "90", unit: "+ min/day", label: "executives waste cycling through dashboards for answers.", src: "Parse.io" },
  ];
  return (
    <section className="section section--compact" id="problem">
      <div className="wrap">
        <div className="sec-head" style={{ marginBottom: 48 }}>
          <Label num="01">The problem</Label>
          <h2 style={{ marginTop: 20 }}>Every team has its own version of the truth.</h2>
          <p>Revenue means one thing in Finance, another in Sales, a third in the board deck. Multiply that across every KPI, and meetings stall on the question: <span className="serif-it accent">which number is right?</span></p>
        </div>
        <div className="stats">
          {stats.map((s, i) => (
            <div className="stat" key={i}>
              <div className="stat__num">{s.num}<span className="unit">{s.unit}</span></div>
              <div className="stat__label">{s.label}</div>
              <div className="stat__source">— {s.src}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Problem = Problem;