/* ============================================================
   ROI calculator — same model, restyled to the new system.
   Driven by i18n (L.roi).
   ============================================================ */

const ROI_SOFTWARE = { Zendesk: 1100, Gorgias: 950, Dixa: 1200, Herodesk: 450 };

function roiPlan(tk) {
  if (tk <= 1000) return { name: "Basic", price: 1999 };
  if (tk <= 2500) return { name: "Pro", price: 3999 };
  if (tk <= 5000) return { name: "Advanced", price: 5999 };
  return { name: "Enterprise", price: 8999 };
}

function RoiSlider({ label, sub, value, min, max, step, onChange, format }) {
  const pct = ((value - min) / (max - min)) * 100;
  return (
    <div>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 10 }}>
        <span style={{ fontSize: 13.5, fontWeight: 600 }}>{label}</span>
        <span style={{ fontSize: 14, fontWeight: 700, color: "var(--primary)" }}>{format ? format(value) : value}</span>
      </div>
      <input type="range" min={min} max={max} step={step} value={value} onChange={(e) => onChange(+e.target.value)}
        style={{ width: "100%", height: 6, borderRadius: 4, appearance: "none", WebkitAppearance: "none", cursor: "pointer",
          background: `linear-gradient(90deg, var(--primary) ${pct}%, var(--sky-2) ${pct}%)` }} />
      {sub && <div style={{ fontSize: 11.5, color: "var(--ink-3)", marginTop: 7 }}>{sub}</div>}
    </div>
  );
}

function RoiCalculator() {
  const { lang, L } = useT();
  const R = L.roi;
  const locale = lang === "da" ? "da-DK" : "en-US";
  const roiFmt = (n) => Math.round(n).toLocaleString(locale);
  const [team, setTeam] = useState(5);
  const [salary, setSalary] = useState(32000);
  const [autom, setAutom] = useState(80);
  const [sw, setSw] = useState("Zendesk");

  const tickets = team * 1000;
  const plan = roiPlan(tickets);
  const a = autom / 100;
  const teamNeeded = Math.max(1, Math.ceil(team * (1 - a)));
  const saved = team - teamNeeded;
  const currentTotal = team * salary + ROI_SOFTWARE[sw] * team;
  const withSanddo = teamNeeded * salary + plan.price;
  const savings = Math.max(0, currentTotal - withSanddo);
  const agentWord = (n) => (n === 1 ? R.agent : R.agents);

  return (
    <div className="roi-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", borderRadius: 26, overflow: "hidden" }}>
      {/* inputs */}
      <div style={{ padding: "40px 40px", background: "var(--bg-2)", display: "grid", gap: 26, alignContent: "start" }}>
        <div className="mono-label">{R.setup}</div>
        <RoiSlider label={R.teamLabel} sub={R.teamSub} value={team} min={1} max={20} step={1} onChange={setTeam} format={(v) => `${v} ${agentWord(v)}`} />
        <RoiSlider label={R.salaryLabel} value={salary} min={22000} max={55000} step={1000} onChange={setSalary} format={(v) => `${roiFmt(v)} kr`} />
        <RoiSlider label={R.autoLabel} value={autom} min={40} max={90} step={5} onChange={setAutom} format={(v) => `${v}%`} />
        <div>
          <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: 10 }}>{R.softwareLabel}</div>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {Object.keys(ROI_SOFTWARE).map((s) => (
              <button key={s} onClick={() => setSw(s)} style={{
                padding: "9px 15px", borderRadius: 999, fontSize: 13, fontWeight: 600,
                background: sw === s ? "var(--ink)" : "var(--surface)",
                color: sw === s ? "#fff" : "var(--ink-2)",
                boxShadow: sw === s ? "none" : "inset 0 0 0 1px var(--line-2)",
                transition: "all .15s" }}>{s}</button>
            ))}
          </div>
        </div>
      </div>
      {/* results */}
      <div style={{ padding: "40px 40px", background: "var(--contrast-bg)", color: "#fff", display: "grid", gap: 20, alignContent: "start" }}>
        <div className="mono-label" style={{ color: "#9dbcf5" }}>{R.withPlan} {plan.name}</div>
        <div>
          <div style={{ fontSize: 13.5, color: "rgba(255,255,255,.6)", marginBottom: 6 }}>{R.savingsLabel}</div>
          <div style={{ fontSize: "clamp(40px,4vw,56px)", fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 1 }}>
            {roiFmt(savings)} <span style={{ fontSize: 20, opacity: .6, fontWeight: 600 }}>kr</span>
          </div>
          <div style={{ fontSize: 12.5, color: "rgba(255,255,255,.5)", marginTop: 8 }}>≈ {roiFmt(savings * 12)} kr {R.perYear}</div>
        </div>
        <div style={{ borderRadius: 14, overflow: "hidden", display: "grid", gap: 1, background: "rgba(255,255,255,.1)" }}>
          {[[R.currentRow, `${roiFmt(currentTotal)} kr`, "#fff"],
            [fill(R.sanddoRow, { plan: plan.name }), `${roiFmt(withSanddo)} kr`, "#9dbcf5"]].map(([l, v, c]) => (
            <div key={l} style={{ display: "flex", justifyContent: "space-between", gap: 10, padding: "14px 16px", background: "rgba(255,255,255,.05)", fontSize: 13.5 }}>
              <span style={{ color: "rgba(255,255,255,.65)" }}>{l}</span><span style={{ fontWeight: 700, color: c }}>{v}</span>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", gap: 12 }}>
          <div style={{ flex: 1, padding: "14px 16px", borderRadius: 14, background: "rgba(157,188,245,.12)" }}>
            <div style={{ fontSize: 22, fontWeight: 700 }}>{autom}%</div>
            <div style={{ fontSize: 11.5, color: "rgba(255,255,255,.55)", marginTop: 2 }}>{R.automated}</div>
          </div>
          <div style={{ flex: 1, padding: "14px 16px", borderRadius: 14, background: "rgba(157,188,245,.12)" }}>
            <div style={{ fontSize: 22, fontWeight: 700 }}>{team}→{teamNeeded}</div>
            <div style={{ fontSize: 11.5, color: "rgba(255,255,255,.55)", marginTop: 2 }}>{saved > 0 ? `${fill(R.redeploy, { n: saved })} ${agentWord(saved)}` : R.sameTeam}</div>
          </div>
        </div>
        <a href="#demo" className="btn" style={{ background: "#fff", color: "var(--ink)", width: "100%" }}>{R.cta} <Icon.arrow className="btn-arrow" /></a>
      </div>
      <style>{`
        input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px var(--primary), 0 2px 6px rgba(0,0,0,.2); cursor:pointer; }
        input[type=range]::-moz-range-thumb{ width:18px; height:18px; border:none; border-radius:50%; background:#fff; box-shadow:0 0 0 4px var(--primary); cursor:pointer; }
        input[type=range]{ outline:none; }
        @media (max-width:880px){ .roi-grid{ grid-template-columns:1fr !important; } }
      `}</style>
    </div>
  );
}

function Roi() {
  const { L } = useT();
  return (
    <section id="calculator" className="section" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <Reveal style={{ marginBottom: 52, maxWidth: 640 }}>
          <h2 className="h-section" style={{ fontSize: "clamp(32px,3.6vw,52px)", marginBottom: 20 }}><Lines text={L.roi.title} /></h2>
          <p className="lead">{L.roi.lead}</p>
        </Reveal>
        <Reveal className="rise-d1"><RoiCalculator /></Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Roi });