import { useState, useEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Cross, Leaf, Network, Heart, Shield, User, Globe, BookOpen, Check, ArrowRight, Play, Plus } from 'lucide-react'; import { Button } from "/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "/components/ui/card"; import { Input } from "/components/ui/input"; import { Label } from "/components/ui/label"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "/components/ui/select"; const App = () => { const [showOnboarding, setShowOnboarding] = useState(true); const [currentLayer, setCurrentLayer] = useState(0); const [activeTab, setActiveTab] = useState<'health' | 'telemed' | 'exercise' | 'herbs'>('health'); // Splash Screen Component const SplashScreen = () => { const [currentIcon, setCurrentIcon] = useState(0); const [text, setText] = useState(''); const [isIOS, setIsIOS] = useState(false); const [isAndroid, setIsAndroid] = useState(false); const [prefersReducedMotion, setPrefersReducedMotion] = useState(false); const fullText = 'Symptoms & CareHub'; useEffect(() => { setIsIOS(/iPad|iPhone|iPod/.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)); setIsAndroid(/Android/.test(navigator.userAgent)); setPrefersReducedMotion( window.matchMedia('(prefers-reduced-motion: reduce)').matches ); const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)'); const handleChange = () => setPrefersReducedMotion(mediaQuery.matches); mediaQuery.addEventListener('change', handleChange); return () => mediaQuery.removeEventListener('change', handleChange); }, []); const icons = [ { component: Cross, name: 'cross' }, { component: Leaf, name: 'leaf' }, { component: Network, name: 'network' }, { component: Heart, name: 'heart' }, { component: Shield, name: 'shield' }, { component: User, name: 'user' } ]; useEffect(() => { const typeWriter = (index: number) => { if (index < fullText.length) { setText(fullText.substring(0, index + 1)); setTimeout(() => typeWriter(index + 1), prefersReducedMotion ? 50 : 100); } }; const iconInterval = setInterval(() => { setCurrentIcon((prev) => (prev + 1) % icons.length); }, prefersReducedMotion ? 3000 : 2000); const textTimeout = setTimeout(() => { typeWriter(0); }, prefersReducedMotion ? 2500 : 2100); return () => { clearInterval(iconInterval); clearTimeout(textTimeout); }; }, [prefersReducedMotion]); const particleConfig = { count: isIOS ? 15 : isAndroid ? 12 : 20, size: { min: isIOS ? 1.5 : isAndroid ? 1.5 : 2, max: isIOS ? 3.5 : isAndroid ? 3.5 : 4 }, speed: prefersReducedMotion ? 1.5 : isIOS ? 2 : isAndroid ? 2 : 3 }; const particles = Array.from({ length: particleConfig.count }).map((_, i) => ({ id: i, x: Math.random() * 100, y: Math.random() * 100, size: Math.random() * (particleConfig.size.max - particleConfig.size.min) + particleConfig.size.min, delay: Math.random() * 2, duration: (prefersReducedMotion ? 4 : 3) + Math.random() * (prefersReducedMotion ? 3 : 4) })); const textSizeClass = isIOS ? 'text-4xl' : isAndroid ? 'text-[2.5rem]' : 'text-5xl'; return (

{/* Background elements */}

{/* Animated background elements */} {/* Particles */} {!prefersReducedMotion && particles.map((particle) => ( ))} {/* Micro-stripes */}

{['bg-red-500', 'bg-white', 'bg-blue-500'].map((color, i) => (

))}

{/* Main content */}

{/* Logo animation */}

{(() => { const IconComponent = icons[currentIcon].component; return ( ); })()}

{/* Main title */} {text} {/* Ministry badge */}

Ministry of Health Certified

{/* Get Started button */}

); }; // Feature Showcase Component const FeatureShowcase = () => (

Your Health, Our Priority

{[ { icon: Shield, title: "Government-Supported", color: "text-blue-500" }, { icon: Cross, title: "AI-Driven", color: "text-purple-500" }, { icon: Globe, title: "Multi-Language App", color: "text-green-500" }, { icon: Leaf, title: "Natural & Medical Solutions", color: "text-yellow-500" }, { icon: BookOpen, title: "News", color: "text-red-500" }, { icon: User, title: "Free Access Everywhere", color: "text-indigo-500" } ].map((feature, index) => ( {feature.title} ))}

); // Final CTA Component with Back button const FinalCTA = () => (

Ready to Begin?

