// AboutFormat.jsx
function AboutFormat() {
  const { t } = window.useI18n();
  const [imgOk, setImgOk] = React.useState(false);
  const url = window.IMAGES.about;

  React.useEffect(() => {
    const img = new Image();
    img.onload = () => setImgOk(true);
    img.onerror = () => setImgOk(false);
    img.src = url;
  }, [url]);

  const photoStyle = imgOk ? { backgroundImage: `url(${url})` } : undefined;

  return (
    <section className="section section--white" id="about">
      <div className="container">
        <div className="about-grid">
          <div className={`about-photo ${imgOk ? "" : "about-photo--fallback"}`} style={photoStyle}>
            <div className="about-photo__caption">{t.about.photoCaption}</div>
          </div>
          <div className="about-text">
            <span className="eyebrow" style={{ marginBottom: 16, display: "block" }}>{t.about.eyebrow}</span>
            <h2 className="section-title">{t.about.title}</h2>
            <p className="lead" style={{ marginTop: 32 }}>{t.about.lead}</p>
            <ul className="about-bullets">
              {t.about.bullets.map((b, i) => <li key={i}>{b}</li>)}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}
window.AboutFormat = AboutFormat;