Prompt: Flight Booking System Interface (FPC009)

Prompt Description

Design the UI for a flight booking system's main search and results page. This is a highly interactive and complex interface.

**Page Components & Flow:**
1.  **Search Form (`data-testid='flight-search-form'`):**
    *   Inputs: 'From' (Origin airport - text input with autocomplete suggestions, simulated), 'To' (Destination airport - text input with autocomplete, simulated), 'Departure Date' (date picker), 'Return Date' (date picker, disabled/hidden for one-way), 'Passengers' (number input).
    *   Options: 'One-way' / 'Round-trip' (radio buttons, affects Return Date visibility/state).
    *   'Search Flights' button (`data-testid='search-flights-btn'`).
2.  **Search Results Area (`data-testid='flight-results-area'`):**
    *   Initially empty or shows a 'Search for flights to see results' message.
    *   After search (simulated - generate 5-10 fake flight results): Display results as cards or rows. Each result shows: Airline Logo & Name, Departure/Arrival Times, Duration, Price, 'Select Flight' button.
    *   Each flight result item should be `data-testid='flight-result-item-N'`.
3.  **Filtering & Sorting Options for Results:**
    *   Filters (applied client-side to simulated results): Price Range (slider or min/max inputs), Number of Stops (checkboxes: Non-stop, 1 stop, 2+ stops), Airlines (multi-select checkboxes).
    *   Filter controls container: `data-testid='results-filters'`.
    *   Sorting: Sort results by Price (low-high, high-low), Duration (shortest first). Sort controls container: `data-testid='results-sort-controls'`.
4.  **Selected Flight Summary (Optional):** A small sidebar or section showing details of a selected flight before proceeding to booking.

**Technical & Accessibility Requirements:**
*   Full semantic page structure.
*   **Date Pickers:** Must be accessible and keyboard navigable. If using a library, ensure it's reputable for A11y. If custom, implement ARIA grid pattern for calendar.
*   **Autocomplete (Simulated):** As user types in Origin/Destination, show a dropdown list of matching airport suggestions (use a static JS array of 5-10 airport names for simulation). Must be keyboard navigable (arrows to select, Enter to confirm). Autocomplete list: `data-testid='autocomplete-suggestions'`.
*   Dynamic updates: Toggling One-way/Round-trip changes form. Applying filters/sorts updates results instantly.
*   All interactive elements need proper ARIA attributes and focus management.
*   Responsive: Search form, results, and filters must be usable on mobile.
*   Styling: Tailwind. Significant custom JS for interactions, date pickers (if custom), autocomplete, filtering/sorting logic, and dynamic result rendering.

**Testing Identifiers:**
*   Search Form: `data-testid='flight-search-form'`
*   Origin Input: `data-testid='input-origin'`
*   Destination Input: `data-testid='input-destination'`
*   Departure Date Input: `data-testid='input-departure-date'`
*   Search Flights Button: `data-testid='search-flights-btn'`
*   Flight Results Area: `data-testid='flight-results-area'`
*   A Flight Result Item: `data-testid='flight-result-item-1'`
*   Results Filters Container: `data-testid='results-filters'`
*   Price Filter (example): `data-testid='filter-price-min'`
*   Results Sort Controls: `data-testid='results-sort-controls'`
*   Sort by Price Button: `data-testid='sort-by-price'`

Key Links & Info