<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>West Clean Cleaning Services Calculator</title>
  <!-- Calculator Styles -->
  <style>
    /* Container Styling */
    #wc-calculator {
      max-width: 600px;
      margin: 20px auto;
      padding: 20px;
      font-family: Arial, sans-serif;
      background: #f9f9f9;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    /* Heading */
    #wc-calculator h2 {
      text-align: center;
      color: #2c3e50;
      margin-bottom: 20px;
      animation: fadeInDown 1s ease-out;
    }

    /* Section Styling */
    .wc-section {
      margin-bottom: 20px;
      padding: 15px;
      background: #ffffff;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      animation: fadeInUp 1s ease-out;
    }

    .wc-section h3 {
      margin-bottom: 10px;
      color: #34495e;
    }

    /* Label and Input Styling */
    .wc-field {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    .wc-field label {
      flex: 1;
      color: #2c3e50;
      margin-right: 10px;
    }

    .wc-field input[type="number"],
    .wc-field select {
      flex: 1;
      padding: 5px;
      border: 1px solid #bdc3c7;
      border-radius: 4px;
      font-size: 16px;
    }

    /* Calculate Button */
    #wc-calculate-btn {
      width: 100%;
      padding: 10px;
      background: #27ae60;
      color: #ffffff;
      border: none;
      border-radius: 5px;
      font-size: 18px;
      cursor: pointer;
      transition: background 0.3s ease;
      animation: bounceIn 1s;
    }

    #wc-calculate-btn:hover {
      background: #219150;
    }

    /* Result Styling */
    #wc-result {
      margin-top: 20px;
      padding: 15px;
      background: #dff0d8;
      color: #3c763d;
      border: 1px solid #d6e9c6;
      border-radius: 8px;
      text-align: center;
      display: none;
      animation: fadeIn 1s;
    }

    /* Contact Button */
    #wc-contact-btn {
      margin-top: 10px;
      padding: 10px 20px;
      background: #2980b9;
      color: #ffffff;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    #wc-contact-btn:hover {
      background: #1f6391;
    }

    /* Animations */
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes fadeInDown {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes bounceIn {
      0% {
        opacity: 0;
        transform: scale(0.3);
      }
      50% {
        opacity: 1;
        transform: scale(1.05);
      }
      70% {
        transform: scale(0.9);
      }
      100% {
        transform: scale(1);
      }
    }

    /* Responsive Design */
    @media (max-width: 600px) {
      #wc-calculator {
        padding: 10px;
      }

      .wc-field {
        flex-direction: column;
        align-items: flex-start;
      }

      .wc-field label,
      .wc-field input[type="number"],
      .wc-field select {
        width: 100%;
        margin-right: 0;
      }

      #wc-contact-btn {
        width: 100%;
      }
    }

    /* Slider Styling */
    .wc-slider-container {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }

    .wc-slider-container input[type="range"] {
      flex: 1;
      margin-right: 10px;
    }

    .wc-slider-value {
      width: 50px;
      text-align: right;
      color: #2c3e50;
    }
  </style>
