<div class="injury-calculator">
  <style>
    .injury-calculator {
      font-family: Arial, sans-serif;
      margin: 40px auto;
      max-width: 600px;
      background-color: #fff;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      text-align: center;
    }

    .injury-calculator h2 {
      margin-top: 0;
      text-align: center;
    }

    .injury-calculator form {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .injury-calculator .form-group {
      width: calc(50% - 10px);
      margin-bottom: 10px;
    }

    .injury-calculator label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }

    .injury-calculator input[type="text"],
    .injury-calculator select {
      width: 100%;
      padding: 8px;
      border-radius: 5px;
      border: 1px solid #ccc;
      box-sizing: border-box;
    }

    .injury-calculator .btn {
      background-color: #007bff;
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .injury-calculator .btn:hover {
      background-color: #0069d9;
    }

    .injury-calculator h3 {
      margin-top: 30px;
      font-size: 24px;
      text-align: center;
    }

    .injury-calculator #claim-value {
      margin-top: 10px;
      font-size: 36px;
      font-weight: bold;
      text-align: center;
    }
  </style>
  <form>
    <div class="form-group">
      <label for="medical-expenses">1. Medical Expenses</label>
      <input type="text" id="medical-expenses" class="form-control" placeholder="$0.00">
    </div>
    <div class="form-group">
      <label for="lost-income">2. Lost Income</label>
      <input type="text" id="lost-income" class="form-control" placeholder="$0.00">
    </div>
    <div class="form-group">
      <label for="property-damage">3. Property Damage</label>
      <input type="text" id="property-damage" class="form-control" placeholder="$0.00">
    </div>
    <div class="form-group">
      <label for="pain-suffering">4. Pain and Suffering</label>
      <input type="text" id="pain-suffering" class="form-control" placeholder="$0.00">
    </div>
    <div class="form-group">
      <label for="multiplier">5. Multiplier</label>
      <select id="multiplier" class="form-control">
        <option value="1.5">1.5 (Minor Injuries)</option>
        <option value="2">2 (Moderate Injuries)</option>
        <option value="3">3 (Serious Injuries)</option>
        <option value="4">4 (Severe Injuries)</option>
        <option value="5">5 (Catastrophic Injuries)</option>
      </select>
    </div>
    <button type="button" class="btn btn-primary" id="calculate-button">Calculate</button>
    <h3>Your estimated claim value:</h3>
    <div id="claim-value">$0.00</div>
  </form>

  <script>
    document.getElementById("calculate-button").addEventListener("click", function() {
      console.log('Calculating...');

      const medicalExpenses = parseFloat(document.getElementById('medical-expenses').value.replace('$', '').replace(',', '')) || 0;
      const lostIncome = parseFloat(document.getElementById('lost-income').value.replace('$', '').replace(',', '')) || 0;
      const propertyDamage = parseFloat(document.getElementById('property-damage').value.replace('$', '').replace(',', '')) || 0;
      const painSuffering = parseFloat(document.getElementById('pain-suffering').value.replace('$', '').replace(',', '')) || 0;
      const multiplier = parseFloat(document.getElementById('multiplier').value) || 1;

      const claimValue = (medicalExpenses + lostIncome + propertyDamage) * multiplier + painSuffering;

      document.getElementById('claim-value').innerText = '$' + claimValue.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
    });
  </script>
</div>