Lumi Real Cost of Renting Calculator

Create a high-fidelity, interactive web app that turns a headline rent price into the real monthly cost and real annual cost.

## Core idea
Users often see a listing price and only compare monthly rent, while ignoring deposit, agent fee, utilities, move-in costs, and commuting. This calculator reveals the true cost in a clear, slightly reality check tone.

## UX goals
* Fast to use, no clutter, mobile-friendly
* Inputs feel like a real renting scenario
* Output is instantly understandable, with transparent breakdown
* Tone: calm, practical, lightly witty, never judgmental

## Layout
Single page, 3 sections, sticky results card on desktop:

1. Listing Basics
2. Hidden Costs
3. Commute Cost
Right side: Reality Check Summary card (on mobile, summary appears below and stays accessible via a floating “Summary” button).

## Inputs

### 1) Listing Basics
* Currency selector (default: SGD)
* Monthly rent (number)
* Lease length (months) selector: 6 / 12 / 18 / 24 (default 12)
* Move-in date (optional, only for UI polish, does not affect math)
* “Is rent negotiable?” toggle (optional)
  If ON: show a slider “Discount” 0% to 10% to adjust rent

### 2) Hidden Costs
All costs should support common patterns with friendly presets:

* Deposit
  * Dropdown: 1 month, 2 months, Custom
  * If Custom: numeric input (amount)

* Agent fee
  * Dropdown: None, Half month, 1 month, Custom
  * If Custom: numeric input (amount)

* Utilities (monthly)
  * Electricity (number)
  * Water (number)
  * Internet (number)
  * Optional: “Other monthly fees” (number)

* One-time move-in costs (optional)
  * Cleaning fee (number)
  * Furniture / appliances (number)
  * Moving service (number)
  * “Other one-time costs” (number)

### 3) Commute Cost
Let users choose to include commute cost or not.

* Toggle: “Include commute cost” (default ON)
  If ON, show:
* Workdays per month (default 22)
* Transport mode tabs: “Public”, “Car”, “Mixed”
  For each mode:
* Cost per one-way trip (number)
* One-way time (minutes)

* Optional: “Value my time” toggle (default OFF)
  * If ON: hourly value (number)
  * Convert commute time to cost: time_cost = (minutes * 2 * workdays / 60) * hourly_value

## Calculations

### Adjusted rent
* rent_adjusted = monthly_rent * (1 - discount_percent)

### Monthly recurring costs
* utilities_monthly = electricity + water + internet + other_monthly_fees
* commute_cash_monthly = cost_per_one_way * 2 * workdays
* commute_time_monthly = (one_way_minutes * 2 * workdays / 60) * hourly_value (only if time toggle ON)
* recurring_monthly = rent_adjusted + utilities_monthly + (commute toggles)

### One-time costs total
* deposit_amount = preset months * rent_adjusted OR custom amount
* agent_fee_amount = preset months * rent_adjusted OR custom amount
* move_in_one_time = cleaning + furniture + moving + other_one_time
* one_time_total = deposit_amount + agent_fee_amount + move_in_one_time

### Normalize one-time costs across lease
* one_time_monthly_equivalent = one_time_total / lease_length_months

### Real monthly + annual
* real_monthly = recurring_monthly + one_time_monthly_equivalent
* real_annual = real_monthly * 12

### Also show “Lease total”
* lease_total = recurring_monthly * lease_length_months + one_time_total

## Outputs (Reality Check Summary card)
Show big numbers:
* Real Monthly Cost
* Real Annual Cost
* Lease Total

Then a clean breakdown list:
* Rent (adjusted)
* Utilities
* Commute (cash)
* Commute (time value) if enabled
* One-time costs (monthly equivalent)
  Also show:
* “Hidden cost uplift”: real_monthly - rent_adjusted
* “Uplift %”: uplift / rent_adjusted

Add a small “What’s driving the cost” insight line:
* Identify the largest non-rent contributor and write one sentence like:
  “Biggest add-on: Agent fee amortized across the lease.”

## Interactions
* Instant recalculation on change
* Tooltips with examples for deposit/agent fee
* Preset buttons: “Typical 12-month lease”, “No agent fee”, “Barebones utilities”
* A “Compare to another listing” mini feature:
  * Button “Save as Scenario A”
  * Button “Save as Scenario B”
  * Show A vs B difference in real_monthly and lease_total

## Visual style
* Warm, modern UI, rounded cards, subtle shadows
* Clear typography, accessible contrast
* Micro-animations for number changes (count-up)
* A small progress-style bar showing “Rent vs Hidden Costs” ratio

## Copy tone
Use short, punchy labels:
* Headline: “Rent Reality Check”
* Subhead: “Turn the sticker price into the real monthly and yearly cost.”
* CTA button: “Reality check it”
* Footer note: “Estimates only. Your actual bills may vary.”

## Edge cases
* Prevent negative values
* If lease_length_months is very short (6) and agent fee is 1 month, highlight: “Short lease amplifies one-time fees.”