<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Cleaning Services Calculator</title>
  <style>
    /* Cleaning Calculator Styles */
    .cc-container {
      max-width: 500px;
      margin: 40px auto;
      padding: 25px;
      font-family: Arial, sans-serif;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 6px 12px rgba(0,0,0,0.1);
      transition: transform 0.3s ease-in-out;
    }

    .cc-container:hover {
      transform: translateY(-5px);
    }

    .cc-container h2 {
      text-align: center;
      margin-bottom: 25px;
      color: #2c3e50;
      font-size: 24px;
    }

    .cc-section {
      margin-bottom: 20px;
    }

    .cc-section label {
      display: block;
      margin-bottom: 8px;
      color: #34495e;
      font-weight: bold;
    }

    .cc-section input[type="radio"],
    .cc-section input[type="checkbox"] {
      margin-right: 10px;
      transform: scale(1.2);
      vertical-align: middle;
    }

    .cc-slider {
      width: 100%;
      margin-top: 10px;
    }

    .cc-slider-value {
      text-align: right;
      margin-top: 5px;
      color: #2c3e50;
      font-weight: bold;
    }

    .cc-button {
      width: 100%;
      padding: 12px;
      background: #27ae60;
      color: #fff;
      border: none;
      border-radius: 6px;
      font-size: 18px;
      cursor: pointer;
      transition: background 0.3s, transform 0.2s;
    }

    .cc-button:hover {
      background: #219150;
      transform: scale(1.02);
    }

    .cc-result {
      display: none;
      margin-top: 25px;
      padding: 20px;
      background: #ecf0f1;
      border-radius: 8px;
      animation: fadeIn 0.6s ease-in-out;
    }

    .cc-result p {
      margin-bottom: 12px;
      color: #2c3e50;
      font-size: 16px;
    }

    .cc-result strong {
      color: #27ae60;
      font-size: 18px;
    }

    .cc-contact-button {
      padding: 12px 25px;
      background: #2980b9;
      color: #fff;
      border: none;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
      transition: background 0.3s, transform 0.2s;
      display: block;
      margin: 0 auto;
    }

    .cc-contact-button:hover {
      background: #1f6391;
      transform: scale(1.02);
    }

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

    /* Responsive Design */
    @media (max-width: 600px) {
      .cc-container {
        padding: 20px;
        margin: 20px;
      }

      .cc-container h2 {
        font-size: 20px;
      }

      .cc-button {
        font-size: 16px;
        padding: 10px;
      }

      .cc-contact-button {
        font-size: 14px;
        padding: 10px 20px;
      }

      .cc-slider-value {
        font-size: 14px;
      }

      .cc-section label {
        font-size: 14px;
      }

      .cc-result p {
        font-size: 14px;
      }

      .cc-result strong {
        font-size: 16px;
      }
    }
  </style>
