/* global React */
function NxBrands({ lang }) {
  const t = window.NX_COPY[lang].brands;
  // Duplicate lists for seamless loop.
  const row1 = [...t.row1, ...t.row1];
  const row2 = [...t.row2, ...t.row2];
  return (
    <section className="nx-section nx-section--paper nx-section--tight" aria-label={t.eyebrow}>
      <div className="nx-eyebrow" style={{ textAlign: "center", display: "flex", justifyContent: "center", marginBottom: 40 }}>{t.eyebrow}</div>
      <div className="nx-marquee">
        <div className="nx-marquee__track nx-marquee__track--ltr">
          {row1.map((b, i) => (
            <span key={"a"+i} className="nx-marquee__item">{b}<span className="nx-marquee__dot" aria-hidden>·</span></span>
          ))}
        </div>
      </div>
      <div className="nx-marquee">
        <div className="nx-marquee__track nx-marquee__track--rtl">
          {row2.map((b, i) => (
            <span key={"b"+i} className="nx-marquee__item">{b}<span className="nx-marquee__dot" aria-hidden>·</span></span>
          ))}
        </div>
      </div>
    </section>
  );
}
window.NxBrands = NxBrands;