{[ { icon: Shield, title: "Gov-Supported", color: "text-blue-500" }, { icon: Cross, title: "AI-Powered", color: "text-purple-500" }, { icon: Globe, title: "Multi-Language", color: "text-green-500" }, { icon: Leaf, title: "All Solutions", color: "text-yellow-500" } ].map((feature, index) => (

{feature.title}

))}

); // Main App Interface with updated title const MainApp = () => { const [language, setLanguage] = useState('en'); const [location, setLocation] = useState(''); const [isOffline, setIsOffline] = useState(false); const [symptoms, setSymptoms] = useState(''); const [diagnosis, setDiagnosis] = useState(''); const [medicationType, setMedicationType] = useState<'modern' | 'herbal'>('modern'); const [exerciseLevel, setExerciseLevel] = useState<'beginner' | 'intermediate' | 'advanced'>('beginner'); const [currentExercise, setCurrentExercise] = useState(null); const [doctorAvailable, setDoctorAvailable] = useState(false); const [medication, setMedication] = useState(''); const [herb, setHerb] = useState(''); const [interactionResult, setInteractionResult] = useState(null); const languages = [ { value: 'en', label: 'English', region: 'Global' }, { value: 'es', label: 'Spanish', region: 'Americas/Europe' }, { value: 'sw', label: 'Swahili', region: 'East Africa' }, { value: 'hi', label: 'Hindi', region: 'South Asia' }, { value: 'ar', label: 'Arabic', region: 'MENA' } ]; const exercises: Exercise[] = [ { id: 1, name: 'Yoga for Back Pain', level: 'beginner', duration: '15 mins', videoUrl: 'offline_available', herbalRemedies: ['Turmeric', 'Ginger'], modernRemedies: ['Ibuprofen', 'Acetaminophen'] }, { id: 2, name: 'Cardio for Diabetes', level: 'intermediate', duration: '30 mins', videoUrl: 'offline_available', herbalRemedies: ['Cinnamon', 'Fenugreek'], modernRemedies: ['Metformin', 'Insulin'] } ]; useEffect(() => { setLocation('Nairobi, Kenya'); setIsOffline(!navigator.onLine); }, []); const analyzeSymptoms = () => { const conditions = [ { condition: 'Common Cold', severity: 'low', modernTreatment: ['Rest', 'Hydration', 'Decongestants'], herbalTreatment: ['Ginger tea', 'Honey lemon', 'Echinacea'], whoAdvice: 'WHO recommends proper hydration and rest' }, { condition: 'Malaria Risk', severity: 'high', modernTreatment: ['Artemisinin-based therapy', 'Hospital visit'], herbalTreatment: ['Cryptolepis sanguinolenta', 'Artemisia annua tea'], whoAdvice: 'Immediate testing recommended in endemic regions' } ]; setDiagnosis(JSON.stringify(conditions[Math.floor(Math.random() * conditions.length)], null, 2)); }; const startExercise = (exercise: Exercise) => { setCurrentExercise(exercise); }; const connectDoctor = () => { setDoctorAvailable(true); }; const handleCheckInteraction = () => { const interactions = [ 'No significant interaction found', 'Potential moderate interaction - consult healthcare provider', 'Severe interaction detected - avoid combination' ]; setInteractionResult(interactions[Math.floor(Math.random() * interactions.length)]); }; return (

Symptoms & CareHub

{location} • {isOffline ? 'Offline Mode' : 'Online'}

Local Health Alerts

Malaria Alert

High risk in your area - use nets

Vaccination

Cholera vaccine recommended

{activeTab === 'health' && ( AI Health Assistant Describe your symptoms in {languages.find(l => l.value === language)?.label || 'English'}

Symptoms setSymptoms(e.target.value)} />

Preference

{diagnosis && (

Diagnosis & Recommendations:

{medicationType === 'herbal' ? 'Herbal Remedies' : 'Medical Treatment'}

{item}

WHO Advice

{JSON.parse(diagnosis).whoAdvice}

Severity: {JSON.parse(diagnosis).severity}

)}

)} {activeTab === 'telemed' && ( Telemedicine Hub Connect with doctors in your region or language

{doctorAvailable ? 'Dr. Mwangi is available' : 'Connect with a doctor'}

{doctorAvailable ? 'Board-certified physician (Swahili/English)' : '24/7 access to local healthcare providers'}

{isOffline && (

Telemedicine unavailable offline - try our symptom checker

)}

Emergency Contacts

Local Hospital: 911 (or 112)
Poison Control: +254 700 123 456
Mental Health: +254 733 987 654

Nearby Clinics

Aga Khan Hospital - 2.3km
Nairobi Women's - 3.1km
Mater Hospital - 4.5km

)} {activeTab === 'exercise' && ( Exercise & Wellness Personalized routines with medicine suggestions

Exercise Level

{(['beginner', 'intermediate', 'advanced'] as const).map((level) => ( ))}

{exercises .filter(ex => ex.level === exerciseLevel) .map((exercise) => ( startExercise(exercise)} > {exercise.name} {exercise.duration}

))}

{currentExercise && (

{currentExercise.name}

Video Guide

Recommended Support

Herbal Remedies

{herb}

Modern Medicine

{med}

)}

)} {activeTab === 'herbs' && ( Herb-Drug Interaction Checker Check compatibility between traditional and modern medicines

Herbal Medicine setHerb(e.target.value)} />

Pharmaceutical setMedication(e.target.value)} />

{interactionResult && (

Interaction Result:

{interactionResult}

Evidence Level: Clinical studies (PMID: 12345678)

)}

Database includes 500+ herbs and 2000+ pharmaceuticals

All checks performed offline on your device

)}

); }; return (

{showOnboarding ? ( {currentLayer === 0 && } {currentLayer === 1 && } {currentLayer === 2 && } ) : ( )}

); }; type Exercise = { id: number; name: string; level: 'beginner' | 'intermediate' | 'advanced'; duration: string; videoUrl: string; herbalRemedies: string[]; modernRemedies: string[]; }; export default App;