<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rent vs Buy Calculator — Should You Rent or Buy a Home?</title>
    <meta name="description" content="Free Rent vs Buy calculator to compare the true cost of renting versus buying a home. Includes mortgage, taxes, appreciation, and investment returns. Make smarter housing decisions.">
    <meta name="keywords" content="rent vs buy calculator, rent or buy, home buying calculator, mortgage calculator, housing decision, real estate calculator, rent cost, buy cost">
    <meta name="robots" content="index,follow">
    <link rel="canonical" href="https://{域名}/">
    <meta property="og:title" content="Rent vs Buy Calculator — Should You Rent or Buy a Home?">
    <meta property="og:description" content="Compare the true cost of renting vs buying. Includes mortgage, taxes, home appreciation, and opportunity cost. Make smarter housing decisions.">
    <meta property="og:url" content="https://{域名}/">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Rent vs Buy Calculator — Should You Rent or Buy a Home?">
    <meta name="twitter:description" content="Compare the true cost of renting vs buying. Free calculator with charts and city presets.">
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebApplication",
        "name": "Rent vs Buy Calculator",
        "url": "https://{域名}/",
        "description": "Interactive calculator comparing the total cost of renting versus buying a home over time.",
        "applicationCategory": "FinanceApplication",
        "operatingSystem": "All",
        "offers": {"@type": "Offer", "price": "0", "priceCurrency": "USD"}
    }
    </script>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

    <!-- Adsterra -->
    <script src="https://pl30318564.effectivecpmnetwork.com/86/6d/12/866d12f67c604604865e7c9dc50a3aeb.js"></script>
    <script src="https://pl30318564.effectivecpmnetwork.com/06/2d/72/062d727b3b792e45f1a8bd4e912f0552.js"></script>

    <!-- Baidu Analytics -->
    <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?d2d05668e9d64d1f6112364ae3eb9e1a";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
    </script>

    <style>
    :root {
      --primary: #3b82f6;
      --primary-hover: #2563eb;
      --primary-pressed: #1d4ed8;
      --primary-light: #dbeafe;
      --bg-light: #f8fafc;
      --bg-dark: #0f172a;
      --text-primary: #1e293b;
      --text-secondary: #64748b;
      --text-muted: #94a3b8;
      --border: #e2e8f0;
      --card-bg: #ffffff;
      --danger: #ef4444;
      --danger-hover: #dc2626;
      --success: #10b981;
      --success-light: #d1fae5;
      --warning: #f59e0b;
      --warning-light: #fef3c7;
      --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
      --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
      --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
      --radius-sm: 6px;
      --radius-md: 8px;
      --radius-lg: 12px;
      --radius-xl: 16px;
      --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: var(--font);
      background: var(--bg-light);
      color: var(--text-primary);
      line-height: 1.6;
      min-height: 100vh;
    }

    /* Navbar */
    .navbar {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
      padding: 0 24px;
    }
    .navbar-inner {
      max-width: 1280px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 56px;
    }
    .navbar-brand {
      font-size: 1.125rem;
      font-weight: 700;
      color: var(--text-primary);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .navbar-brand svg { width: 24px; height: 24px; color: var(--primary); }
    .nav-links { display: flex; gap: 24px; list-style: none; }
    .nav-links a {
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--text-secondary);
      text-decoration: none;
      transition: color 0.2s ease;
    }
    .nav-links a:hover { color: var(--primary); }

    /* Hero */
    .hero {
      text-align: center;
      padding: 48px 24px 32px;
      max-width: 800px;
      margin: 0 auto;
    }
    .hero h1 {
      font-size: 2rem;
      font-weight: 700;
      line-height: 1.2;
      color: var(--text-primary);
      margin-bottom: 12px;
    }
    .hero p {
      font-size: 1.0625rem;
      color: var(--text-secondary);
      max-width: 600px;
      margin: 0 auto;
      line-height: 1.6;
    }

    /* Main Container */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px 64px;
    }
    .two-col {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
    }
    @media (min-width: 1024px) {
      .two-col { grid-template-columns: 420px 1fr; }
    }

    /* Card */
    .card {
      background: var(--card-bg);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-md);
      padding: 24px;
      transition: all 0.2s ease;
    }
    .card:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-2px);
    }
    .card-title {
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .card-title svg { width: 20px; height: 20px; color: var(--primary); }

    /* Form */
    .form-group { margin-bottom: 14px; }
    .form-label {
      display: block;
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--text-primary);
      margin-bottom: 4px;
    }
    .form-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .form-input {
      width: 100%;
      height: 42px;
      padding: 0 12px;
      border: 2px solid var(--border);
      border-radius: var(--radius-md);
      font-size: 0.9375rem;
      font-family: var(--font);
      color: var(--text-primary);
      background: #fff;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .form-input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
    }
    .form-input::placeholder { color: var(--text-muted); }
    .form-prefix, .form-suffix {
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--text-secondary);
      white-space: nowrap;
      min-width: 24px;
      text-align: center;
    }

    /* Range Slider */
    .range-group { margin-bottom: 14px; }
    .range-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;
    }
    .range-value {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--primary);
    }
    input[type="range"] {
      -webkit-appearance: none;
      width: 100%;
      height: 6px;
      border-radius: 3px;
      background: var(--border);
      outline: none;
      cursor: pointer;
    }
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--primary);
      cursor: pointer;
      box-shadow: var(--shadow-sm);
      transition: transform 0.15s ease;
    }
    input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }

    /* Buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-family: var(--font);
      font-size: 0.9375rem;
      font-weight: 600;
      padding: 12px 24px;
      border-radius: var(--radius-md);
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
      height: 44px;
    }
    .btn-primary {
      background: var(--primary);
      color: #fff;
      width: 100%;
    }
    .btn-primary:hover {
      background: var(--primary-hover);
      transform: translateY(-1px);
      box-shadow: var(--shadow-md);
    }
    .btn-primary:active {
      background: var(--primary-pressed);
      transform: translateY(0);
    }
    .btn-primary:disabled {
      background: #94a3b8;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }
    .btn-secondary {
      background: transparent;
      color: var(--primary);
      border: 2px solid var(--primary);
    }
    .btn-secondary:hover {
      background: var(--primary-light);
    }
    .btn-sm { padding: 6px 14px; font-size: 0.8125rem; height: 36px; }

    /* City Presets */
    .preset-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin-bottom: 16px;
    }
    @media (min-width: 640px) {
      .preset-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (min-width: 768px) {
      .preset-grid { grid-template-columns: repeat(4, 1fr); }
    }
    .preset-btn {
      padding: 8px 12px;
      font-size: 0.75rem;
      font-weight: 500;
      font-family: var(--font);
      background: var(--bg-light);
      border: 1.5px solid var(--border);
      border-radius: var(--radius-md);
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.15s ease;
      text-align: center;
      line-height: 1.3;
    }
    .preset-btn:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: var(--primary-light);
    }
    .preset-btn.active {
      border-color: var(--primary);
      background: var(--primary-light);
      color: var(--primary);
      font-weight: 600;
    }

    /* Result Cards */
    .result-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 16px;
    }
    @media (min-width: 640px) {
      .result-grid { grid-template-columns: repeat(4, 1fr); }
    }
    .result-item {
      text-align: center;
      padding: 16px 12px;
      border-radius: var(--radius-lg);
      background: var(--bg-light);
    }
    .result-label {
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--text-muted);
      margin-bottom: 4px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .result-value {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--text-primary);
    }
    .result-value.positive { color: var(--success); }
    .result-value.negative { color: var(--danger); }

    /* Conclusion Card */
    .conclusion {
      margin-top: 20px;
      padding: 20px 24px;
      border-radius: var(--radius-xl);
      font-weight: 600;
      font-size: 1.0625rem;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .conclusion.buy { background: var(--success-light); color: #065f46; }
    .conclusion.rent { background: var(--warning-light); color: #92400e; }
    .conclusion.breakeven { background: var(--primary-light); color: #1e40af; }
    .conclusion-icon { font-size: 1.5rem; flex-shrink: 0; }

    /* Chart Container */
    .chart-wrapper {
      position: relative;
      width: 100%;
      min-height: 380px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    canvas { width: 100% !important; }

    /* Loading Spinner */
    .spinner {
      width: 32px; height: 32px;
      border: 3px solid rgba(59,130,246,0.2);
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Fade-in-up */
    .fade-in-up {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .fade-in-up.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Footer */
    .footer {
      text-align: center;
      padding: 32px 24px;
      color: var(--text-muted);
      font-size: 0.8125rem;
      border-top: 1px solid var(--border);
    }
    .footer a {
      color: var(--text-secondary);
      text-decoration: none;
      margin: 0 8px;
    }
    .footer a:hover { color: var(--primary); }

    /* Responsive */
    @media (max-width: 640px) {
      .hero h1 { font-size: 1.5rem; }
      .hero { padding: 32px 16px 24px; }
      .container { padding: 0 16px 40px; }
      .card { padding: 20px; }
      .result-value { font-size: 1.0625rem; }
      .navbar { padding: 0 16px; }
      .nav-links { gap: 16px; }
    }
    </style>

    <!-- Monetag (delayed) -->
    <script>
    setTimeout(function(){
      var s = document.createElement('script');
      s.src = 'https://quge5.com/88/tag.min.js';
      s.setAttribute('data-zone', '258575');
      s.async = true;
      s.setAttribute('data-cfasync', 'false');
      document.head.appendChild(s);
    }, 3000);
    </script>
</head>
<body>

<!-- Navbar -->
<nav class="navbar">
  <div class="navbar-inner">
    <a href="/" class="navbar-brand">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
      Rent vs Buy
    </a>
    <ul class="nav-links">
      <li><a href="/">Calculator</a></li>
      <li><a href="/about.html">About</a></li>
      <li><a href="/privacy.html">Privacy</a></li>
    </ul>
  </div>
</nav>

<!-- Hero -->
<section class="hero fade-in-up">
  <h1>Rent vs Buy Calculator</h1>
  <p>Compare the true cost of renting versus buying a home. See your break-even point and make a confident housing decision backed by real numbers.</p>
</section>

<!-- Main Content -->
<div class="container">
  <div class="two-col">

    <!-- Left: Input Panel -->
    <div>
      <div class="card fade-in-up" id="inputCard">
        <div class="card-title">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
          Your Numbers
        </div>

        <!-- City Presets -->
        <div class="form-label">Quick City Presets</div>
        <div class="preset-grid" id="presetGrid">
          <button class="preset-btn" data-city="sf">San Francisco</button>
          <button class="preset-btn" data-city="nyc">New York</button>
          <button class="preset-btn" data-city="la">Los Angeles</button>
          <button class="preset-btn" data-city="austin">Austin</button>
          <button class="preset-btn" data-city="chicago">Chicago</button>
          <button class="preset-btn" data-city="miami">Miami</button>
          <button class="preset-btn" data-city="seattle">Seattle</button>
          <button class="preset-btn" data-city="boston">Boston</button>
          <button class="preset-btn" data-city="denver">Denver</button>
          <button class="preset-btn" data-city="phoenix">Phoenix</button>
          <button class="preset-btn" data-city="atlanta">Atlanta</button>
          <button class="preset-btn" data-city="dc">Washington DC</button>
        </div>

        <!-- Inputs -->
        <div class="form-group">
          <label class="form-label">Home Price ($)</label>
          <input type="number" class="form-input" id="homePrice" value="450000" min="10000" step="1000">
        </div>

        <div class="form-group">
          <label class="form-label">Down Payment (%)</label>
          <input type="number" class="form-input" id="downPayment" value="20" min="0" max="100" step="0.5">
        </div>

        <div class="form-group">
          <label class="form-label">Mortgage Rate (%)</label>
          <input type="number" class="form-input" id="mortgageRate" value="6.5" min="0.1" max="20" step="0.01">
        </div>

        <div class="form-group">
          <label class="form-label">Monthly Rent ($)</label>
          <input type="number" class="form-input" id="monthlyRent" value="2200" min="100" step="50">
        </div>

        <div class="form-group">
          <label class="form-label">Annual Home Appreciation (%)</label>
          <input type="number" class="form-input" id="appreciation" value="4" min="-10" max="30" step="0.1">
        </div>

        <div class="form-group">
          <label class="form-label">Annual Rent Increase (%)</label>
          <input type="number" class="form-input" id="rentIncrease" value="3" min="0" max="20" step="0.1">
        </div>

        <div class="form-group">
          <label class="form-label">Property Tax Rate (%)</label>
          <input type="number" class="form-input" id="propertyTax" value="1.1" min="0" max="5" step="0.01">
        </div>

        <div class="form-group">
          <label class="form-label">Annual Maintenance (%)</label>
          <input type="number" class="form-input" id="maintenance" value="1" min="0" max="5" step="0.1">
        </div>

        <div class="form-group">
          <label class="form-label">Investment Return (% — opportunity cost on down payment)</label>
          <input type="number" class="form-input" id="investmentReturn" value="7" min="0" max="30" step="0.1">
        </div>

        <div class="range-group">
          <div class="range-header">
            <label class="form-label" style="margin-bottom:0">Years to Compare</label>
            <span class="range-value" id="yearsValue">10</span>
          </div>
          <input type="range" id="years" min="1" max="30" value="10" step="1">
        </div>

        <button class="btn btn-primary" id="calculateBtn">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="18" rx="2"/><line x1="6" y1="8" x2="18" y2="8"/><line x1="6" y1="12" x2="18" y2="12"/><line x1="6" y1="16" x2="12" y2="16"/></svg>
          Calculate
        </button>
      </div>
    </div>

    <!-- Right: Results & Chart -->
    <div>
      <div class="card fade-in-up" id="resultCard">
        <div class="card-title">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
          Results
        </div>

        <!-- Summary Stats -->
        <div class="result-grid">
          <div class="result-item">
            <div class="result-label">Total Cost of Buying</div>
            <div class="result-value" id="buyCostResult">—</div>
          </div>
          <div class="result-item">
            <div class="result-label">Total Cost of Renting</div>
            <div class="result-value" id="rentCostResult">—</div>
          </div>
          <div class="result-item">
            <div class="result-label">Net Difference</div>
            <div class="result-value" id="diffResult">—</div>
          </div>
          <div class="result-item">
            <div class="result-label">Break-Even Year</div>
            <div class="result-value" id="breakevenResult">—</div>
          </div>
        </div>

        <!-- Conclusion -->
        <div id="conclusionBox"></div>

        <!-- Chart -->
        <div class="chart-wrapper" id="chartContainer">
          <div class="spinner" id="chartSpinner" style="display:none"></div>
          <canvas id="costChart"></canvas>
        </div>
      </div>
    </div>

  </div>
</div>

<!-- Footer -->
<footer class="footer">
  <p>
    <a href="/">Home</a> &middot;
    <a href="/about.html">About</a> &middot;
    <a href="/privacy.html">Privacy</a> &middot;
    <a href="/contact.html">Contact</a>
  </p>
  <p style="margin-top:8px">&copy; 2026 Rent vs Buy Calculator. All values are estimates for comparison purposes only.</p>
</footer>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
(function() {

// ── City Preset Data ──
const CITY_PRESETS = {
  sf:      { homePrice: 1300000, downPayment: 20, mortgageRate: 6.5, monthlyRent: 3800, appreciation: 5, rentIncrease: 4, propertyTax: 0.74, maintenance: 1, investmentReturn: 7 },
  nyc:     { homePrice: 850000,  downPayment: 20, mortgageRate: 6.5, monthlyRent: 4200, appreciation: 4, rentIncrease: 3.5, propertyTax: 1.4, maintenance: 1, investmentReturn: 7 },
  la:      { homePrice: 920000,  downPayment: 20, mortgageRate: 6.5, monthlyRent: 3200, appreciation: 4.5, rentIncrease: 3.5, propertyTax: 0.76, maintenance: 1, investmentReturn: 7 },
  austin:  { homePrice: 480000,  downPayment: 20, mortgageRate: 6.5, monthlyRent: 2000, appreciation: 5, rentIncrease: 4, propertyTax: 1.8, maintenance: 1, investmentReturn: 7 },
  chicago: { homePrice: 320000,  downPayment: 20, mortgageRate: 6.5, monthlyRent: 2100, appreciation: 3, rentIncrease: 2.5, propertyTax: 2.1, maintenance: 1, investmentReturn: 7 },
  miami:   { homePrice: 580000,  downPayment: 20, mortgageRate: 6.5, monthlyRent: 2900, appreciation: 5.5, rentIncrease: 4.5, propertyTax: 0.97, maintenance: 1, investmentReturn: 7 },
  seattle: { homePrice: 820000,  downPayment: 20, mortgageRate: 6.5, monthlyRent: 2600, appreciation: 5, rentIncrease: 4, propertyTax: 0.93, maintenance: 1, investmentReturn: 7 },
  boston:  { homePrice: 780000,  downPayment: 20, mortgageRate: 6.5, monthlyRent: 3500, appreciation: 4, rentIncrease: 3.5, propertyTax: 1.12, maintenance: 1, investmentReturn: 7 },
  denver:  { homePrice: 580000,  downPayment: 20, mortgageRate: 6.5, monthlyRent: 2200, appreciation: 4.5, rentIncrease: 3.5, propertyTax: 0.55, maintenance: 1, investmentReturn: 7 },
  phoenix: { homePrice: 450000,  downPayment: 20, mortgageRate: 6.5, monthlyRent: 1900, appreciation: 4, rentIncrease: 3, propertyTax: 0.62, maintenance: 1, investmentReturn: 7 },
  atlanta: { homePrice: 390000,  downPayment: 20, mortgageRate: 6.5, monthlyRent: 1900, appreciation: 4.5, rentIncrease: 3.5, propertyTax: 0.92, maintenance: 1, investmentReturn: 7 },
  dc:      { homePrice: 650000,  downPayment: 20, mortgageRate: 6.5, monthlyRent: 2700, appreciation: 3.5, rentIncrease: 3, propertyTax: 0.85, maintenance: 1, investmentReturn: 7 }
};

// ── DOM references ──
const $ = (id) => document.getElementById(id);
const homePriceEl = $('homePrice');
const downPaymentEl = $('downPayment');
const mortgageRateEl = $('mortgageRate');
const monthlyRentEl = $('monthlyRent');
const appreciationEl = $('appreciation');
const rentIncreaseEl = $('rentIncrease');
const propertyTaxEl = $('propertyTax');
const maintenanceEl = $('maintenance');
const investmentReturnEl = $('investmentReturn');
const yearsEl = $('years');
const yearsValueEl = $('yearsValue');
const calculateBtn = $('calculateBtn');
const buyCostResult = $('buyCostResult');
const rentCostResult = $('rentCostResult');
const diffResult = $('diffResult');
const breakevenResult = $('breakevenResult');
const conclusionBox = $('conclusionBox');
const chartSpinner = $('chartSpinner');

let chartInstance = null;

// ── City Preset Handlers ──
$('presetGrid').addEventListener('click', function(e) {
  const btn = e.target.closest('.preset-btn');
  if (!btn) return;
  const city = btn.dataset.city;
  const preset = CITY_PRESETS[city];
  if (!preset) return;

  document.querySelectorAll('.preset-btn').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');

  homePriceEl.value = preset.homePrice;
  downPaymentEl.value = preset.downPayment;
  mortgageRateEl.value = preset.mortgageRate;
  monthlyRentEl.value = preset.monthlyRent;
  appreciationEl.value = preset.appreciation;
  rentIncreaseEl.value = preset.rentIncrease;
  propertyTaxEl.value = preset.propertyTax;
  maintenanceEl.value = preset.maintenance;
  investmentReturnEl.value = preset.investmentReturn;

  calculate();
});

// ── Years Slider ──
yearsEl.addEventListener('input', function() {
  yearsValueEl.textContent = yearsEl.value;
});
yearsEl.addEventListener('change', function() {
  calculate();
});

// ── Calculation Engine ──
function calculate() {
  const homePrice = parseFloat(homePriceEl.value) || 0;
  const downPct = parseFloat(downPaymentEl.value) / 100 || 0;
  const mortgageRate = parseFloat(mortgageRateEl.value) / 100 || 0;
  const monthlyRent = parseFloat(monthlyRentEl.value) || 0;
  const appreciation = parseFloat(appreciationEl.value) / 100 || 0;
  const rentIncrease = parseFloat(rentIncreaseEl.value) / 100 || 0;
  const propertyTax = parseFloat(propertyTaxEl.value) / 100 || 0;
  const maintenance = parseFloat(maintenanceEl.value) / 100 || 0;
  const investmentReturn = parseFloat(investmentReturnEl.value) / 100 || 0;
  const totalYears = parseInt(yearsEl.value) || 10;

  const downPaymentAmt = homePrice * downPct;
  const loanAmt = homePrice - downPaymentAmt;

  // Monthly mortgage payment (30-year fixed)
  const monthlyRate = mortgageRate / 12;
  const numPayments = 30 * 12;
  let monthlyMortgage = 0;
  if (monthlyRate > 0) {
    monthlyMortgage = loanAmt * (monthlyRate * Math.pow(1 + monthlyRate, numPayments)) / (Math.pow(1 + monthlyRate, numPayments) - 1);
  } else {
    monthlyMortgage = loanAmt / numPayments;
  }

  // Arrays for chart
  const buyCosts = [];
  const rentCosts = [];
  const yearLabels = [];

  let cumulativeBuyCost = 0;
  let cumulativeRentCost = 0;
  let homeValue = homePrice;

  // Down payment opportunity cost (invested)
  let investedDownPayment = downPaymentAmt;

  // Closing costs (one-time, ~3% of home price)
  const closingCosts = homePrice * 0.03;
  cumulativeBuyCost += closingCosts;

  for (let y = 1; y <= totalYears; y++) {
    // Annual mortgage payments
    const annualMortgage = monthlyMortgage * 12;
    // Property tax (based on current home value)
    const annualTax = homeValue * propertyTax;
    // Maintenance
    const annualMaintenance = homeValue * maintenance;

    // Homeowners insurance (~0.35% of home value)
    const annualInsurance = homeValue * 0.0035;

    // Total annual buy cost
    const annualBuyCost = annualMortgage + annualTax + annualMaintenance + annualInsurance;
    cumulativeBuyCost += annualBuyCost;

    // Opportunity cost: what the down payment would earn if invested
    const investmentGain = investedDownPayment * investmentReturn;
    investedDownPayment += investmentGain;
    cumulativeBuyCost += investmentGain;

    // Rent side: annual rent + what renter's equivalent down payment earns
    const annualRent = monthlyRent * 12;
    cumulativeRentCost += annualRent;

    // Renter also invests the down payment
    const renterInvestmentGain = investedDownPayment > 0 ? downPaymentAmt * Math.pow(1 + investmentReturn, y) - downPaymentAmt * Math.pow(1 + investmentReturn, y - 1) : 0;
    // Simplified: just track investment separately for rent side
    // Actually, for renter: down payment is invested and grows. Rent cost + investment opportunity cost
    // Let's use a cleaner model:
    // BUY: closing + mortgage payments + tax + maintenance + insurance + opportunity cost of down payment
    // RENT: rent payments - investment returns on down payment (renter keeps the money invested)

    // Home appreciation
    homeValue = homePrice * Math.pow(1 + appreciation, y);
    monthlyRent *= (1 + rentIncrease);

    yearLabels.push('Year ' + y);
    // Reset cumulative model: recalculate properly
  }

  // Recalculate with cleaner model
  cumulativeBuyCost = 0;
  cumulativeRentCost = 0;
  homeValue = homePrice;
  investedDownPayment = downPaymentAmt;
  let rentInvested = downPaymentAmt;
  let currentRent = parseFloat(monthlyRentEl.value);

  // Buy side: closing costs upfront
  cumulativeBuyCost += closingCosts;

  // Buy side: opportunity cost of down payment (year 0 investment not available for other uses)
  // We track the foregone investment returns as part of buy cost

  for (let y = 1; y <= totalYears; y++) {
    // Buy side costs
    const annualMortgage = monthlyMortgage * 12;
    const annualTax = homeValue * propertyTax;
    const annualMaintenance = homeValue * maintenance;
    const annualInsurance = homeValue * 0.0035;

    // Opportunity cost: what down payment + closing would have earned if invested
    const oppCost = downPaymentAmt * investmentReturn + closingCosts * investmentReturn;

    cumulativeBuyCost += annualMortgage + annualTax + annualMaintenance + annualInsurance + oppCost;

    // Rent side costs
    const annualRent = currentRent * 12;
    // Renter's down payment earns investment returns (reduces net cost)
    const rentInvestmentEarnings = rentInvested * investmentReturn;
    rentInvested += rentInvestmentEarnings;

    cumulativeRentCost += annualRent - rentInvestmentEarnings;

    // Appreciate home value
    homeValue *= (1 + appreciation);

    // Rent increases
    currentRent *= (1 + rentIncrease);

    buyCosts.push(cumulativeBuyCost);
    rentCosts.push(cumulativeRentCost);
  }

  // Find break-even year
  let breakevenYear = -1;
  for (let i = 0; i < buyCosts.length; i++) {
    if (buyCosts[i] <= rentCosts[i]) {
      breakevenYear = i + 1;
      break;
    }
  }

  const finalBuyCost = cumulativeBuyCost;
  const finalRentCost = cumulativeRentCost;
  const diff = finalBuyCost - finalRentCost;

  // Update UI
  buyCostResult.textContent = '$' + Math.round(finalBuyCost).toLocaleString();
  buyCostResult.className = 'result-value';
  rentCostResult.textContent = '$' + Math.round(finalRentCost).toLocaleString();
  rentCostResult.className = 'result-value';
  diffResult.textContent = '$' + Math.abs(Math.round(diff)).toLocaleString();
  diffResult.className = 'result-value ' + (diff < 0 ? 'positive' : 'negative');
  breakevenResult.textContent = breakevenYear > 0 ? breakevenYear : 'N/A';
  breakevenResult.className = 'result-value';

  // Conclusion
  let conclusionHTML = '';
  if (breakevenYear > 0) {
    const saved = Math.abs(Math.round(Math.abs(diff)));
    if (diff < 0) {
      conclusionHTML = '<div class="conclusion buy"><span class="conclusion-icon">&#127968;</span> Buying saves you <strong>$' + saved.toLocaleString() + '</strong> over ' + totalYears + ' years. Break-even at year ' + breakevenYear + '.</div>';
    } else {
      conclusionHTML = '<div class="conclusion rent"><span class="conclusion-icon">&#128176;</span> Renting saves you <strong>$' + saved.toLocaleString() + '</strong> over ' + totalYears + ' years. Break-even at year ' + breakevenYear + '.</div>';
    }
  } else {
    conclusionHTML = '<div class="conclusion breakeven"><span class="conclusion-icon">&#9203;</span> No break-even within ' + totalYears + ' years. Renting remains cheaper throughout this period.</div>';
  }
  conclusionBox.innerHTML = conclusionHTML;

  // Chart
  renderChart(yearLabels, buyCosts, rentCosts, breakevenYear);

  // Scroll results into view on mobile
  if (window.innerWidth < 1024) {
    $('resultCard').scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
}

// ── Chart Rendering ──
function renderChart(labels, buyData, rentData, breakevenYear) {
  const ctx = $('costChart').getContext('2d');

  if (chartInstance) { chartInstance.destroy(); }

  chartInstance = new Chart(ctx, {
    type: 'line',
    data: {
      labels: labels,
      datasets: [
        {
          label: 'Cost of Buying',
          data: buyData,
          borderColor: '#3b82f6',
          backgroundColor: 'rgba(59,130,246,0.1)',
          borderWidth: 2.5,
          pointRadius: 3,
          pointBackgroundColor: '#3b82f6',
          tension: 0.3,
          fill: true
        },
        {
          label: 'Cost of Renting',
          data: rentData,
          borderColor: '#f59e0b',
          backgroundColor: 'rgba(245,158,11,0.08)',
          borderWidth: 2.5,
          pointRadius: 3,
          pointBackgroundColor: '#f59e0b',
          tension: 0.3,
          fill: true
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      interaction: {
        intersect: false,
        mode: 'index'
      },
      plugins: {
        tooltip: {
          callbacks: {
            label: function(ctx) {
              return ctx.dataset.label + ': $' + Math.round(ctx.parsed.y).toLocaleString();
            }
          }
        },
        legend: {
          position: 'bottom',
          labels: {
            usePointStyle: true,
            padding: 24,
            font: { family: "'Inter', sans-serif", size: 13 }
          }
        },
        annotation: breakevenYear > 0 ? {
          annotations: {
            breakeven: {
              type: 'line',
              xMin: breakevenYear - 1,
              xMax: breakevenYear - 1,
              borderColor: '#10b981',
              borderWidth: 2,
              borderDash: [6, 4],
              label: {
                display: true,
                content: 'Break-Even (Year ' + breakevenYear + ')',
                position: 'start',
                backgroundColor: '#10b981',
                color: '#fff',
                font: { size: 11, weight: 'bold', family: "'Inter', sans-serif" },
                padding: 6
              }
            }
          }
        } : {}
      },
      scales: {
        x: {
          title: { display: true, text: 'Year', font: { family: "'Inter', sans-serif", weight: 600 } },
          ticks: { font: { family: "'Inter', sans-serif" } },
          grid: { display: false }
        },
        y: {
          title: { display: true, text: 'Cumulative Cost (USD)', font: { family: "'Inter', sans-serif", weight: 600 } },
          ticks: {
            font: { family: "'Inter', sans-serif" },
            callback: function(v) { return '$' + (v / 1000).toFixed(0) + 'k'; }
          },
          grid: { color: '#e2e8f0' }
        }
      }
    },
    plugins: breakevenYear > 0 ? [{
      id: 'breakevenAnnotator',
      afterDraw: function(chart) {
        if (breakevenYear <= 0) return;
        const meta0 = chart.getDatasetMeta(0);
        const meta1 = chart.getDatasetMeta(1);
        const pt0 = meta0.data[breakevenYear - 1];
        const pt1 = meta1.data[breakevenYear - 1];
        const ctx = chart.ctx;
        const midY = (pt0.y + pt1.y) / 2;
        ctx.save();
        ctx.fillStyle = '#10b981';
        ctx.beginPath();
        ctx.arc(pt0.x, midY, 7, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillStyle = '#fff';
        ctx.font = 'bold 10px Inter, sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('✓', pt0.x, midY);
        ctx.restore();
      }
    }] : []
  });

  // Set chart height
  $('costChart').style.height = '380px';
}

// ── Event Listeners ──
calculateBtn.addEventListener('click', calculate);

// Calculate on page load
calculate();

// ── Fade-in-up animations ──
const observer = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) e.target.classList.add('visible');
  });
}, { threshold: 0.1 });
document.querySelectorAll('.fade-in-up').forEach(el => observer.observe(el));

})();
</script>

</body>
</html>