Segmented Control

Build an iOS-style segmented control as a single React component. It's a small piece of stateful UI — one selected index — but done right the highlight, the ARIA state, and the status label all read from that single source of truth, and each segment is a real role="tab" button inside a role="tablist".

Task

The starter App.tsx renders three segments — Day, Week, Month — with the first already selected. Make it interactive:

1. Hold the state. Track the selected index with useState(0).
2. Select on click. Each segment sets the selected index to its own position when clicked.
3. Reflect it three ways. The chosen segment gets the selected class (accent background), aria-selected={true}, and the status line reads Selected: <label>.

Examples

• The page loads with Day highlighted green and "Selected: Day" below. Clicking Week moves the highlight to Week and shows "Selected: Week".
• Only one segment is ever selected — picking a new one deselects the old.
• A screen reader announces the active segment as selected, because role="tab" + aria-selected are wired to the same index.

Notes

• One index, three effects. Don't track the class, the aria value, and the label separately — derive all three from the selected index.
• Exactly one selected. Comparing each segment's index against the single selected value guarantees only one carries the highlight.
• Use tab roles. The track is role="tablist" and each segment is a <button role="tab"> with aria-selected — the accessible pattern for a single-choice control.
• Styling (dark theme, track, accent) is already in styles.css; focus on the state.