demeter
Autonomous Hydroponic Intelligencegit clone https://github.com/maydayv7/demeter
frontend/src/pages/Help.jsx (79153B)
1import React, { useState } from "react";
2import { useNavigate } from "react-router-dom";
3import {
4 AlertTriangle,
5 ArrowLeft,
6 BarChart3,
7 BookOpen,
8 Bot,
9 ChevronDown,
10 ChevronRight,
11 Cpu,
12 Droplets,
13 Eye,
14 FlaskConical,
15 HandMetal,
16 HelpCircle,
17 Info,
18 Leaf,
19 Sparkles,
20 Thermometer,
21 Wind,
22 Zap,
23} from "lucide-react";
24import { useT } from "../hooks/useTranslation";
25import { PrimaryButton } from "../components/ui";
26
27// Data
28
29const TERMS = [
30 {
31 id: "ph",
32 icon: FlaskConical,
33 color: "var(--blue)",
34 labelKey: "help_term_ph",
35 shortKey: "help_term_ph_short",
36 simpleKey: "help_term_ph_simple",
37 detailKey: "help_term_ph_detail",
38 rangeKey: "help_term_ph_range",
39 lowKey: "help_term_ph_low",
40 highKey: "help_term_ph_high",
41 aiActionKey: "help_term_ph_ai",
42 manualKey: "help_term_ph_manual",
43 agriKey: "help_term_ph_agri",
44 },
45 {
46 id: "ec",
47 icon: Zap,
48 color: "var(--amber)",
49 labelKey: "help_term_ec",
50 shortKey: "help_term_ec_short",
51 simpleKey: "help_term_ec_simple",
52 detailKey: "help_term_ec_detail",
53 rangeKey: "help_term_ec_range",
54 lowKey: "help_term_ec_low",
55 highKey: "help_term_ec_high",
56 aiActionKey: "help_term_ec_ai",
57 manualKey: "help_term_ec_manual",
58 agriKey: "help_term_ec_agri",
59 },
60 {
61 id: "humidity",
62 icon: Droplets,
63 color: "var(--blue)",
64 labelKey: "help_term_humidity",
65 shortKey: "help_term_humidity_short",
66 simpleKey: "help_term_humidity_simple",
67 detailKey: "help_term_humidity_detail",
68 rangeKey: "help_term_humidity_range",
69 lowKey: "help_term_humidity_low",
70 highKey: "help_term_humidity_high",
71 aiActionKey: "help_term_humidity_ai",
72 manualKey: "help_term_humidity_manual",
73 agriKey: "help_term_humidity_agri",
74 },
75 {
76 id: "temp",
77 icon: Thermometer,
78 color: "var(--red)",
79 labelKey: "help_term_temp",
80 shortKey: "help_term_temp_short",
81 simpleKey: "help_term_temp_simple",
82 detailKey: "help_term_temp_detail",
83 rangeKey: "help_term_temp_range",
84 lowKey: "help_term_temp_low",
85 highKey: "help_term_temp_high",
86 aiActionKey: "help_term_temp_ai",
87 manualKey: "help_term_temp_manual",
88 agriKey: "help_term_temp_agri",
89 },
90];
91
92const AI_AGENTS = [
93 {
94 id: "fetch",
95 icon: Eye,
96 color: "var(--blue)",
97 nameKey: "help_agent_fetch_name",
98 roleKey: "help_agent_fetch_role",
99 detailKey: "help_agent_fetch_detail",
100 },
101 {
102 id: "judge",
103 icon: BarChart3,
104 color: "var(--amber)",
105 nameKey: "help_agent_judge_name",
106 roleKey: "help_agent_judge_role",
107 detailKey: "help_agent_judge_detail",
108 },
109 {
110 id: "strategy",
111 icon: Cpu,
112 color: "var(--green)",
113 nameKey: "help_agent_strategy_name",
114 roleKey: "help_agent_strategy_role",
115 detailKey: "help_agent_strategy_detail",
116 },
117 {
118 id: "research",
119 icon: BookOpen,
120 color: "var(--blue)",
121 nameKey: "help_agent_research_name",
122 roleKey: "help_agent_research_role",
123 detailKey: "help_agent_research_detail",
124 },
125 {
126 id: "execute",
127 icon: Bot,
128 color: "var(--green)",
129 nameKey: "help_agent_execute_name",
130 roleKey: "help_agent_execute_role",
131 detailKey: "help_agent_execute_detail",
132 },
133 {
134 id: "explainer",
135 icon: HelpCircle,
136 color: "var(--amber)",
137 nameKey: "help_agent_explainer_name",
138 roleKey: "help_agent_explainer_role",
139 detailKey: "help_agent_explainer_detail",
140 },
141 {
142 id: "atmospheric",
143 icon: Wind,
144 color: "var(--amber)",
145 nameKey: "help_agent_atmospheric_name",
146 roleKey: "help_agent_atmospheric_role",
147 detailKey: "help_agent_atmospheric_detail",
148 },
149 {
150 id: "water",
151 icon: Droplets,
152 color: "var(--blue)",
153 nameKey: "help_agent_water_name",
154 roleKey: "help_agent_water_role",
155 detailKey: "help_agent_water_detail",
156 },
157 {
158 id: "supervisor",
159 icon: Sparkles,
160 color: "var(--green)",
161 nameKey: "help_agent_supervisor_name",
162 roleKey: "help_agent_supervisor_role",
163 detailKey: "help_agent_supervisor_detail",
164 },
165 {
166 id: "doctor",
167 icon: Eye,
168 color: "var(--red)",
169 nameKey: "help_agent_doctor_name",
170 roleKey: "help_agent_doctor_role",
171 detailKey: "help_agent_doctor_detail",
172 },
173];
174
175const STAGES = [
176 {
177 id: "seedling",
178 emoji: "🌱",
179 nameKey: "help_stage_seedling",
180 descKey: "help_stage_seedling_desc",
181 tipsKey: "help_stage_seedling_tips",
182 },
183 {
184 id: "vegetative",
185 emoji: "🌿",
186 nameKey: "help_stage_vegetative",
187 descKey: "help_stage_vegetative_desc",
188 tipsKey: "help_stage_vegetative_tips",
189 },
190 {
191 id: "flowering",
192 emoji: "🌸",
193 nameKey: "help_stage_flowering",
194 descKey: "help_stage_flowering_desc",
195 tipsKey: "help_stage_flowering_tips",
196 },
197 {
198 id: "fruiting",
199 emoji: "🍅",
200 nameKey: "help_stage_fruiting",
201 descKey: "help_stage_fruiting_desc",
202 tipsKey: "help_stage_fruiting_tips",
203 },
204];
205
206const MANUAL_SCENARIOS = [
207 {
208 id: "disease",
209 icon: AlertTriangle,
210 color: "var(--red)",
211 titleKey: "help_manual_disease_title",
212 descKey: "help_manual_disease_desc",
213 actionKey: "help_manual_disease_action",
214 },
215 {
216 id: "equipment",
217 icon: Cpu,
218 color: "var(--amber)",
219 titleKey: "help_manual_equip_title",
220 descKey: "help_manual_equip_desc",
221 actionKey: "help_manual_equip_action",
222 },
223 {
224 id: "harvest",
225 icon: Leaf,
226 color: "var(--green)",
227 titleKey: "help_manual_harvest_title",
228 descKey: "help_manual_harvest_desc",
229 actionKey: "help_manual_harvest_action",
230 },
231 {
232 id: "extreme",
233 icon: Wind,
234 color: "var(--red)",
235 titleKey: "help_manual_extreme_title",
236 descKey: "help_manual_extreme_desc",
237 actionKey: "help_manual_extreme_action",
238 },
239];
240
241// Translations
242
243const HELP_EN = {
244 help_title: "Help & Glossary",
245 help_subtitle: "Everything you need to know - explained simply",
246 help_section_terms: "📊 Sensor Terms Explained",
247 help_section_agents: "🤖 How AI Works for You",
248 help_section_stages: "🌱 Growth Stages",
249 help_section_manual: "🖐 When You Need to Act",
250 help_section_ai_cta: "Still have questions?",
251 help_ai_cta_desc: "Ask our Farm Intelligence AI anything about your crops",
252 help_ai_cta_btn: "Ask AI →",
253 help_range_label: "Ideal Range",
254 help_low_label: "Too Low",
255 help_high_label: "Too High",
256 help_ai_label: "AI Auto-Action",
257 help_manual_label: "Manual Needed When",
258 help_agri_label: "Why It Matters",
259 help_tab_simple: "Simple",
260 help_tab_detail: "Detailed",
261
262 // pH
263 help_term_ph: "pH (Acidity of Water)",
264 help_term_ph_short: "pH",
265 help_term_ph_simple:
266 "pH tells you if the water is sour (acidic) or bitter (alkaline). Think of lemon juice (very sour = low pH) vs. baking soda (bitter = high pH). Plants need water that is slightly acidic - not too sour, not too bitter.",
267 help_term_ph_detail:
268 "pH is measured on a scale from 0 to 14. A value of 7 is neutral (pure water). Below 7 is acidic. Above 7 is alkaline. In hydroponics, root cells absorb nutrients through a process that depends on water chemistry. If pH is wrong, roots physically cannot absorb nutrients even if they are present in the water.",
269 help_term_ph_range: "5.5 - 6.5",
270 help_term_ph_low:
271 "Roots get damaged. Iron and manganese become toxic. Leaves turn yellow. Plant looks sick.",
272 help_term_ph_high:
273 "Nutrients lock up - plant cannot absorb calcium, magnesium, or iron. Leaves look pale and growth slows.",
274 help_term_ph_ai:
275 "If pH drops below 5.5, Demeter automatically doses base solution (pH Up) into the water. If pH rises above 6.5, it doses acid (pH Down). This happens within minutes without you needing to do anything.",
276 help_term_ph_manual:
277 "If pH keeps changing every hour even after dosing, your dosing pump may be broken or the tank may need a full water change. You will need to physically inspect the equipment.",
278 help_term_ph_agri:
279 "In traditional soil farming, pH affects nutrient availability too, but soil buffers changes slowly. In hydroponics, pH can shift within hours, so constant monitoring is critical. A wrong pH is the #1 cause of nutrient deficiency in hydroponic systems worldwide.",
280
281 // EC
282 help_term_ec: "EC (Electrical Conductivity / Nutrient Strength)",
283 help_term_ec_short: "EC",
284 help_term_ec_simple:
285 "EC measures how many nutrients are dissolved in your water. Think of it like making tea - a little tea is fine, but too much tea (very dark) can be bitter and harmful. EC tells you if your water has the right amount of 'food' for the plant.",
286 help_term_ec_detail:
287 "EC (Electrical Conductivity) is measured in dS/m (deciSiemens per meter). Pure water conducts very little electricity. When you dissolve fertilizer salts in water, it conducts more electricity. The sensor measures this to determine nutrient concentration. High EC means too many salts - this draws water OUT of roots (osmotic stress). Low EC means the plant is not getting enough food.",
288 help_term_ec_range: "0.8 - 2.5 dS/m",
289 help_term_ec_low:
290 "Plant is starving. Leaves become pale, growth slows, and yield drops. The plant has water but no food.",
291 help_term_ec_high:
292 "Nutrient burn. Leaf edges turn brown and crispy. Roots are under severe stress. In extreme cases the plant wilts even in wet conditions.",
293 help_term_ec_ai:
294 "If EC is too low, Demeter adds concentrated nutrient solution automatically. If EC is too high, it triggers water dilution (adding plain water to reduce concentration). The reinforcement learning agent adjusts the dose based on what worked in previous cycles.",
295 help_term_ec_manual:
296 "If EC spikes suddenly without explanation, it may indicate a pump failure delivering pure nutrient concentrate or contamination. Physically check the nutrient reservoir and all dosing lines.",
297 help_term_ec_agri:
298 "In soil farming, nutrients bind to soil particles and release slowly - this naturally buffers EC. In hydroponics, nutrients are directly in solution, making EC much more sensitive. Different crops need different EC: leafy greens prefer lower EC (0.8-1.6), while fruiting crops like tomatoes tolerate higher levels (2.0-3.5).",
299
300 // Humidity
301 help_term_humidity: "Humidity (Moisture in Air)",
302 help_term_humidity_short: "Humidity",
303 help_term_humidity_simple:
304 "Humidity is how wet or dry the air feels. On a very humid day, you feel sweaty and sticky. Plants also 'breathe' through tiny holes in their leaves. If air is too wet, these holes clog and fungus grows. If air is too dry, leaves lose water too fast and wilt.",
305 help_term_humidity_detail:
306 "Humidity is measured as Relative Humidity (RH%) - the percentage of moisture in the air compared to the maximum it can hold at that temperature. Plants exchange gases and water vapor through structures called stomata (tiny pores). High humidity reduces evaporation from leaves, slowing the plant's 'transpiration pump' which is what drives nutrient uptake. Very high humidity (above 85%) creates perfect conditions for fungal diseases like powdery mildew and botrytis.",
307 help_term_humidity_range: "40% - 80% RH",
308 help_term_humidity_low:
309 "Leaves curl and dry out. Stomata close to conserve water, halting photosynthesis and nutrient absorption. Severe drought stress.",
310 help_term_humidity_high:
311 "Fungal disease risk skyrockets. Powdery mildew, gray mold, and root rot become likely. Condensation on leaves also prevents photosynthesis.",
312 help_term_humidity_ai:
313 "Demeter controls fan speed automatically to regulate airflow and humidity. If humidity is high, fans speed up to improve air circulation. If it's too low, fans slow down. The atmospheric agent monitors and adjusts this continuously.",
314 help_term_humidity_manual:
315 "If humidity stays critically high despite maximum fan speed, it may indicate a structural issue - poor ventilation design, leaking irrigation, or a broken HVAC system. You will need physical intervention to fix the root cause.",
316 help_term_humidity_agri:
317 "In open-field farming, humidity is weather-dependent and uncontrollable. Indoor/hydroponic farming's great advantage is humidity control. Controlling humidity in the 60-70% range during vegetative growth, then dropping to 40-50% during flowering dramatically reduces disease pressure and improves yields.",
318
319 // Temperature
320 help_term_temp: "Temperature (Heat in the Air)",
321 help_term_temp_short: "Temperature",
322 help_term_temp_simple:
323 "Temperature is how hot or cold the air is. Plants are like people - they prefer a comfortable temperature. Too cold and they 'slow down' and stop growing. Too hot and they get heat stroke, and bacteria in the water can multiply rapidly.",
324 help_term_temp_detail:
325 "Air temperature directly affects the rate of photosynthesis, respiration, enzyme activity, and transpiration in plants. The nutrient solution temperature is equally important - warm water holds less dissolved oxygen (DO), and roots need oxygen to function. Most hydroponic crops prefer 18-28°C air temperature. Below 15°C, enzymatic reactions slow dramatically. Above 30°C, nutrient uptake becomes erratic, and pathogenic bacteria proliferate in the root zone.",
326 help_term_temp_range: "18°C - 28°C",
327 help_term_temp_low:
328 "Growth nearly stops. Roots may rot in cold water. Germination fails. Plant looks stunted and dark.",
329 help_term_temp_high:
330 "Roots suffocate (low dissolved oxygen). Pythium (root rot) explodes. Nutrient uptake becomes chaotic. Plant wilts despite having water.",
331 help_term_temp_ai:
332 "Demeter adjusts fan speed to control temperature. In warm conditions, fans run at full speed to remove heat. The atmospheric agent also considers humidity simultaneously. If temperature goes critically out of range, a CRITICAL alert is sent immediately.",
333 help_term_temp_manual:
334 "If temperature stays critically high despite maximum ventilation, you may need to add air conditioning, shade cloth, or cooling fans externally. If critically cold, a heater or grow light adjustment is needed. These are physical infrastructure changes the AI cannot make.",
335 help_term_temp_agri:
336 "Temperature management is one of the biggest advantages of indoor farming. In the field, late frost can kill an entire harvest overnight. Controlled environments eliminate this risk. Research shows that keeping temperature stable (minimal fluctuation between day/night) significantly improves nutrient uptake efficiency and reduces stress-related yield losses.",
337
338 // Agents
339 help_agent_fetch_name: "Fetch Agent",
340 help_agent_fetch_role: "Reads all sensor data",
341 help_agent_fetch_detail:
342 "This agent collects pH, EC, temperature, humidity readings and any plant images. It's the eyes and ears of the system - everything starts here.",
343
344 help_agent_judge_name: "Judge Agent",
345 help_agent_judge_role: "Evaluates crop health",
346 help_agent_judge_detail:
347 "Using the sensor data, this agent scores the health of each crop and identifies which parameters are out of range. It flags Critical, Attention, or Healthy status.",
348
349 help_agent_strategy_name: "Strategy Agent",
350 help_agent_strategy_role: "Decides what action to take",
351 help_agent_strategy_detail:
352 "This is the brain. It uses reinforcement learning - it has learned from thousands of past cycles what actions work best for each crop type and situation. It picks the best corrective action.",
353
354 help_agent_research_name: "Research Agent",
355 help_agent_research_role: "Checks memory for similar cases",
356 help_agent_research_detail:
357 "Before acting, this agent searches through all past crop histories in its memory (Qdrant vector database) to find similar situations. It uses those precedents to refine the strategy.",
358
359 help_agent_execute_name: "Execute Agent",
360 help_agent_execute_role: "Sends commands to hardware",
361 help_agent_execute_detail:
362 "Once a plan is confirmed, this agent sends the actual commands to physical actuators - pumps, fans, dosing systems. It turns digital decisions into real-world actions.",
363
364 help_agent_explainer_name: "Explainer Agent",
365 help_agent_explainer_role: "Writes the reasoning in plain language",
366 help_agent_explainer_detail:
367 'After each cycle, this agent writes a human-readable explanation of what happened and why. That\'s what you see in the "AI Decision Reasoning" section of each crop.',
368
369 help_agent_atmospheric_name: "Atmospheric Agent",
370 help_agent_atmospheric_role: "Controls climate and airflow",
371 help_agent_atmospheric_detail:
372 "This agent manages fan speed, temperature, and humidity. It calculates Vapor Pressure Deficit (VPD) and adjusts airflow continuously to keep the growing environment in the optimal range for the crop type and current growth stage.",
373
374 help_agent_water_name: "Water Agent",
375 help_agent_water_role: "Manages nutrient solution and pH",
376 help_agent_water_detail:
377 "This agent calculates the precise dosage of acid, base, and nutrient solution needed to correct pH and EC levels. It uses a physics-based model of the water tank to predict how much dosing is required, then refines it with what the RL agent has learned from past cycles.",
378
379 help_agent_supervisor_name: "Supervisor Agent",
380 help_agent_supervisor_role: "Merges plans and sends final commands",
381 help_agent_supervisor_detail:
382 "The supervisor combines the plans from the Atmospheric and Water agents, validates them against the Strategy agent's recommendation, and dispatches the final actuator commands to the hardware. It is the last AI step before any physical action is taken.",
383
384 help_agent_doctor_name: "Doctor Agent",
385 help_agent_doctor_role: "Diagnoses plant health visually",
386 help_agent_doctor_detail:
387 "Using computer vision (Azure CV), this agent analyzes the plant image uploaded during each cycle to detect disease, pest damage, or visual anomalies. Its diagnosis is attached to the cycle log and can trigger critical alerts even when sensor readings appear normal.",
388
389 // Growth Stages
390 help_stage_seedling: "Seedling",
391 help_stage_seedling_desc:
392 "The plant has just sprouted from a seed. It's tiny, fragile, and just starting to grow its first leaves.",
393 help_stage_seedling_tips:
394 "🌡️ Keep temperature warm (22-26°C). 💧 Keep EC very low (0.5-1.0) - too much nutrient overwhelms fragile roots. 💡 Light should be gentle. This is the most fragile stage.",
395
396 help_stage_vegetative: "Vegetative",
397 help_stage_vegetative_desc:
398 "The plant is growing leaves and stems rapidly. It's building its structure before it starts making flowers or fruit.",
399 help_stage_vegetative_tips:
400 "🌿 Increase nutrient strength (EC 1.2-2.0). 💧 Maintain humidity at 60-70%. This is when the plant grows fastest - it needs maximum nutrition.",
401
402 help_stage_flowering: "Flowering",
403 help_stage_flowering_desc:
404 "The plant starts making flowers. This is a critical stage - conditions here directly affect how much fruit or produce you'll get.",
405 help_stage_flowering_tips:
406 "🌸 Reduce humidity to 50-60% to prevent bud rot. 🧪 Adjust nutrients - lower nitrogen, higher phosphorus/potassium. Handle the plant gently to avoid dropping flowers.",
407
408 help_stage_fruiting: "Fruiting",
409 help_stage_fruiting_desc:
410 "Flowers have been pollinated and are now developing into fruits or final produce. The plant is putting all its energy into the harvest.",
411 help_stage_fruiting_tips:
412 "🍅 Maintain consistent EC and pH - fluctuations now can cause blossom end rot or splitting. 📉 Drop humidity to 40-50%. Watch maturity closely - harvest at the right time!",
413
414 // Manual Intervention
415 help_manual_disease_title: "Disease or Pest Outbreak",
416 help_manual_disease_desc:
417 "AI can detect visual anomalies using computer vision, but it cannot physically remove diseased leaves, apply pesticide sprays, or quarantine infected plants.",
418 help_manual_disease_action:
419 "Inspect the plant visually. Remove infected leaves immediately. Apply appropriate organic or chemical treatment. Isolate the batch if needed.",
420
421 help_manual_equip_title: "Equipment or Sensor Failure",
422 help_manual_equip_desc:
423 "If a pump stops working, a sensor gives incorrect readings, or a fan breaks down, the AI will detect abnormal patterns but cannot physically fix hardware.",
424 help_manual_equip_action:
425 "Check all pumps, fans, and sensors physically. Look for blockages, broken wires, or clogged nozzles. Replace faulty equipment before the AI can resume normal control.",
426
427 help_manual_harvest_title: "Harvest Time",
428 help_manual_harvest_desc:
429 "Demeter will alert you when a crop reaches maturity, but the actual harvesting must be done by you. The AI cannot pick crops.",
430 help_manual_harvest_action:
431 "When you see a HARVEST READY badge, act quickly. Delayed harvest reduces quality and may cause over-ripening or disease. Harvest during cooler parts of the day for best quality.",
432
433 help_manual_extreme_title: "Extreme Environmental Conditions",
434 help_manual_extreme_desc:
435 "In case of power outages, floods, extreme heat waves, or structural damage to the growing area, manual intervention is always required.",
436 help_manual_extreme_action:
437 "Have a backup power plan (generator or UPS). Keep manual pH and EC test kits available. Know how to manually adjust nutrients if digital systems fail.",
438
439 // How to Add a Crop
440 help_section_add_crop: "🌿 How to Add a Crop",
441 help_add_crop_step1: 'Click "Add Crop" in the dashboard',
442 help_add_crop_step2:
443 "Choose crop type - Lettuce, Tomato, Basil, or Strawberry",
444 help_add_crop_step3: "Enter a unique Batch ID and optional location/notes",
445 help_add_crop_step4:
446 'Click "Register Crop" - the system auto-sets cycle duration and sensors',
447 help_add_crop_step5:
448 "After registration, go to the crop's Info tab → Run Agent Cycle",
449
450 // Supported Crop Types
451 help_section_crops: "🌱 Supported Crop Types",
452 help_crop_lettuce: "Lettuce - ~21 days · 1h per cycle",
453 help_crop_tomato: "Tomato - ~70 days · 2h per cycle",
454 help_crop_basil: "Basil - ~28 days · 1h per cycle",
455 help_crop_strawberry: "Strawberry - ~63 days · 2h per cycle",
456};
457
458const HELP_HI = {
459 help_title: "सहायता और शब्दकोश",
460 help_subtitle: "सब कुछ सरल भाषा में समझाया गया",
461 help_section_terms: "📊 सेंसर शब्द समझाए गए",
462 help_section_agents: "🤖 AI आपके लिए कैसे काम करता है",
463 help_section_stages: "🌱 विकास की अवस्थाएं",
464 help_section_manual: "🖐 जब आपको कदम उठाना हो",
465 help_section_ai_cta: "अभी भी सवाल हैं?",
466 help_ai_cta_desc:
467 "हमारे फार्म बुद्धिमत्ता AI से अपनी फसलों के बारे में कुछ भी पूछें",
468 help_ai_cta_btn: "AI से पूछें →",
469 help_range_label: "आदर्श सीमा",
470 help_low_label: "बहुत कम हो तो",
471 help_high_label: "बहुत अधिक हो तो",
472 help_ai_label: "AI स्वचालित कार्रवाई",
473 help_manual_label: "मानवीय कार्रवाई कब जरूरी",
474 help_agri_label: "यह क्यों महत्वपूर्ण है",
475 help_tab_simple: "सरल",
476 help_tab_detail: "विस्तृत",
477
478 // pH
479 help_term_ph: "pH (पानी की अम्लता)",
480 help_term_ph_short: "pH",
481 help_term_ph_simple:
482 "pH बताता है कि पानी खट्टा (अम्लीय) है या कड़वा (क्षारीय)। नींबू के रस की तरह खट्टा = कम pH। बेकिंग सोडा की तरह कड़वा = ज्यादा pH। पौधों को थोड़ा खट्टा पानी चाहिए - न बहुत खट्टा, न बहुत कड़वा।",
483 help_term_ph_detail:
484 "pH 0 से 14 के पैमाने पर मापा जाता है। 7 का मतलब तटस्थ (शुद्ध पानी)। 7 से कम = अम्लीय। 7 से ज्यादा = क्षारीय। हाइड्रोपोनिक्स में, जड़ों की कोशिकाएं पानी की रसायन पर निर्भर एक प्रक्रिया से पोषक तत्व सोखती हैं। यदि pH गलत है, तो जड़ें पोषक तत्व सोख ही नहीं सकती, चाहे वे पानी में मौजूद क्यों न हों।",
485 help_term_ph_range: "5.5 - 6.5",
486 help_term_ph_low:
487 "जड़ें खराब होती हैं। लोहा और मैंगनीज जहरीले हो जाते हैं। पत्तियां पीली पड़ती हैं। पौधा बीमार दिखता है।",
488 help_term_ph_high:
489 "पोषक तत्व 'बंद' हो जाते हैं - पौधा कैल्शियम, मैग्नीशियम या लोहा नहीं सोख सकता। पत्तियां फीकी पड़ती हैं और विकास धीमा होता है।",
490 help_term_ph_ai:
491 "अगर pH 5.5 से कम हो, Demeter स्वचालित रूप से base solution (pH Up) डालता है। अगर pH 6.5 से ज्यादा हो, तो acid (pH Down) डालता है। यह कुछ ही मिनटों में होता है, बिना आपके किए।",
492 help_term_ph_manual:
493 "अगर dosing के बाद भी pH हर घंटे बदलता रहे, तो आपका dosing pump खराब हो सकता है या टैंक में पानी बदलने की जरूरत है। उपकरण की शारीरिक जांच करें।",
494 help_term_ph_agri:
495 "पारंपरिक मिट्टी की खेती में, pH पोषक तत्वों की उपलब्धता को प्रभावित करता है, लेकिन मिट्टी बदलाव को धीरे-धीरे संभालती है। हाइड्रोपोनिक्स में, pH कुछ घंटों में बदल सकता है, इसलिए निरंतर निगरानी जरूरी है। गलत pH दुनिया भर में हाइड्रोपोनिक सिस्टम में पोषक तत्वों की कमी का #1 कारण है।",
496
497 // EC
498 help_term_ec: "EC (पानी में पोषक तत्वों की मात्रा)",
499 help_term_ec_short: "EC",
500 help_term_ec_simple:
501 "EC बताता है कि पानी में कितने पोषक तत्व घुले हैं। चाय बनाने की तरह सोचें - थोड़ी चाय ठीक है, लेकिन बहुत गाढ़ी चाय कड़वी और हानिकारक होती है। EC बताता है कि पानी में पौधे के लिए सही मात्रा में 'खाना' है या नहीं।",
502 help_term_ec_detail:
503 "EC (विद्युत चालकता) को dS/m में मापा जाता है। शुद्ध पानी बहुत कम बिजली चलाता है। जब आप उर्वरक के नमक घोलते हैं, तो यह ज्यादा बिजली चलाता है। सेंसर इसे मापकर पोषक तत्वों की सांद्रता निर्धारित करता है। ज्यादा EC = बहुत अधिक नमक - यह जड़ों से पानी खींचता है (osmotic तनाव)।",
504 help_term_ec_range: "0.8 - 2.5 dS/m",
505 help_term_ec_low:
506 "पौधा भूखा है। पत्तियां फीकी पड़ती हैं, विकास धीमा होता है, उपज कम होती है। पौधे के पास पानी है लेकिन खाना नहीं।",
507 help_term_ec_high:
508 "पोषक तत्व जल जाते हैं। पत्तियों के किनारे भूरे और कुरकुरे हो जाते हैं। जड़ें गंभीर तनाव में होती हैं।",
509 help_term_ec_ai:
510 "अगर EC बहुत कम हो, Demeter स्वचालित रूप से केंद्रित पोषक घोल डालता है। अगर EC बहुत ज्यादा हो, तो plain water डालकर सांद्रता कम करता है। reinforcement learning agent पिछले cycles से सीखकर सही मात्रा तय करता है।",
511 help_term_ec_manual:
512 "अगर EC अचानक बिना कारण बढ़ जाए, तो pump खराब हो सकता है या प्रदूषण हो सकता है। nutrient reservoir और सभी dosing lines की शारीरिक जांच करें।",
513 help_term_ec_agri:
514 "मिट्टी की खेती में, पोषक तत्व मिट्टी के कणों से जुड़े होते हैं और धीरे-धीरे निकलते हैं। हाइड्रोपोनिक्स में, पोषक तत्व सीधे घोल में होते हैं, जिससे EC बहुत संवेदनशील होती है। पत्तेदार सब्जियों के लिए कम EC (0.8-1.6), टमाटर जैसी फसलों के लिए ज्यादा (2.0-3.5) चाहिए।",
515
516 // Humidity
517 help_term_humidity: "नमी (हवा में पानी की मात्रा)",
518 help_term_humidity_short: "नमी",
519 help_term_humidity_simple:
520 "नमी बताती है कि हवा कितनी नम या सूखी है। बहुत नम दिन पर आपको पसीना आता है। पौधे भी अपनी पत्तियों में छोटे छेदों से 'सांस' लेते हैं। अगर हवा बहुत नम हो, तो ये छेद बंद हो जाते हैं और फफूंद उगती है। बहुत सूखी हवा में पत्तियां जल्दी सूख जाती हैं।",
521 help_term_humidity_detail:
522 "नमी को Relative Humidity (RH%) में मापा जाता है। पौधे stomata (छोटे छिद्र) से गैस और जल वाष्प का आदान-प्रदान करते हैं। ज्यादा नमी में, पत्तियों से वाष्पीकरण कम होता है, जिससे 'transpiration pump' धीमा होता है - यही पोषक तत्व सोखने की प्रक्रिया को चलाता है। 85% से ज्यादा नमी में फफूंद रोग जैसे powdery mildew और botrytis के लिए आदर्श स्थितियां बन जाती हैं।",
523 help_term_humidity_range: "40% - 80% RH",
524 help_term_humidity_low:
525 "पत्तियां मुड़ती और सूखती हैं। stomata बंद हो जाते हैं, प्रकाश संश्लेषण और पोषक तत्व अवशोषण रुक जाता है।",
526 help_term_humidity_high:
527 "फफूंद रोग का खतरा बढ़ जाता है। Powdery mildew, gray mold, और root rot की संभावना बढ़ती है।",
528 help_term_humidity_ai:
529 "Demeter हवा और नमी को नियंत्रित करने के लिए पंखे की गति स्वचालित रूप से बदलता है। ज्यादा नमी में पंखे तेज होते हैं। atmospheric agent इसे लगातार monitor और adjust करता है।",
530 help_term_humidity_manual:
531 "अगर अधिकतम पंखे की गति के बावजूद नमी बहुत ज्यादा रहे, तो यह structural समस्या हो सकती है - खराब ventilation, leaking irrigation, या टूटा हुआ HVAC। शारीरिक हस्तक्षेप जरूरी है।",
532 help_term_humidity_agri:
533 "खुली खेती में नमी मौसम पर निर्भर होती है। इनडोर/हाइड्रोपोनिक खेती का सबसे बड़ा फायदा नमी नियंत्रण है। vegetative growth में 60-70% और flowering में 40-50% नमी रखने से रोग कम होते हैं और उपज बढ़ती है।",
534
535 // Temperature
536 help_term_temp: "तापमान (हवा की गर्मी)",
537 help_term_temp_short: "तापमान",
538 help_term_temp_simple:
539 "तापमान बताता है कि हवा कितनी गर्म या ठंडी है। पौधे भी इंसानों की तरह एक आरामदायक तापमान पसंद करते हैं। बहुत ठंडा होने पर वे 'धीमे' पड़ जाते हैं और बढ़ना बंद कर देते हैं। बहुत गर्म होने पर उन्हें 'heat stroke' होता है और पानी में बैक्टीरिया तेजी से बढ़ सकते हैं।",
540 help_term_temp_detail:
541 "हवा का तापमान प्रकाश संश्लेषण, श्वसन, एंजाइम गतिविधि और transpiration को सीधे प्रभावित करता है। पानी का तापमान भी उतना ही महत्वपूर्ण है - गर्म पानी में कम dissolved oxygen होती है, और जड़ों को oxygen चाहिए। 15°C से कम पर एंजाइम प्रतिक्रियाएं बहुत धीमी हो जाती हैं। 30°C से ज्यादा पर, pathogenic bacteria root zone में तेजी से बढ़ते हैं।",
542 help_term_temp_range: "18°C - 28°C",
543 help_term_temp_low:
544 "विकास लगभग रुक जाता है। ठंडे पानी में जड़ें सड़ सकती हैं। पौधा बौना और काला दिखता है।",
545 help_term_temp_high:
546 "जड़ें दम घुटती हैं (कम dissolved oxygen)। Pythium (root rot) फैल जाता है। पानी होने के बावजूद पौधा मुरझा जाता है।",
547 help_term_temp_ai:
548 "Demeter तापमान नियंत्रण के लिए पंखे की गति बदलता है। गर्म स्थितियों में पंखे पूरी गति से चलते हैं। atmospheric agent एक साथ नमी भी देखता है। तापमान गंभीर रूप से बाहर जाने पर तुरंत CRITICAL alert भेजा जाता है।",
549 help_term_temp_manual:
550 "अगर अधिकतम ventilation के बावजूद तापमान बहुत ज्यादा रहे, तो AC, shade cloth, या बाहरी cooling fans लगाने की जरूरत हो सकती है। अगर बहुत ठंडा हो, तो heater या grow light adjustment जरूरी है। ये शारीरिक बदलाव AI नहीं कर सकता।",
551 help_term_temp_agri:
552 "तापमान प्रबंधन इनडोर खेती का सबसे बड़ा फायदा है। खेत में देर से आने वाली ठंड पूरी फसल रात भर में बर्बाद कर सकती है। नियंत्रित वातावरण इस जोखिम को खत्म करता है।",
553
554 // Agents
555 help_agent_fetch_name: "Fetch Agent",
556 help_agent_fetch_role: "सभी सेंसर डेटा पढ़ता है",
557 help_agent_fetch_detail:
558 "यह agent pH, EC, तापमान, नमी की रीडिंग और पौधे की तस्वीरें एकत्र करता है। यह सिस्टम की आंखें और कान हैं - सब कुछ यहीं से शुरू होता है।",
559
560 help_agent_judge_name: "Judge Agent",
561 help_agent_judge_role: "फसल के स्वास्थ्य का मूल्यांकन करता है",
562 help_agent_judge_detail:
563 "सेंसर डेटा का उपयोग करके, यह agent प्रत्येक फसल के स्वास्थ्य को स्कोर करता है और पहचानता है कि कौन से parameter सीमा से बाहर हैं। Critical, Attention, या Healthy status देता है।",
564
565 help_agent_strategy_name: "Strategy Agent",
566 help_agent_strategy_role: "क्या कार्रवाई करनी है यह तय करता है",
567 help_agent_strategy_detail:
568 "यह दिमाग है। reinforcement learning का उपयोग करता है - हजारों पिछले cycles से सीखा है कि हर फसल के प्रकार और स्थिति में कौन सी कार्रवाई सबसे अच्छी है।",
569
570 help_agent_research_name: "Research Agent",
571 help_agent_research_role: "समान मामलों के लिए memory जांचता है",
572 help_agent_research_detail:
573 "कार्रवाई से पहले, यह agent अपनी memory (Qdrant vector database) में सभी पिछले crop histories खोजता है। इन precedents का उपयोग करके strategy को बेहतर बनाता है।",
574
575 help_agent_execute_name: "Execute Agent",
576 help_agent_execute_role: "hardware को commands भेजता है",
577 help_agent_execute_detail:
578 "एक बार योजना confirm होने पर, यह agent physical actuators - pumps, fans, dosing systems - को actual commands भेजता है। digital निर्णयों को real-world actions में बदलता है।",
579
580 help_agent_explainer_name: "Explainer Agent",
581 help_agent_explainer_role: "सरल भाषा में reasoning लिखता है",
582 help_agent_explainer_detail:
583 'प्रत्येक cycle के बाद, यह agent एक human-readable explanation लिखता है कि क्या हुआ और क्यों। यही आप हर फसल की "AI निर्णय तर्क" section में देखते हैं।',
584
585 help_agent_atmospheric_name: "वायुमंडलीय एजेंट",
586 help_agent_atmospheric_role: "जलवायु और वायु प्रवाह नियंत्रित करता है",
587 help_agent_atmospheric_detail:
588 "यह एजेंट पंखे की गति, तापमान और नमी को नियंत्रित करता है। यह VPD (Vapor Pressure Deficit) की गणना करता है और हर फसल और विकास अवस्था के लिए वातावरण को सही रखने के लिए वायु प्रवाह को लगातार समायोजित करता है।",
589
590 help_agent_water_name: "जल एजेंट",
591 help_agent_water_role: "पोषक घोल और pH को नियंत्रित करता है",
592 help_agent_water_detail:
593 "यह एजेंट pH और EC स्तर को सुधारने के लिए एसिड, बेस और पोषक घोल की सटीक मात्रा की गणना करता है। यह पानी के टैंक के भौतिक मॉडल का उपयोग करके अनुमान लगाता है कि कितनी dosing आवश्यक है, और RL एजेंट के पिछले cycles से सीखे गए अनुभव से इसे बेहतर करता है।",
594
595 help_agent_supervisor_name: "सुपरवाइज़र एजेंट",
596 help_agent_supervisor_role: "योजनाओं को जोड़ता है और अंतिम कमांड भेजता है",
597 help_agent_supervisor_detail:
598 "सुपरवाइज़र वायुमंडलीय और जल एजेंटों की योजनाओं को मिलाता है, उन्हें Strategy एजेंट की सिफारिश के साथ जांचता है, और हार्डवेयर को अंतिम एक्चुएटर कमांड भेजता है। कोई भी शारीरिक कार्रवाई से पहले यह अंतिम AI चरण है।",
599
600 help_agent_doctor_name: "डॉक्टर एजेंट",
601 help_agent_doctor_role: "दृश्य रूप से पौधे के स्वास्थ्य का निदान करता है",
602 help_agent_doctor_detail:
603 "Computer Vision (Azure CV) का उपयोग करके, यह एजेंट हर चक्र में अपलोड की गई पौधे की तस्वीर का विश्लेषण करता है और बीमारी, कीट क्षति या दृश्य असामान्यताओं का पता लगाता है। इसका निदान चक्र लॉग में जोड़ा जाता है और तब भी अलर्ट ट्रिगर कर सकता है जब सेंसर रीडिंग सामान्य लगती हैं।",
604
605 // Stages
606 help_stage_seedling: "अंकुर (Seedling)",
607 help_stage_seedling_desc:
608 "पौधा बीज से अभी-अभी उगा है। यह बहुत छोटा, नाजुक है और अपनी पहली पत्तियां उगाना शुरू कर रहा है।",
609 help_stage_seedling_tips:
610 "🌡️ तापमान गर्म रखें (22-26°C)। 💧 EC बहुत कम रखें (0.5-1.0) - ज्यादा पोषक तत्व नाजुक जड़ों को नुकसान पहुंचाते हैं। 💡 रोशनी हल्की होनी चाहिए। यह सबसे नाजुक अवस्था है।",
611
612 help_stage_vegetative: "वानस्पतिक (Vegetative)",
613 help_stage_vegetative_desc:
614 "पौधा तेजी से पत्तियां और तना उगा रहा है। फूल या फल बनाने से पहले अपनी संरचना बना रहा है।",
615 help_stage_vegetative_tips:
616 "🌿 पोषक तत्वों की मात्रा बढ़ाएं (EC 1.2-2.0)। 💧 नमी 60-70% बनाए रखें। यही वह समय है जब पौधा सबसे तेज बढ़ता है।",
617
618 help_stage_flowering: "फूल (Flowering)",
619 help_stage_flowering_desc:
620 "पौधा फूल बनाना शुरू करता है। यह एक महत्वपूर्ण अवस्था है - यहां की स्थितियां सीधे प्रभावित करती हैं कि आपको कितनी उपज मिलेगी।",
621 help_stage_flowering_tips:
622 "🌸 bud rot रोकने के लिए नमी 50-60% तक कम करें। 🧪 पोषक तत्व बदलें - nitrogen कम, phosphorus/potassium ज्यादा। फूल गिरने से बचाने के लिए पौधे को धीरे से संभालें।",
623
624 help_stage_fruiting: "फल (Fruiting)",
625 help_stage_fruiting_desc:
626 "फूलों पर परागण हो चुका है और अब फल या अंतिम उपज बन रही है। पौधा अपनी सारी ऊर्जा कटाई में लगा रहा है।",
627 help_stage_fruiting_tips:
628 "🍅 EC और pH में स्थिरता बनाए रखें - अब उतार-चढ़ाव से blossom end rot या splitting हो सकती है। 📉 नमी 40-50% तक कम करें। परिपक्वता पर नज़र रखें - सही समय पर काटें!",
629
630 // Manual Intervention
631 help_manual_disease_title: "बीमारी या कीट का प्रकोप",
632 help_manual_disease_desc:
633 "AI computer vision से दृश्य असामान्यताएं पकड़ सकता है, लेकिन शारीरिक रूप से बीमार पत्तियां नहीं हटा सकता, कीटनाशक स्प्रे नहीं कर सकता, या संक्रमित पौधों को अलग नहीं कर सकता।",
634 help_manual_disease_action:
635 "पौधे को ध्यान से देखें। संक्रमित पत्तियां तुरंत हटाएं। उचित organic या chemical उपचार करें। जरूरत पड़ने पर batch को अलग करें।",
636
637 help_manual_equip_title: "उपकरण या सेंसर की खराबी",
638 help_manual_equip_desc:
639 "अगर pump काम नहीं करता, sensor गलत readings दे रहा है, या fan टूट जाता है, तो AI असामान्य patterns पकड़ेगा लेकिन hardware को शारीरिक रूप से ठीक नहीं कर सकता।",
640 help_manual_equip_action:
641 "सभी pumps, fans, और sensors की शारीरिक जांच करें। blockages, टूटे तार, या बंद नोज़ल खोजें। खराब उपकरण बदलें।",
642
643 help_manual_harvest_title: "कटाई का समय",
644 help_manual_harvest_desc:
645 "Demeter आपको सचेत करेगा जब फसल पक जाए, लेकिन असली कटाई आपको करनी होगी। AI फसल नहीं काट सकता।",
646 help_manual_harvest_action:
647 "HARVEST READY बैज दिखने पर जल्दी काम करें। देरी से गुणवत्ता कम होती है। दिन के ठंडे हिस्से में कटाई करें।",
648
649 help_manual_extreme_title: "अत्यधिक पर्यावरणीय स्थितियां",
650 help_manual_extreme_desc:
651 "बिजली कटौती, बाढ़, अत्यधिक गर्मी, या growing area को structural क्षति के मामले में, मानवीय हस्तक्षेप हमेशा जरूरी है।",
652 help_manual_extreme_action:
653 "backup power plan (generator या UPS) रखें। manual pH और EC test kits उपलब्ध रखें। digital systems विफल होने पर manually nutrients adjust करना जानें।",
654
655 // How to Add a Crop
656 help_section_add_crop: "🌿 फसल कैसे जोड़ें",
657 help_add_crop_step1: 'डैशबोर्ड में "फसल जोड़ें" पर क्लिक करें',
658 help_add_crop_step2:
659 "फसल का प्रकार चुनें - लेट्यूस, टमाटर, तुलसी, या स्ट्रॉबेरी",
660 help_add_crop_step3: "एक अनोखी Batch ID और वैकल्पिक स्थान/नोट्स दर्ज करें",
661 help_add_crop_step4:
662 '"फसल दर्ज करें" पर क्लिक करें - सिस्टम स्वचालित रूप से चक्र अवधि और सेंसर सेट करेगा',
663 help_add_crop_step5:
664 "दर्ज होने के बाद, फसल के Info टैब से → एजेंट चक्र चलाएं",
665
666 // Supported Crop Types
667 help_section_crops: "🌱 समर्थित फसल प्रकार",
668 help_crop_lettuce: "लेट्यूस - ~21 दिन · प्रति चक्र 1 घंटा",
669 help_crop_tomato: "टमाटर - ~70 दिन · प्रति चक्र 2 घंटे",
670 help_crop_basil: "तुलसी - ~28 दिन · प्रति चक्र 1 घंटा",
671 help_crop_strawberry: "स्ट्रॉबेरी - ~63 दिन · प्रति चक्र 2 घंटे",
672};
673
674// Sub-components
675
676function SectionHeader({ children }) {
677 return (
678 <div
679 style={{
680 fontSize: 13,
681 fontWeight: 700,
682 color: "var(--green)",
683 fontFamily: "DM Mono, monospace",
684 letterSpacing: "0.06em",
685 marginBottom: 16,
686 display: "flex",
687 alignItems: "center",
688 gap: 8,
689 }}
690 >
691 {children}
692 </div>
693 );
694}
695
696function TermCard({ term, lang }) {
697 const [open, setOpen] = useState(false);
698 const [tab, setTab] = useState("simple");
699 const dict = lang === "hi" ? HELP_HI : HELP_EN;
700 const Icon = term.icon;
701
702 return (
703 <div
704 style={{
705 borderRadius: 14,
706 border: "1px solid var(--border)",
707 background: "var(--surface)",
708 overflow: "hidden",
709 transition: "all 0.2s",
710 }}
711 >
712 {/* Header */}
713 <button
714 onClick={() => setOpen(!open)}
715 style={{
716 width: "100%",
717 padding: "16px 20px",
718 display: "flex",
719 alignItems: "center",
720 gap: 12,
721 background: "none",
722 border: "none",
723 cursor: "pointer",
724 textAlign: "left",
725 }}
726 >
727 <div
728 style={{
729 width: 40,
730 height: 40,
731 borderRadius: 10,
732 background: `${term.color}18`,
733 border: `1px solid ${term.color}30`,
734 display: "flex",
735 alignItems: "center",
736 justifyContent: "center",
737 flexShrink: 0,
738 }}
739 >
740 <Icon size={18} style={{ color: term.color }} />
741 </div>
742 <div style={{ flex: 1 }}>
743 <div style={{ fontSize: 15, fontWeight: 700, color: "var(--text)" }}>
744 {dict[term.labelKey]}
745 </div>
746 <div
747 style={{
748 fontSize: 11,
749 fontFamily: "DM Mono, monospace",
750 color: "var(--text-3)",
751 marginTop: 2,
752 }}
753 >
754 {dict["help_range_label"]}: {dict[term.rangeKey]}
755 </div>
756 </div>
757 <div style={{ color: "var(--text-3)", flexShrink: 0 }}>
758 {open ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
759 </div>
760 </button>
761
762 {/* Expanded content */}
763 {open && (
764 <div
765 style={{
766 padding: "0 20px 20px",
767 borderTop: "1px solid var(--border)",
768 }}
769 >
770 {/* Tab toggles */}
771 <div
772 style={{
773 display: "flex",
774 gap: 6,
775 marginTop: 14,
776 marginBottom: 14,
777 }}
778 >
779 {["simple", "detail"].map((tabId) => (
780 <button
781 key={tabId}
782 onClick={() => setTab(tabId)}
783 style={{
784 padding: "5px 14px",
785 borderRadius: 8,
786 fontSize: 11,
787 fontWeight: 600,
788 fontFamily: "DM Mono, monospace",
789 cursor: "pointer",
790 border: "1px solid",
791 borderColor: tab === tabId ? term.color : "var(--border)",
792 background: tab === tabId ? `${term.color}15` : "transparent",
793 color: tab === tabId ? term.color : "var(--text-3)",
794 transition: "all 0.15s",
795 }}
796 >
797 {tabId === "simple"
798 ? dict["help_tab_simple"]
799 : dict["help_tab_detail"]}
800 </button>
801 ))}
802 </div>
803
804 {/* Explanation */}
805 <p
806 className="animate-fade-in"
807 style={{
808 fontSize: 13,
809 color: "var(--text-2)",
810 lineHeight: 1.75,
811 margin: 0,
812 marginBottom: 16,
813 opacity: 0,
814 animationFillMode: "forwards",
815 }}
816 >
817 {tab === "simple" ? dict[term.simpleKey] : dict[term.detailKey]}
818 </p>
819
820 {/* Range cards */}
821 <div
822 style={{
823 display: "grid",
824 gridTemplateColumns: "1fr 1fr",
825 gap: 8,
826 marginBottom: 14,
827 }}
828 >
829 <div
830 style={{
831 padding: "10px 12px",
832 borderRadius: 10,
833 background: "rgba(248,113,113,0.08)",
834 border: "1px solid rgba(248,113,113,0.2)",
835 }}
836 >
837 <div
838 style={{
839 fontSize: 9,
840 fontFamily: "DM Mono, monospace",
841 color: "var(--red)",
842 marginBottom: 4,
843 fontWeight: 700,
844 }}
845 >
846 ↓ {dict["help_low_label"]}
847 </div>
848 <div
849 style={{
850 fontSize: 12,
851 color: "var(--text-2)",
852 lineHeight: 1.5,
853 }}
854 >
855 {dict[term.lowKey]}
856 </div>
857 </div>
858 <div
859 style={{
860 padding: "10px 12px",
861 borderRadius: 10,
862 background: "rgba(248,113,113,0.08)",
863 border: "1px solid rgba(248,113,113,0.2)",
864 }}
865 >
866 <div
867 style={{
868 fontSize: 9,
869 fontFamily: "DM Mono, monospace",
870 color: "var(--red)",
871 marginBottom: 4,
872 fontWeight: 700,
873 }}
874 >
875 ↑ {dict["help_high_label"]}
876 </div>
877 <div
878 style={{
879 fontSize: 12,
880 color: "var(--text-2)",
881 lineHeight: 1.5,
882 }}
883 >
884 {dict[term.highKey]}
885 </div>
886 </div>
887 </div>
888
889 {/* AI Action */}
890 <div
891 style={{
892 padding: "12px 14px",
893 borderRadius: 10,
894 background: "rgba(74,222,128,0.07)",
895 border: "1px solid rgba(74,222,128,0.2)",
896 marginBottom: 10,
897 }}
898 >
899 <div
900 style={{
901 fontSize: 9,
902 fontFamily: "DM Mono, monospace",
903 color: "var(--green)",
904 marginBottom: 6,
905 fontWeight: 700,
906 display: "flex",
907 alignItems: "center",
908 gap: 5,
909 }}
910 >
911 <Bot size={10} /> {dict["help_ai_label"]}
912 </div>
913 <div
914 style={{ fontSize: 12, color: "var(--text-2)", lineHeight: 1.6 }}
915 >
916 {dict[term.aiActionKey]}
917 </div>
918 </div>
919
920 {/* Manual needed */}
921 <div
922 style={{
923 padding: "12px 14px",
924 borderRadius: 10,
925 background: "rgba(245,158,11,0.07)",
926 border: "1px solid rgba(245,158,11,0.2)",
927 marginBottom: 10,
928 }}
929 >
930 <div
931 style={{
932 fontSize: 9,
933 fontFamily: "DM Mono, monospace",
934 color: "var(--amber)",
935 marginBottom: 6,
936 fontWeight: 700,
937 display: "flex",
938 alignItems: "center",
939 gap: 5,
940 }}
941 >
942 <HandMetal size={10} /> {dict["help_manual_label"]}
943 </div>
944 <div
945 style={{ fontSize: 12, color: "var(--text-2)", lineHeight: 1.6 }}
946 >
947 {dict[term.manualKey]}
948 </div>
949 </div>
950
951 {/* Agricultural context */}
952 <div
953 style={{
954 padding: "12px 14px",
955 borderRadius: 10,
956 background: "rgba(99,102,241,0.07)",
957 border: "1px solid rgba(99,102,241,0.2)",
958 }}
959 >
960 <div
961 style={{
962 fontSize: 9,
963 fontFamily: "DM Mono, monospace",
964 color: "#818cf8",
965 marginBottom: 6,
966 fontWeight: 700,
967 display: "flex",
968 alignItems: "center",
969 gap: 5,
970 }}
971 >
972 <Info size={10} /> {dict["help_agri_label"]}
973 </div>
974 <div
975 style={{ fontSize: 12, color: "var(--text-2)", lineHeight: 1.6 }}
976 >
977 {dict[term.agriKey]}
978 </div>
979 </div>
980 </div>
981 )}
982 </div>
983 );
984}
985
986function AgentCard({ agent, dict }) {
987 const [open, setOpen] = useState(false);
988 const Icon = agent.icon;
989 return (
990 <div
991 onClick={() => setOpen(!open)}
992 style={{
993 padding: "14px 16px",
994 borderRadius: 12,
995 border: "1px solid var(--border)",
996 background: "var(--surface)",
997 cursor: "pointer",
998 transition: "all 0.15s",
999 }}
1000 >
1001 <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
1002 <div
1003 style={{
1004 width: 34,
1005 height: 34,
1006 borderRadius: 9,
1007 background: `${agent.color}15`,
1008 border: `1px solid ${agent.color}30`,
1009 display: "flex",
1010 alignItems: "center",
1011 justifyContent: "center",
1012 flexShrink: 0,
1013 }}
1014 >
1015 <Icon size={15} style={{ color: agent.color }} />
1016 </div>
1017 <div style={{ flex: 1 }}>
1018 <div style={{ fontSize: 13, fontWeight: 700, color: "var(--text)" }}>
1019 {dict[agent.nameKey]}
1020 </div>
1021 <div style={{ fontSize: 11, color: "var(--text-3)", marginTop: 1 }}>
1022 {dict[agent.roleKey]}
1023 </div>
1024 </div>
1025 <div style={{ color: "var(--text-3)" }}>
1026 {open ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
1027 </div>
1028 </div>
1029 {open && (
1030 <div
1031 className="animate-fade-in"
1032 style={{
1033 marginTop: 12,
1034 paddingTop: 12,
1035 borderTop: "1px solid var(--border)",
1036 fontSize: 12,
1037 color: "var(--text-2)",
1038 lineHeight: 1.65,
1039 opacity: 0,
1040 animationFillMode: "forwards",
1041 }}
1042 >
1043 {dict[agent.detailKey]}
1044 </div>
1045 )}
1046 </div>
1047 );
1048}
1049
1050function StageCard({ stage, dict }) {
1051 return (
1052 <div
1053 style={{
1054 padding: "16px",
1055 borderRadius: 12,
1056 border: "1px solid var(--border)",
1057 background: "var(--surface)",
1058 }}
1059 >
1060 <div style={{ fontSize: 28, marginBottom: 8 }}>{stage.emoji}</div>
1061 <div
1062 style={{
1063 fontSize: 14,
1064 fontWeight: 700,
1065 color: "var(--text)",
1066 marginBottom: 4,
1067 }}
1068 >
1069 {dict[stage.nameKey]}
1070 </div>
1071 <div
1072 style={{
1073 fontSize: 12,
1074 color: "var(--text-2)",
1075 lineHeight: 1.6,
1076 marginBottom: 10,
1077 }}
1078 >
1079 {dict[stage.descKey]}
1080 </div>
1081 <div
1082 style={{
1083 fontSize: 11,
1084 color: "var(--text-3)",
1085 lineHeight: 1.7,
1086 padding: "10px 12px",
1087 borderRadius: 8,
1088 background: "var(--bg-2)",
1089 border: "1px solid var(--border)",
1090 }}
1091 >
1092 {dict[stage.tipsKey]}
1093 </div>
1094 </div>
1095 );
1096}
1097
1098function ManualCard({ scenario, dict }) {
1099 const Icon = scenario.icon;
1100 return (
1101 <div
1102 style={{
1103 padding: "16px",
1104 borderRadius: 12,
1105 border: `1px solid ${scenario.color}30`,
1106 background: `${scenario.color}07`,
1107 }}
1108 >
1109 <div
1110 style={{
1111 display: "flex",
1112 alignItems: "flex-start",
1113 gap: 10,
1114 marginBottom: 10,
1115 }}
1116 >
1117 <Icon
1118 size={16}
1119 style={{ color: scenario.color, flexShrink: 0, marginTop: 2 }}
1120 />
1121 <div>
1122 <div
1123 style={{
1124 fontSize: 13,
1125 fontWeight: 700,
1126 color: "var(--text)",
1127 marginBottom: 4,
1128 }}
1129 >
1130 {dict[scenario.titleKey]}
1131 </div>
1132 <div
1133 style={{ fontSize: 12, color: "var(--text-2)", lineHeight: 1.6 }}
1134 >
1135 {dict[scenario.descKey]}
1136 </div>
1137 </div>
1138 </div>
1139 <div
1140 style={{
1141 padding: "10px 12px",
1142 borderRadius: 8,
1143 background: "var(--surface)",
1144 border: "1px solid var(--border)",
1145 fontSize: 12,
1146 color: "var(--text-2)",
1147 lineHeight: 1.6,
1148 }}
1149 >
1150 <span style={{ fontWeight: 700, color: scenario.color }}>✓ </span>
1151 {dict[scenario.actionKey]}
1152 </div>
1153 </div>
1154 );
1155}
1156
1157function StepCard({ step, dict, index }) {
1158 return (
1159 <div
1160 style={{
1161 padding: "14px 16px",
1162 borderRadius: 12,
1163 background: "var(--surface)",
1164 border: "1px solid var(--border)",
1165 display: "flex",
1166 alignItems: "flex-start",
1167 gap: 14,
1168 transition: "all 0.2s",
1169 }}
1170 >
1171 <div
1172 style={{
1173 width: 20,
1174 height: 20,
1175 borderRadius: 8,
1176 background: `${step.color}18`,
1177 border: `1px solid ${step.color}40`,
1178 display: "flex",
1179 alignItems: "center",
1180 justifyContent: "center",
1181 flexShrink: 0,
1182 fontFamily: "DM Mono, monospace",
1183 fontSize: 12,
1184 fontWeight: 700,
1185 color: step.color,
1186 }}
1187 >
1188 {step.icon}
1189 </div>
1190 <span
1191 style={{
1192 fontSize: 11,
1193 color: "var(--text-2)",
1194 lineHeight: 1.6,
1195 paddingTop: 1,
1196 }}
1197 >
1198 {dict[step.key]}
1199 </span>
1200 </div>
1201 );
1202}
1203
1204function CropTypeCard({ crop, dict }) {
1205 return (
1206 <div
1207 style={{
1208 padding: "16px",
1209 borderRadius: 14,
1210 background: "var(--surface)",
1211 border: "1px solid var(--border)",
1212 transition: "all 0.2s",
1213 }}
1214 >
1215 <div
1216 style={{
1217 display: "flex",
1218 alignItems: "center",
1219 gap: 10,
1220 marginBottom: 12,
1221 }}
1222 >
1223 <div
1224 style={{
1225 width: 38,
1226 height: 38,
1227 borderRadius: 10,
1228 background: `${crop.color}15`,
1229 border: `1px solid ${crop.color}30`,
1230 display: "flex",
1231 alignItems: "center",
1232 justifyContent: "center",
1233 fontSize: 20,
1234 flexShrink: 0,
1235 }}
1236 >
1237 {crop.emoji}
1238 </div>
1239 <div>
1240 <div
1241 style={{
1242 fontWeight: 700,
1243 fontSize: 13,
1244 color: "var(--text)",
1245 }}
1246 >
1247 {dict[crop.key].split("-")[0].trim()}
1248 </div>
1249 <div
1250 style={{
1251 fontSize: 10,
1252 fontFamily: "DM Mono, monospace",
1253 color: "var(--text-3)",
1254 marginTop: 1,
1255 }}
1256 >
1257 ~{crop.days} days · {crop.cycle}/cycle
1258 </div>
1259 </div>
1260 </div>
1261 <div style={{ display: "flex", flexWrap: "wrap", gap: 5 }}>
1262 {crop.stages.map((stage, si) => (
1263 <span
1264 key={stage}
1265 style={{
1266 fontSize: 9,
1267 fontFamily: "DM Mono, monospace",
1268 padding: "3px 8px",
1269 borderRadius: 5,
1270 background:
1271 si === crop.stages.length - 1
1272 ? `${crop.color}18`
1273 : "var(--bg-3)",
1274 color:
1275 si === crop.stages.length - 1 ? crop.color : "var(--text-3)",
1276 border: `1px solid ${si === crop.stages.length - 1 ? `${crop.color}35` : "var(--border)"}`,
1277 textTransform: "capitalize",
1278 }}
1279 >
1280 {stage}
1281 </span>
1282 ))}
1283 </div>
1284 </div>
1285 );
1286}
1287
1288// MAIN
1289
1290export default function Help() {
1291 const { lang } = useT();
1292 const navigate = useNavigate();
1293 const dict = lang === "hi" ? HELP_HI : HELP_EN;
1294
1295 return (
1296 <div
1297 className="animate-fade-scale"
1298 style={{
1299 flex: 1,
1300 overflowY: "auto",
1301 padding: "28px 24px",
1302 maxWidth: 800,
1303 margin: "0 auto",
1304 width: "100%",
1305 boxSizing: "border-box",
1306 }}
1307 >
1308 {/* Back Button */}
1309 <button
1310 onClick={() => navigate(-1)}
1311 className="animate-fade-in"
1312 style={{
1313 background: "none",
1314 border: "none",
1315 color: "var(--text-3)",
1316 display: "flex",
1317 alignItems: "center",
1318 gap: 6,
1319 padding: 0,
1320 marginBottom: 20,
1321 cursor: "pointer",
1322 fontSize: 13,
1323 fontWeight: 600,
1324 fontFamily: "inherit",
1325 transition: "color 0.2s",
1326 opacity: 0,
1327 animationFillMode: "forwards",
1328 }}
1329 >
1330 <ArrowLeft size={16} />
1331 {lang === "hi" ? "वापस जाएँ" : "Back"}
1332 </button>
1333
1334 {/* Page Header */}
1335 <div
1336 className="animate-slide-down-right"
1337 style={{
1338 marginBottom: 28,
1339 opacity: 0,
1340 animationFillMode: "forwards",
1341 }}
1342 >
1343 <div
1344 style={{
1345 display: "flex",
1346 alignItems: "center",
1347 gap: 10,
1348 marginBottom: 6,
1349 }}
1350 >
1351 <div
1352 style={{
1353 width: 38,
1354 height: 38,
1355 borderRadius: 10,
1356 background: "rgba(74,222,128,0.12)",
1357 border: "1px solid rgba(74,222,128,0.25)",
1358 display: "flex",
1359 alignItems: "center",
1360 justifyContent: "center",
1361 }}
1362 >
1363 <HelpCircle size={18} style={{ color: "var(--green)" }} />
1364 </div>
1365 <div>
1366 <h1
1367 style={{
1368 fontSize: 22,
1369 fontWeight: 800,
1370 color: "var(--text)",
1371 margin: 0,
1372 lineHeight: 1.2,
1373 }}
1374 >
1375 {dict["help_title"]}
1376 </h1>
1377 <div style={{ fontSize: 13, color: "var(--text-3)", marginTop: 2 }}>
1378 {dict["help_subtitle"]}
1379 </div>
1380 </div>
1381 </div>
1382 </div>
1383
1384 {/* Section: Sensor Terms */}
1385 <section style={{ marginBottom: 36 }}>
1386 <div
1387 className="animate-fade-up"
1388 style={{
1389 animationDelay: "0.1s",
1390 opacity: 0,
1391 animationFillMode: "forwards",
1392 }}
1393 >
1394 <SectionHeader>{dict["help_section_terms"]}</SectionHeader>
1395 </div>
1396 <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
1397 {TERMS.map((term, i) => (
1398 <div
1399 key={term.id}
1400 className="animate-fade-up"
1401 style={{
1402 animationDelay: `${0.15 + i * 0.05}s`,
1403 opacity: 0,
1404 animationFillMode: "forwards",
1405 }}
1406 >
1407 <TermCard term={term} lang={lang} />
1408 </div>
1409 ))}
1410 </div>
1411 </section>
1412
1413 {/* Section: AI Agents */}
1414 <section style={{ marginBottom: 36 }}>
1415 <div
1416 className="animate-fade-up"
1417 style={{
1418 animationDelay: "0.2s",
1419 opacity: 0,
1420 animationFillMode: "forwards",
1421 }}
1422 >
1423 <SectionHeader>{dict["help_section_agents"]}</SectionHeader>
1424 </div>
1425
1426 {/* Pipeline flow visualization */}
1427 <div
1428 className="animate-fade-up"
1429 style={{
1430 padding: "14px 16px",
1431 borderRadius: 12,
1432 background: "var(--surface)",
1433 border: "1px solid var(--border)",
1434 marginBottom: 14,
1435 display: "flex",
1436 alignItems: "center",
1437 gap: 6,
1438 flexWrap: "wrap",
1439 animationDelay: "0.25s",
1440 opacity: 0,
1441 animationFillMode: "forwards",
1442 }}
1443 >
1444 {["Fetch", "Judge", "Strategy", "Research", "Execute", "Explain"].map(
1445 (step, i, arr) => (
1446 <React.Fragment key={step}>
1447 <span
1448 style={{
1449 padding: "4px 10px",
1450 borderRadius: 6,
1451 background: "rgba(74,222,128,0.12)",
1452 border: "1px solid rgba(74,222,128,0.25)",
1453 fontSize: 11,
1454 fontFamily: "DM Mono, monospace",
1455 color: "var(--green)",
1456 }}
1457 >
1458 {step}
1459 </span>
1460 {i < arr.length - 1 && (
1461 <ChevronRight size={12} style={{ color: "var(--text-3)" }} />
1462 )}
1463 </React.Fragment>
1464 ),
1465 )}
1466 </div>
1467
1468 <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
1469 {AI_AGENTS.map((agent, i) => (
1470 <div
1471 key={agent.id}
1472 className="animate-fade-up"
1473 style={{
1474 animationDelay: `${0.3 + i * 0.05}s`,
1475 opacity: 0,
1476 animationFillMode: "forwards",
1477 }}
1478 >
1479 <AgentCard agent={agent} dict={dict} />
1480 </div>
1481 ))}
1482 </div>
1483 </section>
1484
1485 {/* Section: Growth Stages */}
1486 <section style={{ marginBottom: 36 }}>
1487 <div
1488 className="animate-fade-up"
1489 style={{
1490 animationDelay: "0.4s",
1491 opacity: 0,
1492 animationFillMode: "forwards",
1493 }}
1494 >
1495 <SectionHeader>{dict["help_section_stages"]}</SectionHeader>
1496 </div>
1497 <div
1498 style={{
1499 display: "grid",
1500 gridTemplateColumns: "1fr 1fr",
1501 gap: 12,
1502 }}
1503 >
1504 {STAGES.map((stage, i) => (
1505 <div
1506 key={stage.id}
1507 className="animate-fade-up"
1508 style={{
1509 animationDelay: `${0.45 + i * 0.05}s`,
1510 opacity: 0,
1511 animationFillMode: "forwards",
1512 }}
1513 >
1514 <StageCard stage={stage} dict={dict} />
1515 </div>
1516 ))}
1517 </div>
1518 </section>
1519
1520 {/* Section: Manual Intervention */}
1521 <section style={{ marginBottom: 36 }}>
1522 <div
1523 className="animate-fade-up"
1524 style={{
1525 animationDelay: "0.5s",
1526 opacity: 0,
1527 animationFillMode: "forwards",
1528 }}
1529 >
1530 <SectionHeader>{dict["help_section_manual"]}</SectionHeader>
1531 </div>
1532 <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
1533 {MANUAL_SCENARIOS.map((s, i) => (
1534 <div
1535 key={s.id}
1536 className="animate-fade-up"
1537 style={{
1538 animationDelay: `${0.55 + i * 0.05}s`,
1539 opacity: 0,
1540 animationFillMode: "forwards",
1541 }}
1542 >
1543 <ManualCard scenario={s} dict={dict} />
1544 </div>
1545 ))}
1546 </div>
1547 </section>
1548
1549 {/* Section: How to Add a Crop */}
1550 <section style={{ marginBottom: 36 }}>
1551 <div
1552 className="animate-fade-up"
1553 style={{
1554 animationDelay: "0.6s",
1555 opacity: 0,
1556 animationFillMode: "forwards",
1557 }}
1558 >
1559 <SectionHeader>{dict["help_section_add_crop"]}</SectionHeader>
1560 </div>
1561 <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
1562 {[
1563 { key: "help_add_crop_step1", icon: "1", color: "var(--blue)" },
1564 { key: "help_add_crop_step2", icon: "2", color: "var(--green)" },
1565 { key: "help_add_crop_step3", icon: "3", color: "var(--amber)" },
1566 { key: "help_add_crop_step4", icon: "4", color: "var(--blue)" },
1567 { key: "help_add_crop_step5", icon: "5", color: "var(--green)" },
1568 ].map((step, i) => (
1569 <div
1570 key={step.key}
1571 className="animate-fade-up"
1572 style={{
1573 animationDelay: `${0.65 + i * 0.05}s`,
1574 opacity: 0,
1575 animationFillMode: "forwards",
1576 }}
1577 >
1578 <StepCard step={step} dict={dict} index={i} />
1579 </div>
1580 ))}
1581 </div>
1582 </section>
1583
1584 {/* Section: Supported Crops */}
1585 <section style={{ marginBottom: 36 }}>
1586 <div
1587 className="animate-fade-up"
1588 style={{
1589 animationDelay: "0.7s",
1590 opacity: 0,
1591 animationFillMode: "forwards",
1592 }}
1593 >
1594 <SectionHeader>{dict["help_section_crops"]}</SectionHeader>
1595 </div>
1596 <div
1597 style={{
1598 display: "grid",
1599 gridTemplateColumns: "repeat(2, 1fr)",
1600 gap: 12,
1601 }}
1602 >
1603 {[
1604 {
1605 key: "help_crop_lettuce",
1606 emoji: "🥬",
1607 days: 21,
1608 cycle: "1h",
1609 stages: ["Seedling", "Vegetative", "Harvest"],
1610 color: "var(--green)",
1611 },
1612 {
1613 key: "help_crop_tomato",
1614 emoji: "🍅",
1615 days: 70,
1616 cycle: "2h",
1617 stages: ["Seedling", "Vegetative", "Flowering", "Fruiting"],
1618 color: "var(--red)",
1619 },
1620 {
1621 key: "help_crop_basil",
1622 emoji: "🌿",
1623 days: 28,
1624 cycle: "1h",
1625 stages: ["Seedling", "Vegetative", "Harvest"],
1626 color: "var(--green)",
1627 },
1628 {
1629 key: "help_crop_strawberry",
1630 emoji: "🍓",
1631 days: 63,
1632 cycle: "2h",
1633 stages: ["Seedling", "Vegetative", "Flowering", "Fruiting"],
1634 color: "var(--amber)",
1635 },
1636 ].map((crop, i) => (
1637 <div
1638 key={crop.key}
1639 className="animate-fade-up"
1640 style={{
1641 animationDelay: `${0.75 + i * 0.05}s`,
1642 opacity: 0,
1643 animationFillMode: "forwards",
1644 }}
1645 >
1646 <CropTypeCard crop={crop} dict={dict} />
1647 </div>
1648 ))}
1649 </div>
1650 </section>
1651
1652 {/* AI CTA */}
1653 <div
1654 className="animate-fade-scale"
1655 style={{
1656 padding: "24px",
1657 borderRadius: 16,
1658 background:
1659 "linear-gradient(135deg, rgba(74,222,128,0.08), rgba(74,222,128,0.03))",
1660 border: "1px solid rgba(74,222,128,0.25)",
1661 display: "flex",
1662 alignItems: "center",
1663 justifyContent: "space-between",
1664 gap: 16,
1665 flexWrap: "wrap",
1666 marginBottom: 8,
1667 animationDelay: "0.8s",
1668 opacity: 0,
1669 animationFillMode: "forwards",
1670 }}
1671 >
1672 <div>
1673 <div
1674 style={{
1675 fontSize: 16,
1676 fontWeight: 700,
1677 color: "var(--text)",
1678 marginBottom: 4,
1679 }}
1680 >
1681 {dict["help_section_ai_cta"]}
1682 </div>
1683 <div style={{ fontSize: 13, color: "var(--text-2)" }}>
1684 {dict["help_ai_cta_desc"]}
1685 </div>
1686 </div>
1687 <PrimaryButton
1688 onClick={() => navigate("/intelligence")}
1689 icon={Sparkles}
1690 >
1691 {dict["help_ai_cta_btn"]}
1692 </PrimaryButton>
1693 </div>
1694 </div>
1695 );
1696}