{
  "content": [
    {
      "id": "ef8051b0",
      "settings": {
        "padding": {
          "unit": "px",
          "top": "60",
          "right": "20",
          "bottom": "70",
          "left": "20",
          "isLinked": false
        },
        "padding_mobile": {
          "unit": "px",
          "top": "30",
          "right": "15",
          "bottom": "35",
          "left": "15",
          "isLinked": false
        },
        "content_width": {
          "unit": "px",
          "size": 1000
        },
        "background_background": "classic",
        "background_color": "#f5ede0"
      },
      "elements": [
        {
          "id": "5caf5a11",
          "settings": {
            "_column_size": 100,
            "_inline_size": null
          },
          "elements": [
            {
              "id": "7c1432fa",
              "settings": {
                "html": "\n<style>\n.bc-wrap,.bc-wrap *{box-sizing:border-box;}\n.bc-wrap{max-width:900px;margin:0 auto;font-family:Arial,Helvetica,sans-serif;color:#2b2418;padding:20px;}\n.bc-header{text-align:center;margin-bottom:40px;}\n.bc-header h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(24px,4vw,32px);font-weight:400;margin:0 0 10px;}\n.bc-header p{color:#6b625a;font-size:14.5px;margin:0;}\n\n.bc-step{background:#fff;border:1px solid #e2d5c0;border-radius:12px;padding:26px 28px;margin-bottom:22px;}\n.bc-step-label{display:flex;align-items:center;gap:10px;margin-bottom:18px;}\n.bc-step-num{width:26px;height:26px;border-radius:50%;background:#c1622f;color:#fff;font-size:13px;\n  font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}\n.bc-step-title{font-weight:700;font-size:15px;}\n\n.bc-cardrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}\n.bc-card{border:1.5px solid #e2d5c0;border-radius:8px;padding:16px;cursor:pointer;transition:all .15s ease;}\n.bc-card:hover{border-color:#c1622f88;}\n.bc-card.selected{border-color:#c1622f;background:#c1622f12;}\n.bc-card-title{font-weight:700;font-size:14px;margin-bottom:3px;}\n.bc-card-sub{color:#6b625a;font-size:12px;line-height:1.4;}\n\n.bc-field{margin-top:16px;}\n.bc-field label{display:block;font-size:12px;font-weight:700;color:#6b625a;text-transform:uppercase;\n  letter-spacing:.04em;margin-bottom:8px;}\n.bc-field input[type=number]{width:100%;padding:11px 13px;border:1px solid #e2d5c0;border-radius:8px;\n  font-family:inherit;font-size:14.5px;}\n\n.bc-addon-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;\n  border-bottom:1px solid #e2d5c0;flex-wrap:wrap;}\n.bc-addon-row:last-child{border-bottom:none;}\n.bc-addon-info{flex:1;min-width:180px;}\n.bc-addon-title{font-weight:700;font-size:14px;margin-bottom:2px;}\n.bc-addon-sub{color:#6b625a;font-size:12px;}\n.bc-checkbox{width:22px;height:22px;accent-color:#c1622f;cursor:pointer;flex-shrink:0;}\n.bc-stepper{display:flex;align-items:center;gap:0;border:1px solid #e2d5c0;border-radius:7px;overflow:hidden;flex-shrink:0;}\n.bc-stepper button{width:32px;height:32px;border:none;background:#f5ede0;color:#c1622f;font-size:16px;\n  font-weight:700;cursor:pointer;}\n.bc-stepper button:hover{background:#c1622f22;}\n.bc-stepper .bc-stepper-val{width:34px;text-align:center;font-weight:700;font-size:13.5px;}\n\n.bc-calc-btn{width:100%;padding:16px;background:#c1622f;color:#fff;border:none;border-radius:8px;\n  font-weight:700;font-size:15.5px;cursor:pointer;margin-top:6px;}\n.bc-calc-btn:hover{opacity:.92;}\n\n.bc-result{background:#2b2418;color:#fff;border-radius:12px;padding:32px 28px;text-align:center;margin-top:22px;}\n.bc-result-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#c9bda8;margin-bottom:8px;}\n.bc-result-range{font-family:Georgia,'Times New Roman',serif;font-size:clamp(28px,5vw,40px);color:#c1622f;margin:0 0 14px;}\n.bc-result-note{color:#c9bda8;font-size:12.5px;line-height:1.6;max-width:520px;margin:0 auto 22px;}\n.bc-result-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}\n.bc-btn{display:inline-flex;align-items:center;padding:12px 22px;border-radius:7px;font-weight:700;\n  font-size:13.5px;text-decoration:none;white-space:nowrap;}\n.bc-btn-primary{background:#c1622f;color:#fff;}\n.bc-btn-whatsapp{background:#25D366;color:#fff;}\n\n.bc-hidden{display:none !important;}\n@media(max-width:600px){\n  .bc-step{padding:20px 18px;}\n  .bc-cardrow{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));}\n}\n</style>\n\n<div class=\"bc-wrap\">\n  <div class=\"bc-header\">\n    <h1>Get an instant estimate for your space.</h1>\n    <p>Answer a few quick questions and see a realistic cost range in seconds - no sign-up required.</p>\n  </div>\n\n  <!-- Step 1: Property Type -->\n  <div class=\"bc-step\">\n    <div class=\"bc-step-label\"><div class=\"bc-step-num\">1</div><div class=\"bc-step-title\">Property Type</div></div>\n    <div class=\"bc-cardrow\" id=\"bcPropertyType\"></div>\n  </div>\n\n  <!-- Step 2a: Residential config -->\n  <div class=\"bc-step\" id=\"bcResidentialStep\">\n    <div class=\"bc-step-label\"><div class=\"bc-step-num\">2</div><div class=\"bc-step-title\">Home Configuration</div></div>\n    <div class=\"bc-cardrow\" id=\"bcHomeConfig\"></div>\n  </div>\n\n  <!-- Step 2b: Commercial config -->\n  <div class=\"bc-step bc-hidden\" id=\"bcCommercialStep\">\n    <div class=\"bc-step-label\"><div class=\"bc-step-num\">2</div><div class=\"bc-step-title\">Space Type &amp; Size</div></div>\n    <div class=\"bc-cardrow\" id=\"bcSpaceType\"></div>\n    <div class=\"bc-field\">\n      <label>Carpet Area (sq. ft.)</label>\n      <input type=\"number\" id=\"bcCarpetArea\" min=\"0\" placeholder=\"e.g. 1200\">\n    </div>\n  </div>\n\n  <!-- Step 3: Package Tier -->\n  <div class=\"bc-step\">\n    <div class=\"bc-step-label\"><div class=\"bc-step-num\">3</div><div class=\"bc-step-title\">Package Tier</div></div>\n    <div class=\"bc-cardrow\" id=\"bcTier\"></div>\n  </div>\n\n  <!-- Step 4: Add-ons -->\n  <div class=\"bc-step\">\n    <div class=\"bc-step-label\"><div class=\"bc-step-num\">4</div><div class=\"bc-step-title\">Add-ons</div></div>\n    <div id=\"bcAddons\"></div>\n  </div>\n\n  <button class=\"bc-calc-btn\" id=\"bcCalcBtn\">Calculate My Estimate</button>\n\n  <div class=\"bc-result\" id=\"bcResult\">\n    <div class=\"bc-result-label\">Estimated Budget Range</div>\n    <div class=\"bc-result-range\" id=\"bcRangeText\">&#8377;0 &ndash; &#8377;0</div>\n    <p class=\"bc-result-note\">This is an indicative estimate based on standard specifications, before our current up-to-15% offer. Your exact quote may vary depending on site condition, material choices and final scope.</p>\n    <div class=\"bc-result-btns\">\n      <a class=\"bc-btn bc-btn-primary\" href=\"https://web1.integraff.com/enquiry.html\" target=\"_blank\">Get My Exact Quote</a>\n      <a class=\"bc-btn bc-btn-whatsapp\" id=\"bcWhatsappBtn\" href=\"#\" target=\"_blank\">WhatsApp This Estimate</a>\n    </div>\n  </div>\n</div>\n\n<script>\n(function(){\n  // =================================================================\n  // ALL PRICES AND OPTIONS LIVE HERE. Edit numbers to update pricing,\n  // or add a new entry to any array to add a new option (e.g. a new\n  // BHK size, a new space type, a new add-on). See the notes above\n  // each section for exactly what to add for each type of change.\n  // =================================================================\n\n  // Residential home sizes. Each has a MIN and MAX total budget per\n  // package tier (Essential / Premium / Luxury), in plain rupees.\n  // To add a new size (e.g. \"5 BHK\"), copy one line and edit it -\n  // it will automatically appear as a new selectable card.\n  const HOME_CONFIGS = [\n    { id: '1bhk', label: '1 BHK', essential: [300000, 400000], premium: [500000, 650000], luxury: [800000, 1100000] },\n    { id: '2bhk', label: '2 BHK', essential: [500000, 650000], premium: [750000, 950000], luxury: [1200000, 1600000] },\n    { id: '3bhk', label: '3 BHK', essential: [700000, 900000], premium: [1000000, 1300000], luxury: [1600000, 2200000] },\n    { id: '4bhk', label: '4 BHK+', essential: [900000, 1200000], premium: [1400000, 1800000], luxury: [2200000, 3000000] }\n  ];\n\n  // Commercial space types. Each has a MIN and MAX rate per square\n  // foot per package tier. Final cost = rate x carpet area entered.\n  // To add a new space type, copy one line and edit it.\n  const SPACE_TYPES = [\n    { id: 'office', label: 'Office', essential: [800, 1000], premium: [1200, 1500], luxury: [1800, 2500] },\n    { id: 'retail', label: 'Retail / Showroom', essential: [900, 1100], premium: [1400, 1700], luxury: [2000, 2800] },\n    { id: 'restaurant', label: 'Restaurant / Caf\\u00e9', essential: [1000, 1300], premium: [1600, 2000], luxury: [2500, 3500] }\n  ];\n\n  // Package tier descriptions (shown as subtitle text on each card)\n  const TIERS = [\n    { id: 'essential', label: 'Essential', sub: 'Laminate finishes, standard fittings' },\n    { id: 'premium', label: 'Premium', sub: 'Better hardware, richer finishes' },\n    { id: 'luxury', label: 'Luxury', sub: 'Premium materials, full customisation' }\n  ];\n\n  // Add-ons. \"type: flat\" = one fixed price added if switched on.\n  // \"type: stepper\" = price x quantity, with a +/- counter.\n  // To add a new add-on, copy one block and edit it - it appears\n  // automatically in the Add-ons section.\n  const ADDONS = [\n    { id: 'kitchen', type: 'flat', label: 'Modular Kitchen', sub: 'Cabinets & storage, customised', price: 150000 },\n    { id: 'wardrobes', type: 'stepper', label: 'Wardrobes', sub: '\\u20b935,000 each, approx.', price: 35000 },\n    { id: 'ceiling', type: 'stepper', label: 'False Ceiling', sub: '\\u20b918,000 per room, approx.', price: 18000 },\n    { id: 'painting', type: 'flat', label: 'Full Home Painting', sub: 'Interior walls, all rooms', price: 40000 },\n    { id: 'bathroom', type: 'stepper', label: 'Bathroom Renovation', sub: '\\u20b980,000 per bathroom, approx.', price: 80000 }\n  ];\n\n  const WHATSAPP_NUMBER = '919831060818'; // used for the \"WhatsApp This Estimate\" button\n\n  // ---------------- State ----------------\n  let propertyType = 'residential';\n  let selectedHomeConfig = null;\n  let selectedSpaceType = null;\n  let selectedTier = null;\n  let addonState = {};\n  ADDONS.forEach(a => { addonState[a.id] = a.type === 'flat' ? false : 0; });\n\n  function fmt(n){ return '\\u20b9' + Math.round(n).toLocaleString('en-IN'); }\n\n  // ---------------- Render: Property Type ----------------\n  const propEl = document.getElementById('bcPropertyType');\n  const PROPERTY_TYPES = [\n    { id: 'residential', label: 'Residential', sub: 'Flat / Independent Home' },\n    { id: 'commercial', label: 'Commercial', sub: 'Office / Retail / Restaurant' }\n  ];\n  propEl.innerHTML = PROPERTY_TYPES.map(p => `\n    <div class=\"bc-card ${p.id===propertyType?'selected':''}\" data-id=\"${p.id}\">\n      <div class=\"bc-card-title\">${p.label}</div>\n      <div class=\"bc-card-sub\">${p.sub}</div>\n    </div>\n  `).join('');\n  propEl.querySelectorAll('.bc-card').forEach(card => {\n    card.addEventListener('click', () => {\n      propertyType = card.dataset.id;\n      propEl.querySelectorAll('.bc-card').forEach(c => c.classList.toggle('selected', c===card));\n      document.getElementById('bcResidentialStep').classList.toggle('bc-hidden', propertyType!=='residential');\n      document.getElementById('bcCommercialStep').classList.toggle('bc-hidden', propertyType!=='commercial');\n    });\n  });\n  document.getElementById('bcCommercialStep').classList.add('bc-hidden');\n\n  // ---------------- Render: Home Configuration ----------------\n  const homeEl = document.getElementById('bcHomeConfig');\n  homeEl.innerHTML = HOME_CONFIGS.map(h => `<div class=\"bc-card\" data-id=\"${h.id}\"><div class=\"bc-card-title\">${h.label}</div></div>`).join('');\n  homeEl.querySelectorAll('.bc-card').forEach(card => {\n    card.addEventListener('click', () => {\n      selectedHomeConfig = card.dataset.id;\n      homeEl.querySelectorAll('.bc-card').forEach(c => c.classList.toggle('selected', c===card));\n    });\n  });\n\n  // ---------------- Render: Space Type ----------------\n  const spaceEl = document.getElementById('bcSpaceType');\n  spaceEl.innerHTML = SPACE_TYPES.map(s => `<div class=\"bc-card\" data-id=\"${s.id}\"><div class=\"bc-card-title\">${s.label}</div></div>`).join('');\n  spaceEl.querySelectorAll('.bc-card').forEach(card => {\n    card.addEventListener('click', () => {\n      selectedSpaceType = card.dataset.id;\n      spaceEl.querySelectorAll('.bc-card').forEach(c => c.classList.toggle('selected', c===card));\n    });\n  });\n\n  // ---------------- Render: Package Tier ----------------\n  const tierEl = document.getElementById('bcTier');\n  tierEl.innerHTML = TIERS.map(t => `\n    <div class=\"bc-card\" data-id=\"${t.id}\">\n      <div class=\"bc-card-title\">${t.label}</div>\n      <div class=\"bc-card-sub\">${t.sub}</div>\n    </div>\n  `).join('');\n  tierEl.querySelectorAll('.bc-card').forEach(card => {\n    card.addEventListener('click', () => {\n      selectedTier = card.dataset.id;\n      tierEl.querySelectorAll('.bc-card').forEach(c => c.classList.toggle('selected', c===card));\n    });\n  });\n\n  // ---------------- Render: Add-ons ----------------\n  const addonsEl = document.getElementById('bcAddons');\n  addonsEl.innerHTML = ADDONS.map(a => {\n    if(a.type === 'flat'){\n      return `\n        <div class=\"bc-addon-row\">\n          <div class=\"bc-addon-info\"><div class=\"bc-addon-title\">${a.label}</div><div class=\"bc-addon-sub\">${a.sub}</div></div>\n          <input type=\"checkbox\" class=\"bc-checkbox\" data-id=\"${a.id}\">\n        </div>`;\n    }\n    return `\n      <div class=\"bc-addon-row\">\n        <div class=\"bc-addon-info\"><div class=\"bc-addon-title\">${a.label}</div><div class=\"bc-addon-sub\">${a.sub}</div></div>\n        <div class=\"bc-stepper\" data-id=\"${a.id}\">\n          <button type=\"button\" class=\"bc-step-minus\">&minus;</button>\n          <div class=\"bc-stepper-val\">0</div>\n          <button type=\"button\" class=\"bc-step-plus\">+</button>\n        </div>\n      </div>`;\n  }).join('');\n\n  addonsEl.querySelectorAll('input.bc-checkbox').forEach(cb => {\n    cb.addEventListener('change', () => { addonState[cb.dataset.id] = cb.checked; });\n  });\n  addonsEl.querySelectorAll('.bc-stepper').forEach(stepper => {\n    const id = stepper.dataset.id;\n    const valEl = stepper.querySelector('.bc-stepper-val');\n    stepper.querySelector('.bc-step-minus').addEventListener('click', () => {\n      addonState[id] = Math.max(0, addonState[id]-1);\n      valEl.textContent = addonState[id];\n    });\n    stepper.querySelector('.bc-step-plus').addEventListener('click', () => {\n      addonState[id] = addonState[id]+1;\n      valEl.textContent = addonState[id];\n    });\n  });\n\n  // ---------------- Calculate ----------------\n  document.getElementById('bcCalcBtn').addEventListener('click', () => {\n    let min = 0, max = 0;\n\n    if(propertyType === 'residential'){\n      if(!selectedHomeConfig || !selectedTier){ alert('Please select your home configuration and package tier.'); return; }\n      const cfg = HOME_CONFIGS.find(h => h.id === selectedHomeConfig);\n      const range = cfg[selectedTier];\n      min += range[0]; max += range[1];\n    } else {\n      if(!selectedSpaceType || !selectedTier){ alert('Please select your space type and package tier.'); return; }\n      const area = parseFloat(document.getElementById('bcCarpetArea').value) || 0;\n      if(area <= 0){ alert('Please enter your carpet area.'); return; }\n      const sp = SPACE_TYPES.find(s => s.id === selectedSpaceType);\n      const rate = sp[selectedTier];\n      min += rate[0] * area; max += rate[1] * area;\n    }\n\n    ADDONS.forEach(a => {\n      if(a.type === 'flat' && addonState[a.id]){ min += a.price; max += a.price * 1.15; }\n      if(a.type === 'stepper' && addonState[a.id] > 0){\n        min += a.price * addonState[a.id];\n        max += a.price * addonState[a.id] * 1.15;\n      }\n    });\n\n    document.getElementById('bcRangeText').textContent = fmt(min) + ' \\u2013 ' + fmt(max);\n    document.getElementById('bcResult').scrollIntoView({behavior:'smooth', block:'center'});\n\n    const waText = encodeURIComponent(\n      `Hi! I used your Budget Calculator and got an estimate of ${fmt(min)} - ${fmt(max)} for my project. I'd like to know more.`\n    );\n    document.getElementById('bcWhatsappBtn').href = `https://wa.me/${WHATSAPP_NUMBER}?text=${waText}`;\n  });\n})();\n</script>\n"
              },
              "elements": [],
              "isInner": false,
              "widgetType": "html",
              "elType": "widget"
            }
          ],
          "isInner": false,
          "elType": "column"
        }
      ],
      "isInner": false,
      "elType": "section"
    }
  ],
  "page_settings": {},
  "version": "0.4",
  "title": "Interior Design Budget Calculator",
  "type": "section"
}