// Milfers · Sobre la marca · editorial two-column with pillars
function AboutSection() {
  return (
    <section className="mf-about on-light" id="marca">
      <div className="mf-about-inner">
        <div className="mf-about-grid">
          <div className="mf-about-l reveal">
            <span className="ed-sec-title"><span className="n">2.</span>&nbsp;{window.t('about.eyebrow')}</span>
            <h2 className="mf-about-title" dangerouslySetInnerHTML={{__html: window.t('about.title')}} />
            <p className="mf-about-pull">
              <span className="mf-about-pull-seal" aria-hidden="true">
                <i className="bg bg--seal-star"></i>
              </span>
              <span className="marker" dangerouslySetInnerHTML={{__html: window.t('about.pull')}} />
            </p>
          </div>
          <div className="mf-about-r reveal delay-2">
            <p dangerouslySetInnerHTML={{__html: window.t('about.p1')}} />
            <p dangerouslySetInnerHTML={{__html: window.t('about.p2')}} />
            <p dangerouslySetInnerHTML={{__html: window.t('about.p3')}} />
            <div className="mf-about-photo">
              <img src="assets/photos/carne-plancha.jpg" alt={window.t('about.photoAlt')} />
              <div className="mf-about-photo-tag">{window.t('about.photoTag')}</div>
            </div>
          </div>
        </div>

        {/* EDIT: 3-pillar foundation row — brand glyphs from Guía 2026 */}
        <div className="mf-about-pillars reveal delay-3">
          <div className="mf-about-pillar mf-about-pillar-ico">
            <div className="mf-about-pillar-icon"><i className="bg bg--steak" aria-hidden="true"></i></div>
            <h3>{window.t('about.p1t')}</h3>
            <p>{window.t('about.p1d')}</p>
          </div>
          <div className="mf-about-pillar mf-about-pillar-ico">
            <div className="mf-about-pillar-icon"><i className="bg bg--flame" aria-hidden="true"></i></div>
            <h3>{window.t('about.p2t')}</h3>
            <p>{window.t('about.p2d')}</p>
          </div>
          <div className="mf-about-pillar mf-about-pillar-ico">
            <div className="mf-about-pillar-icon"><i className="bg bg--pin" aria-hidden="true"></i></div>
            <h3>{window.t('about.p3t')}</h3>
            <p>{window.t('about.p3d')}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

window.AboutSection = AboutSection;