/* ============================================================================
   "YOUR COMPANY AFTER AI" — the simulator / lead magnet.
   Auto-filled problem + lab, plus revenue / employees / challenge / region.
   A timeline slider (2026 · 2027 · 2028 · 2030) morphs the model in real time:
   margins, revenue, headcount, the org chart, the report — all tween.
   Heuristic engine (offline-safe). Financials never touch the URL.
   ============================================================================ */
const { useState: useStateS, useEffect: useEffectS, useRef: useRefS, useMemo } = React;

const YEARS = [2026, 2027, 2028, 2030];
const FACTORS = [0, 0.34, 0.66, 1.0];

const DEPTS = [
  { name: "Leadership", a: 0.09, b: 0.10 },
  { name: "Operations", a: 0.32, b: 0.18 },
  { name: "Sales & Marketing", a: 0.18, b: 0.22 },
  { name: "Customer Service", a: 0.21, b: 0.12 },
  { name: "Finance & Admin", a: 0.20, b: 0.12 },
  { name: "AI & Automation", a: 0.0, b: 0.26, emerging: true },
];

function fmtMoney(n) {
  const abs = Math.abs(n);
  if (abs >= 1e9) return "$" + (n / 1e9).toFixed(abs >= 1e10 ? 0 : 1) + "B";
  if (abs >= 1e6) return "$" + (n / 1e6).toFixed(abs >= 1e7 ? 0 : 1) + "M";
  if (abs >= 1e3) return "$" + Math.round(n / 1e3) + "K";
  return "$" + Math.round(n);
}

function computeModel(inp, f) {
  const lab = inp.lab, prob = inp.problem;
  const baseRev = inp.revenue, emp = inp.employees;
  const margin = lab.sim.baseMargin + (lab.sim.futureMargin - lab.sim.baseMargin) * f;
  const revenue = baseRev * (1 + lab.sim.revLift * f * (0.6 + 0.4 * prob.levers.revenue));
  const savings = baseRev * (lab.sim.save * 0.16) * f * (0.6 + 0.4 * prob.levers.savings);
  const hcFactor = 1 + (0.12 * prob.levers.revenue - 0.3 * prob.levers.headcount) * f;
  const headcount = Math.max(1, Math.round(emp * hcFactor));
  const profit = (revenue * margin) / 100;
  const depts = DEPTS.map((d) => {
    const share = d.a + (d.b - d.a) * f;
    return { name: d.name, emerging: d.emerging, share, count: Math.max(d.emerging && f < 0.04 ? 0 : 1, Math.round(share * headcount)) };
  });
  const deltaRev = revenue - baseRev;
  const annualBenefit = savings + (deltaRev * margin) / 100 * 0.5;
  const investment = Math.min(Math.max(baseRev * 0.1, 100000), 6_000_000);
  const payback = annualBenefit > 0 ? Math.max(4, Math.round((investment / (annualBenefit / 12)))) : 0;
  const roi = annualBenefit > 0 ? (annualBenefit * 3) / investment : 0;
  return {
    margin, revenue, savings, headcount, profit, depts, deltaRev,
    revOppLow: deltaRev * 0.8, revOppHigh: deltaRev * 1.15,
    investment, payback, roi, annualBenefit,
  };
}

/* tween any numeric value smoothly on change */
function useTween(value, dur = 600) {
  const [v, setV] = useStateS(value);
  const fromRef = useRefS(value);
  useEffectS(() => {
    if (window.prefersReduced() || document.documentElement.classList.contains("no-anim")) {
      setV(value); fromRef.current = value; return;
    }
    const from = fromRef.current, start = performance.now();
    let raf;
    function step(t) {
      const k = Math.min(1, (t - start) / dur);
      const e = 1 - Math.pow(1 - k, 3);
      const nv = from + (value - from) * e;
      setV(nv);
      if (k < 1) raf = requestAnimationFrame(step);
      else fromRef.current = value;
    }
    raf = requestAnimationFrame(step);
    // safety: snap to final value if rAF is throttled/frozen
    const safety = setTimeout(() => { setV(value); fromRef.current = value; }, dur + 160);
    return () => { cancelAnimationFrame(raf); clearTimeout(safety); };
  }, [value]);
  return v;
}

function StatCard({ label, value, sub, accent }) {
  return React.createElement(
    "div",
    { className: `sim-stat ${accent ? "accent" : ""}` },
    React.createElement("div", { className: "sim-stat-label mono" }, label),
    React.createElement("div", { className: "sim-stat-value" }, value),
    sub && React.createElement("div", { className: "sim-stat-sub" }, sub)
  );
}