</head>
<body>

  <!-- West Clean Cleaning Services Calculator -->
  <div id="wc-calculator">
    <!-- Calculator Heading -->
    <h2>Cleaning Services Calculator</h2>

    <!-- End of Tenancy Cleaning Section -->
    <div class="wc-section">
      <h3>End of Tenancy Cleaning</h3>
      <div class="wc-field">
        <label for="wc-property-type">Property Type:</label>
        <select id="wc-property-type">
          <option value="0">Select...</option>
          <option value="145">Studio Flat (£145)</option>
          <option value="160">1 Bedroom Flat (£160)</option>
          <option value="190">2 Bedroom Flat (£190)</option>
          <option value="240">3 Bedroom Flat (£240)</option>
          <option value="325">4 Bedroom Flat (£325)</option>
          <option value="450">5 Bedroom Flat (£450)</option>
          <option value="240">2 Bedroom House (£240)</option>
          <option value="290">3 Bedroom House (£290)</option>
          <option value="380">4 Bedroom House (£380)</option>
          <option value="490">5 Bedroom House (£490)</option>
        </select>
      </div>
    </div>

    <!-- Carpet Steam Cleaning Section -->
    <div class="wc-section">
      <h3>Carpet Steam Cleaning</h3>
      <div class="wc-field">
        <label for="wc-single-bedroom">Single Bedroom (£22):</label>
        <input type="number" id="wc-single-bedroom" min="0" value="0">
      </div>
      <div class="wc-field">
        <label for="wc-double-bedroom">Double Bedroom (£30):</label>
        <input type="number" id="wc-double-bedroom" min="0" value="0">
      </div>
      <div class="wc-field">
        <label for="wc-lounge">Lounge/Living Room (£40):</label>
        <input type="number" id="wc-lounge" min="0" value="0">
      </div>
      <div class="wc-field">
        <label for="wc-dining-room">Dining Room (£30):</label>
        <input type="number" id="wc-dining-room" min="0" value="0">
      </div>
      <div class="wc-field">
        <label for="wc-hallway">Hallway (£15):</label>
        <input type="number" id="wc-hallway" min="0" value="0">
      </div>
      <div class="wc-field">
        <label for="wc-staircase">Staircase (£3 per step):</label>
        <input type="number" id="wc-staircase" min="0" value="0">
      </div>
      <div class="wc-field">
        <label for="wc-rugs">Rugs (£25):</label>
        <input type="number" id="wc-rugs" min="0" value="0">
      </div>
    </div>

    <!-- Upholstery Steam Cleaning Section -->
    <div class="wc-section">
      <h3>Upholstery Steam Cleaning</h3>
      <div class="wc-field">
        <label for="wc-sofa-1">1-Seater Sofa (£22):</label>
        <input type="number" id="wc-sofa-1" min="0" value="0">
      </div>
      <div class="wc-field">
        <label for="wc-sofa-2">2-Seater Sofa (£30):</label>
        <input type="number" id="wc-sofa-2" min="0" value="0">
      </div>
      <div class="wc-field">
        <label for="wc-sofa-3">3-Seater Sofa (£40):</label>
        <input type="number" id="wc-sofa-3" min="0" value="0">
      </div>
      <div class="wc-field">
        <label for="wc-sofa-4">4-Seater Sofa (£50):</label>
        <input type="number" id="wc-sofa-4" min="0" value="0">
      </div>
      <div class="wc-field">
        <label for="wc-corner-group">Corner Group (£75):</label>
        <input type="number" id="wc-corner-group" min="0" value="0">
      </div>
      <div class="wc-field">
        <label for="wc-curtains-half">Curtains (Half Length) (£18 per pair):</label>
        <input type="number" id="wc-curtains-half" min="0" value="0">
      </div>
      <div class="wc-field">
        <label for="wc-curtains-full">Curtains (Full Length) (£35 per pair):</label>
        <input type="number" id="wc-curtains-full" min="0" value="0">
      </div>
      <div class="wc-field">
        <label for="wc-mattress-single">Single Mattress (£22):</label>
        <input type="number" id="wc-mattress-single" min="0" value="0">
      </div>
      <div class="wc-field">
        <label for="wc-mattress-double">Double Mattress (£30):</label>
        <input type="number" id="wc-mattress-double" min="0" value="0">
      </div>
      <div class="wc-field">
        <label for="wc-mattress-king">King-Size Mattress (£40):</label>
        <input type="number" id="wc-mattress-king" min="0" value="0">
      </div>
    </div>

    <!-- Regular Domestic Cleaning Section -->
    <div class="wc-section">
      <h3>Regular Domestic Cleaning</h3>
      <div class="wc-field">
        <label for="wc-cleaning-type">Cleaning Type:</label>
        <select id="wc-cleaning-type">
          <option value="0">Select...</option>
          <option value="15">Weekly or Fortnightly (£15/hr, min 2.5 hrs)</option>
          <option value="20">One-Off Cleaning (£20/hr, min 2.5 hrs)</option>
          <option value="30">Short Notice (On the Day) (£30/hr)</option>
          <option value="50">Emergency Cleaning (9:00 PM - 6:30 AM) (£50/hr)</option>
        </select>
      </div>
      <div class="wc-field">
        <label for="wc-cleaning-hours">Number of Hours:</label>
        <input type="number" id="wc-cleaning-hours" min="2.5" step="0.5" value="2.5">
      </div>
    </div>

    <!-- Calculate Button -->
    <button id="wc-calculate-btn">Calculate Estimate</button>

    <!-- Result Display -->
    <div id="wc-result">
      <p>Your estimated cost is: <strong>£<span id="wc-total">0.00</span></strong></p>
      <p>This is a preliminary estimate. For an accurate quote, please contact our representatives.</p>
      <button id="wc-contact-btn">Contact Us</button>
    </div>

    <!-- Calculator Script -->
    <script>
      // Function to calculate the total estimate
      function calculateEstimate() {
        let total = 0;

        // End of Tenancy Cleaning
        const propertyType = document.getElementById('wc-property-type').value;
        if (propertyType !== "0") {
          total += parseFloat(propertyType);
        }

        // Carpet Steam Cleaning
        const carpetFields = [
          { id: 'wc-single-bedroom', price: 22 },
          { id: 'wc-double-bedroom', price: 30 },
          { id: 'wc-lounge', price: 40 },
          { id: 'wc-dining-room', price: 30 },
          { id: 'wc-hallway', price: 15 },
          { id: 'wc-staircase', price: 3 }, // per step
          { id: 'wc-rugs', price: 25 }
        ];

        carpetFields.forEach(field => {
          let value = parseFloat(document.getElementById(field.id).value);
          if (!isNaN(value) && value > 0) {
            if (field.id === 'wc-staircase') {
              total += value * field.price;
            } else {
              total += value * field.price;
            }
          }
        });

        // Upholstery Steam Cleaning
        const upholsteryFields = [
          { id: 'wc-sofa-1', price: 22 },
          { id: 'wc-sofa-2', price: 30 },
          { id: 'wc-sofa-3', price: 40 },
          { id: 'wc-sofa-4', price: 50 },
          { id: 'wc-corner-group', price: 75 },
          { id: 'wc-curtains-half', price: 18 },
          { id: 'wc-curtains-full', price: 35 },
          { id: 'wc-mattress-single', price: 22 },
          { id: 'wc-mattress-double', price: 30 },
          { id: 'wc-mattress-king', price: 40 }
        ];

        upholsteryFields.forEach(field => {
          let value = parseFloat(document.getElementById(field.id).value);
          if (!isNaN(value) && value > 0) {
            total += value * field.price;
          }
        });

        // Regular Domestic Cleaning
        const cleaningType = document.getElementById('wc-cleaning-type').value;
        const cleaningHours = parseFloat(document.getElementById('wc-cleaning-hours').value);
        if (cleaningType !== "0" && !isNaN(cleaningHours) && cleaningHours > 0) {
          let hourlyRate = parseFloat(cleaningType);
          // Apply minimum hours for certain cleaning types
          if (hourlyRate === 15 || hourlyRate === 20) {
            if (cleaningHours < 2.5) {
              alert("Minimum of 2.5 hours required for the selected cleaning type.");
              return;
            }
          }
          total += hourlyRate * cleaningHours;
        }

        // Round total to two decimal places
        total = Math.round(total * 100) / 100;

        // Display the result
        document.getElementById('wc-total').innerText = total.toFixed(2);
        document.getElementById('wc-result').style.display = 'block';
      }

      // Event Listener for Calculate Button
      document.getElementById('wc-calculate-btn').addEventListener('click', calculateEstimate);

      // Event Listener for Contact Button
      document.getElementById('wc-contact-btn').addEventListener('click', function() {
        // Redirect to contact page or open contact form
        // Replace '#' with the actual contact URL or function
        window.location.href = '#'; // TODO: Update with actual contact link
      });
    </script>
  </div>

</body>
</html>
