Embed

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet" />

<style>
  :root { --a:#00c48c; --ad:#009f6f; --bd:#e2e8f0; }
  .cma *{box-sizing:border-box;font-family:Poppins,sans-serif;}
  .cma{max-width:660px;margin:2rem auto;border:1px solid var(--bd);border-radius:1rem;background:#fff;padding:2rem;color:#1f2937;box-shadow:0 4px 14px rgba(0,0,0,.07);}
  .cma h1{font-size:1.45rem;font-weight:700;text-align:center;color:var(--ad);margin-bottom:1.3rem;}
  .cma h2{font-size:1.25rem;font-weight:600;text-align:center;margin-bottom:1.1rem;}

  label{display:block;font-size:.85rem;font-weight:500;margin:.8rem 0 .3rem;}
  input,select{width:100%;padding:.65rem 1rem;border:1px solid var(--bd);border-radius:.55rem;font-size:1rem;background:#fff;color:#1f2937;}
  input:focus,select:focus{border-color:var(--a);outline:none;}
  select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300c48c' viewBox='0 0 16 16'%3E%3Cpath d='M8 11 3 6h10Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:95% center;background-size:12px;}

  .checks{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;}
  .checks label{display:flex;align-items:center;gap:.4rem;padding:.55rem .65rem;border:1px solid var(--bd);border-radius:.55rem;background:#f9fafb;font-size:.8rem;cursor:pointer;}
  .checks input{margin:0;}
  .checks input:checked+span{color:var(--ad);}

  .nav{display:flex;gap:.6rem;margin-top:1.5rem;}
  .btn{flex:1;padding:.75rem;border:none;border-radius:.55rem;font-weight:600;cursor:pointer;font-size:.95rem;}
  .next{background:var(--a);color:#fff;} .next:hover{background:var(--ad);}
  .back{background:#e5e7eb;}           .back:hover{background:#d1d5db;}

  .stage{display:none;} .stage.active{display:block;}
  .result{padding:1.4rem 0;text-align:center;font-size:1.05rem;font-weight:600;color:var(--ad);}
</style>

<div class="cma" id="cma">
  <h1>Instant Home Valuation – Trinity&nbsp;Bellwoods</h1>
  <h2 id="stepTitle">Tell us about your property</h2>

  <form id="cmaForm" novalidate>
    
    <div class="stage active" data-step="0">
      <label>Street Address <input id="address" /></label>
      <label>Property Type
        <select id="type" required>
          <option value="" disabled selected>Select</option>
          <option value="att">Att/Row/Twnhouse</option>
          <option value="semi">Semi-Detached</option>
          <option value="det">Detached</option>
          <option value="duplex">Duplex</option>
        </select>
      </label>
      <label>Bedrooms (e.g. 3 or 3+1) <input id="bedrooms" required /></label>
      <label>Bathrooms <input type="number" id="bathrooms" min="1" required /></label>
      <label>Finished Sq Ft <input type="number" id="sqft" min="500" required /></label>
      <label>Parking
        <select id="parking" required>
          <option value="0">None</option><option value="1">1</option>
          <option value="1.5">1.5</option><option value="2">2+</option>
        </select>
      </label>
      <label>Finished Basement?
        <select id="basement" required><option value="no">No</option><option value="yes">Yes</option></select>
      </label>
      <div class="nav"><span></span><button type="button" class="btn next" data-next>Next</button></div>
    </div>

    
    <div class="stage" data-step="1">
      <label>Renovation Scope
        <select id="renoScope" required>
          <option value="none">Original / Cosmetic</option>
          <option value="fullgut">Full Gut (≤5 yrs)</option>
          <option value="newbuild">Brand New Build</option>
        </select>
      </label>

      <label style="margin-top:.8rem">Upgrades (last 10 yrs):</label>
      <div class="checks">
        <label><input type="checkbox" id="upKitchen"><span>Kitchen</span></label>
        <label><input type="checkbox" id="upBath"><span>Bathroom</span></label>
        <label><input type="checkbox" id="upRoof"><span>Roof</span></label>
        <label><input type="checkbox" id="upWindows"><span>Windows</span></label>
        <label><input type="checkbox" id="upHVAC"><span>HVAC</span></label>
        <label><input type="checkbox" id="upFloor"><span>Flooring</span></label>
        <label><input type="checkbox" id="upPaint"><span>Paint</span></label>
        <label><input type="checkbox" id="upLandscape"><span>Landscaping</span></label>
        <label><input type="checkbox" id="upInsul"><span>Insulation</span></label>
        <label><input type="checkbox" id="upSmart"><span>Smart-home</span></label>
      </div>

      <label>Laneway / Garden Suite
        <select id="laneway" required>
          <option value="none">None</option><option value="possible">Possible</option><option value="existing">Existing</option>
        </select>
      </label>

      <label>Separate Rental Suite?
        <select id="suite" required><option value="no">No</option><option value="yes">Yes</option></select>
      </label>

      <label>Lot Frontage (ft) <input type="number" id="frontage" step="0.01" /></label>
      <label>Lot Depth   (ft) <input type="number" id="depth"    step="0.01" /></label>

      <div class="nav">
        <button type="button" class="btn back" data-back>Back</button>
        <button type="button" class="btn next" data-next>Next</button>
      </div>
    </div>

    
    <div class="stage" data-step="2">
      <label>Your Name  <input id="name"   required /></label>
      <label>Phone      <input id="phone"  required /></label>
      <label>Email      <input type="email" id="email" required /></label>

      <small style="opacity:.7">Submit and see your estimate in 2&nbsp;seconds!</small>

      <div class="nav">
        <button type="button" class="btn back" data-back>Back</button>
        <button type="submit" class="btn next">Submit</button>
      </div>
    </div>

    
    <div class="stage" data-step="3"><div class="result" id="result"></div></div>
  </form>
</div>

<script>
(() => {
  /* ---------- step navigation ---------- */
  const stages = [...document.querySelectorAll(".stage")],
        title  = document.getElementById("stepTitle"),
        titles = ["Tell us about your property","Upgrades & features","Your contact details","Your estimate"];
  let step = 0;
  const show = (i) => { stages[step].classList.remove("active"); step = i; stages[step].classList.add("active"); title.textContent = titles[step]; };

  document.getElementById("cma").addEventListener("click", (e) => {
    if (e.target.closest("[data-next]") && step < stages.length - 1) show(step + 1);
    if (e.target.closest("[data-back]") && step > 0)               show(step - 1);
  });

  /* ---------- helpers ---------- */
  const $       = (id) => document.getElementById(id),
        chk     = (id) => $(id).checked,
        cur     = (x)  => "$" + Math.round(x).toLocaleString(),
        beds    = (v)  => { const [a=0,e=0] = v.split("+").map(Number); return { a, e }; },
        ppsf    = { att:875, semi:850, det:900, duplex:800 };

  /* ---------- on submit ---------- */
  document.getElementById("cmaForm").addEventListener("submit", (e) => {
    e.preventDefault();

    /* validation essentials */
    const type = $("type").value,
          sqft = +$("sqft").value;
    if (!ppsf[type] || !sqft) { alert("Please complete required fields."); return; }

    /* --- valuation --- */
    let est = ppsf[type] * sqft;
    const b = beds($("bedrooms").value.trim());
    est += (b.a - 3) * 15000 + b.e * 8000;
    est += (+$("bathrooms").value - 2) * 10000;

    const park = parseFloat($("parking").value);
    est += park === 1   ? 30000 :
           park === 1.5 ? 40000 :
           park >= 2    ? 50000 : 0;

    if ($("basement").value === "yes") est += 40000;

    const fr = parseFloat($("frontage").value) || 0,
          dp = parseFloat($("depth").value)    || 0;
    est += fr >= 20 ? 20000 : fr && fr < 14 ? -15000 : 0;
    est += dp >=120 ? 15000 : dp && dp < 80 ? -10000 : 0;

    const scope = $("renoScope").value;
    est += scope === "fullgut" ? 120000 :
           scope === "newbuild" ? 200000 : 0;

    const upgradeMap = {
      upKitchen:   35000, upBath:20000, upRoof:10000, upWindows:8000, upHVAC:7000,
      upFloor:     10000, upPaint:4000, upLandscape:12000, upInsul:6000, upSmart:8000
    };
    const selectedUps = [];
    Object.keys(upgradeMap).forEach((id) => {
      if (chk(id)) { est += upgradeMap[id]; selectedUps.push(id.replace("up", "")); }
    });

    if ($("suite").value === "yes") est += 50000;
    const lane = $("laneway").value;
    est += lane === "possible" ? 30000 :
           lane === "existing" ? 70000 : 0;

    const min = est - 50000,
          max = est + 50000;

    /* --- show result --- */
    show(3);
    const box = $("result");
    box.textContent = "Calculating …";
    setTimeout(() => {
      box.innerHTML = `
        Estimated value:<br>
        <span style=\"color:var(--ad)\">${cur(min)} – ${cur(max)}</span><br>
        Check your inbox for the full breakdown!
      `;
    }, 1400);

    /* --- payload for Formspree --- */
    fetch("https://formspree.io/f/xanjlnre", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        date:      new Date().toISOString(),
        /* contact */
        name:      $("name").value,
        phone:     $("phone").value,
        email:     $("email").value,
        /* property basics */
        address:   $("address").value,
        type, bedrooms: $("bedrooms").value, bathrooms: $("bathrooms").value,
        sqft, parking: $("parking").value, basement: $("basement").value,
        /* reno + upgrades */
        renoScope: scope,
        upgrades:  selectedUps.join(", "),
        /* lot & suites */
        frontage:  $("frontage").value,
        depth:     $("depth").value,
        laneway:   lane,
        suite:     $("suite").value,
        /* estimate */
        estimateRange: `${cur(min)} – ${cur(max)}`
      })
    }).catch(() => {});
  });
})();
</script>

The Greenheart Group

Chase Brettoner is a trusted real estate professional specializing in high-end homes, luxury condos, and smart investments across Toronto and Mississauga. With deep market knowledge and a client-first approach, Chase helps families, end users, and investors navigate every step of the buying and selling process — from downtown condos to upscale family homes. Known for strategy, service, and results.