// ManualTrackingCalculator.jsx
//
// Answers a specific request: ROI shouldn't be a blanket claim - it should
// show what stays manual even after Tally is installed, and price that in
// man-hours and money. Built the same honest way as WastageCalculator.jsx
// (SPEC-07 Section 9, same file's header comment) - every number comes
// from the visitor's own sliders, not an asserted industry average. The
// three default values below are a labeled starting-point scenario (a
// 15-worker, 2-supervisor, 1-accountant, 2-3-partner shop where only one
// partner and the accountant actually use Tally - a real persona the site
// owner described directly), not a claimed customer result.
//
// Deliberately scoped to labor-hours only - material wastage already has
// its own honest calculator (WastageCalculator.jsx); combining the two
// into one number would overstate the case by double-counting categories
// this calculator doesn't touch.
//
// Badged "Live ROI Calculator" (see WastageCalculator.jsx's header comment
// for why that replaced "Illustrative Example - Not a Guarantee") - same
// honesty, framed as a feature instead of a disclaimer.
//
// Loaded as a classic (non-module) Babel-transformed script - see
// index.html's header comment.

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

const MANUAL_TASKS = [
  "Re-counting stock by hand to check it against what Tally's godown register says",
  "Walking the floor to find out which stage a batch is actually at, since Tally's WIP is a balance-sheet number, not a live stage-by-stage view",
  "Calling the warehouse or driver to confirm a dispatch actually left, and again to confirm it arrived",
  "Explaining today's status by phone to a partner who doesn't use Tally, because they have no other way to see it",
];

function ManualTrackingCalculator() {
  const [staffCount, setStaffCount] = React.useState(3); // e.g. 2 supervisors + 1 accountant
  const [hoursPerWeek, setHoursPerWeek] = React.useState(7);
  const [hourlyCost, setHourlyCost] = React.useState(150);

  const weeklyCost = staffCount * hoursPerWeek * hourlyCost;
  const monthlyCost = weeklyCost * 4.33;
  const annualCost = weeklyCost * 52;
  const monthlyHours = staffCount * hoursPerWeek * 4.33;

  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">
            Tally is installed. What's still being tracked by hand?
          </h2>
          <p className="mt-3 text-slate-600">
            Enter your own numbers below - this is a plain calculator, not a projection. Start from a
            realistic small-shop scenario (2 supervisors, 1 accountant) and adjust it to match your team.
          </p>
        </div>

        <div className="mx-auto mt-8 max-w-3xl">
          <ul className="grid grid-cols-1 gap-2 sm:grid-cols-2">
            {MANUAL_TASKS.map((t) => (
              <li key={t} className="flex items-start gap-2 rounded-lg bg-surface px-4 py-3 text-xs leading-relaxed text-slate-600">
                <svg className="mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                  <path strokeLinecap="round" d="M12 9v4M12 17h.01M10.29 3.86l-8.4 14.55A1 1 0 002.75 20h18.5a1 1 0 00.86-1.59l-8.4-14.55a1 1 0 00-1.72 0z" />
                </svg>
                {t}
              </li>
            ))}
          </ul>
        </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">
                Staff doing this manually (supervisors + accountant)
                <span className="text-emerald-700">{staffCount}</span>
              </label>
              <input
                type="range"
                min={1}
                max={8}
                step={1}
                value={staffCount}
                onChange={(e) => setStaffCount(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">
                Hours per week, per person, on the tasks above
                <span className="text-emerald-700">{hoursPerWeek} hrs</span>
              </label>
              <input
                type="range"
                min={1}
                max={20}
                step={1}
                value={hoursPerWeek}
                onChange={(e) => setHoursPerWeek(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">
                Blended fully-loaded cost of that time
                <span className="text-emerald-700">₹{hourlyCost}/hr</span>
              </label>
              <input
                type="range"
                min={50}
                max={400}
                step={10}
                value={hourlyCost}
                onChange={(e) => setHourlyCost(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 - a supervisor/accountant's monthly salary divided by roughly 190 working hours.
              </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">
              Hours spent on this every month
            </div>
            <div className="mt-1 text-3xl font-extrabold text-red-600">{formatINR(monthlyHours)} hrs</div>

            <div className="mt-6 border-t border-slate-200 pt-6">
              <div className="text-xs font-semibold uppercase tracking-wide text-brand-steel">
                What that time costs, in money
              </div>
              <div className="mt-1 text-3xl font-extrabold text-emerald-700">₹{formatINR(monthlyCost)} / month</div>
              <div className="mt-1 text-sm text-slate-500">≈ ₹{formatINR(annualCost)} / 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 doesn't include material
          wastage (see our Wastage Calculator further down this page) or the cost of decisions delayed
          because a partner couldn't see live status. It is not a projection, a guarantee, or a result
          reported by any SkelBiz customer.
        </p>
      </div>
    </section>
  );
}