Coverage Timeline Contact Block for React

Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation. Replace that timer in submit with a call to your studio inbox or booking tool: shoot, start, hours, name and email hold what the visitor chose. Show the confirmation when the request succeeds, and an error line in the form when it doesn't.

It's plain markup: a track, a bar and a hatched span positioned by percentages of the 6 am to 10 pm day (percentOf), with the hour labels under it. The drawing is one image to a screen reader, named with the coverage and the golden-hour note, and the same words appear as a polite status line beside it, so a screen reader user hears the coverage change as they move the slider. It keeps left-to-right order in a right-to-left layout, because time runs one way on a clock.

It's an example: GOLDEN_START and GOLDEN_END fix it at 6:00 to 7:30 pm, and the page says so beside the drawing. The real golden hour moves with the season and the place. In production, compute it for the shoot's date and location and pass it in, or remove the hatching.

Coverage must finish by 10 pm. maxHoursFrom allows at most 8 hours and no more than the day has left after the start, so a 5:00 pm start allows 5 hours. Choosing a later start shortens a length that no longer fits, and the slider reads its value in words ("4 hours") for screen readers.

The select's trigger takes the id and the label points to it with htmlFor; the Slider is named by the label's id.

Below lg everything stacks inside the panel: the controls, then the timeline, then the name and email. The timeline's five hour labels fit a 320 pixel phone, the segmented control wraps if it must, and the submit button goes full width, so nothing scrolls sideways. The bar slides with a short transition, and not at all with reduced motion.