// WastageCalculator.jsx
//
// The one "ROI example" on this site, built the only way that's honest
// given we have exactly one pilot customer and no reported outcome
// metrics (SPEC-07 Section 9): every number in it comes from the visitor,
// not from us. We do the arithmetic transparently; we don't assert an
// industry-average wastage rate or a guaranteed reduction percentage,
// since neither is something we can substantiate. Badged "Live ROI
// Calculator" (previously "Illustrative Example - Not a Guarantee" - the
// site owner felt that framing read as a weakness rather than a feature)
// - the substance is unchanged, still not a projection or a customer
// result, but that honesty now lives in the body copy and the footnote
// below the calculator rather than the headline badge.
//
// Loaded as a classic (non-module) Babel-transformed script - see
// index.html's header comment. React 19 ships no UMD global, so
// `window.React` here is the bridge index.html's ESM import sets up; hooks
// are called as `React.useState` etc. (fully qualified) for the same
// shared-global-scope reason documented in Navbar.jsx.

function formatINR(n) {
  return new Intl.NumberFormat("en-IN", { maximumFractionDigits: 0 }).format(Math.max(0, Math.round(n)));
}

function WastageCalculator() {
  const [monthlySpend, setMonthlySpend] = React.useState(1000000); // ₹10,00,000 - a round illustrative default, not a real figure
  const [wastagePct, setWastagePct] = React.useState(5);
  const [catchPct, setCatchPct] = React.useState(30);

  const monthlyWastageCost = (monthlySpend * wastagePct) / 100;
  const potentialMonthlyValue = (monthlyWastageCost * catchPct) / 100;
  const potentialAnnualValue = potentialMonthlyValue * 12;

  return (
    <section className="bg-white py-20">
      <div className="mx-auto max-w-6xl px-6">
        <div className="mx-auto max-w-2xl text-center">
          <span className="inline-flex items-center rounded-full border border-brand-green/30 bg-emerald-50 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-emerald-700">
            Live ROI Calculator
          </span>
          <h2 className="mt-4 text-3xl font-bold text-brand-navy">What is unmeasured wastage actually costing you?</h2>
          <p className="mt-3 text-slate-600">
            Enter your own numbers below. This is a plain calculator, not a projection or a customer
            result - SkelBiz's Wastage Ledger exists to replace guesses like these with real numbers.
          </p>
        </div>

        <div className="mt-10 grid grid-cols-1 gap-8 rounded-card border border-slate-200 bg-surface-card p-8 shadow-card sm:p-10 lg:grid-cols-2">
          <div className="space-y-7">
            <div>
              <label className="flex items-center justify-between text-sm font-semibold text-brand-navy">
                Monthly raw material spend
                <span className="text-emerald-700">₹{formatINR(monthlySpend)}</span>
              </label>
              <input
                type="range"
                min={100000}
                max={20000000}
                step={100000}
                value={monthlySpend}
                onChange={(e) => setMonthlySpend(Number(e.target.value))}
                className="mt-3 w-full accent-emerald-600"
              />
            </div>

            <div>
              <label className="flex items-center justify-between text-sm font-semibold text-brand-navy">
                Estimated current wastage
                <span className="text-emerald-700">{wastagePct}%</span>
              </label>
              <input
                type="range"
                min={0}
                max={20}
                step={0.5}
                value={wastagePct}
                onChange={(e) => setWastagePct(Number(e.target.value))}
                className="mt-3 w-full accent-emerald-600"
              />
            </div>

            <div>
              <label className="flex items-center justify-between text-sm font-semibold text-brand-navy">
                Wastage you could realistically catch with better visibility
                <span className="text-emerald-700">{catchPct}%</span>
              </label>
              <input
                type="range"
                min={0}
                max={100}
                step={5}
                value={catchPct}
                onChange={(e) => setCatchPct(Number(e.target.value))}
                className="mt-3 w-full accent-emerald-600"
              />
              <p className="mt-1.5 text-xs text-slate-500">Your own estimate - we don't claim a specific number.</p>
            </div>
          </div>

          <div className="flex flex-col justify-center rounded-card bg-surface p-6 text-center">
            <div className="text-xs font-semibold uppercase tracking-wide text-brand-steel">
              Estimated monthly cost of that wastage
            </div>
            <div className="mt-1 text-3xl font-extrabold text-red-600">₹{formatINR(monthlyWastageCost)}</div>

            <div className="mt-6 border-t border-slate-200 pt-6">
              <div className="text-xs font-semibold uppercase tracking-wide text-brand-steel">
                Potential value if you catch {catchPct}% of it
              </div>
              <div className="mt-1 text-3xl font-extrabold text-emerald-700">₹{formatINR(potentialMonthlyValue)}</div>
              <div className="mt-1 text-sm text-slate-500">≈ ₹{formatINR(potentialAnnualValue)} / year</div>
            </div>
          </div>
        </div>

        <p className="mx-auto mt-6 max-w-2xl text-center text-xs leading-relaxed text-slate-500">
          This calculator only performs the arithmetic on the numbers you enter. It is not a projection, a
          guarantee, or a result reported by any SkelBiz customer - your actual wastage rate and how much of
          it is recoverable depend entirely on your own process.
        </p>
      </div>
    </section>
  );
}