function Pillars() {
  const items = [
    { icon: "memory",        lbl: "Simulated Annealing",   desc: "Mehrere Kandidaten parallel optimieren" },
    { icon: "lock",          lbl: "Lokal & datensparsam",  desc: "Keine Schülerdaten in der Cloud" },
    { icon: "rule",          lbl: "Pflichtkurse zuerst",   desc: "Harte Constraints automatisch berücksichtigt" },
    { icon: "ios_share",     lbl: "Excel & XML Export",    desc: "Direktimport in WinSchool" },
  ];
  return (
    <section className="pillars">
      <div className="pillars-inner">
        {items.map(p => (
          <div key={p.lbl} className="pillar">
            <span className="mi material-symbols-rounded">{p.icon}</span>
            <div>
              <div className="lbl">{p.lbl}</div>
              <div className="desc">{p.desc}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

window.Pillars = Pillars;