Mortgage interest calculator

Build a complete, production-ready mortgage calculator web application with the following specifications:

user should be able interect run with it in Preview 

## Technology Stack
- React (functional components with hooks)
- Recharts for data visualization
- TailwindCSS for styling
- shadcn/ui components (Card, Input, Button)

## Core Features

### 1. Input Controls
Create input fields for:
- Principal amount (number input with $ prefix, default: $100,000)
- Fixed interest rate (number input with % suffix, default: 3.99%)
- Amortization period (dropdown: 15, 20, 25, 30 years, default: 20)
- Comparison period (dropdown: 1, 2, 3, 5, 10 years, default: 5)

### 2. Variable Rate Schedule Builder
- Display a dynamic list of rate periods (start month, end month, rate %)
- Each period shows: Start Month, End Month, Interest Rate
- "Add Period" button to add new rate periods
- "Remove" button for each period (minimum 1 period required)
- Default periods:
  * Period 1: Months 0-6 at 3.70%
  * Period 2: Months 7-12 at 3.45%
  * Period 3: Months 13-60 at 4.70%

### 3. Mortgage Calculation Logic
Use the standard amortization formula:
Monthly Payment = P × [r(1 + r)^n] / [(1 + r)^n - 1]

Where:
- P = principal
- r = monthly interest rate (annual rate / 12 / 100)
- n = total number of months

Calculate for BOTH fixed and variable rates:
- Monthly payment amounts
- Cumulative interest paid over time
- Total amount paid
- Remaining balance

For variable rates: Apply the rate from the user-defined schedule for each month.

### 4. Interactive Line Chart (Recharts)
Display a line chart showing:
- X-axis: Months (0 to comparison period in months)
- Y-axis: Cumulative Interest Paid ($)
- Two lines:
  * Fixed Rate (blue/indigo color)
  * Variable Rate (green/emerald color)
- Features:
  * Custom tooltip showing exact values on hover
  * Legend
  * Grid lines
  * Smooth curves (monotone type)
  * Y-axis formatted as "$Xk" (thousands)

### 5. Comparison Table
Create a summary table with columns:
- Type (Fixed/Variable/Difference)
- Average Monthly Payment
- Total Interest Paid
- Total Amount Paid
- Rate Pattern description

Rows:
1. Fixed Rate row (indigo background)
2. Variable Rate row (green background)
3. Difference row showing absolute differences and which option saves money

### 6. Real-Time Updates
All calculations and visualizations must update instantly when ANY input changes:
- No submit button required
- Use React state and useMemo for performance
- Recalculate on every input change

### 7. UI/UX Requirements
- Modern, gradient background (blue to indigo)
- Card-based layout with shadows
- Responsive design (mobile, tablet, desktop)
- Colored section headers (indigo for basic params, green for variable rates)
- Currency formatting with commas and $ symbol
- Smooth transitions and hover effects
- Clear visual hierarchy
- Icons from lucide-react (Calculator, TrendingUp, Plus, Trash2)

### 8. Design Specifications
- Use Tailwind utility classes throughout
- Card components with CardHeader, CardTitle, CardDescription, CardContent
- Input components with proper labels
- Dropdown selects styled to match theme
- Table with alternating row colors and hover effects
- Responsive grid layouts (1 column mobile, 2-4 columns desktop)

## Output Requirements
1. Single React component file (MortgageCalculator.jsx)
2. Complete implementation with no placeholders
3. All imports clearly specified
4. Default export of the component
5. Proper error handling (e.g., division by zero protection)
6. Comments explaining complex calculations

## Example User Flow
1. User opens calculator with default values
2. Chart and table display comparison
3. User modifies principal to $250,000 → instant update
4. User clicks "Add Period" to add 4th variable rate period
5. User sets new period: Months 61-120 at 5.20%
6. User changes comparison period to 10 years
7. Chart extends to 120 months showing all rate changes
8. Table updates with new totals

## Additional Notes
- Ensure variable rate calculation correctly applies different rates in different months
- Handle edge cases (e.g., balance reaching zero before amortization ends)
- All monetary values formatted as currency ($X,XXX)
- Percentages shown to 2 decimal places
- Months are 0-indexed (Month 0 = start, Month 1 = first payment)

Build the complete, working implementation now.