// ROI Calculator — interactive lead/revenue projection

const { useState: useCalcS, useMemo } = React;

const Slider = ({ label, value, setValue, min, max, step = 1, suffix = "", prefix = "" }) => (
  <div>
    <div style={{ display: "flex", justifyContent: "space-between",
      alignItems: "baseline", marginBottom: 10 }}>
      <div className="mono" style={{ fontSize: 11, color: "var(--ink-faint)",
        letterSpacing: "0.1em", textTransform: "uppercase" }}>{label}</div>
      <div className="mono" style={{ fontSize: 20, color: "var(--ink)", fontWeight: 500 }}>
        {prefix}{typeof value === "number" ? value.toLocaleString() : value}{suffix}
      </div>
    </div>
    <input type="range" min={min} max={max} step={step} value={value}
      onChange={e => setValue(Number(e.target.value))}
      style={{ width: "100%", accentColor: "var(--flame)" }} />
    <div style={{ display: "flex", justifyContent: "space-between", marginTop: 4 }}>
      <span className="mono" style={{ fontSize: 10, color: "var(--ink-faint)" }}>
        {prefix}{min.toLocaleString()}{suffix}
      </span>
      <span className="mono" style={{ fontSize: 10, color: "var(--ink-faint)" }}>
        {prefix}{max.toLocaleString()}{suffix}
      </span>
    </div>
  </div>
);

const Calculator = () => {
  const [spend, setSpend] = useCalcS(2000);
  const [avgJob, setAvgJob] = useCalcS(7500);
  const [closeRate, setCloseRate] = useCalcS(30);

  // CPL model: log-scale — lower spend costs more per lead
  const cpl = useMemo(() => {
    const base = 48;
    const factor = Math.max(0.65, 1 - (spend - 1200) / 55000);
    return Math.round(base * factor);
  }, [spend]);

  const leads = Math.floor(spend / cpl);
  const booked = Math.floor(leads * 0.55);
  const jobs = Math.floor(booked * (closeRate / 100));
  const revenue = jobs * avgJob;
  const totalCost = spend + 1800;
  const roas = revenue / Math.max(totalCost, 1);
  const profit = revenue - totalCost;

  // formatter — scales to $M when big enough
  const fmtMoney = (n) => {
    n = Math.max(0, Math.round(n));
    if (n >= 1_000_000) return `$${(n/1_000_000).toFixed(n >= 10_000_000 ? 1 : 2)}M`;
    if (n >= 1000) return `$${Math.round(n/1000)}K`;
    return `$${n.toLocaleString()}`;
  };

  return (
    <section id="calc" style={{ padding: "140px 32px", maxWidth: 1400, margin: "0 auto" }}>
      <div style={{ display: "flex", justifyContent: "space-between",
        alignItems: "flex-end", marginBottom: 60, gap: 40, flexWrap: "wrap" }}>
        <div>
          <div className="mono" style={{
            display: "flex", alignItems: "center", gap: 14,
            fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase",
            color: "var(--flame)", marginBottom: 40
          }}>
            <span style={{ color: "var(--ink-faint)" }}>0X</span>
            <span style={{ width: 24, height: 1, background: "var(--flame)" }}/>
            Run your numbers
          </div>
          <h2 style={{
            fontSize: "clamp(40px, 5.5vw, 80px)", lineHeight: 0.95,
            letterSpacing: "-0.03em", fontWeight: 500, maxWidth: "14ch"
          }}>
            What could <span style={{ color: "var(--flame)", fontStyle: "italic", fontWeight: 400 }}>
              your market</span> look like?
          </h2>
        </div>
        <p style={{ fontSize: 16, color: "var(--ink-dim)", maxWidth: 360 }}>
          Based on 14 live operator accounts across the Southeast. Adjust the numbers to match your situation.
        </p>
      </div>

      <div className="calc-grid" style={{
        display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 2,
        background: "var(--line)",
        border: "1px solid var(--line)"
      }}>
        <div style={{ background: "var(--bg)", padding: "48px 40px", display: "grid", gap: 36, alignContent: "start" }}>
          <Slider label="Monthly ad spend" value={spend} setValue={setSpend}
            min={600} max={30000} step={100} prefix="$"/>
          <Slider label="Your average job value" value={avgJob} setValue={setAvgJob}
            min={1500} max={30000} step={500} prefix="$"/>
          <Slider label="Close rate on qualified calls" value={closeRate} setValue={setCloseRate}
            min={10} max={70} suffix="%"/>

          <div style={{ borderTop: "1px solid var(--line)", paddingTop: 24 }}>
            <div className="mono" style={{ fontSize: 11, color: "var(--ink-faint)",
              letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 12 }}>
              Estimated inputs
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <div>
                <div style={{ fontSize: 24, fontWeight: 500 }} className="mono">${cpl}</div>
                <div style={{ fontSize: 11, color: "var(--ink-faint)",
                  textTransform: "uppercase", letterSpacing: "0.08em", marginTop: 2 }}>Cost per lead</div>
              </div>
              <div>
                <div style={{ fontSize: 24, fontWeight: 500 }} className="mono">{leads}</div>
                <div style={{ fontSize: 11, color: "var(--ink-faint)",
                  textTransform: "uppercase", letterSpacing: "0.08em", marginTop: 2 }}>Raw leads / mo</div>
              </div>
            </div>
          </div>
        </div>

        <div style={{
          background: "var(--bg-2)", padding: "48px 40px",
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, alignContent: "center"
        }}>
          {[
            { n: booked, l: "Qualified calls booked", big: false },
            { n: jobs, l: "Jobs closed / mo", big: false },
            { n: fmtMoney(revenue), l: "Monthly revenue", big: true, flame: true },
            { n: `${roas.toFixed(1)}×`, l: "Return on total investment", big: true },
            { n: fmtMoney(profit), l: "Estimated monthly profit", big: false },
            { n: fmtMoney(totalCost), l: "Total monthly investment", big: false },
          ].map((m, i) => (
            <div key={i} style={{
              padding: m.big ? "24px 0" : "16px 0",
              gridColumn: m.big ? "span 2" : "span 1"
            }}>
              <div className="mono" style={{
                fontSize: m.big ? "clamp(44px, 5.5vw, 80px)" : "clamp(28px, 3vw, 44px)",
                lineHeight: 0.95, letterSpacing: "-0.02em", fontWeight: 500,
                color: m.flame ? "var(--flame)" : "var(--ink)",
                marginBottom: 10
              }}>
                {typeof m.n === "number" ? m.n.toLocaleString() : m.n}
              </div>
              <div style={{ fontSize: 12, color: "var(--ink-faint)",
                textTransform: "uppercase", letterSpacing: "0.1em" }}>
                {m.l}
              </div>
            </div>
          ))}
          <div style={{ gridColumn: "span 2", paddingTop: 24, borderTop: "1px solid var(--line)" }}>
            <a href="#contact" className="btn-primary" style={{ width: "100%", justifyContent: "center" }}>
              Let's lock this in for your market <span>→</span>
            </a>
            <div className="mono" style={{ fontSize: 10, color: "var(--ink-faint)",
              letterSpacing: "0.08em", textTransform: "uppercase", marginTop: 14, textAlign: "center" }}>
              Projections based on Q1 2026 operator data. Individual results vary by market & capacity.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Calculator = Calculator;