<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bitcoin Compound Interest Calculator - Plebtools</title>
    <link rel="icon" type="image/x-icon" href="images/bitcoin retro symbol.jpeg">
    <link rel="stylesheet" href="styles.css?v=4">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <style>
        /* Header styling to match other pages */
        header {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            background: rgba(26, 26, 46, 0.95) !important;
            backdrop-filter: blur(10px) !important;
            z-index: 1000 !important;
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5) !important;
            border-bottom: 1px solid #333 !important;
        }
        
        body.dark-theme header {
            background: rgba(45, 45, 45, 0.95) !important;
        }
        
        body.light-theme header {
            background: rgba(255, 255, 255, 0.95) !important;
            border-bottom: 1px solid #dee2e6 !important;
        }
        
        /* Ensure main content has padding for fixed header */
        main {
            padding-top: 80px !important;
        }
        
        /* Keep logo purple */
        .logo {
            color: #667eea !important;
        }

        /* Ensure nav logo is properly sized - prevent it from being too big */
        .nav-logo {
            width: 50px !important;
            height: 50px !important;
            max-width: 50px !important;
            max-height: 50px !important;
            border-radius: 50% !important;
            object-fit: cover !important;
            display: block !important;
            flex-shrink: 0 !important;
        }

        .logo-container img,
        .logo-container .nav-logo {
            width: 50px !important;
            height: 50px !important;
            max-width: 50px !important;
            max-height: 50px !important;
            min-width: 50px !important;
            min-height: 50px !important;
        }

        .logo-container {
            max-width: fit-content !important;
        }
        
        /* Ensure nav container uses flexbox properly */
        .nav-container {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            max-width: 1200px !important;
            margin: 0 auto !important;
            padding: 0 2rem !important;
        }
        
        .nav-links {
            display: flex !important;
            align-items: center !important;
            gap: 1rem !important;
        }

        /* Modern dropdown styles */
        #toolsDropdown { position: relative; display: inline-block; }
        #toolsBtn { 
            background: none; 
            border: none; 
            color: white; 
            font-weight: 500; 
            font-size: 1rem; 
            cursor: pointer; 
            padding: 0.5rem 1rem; 
            border-radius: 5px; 
            transition: all 0.3s ease; 
            display: flex; 
            align-items: center; 
            gap: 0.5rem; 
        }
        .dark-theme #toolsBtn { color: #e0e0e0 !important; }
        body.light-theme #toolsBtn { color: white !important; }
        
        .account-link {
            color: white !important;
        }
        
        body.light-theme .account-link {
            color: white !important;
        }
        
        .dark-theme .account-link {
            color: white !important;
        }
        #toolsBtn:hover { background: rgba(102, 126, 234, 0.1); color: #667eea; }
        .dropdown-arrow { font-size: 0.8rem; transition: transform 0.3s ease; }
        #toolsContent { position: absolute; top: 100%; right: 0; background: white; min-width: 220px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); border-radius: 12px; z-index: 1001; padding: 0.75rem 0; border: 1px solid rgba(0, 0, 0, 0.08); backdrop-filter: blur(10px); margin-top: 8px; opacity: 0; transform: translateY(-10px); transition: all 0.3s ease; }
        #toolsContent.show { opacity: 1; transform: translateY(0); }
        #toolsContent a { display: block; padding: 0.875rem 1.5rem; color: #333; text-decoration: none; transition: all 0.3s ease; font-weight: 500; border-radius: 0; position: relative; }
        .dark-theme #toolsContent a { color: #e0e0e0 !important; }
        #toolsContent a:hover { background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%); color: #f59e0b; transform: translateX(8px); }
        #toolsContent a:first-child { border-radius: 12px 12px 0 0; }
        #toolsContent a:last-child { border-radius: 0 0 12px 12px; }
        .dark-theme #toolsContent { background: #2d2d2d !important; border-color: #555 !important; }
        .dark-theme #toolsContent a:hover { background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 191, 36, 0.2) 100%) !important; color: #f59e0b !important; }
    </style>
    
    <style>
        body {
            overflow-x: hidden;
            background: white;
        }
        
        body.dark-theme {
            background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%) !important;
        }

        /* Calculator specific styles */
        .calculator-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 2rem;
            background: white;
            min-height: 100vh;
        }
        @media (max-width: 1200px) {
            .calculator-container {
                padding: 1.5rem 1.25rem;
            }
        }
        @media (max-width: 768px) {
            .calculator-container {
                padding: 1.25rem 0.75rem 2rem;
            }
        }

        .calculator-header {
            text-align: center;
            margin-bottom: 3rem;
            padding: 2rem 0;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            color: white;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 1px solid #333;
            position: relative;
        }

        /* Theme Toggle Button */
        .theme-toggle-btn {
            background: rgba(255, 255, 255, 0.2);
            border: 2px solid rgba(255, 255, 255, 0.3);
            color: white;
            font-size: 1.5rem;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 20px;
            right: 20px;
        }

        .theme-toggle-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }

        /* Mobile responsiveness for theme toggle */
        @media (max-width: 768px) {
            .theme-toggle-btn {
                width: 40px;
                height: 40px;
                font-size: 1.2rem;
                top: 10px;
                right: 10px;
            }
        }

        .calculator-title {
            font-size: 3rem;
            font-weight: bold;
            margin-bottom: 1rem;
            background: -webkit-linear-gradient(45deg, #f59e0b, #fbbf24, #fde68a);
            background-clip: text;
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
        }

        .calculator-description {
            font-size: 1.2rem;
            color: #ccc;
            max-width: 800px;
            margin: 0 auto;
        }

        .calculator-interface {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 2rem;
            margin-bottom: 2rem;
        }
        @media (max-width: 1200px) {
            .calculator-interface {
                grid-template-columns: 1fr;
            }
        }

        .controls-panel {
            background: #f8f9fa;
            padding: 2rem;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            height: fit-content;
        }
        @media (max-width: 768px) {
            .controls-panel {
                padding: 1.5rem;
            }
        }

        .control-group {
            margin-bottom: 2rem;
            display: flex;
            flex-direction: column;
            height: 4.5rem;
        }

        .control-label {
            display: flex;
            align-items: center;
            font-weight: bold;
            margin-bottom: 0.5rem;
            color: #333;
            height: 1.5rem;
            line-height: 1.2;
        }

        .control-input {
            width: 100%;
            padding: 0.8rem;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color 0.3s ease;
            height: 2.5rem;
            box-sizing: border-box;
        }

        .control-input:focus {
            outline: none;
            border-color: #f7931a;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            align-items: start;
        }

        .form-actions {
            display: flex;
            gap: 1rem;
            margin-top: 2rem;
        }

        .btn {
            padding: 0.8rem 1.5rem;
            border: none;
            border-radius: 8px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1rem;
        }

        .btn-primary {
            background: linear-gradient(135deg, #f7931a 0%, #ff6b35 100%);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(247, 147, 26, 0.4);
        }

        .btn-success {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
        }

        .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4);
        }

        .btn-danger {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
            color: white;
        }

        .btn-danger:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(220, 53, 69, 0.4);
        }

        .btn-secondary {
            background: #6c757d;
            color: white;
        }

        .btn-secondary:hover {
            background: #5a6268;
        }

        .visualization-panel {
            background: #f8f9fa;
            padding: 2rem;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .chart-container {
            position: relative;
            height: 400px;
            margin-bottom: 2rem;
            width: 100%;
        }
        @media (max-width: 768px) {
            .chart-container {
                height: 320px;
            }
        }
        @media (max-width: 480px) {
            .chart-container {
                height: 280px;
            }
        }

        .chart-container canvas {
            width: 100% !important;
            height: 100% !important;
            max-width: 100%;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }
        @media (max-width: 1024px) {
            .stats-grid {
                grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            }
        }
        @media (max-width: 640px) {
            .stats-grid {
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            }
        }

        .stat-card {
            background: white;
            padding: 1.5rem;
            border-radius: 10px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            text-align: center;
        }

        .stat-value {
            font-size: 2rem;
            font-weight: bold;
            color: #f7931a;
            margin-bottom: 0.5rem;
        }

        .stat-label {
            color: #666;
            font-size: 0.9rem;
        }

        .stat-secondary {
            font-size: 1.1rem;
            font-weight: 600;
            color: #1f2933;
            margin-top: 0.35rem;
        }

        .stat-tertiary {
            font-size: 0.85rem;
            color: #64748b;
            margin-top: 0.25rem;
        }

        .table-subtext {
            display: block;
            font-size: 0.8rem;
            color: #64748b;
            margin-top: 0.25rem;
        }

        .results-table {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            max-height: 400px;
            overflow-y: auto;
            overflow-x: auto;
            width: 100%;
            max-width: 100%;
            -webkit-overflow-scrolling: touch;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
            min-width: 720px;
        }
        @media (max-width: 480px) {
            .table {
                min-width: 600px;
            }
        }

        .table th,
        .table td {
            padding: 0.8rem;
            text-align: left;
            border-bottom: 1px solid #e0e0e0;
            font-size: 0.9rem;
            color: #212529;
        }

        .table th {
            background: #f8f9fa;
            font-weight: bold;
            color: #333;
            position: sticky;
            top: 0;
        }

        .table tr:hover {
            background: #f8f9fa;
        }

        .profit {
            color: #28a745;
            font-weight: bold;
        }

        .loss {
            color: #dc3545;
            font-weight: bold;
        }

        .chart-controls {
            margin-bottom: 1rem;
            text-align: center;
        }
        
        .chart-toggle-btn {
            background: #f7931a;
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: background-color 0.2s;
            margin: 0 0.5rem;
        }
        
        .chart-toggle-btn:hover {
            background: #e8830a;
        }

        .chart-toggle-btn.active {
            background: #e8830a;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        /* Mobile responsiveness */
        @media (max-width: 768px) {
            .calculator-interface {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .calculator-title {
                font-size: 2rem;
            }

            .calculator-description {
                font-size: 1rem;
            }

            .controls-panel,
            .visualization-panel {
                padding: 1rem;
            }

            .form-row {
                grid-template-columns: 1fr;
            }

            .stats-grid {
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            }
        }

        /* Dark theme support */
        body.dark-theme .calculator-container {
            background: transparent !important;
        }

        .dark-theme .calculator-header {
            background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
        }

        /* Force affiliate styling to work */
        .features-section .affiliate-links {
            display: grid !important;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
            gap: 1.5rem !important;
            margin-top: 1rem !important;
        }

        .features-section .affiliate-item {
            background: white !important;
            padding: 1.5rem !important;
            border-radius: 10px !important;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1) !important;
            text-align: center !important;
            transition: transform 0.3s ease !important;
        }

        .features-section .affiliate-item:hover {
            transform: translateY(-3px) !important;
        }

        .features-section .affiliate-item h4 {
            color: #333 !important;
            margin-bottom: 0.5rem !important;
            font-size: 1rem !important;
            font-weight: bold !important;
        }

        .features-section .affiliate-link {
            display: inline-block !important;
            background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important;
            color: white !important;
            padding: 0.5rem 1rem !important;
            border-radius: 5px !important;
            text-decoration: none !important;
            font-weight: 500 !important;
            transition: all 0.3s ease !important;
        }

        .features-section .affiliate-link:hover {
            transform: translateY(-2px) !important;
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4) !important;
        }

        .features-section .discount-code {
            font-size: 0.8rem !important;
            color: #4CAF50 !important;
            margin-top: 0.5rem !important;
            font-weight: 500 !important;
        }

        /* Dark theme for affiliate links */
        body.dark-theme .features-section {
            background: transparent !important;
        }
        
        body.dark-theme .features-section .section-title {
            color: #f59e0b !important;
        }
        
        .features-section .section-title {
            text-align: center !important;
        }
        
        body.dark-theme .features-section p {
            color: #ccc !important;
        }
        
        .dark-theme .features-section .affiliate-item {
            background: #2d2d2d !important;
            box-shadow: 0 3px 10px rgba(0,0,0,0.3) !important;
        }

        .dark-theme .features-section .affiliate-item h4 {
            color: #e0e0e0 !important;
        }

        .dark-theme .features-section .discount-code {
            color: #4CAF50 !important;
        }

        .dark-theme .controls-panel,
        .dark-theme .visualization-panel {
            background: #3d3d3d !important;
        }

        .dark-theme .control-label {
            color: #e0e0e0;
        }

        .dark-theme .control-input {
            background: #4d4d4d;
            border-color: #555;
            color: #e0e0e0;
        }

        .dark-theme .stat-card {
            background: #4d4d4d;
        }

        .dark-theme .stat-label {
            color: #ccc;
        }

        .dark-theme .stat-secondary {
            color: #fbbf24;
        }

        .dark-theme .stat-tertiary {
            color: #cbd5f5;
        }

        .dark-theme .table-subtext {
            color: #cbd5f5;
        }

        .dark-theme .controls-panel h3,
        .dark-theme .visualization-panel h3 {
            color: #e0e0e0 !important;
        }

        .dark-theme .controls-panel h4 {
            color: #e0e0e0 !important;
        }

        .dark-theme .results-table {
            background: #4d4d4d;
        }

        .dark-theme .table th {
            background: #3d3d3d;
            color: #e0e0e0;
        }

        .dark-theme .table td {
            color: #e0e0e0;
        }

        .dark-theme .table tr:hover {
            background: #3d3d3d;
        }

        .dark-theme .open-source-text {
            color: white !important;
        }

        .discount-code {
            font-size: 0.85rem;
            color: #94a3b8;
            margin-top: 0.8rem;
        }

        .support-section {
            padding: 4rem 0;
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(30, 41, 59, 0.98) 100%);
        }

        .support-grid {
            max-width: 720px;
            margin: 0 auto;
        }

        .support-card {
            background: rgba(30, 41, 59, 0.92);
            border: 1px solid rgba(148, 163, 184, 0.25);
            border-radius: 18px;
            padding: 2.25rem;
            text-align: center;
            box-shadow: 0 28px 60px -30px rgba(15, 23, 42, 0.6);
            color: #e2e8f0;
        }

        .support-icon {
            font-size: 2.4rem;
            margin-bottom: 1rem;
        }

        .support-title {
            font-size: 1.6rem;
            color: #f8fafc;
            letter-spacing: 0.05em;
            margin-bottom: 1rem;
        }

        .support-text {
            color: #cbd5f5;
            font-size: 1rem;
            margin: 1rem 0 2rem;
            line-height: 1.6;
        }

        .support-btn {
            display: inline-block;
            padding: 0.75rem 2.4rem;
            border-radius: 999px;
            background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
            color: #fff;
            font-weight: 600;
            text-decoration: none;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            box-shadow: 0 18px 48px -24px rgba(34, 197, 94, 0.65);
        }

        .support-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 28px 60px -30px rgba(34, 197, 94, 0.65);
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <div class="nav-container">
                <div class="logo-container">
                    <a href="home" style="display: flex; align-items: center; gap: 1rem; text-decoration: none; color: inherit;">
                        <img src="images/plub tools image.jpeg" alt="Plebtools" class="nav-logo">
                        <h1 class="logo">Plebtools</h1>
                    </a>
                </div>
                <div class="nav-links">
                    <div class="dropdown" id="toolsDropdown">
                        <button class="dropdown-btn" id="toolsBtn">Tools <span class="dropdown-arrow">▼</span></button>
                        <div class="dropdown-content" id="toolsContent" style="display: none;">
                            <a href="home">🏠 Home</a>
                            <a href="treasury">📊 Treasury</a>
                            <a href="btc-buy-tracker">💼 Portfolio</a>
                            <a href="coveredcall-tracker">📈 Covered Calls</a>
                            <a href="btc-loan-ltv">🔒 BTC Loans</a>
                            <a href="financial-planner">📋 Financial Planner</a>
                            <a href="bitcoin-security">🛡️ Bitcoin Security</a>
                            <a href="interest-arbitrage-calculator">💹 Yield Arbitrage</a>
                            <a href="step-by-step-to-self-custody">🔑 Self Custody Guide</a>
                            <a href="invoice-builder">🧾 Invoice Builder</a>
                            <a href="pleb-release">📰 Pleb Release</a>
                        </div>
                    </div>
                    <a href="account" class="account-link">👤 Account</a>
                </div>
            </div>
        </nav>
    </header>

    <main>
        <div class="calculator-container">
            <div class="calculator-header">
                <h1 class="calculator-title">Bitcoin Compound Interest Calculator</h1>
                <p class="calculator-description">
                    Calculate your Bitcoin wealth over time with compound interest, house appreciation, 
                    and various loan scenarios. See how your Bitcoin stack grows against traditional assets.
                </p>
                <button id="themeToggle" class="theme-toggle-btn">🌙</button>
            </div>

            <div class="calculator-interface">
                <div class="controls-panel">
                    <h3 style="margin-bottom: 2rem; color: #333;">Calculator Settings</h3>
                    
                    <form id="calculatorForm">
                        <!-- Bitcoin Settings -->
                        <h4 style="margin-bottom: 1rem; color: #333; border-bottom: 2px solid #f7931a; padding-bottom: 0.5rem;">Bitcoin Settings</h4>
                        <div class="form-row">
                            <div class="control-group">
                                <label class="control-label" for="initialInvestment">Initial BTC Investment ($)</label>
                                <input type="number" id="initialInvestment" class="control-input" placeholder="24000" value="24000" step="100" title="Starting amount you invest in Bitcoin">
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="monthlyContribution">Monthly BTC Contribution ($)</label>
                                <input type="number" id="monthlyContribution" class="control-input" placeholder="2000" value="2000" step="100" title="Amount you invest in Bitcoin each month">
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="control-group">
                                <label class="control-label" for="bitcoinPrice">Current Bitcoin Price ($)</label>
                                <input type="number" id="bitcoinPrice" class="control-input" placeholder="114268.74" value="114268.74" step="0.01" title="Current Bitcoin price to start calculations">
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="bitcoinGrowthRate">Bitcoin Annual Growth Rate (%)</label>
                                <input type="number" id="bitcoinGrowthRate" class="control-input" placeholder="25" value="25" step="0.1" title="Expected annual Bitcoin price increase">
                            </div>
                        </div>

                        <!-- Fiat Settings -->
                        <h4 style="margin-bottom: 1rem; color: #333; border-bottom: 2px solid #ef4444; padding-bottom: 0.5rem; margin-top: 2rem;">Fiat Settings</h4>
                        <div class="form-row">
                            <div class="control-group">
                                <label class="control-label" for="fiatDebasementRate">Fiat Debasement Rate (%)</label>
                                <input type="number" id="fiatDebasementRate" class="control-input" placeholder="7" value="7" step="0.1" min="-50" max="99" title="Estimated annual loss of purchasing power for your local currency">
                            </div>
                        </div>

                        <!-- House Settings -->
                        <h4 style="margin-bottom: 1rem; color: #333; border-bottom: 2px solid #28a745; padding-bottom: 0.5rem; margin-top: 2rem;">House Settings</h4>
                        <div class="form-row">
                            <div class="control-group">
                                <label class="control-label" for="housePrice">House Price ($)</label>
                                <input type="number" id="housePrice" class="control-input" placeholder="450000" value="450000" step="1000" title="Current value of your house for comparison">
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="houseAppreciation">House Appreciation Rate (%)</label>
                                <input type="number" id="houseAppreciation" class="control-input" placeholder="5" value="5" step="0.1" title="Expected annual house value increase">
                            </div>
                        </div>

                        <!-- Stock Settings -->
                        <h4 style="margin-bottom: 1rem; color: #333; border-bottom: 2px solid #007bff; padding-bottom: 0.5rem; margin-top: 2rem;">Stock Settings</h4>
                        <div class="form-row">
                            <div class="control-group">
                                <label class="control-label" for="initialStockInvestment">Initial Stock Investment ($)</label>
                                <input type="number" id="initialStockInvestment" class="control-input" placeholder="10000" value="10000" step="100" title="Starting amount you invest in stocks">
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="monthlyStockContribution">Monthly Stock Contribution ($)</label>
                                <input type="number" id="monthlyStockContribution" class="control-input" placeholder="1000" value="1000" step="100" title="Amount you invest in stocks each month">
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="control-group">
                                <label class="control-label" for="currentStockPortfolio">Current Stock Portfolio ($)</label>
                                <input type="number" id="currentStockPortfolio" class="control-input" placeholder="0" value="0" step="100" title="Current value of your existing stock portfolio (leave at 0 if starting fresh)">
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="stockGrowthRate">Stock Annual Growth Rate (%)</label>
                                <input type="number" id="stockGrowthRate" class="control-input" placeholder="10" value="10" step="0.1" title="Expected annual stock portfolio growth">
                            </div>
                        </div>

                        <!-- Calculation Settings -->
                        <h4 style="margin-bottom: 1rem; color: #333; border-bottom: 2px solid #6c757d; padding-bottom: 0.5rem; margin-top: 2rem;">Calculation Settings</h4>
                        <div class="form-row">
                            <div class="control-group">
                                <label class="control-label" for="years">Years to Calculate</label>
                                <input type="number" id="years" class="control-input" placeholder="15" value="15" step="1" min="1" max="50" title="Number of years to project into the future">
                            </div>
                        </div>

                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">Calculate</button>
                            <button type="button" class="btn btn-secondary" onclick="resetForm()">Reset</button>
                            <button type="button" class="btn btn-danger" onclick="clearAll()">Clear All</button>
                        </div>
                    </form>

                    <div style="margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #e0e0e0;">
                        <h4 style="margin-bottom: 1rem; color: #333;">Export Data</h4>
                        <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
                            <button class="btn btn-success" onclick="exportData()">Export CSV</button>
                            <button class="btn btn-success" onclick="exportChart()">Export Chart</button>
                        </div>
                    </div>
                </div>

                <div class="visualization-panel">
                    <h3 style="margin-bottom: 2rem; color: #333;">Results Overview</h3>
                    
                    <div class="stats-grid">
                        <div class="stat-card" title="Total Bitcoin accumulated through DCA over the projection period">
                            <div class="stat-value" id="totalBitcoin">0.00</div>
                            <div class="stat-label">Total Bitcoin</div>
                            <div class="stat-secondary" id="totalBitcoinValueNominal">$0.00</div>
                            <div class="stat-tertiary" id="totalBitcoinValueReal">Real (today's $): $0.00</div>
                        </div>
                        <div class="stat-card" title="Current value of your stock portfolio including growth and contributions">
                            <div class="stat-value" id="totalStockValueNominal">$0.00</div>
                            <div class="stat-label">Stock Portfolio</div>
                            <div class="stat-tertiary" id="totalStockValueReal">Real (today's $): $0.00</div>
                        </div>
                        <div class="stat-card" title="Combined value of Bitcoin, stocks, and fiat holdings">
                            <div class="stat-value" id="totalValue">$0.00</div>
                            <div class="stat-label">Total Portfolio Value</div>
                        </div>
                        <div class="stat-card" title="Projected house value based on appreciation rate">
                            <div class="stat-value" id="houseValue">$0.00</div>
                            <div class="stat-label">House Value</div>
                        </div>
                        <div class="stat-card" title="Bitcoin portfolio value as percentage of house value">
                            <div class="stat-value" id="stackToHouse">0.00%</div>
                            <div class="stat-label">BTC/House Ratio</div>
                        </div>
                        <div class="stat-card" title="Stock portfolio value as percentage of house value">
                            <div class="stat-value" id="stockToHouse">0.00%</div>
                            <div class="stat-label">Stock/House Ratio</div>
                        </div>
                        <div class="stat-card" title="How much purchasing power remains assuming your fiat debasement rate">
                            <div class="stat-value" id="fiatPurchasingPower">100.00%</div>
                            <div class="stat-label">Fiat Purchasing Power</div>
                            <div class="stat-tertiary" id="fiatPurchasingPowerLoss">Loss since start: 0.00%</div>
                        </div>
                    </div>

                    <div class="chart-controls">
                        <button id="valueChartBtn" class="chart-toggle-btn active" onclick="showChart('value')" title="Bitcoin vs Stock vs House Value Comparison">Value Chart</button>
                        <button id="ratioChartBtn" class="chart-toggle-btn" onclick="showChart('ratio')" title="Investment vs House Value Ratios">Ratio Chart</button>
                    </div>
                    
                    <div class="chart-container">
                        <canvas id="resultsChart"></canvas>
                    </div>

                    <h4 style="margin-bottom: 0.5rem; color: #333;">Fiat Debasement Impact</h4>
                    <p style="margin-bottom: 1.5rem; color: #4b5563; font-size: 0.9rem;">
                        Track how Bitcoin price growth and fiat purchasing power diverge when your measuring stick shrinks.
                    </p>
                    <div class="chart-container" style="height: 320px;">
                        <canvas id="fiatDebasementChart"></canvas>
                    </div>

                    <h4 style="margin-bottom: 1rem; color: #333;">Yearly Projections</h4>
                    <div class="results-table">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Year</th>
                                    <th>BTC Price (Nominal)</th>
                                    <th>BTC Balance</th>
                                    <th>Stock Value (Nominal)</th>
                                    <th>Fiat PP Index</th>
                                    <th>House Value</th>
                                    <th>BTC/House</th>
                                    <th>Stock/House</th>
                                    <th>Portfolio Value (Nominal)</th>
                                </tr>
                            </thead>
                            <tbody id="resultsTableBody">
                                <tr>
                                    <td colspan="9" style="text-align: center; color: #666; padding: 2rem;">
                                        Enter your parameters and click Calculate to see projections
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Affiliate Links Section -->
    <section class="features-section">
        <div class="container">
            <h2 class="section-title">Want to buy and secure your Bitcoin?</h2>
            <div style="text-align: center;">
                <p style="font-size: 0.9rem; color: #666; margin-bottom: 1.5rem;">These are affiliate/discount links</p>
                <div class="affiliate-links">
                        <div class="affiliate-item">
                            <h4>Where to buy</h4>
                            <a href="https://bitcoinwell.com/referral/bitcoinnotcrypto" target="_blank" class="affiliate-link">Bitcoin Well</a>
                        </div>
                        <div class="affiliate-item">
                            <h4>Where to store</h4>
                            <a href="https://store.blockstream.com/?code=DTzyNKA5Q8Sz" target="_blank" class="affiliate-link">Blockstream Jade</a>
                        </div>
                        <div class="affiliate-item">
                            <h4>How to protect</h4>
                            <a href="https://www.stampseed.com/" target="_blank" class="affiliate-link">Stamp Seed</a>
                            <p class="discount-code">USE CODE: BTCNOTCRYPTO15 for 15% off</p>
                        </div>
                        <div class="affiliate-item">
                            <h4>How to validate</h4>
                            <a href="https://store.start9.com/" target="_blank" class="affiliate-link">Start9</a>
                            <p class="discount-code">CODE: BNC5 for 5% off</p>
                        </div>
                        <div class="affiliate-item">
                            <h4>1:1 Coaching</h4>
                            <a href="https://pathtobitcoin.xyz" target="_blank" class="affiliate-link">Bitcoin 1:1</a>
                        </div>
                        <div class="affiliate-item">
                            <h4>Where to learn</h4>
                            <a href="https://www.youtube.com/@bitcoinnotcrypto" target="_blank" class="affiliate-link">YouTube</a>
                        </div>
                </div>
            </div>
        </div>
    </section>

    <section class="support-section">
        <div class="container support-grid">
            <div class="support-card">
                <div class="support-icon">⚡</div>
                <h2 class="support-title">Support Plebtools</h2>
                <p class="support-text">
                    Enjoying these tools? You can help keep them free and open source by donating sats.
                    Every contribution fuels more Bitcoin-first development.
                </p>
                <a href="https://coinos.io/plebtools" target="_blank" class="support-btn">Donate ⚡</a>
            </div>
        </div>
    </section>

    <!-- Open Source Section -->
    <section class="features-section">
        <div class="container">
            <h2 class="section-title">Open Source</h2>
            <div style="text-align: center;">
                <p class="open-source-text" style="margin-bottom: 1rem; color: white;">This Bitcoin compound interest calculator is free and open source and can be replicated for anyone to track their own Bitcoin growth.</p>
                <a href="https://github.com/ForrestHODL/Plebtools" target="_blank" style="background: #28a745; color: white; padding: 12px 24px; border-radius: 25px; text-decoration: none; display: inline-block; font-weight: bold; transition: all 0.3s ease;">View on GitHub</a>
            </div>
        </div>
    </section>

    <footer>
        <div class="container" style="text-align: center;">
            <p style="color: white !important;">&copy; 2024 Plebtools. Open source Bitcoin tracking tools.</p>
            <p style="margin-top: 1rem; font-size: 0.9rem; color: white !important;">
                <strong>Contributors:</strong> Forrest HODL, Josh Greiff, and Rajat Soni
            </p>
        </div>
    </footer>

    <script>
        // Global variables
        let calculationResults = [];
        let currentChart = null;
        let currentChartType = 'value';
        let fiatImpactChart = null;
        const CALCULATOR_STORAGE_KEY = 'plebtools-compound-settings';
        const CALCULATOR_INPUT_IDS = [
            'initialInvestment',
            'monthlyContribution',
            'bitcoinPrice',
            'bitcoinGrowthRate',
            'fiatDebasementRate',
            'housePrice',
            'houseAppreciation',
            'initialStockInvestment',
            'monthlyStockContribution',
            'currentStockPortfolio',
            'stockGrowthRate',
            'years'
        ];

        function loadSavedSettings() {
            try {
                const rawSettings = localStorage.getItem(CALCULATOR_STORAGE_KEY);
                if (!rawSettings) return;

                const parsedSettings = JSON.parse(rawSettings);
                CALCULATOR_INPUT_IDS.forEach(id => {
                    if (Object.prototype.hasOwnProperty.call(parsedSettings, id)) {
                        const field = document.getElementById(id);
                        if (field) {
                            field.value = parsedSettings[id];
                        }
                    }
                });
            } catch (error) {
                console.warn('Unable to load saved calculator settings from localStorage.', error);
            }
        }

        function saveCurrentSettings() {
            try {
                const payload = {};
                CALCULATOR_INPUT_IDS.forEach(id => {
                    const field = document.getElementById(id);
                    if (field) {
                        payload[id] = field.value;
                    }
                });
                localStorage.setItem(CALCULATOR_STORAGE_KEY, JSON.stringify(payload));
            } catch (error) {
                console.warn('Unable to save calculator settings to localStorage.', error);
            }
        }

        function clearSavedSettings() {
            try {
                localStorage.removeItem(CALCULATOR_STORAGE_KEY);
            } catch (error) {
                console.warn('Unable to clear calculator settings from localStorage.', error);
            }
        }

        // Initialize the page
        document.addEventListener('DOMContentLoaded', function() {
            // Set up form submission
            document.getElementById('calculatorForm').addEventListener('submit', function(e) {
                e.preventDefault();
                calculateResults();
            });

            loadSavedSettings();
            // Load default calculation
            calculateResults();
            updateChartButtons();
        });


        // Calculate compound interest results
        function calculateResults() {
            const initialInvestment = parseFloat(document.getElementById('initialInvestment').value) || 0;
            const monthlyContribution = parseFloat(document.getElementById('monthlyContribution').value) || 0;
            const initialStockInvestment = parseFloat(document.getElementById('initialStockInvestment').value) || 0;
            const monthlyStockContribution = parseFloat(document.getElementById('monthlyStockContribution').value) || 0;
            const bitcoinPrice = parseFloat(document.getElementById('bitcoinPrice').value) || 114268.74;
            const bitcoinGrowthRate = parseFloat(document.getElementById('bitcoinGrowthRate').value) || 25;
            const fiatDebasementRate = parseFloat(document.getElementById('fiatDebasementRate').value) || 0;
            const currentStockPortfolio = parseFloat(document.getElementById('currentStockPortfolio').value) || 0;
            const stockGrowthRate = parseFloat(document.getElementById('stockGrowthRate').value) || 10;
            const housePrice = parseFloat(document.getElementById('housePrice').value) || 0;
            const houseAppreciation = parseFloat(document.getElementById('houseAppreciation').value) || 0;
            const years = parseInt(document.getElementById('years').value) || 15;

            // Validate inputs
            if (bitcoinPrice <= 0) {
                alert('Bitcoin price must be greater than 0');
                return;
            }
            if (fiatDebasementRate >= 100) {
                alert('Fiat debasement rate must be less than 100%');
                return;
            }

            saveCurrentSettings();

            // Initialize variables
            // Convert initial investment to Bitcoin at starting price
            let bitcoinBalance = bitcoinPrice > 0 ? (initialInvestment / bitcoinPrice) : 0;
            let fiatBalance = 0;
            let stockBalance = currentStockPortfolio + initialStockInvestment;
            let currentHousePrice = housePrice;
            let totalBitcoinAdded = bitcoinBalance;
            let totalStockAdded = 0;

            calculationResults = [];

            // Calculate for each year
            for (let year = 0; year <= years; year++) {
                const currentYear = 2025 + year;
                const bitcoinPriceReal = bitcoinPrice * Math.pow(1 + bitcoinGrowthRate / 100, year);
                const fiatValueFactor = Math.pow(1 - fiatDebasementRate / 100, year);
                const priceAdjustment = fiatValueFactor !== 0 ? (1 / fiatValueFactor) : Number.POSITIVE_INFINITY;
                const bitcoinPriceNominal = bitcoinPriceReal * priceAdjustment;
                
                // Calculate monthly contributions for this year
                let yearlyBitcoinAdded = 0;
                let yearlyStockAdded = 0;
                for (let month = 0; month < 12; month++) {
                    // Calculate how much Bitcoin to buy with monthly contribution
                    // Monthly contribution is used to buy Bitcoin, not added to fiat
                    // Handle zero monthly contribution safely
                    if (monthlyContribution > 0 && bitcoinPriceNominal > 0 && isFinite(bitcoinPriceNominal)) {
                        const bitcoinToAdd = monthlyContribution / bitcoinPriceNominal;
                        bitcoinBalance += bitcoinToAdd;
                        yearlyBitcoinAdded += bitcoinToAdd;
                        totalBitcoinAdded += bitcoinToAdd;
                    }
                    
                    // Add monthly stock contribution
                    stockBalance += monthlyStockContribution;
                    yearlyStockAdded += monthlyStockContribution;
                    totalStockAdded += monthlyStockContribution;
                }
                
                // Apply annual compound growth to all assets at end of year
                // Don't apply growth in year 0 (starting year)
                if (year > 0) {
                    stockBalance *= (1 + stockGrowthRate / 100);
                    currentHousePrice *= (1 + houseAppreciation / 100);
                }
                
                const stockValueReal = isFinite(stockBalance) ? stockBalance : 0;
                const stockValueNominal = isFinite(priceAdjustment) ? stockValueReal * priceAdjustment : stockValueReal;
                const stockPriceReal = Math.pow(1 + stockGrowthRate / 100, year);
                const stockPriceNominal = stockPriceReal * priceAdjustment;
                const stockPriceIndexReal = isFinite(stockPriceReal) ? stockPriceReal * 100 : 0;
                const stockPriceIndexNominal = isFinite(stockPriceNominal) ? stockPriceNominal * 100 : 0;

                // Calculate values - ensure all are valid numbers
                const fiatValue = fiatBalance || 0;
                const bitcoinValueNominal = (bitcoinBalance || 0) * (isFinite(bitcoinPriceNominal) ? bitcoinPriceNominal : 0);
                const bitcoinValueReal = (bitcoinBalance || 0) * (isFinite(bitcoinPriceReal) ? bitcoinPriceReal : 0);
                const totalPortfolioValue = fiatValue + bitcoinValueNominal + (isFinite(stockValueNominal) ? stockValueNominal : 0);
                const stackToHouseRatio = currentHousePrice > 0 ? ((bitcoinValueNominal / currentHousePrice) * 100) : 0;
                const stockToHouseRatio = currentHousePrice > 0 ? ((stockValueNominal / currentHousePrice) * 100) : 0;
                const fiatPurchasingPowerIndex = isFinite(fiatValueFactor) ? fiatValueFactor * 100 : 0;
                const bitcoinPriceIndexNominal = (bitcoinPrice > 0 && isFinite(bitcoinPriceNominal)) ? (bitcoinPriceNominal / bitcoinPrice) * 100 : 0;
                const bitcoinPriceIndexReal = (bitcoinPrice > 0 && isFinite(bitcoinPriceReal)) ? (bitcoinPriceReal / bitcoinPrice) * 100 : 0;
                // Ensure all values are valid numbers (not NaN or Infinity)
                calculationResults.push({
                    year: currentYear,
                    bitcoinPrice: isFinite(bitcoinPriceNominal) ? bitcoinPriceNominal : 0,
                    bitcoinPriceReal: isFinite(bitcoinPriceReal) ? bitcoinPriceReal : 0,
                    bitcoinBalance: isFinite(bitcoinBalance) ? bitcoinBalance : 0,
                    fiatBalance: isFinite(fiatValue) ? fiatValue : 0,
                    stockBalance: isFinite(stockBalance) ? stockBalance : 0,
                    houseValue: isFinite(currentHousePrice) ? currentHousePrice : 0,
                    stackToHouseRatio: isFinite(stackToHouseRatio) ? stackToHouseRatio : 0,
                    stockToHouseRatio: isFinite(stockToHouseRatio) ? stockToHouseRatio : 0,
                    portfolioValue: isFinite(totalPortfolioValue) ? totalPortfolioValue : 0,
                    bitcoinValueNominal: isFinite(bitcoinValueNominal) ? bitcoinValueNominal : 0,
                    bitcoinValueReal: isFinite(bitcoinValueReal) ? bitcoinValueReal : 0,
                    stockValueNominal: isFinite(stockValueNominal) ? stockValueNominal : 0,
                    stockValueReal: isFinite(stockValueReal) ? stockValueReal : 0,
                    fiatPurchasingPowerIndex: isFinite(fiatPurchasingPowerIndex) ? fiatPurchasingPowerIndex : 0,
                    bitcoinPriceIndexNominal: isFinite(bitcoinPriceIndexNominal) ? bitcoinPriceIndexNominal : 0,
                    bitcoinPriceIndexReal: isFinite(bitcoinPriceIndexReal) ? bitcoinPriceIndexReal : 0,
                    stockPriceIndexNominal: isFinite(stockPriceIndexNominal) ? stockPriceIndexNominal : 0,
                    stockPriceIndexReal: isFinite(stockPriceIndexReal) ? stockPriceIndexReal : 0,
                    bitcoinAdded: isFinite(yearlyBitcoinAdded) ? yearlyBitcoinAdded : 0,
                    stockAdded: isFinite(yearlyStockAdded) ? yearlyStockAdded : 0
                });
            }

            // Update display
            updateStats();
            updateChartButtons();
            updateChart();
            updateFiatImpactChart();
            updateTable();
        }

        // Update statistics display
        function updateStats() {
            if (calculationResults.length === 0) {
                document.getElementById('totalBitcoin').textContent = '0.00000000';
                document.getElementById('totalBitcoinValueNominal').textContent = '$0.00';
                document.getElementById('totalBitcoinValueReal').textContent = "Real (today's $): $0.00";
                document.getElementById('totalStockValueNominal').textContent = '$0.00';
                document.getElementById('totalStockValueReal').textContent = "Real (today's $): $0.00";
                document.getElementById('totalValue').textContent = '$0.00';
                document.getElementById('houseValue').textContent = '$0.00';
                document.getElementById('stackToHouse').textContent = '0.00%';
                document.getElementById('stockToHouse').textContent = '0.00%';
                document.getElementById('fiatPurchasingPower').textContent = '100.00%';
                document.getElementById('fiatPurchasingPowerLoss').textContent = 'Loss since start: 0.00%';
                return;
            }

            const lastResult = calculationResults[calculationResults.length - 1];
            const bitcoinValueNominal = lastResult.bitcoinValueNominal || 0;
            const bitcoinValueReal = lastResult.bitcoinValueReal || 0;
            const fiatPower = lastResult.fiatPurchasingPowerIndex || 0;
            const fiatChange = fiatPower - 100;
            
            document.getElementById('totalBitcoin').textContent = lastResult.bitcoinBalance.toFixed(8);
            document.getElementById('totalBitcoinValueNominal').textContent = `$${bitcoinValueNominal.toLocaleString(undefined, {maximumFractionDigits: 0})}`;
            document.getElementById('totalBitcoinValueReal').textContent = `Real (today's $): $${bitcoinValueReal.toLocaleString(undefined, {maximumFractionDigits: 0})}`;
            document.getElementById('totalStockValueNominal').textContent = `$${(lastResult.stockValueNominal || 0).toLocaleString(undefined, {maximumFractionDigits: 0})}`;
            document.getElementById('totalStockValueReal').textContent = `Real (today's $): $${(lastResult.stockValueReal || 0).toLocaleString(undefined, {maximumFractionDigits: 0})}`;
            document.getElementById('totalValue').textContent = `$${lastResult.portfolioValue.toLocaleString(undefined, {maximumFractionDigits: 0})}`;
            document.getElementById('houseValue').textContent = `$${lastResult.houseValue.toLocaleString(undefined, {maximumFractionDigits: 0})}`;
            document.getElementById('stackToHouse').textContent = `${lastResult.stackToHouseRatio.toFixed(2)}%`;
            document.getElementById('stockToHouse').textContent = `${lastResult.stockToHouseRatio.toFixed(2)}%`;
            document.getElementById('fiatPurchasingPower').textContent = `${fiatPower.toFixed(2)}%`;
            document.getElementById('fiatPurchasingPowerLoss').textContent = fiatChange >= 0
                ? `Gain since start: ${fiatChange.toFixed(2)}%`
                : `Loss since start: ${Math.abs(fiatChange).toFixed(2)}%`;
        }

        // Update chart
        function updateChart() {
            if (calculationResults.length === 0) {
                if (currentChart) {
                    currentChart.destroy();
                    currentChart = null;
                }
                return;
            }

            const ctx = document.getElementById('resultsChart').getContext('2d');
            
            if (currentChart) {
                currentChart.destroy();
            }

            const labels = calculationResults.map(r => r.year.toString());
            let datasets = [];

            if (currentChartType === 'value') {
                datasets = [
                    {
                        label: 'Bitcoin Value (Nominal $)',
                        data: calculationResults.map(r => isFinite(r.bitcoinValueNominal) ? r.bitcoinValueNominal : 0),
                        borderColor: '#f7931a',
                        backgroundColor: 'rgba(247, 147, 26, 0.1)',
                        borderWidth: 3,
                        fill: true,
                        tension: 0.4
                    },
                    {
                        label: "Bitcoin Value (Real $)",
                        data: calculationResults.map(r => isFinite(r.bitcoinValueReal) ? r.bitcoinValueReal : 0),
                        borderColor: '#fb923c',
                        backgroundColor: 'rgba(251, 146, 60, 0.05)',
                        borderWidth: 2,
                        borderDash: [6, 6],
                        fill: true,
                        tension: 0.4
                    },
                    {
                        label: 'Stock Portfolio ($)',
                        data: calculationResults.map(r => isFinite(r.stockValueNominal) ? r.stockValueNominal : 0),
                        borderColor: '#007bff',
                        backgroundColor: 'rgba(0, 123, 255, 0.1)',
                        borderWidth: 3,
                        fill: true,
                        tension: 0.4
                    },
                    {
                        label: "Stock Portfolio (Real $)",
                        data: calculationResults.map(r => isFinite(r.stockValueReal) ? r.stockValueReal : 0),
                        borderColor: '#60a5fa',
                        backgroundColor: 'rgba(96, 165, 250, 0.05)',
                        borderWidth: 2,
                        borderDash: [4, 6],
                        fill: true,
                        tension: 0.4
                    }
                ];
                
                // Only add house value if house price is greater than 0
                const housePriceInput = parseFloat(document.getElementById('housePrice').value) || 0;
                if (housePriceInput > 0) {
                    datasets.push({
                        label: 'House Value ($)',
                        data: calculationResults.map(r => isFinite(r.houseValue) ? r.houseValue : 0),
                        borderColor: '#28a745',
                        backgroundColor: 'rgba(40, 167, 69, 0.1)',
                        borderWidth: 3,
                        fill: true,
                        tension: 0.4
                    });
                }
            } else if (currentChartType === 'ratio') {
                datasets = [];
                
                // Only add ratio charts if house price is greater than 0
                const housePriceInput = parseFloat(document.getElementById('housePrice').value) || 0;
                if (housePriceInput > 0) {
                    datasets.push(
                        {
                            label: 'BTC/House Ratio (%)',
                            data: calculationResults.map(r => isFinite(r.stackToHouseRatio) ? r.stackToHouseRatio : 0),
                            borderColor: '#f7931a',
                            backgroundColor: 'rgba(247, 147, 26, 0.1)',
                            borderWidth: 3,
                            fill: true,
                            tension: 0.4
                        },
                        {
                            label: 'Stock/House Ratio (%)',
                            data: calculationResults.map(r => isFinite(r.stockToHouseRatio) ? r.stockToHouseRatio : 0),
                            borderColor: '#007bff',
                            backgroundColor: 'rgba(0, 123, 255, 0.1)',
                            borderWidth: 3,
                            fill: true,
                            tension: 0.4
                        }
                    );
                }
            }

            // Don't create chart if no datasets (e.g., ratio chart with no house)
            if (datasets.length === 0) {
                return;
            }

            currentChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: datasets
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        title: {
                            display: true,
                            text: getChartTitle()
                        },
                        legend: {
                            position: 'top'
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: function(value) {
                                    if (!isFinite(value)) return '0';
                                    if (currentChartType === 'price' || currentChartType === 'value') {
                                        return '$' + value.toLocaleString();
                                    } else {
                                        return value.toFixed(1) + '%';
                                    }
                                }
                            }
                        }
                    }
                }
            });
        }

        function updateFiatImpactChart() {
            const chartCanvas = document.getElementById('fiatDebasementChart');
            if (!chartCanvas) return;

            if (calculationResults.length === 0) {
                if (fiatImpactChart) {
                    fiatImpactChart.destroy();
                    fiatImpactChart = null;
                }
                return;
            }

            const ctx = chartCanvas.getContext('2d');

            if (fiatImpactChart) {
                fiatImpactChart.destroy();
            }

            const labels = calculationResults.map(r => r.year.toString());
            const fiatIndex = calculationResults.map(r => isFinite(r.fiatPurchasingPowerIndex) ? r.fiatPurchasingPowerIndex : 0);
            const bitcoinNominalIndex = calculationResults.map(r => isFinite(r.bitcoinPriceIndexNominal) ? r.bitcoinPriceIndexNominal : 0);
            const bitcoinRealIndex = calculationResults.map(r => isFinite(r.bitcoinPriceIndexReal) ? r.bitcoinPriceIndexReal : 0);
            const stockNominalIndex = calculationResults.map(r => isFinite(r.stockPriceIndexNominal) ? r.stockPriceIndexNominal : 0);
            const stockRealIndex = calculationResults.map(r => isFinite(r.stockPriceIndexReal) ? r.stockPriceIndexReal : 0);

            fiatImpactChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: 'Fiat Purchasing Power Index',
                            data: fiatIndex,
                            borderColor: '#ef4444',
                            backgroundColor: 'rgba(239, 68, 68, 0.1)',
                            borderWidth: 3,
                            fill: true,
                            tension: 0.4
                        },
                        {
                            label: 'Bitcoin Price Index (Nominal)',
                            data: bitcoinNominalIndex,
                            borderColor: '#0ea5e9',
                            backgroundColor: 'rgba(14, 165, 233, 0.08)',
                            borderWidth: 2,
                            fill: false,
                            tension: 0.4
                        },
                        {
                            label: "Bitcoin Price Index (Real)",
                            data: bitcoinRealIndex,
                            borderColor: '#22c55e',
                            backgroundColor: 'rgba(34, 197, 94, 0.06)',
                            borderWidth: 2,
                            borderDash: [6, 6],
                            fill: false,
                            tension: 0.4
                        },
                        {
                            label: 'Stock Price Index (Nominal)',
                            data: stockNominalIndex,
                            borderColor: '#3b82f6',
                            backgroundColor: 'rgba(59, 130, 246, 0.08)',
                            borderWidth: 2,
                            fill: false,
                            tension: 0.4
                        },
                        {
                            label: 'Stock Price Index (Real)',
                            data: stockRealIndex,
                            borderColor: '#1d4ed8',
                            backgroundColor: 'rgba(29, 78, 216, 0.06)',
                            borderWidth: 2,
                            borderDash: [6, 6],
                            fill: false,
                            tension: 0.4
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        title: {
                            display: true,
                            text: 'Indexed Comparison (Start = 100)'
                        },
                        legend: {
                            position: 'top'
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: 'Index Value'
                            }
                        }
                    }
                }
            });
        }

        // Get chart title based on current type
        function getChartTitle() {
            switch(currentChartType) {
                case 'value': return 'Portfolio Value Comparison (BTC vs Stocks vs House)';
                case 'ratio': return 'Investment vs House Value Ratios';
                default: return 'Bitcoin & Stock Compound Interest Analysis';
            }
        }

        // Show specific chart type
        function showChart(type) {
            // Check if house price is 0 and user is trying to view ratio chart
            const housePriceInput = parseFloat(document.getElementById('housePrice').value) || 0;
            if (type === 'ratio' && housePriceInput <= 0) {
                alert('Please enter a house price to view ratio charts');
                return;
            }
            
            // Update button states
            document.querySelectorAll('.chart-toggle-btn').forEach(btn => btn.classList.remove('active'));
            document.getElementById(type + 'ChartBtn').classList.add('active');
            
            currentChartType = type;
            updateChart();
        }
        
        // Update chart button states based on house price
        function updateChartButtons() {
            const housePriceInput = parseFloat(document.getElementById('housePrice').value) || 0;
            const ratioBtn = document.getElementById('ratioChartBtn');
            
            if (housePriceInput <= 0) {
                ratioBtn.disabled = true;
                ratioBtn.style.opacity = '0.5';
                ratioBtn.style.cursor = 'not-allowed';
                // If ratio chart is active but house price is 0, switch to value chart
                if (currentChartType === 'ratio') {
                    currentChartType = 'value';
                    document.querySelectorAll('.chart-toggle-btn').forEach(btn => btn.classList.remove('active'));
                    document.getElementById('valueChartBtn').classList.add('active');
                }
            } else {
                ratioBtn.disabled = false;
                ratioBtn.style.opacity = '1';
                ratioBtn.style.cursor = 'pointer';
            }
        }

        // Update results table
        function updateTable() {
            const tbody = document.getElementById('resultsTableBody');
            
            if (calculationResults.length === 0) {
                tbody.innerHTML = `
                    <tr>
                        <td colspan="9" style="text-align: center; color: #666; padding: 2rem;">
                            Enter your parameters and click Calculate to see projections
                        </td>
                    </tr>
                `;
                return;
            }

            tbody.innerHTML = calculationResults.map(result => `
                <tr>
                    <td>${result.year}</td>
                    <td>$${result.bitcoinPrice.toLocaleString(undefined, {maximumFractionDigits: 2})}<span class="table-subtext">Real: $${result.bitcoinPriceReal.toLocaleString(undefined, {maximumFractionDigits: 2})}</span></td>
                    <td>${result.bitcoinBalance.toFixed(8)}</td>
                    <td>$${result.stockValueNominal.toLocaleString(undefined, {maximumFractionDigits: 0})}<span class="table-subtext">Real: $${result.stockValueReal.toLocaleString(undefined, {maximumFractionDigits: 0})}</span></td>
                    <td>${result.fiatPurchasingPowerIndex.toFixed(2)}%</td>
                    <td>$${result.houseValue.toLocaleString(undefined, {maximumFractionDigits: 0})}</td>
                    <td>${result.stackToHouseRatio.toFixed(2)}%</td>
                    <td>${result.stockToHouseRatio.toFixed(2)}%</td>
                    <td>$${result.portfolioValue.toLocaleString(undefined, {maximumFractionDigits: 0})}</td>
                </tr>
            `).join('');
        }

        // Reset form to default values
        function resetForm() {
            document.getElementById('initialInvestment').value = 24000;
            document.getElementById('monthlyContribution').value = 2000;
            document.getElementById('initialStockInvestment').value = 10000;
            document.getElementById('monthlyStockContribution').value = 1000;
            document.getElementById('bitcoinPrice').value = 114268.74;
            document.getElementById('bitcoinGrowthRate').value = 25;
            document.getElementById('fiatDebasementRate').value = 7;
            document.getElementById('currentStockPortfolio').value = 0;
            document.getElementById('stockGrowthRate').value = 10;
            document.getElementById('housePrice').value = 450000;
            document.getElementById('houseAppreciation').value = 5;
            document.getElementById('years').value = 15;
            
            calculateResults();
        }

        // Clear all form values to zero
        function clearAll() {
            document.getElementById('initialInvestment').value = 0;
            document.getElementById('monthlyContribution').value = 0;
            document.getElementById('initialStockInvestment').value = 0;
            document.getElementById('monthlyStockContribution').value = 0;
            document.getElementById('bitcoinPrice').value = 0;
            document.getElementById('bitcoinGrowthRate').value = 0;
            document.getElementById('fiatDebasementRate').value = 0;
            document.getElementById('currentStockPortfolio').value = 0;
            document.getElementById('stockGrowthRate').value = 0;
            document.getElementById('housePrice').value = 0;
            document.getElementById('houseAppreciation').value = 0;
            document.getElementById('years').value = 0;
            
            clearSavedSettings();

            // Clear the results
            calculationResults = [];
            updateStats();
            updateChart();
            updateFiatImpactChart();
            updateTable();
        }

        // Export data as CSV
        function exportData() {
            if (calculationResults.length === 0) {
                alert('No data to export!');
                return;
            }

            const csvContent = [
                ['Year', 'Bitcoin Price (Nominal)', 'Bitcoin Price (Real)', 'Bitcoin Balance', 'Fiat Purchasing Power Index', 'Stock Value (Nominal)', 'Stock Value (Real)', 'House Value', 'Stack/House Ratio (%)', 'Stock/House Ratio (%)', 'Portfolio Value (Nominal)', 'Bitcoin Value (Nominal)', 'Bitcoin Value (Real)'],
                ...calculationResults.map(result => [
                    result.year,
                    result.bitcoinPrice.toFixed(2),
                    result.bitcoinPriceReal.toFixed(2),
                    result.bitcoinBalance.toFixed(8),
                    result.fiatPurchasingPowerIndex.toFixed(2),
                    result.stockValueNominal.toFixed(2),
                    result.stockValueReal.toFixed(2),
                    result.houseValue.toFixed(2),
                    result.stackToHouseRatio.toFixed(2),
                    result.stockToHouseRatio.toFixed(2),
                    result.portfolioValue.toFixed(2),
                    result.bitcoinValueNominal.toFixed(2),
                    result.bitcoinValueReal.toFixed(2)
                ])
            ].map(row => row.join(',')).join('\n');

            const blob = new Blob([csvContent], { type: 'text/csv' });
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'bitcoin-compound-interest-calculator.csv';
            a.click();
            window.URL.revokeObjectURL(url);
        }

        // Export chart as image
        function exportChart() {
            if (!currentChart) {
                alert('No chart to export!');
                return;
            }

            const link = document.createElement('a');
            link.download = 'bitcoin-calculator-chart.png';
            link.href = currentChart.toBase64Image();
            link.click();
        }

        // Theme toggle functionality
        const themeToggle = document.getElementById("themeToggle");
        let isDarkTheme = false;

        if (themeToggle) {
            themeToggle.addEventListener("click", () => {
                isDarkTheme = !isDarkTheme;
                if (isDarkTheme) {
                    document.body.classList.add("dark-theme");
                    themeToggle.textContent = "☀️";
                    localStorage.setItem("theme", "dark");
                } else {
                    document.body.classList.remove("dark-theme");
                    themeToggle.textContent = "🌙";
                    localStorage.setItem("theme", "light");
                }
            });

            // Load saved theme on page load
            const savedTheme = localStorage.getItem("theme");
            if (savedTheme === "dark") {
                isDarkTheme = true;
                document.body.classList.add("dark-theme");
                themeToggle.textContent = "☀️";
            }
        }

            // Simple dropdown functionality
            const toolsBtn = document.getElementById('toolsBtn');
            const toolsContent = document.getElementById('toolsContent');
            let isOpen = false;

            toolsBtn.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                
                if (isOpen) {
                    toolsContent.classList.remove('show');
                    setTimeout(() => {
                        toolsContent.style.display = 'none';
                    }, 300);
                    isOpen = false;
                } else {
                    toolsContent.style.display = 'block';
                    setTimeout(() => {
                        toolsContent.classList.add('show');
                    }, 10);
                    isOpen = true;
                }
            });

            // Close when clicking outside
            document.addEventListener('click', function(e) {
                if (!document.getElementById('toolsDropdown').contains(e.target)) {
                    toolsContent.classList.remove('show');
                    setTimeout(() => {
                        toolsContent.style.display = 'none';
                    }, 300);
                    isOpen = false;
                }
            });
    </script>
</body>
</html>