</head>
<body>

  <!-- Cleaning Services Calculator -->
  <div id="cleaning-calculator" class="cc-container">
    <h2>Cleaning Services Calculator</h2>

    <!-- Service Type Selection -->
    <div class="cc-section">
      <label>Choose Service Type:</label>
      <label><input type="radio" name="service-type" value="regular" checked> Regular Home Cleaning</label>
      <label><input type="radio" name="service-type" value="one-off"> One-off House Cleaning</label>
      <label><input type="radio" name="service-type" value="spring"> Spring Cleaning</label>
      <label><input type="radio" name="service-type" value="after-party"> After-party Cleaning</label>
    </div>

    <!-- Frequency Selection (Only for Regular Cleaning) -->
    <div class="cc-section" id="frequency-section">
      <label>Frequency:</label>
      <label><input type="radio" name="frequency" value="weekly" checked> Weekly</label>
      <label><input type="radio" name="frequency" value="fortnightly"> Fortnightly</label>
      <label><input type="radio" name="frequency" value="monthly"> Monthly</label>
    </div>

    <!-- Hours Selection -->
    <div class="cc-section">
      <label for="hours">Number of Hours:</label>
      <input type="range" id="hours" class="cc-slider" min="2" max="10" value="2">
      <div class="cc-slider-value">2 hours</div>
    </div>

    <!-- Additional Options -->
    <div class="cc-section">
      <label>Additional Options:</label>
      <label><input type="checkbox" id="materials"> Cleaning Materials (£5)</label>
      <label><input type="checkbox" id="equipment"> Equipment (£10)</label>
    </div>

    <!-- Calculate Button -->
    <button class="cc-button" id="calculate-btn">Calculate</button>

    <!-- Result Section -->
    <div class="cc-result" id="result">
      <p>Your estimated cost is: <strong>£<span id="total-cost">0</span></strong></p>
      <p>This is a preliminary estimate. For an exact quote, please contact us.</p>
      <button class="cc-contact-button" onclick="window.location.href='mailto:hello@qithub.click'">Contact Us</button>
    </div>
  </div>

  <script>
    // Cleaning Calculator Script

    // Get elements
    const serviceTypeRadios = document.getElementsByName('service-type');
    const frequencySection = document.getElementById('frequency-section');
    const frequencyRadios = document.getElementsByName('frequency');
    const hoursSlider = document.getElementById('hours');
    const hoursValue = document.querySelector('.cc-slider-value');
    const materialsCheckbox = document.getElementById('materials');
    const equipmentCheckbox = document.getElementById('equipment');
    const calculateBtn = document.getElementById('calculate-btn');
    const resultSection = document.getElementById('result');
    const totalCostSpan = document.getElementById('total-cost');

    // Pricing Data
    const pricing = {
      regular: {
        weekly: { rate: 12, minHours: 2 },
        fortnightly: { rate: 12, minHours: 3 },
        monthly: { rate: 13, minHours: 4 }
      },
      oneOff: { rate: 14, minHours: 2 },
      spring: { rate: 15, minHours: 4 }, // Special offer expired
      afterParty: { rate: 13, minHours: 3 },
      additional: {
        materials: 5,
        equipment: 10
      }
    };

    // Update Hours Slider based on selected service and frequency
    function updateHoursSlider() {
      let selectedService = getSelectedService();
      let minHours = 2; // default

      if (selectedService === 'regular') {
        let selectedFrequency = getSelectedFrequency();
        minHours = pricing.regular[selectedFrequency].minHours;
      } else {
        if (selectedService === 'spring') {
          minHours = pricing.spring.minHours;
        } else if (selectedService === 'one-off') {
          minHours = pricing.oneOff.minHours;
        } else if (selectedService === 'after-party') {
          minHours = pricing.afterParty.minHours;
        }
      }

      hoursSlider.min = minHours;
      if (parseInt(hoursSlider.value) < minHours) {
        hoursSlider.value = minHours;
        hoursValue.textContent = `${minHours} hours`;
      }
      hoursSlider.value = Math.max(parseInt(hoursSlider.value), minHours);
    }

    // Get selected service type
    function getSelectedService() {
      for (let radio of serviceTypeRadios) {
        if (radio.checked) {
          return radio.value;
        }
      }
      return 'regular'; // default
    }

    // Get selected frequency
    function getSelectedFrequency() {
      for (let radio of frequencyRadios) {
        if (radio.checked) {
          return radio.value;
        }
      }
      return 'weekly'; // default
    }

    // Event Listeners

    // Show or hide frequency section based on service type
    for (let radio of serviceTypeRadios) {
      radio.addEventListener('change', () => {
        if (getSelectedService() === 'regular') {
          frequencySection.style.display = 'block';
        } else {
          frequencySection.style.display = 'none';
        }
        updateHoursSlider();
      });
    }

    // Update hours display when slider changes
    hoursSlider.addEventListener('input', () => {
      hoursValue.textContent = `${hoursSlider.value} hours`;
    });

    // Update hours slider min when frequency changes
    for (let radio of frequencyRadios) {
      radio.addEventListener('change', updateHoursSlider);
    }

    // Calculate total cost
    calculateBtn.addEventListener('click', () => {
      let total = 0;
      let selectedService = getSelectedService();
      let hours = parseInt(hoursSlider.value);

      // Determine rate and minimum hours
      if (selectedService === 'regular') {
        let selectedFrequency = getSelectedFrequency();
        let serviceData = pricing.regular[selectedFrequency];
        total += serviceData.rate * hours;
      } else if (selectedService === 'one-off') {
        total += pricing.oneOff.rate * hours;
      } else if (selectedService === 'spring') {
        // Check if special offer is valid
        let currentDate = new Date();
        let offerEndDate = new Date('2020-06-30');
        if (currentDate <= offerEndDate) {
          total += 12 * hours; // Special offer rate
        } else {
          total += pricing.spring.rate * hours;
        }
      } else if (selectedService === 'after-party') {
        total += pricing.afterParty.rate * hours;
      }

      // Add additional charges
      if (materialsCheckbox.checked) {
        total += pricing.additional.materials;
      }
      if (equipmentCheckbox.checked) {
        total += pricing.additional.equipment;
      }

      // Display the result
      totalCostSpan.textContent = total;
      resultSection.style.display = 'block';
      // Scroll to result
      resultSection.scrollIntoView({ behavior: 'smooth' });
    });

    // Initialize the calculator
    function initCalculator() {
      // Hide frequency section if not regular
      if (getSelectedService() !== 'regular') {
        frequencySection.style.display = 'none';
      }
      updateHoursSlider();
    }

    // Initialize on page load
    window.onload = initCalculator;
  </script>
  
</body>
</html>
