Two-level: room type → rate variants

You are building one self-contained, fully interactive wireframe-style React
component that demonstrates a single hotel "Room Normalizer" concept.

# Concept
- Number: 8 of 14
- Section: normalizer
- Name: Two-level: room type → rate variants
- Tagline: Hierarchical disclosure
- One-line summary: Pick a normalized room type at level 1; expand any rate variant (Flexible, Advance Purchase, Member Saver…) to see its bookable offers.

# Framing
Makes normalization explicit by separating the room-type decision from the rate-plan decision. The user drills from room → rate variant → bookable offer, so the grouping logic is fully legible.

# What this is
Two stacked levels of disclosure. Level 1: select a normalized room type. Level 2: each rate variant (Flexible, Advance Purchase 21d, Member Saver, etc.) collapses or expands to reveal its bookable offers with attributes and Reserve.

# Why it works
Makes the grouping logic auditable. Users see exactly which rate variants the normalizer collapsed under a single room type, and can drill into only the variants they care about.

# Best use case
B2B travel desks and corporate-policy environments where the rate plan (refundability, advance-purchase rules, loyalty terms) drives the decision more than the room itself.

# Tradeoffs / risks
Two clicks to reach a bookable rate. Hierarchy can feel slow for users who already know which exact rate they want. Variant labels must be human-readable or the second level becomes noise.

# UX notes (scannability · normalization · booking confidence · provider transparency)
Strong rate-plan transparency. Lower scannability than a flat list — the user must drill in. Booking confidence reinforced by the explicit room → rate-variant → offer trail.

# Visual + interaction requirements
- Wireframe fidelity: monochrome, system UI, no brand color. Use Tailwind
  utility classes only. No images. Use simple borders, muted backgrounds,
  and mono labels for meta text (uppercase, tracking-widest, text-[10px]).
- Canvas width: 764px, centered. Internal content respects that frame.
- Context: this lives inside a hotel PDP "Rooms & Rates" section. Assume
  3 normalized room types (King, Queen, Double Queen) with 5–8 bookable
  rates each. Invent realistic mock data inline — rate label, bed, meals
  (room only / breakfast included), cancellation (free until N / non-refundable),
  payment (pay now / pay at hotel), price per night.
- Fully interactive: every control the concept implies must work in-browser
  with React state only — no backend, no router. Examples: accordions expand,
  tabs filter, sort headers sort, "Show N more" reveals rows, builder toggles
  recompute price live, sticky CTAs update with selection.
- Accessibility: real <button> elements, keyboard focus rings, aria-expanded
  on disclosure controls, aria-pressed on toggles.

# Deliverable
- A single default-exported React component file using TypeScript + Tailwind.
- No external UI library. Inline any small primitives you need.
- Include the mock data inline at the top of the file.
- File should run as-is when dropped into a Vite + React + Tailwind project.

Build only this concept. Do not generate the other 13.