Today's Classes Footer Block for React

Edit CLASSES at the top of the file. Each session has a time, a name, a coach, a spot count and the href the Book link uses. The heading's count is the length of that array, and each badge reads its own spots. The times are an example day: there is no date, so the block never goes stale.

Each Book link is a plain anchor. Its visible label is "Book", and the class name is added for assistive technology, so a list of links still says which session it is. Point href at that session's booking page. The Shine Button is the one primary action and points at the full timetable.

It is a real link styled as the Shine Button. The button renders an anchor through render, with nativeButton off. Point it at your timetable. It does not book a session by itself.

The brand, the heading and the three sessions come first, each session stacked as time, class, spots and Book. Under them the two link groups sit side by side, then the legal row. From a wide screen the sessions take about three fifths of the row and the groups the rest, divided by a hairline.

The block is a footer, the page's content-info landmark. "Today at the club" is a heading, and each class name is a smaller heading beside the coach. Times are time elements. The two groups are one nav labelled Footer, each with its own heading. The policy links are a list named Legal.

It is the current year, read when the footer renders, so it never goes stale. The block is a server component with no state, so on a server-rendered site the year is the server's when the page was built or rendered.