Row Labels Dual Marquee Logos Block for React

Edit INDUSTRIES (and the two arrays it lists, AEROSPACE and AUTOMOTIVE) at the top of the file: each industry has a label, a plant count and its customers. The heading's total is the sum of the counts, so it stays in step. Add a third band by adding an entry and another IndustryBand.

Four ways: the pause button at the end of the first row (a toggle with aria-pressed that stops both rows), hovering a row, focusing into a row, and the visitor's reduced-motion setting, which stops both rows and leaves them as rows you can scroll by hand. The second row keeps a matching space at its end so both rows fade out at the same place; the button is hidden with reduced motion.

Each label is an h3, so the industries are a headings outline under the block's h2. Each row is a region named for its industry ("Aerospace customers"); the first copy holds each customer's name as text, and the looping copies are hidden from assistive technology and can't be focused.

The plant counts and the total are wrapped in bdi so a right-to-left page keeps each figure in reading order instead of moving it next to the wrong word.

Below lg the divider disappears and the label sits above its row, with the bands' rules between them. The rows stay marquees at the full width and nothing scrolls sideways at 320 pixels.