import React, { useState, useEffect } from 'react';
const AIROICalculator = () => {
const [aiType, setAiType] = useState('chatbot');
const [metric, setMetric] = useState('time');
const [employees, setEmployees] = useState(10);
const [currentCost, setCurrentCost] = useState(50);
const [frequency, setFrequency] = useState(100);
const [results, setResults] = useState(null);
const aiTypes = {
chatbot: { name: 'AI Chatbot', efficiency: 0.7, icon: '💬' },
automation: { name: 'Process Automation', efficiency: 0.85, icon: '⚙️' },
analytics: { name: 'AI Analytics', efficiency: 0.6, icon: '📊' },
assistant: { name: 'AI Assistant', efficiency: 0.65, icon: '🤖' },
content: { name: 'Content Generation', efficiency: 0.75, icon: '✍️' },
vision: { name: 'Computer Vision', efficiency: 0.8, icon: '👁️' }
};
const metrics = {
time: { name: 'Risparmio Tempo', unit: 'ore/settimana' },
cost: { name: 'Riduzione Costi', unit: '€/mese' },
productivity: { name: 'Aumento Produttività', unit: '% miglioramento' },
customer: { name: 'Soddisfazione Cliente', unit: '% incremento' }
};
const calculateROI = () => {
const efficiency = aiTypes[aiType].efficiency;
const implementationCost = 5000;
const monthlyCost = 500;
let savings, roi, payback, yearlyValue;
switch(metric) {
case 'time':
const hoursPerWeek = frequency * efficiency;
const costPerHour = currentCost;
const weeklySavings = hoursPerWeek * costPerHour;
const monthlySavings = weeklySavings * 4.33;
yearlyValue = monthlySavings * 12;
savings = monthlySavings;
roi = ((yearlyValue - (implementationCost + monthlyCost * 12)) / (implementationCost + monthlyCost * 12)) * 100;
payback = implementationCost / monthlySavings;
break;
case 'cost':
const monthlyCostReduction = currentCost * employees * efficiency;
yearlyValue = monthlyCostReduction * 12;
savings = monthlyCostReduction;
roi = ((yearlyValue - (implementationCost + monthlyCost * 12)) / (implementationCost + monthlyCost * 12)) * 100;
payback = implementationCost / monthlyCostReduction;
break;
case 'productivity':
const productivityGain = (frequency / 100) * efficiency;
const valuePerEmployee = currentCost * employees;
const monthlyGain = valuePerEmployee * productivityGain;
yearlyValue = monthlyGain * 12;
savings = monthlyGain;
roi = ((yearlyValue - (implementationCost + monthlyCost * 12)) / (implementationCost + monthlyCost * 12)) * 100;
payback = implementationCost / monthlyGain;
break;
case 'customer':
const customerValue = currentCost;
const increaseRate = frequency / 100 * efficiency;
const newCustomers = employees * increaseRate;
const monthlyRevenue = newCustomers * customerValue;
yearlyValue = monthlyRevenue * 12;
savings = monthlyRevenue;
roi = ((yearlyValue - (implementationCost + monthlyCost * 12)) / (implementationCost + monthlyCost * 12)) * 100;
payback = implementationCost / monthlyRevenue;
break;
default:
savings = 0;
roi = 0;
payback = 0;
yearlyValue = 0;
}
setResults({
monthlySavings: savings,
yearlySavings: yearlyValue,
roi: roi,
paybackMonths: payback,
efficiency: efficiency * 100
});
};
useEffect(() => {
calculateROI();
}, [aiType, metric, employees, currentCost, frequency]);
return (
);
};
export default AIROICalculator;
{/* Header */}
AI ROI Calculator
Calcola il ritorno sull'investimento della tua soluzione AI
{/* Input Panel */}
{/* Metric Selection */}
{/* Dynamic Inputs */}
{/* Results Panel */}
{/* Info Footer */}
Configurazione
{/* AI Type Selection */}
setEmployees(Number(e.target.value))}
className="w-full bg-slate-700 border border-slate-600 text-white px-4 py-3 transition-all"
style={{ borderRadius: '2px', outline: 'none' }}
onFocus={(e) => e.target.style.borderColor = '#1F7BC6'}
onBlur={(e) => e.target.style.borderColor = '#475569'}
min="1"
/>
{metric === 'time' && (
Quanto costa in media un'ora di lavoro del tuo team
)} setCurrentCost(Number(e.target.value))} className="w-full bg-slate-700 border border-slate-600 text-white px-4 py-3 transition-all" style={{ borderRadius: '2px', outline: 'none' }} onFocus={(e) => e.target.style.borderColor = '#1F7BC6'} onBlur={(e) => e.target.style.borderColor = '#475569'} min="0" />
{metric === 'time' && (
Quante ore a settimana vengono dedicate a questa attività
)} setFrequency(Number(e.target.value))} className="w-full bg-slate-700 border border-slate-600 text-white px-4 py-3 transition-all" style={{ borderRadius: '2px', outline: 'none' }} onFocus={(e) => e.target.style.borderColor = '#1F7BC6'} onBlur={(e) => e.target.style.borderColor = '#475569'} min="0" />
{/* Efficiency Badge */}
{/* ROI Cards */}
{/* Detailed Results */}
{/* CTA */}
Efficienza AI
{results?.efficiency.toFixed(0)}%
Risparmio Mensile
€{results?.monthlySavings.toLocaleString('it-IT', {maximumFractionDigits: 0})}
ROI Annuale
{results?.roi > 0 ? '+' : ''}{results?.roi.toFixed(0)}%
Analisi Dettagliata
Risparmio Annuale
€{results?.yearlySavings.toLocaleString('it-IT', {maximumFractionDigits: 0})}
Periodo di Recupero
{results?.paybackMonths.toFixed(1)} mesi
Tipo Soluzione
{aiTypes[aiType].name}
Pronto a iniziare?
Contattaci per una consulenza personalizzata
* I calcoli sono stime basate su medie di settore. I risultati effettivi possono variare.