Featured Carousel Reviews Block for React

RULES at the top of the file lists them in the order the slides show: each has a label, an eligible test and a score. The winner of a rule is the highest score among eligible reviews that no earlier rule took, and a tie goes to the newer review. Change a rule, or add one, and the slides, the dots and "Pick 3 of 5" follow. The sentence on each slide ("Written after 14 months with the chair") is built from the winning review's own numbers.

Replace REVIEWS, newest first. Each review has an id, name, rating, an ISO date, a title, a body, helpful (votes), owned (months) and verified. Keep at least one review that is verified, one of 2 stars or fewer, and enough that five different reviews can win; otherwise a rule can have nothing eligible left.

It never plays on its own. Press Next, Previous, a dot, or the arrow keys on the slides or either button; the arrows follow the page's direction. Slides that are out of view are inert and hidden from screen readers, so only the current one can be focused or read, and the position is announced once as "Pick 3 of 5, Newest verified". The Carousel is Embla: the block holds its api, reads selectedScrollSnap on select, and scrolls with scrollTo; each slide is a labelled group.

On a phone each slide is a little narrower than the frame, so the edge of the next one shows and tells you there is more. From the medium breakpoint a slide fills the frame. The peeking slide is not focusable and not read; it is a visual cue only.

Yes. The carousel runs in the page's direction, the chevrons mirror, the corner marks stay on the corners, and counts, dates and the owned time are isolated so digits keep their order.