function ProgressUpdates() {
  const { t } = useApp();
  return (
    <section className="updates section-pad" id="updates">
      <div className="container">
        <div className="reveal" style={{maxWidth: "58ch"}}>
          <div className="eyebrow" style={{marginBottom: "18px"}}>{t.updates.eyebrow}</div>
          <h2 className="h-section" style={{whiteSpace: "pre-line"}}>{t.updates.title}</h2>
          <p className="body-lg" style={{marginTop: "20px"}}>{t.updates.lede}</p>
        </div>

        <div className="updates-row">
          {t.updates.items.map((u, i) => (
            <article key={i} className={`update-card reveal delay-${(i % 4) + 1}`}>
              <div className="update-thumb" aria-hidden="true">
                <span>{u.placeholderMark}</span>
              </div>
              <div className="update-body">
                <div className="update-when">
                  <span>{u.when}</span>
                  {u.tag && <span className="badge">{u.tag}</span>}
                </div>
                <h3 className="update-title">{u.title}</h3>
                <p className="update-desc">{u.desc}</p>
              </div>
            </article>
          ))}
        </div>

        <p className="gallery-note" style={{marginTop: "28px"}}>{t.updates.empty}</p>
      </div>
    </section>
  );
}

window.ProgressUpdates = ProgressUpdates;