Text + image

<h2 style="white-space:pre-line">Instant Cleaning Estimate Calculator</h2>
<p>This section allows you to receive a customized estimate for your cleaning service in just a few steps. Select your property type, enter your home’s approximate size, and choose the number of bedrooms and bathrooms. Next, select the type of cleaning and the number of cleaners required.<br />Our calculator will instantly generate a transparent and accurate estimate based on the details you provide. Once you review your price, you can continue to secure your booking online and submit your deposit.<br />Designed for convenience, speed, and clarity — no calls or emails required, and no hidden fees. Just a simple way to plan your cleaning with confidence.</p>

Embed

<style>
  :root{
    --hudson-blue:#0b3a5a;
    --hudson-blue-2:#0f4c75;
    --hudson-green:#2fbf71;
    --hudson-green-dark:#24995a;
    --hudson-soft:#f5fbff;
    --hudson-border:#d7e8f6;
    --hudson-text:#103247;
    --hudson-muted:#4b6a80;
  }

  /* FULL-WIDTH SECTION (Durable embed friendly) */
  .hudson-section{
    width:100%;
    padding: 44px 16px;
    background: linear-gradient(135deg, #ffffff 0%, var(--hudson-soft) 100%);
    border-top: 1px solid var(--hudson-border);
    border-bottom: 1px solid var(--hudson-border);
    box-sizing:border-box;
  }

  /* Inner container to look premium on big screens */
  .hudson-container{
    max-width: 1100px;
    margin: 0 auto;
  }

  .hudson-card{
    padding: 26px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid var(--hudson-border);
    box-shadow: 0 22px 46px rgba(15, 76, 117, 0.10);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--hudson-text);
  }

  .hudson-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--hudson-border);
  }

  .hudson-title{
    margin:0 0 6px;
    font-size: 1.55rem;
    color: var(--hudson-blue);
    letter-spacing:0.2px;
  }

  .hudson-sub{
    margin:0;
    font-size:0.95rem;
    color: var(--hudson-muted);
    line-height:1.35;
  }

  .hudson-logo{
    width:86px;
    height:86px;
    border-radius:18px;
    overflow:hidden;
    flex-shrink:0;
    box-shadow:0 10px 22px rgba(0,0,0,0.10);
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--hudson-border);
  }

  .hudson-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
    padding: 8px;
    box-sizing:border-box;
  }

  .hudson-grid{
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
  }

  .hudson-field{
    grid-column: span 2;
  }
  .hudson-field.wide{ grid-column: span 3; }
  .hudson-field.full{ grid-column: 1 / -1; }

  .hudson-field label{
    display:block;
    font-size:0.88rem;
    font-weight: 750;
    color: var(--hudson-blue-2);
    margin-bottom:6px;
  }

  .hudson-input,
  .hudson-select,
  .hudson-textarea{
    width:100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #bcd4e6;
    font-size: 0.95rem;
    box-sizing: border-box;
    background:#fff;
    outline:none;
  }

  .hudson-input:focus,
  .hudson-select:focus,
  .hudson-textarea:focus{
    border-color: var(--hudson-blue-2);
    box-shadow: 0 0 0 3px rgba(15, 76, 117, 0.14);
  }

  .hudson-btn{
    width:100%;
    padding: 13px 16px;
    margin-top: 14px;
    border:none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--hudson-green) 0%, #27a860 100%);
    color:#fff;
    font-weight: 800;
    font-size: 1rem;
    cursor:pointer;
    box-shadow: 0 12px 26px rgba(47,191,113,0.22);
  }
  .hudson-btn:hover{ filter:brightness(0.98); transform: translateY(-1px); }

  .hudson-estimate-box{
    display:none;
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #eef8ff;
    border: 1px solid var(--hudson-border);
    font-size: 0.95rem;
    color: var(--hudson-muted);
  }

  .hudson-estimate-box strong{ color: var(--hudson-text); }

  .hudson-booking-wrapper{
    display:none;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--hudson-border);
  }

  .hudson-textarea{
    min-height: 96px;
    resize: vertical;
  }

  /* REFERRAL */
  .hudson-referral-box{
    margin-top: 20px;
    padding: 18px 20px;
    border-radius: 18px;
    background:#ffffff;
    border: 1px dashed var(--hudson-border);
    box-shadow: 0 10px 22px rgba(0,0,0,0.03);
  }

  .hudson-referral-header{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom: 8px;
  }

  .hudson-referral-icon{
    width:32px;
    height:32px;
    border-radius: 999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: var(--hudson-soft);
    font-size: 1.15rem;
    border: 1px solid var(--hudson-border);
  }

  .hudson-referral-title{
    margin:0;
    font-size: 1rem;
    font-weight: 900;
    color: var(--hudson-text);
  }

  .hudson-referral-text{
    margin:0 0 10px;
    font-size: 0.9rem;
    color: var(--hudson-muted);
    line-height:1.35;
  }

  .hudson-referral-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
  }

  .hudson-referral-input{
    flex: 1 1 240px;
    min-width:0;
  }

  .hudson-referral-input input{
    width:100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #bcd4e6;
    font-size: 0.95rem;
    box-sizing:border-box;
  }

  .hudson-referral-btn{
    flex: 0 0 auto;
    padding: 10px 14px;
    border-radius: 999px;
    border:none;
    background: var(--hudson-green);
    color:#fff;
    font-size: 0.95rem;
    font-weight: 850;
    cursor:pointer;
    box-shadow: 0 10px 22px rgba(47,191,113,0.20);
    white-space: nowrap;
  }
  .hudson-referral-btn:hover{ background: var(--hudson-green-dark); }

  .hudson-referral-note{
    margin-top: 8px;
    font-size: 0.82rem;
    color: var(--hudson-muted);
  }

  .hudson-referral-msg{
    margin-top: 10px;
    font-size: 0.85rem;
  }
  .hudson-referral-msg.success{ color:#217346; }
  .hudson-referral-msg.error{ color:#b3261e; }

  @media (max-width: 980px){
    .hudson-grid{ grid-template-columns: repeat(2, 1fr); }
    .hudson-field, .hudson-field.wide{ grid-column: span 1; }
    .hudson-field.full{ grid-column: 1 / -1; }
    .hudson-header{ align-items:flex-start; }
  }
</style>

<section class="hudson-section">
  <div class="hudson-container">
    <div class="hudson-card">

      
      <div class="hudson-header">
        <div>
          <h2 class="hudson-title">Hudson Pro Instant Estimate</h2>
          <p class="hudson-sub">
            Choose property type, see your estimate, apply a referral discount, and complete your booking.
          </p>
        </div>
        <div class="hudson-logo">
          <img
            src="https://cdn.durable.co/logos/1bamP3CAuFzbAMLH4WmcLKq4CVybOsCIgJB4lDNGjkP36EZqMRLIEJ9wLDXhenEp.png"
            alt="Hudson Pro Cleaning Services Logo"
            loading="lazy"
          >
        </div>
      </div>

      
      <div class="hudson-grid">
        <div class="hudson-field wide">
          <label for="hudson_propertyType">Property type</label>
          <select id="hudson_propertyType" class="hudson-select">
            <option value="residential">Home / Residential</option>
            <option value="commercial">Commercial space</option>
          </select>
        </div>

        <div class="hudson-field wide">
          <label for="hudson_sqft">Size (sq ft)</label>
          <input type="number" id="hudson_sqft" class="hudson-input" placeholder="e.g. 1500" min="0">
        </div>

        <div class="hudson-field">
          <label for="hudson_beds">Bedrooms (residential only)</label>
          <input type="number" id="hudson_beds" class="hudson-input" placeholder="e.g. 3" min="0">
        </div>

        <div class="hudson-field">
          <label for="hudson_baths">Bathrooms (residential only)</label>
          <input type="number" id="hudson_baths" class="hudson-input" placeholder="e.g. 2" min="0">
        </div>

        <div class="hudson-field wide">
          <label for="hudson_cleanType">Cleaning type</label>
          <select id="hudson_cleanType" class="hudson-select">
            <option value="1">Standard</option>
            <option value="1.5">Deep cleaning</option>
            <option value="1.8">Move-in / Move-out</option>
            <option value="2.2">Post-construction</option>
          </select>
        </div>

        <div class="hudson-field wide">
          <label for="hudson_cleaners">Number of cleaners</label>
          <select id="hudson_cleaners" class="hudson-select">
            <option value="1">1 cleaner</option>
            <option value="2" selected>2 cleaners</option>
            <option value="3">3 cleaners</option>
          </select>
        </div>
      </div>

      <button class="hudson-btn" type="button" onclick="calculateHudsonEstimate()">
        Get My Estimate
      </button>

      
      <div id="hudson_estimate_box" class="hudson-estimate-box"></div>

      
      <div class="hudson-referral-box">
        <div class="hudson-referral-header">
          <div class="hudson-referral-icon">💸</div>
          <h3 class="hudson-referral-title">Referral discount – 10% off</h3>
        </div>
        <p class="hudson-referral-text">
          Enter the email of the person who referred you to Hudson Pro and unlock 10% off your current estimate.
        </p>

        <div class="hudson-referral-row">
          <div class="hudson-referral-input">
            <input type="email" id="hudson_referral_email" placeholder="Referrer's email">
          </div>
          <button type="button" class="hudson-referral-btn" onclick="applyHudsonReferralDiscount()">
            Apply 10% discount
          </button>
        </div>

        <div class="hudson-referral-note">
          The discount applies to your current estimate and will be included in your booking request.
        </div>

        <div id="hudson_referral_message" class="hudson-referral-msg" aria-live="polite"></div>
      </div>

      
      <div id="hudson_booking_wrapper" class="hudson-booking-wrapper">
        <h2 class="hudson-title" style="font-size:1.25rem;">Book Your Cleaning</h2>
        <p class="hudson-sub" style="margin-bottom:12px;">
          Review your estimate above, apply your referral discount, and complete your details.
          When you send the request, a secure Stripe page will open so you can authorize your card.
        </p>

        
        <form id="hudson_booking_form" action="https://formspree.io/f/mwpjgzoa" method="POST">
          
          <div class="hudson-field full" style="margin-bottom:10px;">
            <label>Your estimate</label>
            <input id="hudson_estimateSummaryVisible" name="estimate_summary" class="hudson-input" readonly>
          </div>

          
          <input type="hidden" id="hudson_estimatePrice"    name="estimate_price">
          <input type="hidden" id="hudson_estimateHours"    name="estimate_hours">
          <input type="hidden" id="hudson_estimateHomeTime" name="estimate_home_time">
          <input type="hidden" id="hudson_estimateType"     name="property_type">

          
          <input type="hidden" id="hudson_referral_hidden" name="referral_email">

          <div class="hudson-grid">
            <div class="hudson-field wide">
              <label for="hudson_bookName">Full name</label>
              <input id="hudson_bookName" name="name" class="hudson-input" required>
            </div>
            <div class="hudson-field wide">
              <label for="hudson_bookPhone">Phone</label>
              <input id="hudson_bookPhone" name="phone" class="hudson-input" required>
            </div>
            <div class="hudson-field wide">
              <label for="hudson_bookEmail">Email</label>
              <input id="hudson_bookEmail" name="email" class="hudson-input">
            </div>
            <div class="hudson-field wide">
              <label for="hudson_bookAddress">Address</label>
              <input id="hudson_bookAddress" name="address" class="hudson-input" required>
            </div>
            <div class="hudson-field">
              <label for="hudson_bookZip">ZIP code</label>
              <input id="hudson_bookZip" name="zip" class="hudson-input" required>
            </div>
            <div class="hudson-field">
              <label for="hudson_bookDate">Preferred date</label>
              <input id="hudson_bookDate" type="date" name="preferred_date" class="hudson-input">
            </div>

            <div class="hudson-field full">
              <label for="hudson_bookNotes">Cleaning details & notes</label>
              <textarea id="hudson_bookNotes" name="notes" class="hudson-textarea"
                placeholder="Tell us about pets, access, parking, special requests, rooms to focus on, etc."></textarea>
            </div>
          </div>

          
          <input type="hidden" name="_subject" value="New Hudson Pro booking request">

          
          <button
            class="hudson-btn"
            type="submit"
            onclick="window.open('https://book.stripe.com/aFa14nb2Eh2NefVexjg3600','_blank')"
          >
            Send Booking & Authorize Card
          </button>
        </form>
      </div>

    </div>
  </div>
</section>

<script>
  function calculateHudsonEstimate() {
    const propertyType = document.getElementById("hudson_propertyType").value;
    const sqft   = Number(document.getElementById("hudson_sqft").value);
    const beds   = Number(document.getElementById("hudson_beds").value || 0);
    const baths  = Number(document.getElementById("hudson_baths").value || 0);
    const cleanType = Number(document.getElementById("hudson_cleanType").value);
    const cleaners  = Number(document.getElementById("hudson_cleaners").value) || 2;

    if (!sqft || sqft <= 0) {
      alert("Please enter the size in square feet.");
      return;
    }

    let totalHours = 0;
    let price = 0;
    let homeTime = 0;

    const cleanTypeSelect = document.getElementById("hudson_cleanType");
    const cleanTypeLabel = cleanTypeSelect.options[cleanTypeSelect.selectedIndex].text;

    if (propertyType === "commercial") {
      // COMMERCIAL:
      // Standard → sq ft × 0.15
      // Deep / Move / Post → sq ft × 0.25
      const isStandard = (cleanType === 1);
      const ratePerSqft = isStandard ? 0.15 : 0.25;
      price = sqft * ratePerSqft;

      const ratePerHour = 40;
      totalHours = price / ratePerHour;
      homeTime = totalHours / cleaners;
    } else {
      // RESIDENTIAL:
      let baseHours = 0;
      if (sqft <= 700)       baseHours = 1.5;
      else if (sqft <= 1200) baseHours = 2.0;
      else if (sqft <= 1800) baseHours = 2.5;
      else if (sqft <= 2500) baseHours = 3.0;
      else                   baseHours = 4.0;

      const extraRooms = (beds * 0.5) + (baths * 0.5);
      totalHours = (baseHours + extraRooms) * cleanType;

      const ratePerHour = 40;
      price = totalHours * ratePerHour;
      homeTime = totalHours / cleaners;
    }

    const summaryText =
      `$${price.toFixed(2)} · ` +
      `${totalHours.toFixed(2)} person-hours · ` +
      `${homeTime.toFixed(2)} hrs on-site (${cleaners} cleaner(s)) · ` +
      `${sqft} sq ft` +
      (propertyType === "residential" ? ` · ${beds} bed / ${baths} bath` : "") +
      ` · ${cleanTypeLabel} · ${propertyType.toUpperCase()}`;

    const estimateBox = document.getElementById("hudson_estimate_box");
    estimateBox.style.display = "block";
    estimateBox.innerHTML = `
      <strong>Estimated price:</strong> $${price.toFixed(2)}<br>
      <strong>Total person-hours:</strong> ${totalHours.toFixed(2)}<br>
      <strong>Time on-site (${cleaners} cleaner(s)):</strong> ${homeTime.toFixed(2)} hours<br>
      <strong>Details:</strong> ${summaryText}
    `;

    // Fill form fields
    document.getElementById("hudson_estimateSummaryVisible").value = summaryText;
    document.getElementById("hudson_estimatePrice").value    = price.toFixed(2);
    document.getElementById("hudson_estimateHours").value    = totalHours.toFixed(2);
    document.getElementById("hudson_estimateHomeTime").value = homeTime.toFixed(2);
    document.getElementById("hudson_estimateType").value     = propertyType;

    // Reset referral applied on recalculation
    hudsonReferralApplied = false;
    const priceField = document.getElementById("hudson_estimatePrice");
    priceField.dataset.originalPrice = price.toFixed(2);
    const msgBox = document.getElementById("hudson_referral_message");
    if (msgBox) {
      msgBox.className = "hudson-referral-msg";
      msgBox.textContent = "";
    }

    // Show booking form
    document.getElementById("hudson_booking_wrapper").style.display = "block";
  }

  let hudsonReferralApplied = false;

  function applyHudsonReferralDiscount() {
    const emailInput = document.getElementById("hudson_referral_email");
    const msgBox = document.getElementById("hudson_referral_message");
    const email = (emailInput.value || "").trim();

    msgBox.className = "hudson-referral-msg";
    msgBox.textContent = "";

    if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      msgBox.textContent = "Please enter a valid referral email.";
      msgBox.classList.add("error");
      return;
    }

    const priceField = document.getElementById("hudson_estimatePrice");
    const estBox = document.getElementById("hudson_estimate_box");

    if (!priceField || !priceField.value) {
      msgBox.textContent = "Please generate your cleaning estimate first.";
      msgBox.classList.add("error");
      return;
    }

    const originalPrice = priceField.dataset.originalPrice
      ? parseFloat(priceField.dataset.originalPrice)
      : parseFloat(priceField.value);

    if (isNaN(originalPrice) || originalPrice <= 0) {
      msgBox.textContent = "We could not read your current estimate. Please calculate it again.";
      msgBox.classList.add("error");
      return;
    }

    priceField.dataset.originalPrice = originalPrice.toFixed(2);

    if (hudsonReferralApplied) {
      msgBox.textContent = "Referral discount has already been applied to this estimate.";
      msgBox.classList.add("error");
      return;
    }

    const discountedPrice = originalPrice * 0.90; // 10% off
    priceField.value = discountedPrice.toFixed(2);

    // Update summary
    const summaryField = document.getElementById("hudson_estimateSummaryVisible");
    if (summaryField && summaryField.value) {
      summaryField.value =
        summaryField.value +
        " · Referral discount applied (10% off – new total $" +
        discountedPrice.toFixed(2) +
        ")";
    }

    // Update estimate box
    if (estBox) {
      estBox.innerHTML =
        estBox.innerHTML +
        "<br><strong>Referral discount:</strong> 10% off applied – new estimated price: $" +
        discountedPrice.toFixed(2);
    }

    // Save referral email in form
    const hiddenReferral = document.getElementById("hudson_referral_hidden");
    if (hiddenReferral) hiddenReferral.value = email;

    msgBox.textContent = "Referral applied! Your estimate now includes a 10% discount.";
    msgBox.classList.add("success");
    hudsonReferralApplied = true;
  }
</script>