Review sorting options exist (helpful, recent, rating)

Reviews rendered in a single fixed order force shoppers to read chronologically, which buries the most decision-useful content. Negative reviews discovered through sorting drive credibility; a catalog that shows only the oldest or newest feedback reads like curation and erodes trust. Sort controls also let shoppers self-serve the exact signal they need — recency for fast-changing products, helpfulness for depth, rating extremes for risk assessment — so conversion lifts on products with mixed reviews.

Add a sort control at components/ReviewSort.tsx emitting recent, helpful, highest-rating, and lowest-rating values, and wire the API to accept a sort query parameter that maps to an ORDER BY clause. Verify the displayed order actually changes on each selection:

const sortMap = {
  recent: { created_at: 'desc' },
  helpful: { helpful_votes: 'desc' },
  'highest-rating': { rating: 'desc' },
  'lowest-rating': { rating: 'asc' }
}

• ID: ecommerce-reviews.display-ux.review-sorting

• Severity: medium

• What to look for: Enumerate all sorting options available in the review display UI. For each option, classify whether it has a corresponding query or sort implementation in the API/data layer. Count the total number of functional sort options.

• Pass criteria: At least 2 distinct sorting options are available and functional (e.g., "Most Recent" and "Most Helpful" or "Highest Rating"), each backed by a corresponding sort parameter in the review query or API endpoint.

• Fail criteria: Fewer than 2 sorting options exist, or the sort dropdown/control renders options that do not actually change the displayed review order.

• Skip (N/A) when: The project has fewer than 5 total reviews in the database or no review display section exists.

• Detail on fail: "0 sorting options found. Reviews always render in database insertion order." or "Sort dropdown shows 3 options but onChange handler is empty — reviews never reorder."

• Remediation: Add a sort control in components/ReviewSort.tsx and update the review query/display:

  // components/ReviewSort.tsx
  export function ReviewSort({ onSortChange, currentSort }) {
    return (
      <select value={currentSort} onChange={(e) => onSortChange(e.target.value)}>
        <option value="recent">Most Recent</option>
        <option value="helpful">Most Helpful</option>
        <option value="highest-rating">Highest Rating First</option>
        <option value="lowest-rating">Lowest Rating First</option>
      </select>
    )
  }
  
  // api/reviews?productId=X&sort=recent|helpful|highest-rating|lowest-rating
  const sortMap = {
    recent: { created_at: 'desc' },
    helpful: { helpful_votes: 'desc' },
    'highest-rating': { rating: 'desc' },
    'lowest-rating': { rating: 'asc' }
  }