Mega Footer Block for React

Edit GROUPS at the top of the file: each group is an id, an icon (any Lucide icon), a title and five links. The first four groups fill the first band and the rest the second; keep a multiple of four so the bands stay full. Every link is an anchor with href="#". From six groups up, keep the accordion on phones: a flat list of that many groups is a long scroll.

The markup holds the desktop grid and the phone accordion as two navs, each labelled Footer, and CSS shows one at a time (max-md:hidden and md:hidden). The hidden one is display: none, so it is out of the accessibility tree and the tab order: a screen reader finds one Footer navigation at any width. The cost is the links once more in the HTML.

Each group is a heading with a button; one group is open at a time and opening another closes it, and the first starts open. The open group's links sit in two columns. The Accordion takes hiddenUntilFound, so closed groups stay in the markup as hidden="until-found" and the browser's find in page opens the one that holds a match.

On a 1280 by 855 desktop the whole footer, from its top rule to the legal band, is about 700 pixels tall. Five links per group is the budget: each extra link adds about 32 pixels to both bands.

The block is a footer element, the page's content-info landmark when placed outside main. On desktop each group is a small h2 over a list; on a phone each is a heading with an expand button. The icons are decorative and hidden from assistive technology, and the policy links are a list named Legal.

Below md the brand band, the eight accordion rows (rail to rail, under a rule with + marks) and the legal band stack; a closed row is about 55 pixels tall, so all eight take about 440 pixels. Nothing scrolls sideways at 320 pixels.