Custom Enterprise Pricing Calculator & Interactive Quote Engine

[ User Selects Modules / Sliders / Deployment Options ]
                          │
                          ▼
[ Next.js 15 Client-Side Reactive State Engine ]
  • Dynamic Rupee (₹) / USD ($) Currency Toggle
  • Real-Time Total Cost of Ownership (TCO) Calculation
  • Comparison with Traditional Agency Costs
                          │
                          ▼
[ Instant Formal PDF Quote Generator (Server-Side) ]
  • Generates official scope brief with breakdown
  • Injects customized SLA terms & implementation milestones
                          │
                          ▼
[ Instant 1-Click WhatsApp Ingestion ]
  • Prospect receives quote directly on WhatsApp
  • Sales Director alerted with complete pre-configured parameters

// components/interactive/DynamicPricingCalculator.tsx
'use client';

import React, { useState } from 'react';

export function DynamicPricingCalculator() {
  const [modules, setModules] = useState<string[]>(['core_web']);
  const [scaleTier, setScaleTier] = useState<number>(1);
  const [currency, setCurrency] = useState<'INR' | 'USD'>('INR');

  const basePriceINR = 250000;
  const tierMultiplier = scaleTier === 1 ? 1 : scaleTier === 2 ? 1.8 : 2.5;
  const totalPrice = Math.round(basePriceINR * tierMultiplier);

  return (
    <div className="p-8 rounded-3xl bg-neutral-900 border border-neutral-800 max-w-2xl mx-auto my-8">
      <div className="flex justify-between items-center mb-6">
        <h3 className="text-xl font-bold text-white">Project Scope Estimator</h3>
        <button
          onClick={() => setCurrency(currency === 'INR' ? 'USD' : 'INR')}
          className="px-3 py-1 text-xs font-mono rounded-full bg-neutral-800 text-neutral-300"
        >
          {currency}
        </button>
      </div>

      <div className="space-y-4 mb-6">
        <label className="block text-sm text-neutral-400">Scale & Architecture Complexity</label>
        <input
          type="range"
          min="1"
          max="3"
          value={scaleTier}
          onChange={(e) => setScaleTier(Number(e.target.value))}
          className="w-full accent-emerald-500"
        />
        <div className="flex justify-between text-xs text-neutral-500">
          <span>21-Day MVP</span>
          <span>Growth Scale</span>
          <span>Enterprise Custom</span>
        </div>
      </div>

      <div className="p-6 rounded-2xl bg-neutral-950 border border-neutral-800 text-center">
        <div className="text-sm text-neutral-400">Estimated Investment</div>
        <div className="text-4xl font-mono font-bold text-emerald-400 mt-2">
          {currency === 'INR' ? `₹${totalPrice.toLocaleString('en-IN')}` : `${Math.round(totalPrice / 87).toLocaleString()}`}
        </div>
        <div className="text-xs text-neutral-500 mt-1">Fixed-scope 24-day production delivery SLA</div>
      </div>

      <a
        href={`https://wa.me/919876543210?text=Hi%20KaamLabs,%20I%20used%20your%20calculator%20for%20a%20Tier%20${scaleTier}%20project%20estimated%20at%20₹${totalPrice}.%20Let's%20discuss.`}
        className="block w-full py-4 mt-6 text-center font-bold rounded-full bg-emerald-500 text-black hover:bg-emerald-400 transition"
      >
        Lock In This Scope on WhatsApp
      </a>
    </div>
  );
}