<!-- RedClean Cleaning Services Calculator -->
<div id="redclean-calculator-container">
  <style>
    /* RedClean Calculator Styles */
    #redclean-calculator-container {
      font-family: 'Roboto', sans-serif;
      max-width: 400px;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      background-color: #ffffff;
    }

    #redclean-calculator-container h2 {
      text-align: center;
      color: #d32f2f;
      margin-bottom: 20px;
    }

    .rc-form-group {
      margin-bottom: 15px;
    }

    .rc-form-group label {
      display: block;
      margin-bottom: 5px;
      font-weight: 600;
      color: #333333;
    }

    .rc-form-group select,
    .rc-form-group input[type="number"],
    .rc-form-group input[type="text"],
    .rc-form-group input[type="email"],
    .rc-form-group textarea {
      width: 100%;
      padding: 10px;
      border: 1px solid #cccccc;
      border-radius: 5px;
      box-sizing: border-box;
      font-size: 14px;
      transition: border-color 0.3s;
    }

    .rc-form-group select:focus,
    .rc-form-group input[type="number"]:focus,
    .rc-form-group input[type="text"]:focus,
    .rc-form-group input[type="email"]:focus,
    .rc-form-group textarea:focus {
      border-color: #d32f2f;
      outline: none;
    }

    .rc-checkbox-group {
      display: flex;
      flex-direction: column;
    }

    .rc-checkbox-group label {
      font-weight: normal;
      color: #555555;
      margin-bottom: 5px;
      display: flex;
      align-items: center;
    }

    .rc-checkbox-group input[type="checkbox"] {
      margin-right: 10px;
    }

    #rc-calculate-btn {
      width: 100%;
      padding: 12px;
      background-color: #d32f2f;
      color: #ffffff;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    #rc-calculate-btn:hover {
      background-color: #b71c1c;
    }

    #rc-result {
      margin-top: 20px;
      padding: 15px;
      border: 1px solid #d32f2f;
      border-radius: 5px;
      background-color: #fff3e0;
      display: none;
      text-align: center;
    }

    #rc-result p {
      margin: 0 0 10px 0;
      font-size: 16px;
      color: #d32f2f;
    }

    #rc-contact-btn {
      padding: 10px 20px;
      background-color: #1976d2;
      color: #ffffff;
      border: none;
      border-radius: 5px;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    #rc-contact-btn:hover {
      background-color: #1565c0;
    }

    /* Contact Modal Styles */
    #rc-contact-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    #rc-contact-modal .rc-modal-content {
      background-color: #ffffff;
      padding: 20px;
      border-radius: 10px;
      width: 90%;
      max-width: 400px;
      position: relative;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    #rc-contact-modal .rc-modal-content h3 {
      margin-top: 0;
      text-align: center;
      color: #d32f2f;
    }

    #rc-contact-modal .rc-modal-content .rc-close-modal {
      position: absolute;
      top: 15px;
      right: 20px;
      font-size: 24px;
      color: #999999;
      cursor: pointer;
    }

    #rc-contact-modal .rc-modal-content form {
      margin-top: 20px;
    }

    #rc-contact-modal .rc-modal-content form .rc-form-group {
      margin-bottom: 15px;
    }

    #rc-contact-modal .rc-modal-content form button {
      width: 100%;
      padding: 12px;
      background-color: #d32f2f;
      color: #ffffff;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    #rc-contact-modal .rc-modal-content form button:hover {
      background-color: #b71c1c;
    }

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

      #rc-contact-modal .rc-modal-content {
        padding: 15px;
      }
    }
  </style>

  <div id="redclean-calculator">
    <h2>Estimate Your Cleaning Cost</h2>

    <!-- Service Selection -->
    <div class="rc-form-group">
      <label for="rc-service">Select Service:</label>
      <select id="rc-service">
        <option value="">-- Choose a Service --</option>
        <option value="window">Window Cleaning</option>
        <option value="roof">Roof Cleaning</option>
        <option value="render">Render Cleaning</option>
        <option value="driveway">Driveway Cleaning</option>
      </select>
    </div>

    <!-- Dynamic Inputs Container -->
    <div id="rc-dynamic-inputs"></div>

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

    <!-- Result Section -->
    <div id="rc-result">
      <p>Estimated Cost: <span id="rc-estimated-cost"></span></p>
      <p>This is a preliminary estimate. For an accurate quote, please contact our representative.</p>
      <button id="rc-contact-btn">Contact Us Now</button>
    </div>
  </div>

  <!-- Contact Modal -->
  <div id="rc-contact-modal">
    <div class="rc-modal-content">
      <span class="rc-close-modal">&times;</span>
      <h3>Contact Us</h3>
      <form id="rc-contact-form">
        <div class="rc-form-group">
          <label for="rc-name">Name:</label>
          <input type="text" id="rc-name" required>
        </div>
        <div class="rc-form-group">
          <label for="rc-email">Email:</label>
          <input type="email" id="rc-email" required>
        </div>
        <div class="rc-form-group">
          <label for="rc-message">Message:</label>
          <textarea id="rc-message" rows="4" required></textarea>
        </div>
        <button type="submit">Send Message</button>
      </form>
    </div>
  </div>

  <script>
    // RedClean Calculator Script
    (function() {
      const serviceSelect = document.getElementById('rc-service');
      const dynamicInputs = document.getElementById('rc-dynamic-inputs');
      const calculateBtn = document.getElementById('rc-calculate-btn');
      const resultSection = document.getElementById('rc-result');
      const estimatedCost = document.getElementById('rc-estimated-cost');
      const contactBtn = document.getElementById('rc-contact-btn');
      const contactModal = document.getElementById('rc-contact-modal');
      const closeModal = document.querySelector('.rc-close-modal');
      const contactForm = document.getElementById('rc-contact-form');

      // Event Listener for Service Selection
      serviceSelect.addEventListener('change', function() {
        const service = this.value;
        dynamicInputs.innerHTML = ''; // Clear previous inputs

        if (service === 'window') {
          // Window Cleaning Inputs
          dynamicInputs.innerHTML = `
            <div class="rc-form-group">
              <label for="rc-window-size">Property Size:</label>
              <select id="rc-window-size">
                <option value="">-- Select Size --</option>
                <option value="2-bedroom">2-Bedroom Property</option>
                <option value="2-3-bedroom-semi">2/3-Bedroom Semi-Detached</option>
                <option value="4-bedroom-semi">4-Bedroom Semi-Detached</option>
              </select>
            </div>
            <div class="rc-form-group">
              <label for="rc-window-frequency">Cleaning Frequency:</label>
              <select id="rc-window-frequency">
                <option value="">-- Select Frequency --</option>
                <option value="4-weekly">4-Weekly</option>
                <option value="8-weekly">8-Weekly</option>
              </select>
            </div>
            <div id="rc-window-additions" style="display: none;">
              <div class="rc-checkbox-group">
                <label>
                  <input type="checkbox" id="rc-conservatory" value="conservatory"> Conservatory (+£9)
                </label>
                <label>
                  <input type="checkbox" id="rc-extension" value="extension"> Extension (+£6)
                </label>
              </div>
            </div>
          `;

          const windowSize = document.getElementById('rc-window-size');
          windowSize.addEventListener('change', function() {
            const additions = document.getElementById('rc-window-additions');
            if (this.value === '2-3-bedroom-semi') {
              additions.style.display = 'block';
            } else {
              additions.style.display = 'none';
              // Uncheck additions if not applicable
              document.getElementById('rc-conservatory').checked = false;
              document.getElementById('rc-extension').checked = false;
            }
          });

        } else if (service === 'roof') {
          // Roof Cleaning Inputs
          dynamicInputs.innerHTML = `
            <div class="rc-form-group">
              <label for="rc-roof-method">Cleaning Method:</label>
              <select id="rc-roof-method">
                <option value="">-- Select Method --</option>
                <option value="scrape">Scrape and Biocide Treatment</option>
                <option value="steam">Steam Cleaning</option>
              </select>
            </div>
            <div class="rc-form-group">
              <label for="rc-roof-size">Property Size (sqm):</label>
              <input type="number" id="rc-roof-size" min="0" placeholder="Enter size in square meters">
            </div>
          `;

        } else if (service === 'render') {
          // Render Cleaning Inputs
          dynamicInputs.innerHTML = `
            <div class="rc-form-group">
              <label for="rc-render-size">Property Size:</label>
              <select id="rc-render-size">
                <option value="">-- Select Size --</option>
                <option value="small">Smaller Home</option>
                <option value="large">Larger/Multi-Storey Building</option>
              </select>
            </div>
            <div id="rc-render-access" style="display: none;">
              <div class="rc-checkbox-group">
                <label>
                  <input type="checkbox" id="rc-scaffolding" value="scaffolding"> Scaffolding or Access Equipment (+£4,000+)
                </label>
              </div>
            </div>
          `;

          const renderSize = document.getElementById('rc-render-size');
          renderSize.addEventListener('change', function() {
            const access = document.getElementById('rc-render-access');
            if (this.value === 'large') {
              access.style.display = 'block';
            } else {
              access.style.display = 'none';
              // Uncheck access if not applicable
              document.getElementById('rc-scaffolding').checked = false;
            }
          });

        } else if (service === 'driveway') {
          // Driveway Cleaning Inputs
          dynamicInputs.innerHTML = `
            <div class="rc-form-group">
              <label for="rc-driveway-size">Driveway Size (sqm):</label>
              <input type="number" id="rc-driveway-size" min="0" placeholder="Enter size in square meters">
            </div>
            <div class="rc-form-group">
              <label>Additional Services:</label>
              <div class="rc-checkbox-group">
                <label>
                  <input type="checkbox" id="rc-block-paving" value="block-paving"> Block Paving Re-sanding (+£1.50/sqm)
                </label>
              </div>
            </div>
          `;
        }
      });

      // Calculate Estimate
      calculateBtn.addEventListener('click', function() {
        const service = serviceSelect.value;
        if (!service) {
          alert('Please select a service.');
          return;
        }

        let cost = 0;

        if (service === 'window') {
          const size = document.getElementById('rc-window-size').value;
          const frequency = document.getElementById('rc-window-frequency').value;
          if (!size || !frequency) {
            alert('Please select property size and cleaning frequency.');
            return;
          }

          // Base Prices
          const windowPrices = {
            '2-bedroom': { '4-weekly': 15, '8-weekly': 20 },
            '2-3-bedroom-semi': { '4-weekly': 22, '8-weekly': 27 },
            '4-bedroom-semi': { '4-weekly': 25, '8-weekly': 30 }
          };

          cost += windowPrices[size][frequency];

          // Additions
          if (size === '2-3-bedroom-semi') {
            if (document.getElementById('rc-conservatory').checked) {
              cost += 9;
            }
            if (document.getElementById('rc-extension').checked) {
              cost += 6;
            }
          }

        } else if (service === 'roof') {
          const method = document.getElementById('rc-roof-method').value;
          const sizeInput = document.getElementById('rc-roof-size').value;
          const size = parseFloat(sizeInput);
          if (!method || isNaN(size) || size <= 0) {
            alert('Please select cleaning method and enter a valid property size.');
            return;
          }

          if (method === 'scrape') {
            cost += 900; // Base price
            if (size > 100) {
              const extraUnits = Math.ceil((size - 100) / 100);
              cost += extraUnits * 1000;
            }
          } else if (method === 'steam') {
            cost += 1500; // Starting price
            // Additional factors can be added here
          }

        } else if (service === 'render') {
          const size = document.getElementById('rc-render-size').value;
          if (!size) {
            alert('Please select property size.');
            return;
          }

          if (size === 'small') {
            cost += 850;
          } else if (size === 'large') {
            cost += 4000;
          }

          // Additions for large properties
          if (size === 'large') {
            if (document.getElementById('rc-scaffolding').checked) {
              cost += 4000; // Additional cost
            }
          }

        } else if (service === 'driveway') {
          const sizeInput = document.getElementById('rc-driveway-size').value;
          const size = parseFloat(sizeInput);
          if (isNaN(size) || size <= 0) {
            alert('Please enter a valid driveway size.');
            return;
          }

          cost += size * 4; // £4.00 per sqm

          if (document.getElementById('rc-block-paving').checked) {
            cost += size * 1.5; // Additional £1.50 per sqm
          }
        }

        // Display Result
        estimatedCost.textContent = `£${cost.toFixed(2)}`;
        resultSection.style.display = 'block';
        // Scroll to result
        resultSection.scrollIntoView({ behavior: 'smooth' });
      });

      // Contact Button Event
      contactBtn.addEventListener('click', function() {
        contactModal.style.display = 'flex';
      });

      // Close Modal Event
      closeModal.addEventListener('click', function() {
        contactModal.style.display = 'none';
      });

      // Close Modal when clicking outside the modal content
      window.addEventListener('click', function(event) {
        if (event.target === contactModal) {
          contactModal.style.display = 'none';
        }
      });

      // Handle Contact Form Submission
      contactForm.addEventListener('submit', function(event) {
        event.preventDefault();
        // TODO: Add form submission logic (e.g., send to server)
        alert('Thank you for contacting us! We will get back to you shortly.');
        contactModal.style.display = 'none';
        contactForm.reset();
      });

    })();
  </script>
</div>
