// TOKEN SAVINGS CALCULATOR — interactive, tactile, honest
// User adjusts current monthly spend + agent count → sees realistic savings
// based on plausible levers (model routing, context pruning, batching, eval).

function Savings() {
  const [spend, setSpend] = useState(18000);
  const [agents, setAgents] = useState(6);

  // Plausible savings model — explained in detail below the result.
  // Routing: ~22% baseline by sending easy turns to small models.
  // Pruning: ~15% by trimming context.
  // Caching/batching: ~9%.
  // Eval-based prompt trim: ~6%.
  // Diminishing returns past 6 agents; minimum floor.
  const baseSavings = 0.22 + 0.15 + 0.09 + 0.06; // 0.52
  const scaleFactor = Math.min(1, 0.6 + agents * 0.05); // more agents → more leverage
  const effectiveSavings = Math.min(0.62, baseSavings * scaleFactor);
  const monthlySaved = Math.round(spend * effectiveSavings);
  const annualSaved = monthlySaved * 12;
  const newSpend = spend - monthlySaved;

  return (
    <section className="section" id="savings" style={{ background: "var(--ink)", color: "var(--bg)" }}>
      <div className="shell">

        <div style={{ display: "grid", gridTemplateColumns: "60px 1fr", gap: 24, paddingBottom: 32, borderBottom: "1px solid color-mix(in oklab, var(--bg) 18%, transparent)", marginBottom: 64 }}>
          <div className="mono" style={{ fontSize: 13, color: "color-mix(in oklab, var(--bg) 50%, transparent)", letterSpacing: "0.08em" }}>§ 05</div>
          <div>
            <div className="mono" style={{ fontSize: 13, letterSpacing: "0.14em", textTransform: "uppercase", color: "color-mix(in oklab, var(--bg) 60%, transparent)", marginBottom: 24 }}>
              TOKEN SAVINGS · INTERACTIVE
            </div>
            <h2 className="display-l serif" style={{ margin: 0, color: "var(--bg)", maxWidth: "22ch", textWrap: "balance" }}>
              How much your <span className="italic" style={{ color: "var(--accent)" }}>current bill</span> could be.
            </h2>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: "clamp(40px, 6vw, 96px)", alignItems: "start" }} className="savings-grid">

          {/* Inputs */}
          <div>
            <Knob
              label="Your current monthly LLM spend"
              value={spend}
              min={2000}
              max={150000}
              step={500}
              onChange={setSpend}
              format={v => "$" + v.toLocaleString()}
              accent="var(--accent)"
            />
            <div style={{ height: 32 }}></div>
            <Knob
              label="Active agents in production"
              value={agents}
              min={1}
              max={20}
              step={1}
              onChange={setAgents}
              format={v => v + (v === 1 ? " agent" : " agents")}
              accent="var(--heat)"
            />

            <div style={{ marginTop: 48, paddingTop: 24, borderTop: "1px solid color-mix(in oklab, var(--bg) 18%, transparent)" }}>
              <p className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "color-mix(in oklab, var(--bg) 50%, transparent)", margin: "0 0 16px 0" }}>
                Where the savings come from
              </p>
              {[
                ["Model routing", "Send easy turns to small models, hard ones to flagship.", "~22%"],
                ["Context pruning", "Stop shipping the whole transcript to every turn.", "~15%"],
                ["Batching + cache", "Group what can be grouped. Cache what doesn't change.", "~9%"],
                ["Eval-led prompt diet", "Cut prompt fat once the eval set agrees it's safe.", "~6%"],
              ].map(([k, v, p]) => (
                <div key={k} style={{ display: "grid", gridTemplateColumns: "1fr 60px", gap: 12, padding: "12px 0", borderBottom: "1px solid color-mix(in oklab, var(--bg) 12%, transparent)" }}>
                  <div>
                    <div style={{ fontSize: 14, color: "var(--bg)", marginBottom: 2 }}>{k}</div>
                    <div className="body-sm" style={{ color: "color-mix(in oklab, var(--bg) 55%, transparent)" }}>{v}</div>
                  </div>
                  <div className="mono" style={{ fontSize: 13, color: "var(--accent)", textAlign: "right", paddingTop: 2 }}>{p}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Result panel */}
          <div style={{ position: "sticky", top: 100 }}>
            <div style={{
              background: "color-mix(in oklab, var(--bg) 4%, transparent)",
              border: "1px solid color-mix(in oklab, var(--bg) 16%, transparent)",
              padding: "40px 36px",
              borderRadius: 6,
            }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "color-mix(in oklab, var(--bg) 55%, transparent)", marginBottom: 12 }}>
                Realistic annual savings · USD
              </div>
              <div className="serif" style={{
                fontSize: "clamp(80px, 12vw, 168px)",
                lineHeight: 0.9,
                letterSpacing: "-0.03em",
                color: "var(--accent)",
                margin: 0,
                fontVariantNumeric: "tabular-nums",
              }}>
                ${annualSaved.toLocaleString()}
              </div>
              <div style={{ marginTop: 16, display: "flex", gap: 32, flexWrap: "wrap" }}>
                <div>
                  <div className="mono" style={{ fontSize: 10, color: "color-mix(in oklab, var(--bg) 50%, transparent)", letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 6 }}>Per month</div>
                  <div className="serif" style={{ fontSize: 28, lineHeight: 1, letterSpacing: "-0.015em" }}>
                    ${monthlySaved.toLocaleString()}
                  </div>
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 10, color: "color-mix(in oklab, var(--bg) 50%, transparent)", letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 6 }}>New bill</div>
                  <div className="serif" style={{ fontSize: 28, lineHeight: 1, letterSpacing: "-0.015em" }}>
                    ${newSpend.toLocaleString()}
                  </div>
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 10, color: "color-mix(in oklab, var(--bg) 50%, transparent)", letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 6 }}>Cut</div>
                  <div className="serif" style={{ fontSize: 28, lineHeight: 1, letterSpacing: "-0.015em", color: "var(--accent)" }}>
                    {Math.round(effectiveSavings * 100)}%
                  </div>
                </div>
              </div>

              <p className="body-sm" style={{ marginTop: 32, color: "color-mix(in oklab, var(--bg) 60%, transparent)", maxWidth: "44ch" }}>
                We don't promise these numbers. We show you the math before the contract,
                and only bill our share against actual measured savings.
              </p>

              <a href="contact.html" className="btn btn-accent" style={{ marginTop: 24 }}>
                Audit my current spend <span className="arr">→</span>
              </a>
            </div>
          </div>
        </div>

      </div>

      <style>{`
        @media (max-width: 980px) {
          .savings-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
          .savings-grid > div:last-child { position: static !important; }
        }
      `}</style>
    </section>
  );
}

function Knob({ label, value, min, max, step, onChange, format, accent }) {
  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 12 }}>
        <label className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "color-mix(in oklab, var(--bg) 55%, transparent)" }}>
          {label}
        </label>
        <span className="serif" style={{ fontSize: 32, lineHeight: 1, color: "var(--bg)", letterSpacing: "-0.015em" }}>
          {format(value)}
        </span>
      </div>
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={value}
        onChange={e => onChange(Number(e.target.value))}
        style={{
          width: "100%",
          accentColor: accent,
          height: 4,
          cursor: "pointer",
        }}
      />
      <div style={{ display: "flex", justifyContent: "space-between", marginTop: 6, fontSize: 11, fontFamily: "var(--font-mono)", color: "color-mix(in oklab, var(--bg) 40%, transparent)" }}>
        <span>{format(min)}</span>
        <span>{format(max)}</span>
      </div>
    </div>
  );
}

Object.assign(window, { Savings });