// career.jsx — Timeline + trusted-by

function Career({ t }) {
  return (
    <section className="section" data-screen-label="05 Werdegang">
      <div className="section-tag">{t.career.tag}</div>
      <h2 className="section-title">{t.career.title} <em>{t.career.titleEm}</em></h2>
      <p className="section-sub">{t.career.sub}</p>
      <div>
        <ol className="career-list" style={{ listStyle: "none" }}>
          {t.career.items.map((it, i) => (
            <li key={i} className={`career-item ${it.c ? "current" : ""}`}>
              <span className="when">{it.y}</span>
              <div className="what">
                <h4>{it.t}</h4>
                <div className="where">{it.w}</div>
                <p>{it.d}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
      <div className="trusted">
        <div className="trusted-label">{t.career.trusted}</div>
        <div className="trusted-row">
          <span className="logo" style={{ fontFamily: "Inter", fontWeight: 700, letterSpacing: "0.18em" }}>ZEISS</span>
          <span className="logo">Intershop</span>
          <span className="logo" style={{ fontStyle: "italic" }}>ETAS</span>
          <span className="logo">Pacific GeoTech</span>
        </div>
      </div>
    </section>
  );
}

window.Career = Career;