/* About.jsx — eyebrow, heading, two-column blurb */

function About() {
  const { t } = useI18n();
  return (
    <section className="section" id="about">
      <div className="container">
        <div className="about-grid">
          <div>
            <div className="section-thread" aria-hidden="true"></div>
            <h2>{t('about.heading')}</h2>
          </div>
          <div className="about-body">
            <p className="about-lede">{t('about.lede')}</p>
            {t('about.paragraphs').map((p, i) => (
              <p key={i}>{rich(p)}</p>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.About = About;