index.html

<script>
  const state={step:'tileType',tileType:null,area:null,length:null,width:null};
  function selectTileType(t){
    state.tileType=t;state.step='area';
    addMessage('user',t+' tiles'); ask('area');
  }
  function ask(field){
    showTyping();
    setTimeout(()=>{
      hideTyping();
      addMessage('bot',
         field==='area' ? "Total area (sq.ft)?" :
         field==='length' ? "Tile length (ft)?" : "Tile width (ft)?"
      );
      state.step=field;
    },1000);
  }
  function sendMessage(){
    const m=userInput.value.trim(); if(!m)return;
    addMessage('user',m);userInput.value='';
    handleUser(m);
  }
  function handleUser(msg){
    if(state.step==='area'){
      const v=parseFloat(msg);
      return isNaN(v)? addBot("Enter valid area.") : (state.area=v,ask('length'));
    }
    if(state.step==='length'){
      const v=parseFloat(msg);
      return isNaN(v)? addBot("Enter valid length.") : (state.length=v,ask('width'));
    }
    if(state.step==='width'){
      const v=parseFloat(msg);
      return isNaN(v)? addBot("Enter valid width.") : (
        state.width=v,
        showResults()
      );
    }
  }
  function showResults(){
    const c = state.length * state.width;
    const tiles = Math.ceil((state.area/c)*1.1);
    addBot(`📦 You need ${tiles} tiles (~10% buffer).`);
    fetch('/recommend', {
      method:'POST', headers:{'Content-Type':'application/json'},
      body:JSON.stringify({
        tile_type: state.tileType,
        area: state.area,
        length: state.length,
        width: state.width,
        price_range: [3,10]
      })
    })
    .then(r=>r.json())
    .then(r=>{
      if(r.recommended_products && r.recommended_products.length){
        recommendations.innerHTML = '';
        r.recommended_products.forEach(p=>{
          recommendations.innerHTML += `
            <div class="card">
              <h4>${p.name}</h4>
              <p>${p.size} — ₹${p.price}/box</p>
            </div>`;
        });
      } else addBot("No recommendations.");
    });
  }
  // Helper functions: addBot, addMessage, showTyping, hideTyping (as before)...
</script>