Flash Sale Countdown Banner Block for React

Edit SALE at the top of the file: the regular price, the sale price, how many are claimed and the stock. The percentage off, the "left" count and the meter's fill are derived from them (30% off for 84 against 120), so they never disagree with the prices. The meter is a snapshot, not a live count: feed claimed from your own stock figure to move it.

The clock counts 2 hours, 14 minutes and 36 seconds from the moment the browser has rendered the page (ENDS_IN_MS), and the server draws dashes, so a cached page never shows an old time. For a real deadline, work out the time left in the effect that starts the clock, deadline - Date.now(), never during render.

A sentence, "The sale ends in 2 hours 14 minutes.", written as plain text that changes by the minute, and no ticking digits: the three cells repeat it, so they're hidden from assistive technology. A polite status line says only that the sale has ended. The prices read as "Was $120, now $84", and the meter is decorative because "73 of 100 claimed" is written next to it.

The badge changes from "30% off" to "Ended", the status line announces "The Lumenhouse flash sale has ended.", and the button's label changes from Claim the price to See the lamp. Point both at the pages you need by changing the label and href together.

Claim the price is a link (href="#"): point it at your product or checkout. It's an outline Shine Button, small, so it stays quieter than the page's main call to action; a band of light sweeps across it once on hover and keyboard focus. It renders the link it's given with render, with nativeButton={false}.

The product and prices come first, then the clock, with "Ends in" at its start, then the button at the start. The meter band runs full width under a rule. With reduced motion the entrance is off and the seconds cell is hidden, so the clock moves by the minute. Nothing scrolls sideways at 320 pixels.