<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Compensation Sliders</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .slider-container {
            margin-bottom: 20px;
        }
        .label {
            margin-bottom: 5px;
            font-weight: bold;
        }
        .value {
            margin-left: 10px;
        }
        #esop {
            pointer-events: none;
            opacity: 0.5;
        }
        table {
            border-collapse: collapse;
            margin-top: 20px;
            width: 100%;
            max-width: 800px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: right;
        }
        th {
            background-color: #f2f2f2;
            text-align: left;
        }
        .valuation-column {
            color: #666;
            font-size: 0.9em;
        }
    </style>
</head>
<body>
    <h1>Compensation Adjuster</h1>
    <div class="slider-container">
        <div class="label">Salary: ₪<span id="salaryValue">36,000</span></div>
        <input type="range" id="salary" min="35000" max="50000" value="40000" step="500">
    </div>
    <div class="slider-container">
        <div class="label">Signing Bonus: ₪<span id="bonusValue">0</span></div>
        <input type="range" id="bonus" min="0" max="40000" value="20000" step="1000">
    </div>
    <div class="slider-container">
        <div class="label">ESOP: <span id="esopValue">0.40</span></div>
        <input type="range" id="esop" min="0.15" max="0.25" value="0.20" step="0.001">
    </div>

    <table id="esopTable">
        <thead>
            <tr>
                <th>Round</th>
                <th>Company Valuation</th>
                <th>ESOP %</th>
                <th>Value in ₪</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <script>
        const salarySlider = document.getElementById('salary');
        const esopSlider = document.getElementById('esop');
        const bonusSlider = document.getElementById('bonus');
        const salaryValue = document.getElementById('salaryValue');
        const esopValue = document.getElementById('esopValue');
        const bonusValue = document.getElementById('bonusValue');
        
        const EXCHANGE_RATE = 3.62; // USD to ILS exchange rate
        
        // Define rounds with their valuations and drop percentages
        const rounds = [
            { name: 'Current', valuation: 45000000, drop: 1 },
            { name: 'Series A', valuation: 320000000, drop: 0.1550 },
            { name: 'Series B', valuation: 770000000, drop: 0.1109 },
            { name: 'Series C', valuation: 1650000000, drop: 0.1009 },
            { name: 'Series D', valuation: 3150000000, drop: 0.0476 }
        ];

        function formatCurrency(value) {
            return '₪' + value.toLocaleString();
        }

        function formatPercentage(value) {
            return (value * 100).toFixed(3) + '%';
        }

        function updateTable(esopPercentage) {
            const tbody = document.querySelector('#esopTable tbody');
            tbody.innerHTML = '';
            
            let currentPercentage = esopPercentage;
            
            rounds.forEach(round => {
                const row = document.createElement('tr');
                // Calculate next round's percentage
                if (round.drop < 1) {
                  currentPercentage *= (1.0-round.drop);
                }
                const value = round.valuation * currentPercentage;
                
                row.innerHTML = `
                    <td>${round.name}</td>
                    <td class="valuation-column">${formatCurrency(round.valuation)}</td>
                    <td>${formatPercentage(currentPercentage)}</td>
                    <td>${formatCurrency(value*EXCHANGE_RATE)}</td>
                `;
                
                tbody.appendChild(row);
            });
        }

        const updateSliders = () => {
            const salary = parseInt(salarySlider.value);
            let bonus = parseInt(bonusSlider.value);
            
            // Adjust based on differences from base values
            let esop = 0.210 - ((salary - 35000) / 1000) * 0.004 - ((bonus - 40000) / 40000) * 0.04;
            esop = Math.max(0.15, Math.min(0.25, esop));
            
            // Update ESOP slider and value
            esopSlider.value = esop.toFixed(4);
            
            // Update displayed values
            salaryValue.textContent = salary.toLocaleString();
            bonusValue.textContent = bonus.toLocaleString();
            esopForCalc = esop / 100
            let value = esopForCalc * rounds[0].valuation * EXCHANGE_RATE;
            esopValue.textContent = formatPercentage(esopForCalc) + " (~" + formatCurrency(value) + ")";
            
            // Update the table
            updateTable(esopForCalc);
        };

        salarySlider.addEventListener('input', updateSliders);
        bonusSlider.addEventListener('input', updateSliders);
        updateSliders();
    </script>
</body>
</html>