// Milfers · Maduración · editorial with verified specs grid
function MaduracionSection() {
  return (
    <section className="mf-mad" id="maduracion">
      <div className="mf-mad-bg" aria-hidden="true"></div>
      {/* EDIT: gigantic 35 numeral as section watermark — brand glyph */}
      <div className="mf-mad-watermark" aria-hidden="true">
        <i className="bg bg--n35-block"></i>
      </div>
      <div className="mf-mad-inner">

        <div className="mf-mad-grid">
          <div className="mf-mad-l reveal">
            <div className="mf-mad-photo">
              <div className="mf-mad-photo-art" aria-hidden="true">
                <img
                  src="https://pastoybellota.com/1004-thickbox_default/chuleton-vaca-nossa-terra-madurado-13-kg-aproximadamente.jpg"
                  alt=""
                  style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}}
                />
              </div>
              <div className="mf-mad-photo-mask"></div>
              {/* EDIT: lot tag — sin Cámara B (no verificado), generic month tag */}
              <div className="mf-mad-photo-tag">{window.t('mad.photoTag')}</div>
            </div>
            {/* EDIT: brand 35-days seal — inner 35 fixed, ring "días de maduración" rotates */}
            <div className="mf-mad-seal" aria-hidden="true">
              <img src={window.MF_SEAL_SRC} alt="" />
            </div>
          </div>

          <div className="mf-mad-r">
            <div className="reveal">
              <span className="ed-sec-title"><span className="n">4.</span>&nbsp;<span dangerouslySetInnerHTML={{__html: window.t('mad.eyebrow')}} /></span>
              <h2 className="mf-mad-title" dangerouslySetInnerHTML={{__html: window.t('mad.title')}} />
            </div>

            {/* EDIT: copy — cámara propia, mínimo, datos verificables */}
            <p className="mf-mad-body reveal delay-1" dangerouslySetInnerHTML={{__html: window.t('mad.body')}} />

            {/* EDIT: specs reemplazadas por valores verificados — sin temperatura/humedad/cámara B/07:40 */}
            <dl className="mf-mad-specs reveal delay-2">
              <div className="mf-mad-spec">
                <dt>{window.t('mad.s1t')}</dt>
                <dd>{window.t('mad.s1d')}<small>{window.t('mad.s1s')}</small></dd>
              </div>
              <div className="mf-mad-spec">
                <dt>{window.t('mad.s2t')}</dt>
                <dd>{window.t('mad.s2d')}<small>{window.t('mad.s2s')}</small></dd>
              </div>
              <div className="mf-mad-spec">
                <dt>{window.t('mad.s3t')}</dt>
                <dd>{window.t('mad.s3d')}<small>{window.t('mad.s3s')}</small></dd>
              </div>
              <div className="mf-mad-spec">
                <dt>{window.t('mad.s4t')}</dt>
                <dd>{window.t('mad.s4d')}<small>{window.t('mad.s4s')}</small></dd>
              </div>
              <div className="mf-mad-spec">
                <dt>{window.t('mad.s5t')}</dt>
                <dd>{window.t('mad.s5d')}<small>{window.t('mad.s5s')}</small></dd>
              </div>
              <div className="mf-mad-spec">
                <dt>{window.t('mad.s6t')}</dt>
                <dd>{window.t('mad.s6d')}<small>{window.t('mad.s6s')}</small></dd>
              </div>
            </dl>
          </div>
        </div>

        {/* EDIT: marker final — full-width banner across the section */}
        <div className="mf-mad-marker-wide reveal delay-3" aria-hidden="true">
          <span className="dot">●</span>
          <span className="marker">{window.t('mad.banner')}</span>
          <span className="dot">●</span>
        </div>
      </div>
    </section>
  );
}

window.MaduracionSection = MaduracionSection;