function OrgChart({ depts }) {
  const max = Math.max(...depts.map((d) => d.share), 0.0001);
  return React.createElement(
    "div",
    { className: "orgchart" },
    depts.map((d) =>
      React.createElement(
        "div",
        { key: d.name, className: `org-row ${d.emerging ? "emerging" : ""} ${d.count === 0 ? "off" : ""}` },
        React.createElement("span", { className: "org-name" }, d.name),
        React.createElement(
          "div",
          { className: "org-bar-track" },
          React.createElement("div", { className: "org-bar", style: { width: `${(d.share / max) * 100}%` } })
        ),
        React.createElement("span", { className: "org-count mono" }, d.count)
      )
    )
  );
}

function Simulator({ inputs, setInputs, size }) {
  const [yi, setYi] = useStateS(0);
  const [sent, setSent] = useStateS(false);
  const [whiteLabel, setWhiteLabel] = useStateS(false);
  useEffectS(() => {
    // Enterprise defaults to a larger revenue anchor; SME stays lean
    if (size === "Enterprise" && inputs.revenue < 50000000) setInputs((p) => ({ ...p, revenue: 50000000 }));
  }, [size]);
  const model = useMemo(() => computeModel(inputs, FACTORS[yi]), [inputs, yi]);

  const tRev = useTween(model.revenue);
  const tMargin = useTween(model.margin);
  const tHead = useTween(model.headcount);
  const tSave = useTween(model.savings);
  const tInvest = useTween(model.investment);
  const tRoi = useTween(model.roi);
  const tLow = useTween(model.revOppLow);
  const tHigh = useTween(model.revOppHigh);

  const lab = inputs.lab, prob = inputs.problem;
  const sols = window.TALYA_DATA.orderedSolutions(lab.key, prob.key);
  const projects = [sols[0].name, sols[1].name, prob.projects[0], prob.projects[1], sols[2].name];
  const isFuture = yi >= 1;

  const revenueOptions = [500000, 2000000, 10000000, 50000000, 250000000];
  const empOptions = [10, 50, 250, 1000, 5000];

  return React.createElement(
    "section",
    { className: "section simulator" },
    React.createElement(
      "div",
      { className: "section-head" },
      React.createElement("span", { className: "kicker" }, "The lead magnet"),
      React.createElement("h2", { className: "section-title" }, "Your company after AI"),
      React.createElement("p", { className: "section-lede" },
        "Not a chatbot. A transformer. Drag the timeline and watch your business rebuild — year by year.")
    ),

    /* inputs */
    React.createElement(
      "div",
      { className: "sim-inputs" },
      React.createElement(
        "div",
        { className: "sim-input-row" },
        React.createElement("span", { className: "sim-input-label" }, "Diagnosis"),
        React.createElement("div", { className: "sim-chips" },
          React.createElement(Chip, { accent: lab.accent, className: "solid" }, prob.label),
          React.createElement(Chip, { accent: lab.accent }, lab.short)
        )
      ),
      React.createElement(
        "div",
        { className: "sim-input-row" },
        React.createElement("span", { className: "sim-input-label" }, "Annual revenue"),
        React.createElement(
          "div",
          { className: "seg" },
          revenueOptions.map((r) =>
            React.createElement("button", {
              key: r, type: "button",
              className: `seg-btn ${inputs.revenue === r ? "on" : ""}`,
              onClick: () => setInputs({ ...inputs, revenue: r }),
            }, fmtMoney(r).replace("$", "$") + (r >= 250000000 ? "+" : ""))
          )
        )
      ),
      React.createElement(
        "div",
        { className: "sim-input-row" },
        React.createElement("span", { className: "sim-input-label" }, "Team size"),
        React.createElement(
          "div",
          { className: "seg" },
          empOptions.map((e) =>
            React.createElement("button", {
              key: e, type: "button",
              className: `seg-btn ${inputs.employees === e ? "on" : ""}`,
              onClick: () => setInputs({ ...inputs, employees: e }),
            }, e >= 5000 ? "5000+" : e)
          )
        )
      ),
      React.createElement(
        "div",
        { className: "sim-input-row" },
        React.createElement("span", { className: "sim-input-label" }, "Private-label"),
        React.createElement(
          "button",
          { type: "button", className: `wl-toggle ${whiteLabel ? "on" : ""}`, onClick: () => setWhiteLabel((v) => !v), role: "switch", "aria-checked": whiteLabel },
          React.createElement("span", { className: "wl-knob" }),
          React.createElement("span", { className: "wl-label" }, whiteLabel ? "Ships under your brand" : "Ship under your brand?")
        )
      )
    ),

    /* timeline slider */
    React.createElement(
      "div",
      { className: "sim-timeline" },
      React.createElement("input", {
        type: "range", min: 0, max: 3, step: 1, value: yi,
        className: "year-slider",
        "aria-label": "Timeline year",
        onChange: (e) => setYi(parseInt(e.target.value, 10)),
        style: { "--pct": `${(yi / 3) * 100}%` },
      }),
      React.createElement(
        "div",
        { className: "year-marks" },
        YEARS.map((y, i) =>
          React.createElement("button", {
            key: y, type: "button",
            className: `year-mark ${yi === i ? "on" : ""}`,
            onClick: () => setYi(i),
          }, y)
        )
      )
    ),

    /* stat cards */
    React.createElement(
      "div",
      { className: "sim-stats" },
      React.createElement(StatCard, { label: "REVENUE", value: fmtMoney(tRev), sub: isFuture ? `+${fmtMoney(model.deltaRev)} vs today` : "today" }),
      React.createElement(StatCard, { label: "OPERATING MARGIN", value: tMargin.toFixed(0) + "%", sub: isFuture ? `from ${lab.sim.baseMargin}%` : "baseline" }),
      React.createElement(StatCard, { label: "HEADCOUNT", value: Math.round(tHead).toLocaleString("en-US"), sub: isFuture ? "redeployed to higher-value work" : "today" }),
      React.createElement(StatCard, { label: "ANNUAL COST SAVED", value: fmtMoney(tSave), sub: isFuture ? "removed from rote work" : "—", accent: true })
    ),

    /* org chart + report */
    React.createElement(
      "div",
      { className: "sim-body" },
      React.createElement(
        "div",
        { className: "sim-org panel" },
        React.createElement("div", { className: "panel-head" },
          React.createElement("span", { className: "panel-title" }, "Org chart"),
          React.createElement("span", { className: "panel-year mono" }, YEARS[yi])
        ),
        React.createElement(OrgChart, { depts: model.depts }),
        React.createElement("p", { className: "org-note" },
          isFuture
            ? "AI & Automation becomes a department. Rote-heavy functions shrink and people move to growth."
            : "Today's shape: people absorbing work that software should be doing.")
      ),

      React.createElement(
        "div",
        { className: "sim-report panel" },
        React.createElement("div", { className: "panel-head" },
          React.createElement("span", { className: "panel-title" }, "The report"),
          React.createElement("span", { className: "panel-year mono" }, isFuture ? "Future state" : "Current state")
        ),
        React.createElement(
          "div",
          { className: "report-rows" },
          React.createElement(ReportRow, { k: "Revenue opportunity", v: `${fmtMoney(tLow)} – ${fmtMoney(tHigh)}`, sub: "incremental, annual" }),
          React.createElement(ReportRow, { k: "Expected ROI", v: `${tRoi.toFixed(1)}× ` , sub: `${model.payback}-month payback`, accent: true }),
          React.createElement(ReportRow, { k: "Investment required", v: fmtMoney(tInvest), sub: "phased over 24 months" }),
          whiteLabel && React.createElement(ReportRow, { k: "Revenue share to platform operator", v: "5–12%", sub: "private-label terms" }),
          whiteLabel && React.createElement(ReportRow, { k: "First platform under your brand", v: "8 weeks", sub: "no excuses", accent: true })
        ),
        React.createElement("div", { className: "report-sub-title mono" }, "RECOMMENDED AI PROJECTS"),
        React.createElement(
          "div",
          { className: "report-projects" },
          projects.map((p, i) =>
            React.createElement("span", { key: i, className: "report-proj", style: { "--i": i } },
              React.createElement("span", { className: "rp-num mono" }, String(i + 1).padStart(2, "0")), p)
          )
        ),
        React.createElement("div", { className: "report-sub-title mono" }, "IMPLEMENTATION ROADMAP"),
        React.createElement(
          "ol",
          { className: "roadmap" },
          React.createElement(RoadPhase, { when: "0–90 days", what: `Quick-win automation: ${projects[2]}` }),
          React.createElement(RoadPhase, { when: "3–9 months", what: `Core build: ${projects[0]} + ${projects[1]}` }),
          React.createElement(RoadPhase, { when: "9–24 months", what: `Platform & scale across the ${lab.unit}` })
        )
      )
    ),

    /* CTA */
    React.createElement(
      "div",
      { className: "sim-cta" },
      React.createElement("button", { type: "button", className: "btn btn-primary lg", onClick: () => { var e = document.getElementById("pricing"); if (e) window.scrollTo({ top: e.getBoundingClientRect().top + window.pageYOffset - 64, behavior: window.prefersReduced() ? "auto" : "smooth" }); } }, "Price the build →"),
      !sent
        ? React.createElement("button", { type: "button", className: "btn btn-ghost lg", onClick: () => setSent(true) }, "Email me this report")
        : React.createElement("span", { className: "sim-sent" }, "We'll ask for your email before sending anything →")
    )
  );
}

function ReportRow({ k, v, sub, accent }) {
  return React.createElement(
    "div",
    { className: `report-row ${accent ? "accent" : ""}` },
    React.createElement("span", { className: "report-k" }, k),
    React.createElement("span", { className: "report-v" }, v, sub && React.createElement("span", { className: "report-v-sub" }, sub))
  );
}
function RoadPhase({ when, what }) {
  return React.createElement(
    "li",
    { className: "road-phase" },
    React.createElement("span", { className: "road-when mono" }, when),
    React.createElement("span", { className: "road-what" }, what)
  );
}

Object.assign(window, { Simulator, computeModel, fmtMoney });