<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cleaning Service Calculator</title>
    <style>
        /* Scoped styles for the Cleaning Service Calculator */
        #cleaning-calculator-container {
            max-width: 400px;
            margin: 40px auto;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            background-color: #ffffff;
        }

        #cleaning-calculator-container h2 {
            text-align: center;
            margin-bottom: 25px;
            color: #333333;
        }

        #cleaning-calculator-form div {
            margin-bottom: 20px;
        }

        #cleaning-calculator-form label {
            display: block;
            margin-bottom: 8px;
            color: #555555;
        }

        #cleaning-calculator-form select,
        #cleaning-calculator-form input[type="number"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #cccccc;
            border-radius: 5px;
            font-size: 16px;
            box-sizing: border-box;
        }

        #cleaning-calculator-form button {
            width: 100%;
            padding: 12px;
            background-color: #28a745;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            font-size: 18px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        #cleaning-calculator-form button:hover {
            background-color: #218838;
        }

        #calculator-result {
            margin-top: 25px;
            display: none;
            text-align: center;
        }

        #result-text {
            font-size: 20px;
            margin-bottom: 20px;
            color: #333333;
        }

        #contact-button {
            padding: 12px 24px;
            background-color: #007bff;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            font-size: 18px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        #contact-button:hover {
            background-color: #0056b3;
        }

        /* Responsive Design */
        @media (max-width: 480px) {
            #cleaning-calculator-container {
                padding: 15px;
                margin: 20px;
            }

            #cleaning-calculator-container h2 {
                font-size: 24px;
            }

            #cleaning-calculator-form button,
            #contact-button {
                font-size: 16px;
                padding: 10px;
            }

            #result-text {
                font-size: 18px;
            }
        }
    </style>
</head>
<body>

    <!-- Cleaning Service Calculator -->
    <div id="cleaning-calculator-container">
        <h2>Cleaning Service Calculator</h2>
        <form id="cleaning-calculator-form">
            <!-- Service Type Selection -->
            <div>
                <label for="service-type">Service Type:</label>
                <select id="service-type" required>
                    <option value="" disabled selected>Select a service</option>
                    <option value="house">House Cleaning</option>
                    <option value="office">Office Cleaning</option>
                    <option value="builders">Builders Cleaning</option>
                    <option value="end-tenancy">End of Tenancy Cleaning</option>
                    <option value="decontamination">Decontamination Fogging</option>
                </select>
            </div>

            <!-- Property Size Input -->
            <div>
                <label for="property-size">Property Size (number of rooms):</label>
                <input type="number" id="property-size" min="1" required placeholder="e.g., 3">
            </div>

            <!-- Type of Cleaning Selection -->
            <div>
                <label for="cleaning-type">Type of Cleaning:</label>
                <select id="cleaning-type" required>
                    <option value="" disabled selected>Select cleaning type</option>
                    <option value="regular">Regular</option>
                    <option value="deep">Deep</option>
                </select>
            </div>

            <!-- Calculate Button -->
            <button type="submit">Calculate</button>
        </form>

        <!-- Result Section -->
        <div id="calculator-result">
            <p id="result-text"></p>
            <button id="contact-button">Contact Us for a Detailed Quote</button>
        </div>
    </div>

    <!-- JavaScript for Calculator Functionality -->
    <script>
        /**
         * Function to calculate the estimated cost based on user inputs
         * @param {string} serviceType - The selected service type
         * @param {number} propertySize - The number of rooms
         * @param {string} cleaningType - The type of cleaning (regular/deep)
         * @returns {string} - The calculated cost formatted to two decimal places
         */
        function calculateCost(serviceType, propertySize, cleaningType) {
            // Base prices for each service type (in GBP)
            const basePrices = {
                house: 40,
                office: 40,
                builders: 225,
                'end-tenancy': 150,
                decontamination: 150
            };

            // Additional cost per additional room beyond the first
            const costPerRoom = 10;

            // Multiplier for deep cleaning
            const deepCleaningMultiplier = 1.2;

            // Retrieve base price for the selected service type
            let total = basePrices[serviceType];

            // Add cost based on the number of rooms (assuming first room is included)
            if (propertySize > 1) {
                total += (propertySize - 1) * costPerRoom;
            }

            // Apply multiplier if deep cleaning is selected
            if (cleaningType === 'deep') {
                total *= deepCleaningMultiplier;
            }

            // Return the total cost rounded to two decimal places
            return total.toFixed(2);
        }

        // Event listener for form submission
        document.getElementById('cleaning-calculator-form').addEventListener('submit', function(event) {
            event.preventDefault(); // Prevent default form submission

            // Retrieve user inputs
            const serviceType = document.getElementById('service-type').value;
            const propertySize = parseInt(document.getElementById('property-size').value, 10);
            const cleaningType = document.getElementById('cleaning-type').value;

            // Validate inputs
            if (!serviceType || !propertySize || !cleaningType) {
                alert('Please fill in all fields.');
                return;
            }

            // Calculate the estimated cost
            const estimatedCost = calculateCost(serviceType, propertySize, cleaningType);

            // Display the result
            const resultText = `Estimated Cost: £${estimatedCost} (Excl. VAT)`;
            document.getElementById('result-text').innerText = resultText;
            document.getElementById('calculator-result').style.display = 'block';
        });

        // Event listener for contact button
        document.getElementById('contact-button').addEventListener('click', function() {
            // Redirect to the contact page or open a contact form
            // Replace the URL below with the actual contact page URL of your website
            window.location.href = 'https://qithub.click/'; // Example URL
        });
    </script>

</body>
</html>
