Hybrid (prebuilt + editable)

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

# Concept
- Number: 14 of 14
- Section: builder
- Name: Hybrid (prebuilt + editable)
- Tagline: Compose · inline edits
- One-line summary: Familiar prebuilt rate rows with inline toggles for breakfast and refundability. Each row tracks its own customized state.

# Framing
Best of both worlds: keep the scannable prebuilt rate list, but let users tweak any row inline. The 'Customized' marker preserves the audit trail.

# What this is
Three prebuilt King rates render as rows. Each exposes inline pill toggles for breakfast and refundability. Toggling adjusts that row's price and chips and tags it as 'Customized'. A reset link reverts to baseline.

# Why it works
Preserves the existing scannable comparison pattern (concepts 01–10) while opening a flexibility door. Cause/effect is row-local — easy to reason about.

# Best use case
Migration-friendly default: drop into the existing PDP without retraining users. Strong for power users who want familiar rows but occasional tweaks.

# Tradeoffs / risks
Editing is row-by-row, not cross-row. Pricing logic may feel inconsistent if two rows offer the same toggle at different deltas. 'Customized' state needs to be unmistakable.

# UX notes (scannability · normalization · booking confidence · provider transparency)
Combines static-selection scannability with compositional flexibility. Reset-per-row is essential for trust — users need a one-click escape back to the prebuilt baseline.

# 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.