<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Imperial Clean Cost Estimator</title>

  <!-- Minimal styling tied to a unique container ID so it won't affect the rest of the site -->
  <style>
    /* Container for the calculator */
    #imperial-clean-calculator {
      max-width: 400px;
      margin: 0 auto;
      padding: 16px;
      font-family: Arial, sans-serif;
      background-color: #f9f9f9;
      border-radius: 6px;
      border: 1px solid #ddd;
    }

    /* Headings and text */
    #imperial-clean-calculator h2 {
      text-align: center;
      margin-bottom: 10px;
    }
    #imperial-clean-calculator p {
      margin: 10px 0;
    }

    /* Labels */
    #imperial-clean-calculator label {
      display: block;
      margin: 10px 0 4px 0;
      font-weight: bold;
    }

    /* Inputs and selects */
    #imperial-clean-calculator input,
    #imperial-clean-calculator select {
      width: 100%;
      padding: 8px;
      font-size: 14px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }

    /* Buttons */
    #imperial-clean-calculator button {
      display: inline-block;
      margin-top: 12px;
      background-color: #007bff;
      color: #fff;
      border: none;
      padding: 12px 20px;
      font-size: 14px;
      cursor: pointer;
      border-radius: 4px;
      transition: background-color 0.3s;
    }
    #imperial-clean-calculator button:hover {
      background-color: #0056b3;
    }

    /* Result section */
    #result-container {
      margin-top: 16px;
      border-top: 1px solid #ccc;
      padding-top: 16px;
      display: none; /* Hidden by default until the calculation is shown */
    }
    #result-container p {
      margin: 8px 0;
    }

    /* Responsive design */
    @media (max-width: 480px) {
      #imperial-clean-calculator {
        width: 90%;
        padding: 12px;
      }
      #imperial-clean-calculator button {
        width: 100%;
      }
    }
  </style>
</head>
<body>

<div id="imperial-clean-calculator">
  <h2>Imperial Clean Cost Estimator</h2>
  <p>Please fill out the details below to get a preliminary cost estimate. 
     Note that this is an approximate calculation. 
     Contact our representative for an accurate quote.</p>

  <!-- Property size input -->
  <label for="property-size">Property size (sq ft)</label>
  <input type="number" id="property-size" name="property-size" min="0" placeholder="e.g. 1200" />

  <!-- Type of cleaning service -->
  <label for="service-type">Type of cleaning service</label>
  <select id="service-type" name="service-type">
    <option value="regular">Regular Cleaning Visits (from £20)</option>
    <option value="carpet">Carpet & Upholstery Restoration (from £50)</option>
  </select>

  <!-- Frequency of service -->
  <label for="frequency">Frequency</label>
  <select id="frequency" name="frequency">
    <option value="one-time">One-time</option>
    <option value="weekly">Weekly</option>
    <option value="bi-weekly">Bi-weekly</option>
    <option value="monthly">Monthly</option>
  </select>

  <!-- Availability (weekdays/weekends) -->
  <label for="availability">Availability</label>
  <select id="availability" name="availability">
    <option value="weekday">Weekday</option>
    <option value="weekend">Weekend</option>
  </select>

  <!-- Button to perform the calculation -->
  <button type="button" id="calculate-btn">Calculate</button>

  <!-- Result container (initially hidden) -->
  <div id="result-container">
    <p>Total Estimated Cost: <strong id="calculation-result"></strong></p>
    <p>
      This is a preliminary cost estimate only. 
      Please contact us to receive a detailed quote that meets your exact requirements.
    </p>
    <button type="button" id="contact-btn">Contact Us for a Detailed Quote</button>
  </div>
</div>

<script>
  // This function performs the cost calculation based on the input fields
  function calculateCost() {
    // Gather input values
    const propertySize = parseFloat(document.getElementById('property-size').value) || 0;
    const serviceType = document.getElementById('service-type').value;
    const frequency = document.getElementById('frequency').value;
    const availability = document.getElementById('availability').value;

    // Define base costs and per-square-foot costs
    let baseCost = 20;      // Default base cost for regular cleaning
    let costPerSqFt = 0.08; // Default cost per square foot for regular cleaning

    // If the user selects Carpet & Upholstery Restoration
    if (serviceType === 'carpet') {
      baseCost = 50;
      costPerSqFt = 0.12;
    }

    // Calculate initial cost
    let totalCost = baseCost + (propertySize * costPerSqFt);

    // Adjust cost by frequency
    // (Example: Weekly => 10% discount, Bi-weekly => 5% discount, etc.)
    if (frequency === 'weekly') {
      totalCost *= 0.90; // 10% discount
    } else if (frequency === 'bi-weekly') {
      totalCost *= 0.95; // 5% discount
    } else if (frequency === 'monthly') {
      totalCost *= 0.98; // 2% discount
    }

    // Adjust cost for weekend availability
    // (Example: Weekend => 15% surcharge)
    if (availability === 'weekend') {
      totalCost *= 1.15; 
    }

    // Round the result to two decimals
    return totalCost.toFixed(2);
  }

  // Event listener for the 'Calculate' button
  document.getElementById('calculate-btn').addEventListener('click', function () {
    // Perform calculation
    const result = calculateCost();

    // Display the result
    document.getElementById('calculation-result').textContent = '£' + result;
    document.getElementById('result-container').style.display = 'block';
  });

  // You can handle the 'Contact Us' button click here if needed
  // For example, linking to a contact page or opening a popup form
  document.getElementById('contact-btn').addEventListener('click', function () {
    // Placeholder action - redirect or open your contact form
    alert('Thank you for your interest! We will get back to you shortly.');
  });
</script>

</body>
</html>
