function Founders({ lang }) {
  const people = [
    { initials: "G", name: "Guy", role: { de: "Systems & Build", en: "Systems & Build" },
      bio: { de: "Hat Unternehmen geführt, bevor er eines aufbaut. Baut, was er selbst gebraucht hätte.",
             en: "Ran a company before building one. Builds what he would have needed himself." },
      bg: "var(--shyft-steel)" },
    { initials: "S", name: "Simone", role: { de: "Client & Growth", en: "Client & Growth" },
      bio: { de: "Kennt KMUs von innen. Hört zu, bevor sie redet. Sagt, wenn wir nicht die Richtigen sind.",
             en: "Knows SMEs from the inside. Listens before talking. Says so when we're not the right fit." },
      bg: "var(--shyft-copper)" },
  ];
  return (
    <section className="band band-terra founders-band" id="about">
      <div className="wrap">
        <div className="eyebrow eyebrow-dim">{lang === "de" ? "09 — Wer" : "09 — Who"}</div>
        <div className="founders-intro">
          <h2>{lang === "de" ? <>Zwei Leute. Beide haben selbst <span className="u-dark">Unternehmen geführt.</span></> : <>Two people. Both have run <span className="u-dark">companies themselves.</span></>}</h2>
          <p>{lang === "de"
            ? "Wir kennen den Frust. Freitagabend Daten kopieren. Software, die halb funktioniert. Konzepte, die nie umgesetzt werden. Deshalb bauen wir das Gegenteil."
            : "We know the frustration. Copying data on a Friday night. Software that half works. Concepts that never get built. That's why we build the opposite."}</p>
        </div>
        <div className="founders-layout">
          {people.map((p, i) => (
            <div key={i} className="founder">
              <div className="avatar" style={{ background: p.bg }}>{p.initials}</div>
              <h4>{p.name}</h4>
              <div className="role">{t(p.role, lang)}</div>
              <p>{t(p.bio, lang)}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Founders = Founders;