/* About — split body + figures */

function About({ t }) {
  return (
    <section id="about" className="warm">
      <div className="container">
        <div className="section-head">
          <div className="num">§ 03 / {t.sectionHeads.about}</div>
          <h2>{t.sectionHeads.aboutSub}</h2>
        </div>
        <div className="about-grid">
          <div>
            <h3 className="about-headline">{t.about.headline}</h3>
            <p className="about-body">{t.about.body}</p>
          </div>
          <div className="figures">
            {t.about.figures.map((f, i) => (
              <div className="figure" key={i}>
                <div className="num">{f.num}</div>
                <div className="lbl">{f.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.About = About;