import React, { useState } from 'react';
const BalanceBreakthroughCalculator = () => {
// State for each input value
const [timeSpent, setTimeSpent] = useState({
worrying: 5,
reReminding: 5,
cleaning: 5,
searching: 3,
planning: 5,
arguments: 3
});
const [selfCare, setSelfCare] = useState({
sleep: 42,
exercise: 2,
hobbies: 2
});
const [stressLevel, setStressLevel] = useState(5);
const [showResults, setShowResults] = useState(false);
// Calculate time wasted per week
const calculateTimeWasted = () => {
return Object.values(timeSpent).reduce((sum, current) => sum + Number(current), 0);
};
// Calculate time wasted per year
const calculateTimeWastedYearly = () => {
return calculateTimeWasted() * 52;
};
// Calculate self-care deficit
const calculateSelfCareDeficit = () => {
const idealSleep = 49; // 7 hours/day
const idealExercise = 3; // 3 hours/week
const idealHobbies = 5; // 5 hours/week
const sleepDeficit = Math.max(0, idealSleep - Number(selfCare.sleep));
const exerciseDeficit = Math.max(0, idealExercise - Number(selfCare.exercise));
const hobbiesDeficit = Math.max(0, idealHobbies - Number(selfCare.hobbies));
return {
sleepDeficit,
exerciseDeficit,
hobbiesDeficit,
total: sleepDeficit + exerciseDeficit + hobbiesDeficit
};
};
// Calculate potential time saved with Balance
const calculatePotentialTimeSaved = () => {
// Assume Balance helps reclaim 60% of wasted time
return Math.round(calculateTimeWasted() * 0.6);
};
// Calculate potential self-care improvement
const calculatePotentialSelfCareImprovement = () => {
const deficit = calculateSelfCareDeficit();
// Assume Balance helps recover 50% of self-care deficit
return Math.round(deficit.total * 0.5);
};
// Calculate potential stress reduction (on scale of 1-10)
const calculatePotentialStressReduction = () => {
const currentStress = Number(stressLevel);
if (currentStress <= 3) return Math.max(1, currentStress - 1);
if (currentStress <= 6) return Math.max(1, currentStress - 2);
return Math.max(1, currentStress - 3);
};
// Handle form submission
const handleSubmit = (e) => {
e.preventDefault();
setShowResults(true);
// In a real implementation, you might send this data to your backend
console.log('Form submitted with values:', {timeSpent, selfCare, stressLevel});
};
return (
<div className="max-w-3xl mx-auto bg-white rounded-lg shadow-lg p-6">
<div className="text-center mb-8">
<h2 className="text-2xl font-bold text-indigo-800 mb-2">Balance Breakthrough Calculator</h2>
<p className="text-gray-600">Discover how much time, energy and peace the Balance program could help you reclaim</p>
</div>
{!showResults ? (
<form onSubmit={handleSubmit}>
<div className="mb-8">
<h3 className="text-xl font-bold text-indigo-700 mb-4">Time Drains (hours per week)</h3>
<div className="grid md:grid-cols-2 gap-4">
<div>
<label className="block text-gray-700 mb-2">Hours spent worrying about tasks:</label>
<input
type="range"
min="0"
max="20"
value={timeSpent.worrying}
onChange={(e) => setTimeSpent({...timeSpent, worrying: e.target.value})}
className="w-full"
/>
<div className="flex justify-between text-gray-500 text-sm">
<span>0</span>
<span>{timeSpent.worrying}</span>
<span>20</span>
</div>
</div>
<div>
<label className="block text-gray-700 mb-2">Hours spent re-reminding family members:</label>
<input
type="range"
min="0"
max="15"
value={timeSpent.reReminding}
onChange={(e) => setTimeSpent({...timeSpent, reReminding: e.target.value})}
className="w-full"
/>
<div className="flex justify-between text-gray-500 text-sm">
<span>0</span>
<span>{timeSpent.reReminding}</span>
<span>15</span>
</div>
</div>
<div>
<label className="block text-gray-700 mb-2">Hours spent cleaning up after others:</label>
<input
type="range"
min="0"
max="20"
value={timeSpent.cleaning}
onChange={(e) => setTimeSpent({...timeSpent, cleaning: e.target.value})}
className="w-full"
/>
<div className="flex justify-between text-gray-500 text-sm">
<span>0</span>
<span>{timeSpent.cleaning}</span>
<span>20</span>
</div>
</div>
<div>
<label className="block text-gray-700 mb-2">Hours spent searching for lost items:</label>
<input
type="range"
min="0"
max="10"
value={timeSpent.searching}
onChange={(e) => setTimeSpent({...timeSpent, searching: e.target.value})}
className="w-full"
/>
<div className="flex justify-between text-gray-500 text-sm">
<span>0</span>
<span>{timeSpent.searching}</span>
<span>10</span>
</div>
</div>
<div>
<label className="block text-gray-700 mb-2">Hours spent in family arguments:</label>
<input
type="range"
min="0"
max="10"
value={timeSpent.arguments}
onChange={(e) => setTimeSpent({...timeSpent, arguments: e.target.value})}
className="w-full"
/>
<div className="flex justify-between text-gray-500 text-sm">
<span>0</span>
<span>{timeSpent.arguments}</span>
<span>10</span>
</div>
</div>
<div>
<label className="block text-gray-700 mb-2">Hours spent planning/organizing:</label>
<input
type="range"
min="0"
max="15"
value={timeSpent.planning}
onChange={(e) => setTimeSpent({...timeSpent, planning: e.target.value})}
className="w-full"
/>
<div className="flex justify-between text-gray-500 text-sm">
<span>0</span>
<span>{timeSpent.planning}</span>
<span>15</span>
</div>
</div>
</div>
</div>
<div className="mb-8">
<h3 className="text-xl font-bold text-indigo-700 mb-4">Self-Care (hours per week)</h3>
<div className="grid md:grid-cols-3 gap-4">
<div>
<label className="block text-gray-700 mb-2">Hours of sleep (per week):</label>
<input
type="range"
min="28"
max="70"
value={selfCare.sleep}
onChange={(e) => setSelfCare({...selfCare, sleep: e.target.value})}
className="w-full"
/>
<div className="flex justify-between text-gray-500 text-sm">
<span>28</span>
<span>{selfCare.sleep}</span>
<span>70</span>
</div>
</div>
<div>
<label className="block text-gray-700 mb-2">Hours of exercise:</label>
<input
type="range"
min="0"
max="10"
value={selfCare.exercise}
onChange={(e) => setSelfCare({...selfCare, exercise: e.target.value})}
className="w-full"
/>
<div className="flex justify-between text-gray-500 text-sm">
<span>0</span>
<span>{selfCare.exercise}</span>
<span>10</span>
</div>
</div>
<div>
<label className="block text-gray-700 mb-2">Hours for hobbies/interests:</label>
<input
type="range"
min="0"
max="15"
value={selfCare.hobbies}
onChange={(e) => setSelfCare({...selfCare, hobbies: e.target.value})}
className="w-full"
/>
<div className="flex justify-between text-gray-500 text-sm">
<span>0</span>
<span>{selfCare.hobbies}</span>
<span>15</span>
</div>
</div>
</div>
</div>
<div className="mb-8">
<h3 className="text-xl font-bold text-indigo-700 mb-4">Current Stress Level</h3>
<div>
<input
type="range"
min="1"
max="10"
value={stressLevel}
onChange={(e) => setStressLevel(e.target.value)}
className="w-full"
/>
<div className="flex justify-between text-gray-500">
<span>1<br/><span className="text-xs">Low Stress</span></span>
<span>5<br/><span className="text-xs">Moderate</span></span>
<span>10<br/><span className="text-xs">High Stress</span></span>
</div>
<div className="text-center mt-2 font-bold">
Your current stress level: {stressLevel}/10
</div>
</div>
</div>
<div className="text-center">
<button
type="submit"
className="bg-indigo-700 hover:bg-indigo-800 text-white font-bold py-3 px-6 rounded-lg transition duration-300"
>
Calculate My Balance Breakthrough
</button>
</div>
</form>
) : (
<div className="results">
<div className="bg-indigo-50 rounded-lg p-6 mb-8">
<h3 className="text-xl font-bold text-indigo-800 mb-4">Your Balance Breakthrough Results</h3>
<div className="grid md:grid-cols-2 gap-8">
<div className="bg-white rounded-lg p-5 shadow-md">
<h4 className="text-lg font-bold text-indigo-700 mb-3">Time Analysis</h4>
<p className="text-gray-700 mb-2">Hours wasted weekly: <span className="font-bold text-red-600">{calculateTimeWasted()}</span></p>
<p className="text-gray-700 mb-2">Hours wasted yearly: <span className="font-bold text-red-600">{calculateTimeWastedYearly()}</span></p>
<p className="text-gray-700 mb-2">Potential hours saved weekly with Balance: <span className="font-bold text-green-600">{calculatePotentialTimeSaved()}</span></p>
<div className="mt-4 bg-gray-100 p-3 rounded">
<p className="text-sm text-gray-600">That's <span className="font-bold">{Math.round(calculatePotentialTimeSaved() * 52)}</span> hours per year you could reclaim!</p>
</div>
</div>
<div className="bg-white rounded-lg p-5 shadow-md">
<h4 className="text-lg font-bold text-indigo-700 mb-3">Self-Care Analysis</h4>
<p className="text-gray-700 mb-2">Weekly self-care deficit: <span className="font-bold text-red-600">{calculateSelfCareDeficit().total}</span> hours</p>
<p className="text-gray-700 mb-2">Potential weekly self-care gain: <span className="font-bold text-green-600">{calculatePotentialSelfCareImprovement()}</span> hours</p>
<p className="text-gray-700 mb-2">Current stress level: <span className="font-bold text-red-600">{stressLevel}/10</span></p>
<p className="text-gray-700 mb-2">Potential stress level with Balance: <span className="font-bold text-green-600">{calculatePotentialStressReduction()}/10</span></p>
</div>
</div>
<div className="mt-8 bg-indigo-100 p-5 rounded-lg">
<h4 className="text-lg font-bold text-indigo-800 mb-3">What This Means For You</h4>
<p className="text-gray-700 mb-3">With the Balance program, you could potentially:</p>
<ul className="list-disc pl-5 text-gray-700 space-y-2">
<li>Reclaim <span className="font-bold">{calculatePotentialTimeSaved()}</span> hours every week (that's like getting an extra {Math.floor(calculatePotentialTimeSaved()/24)} days each month!)</li>
<li>Add <span className="font-bold">{calculatePotentialSelfCareImprovement()}</span> hours of self-care to your weekly routine</li>
<li>Reduce your stress level by approximately {stressLevel - calculatePotentialStressReduction()} points</li>
<li>Create systems that eliminate approximately {Math.round(calculateTimeWasted() * 0.6 * 52)} hours of frustration per year</li>
</ul>
</div>
</div>
<div className="text-center space-y-4">
<h3 className="text-xl font-bold text-indigo-800">Ready to Reclaim Your Time & Sanity?</h3>
<p className="text-gray-700">Join the Balance program and start implementing proven systems that work for busy moms.</p>
<div className="flex flex-col sm:flex-row justify-center gap-4 mt-4">
<button className="bg-indigo-700 hover:bg-indigo-800 text-white font-bold py-3 px-6 rounded-lg transition duration-300">
Join Balance Now
</button>
<button
onClick={() => setShowResults(false)}
className="bg-white border-2 border-indigo-700 hover:bg-indigo-50 text-indigo-700 font-bold py-3 px-6 rounded-lg transition duration-300"
>
Recalculate
</button>
</div>
</div>
</div>
)}
</div>
);
};
export default BalanceBreakthroughCalculator;
