Opening Hours Footer Block for React

Edit the DAYS array. Each day has a label, a weekday (0 is Sunday, matching the browser's clock), and an open and close in 24-hour form. The list runs Monday to Sunday. As written, the room opens at 17:00 on weekdays, at noon on Saturday and at 11:00 on Sunday.

After the page has loaded, the footer reads the browser's weekday and tints that row. The day's name gains the word "today" for assistive technology, and the row is the current date. Until that moment no row is tinted, so the server's HTML and the first paint agree, and the tint does not change the row's height. Nothing is announced on its own when the highlight appears.

They are links. Reserve a table is the one primary button, and Order online is an outline button. Point them at your booking page and your ordering page. The footer does not take a reservation and does not send an order.

The block is a footer. The address is an address, the hours are a definition list (the day, then the times), and the two link groups sit in one nav labelled Footer, each with its own heading. The legal links are a labelled list. Each time is a time element, and the range is kept in one direction so it does not reorder.

"The kitchen stops seating thirty minutes before close." It is a sentence in the file, not a calculation. Change it, or remove it, to match the room.

The halves stack with a hairline between them: the wordmark, the address and the two links first (each link the full width), then the two link groups side by side, then the hours, then the legal band. Nothing scrolls sideways at 320 pixels.