1class CostPerLeadCalculator {
2  constructor() {
3    this.data = {};
4    this.currentStep = 0;
5    this.steps = [
6      { question: "How much do you spend on lead generation per month?", key: "monthlySpend" },
7      { question: "How many leads do you generate per month?", key: "leadsPerMonth" },
8      { question: "How many SDRs (Sales Reps) do you have?", key: "numSDRs" },
9      { question: "What is their average monthly salary (including commissions)?", key: "sdrSalary" },
10      { question: "How much do you spend on tools and software per month?", key: "softwareCost" }
11    ];
12    this.init();
13  }
14
15  init() {
16    this.chatContainer = document.createElement("div");
17    this.chatContainer.id = "cpl-calculator";
18    this.chatContainer.innerHTML = `<div id='chat-box'></div><input id='chat-input' type='text' placeholder='Type your answer...'><button id='chat-submit'>Submit</button>`;
19    document.body.appendChild(this.chatContainer);
20
21    this.chatBox = document.getElementById("chat-box");
22    this.chatInput = document.getElementById("chat-input");
23    this.chatSubmit = document.getElementById("chat-submit");
24
25    this.chatSubmit.addEventListener("click", () => this.processAnswer());
26    this.chatInput.addEventListener("keypress", (event) => {
27      if (event.key === "Enter") {
28        this.processAnswer();
29      }
30    });
31    this.displayMessage("Let's calculate your cost per lead!", "bot");
32    this.nextStep();
33  }
34
35  displayMessage(message, sender) {
36    const msgDiv = document.createElement("div");
37    msgDiv.className = sender;
38    msgDiv.innerText = message;
39    this.chatBox.appendChild(msgDiv);
40    this.chatBox.scrollTop = this.chatBox.scrollHeight;
41  }
42
43  nextStep() {
44    if (this.currentStep < this.steps.length) {
45      this.displayMessage(this.steps[this.currentStep].question, "bot");
46    } else {
47      this.calculateCPL();
48    }
49  }
50
51  processAnswer() {
52    const answer = this.chatInput.value.trim();
53    if (!answer) return;
54    this.displayMessage(answer, "user");
55    
56    // Ensure only valid numbers are processed
57    const cleanedAnswer = answer.replace(/,/g, "").trim(); // Remove commas
58    const parsedValue = parseFloat(cleanedAnswer);
59    if (isNaN(parsedValue) || parsedValue <= 0) {
60      this.displayMessage("Please enter a valid positive number.", "bot");
61      this.chatInput.value = "";
62      return;
63    }
64    
65    this.data[this.steps[this.currentStep].key] = parsedValue;
66    this.chatInput.value = "";
67    this.currentStep++;
68    this.nextStep();
69  }
70
71  calculateCPL() {
72    const { monthlySpend = 0, leadsPerMonth = 1, numSDRs = 0, sdrSalary = 0, softwareCost = 0 } = this.data;
73    const totalCost = monthlySpend + (numSDRs * sdrSalary) + softwareCost;
74    const costPerLead = leadsPerMonth > 0 ? (totalCost / leadsPerMonth).toFixed(2) : "N/A";
75    this.displayMessage(`Your cost per lead is approximately $${costPerLead}.`, "bot");
76    this.displayMessage("Want to lower your CPL? Let's talk!", "bot");
77  }
78}
79
80// Initialize the calculator after the page fully loads
81document.addEventListener("DOMContentLoaded", function() {
82  new CostPerLeadCalculator();
83});
84