The 24/7 Digital Salesperson

┌────────────────────────────────────────────────────────┐
│               THE INTERACTIVE CALCULATOR FLYWHEEL      │
├────────────────────────────────────────────────────────┤
│  1. Give Immediate Value: Sliders for Scope, Scale, Users│
│  2. Instant Computational Payoff: "Estimated Savings: ₹14L"│
│  3. The Micro-Commitment: User invests 90 seconds of effort│
│  4. The Frictionless Hand-Off: "Send Full Breakdown to WhatsApp"│
└────────────────────────────────────────────────────────┘

// components/calculators/CloudSavingsCalculator.tsx
import React, { useState, useMemo } from 'react';

export const CloudSavingsCalculator: React.FC = () => {
  const [currentAwsSpend, setCurrentAwsSpend] = useState<number>(150000);
  const [serverCount, setServerCount] = useState<number>(4);

  const calculations = useMemo(() => {
    // Hetzner + Coolify Docker architectural benchmark
    const estimatedHetznerCost = serverCount * 6500;
    const monthlySavings = currentAwsSpend - estimatedHetznerCost;
    const annualSavings = monthlySavings * 12;
    const implementationFee = 180000;
    const paybackMonths = (implementationFee / monthlySavings).toFixed(1);

    return {
      monthlySavings,
      annualSavings,
      paybackMonths,
    };
  }, [currentAwsSpend, serverCount]);

  return (
    <div className="p-8 rounded-3xl bg-zinc-950 text-white border border-zinc-800 shadow-2xl">
      <h3 className="text-xl font-bold font-mono text-coral">DEV-OPS COST SIZING ENGINE</h3>

      <div className="mt-6 space-y-4">
        <div>
          <label className="text-xs font-mono text-zinc-400">Current Monthly AWS Bill: ₹{currentAwsSpend.toLocaleString('en-IN')}</label>
          <input
            type="range"
            min="50000"
            max="1000000"
            step="25000"
            value={currentAwsSpend}
            onChange={(e) => setCurrentAwsSpend(Number(e.target.value))}
            className="w-full mt-2 accent-coral"
          />
        </div>
      </div>

      <div className="mt-8 p-4 rounded-2xl bg-zinc-900 border border-zinc-800 flex justify-between items-center">
        <div>
          <p className="text-xs text-zinc-400 font-mono">ESTIMATED ANNUAL SAVINGS</p>
          <p className="text-2xl font-black text-emerald-400">₹{calculations.annualSavings.toLocaleString('en-IN')}</p>
        </div>
        <button
          onClick={() => window.open(`https://wa.me/918210198880?text=Hi%20KaamLabs,%20my%20AWS%20spend%20is%20₹${currentAwsSpend}%20and%20I%20want%20the%20audit`)}
          className="px-5 py-2.5 bg-coral text-white font-mono text-xs font-bold rounded-full hover:bg-coral/90 transition-all"
        >
          Book 15-Min Audit &rarr;
        </button>
      </div>
    </div>
  );
};