// Milfers · Seals strip · editorial brand-identity moment
//   · big rotating 35-días seal as centerpiece
//   · satellite stamps from Guía de Marca 2026
//   · corner bursts as background texture
function SealsStrip() {
  const satellites = [
    { glyph: 'seal-star', lbl: window.t('seals.sat1') },
    { glyph: 'stamp',     lbl: window.t('seals.sat2') },
    { glyph: 'flame',     lbl: window.t('seals.sat3') },
    { glyph: 'badge-35',  lbl: window.t('seals.sat4') },
  ];
  return (
    <section className="mf-seals" id="identidad" aria-labelledby="seals-title">
      {/* decorative corner bursts */}
      <div className="mf-seals-burst mf-seals-burst--tl" aria-hidden="true"><i className="bg bg--burst-tl"></i></div>
      <div className="mf-seals-burst mf-seals-burst--br" aria-hidden="true"><i className="bg bg--burst-tl"></i></div>

      <div className="mf-seals-inner">
        <header className="mf-seals-head reveal">
          <span className="ed-sec-title"><span className="n">5.</span>&nbsp;<span dangerouslySetInnerHTML={{__html: window.t('seals.eyebrow')}} /></span>
          <h2 className="mf-seals-title" id="seals-title" dangerouslySetInnerHTML={{__html: window.t('seals.title')}} />
          <p className="mf-seals-lede" dangerouslySetInnerHTML={{__html: window.t('seals.lede')}} />
        </header>

        {/* Centerpiece: split 35-días seal (inner 35 fixed, ring rotating) */}
        <div className="mf-seals-hero reveal delay-1" aria-hidden="true">
          <div className="mf-seals-hero-stage">
            <img src={window.MF_SEAL_SPLIT_SRC} alt="" className="mf-seals-hero-seal" />
            <span className="mf-seals-hero-tag">{window.t('seals.heroTag')}</span>
          </div>
        </div>

        {/* Satellite row */}
        <div className="mf-seals-sats reveal delay-2" aria-hidden="true">
          {satellites.map((s) => (
            <div className="mf-seals-sat" key={s.glyph}>
              <span className="mf-seals-sat-icon"><i className={`bg bg--${s.glyph}`}></i></span>
              <span className="mf-seals-sat-lbl">
                {s.lbl.split('\n').map((l, i) => <span key={i} style={{display:'block'}}>{l}</span>)}
              </span>
            </div>
          ))}
        </div>

        {/* Footer rule with system credits */}
        <div className="mf-seals-credits">
          <span>{window.t('seals.c1')}</span>
          <span>{window.t('seals.c2')}</span>
          <span>{window.t('seals.c3')}</span>
        </div>
      </div>
    </section>
  );
}

window.SealsStrip = SealsStrip;