// About.jsx — split layout with portrait photo
function About({ lang }) {
  const t = lang === 'pl'
    ? {
        kicker: 'O nas',
        h2: 'Nowa fundacja z konkretną misją',
        p1: 'Fundacja PK KAR powstała w 2026 roku w Krakowie. Łączymy doświadczenie zawodowe naszego zespołu z chęcią realnej zmiany społecznej. Wierzymy, że dostęp do wiedzy, kompetencji cyfrowych i wsparcia potrafi odmienić sytuację osób, które z różnych powodów znalazły się na marginesie.',
        p2: 'Działamy lokalnie i projektowo — od warsztatów i programów edukacyjnych, przez profilaktykę i wsparcie grup w trudnej sytuacji, po współpracę z instytucjami publicznymi i innymi organizacjami.',
        caption: 'Warsztaty kompetencji cyfrowych, Kraków 2026',
      }
    : {
        kicker: 'About us',
        h2: 'A new foundation with a concrete mission',
        p1: 'Fundacja PK KAR was established in 2026 in Kraków. We combine our team\u2019s professional experience with a drive for real social change. We believe access to knowledge, digital skills and support can transform the situation of those who, for various reasons, have ended up on the margins.',
        p2: 'We act locally and project-by-project — from workshops and educational programmes, through prevention and support for vulnerable groups, to cooperation with public institutions and other organisations.',
        caption: 'Digital skills workshop, Kraków 2026',
      };
  return (
    <section id="o-nas" className="section">
      <div className="container about-grid">
        <div className="about-copy">
          <p className="kicker">{t.kicker}</p>
          <h2>{t.h2}</h2>
          <p>{t.p1}</p>
          <p>{t.p2}</p>
        </div>
        <figure className="about-figure">
          <img loading="lazy" alt=""
            src="https://images.unsplash.com/photo-1524178232363-1fb2b075b655?auto=format&fit=crop&w=900&q=80"/>
          <figcaption>{t.caption}</figcaption>
        </figure>
      </div>
    </section>
  );
}

window.About = About;