import React, { useState } from ‘react’;

// Main App Component for the Polygemma 4 Sinusuri interactive tool.
// This component manages the state and logic for the entire application.
const App = () => {
// State variables to track user selections.
const [ageGroup, setAgeGroup] = useState(null); // ‘adult_or_child_7_plus’ or ‘child_2_7’
const [condition, setCondition] = useState(null); // ‘acute’, ‘chronic’, or ‘prevention’
const [intensity, setIntensity] = useState(5); // Intensity from 1 to 10
const [showResults, setShowResults] = useState(false); // Controls visibility of results.
const [showWarnings, setShowWarnings] = useState(false); // Controls visibility of warnings.

// Component to display an animated message box.
const MessageBox = ({ message, type = ‘info’ }) => {
let bgColor = ”;
let textColor = ”;
let icon = ”;

// Set colors and icons based on the message type.
switch (type) {
case ‘info’:
// Use brand colors for info messages.
bgColor = ‘bg-blue-50’;
textColor = ‘text-blue-900’;
icon = (

);
break;
case ‘warning’:
// Keep a distinct color for warnings for better visibility.
bgColor = ‘bg-yellow-100’;
textColor = ‘text-yellow-800’;
icon = (

);
break;
default:
break;
}

return (

);
};

// Resets the application to its initial state.
const handleReset = () => {
setAgeGroup(null);
setCondition(null);
setIntensity(5);
setShowResults(false);
setShowWarnings(false);
};

// Handles the calculation and displays results.
const handleCalculate = () => {
if (!ageGroup || !condition) {
alert(‘Te rog să completezi grupa de vârstă și starea simptomelor!’);
return;
}
setShowResults(true);
};

// Determines and returns the appropriate dosing information based on user selections.
const getDosingInfo = () => {
let dosage, frequency, duration, tips;

// Calculate based on age group
if (ageGroup === ‘child_2_7′) {
dosage = ’10-15 picături’;
frequency = condition === ‘acute’ ? ‘4-5 ori pe zi (prima zi), apoi 2-3 ori pe zi’ : ‘2-3 ori pe zi’;
} else { // adult_or_child_7_plus
dosage = ‘1 ml (aprox. 25 picături)’;
frequency = condition === ‘acute’ ? ‘4-5 ori pe zi (prima zi), apoi 2-3 ori pe zi’ : ‘2-3 ori pe zi’;
}

// Adjust based on condition
switch (condition) {
case ‘acute’:
duration = ‘7 zile (1 zi intensiv + 6 zile standard)’;
tips = [
‘Administrează înainte de mese, diluat în puțină apă.’,
‘Dacă simptomele nu se ameliorează în 3 zile, consultă medicul.’,
‘Agită bine flaconul înainte de fiecare utilizare.’
];
break;

case ‘chronic’:
duration = ‘1-2 luni, cu posibilitate de repetare’;
tips = [
‘Ideal pentru cure prelungite pentru rezultate durabile.’,
‘Se poate repeta la nevoie, după o scurtă pauză.’
];
break;

case ‘prevention’:
duration = ‘3-4 săptămâni, de preferat toamna și primăvara’;
tips = [
‘Ideal pentru întărirea imunității respiratorii.’,
‘Se administrează de 2-3 ori pe zi.’
];
break;
default:
break;
}

// Add intensity-based notes
let intensityNote = ”;
if (intensity >= 8) {
intensityNote = ‘ (simptome severe – consultați medicul dacă nu se ameliorează)’;
} else if (intensity <= 3) { intensityNote = ' (simptome ușoare - doza poate fi ajustată după ameliorare)'; } // Return the formatted result return { dosage, frequency, duration, tips, intensityNote }; }; const results = showResults ? getDosingInfo() : {}; return (

{/* Using the provided logo URL with a fallback */}
{ e.target.onerror = null; e.target.src = “https://placehold.co/100×100/A0A0A0/FFFFFF?text=Logo”; }}
/>

Ghid interactiv Polygemma 4 – Sinusuri

Reset

setShowWarnings(!showWarnings)}
className=”px-4 py-2 text-sm sm:text-base bg-yellow-500 text-white rounded-lg shadow-md hover:bg-yellow-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2″
>
{showWarnings ? ‘Ascunde Atenționări’ : ‘Afișează Atenționări’}

{/* Dynamic section for warnings */}
{showWarnings && (

Atenționări Importante

)}

{/* Section to select age group */}

Selectați grupa de vârstă:

setAgeGroup(‘adult_or_child_7_plus’)}
className={`flex-1 p-4 rounded-lg shadow-lg border-2 transition-all duration-300 ${ageGroup === ‘adult_or_child_7_plus’ ? ‘bg-blue-600 text-white border-blue-700’ : ‘bg-white text-gray-700 border-gray-300 hover:bg-blue-50’}`}
>
Adulți și copii peste 7 ani

setAgeGroup(‘child_2_7’)}
className={`flex-1 p-4 rounded-lg shadow-lg border-2 transition-all duration-300 ${ageGroup === ‘child_2_7’ ? ‘bg-blue-600 text-white border-blue-700’ : ‘bg-white text-gray-700 border-gray-300 hover:bg-blue-50’}`}
>
Copii între 2 și 7 ani

{/* Section to select condition, visible only after age group is selected */}
{ageGroup && (

Care este situația dumneavoastră?

setCondition(‘acute’)}
className={`flex-1 p-4 rounded-lg shadow-lg border-2 transition-all duration-300 ${condition === ‘acute’ ? ‘bg-green-600 text-white border-green-700’ : ‘bg-white text-gray-700 border-gray-300 hover:bg-green-50’}`}
>
Simptome acute

setCondition(‘chronic’)}
className={`flex-1 p-4 rounded-lg shadow-lg border-2 transition-all duration-300 ${condition === ‘chronic’ ? ‘bg-green-600 text-white border-green-700’ : ‘bg-white text-gray-700 border-gray-300 hover:bg-green-50’}`}
>
Simptome cronice/recidivante

setCondition(‘prevention’)}
className={`flex-1 p-4 rounded-lg shadow-lg border-2 transition-all duration-300 ${condition === ‘prevention’ ? ‘bg-green-600 text-white border-green-700’ : ‘bg-white text-gray-700 border-gray-300 hover:bg-green-50’}`}
>
Prevenție

)}

{/* Intensity slider, visible only after a condition is selected */}
{condition && (

Intensitatea simptomelor: {intensity}/10

Ușor
setIntensity(e.target.value)}
className=”w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer range-lg dark:bg-gray-700″
/>
Sever

)}

{/* Calculate button */}
{(ageGroup && condition) && (

Calculează Dozajul Personalizat

)}

{/* Results section, visible only after calculation */}
{showResults && (

Recomandarea ta personalizată:

Dozaj: {results.dosage}

{results.frequency}

{results.duration}

{results.intensityNote}

}
type=”info”
/>

Sfaturi importante:

{results.tips.map((tip, index) => (
• {tip}

))}

}
type=”info”
/>

)}