Environment: Optimize for Hugging Face Spaces and update documentation

app.json

@@ -4,11 +4,11 @@
     "slug": "GreenDoctor",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./assets/icon.png",
+    "icon": "./assets/logo.png",
     "userInterfaceStyle": "light",
     "newArchEnabled": true,
     "splash": {
-      "image": "./assets/splash-icon.png",
+      "image": "./assets/logo.png",
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
@@ -17,7 +17,7 @@
     },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
+        "foregroundImage": "./assets/logo.png",
         "backgroundColor": "#ffffff"
       },
       "edgeToEdgeEnabled": true,
@@ -28,7 +28,7 @@
       ]
     },
     "web": {
-      "favicon": "./assets/favicon.png"
+      "favicon": "./assets/logo.png"
     },
     "extra": {
       "eas": {

backend/app.py

@@ -14,10 +14,12 @@ import gc
 import torch
 torch.set_num_threads(1)
 
-# Global variable for Lite Mode (Auto-detected)
+# Environment Detection
 IS_RENDER = os.environ.get("RENDER", "false").lower() == "true"
+IS_HF = "SPACE_ID" in os.environ
+ENV_MODE = "HuggingFace" if IS_HF else ("Render" if IS_RENDER else "Local")
 
-app = FastAPI(title="Green Doctor AI Vision")
+app = FastAPI(title=f"Green Doctor AI Vision [{ENV_MODE}]")
 
 app.add_middleware(
     CORSMiddleware,

backend/test_rejection.py

@@ -0,0 +1,35 @@
+import requests
+from PIL import Image
+import io
+import time
+
+BASE_URL = "http://localhost:8000" # Test locally first
+
+def test_rejection(color, name):
+    print(f"\n--- Testing {name} ({color}) ---")
+    img = Image.new('RGB', (224, 224), color=color)
+    img_byte_arr = io.BytesIO()
+    img.save(img_byte_arr, format='JPEG')
+    img_byte_arr = img_byte_arr.getvalue()
+
+    try:
+        response = requests.post(
+            f"{BASE_URL}/predict",
+            files={"file": ("test.jpg", img_byte_arr, "image/jpeg")}
+        )
+        if response.status_code == 200:
+            data = response.json()
+            print(f"Result: {data.get('class')}")
+            print(f"Details: {data.get('ai_details')}")
+        else:
+            print(f"Error: {response.status_code} - {response.text}")
+    except Exception as e:
+        print(f"Request failed: {e}")
+
+# Color tests
+# White (Non-plant)
+test_rejection((255, 255, 255), "Pure White")
+# Blue (Non-plant)
+test_rejection((0, 0, 255), "Pure Blue")
+# Bright Green (Likely Plant)
+test_rejection((34, 139, 34), "Forest Green")

constants/theme.js

@@ -1,37 +1,58 @@
 export const COLORS = {
-  primary: '#2E7D32', // Deep Green (Logo)
-  secondary: '#4CAF50', // Medium Green
-  background: '#F5F5F5', // Light Gray Background
-  surface: '#FFFFFF', // White Surface
-  textPrimary: '#1B5E20', // Dark Green Text
-  textSecondary: '#666666', // Gray Text
-  accent: '#FF5722', // Orange/Red for alerts
+  // Brand Palette (HSL Derived for harmony)
+  primary: '#2E7D32',    // Deep Forest Green
+  primaryLight: '#4CAF50', // Leaf Green
+  primaryDark: '#1B5E20',  // Dark Moss
+  secondary: '#8BC34A',  // Sprout Green
+
+  // Neutral Palette
+  background: '#F9FBF9', // Soft Mint-tinted White
+  surface: '#FFFFFF',
+  text: '#122613',       // Almost Black Green
+  textLight: '#5C6B5D',  // Muted Sage
+  border: '#E0EAE0',
+
+  // Status Palette
+  success: '#388E3C',
+  warning: '#F57C00',
   error: '#D32F2F',
+  info: '#1976D2',
+
   white: '#FFFFFF',
   black: '#000000',
-  cardShadow: {
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2,
+
+  // Premium Layered Shadows
+  shadow: {
+    sm: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.1,
+      shadowRadius: 2,
+      elevation: 2,
     },
-    shadowOpacity: 0.1,
-    shadowRadius: 3.84,
-    elevation: 3,
+    md: {
+      shadowColor: "#1B5E20",
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.08,
+      shadowRadius: 8,
+      elevation: 4,
+    },
+    lg: {
+      shadowColor: "#1B5E20",
+      shadowOffset: { width: 0, height: 10 },
+      shadowOpacity: 0.12,
+      shadowRadius: 20,
+      elevation: 8,
+    }
   }
 };
 
-export const FONTS = {
-  regular: 'System', 
-  bold: 'System', 
-  // In a real app we'd load custom fonts here
-};
-
 export const SIZES = {
-  padding: 16,
-  radius: 12,
-  h1: 24,
-  h2: 20,
-  h3: 16,
-  body: 14,
+  padding: 20,
+  radius: 20,       // Larger radius for modern look
+  radiusSm: 12,
+  h1: 28,
+  h2: 24,
+  h3: 18,
+  body: 16,
 };

constants/translations.js

@@ -47,6 +47,11 @@ export const TRANSLATIONS = {
         missionPoint3: "To promote sustainable agriculture practices in Puduvayal and beyond.",
         changeLanguage: "Change Language",
         aboutApp: "About App",
+        analyseNow: "Analyse Now",
+        autoScan: "AUTO SCAN",
+        manualCapture: "MANUAL",
+        scanning: "Scanning...",
+        holdSteady: "Hold steady...",
         govtSchemes: "Government Schemes",
         viewSchemes: "View available schemes",
         centralSchemes: "Central Schemes",
@@ -54,6 +59,25 @@ export const TRANSLATIONS = {
         otherSchemes: "Other Schemes",
         schemeDetails: "Scheme Details",
         noSchemesAvailable: "No schemes available at the moment",
+        clearHistory: "Clear History",
+        confirmClearAll: "Are you sure you want to delete ALL your scan history? This cannot be undone.",
+        applyOnline: "Apply Online",
+        dailyTips: [
+            "Water your plants early in the morning to prevent fungal growth and ensure better absorption.",
+            "Use neem oil as a natural pesticide to protect your crops without harmful chemicals.",
+            "Rotating your crops helps maintain soil fertility and breaks the cycle of pests and diseases.",
+            "Ensuring proper spacing between plants improves air circulation and reduces moisture-built diseases.",
+            "Regularly inspect the underside of leaves; many pests hide there before causing visible damage.",
+            "Adding organic compost to your soil provides essential nutrients and improves its texture.",
+            "Mulching your soil helps retain moisture and suppresses weed growth effectively."
+        ],
+        schemeLinks: {
+            s1: "https://pmkisan.gov.in/",
+            s2: "https://pmfby.gov.in/",
+            s3: "https://www.india.gov.in/spotlight/kisan-credit-card-kcc",
+            s4: "https://soilhealth.dac.gov.in/",
+            s5: "https://pmksy.gov.in/"
+        },
         ourTeam: "OUR TEAM",
         principal: "Principal: Dr. K. Baskaran, Principal, ACGCET",
         principalInvestigator: "Principal Investigator (PI): Dr. S. Nageswari, ASP/EEE",
@@ -99,28 +123,25 @@ export const TRANSLATIONS = {
         noHistory: "வரலாறு இல்லை",
         confirmDelete: "நிச்சயமாக இதை நீக்க விரும்புகிறீர்களா?",
         cancel: "ரத்து செய்",
-        // Unknown state labels
-        unknownStatus: "சிக்கல் விவரங்கள்",
-        unknownInstruction: "வழிமுறைகள்",
-        unknownAdvice: "நிபுணர் ஆலோசனை",
-        unknownNextSteps: "அடுத்த கட்டங்கள்",
-        aboutTitle: "பற்றி",
-        aboutContent: "கிரீன் டாக்டர் என்பது புதுவயல் மற்றும் அதைச் சுற்றியுள்ள பகுதிகளில் உள்ள விவசாயிகளுக்குத் தங்கள் பயிர்களை இலை நோய்களிலிருந்து பாதுகாக்க உதவும் வகையில் வடிவமைக்கப்பட்ட ஒரு புதுமையான மொபைல் செயலியாகும். இந்தத் திட்டம் உன்னத் பாரத் அபியான் (UBA) - நிலையான விவசாய முறைகள் SEG இன் கீழ் பெருமையுடன் ஸ்பான்சர் செய்யப்படுகிறது, மேலும் காரைக்குடி அழகப்ப செட்டியார் அரசு பொறியியல் மற்றும் தொழில்நுட்பக் கல்லூரி மாணவர்கள் மற்றும் ஆசிரியர்களால் உருவாக்கப்பட்டது.",
-        visionTitle: "தொலைநோக்கு",
-        visionContent: "விவசாயிகளுக்கு அணுகக்கூடிய தொழில்நுட்பத்தின் மூலம் அதிகாரம் அளிப்பதே உறுதி. இது விவசாய உற்பத்தித்திறனை மேம்படுத்துகிறது, பயிர் இழப்பைக் குறைக்கிறது மற்றும் நிலையான விவசாய நடைமுறைகளை ஊக்குவிக்கிறது. நவீன AI தீர்வுகளுக்கும் பாரம்பரிய விவசாய சமூகங்களுக்கும் இடையிலான இடைவெளியைக் குறைக்க நாங்கள் இலக்கு வைத்துள்ளோம்.",
-        missionTitle: "குறிக்கோள்",
-        missionPoint1: "AI-���ல் இயங்கும் தீர்வுகள் மூலம் நிகழ்நேர மற்றும் நம்பகமான இலை நோய் கண்டறிதலை வழங்குதல்.",
-        missionPoint2: "உள்ளூர் விவசாயிகளுக்கு ஏற்ற நடைமுறை, சூழல் நட்பு தீர்வுகளை பரிந்துரைத்தல்.",
-        missionPoint3: "புதுவயல் மற்றும் அதற்கு அப்பால் நிலையான விவசாய நடைமுறைகளை ஊக்குவித்தல்.",
-        changeLanguage: "மொழியை மாற்றவும்",
-        aboutApp: "செயலி பற்றி",
-        govtSchemes: "அரசு திட்டங்கள்",
-        viewSchemes: "கிடைக்கக்கூடிய திட்டங்களைக் காண்க",
-        centralSchemes: "மத்திய திட்டங்கள்",
-        stateSchemes: "மாநில திட்டங்கள்",
-        otherSchemes: "பிற திட்டங்கள்",
-        schemeDetails: "திட்ட விவரங்கள்",
-        noSchemesAvailable: "தற்போது எந்த திட்டங்களும் இல்லை",
+        clearHistory: "வரலாற்றை அழி",
+        confirmClearAll: "உங்கள் அனைத்து ஸ்கேன் வரலாற்றையும் நீக்க விரும்புகிறீர்களா? இதை மாற்ற முடியாது.",
+        applyOnline: "ஆன்லைனில் விண்ணப்பிக்கவும்",
+        dailyTips: [
+            "பூஞ்சை வளர்ச்சியைத் தடுக்கவும் சிறந்த உறிஞ்சுதலை உறுதி செய்யவும் காலையில் உங்கள் தாவரங்களுக்கு நீர் ஊற்றவும்.",
+            "வேப்ப எண்ணெயை இயற்கை பூச்சிக்கொல்லியாகப் பயன்படுத்துவதன் மூலம் பயிர்களைப் பாதுகாக்கலாம்.",
+            "பயிர் சுழற்சி முறையைப் பின்பற்றுவது மண்ணின் வளத்தை பராமரிக்கவும் பூச்சிகளைக் குறைக்கவும் உதவுகிறது.",
+            "செடிகளுக்கு இடையே போதிய இடைவெளி விடுவது காற்றோட்டத்தை மேம்படுத்தி நோய்களைக் குறைக்கிறது.",
+            "இலைகளின் அடியில் அவ்வப்போது பரிசோதிக்கவும்; பல பூச்சிகள் அங்கேயே மறைந்திருக்கும்.",
+            "மண்ணில் இயற்கை உரங்களைச் சேர்ப்பது அத்தியாவசிய ஊட்டச்சத்துக்களை வழங்குகிறது.",
+            "மண்ணில் மூடாக்கு (Mulching) இடுவது ஈரப்பதத்தை தக்கவைக்கவும் களைகளைக் குறைக்கவும் உதவுகிறது."
+        ],
+        schemeLinks: {
+            s1: "https://pmkisan.gov.in/",
+            s2: "https://pmfby.gov.in/",
+            s3: "https://www.india.gov.in/spotlight/kisan-credit-card-kcc",
+            s4: "https://soilhealth.dac.gov.in/",
+            s5: "https://pmksy.gov.in/"
+        },
         ourTeam: "எங்கள் குழு",
         principal: "முதல்வர்: Dr. K. பாஸ்கரன், முதல்வர், ACGCET",
         principalInvestigator: "முதன்மை ஆய்வாளர் (PI): Dr. S. நாகேஸ்வரி, ASP/EEE",

screens/AboutScreen.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, Text, View, Image, ScrollView, TouchableOpacity, SafeAreaView, StatusBar, Dimensions } from 'react-native';
-import { COLORS, SIZES } from '../constants/theme';
+import { COLORS, SIZES, FONTS } from '../constants/theme';
 import { TRANSLATIONS } from '../constants/translations';
 
 const { width } = Dimensions.get('window');
@@ -9,6 +9,19 @@ const AboutScreen = ({ route, navigation }) => {
     const language = route.params?.language || 'en';
     const t = TRANSLATIONS[language] || TRANSLATIONS['en'];
 
+    const InfoCard = ({ icon, title, content, children }) => (
+        <View style={styles.card}>
+            <View style={styles.cardHeader}>
+                <View style={styles.cardIconCircle}>
+                    <Text style={styles.cardIcon}>{icon}</Text>
+                </View>
+                <Text style={styles.cardTitle}>{title}</Text>
+            </View>
+            {content ? <Text style={styles.cardBody}>{content}</Text> : null}
+            {children}
+        </View>
+    );
+
     return (
         <SafeAreaView style={styles.container}>
             <StatusBar backgroundColor={COLORS.white} barStyle="dark-content" />
@@ -24,106 +37,85 @@ const AboutScreen = ({ route, navigation }) => {
 
             <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
 
-                {/* 1. Logos Section */}
-                <View style={styles.logoRow}>
-                    <View style={styles.sideLogoContainer}>
-                        <Image
-                            source={require('../assets/uba_logo.png')}
-                            style={styles.sideLogo}
-                            resizeMode="contain"
-                        />
-                    </View>
-
-                    <View style={styles.mainLogoContainer}>
-                        <Image
-                            source={require('../assets/logo.png')}
-                            style={styles.mainLogo}
-                            resizeMode="contain"
-                        />
-                    </View>
-
-                    <View style={styles.sideLogoContainer}>
-                        <Image
-                            source={require('../assets/act_logo.png')}
-                            style={styles.sideLogo}
-                            resizeMode="contain"
-                        />
+                {/* 1. Logos Section - Grouped Header */}
+                <View style={styles.brandHeader}>
+                    <View style={styles.logoGrid}>
+                        <View style={styles.brandBox}>
+                            <Image source={require('../assets/uba_logo.png')} style={styles.sideLogo} resizeMode="contain" />
+                        </View>
+                        <View style={[styles.brandBox, styles.mainBrandBox]}>
+                            <Image source={require('../assets/logo.png')} style={styles.mainLogo} resizeMode="contain" />
+                        </View>
+                        <View style={styles.brandBox}>
+                            <Image source={require('../assets/act_logo.png')} style={styles.sideLogo} resizeMode="contain" />
+                        </View>
                     </View>
+                    <Text style={styles.pageHeaderTitle}>{t.aboutTitle}</Text>
                 </View>
 
-                {/* 2. Title */}
-                <Text style={styles.pageHeaderTitle}>{t.aboutTitle}</Text>
+                {/* 2. Content Cards */}
+                <InfoCard
+                    icon="🌱"
+                    title={t.aboutApp}
+                    content={t.aboutContent}
+                />
 
-                {/* 3. About Text */}
-                <Text style={styles.bodyText}>
-                    {t.aboutContent}
-                </Text>
+                <InfoCard
+                    icon="👁️"
+                    title={t.visionTitle}
+                    content={t.visionContent}
+                />
 
-                {/* 4. Vision & Mission */}
-                <View style={styles.sectionContainer}>
-                    <View style={styles.sectionHeader}>
-                        <Text style={styles.sectionIcon}>👁️</Text>
-                        <Text style={styles.sectionTitle}>{t.visionTitle}</Text>
-                    </View>
-                    <Text style={styles.bodyText}>
-                        {t.visionContent}
-                    </Text>
-                </View>
-
-                <View style={styles.sectionContainer}>
-                    <View style={styles.sectionHeader}>
-                        <Text style={styles.sectionIcon}>🎯</Text>
-                        <Text style={styles.sectionTitle}>{t.missionTitle}</Text>
-                    </View>
+                <InfoCard icon="🎯" title={t.missionTitle}>
                     <View style={styles.bulletList}>
-                        <View style={styles.bulletItem}>
-                            <Text style={styles.bullet}>•</Text>
-                            <Text style={styles.bodyText}>{t.missionPoint1}</Text>
-                        </View>
-                        <View style={styles.bulletItem}>
-                            <Text style={styles.bullet}>•</Text>
-                            <Text style={styles.bodyText}>{t.missionPoint2}</Text>
-                        </View>
-                        <View style={styles.bulletItem}>
-                            <Text style={styles.bullet}>•</Text>
-                            <Text style={styles.bodyText}>{t.missionPoint3}</Text>
-                        </View>
+                        {[t.missionPoint1, t.missionPoint2, t.missionPoint3].map((point, i) => (
+                            <View key={i} style={styles.bulletItem}>
+                                <View style={styles.bulletPoint} />
+                                <Text style={styles.bulletText}>{point}</Text>
+                            </View>
+                        ))}
                     </View>
-                </View>
+                </InfoCard>
 
-                {/* 5. Our Team Section */}
-                <View style={styles.teamContainer}>
-                    <View style={styles.sectionHeader}>
-                        <Text style={styles.sectionIcon}>👥</Text>
-                        <Text style={styles.sectionTitle}>{t.ourTeam}</Text>
+                {/* 3. Team Card */}
+                <View style={[styles.card, styles.teamCard]}>
+                    <View style={styles.cardHeader}>
+                        <View style={[styles.cardIconCircle, { backgroundColor: '#E3F2FD' }]}>
+                            <Text style={styles.cardIcon}>👥</Text>
+                        </View>
+                        <Text style={styles.cardTitle}>{t.ourTeam}</Text>
                     </View>
 
-                    <View style={styles.teamMember}>
-                        <Text style={styles.roleLabel}>{t.principal.split(':')[0]}:</Text>
-                        <Text style={styles.memberName}>{t.principal.split(':')[1]}</Text>
-                    </View>
+                    <View style={styles.teamGrid}>
+                        <View style={styles.teamMember}>
+                            <Text style={styles.roleLabel}>{t.principal?.split(':')[0] || 'Principal'}</Text>
+                            <Text style={styles.memberName}>{t.principal?.split(':')[1] || ''}</Text>
+                        </View>
 
-                    <View style={styles.teamMember}>
-                        <Text style={styles.roleLabel}>{t.principalInvestigator.split(':')[0]}:</Text>
-                        <Text style={styles.memberName}>{t.principalInvestigator.split(':')[1]}</Text>
-                    </View>
+                        <View style={styles.teamMember}>
+                            <Text style={styles.roleLabel}>{t.principalInvestigator?.split(':')[0] || 'PI'}</Text>
+                            <Text style={styles.memberName}>{t.principalInvestigator?.split(':')[1] || ''}</Text>
+                        </View>
 
-                    <View style={styles.teamMember}>
-                        <Text style={styles.roleLabel}>{t.coPi.split(':')[0]}:</Text>
-                        <Text style={styles.memberName}>{t.coPi.split(':')[1]}</Text>
-                    </View>
+                        <View style={styles.teamMember}>
+                            <Text style={styles.roleLabel}>{t.coPi?.split(':')[0] || 'Co-PI'}</Text>
+                            <Text style={styles.memberName}>{t.coPi?.split(':')[1] || ''}</Text>
+                        </View>
 
-                    <View style={styles.teamMember}>
-                        <Text style={styles.roleLabel}>{t.studentInnovators}</Text>
-                        <View style={styles.studentList}>
-                            {t.studentsList && t.studentsList.map((student, index) => (
-                                <Text key={index} style={styles.studentName}>• {student}</Text>
-                            ))}
+                        <View style={styles.studentSection}>
+                            <Text style={styles.roleLabel}>{t.studentInnovators}</Text>
+                            <View style={styles.studentChips}>
+                                {t.studentsList?.map((student, i) => (
+                                    <View key={i} style={styles.chip}>
+                                        <Text style={styles.chipText}>{student}</Text>
+                                    </View>
+                                ))}
+                            </View>
                         </View>
                     </View>
                 </View>
 
-                <View style={{ height: 60 }} />
+                <View style={{ height: 40 }} />
             </ScrollView>
         </SafeAreaView>
     );
@@ -132,143 +124,179 @@ const AboutScreen = ({ route, navigation }) => {
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: COLORS.white, // Clean white background
+        backgroundColor: '#F8F9FA',
     },
     header: {
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        paddingHorizontal: 20,
-        paddingVertical: 15,
-        backgroundColor: COLORS.white,
+        paddingHorizontal: 15,
+        paddingTop: 10,
+        height: 60,
+        backgroundColor: '#fff',
     },
     backButton: {
-        padding: 5,
+        padding: 10,
     },
     backButtonText: {
-        fontSize: 28,
-        color: '#333',
-        fontWeight: '300', // Lighter weight for modern feel
+        fontSize: 24,
+        color: COLORS.primary,
+        fontWeight: 'bold',
     },
     headerTitle: {
-        fontSize: 16,
-        fontWeight: '600',
-        color: '#333',
-        letterSpacing: 1,
-        textTransform: 'uppercase',
+        fontSize: 18,
+        fontWeight: 'bold',
+        color: COLORS.primary,
     },
     scrollContent: {
-        paddingHorizontal: 24,
-        paddingTop: 10,
+        padding: 20,
     },
-    logoRow: {
-        flexDirection: 'row',
+    brandHeader: {
         alignItems: 'center',
-        justifyContent: 'space-between',
         marginBottom: 30,
-        marginTop: 10,
     },
-    sideLogoContainer: {
-        width: 70,
-        height: 70,
-        justifyContent: 'center',
+    logoGrid: {
+        flexDirection: 'row',
         alignItems: 'center',
-        // Optional: Add shadow or elevation for logos if needed, currently kept flat
-    },
-    sideLogo: {
-        width: '100%',
-        height: '100%',
+        justifyContent: 'center',
+        gap: 15,
+        marginBottom: 15,
     },
-    mainLogoContainer: {
-        width: 100,
-        height: 100,
+    brandBox: {
+        width: 60,
+        height: 60,
+        backgroundColor: '#fff',
+        borderRadius: 12,
         justifyContent: 'center',
         alignItems: 'center',
+        elevation: 2,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+    },
+    mainBrandBox: {
+        width: 80,
+        height: 80,
+        borderRadius: 20,
+        borderWidth: 1,
+        borderColor: COLORS.primary + '30',
     },
     mainLogo: {
-        width: '100%',
-        height: '100%',
+        width: '80%',
+        height: '80%',
     },
-    pageHeaderTitle: {
-        fontSize: 24,
-        fontWeight: '800', // Heavy bold
-        color: '#1B5E20', // Dark Green
-        textAlign: 'center',
-        marginBottom: 20,
-        letterSpacing: 0.5,
-        textTransform: 'uppercase',
+    sideLogo: {
+        width: '70%',
+        height: '70%',
     },
-    bodyText: {
-        fontSize: 15,
-        lineHeight: 24,
-        color: '#444', // Dark gray for better readability than pure black
-        textAlign: 'justify',
-        marginBottom: 20,
-        fontWeight: '400',
+    pageHeaderTitle: {
+        fontSize: 22,
+        fontWeight: 'bold',
+        color: COLORS.primary,
+        letterSpacing: 1,
     },
-    sectionContainer: {
+    card: {
+        backgroundColor: '#fff',
+        borderRadius: 20,
+        padding: 20,
         marginBottom: 20,
+        elevation: 3,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 8,
     },
-    sectionHeader: {
+    cardHeader: {
         flexDirection: 'row',
         alignItems: 'center',
-        marginBottom: 10,
+        marginBottom: 15,
     },
-    sectionIcon: {
+    cardIconCircle: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: '#F1F8E9',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: 12,
+    },
+    cardIcon: {
         fontSize: 20,
-        marginRight: 10,
-        color: '#2E7D32',
     },
-    sectionTitle: {
-        fontSize: 18,
-        fontWeight: '700',
-        color: '#222',
-        letterSpacing: 0.5,
-        textTransform: 'uppercase',
+    cardTitle: {
+        fontSize: 16,
+        fontWeight: 'bold',
+        color: COLORS.primary,
+    },
+    cardBody: {
+        fontSize: 14,
+        lineHeight: 22,
+        color: '#444',
+        textAlign: 'justify',
     },
     bulletList: {
         marginTop: 5,
     },
     bulletItem: {
         flexDirection: 'row',
+        alignItems: 'center',
         marginBottom: 8,
-        alignItems: 'flex-start',
     },
-    bullet: {
-        fontSize: 18,
+    bulletPoint: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+        backgroundColor: COLORS.primary,
         marginRight: 10,
-        color: '#2E7D32',
-        lineHeight: 24,
     },
-    teamContainer: {
-        marginTop: 10,
-        paddingTop: 20,
-        borderTopWidth: 1,
-        borderTopColor: '#eee',
+    bulletText: {
+        fontSize: 14,
+        color: '#444',
+    },
+    teamCard: {
+        backgroundColor: '#fff',
+    },
+    teamGrid: {
+        gap: 15,
     },
     teamMember: {
-        marginBottom: 15,
+        paddingBottom: 10,
+        borderBottomWidth: 1,
+        borderBottomColor: '#f0f0f0',
     },
     roleLabel: {
-        fontSize: 14,
-        fontWeight: '700',
-        color: '#1B5E20',
+        fontSize: 12,
+        color: COLORS.gray,
+        fontWeight: 'bold',
         marginBottom: 2,
     },
     memberName: {
         fontSize: 15,
-        fontWeight: '400',
-        color: '#333',
+        color: COLORS.text,
+        fontWeight: '600',
     },
-    studentList: {
+    studentSection: {
         marginTop: 5,
-        paddingLeft: 10,
     },
-    studentName: {
-        fontSize: 14,
-        color: '#555',
-        marginBottom: 2,
-        lineHeight: 20,
+    studentChips: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 8,
+        marginTop: 10,
+    },
+    chip: {
+        backgroundColor: '#F5F5F5',
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        borderRadius: 15,
+        borderWidth: 1,
+        borderColor: '#E0E0E0',
+    },
+    chipText: {
+        fontSize: 13,
+        color: '#666',
+        fontWeight: '500',
     }
 });
 

screens/HistoryScreen.js

@@ -23,12 +23,12 @@ const HistoryScreen = ({ navigation, route }) => {
 
     const handleDelete = async (item) => {
         Alert.alert(
-            t.delete,
-            t.confirmDelete,
+            language === 'ta' ? "ஸ்கேனை நீக்கவா?" : "Delete Scan?",
+            language === 'ta' ? "நிச்சயமாக இதை நீக்க விரும்புகிறீர்களா?" : "Are you sure you want to remove this from your history?",
             [
                 { text: t.cancel, style: "cancel" },
                 {
-                    text: t.delete,
+                    text: language === 'ta' ? "நீக்கு" : "Delete",
                     style: "destructive",
                     onPress: async () => {
                         await deleteScan(item.timestamp);
@@ -47,18 +47,24 @@ const HistoryScreen = ({ navigation, route }) => {
                 analysisResult: item.analysisResult,
                 language: language
             })}
+            activeOpacity={0.7}
         >
-            <Image source={{ uri: item.imageUri }} style={styles.thumbnail} />
+            <View style={styles.thumbnailContainer}>
+                <Image source={{ uri: item.imageUri }} style={styles.thumbnail} />
+                <View style={styles.statusDotOverlay}>
+                    <View style={[styles.miniDot, { backgroundColor: item.analysisResult.isHealthy ? COLORS.success : COLORS.error }]} />
+                </View>
+            </View>
             <View style={styles.cardContent}>
-                <Text style={styles.cropName}>{item.analysisResult.crop}</Text>
+                <Text style={styles.cropName}>{item.analysisResult.crop.toUpperCase()}</Text>
                 <Text style={styles.diseaseName}>{item.analysisResult.name[language]}</Text>
-                <Text style={styles.date}>{new Date(item.timestamp).toLocaleDateString()}</Text>
+                <Text style={styles.dateText}>{new Date(item.timestamp).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })}</Text>
             </View>
             <TouchableOpacity
-                style={styles.deleteButton}
+                style={styles.deleteIconButton}
                 onPress={() => handleDelete(item)}
             >
-                <Text style={styles.deleteText}>🗑️</Text>
+                <Text style={styles.trashIcon}>🗑️</Text>
             </TouchableOpacity>
         </TouchableOpacity>
     );
@@ -66,16 +72,36 @@ const HistoryScreen = ({ navigation, route }) => {
     return (
         <View style={styles.container}>
             <View style={styles.header}>
-                <TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
-                    <Text style={styles.backButtonText}>←</Text>
-                </TouchableOpacity>
-                <Text style={styles.headerTitle}>{t.history}</Text>
+                <View style={styles.headerTop}>
+                    <TouchableOpacity onPress={() => navigation.goBack()} style={styles.backBtn}>
+                        <Text style={styles.backBtnText}>←</Text>
+                    </TouchableOpacity>
+                    <Text style={styles.headerTitle}>{t.history}</Text>
+                    <View style={{ width: 44 }} />
+                </View>
+
                 {history.length > 0 && (
-                    <TouchableOpacity onPress={async () => {
-                        await clearHistory();
-                        loadHistory();
-                    }}>
-                        <Text style={styles.clearText}>Clear</Text>
+                    <TouchableOpacity
+                        style={styles.clearBadge}
+                        onPress={() => {
+                            Alert.alert(
+                                t.clearHistory,
+                                t.confirmClearAll,
+                                [
+                                    { text: t.cancel, style: "cancel" },
+                                    {
+                                        text: t.clearHistory,
+                                        style: "destructive",
+                                        onPress: async () => {
+                                            await clearHistory();
+                                            loadHistory();
+                                        }
+                                    }
+                                ]
+                            );
+                        }}
+                    >
+                        <Text style={styles.clearBadgeText}>{t.clearHistory.toUpperCase()}</Text>
                     </TouchableOpacity>
                 )}
             </View>
@@ -83,11 +109,13 @@ const HistoryScreen = ({ navigation, route }) => {
             <FlatList
                 data={history}
                 renderItem={renderItem}
-                keyExtractor={(item) => item.id}
-                contentContainerStyle={styles.list}
+                keyExtractor={(item) => item.timestamp.toString()}
+                contentContainerStyle={styles.listContainer}
                 ListEmptyComponent={
-                    <View style={styles.emptyContainer}>
-                        <Text style={styles.emptyText}>{t.noHistory}</Text>
+                    <View style={styles.emptyBox}>
+                        <Text style={styles.emptyIcon}>📂</Text>
+                        <Text style={styles.emptyTitle}>{t.noHistory}</Text>
+                        <Text style={styles.emptySub}>{language === 'ta' ? "நீங்கள் செய்த ஸ்கேன்கள் இங்கே தோன்றும்" : "Your scan history will appear here once you start scanning leaves."}</Text>
                     </View>
                 }
             />
@@ -101,87 +129,152 @@ const styles = StyleSheet.create({
         backgroundColor: COLORS.background,
     },
     header: {
+        backgroundColor: COLORS.primary,
+        paddingTop: 50,
+        paddingBottom: 25,
+        paddingHorizontal: SIZES.padding,
+        borderBottomLeftRadius: 35,
+        borderBottomRightRadius: 35,
+        ...COLORS.shadow.lg,
+        alignItems: 'center',
+    },
+    headerTop: {
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        paddingTop: 50,
-        paddingBottom: 20,
-        paddingHorizontal: 20,
-        backgroundColor: COLORS.primary,
-        borderBottomLeftRadius: 30,
-        borderBottomRightRadius: 30,
+        width: '100%',
+        marginBottom: 15,
     },
-    backButton: {
-        padding: 5,
+    backBtn: {
+        width: 44,
+        height: 44,
+        borderRadius: 22,
+        backgroundColor: 'rgba(255,255,255,0.2)',
+        justifyContent: 'center',
+        alignItems: 'center',
     },
-    backButtonText: {
+    backBtnText: {
         fontSize: 24,
-        color: '#fff',
+        color: COLORS.white,
+        fontWeight: 'bold',
     },
     headerTitle: {
         fontSize: 20,
-        fontWeight: 'bold',
-        color: '#fff',
+        fontWeight: '900',
+        color: COLORS.white,
+        letterSpacing: 0.5,
     },
-    clearText: {
-        color: '#fff',
-        fontSize: 14,
+    clearBadge: {
+        backgroundColor: 'rgba(0,0,0,0.2)',
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.1)',
+    },
+    clearBadgeText: {
+        color: 'rgba(255,255,255,0.8)',
+        fontSize: 10,
+        fontWeight: '900',
+        letterSpacing: 1,
     },
-    list: {
-        padding: 20,
+    listContainer: {
+        padding: SIZES.padding,
     },
     card: {
         flexDirection: 'row',
-        backgroundColor: '#fff',
-        borderRadius: 15,
+        backgroundColor: COLORS.surface,
+        borderRadius: 22,
         marginBottom: 15,
-        padding: 10,
-        elevation: 3,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.1,
-        shadowRadius: 4,
+        padding: 12,
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: COLORS.border,
+        ...COLORS.shadow.sm,
+    },
+    thumbnailContainer: {
+        position: 'relative',
     },
     thumbnail: {
-        width: 70,
-        height: 70,
-        borderRadius: 10,
+        width: 64,
+        height: 64,
+        borderRadius: 15,
+        backgroundColor: COLORS.background,
+    },
+    statusDotOverlay: {
+        position: 'absolute',
+        bottom: -2,
+        right: -2,
+        backgroundColor: COLORS.white,
+        width: 14,
+        height: 14,
+        borderRadius: 7,
+        justifyContent: 'center',
+        alignItems: 'center',
+        ...COLORS.shadow.sm,
+    },
+    miniDot: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
     },
     cardContent: {
         flex: 1,
         marginLeft: 15,
-        justifyContent: 'center',
     },
     cropName: {
-        fontSize: 12,
-        color: COLORS.gray,
-        fontWeight: 'bold',
+        fontSize: 10,
+        color: COLORS.textLight,
+        fontWeight: '900',
+        letterSpacing: 1,
+        marginBottom: 2,
     },
     diseaseName: {
-        fontSize: 16,
-        fontWeight: 'bold',
+        fontSize: 17,
+        fontWeight: '800',
         color: COLORS.text,
-        marginBottom: 5,
+        marginBottom: 4,
     },
-    date: {
+    dateText: {
         fontSize: 12,
-        color: COLORS.gray,
+        color: COLORS.textLight,
+        fontWeight: '600',
     },
-    deleteButton: {
+    deleteIconButton: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: COLORS.background,
         justifyContent: 'center',
-        paddingHorizontal: 10,
+        alignItems: 'center',
     },
-    deleteText: {
-        fontSize: 20,
+    trashIcon: {
+        fontSize: 18,
+        opacity: 0.6,
     },
-    emptyContainer: {
+    emptyBox: {
         flex: 1,
-        paddingTop: 100,
+        paddingTop: 80,
         alignItems: 'center',
+        paddingHorizontal: 40,
     },
-    emptyText: {
-        fontSize: 16,
-        color: COLORS.gray,
+    emptyIcon: {
+        fontSize: 64,
+        marginBottom: 20,
+        opacity: 0.2,
+    },
+    emptyTitle: {
+        fontSize: 18,
+        fontWeight: '900',
+        color: COLORS.text,
+        marginBottom: 8,
+    },
+    emptySub: {
+        fontSize: 14,
+        color: COLORS.textLight,
+        textAlign: 'center',
+        lineHeight: 20,
+        fontWeight: '500',
     }
 });
 

screens/HomeScreen.js

@@ -10,24 +10,27 @@ import { getHistory } from '../utils/storage';
 const { width } = Dimensions.get('window');
 
 const HomeScreen = ({ route, navigation }) => {
-    // Robust fallback: Check if route.params exists, then check language, otherwise default to 'en'
     const language = route.params?.language || 'en';
     const [recentScans, setRecentScans] = useState([]);
     const [stats, setStats] = useState({ total: 0, healthy: 0, issues: 0 });
+    const [tipIndex, setTipIndex] = useState(0);
 
-    // Safety check for translations
     const translations = TRANSLATIONS[language] || TRANSLATIONS['en'];
     const t = translations;
 
     useFocusEffect(
         useCallback(() => {
             loadData();
+            // Select a random tip from the pool
+            if (t.dailyTips) {
+                setTipIndex(Math.floor(Math.random() * t.dailyTips.length));
+            }
         }, [])
     );
 
     const loadData = async () => {
         const history = await getHistory();
-        setRecentScans(history.slice(0, 5)); // Show top 5 recent
+        setRecentScans(history.slice(0, 5));
 
         const total = history.length;
         const healthy = history.filter(item => item.analysisResult.isHealthy).length;
@@ -36,11 +39,18 @@ const HomeScreen = ({ route, navigation }) => {
         setStats({ total, healthy, issues });
     };
 
-    const StatCard = ({ icon, number, label, color, textColor }) => (
-        <View style={[styles.statCard, { backgroundColor: color }]}>
-            <Text style={{ fontSize: 24, paddingBottom: 5, color: textColor || COLORS.white }}>{icon}</Text>
-            <Text style={[styles.statNumber, { color: textColor || COLORS.white }]}>{number}</Text>
-            <Text style={[styles.statLabel, { color: textColor || COLORS.white }]}>{label}</Text>
+    const getGreeting = () => {
+        const hour = new Date().getHours();
+        if (hour < 12) return language === 'ta' ? "காலை வணக்கம்" : "Good Morning";
+        if (hour < 17) return language === 'ta' ? "மதிய வணக்கம்" : "Good Afternoon";
+        return language === 'ta' ? "மாலை வணக்கம்" : "Good Evening";
+    };
+
+    const StatCard = ({ icon, number, label, color }) => (
+        <View style={[styles.statCard, { borderBottomColor: color }]}>
+            <Text style={styles.statIcon}>{icon}</Text>
+            <Text style={styles.statNumber}>{number}</Text>
+            <Text style={styles.statLabel}>{label}</Text>
         </View>
     );
 
@@ -53,7 +63,7 @@ const HomeScreen = ({ route, navigation }) => {
 
         let result = await ImagePicker.launchImageLibraryAsync({
             mediaTypes: ImagePicker.MediaTypeOptions.Images,
-            allowsEditing: true,
+            allowsEditing: false,
             quality: 1,
         });
 
@@ -69,139 +79,158 @@ const HomeScreen = ({ route, navigation }) => {
     return (
         <SafeAreaView style={styles.container} edges={['right', 'left', 'top']}>
             <StatusBar backgroundColor={COLORS.primary} barStyle="light-content" />
-            <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
 
-                {/* Header */}
-                <View style={styles.header}>
-                    <View style={styles.headerLeft}>
-                        <View style={styles.logoCircle}>
-                            <Image
-                                source={require('../assets/logo.png')}
-                                style={styles.headerLogo}
-                                resizeMode="contain"
-                            />
-                        </View>
-                        <View style={styles.headerTextContainer}>
-                            <Text style={styles.headerTitle}>GREEN DOCTOR</Text>
-                            <Text style={styles.headerSubtitle}>{t.subtitle}</Text>
-                        </View>
+            {/* Immersive Header */}
+            <View style={styles.premiumHeader}>
+                <View style={styles.headerTopRow}>
+                    <View style={styles.headerTitleContainer}>
+                        <Text style={styles.greetingText}>{getGreeting()},</Text>
+                        <Text style={styles.brandTitle}>GREEN DOCTOR</Text>
                     </View>
                     <View style={styles.headerActions}>
                         <TouchableOpacity
                             style={styles.headerActionButton}
                             onPress={() => navigation.navigate('Language')}
-                            title={t.changeLanguage}
                         >
-                            <Text style={styles.headerActionIcon}>🌐</Text>
+                            <Text style={[styles.headerActionIcon, { fontSize: 13, fontWeight: '900', color: COLORS.white }]}>A/அ</Text>
                         </TouchableOpacity>
                         <TouchableOpacity
                             style={styles.headerActionButton}
                             onPress={() => navigation.navigate('About', { language })}
-                            title={t.aboutApp}
                         >
                             <Text style={styles.headerActionIcon}>ℹ️</Text>
                         </TouchableOpacity>
                     </View>
                 </View>
 
-                {/* Action Buttons */}
-                <View style={styles.actionContainer}>
-                    <TouchableOpacity style={styles.actionCard} onPress={takePhoto}>
-                        <View style={styles.actionIconCircle}>
-                            <Text style={styles.actionIcon}>📷</Text>
+                {/* Main Hero Card */}
+                <View style={styles.heroCard}>
+                    <View style={styles.logoCircleLg}>
+                        <Image
+                            source={require('../assets/logo.png')}
+                            style={styles.heroLogo}
+                            resizeMode="contain"
+                        />
+                    </View>
+                    <View style={styles.heroImpact}>
+                        <Text style={styles.heroTagline}>{t.subtitle}</Text>
+                        <View style={styles.activeLabelContainer}>
+                            <View style={styles.pulseIndicator} />
+                            <Text style={styles.pulseText}>AI SYSTEM ACTIVE</Text>
+                        </View>
+                    </View>
+                </View>
+            </View>
+
+            <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
+                {/* Core Scanning Actions */}
+                <View style={styles.primaryActionRow}>
+                    <TouchableOpacity style={styles.primaryActionCard} onPress={takePhoto}>
+                        <View style={styles.actionIconContainer}>
+                            <Text style={styles.actionEmoji}>📷</Text>
                         </View>
-                        <Text style={styles.actionTitle}>{t.scanPlant}</Text>
-                        <Text style={styles.actionSubtitle}>{t.detectDiseases}</Text>
+                        <Text style={styles.actionTitleText}>{t.scanPlant}</Text>
+                        <Text style={styles.actionDescText}>{t.detectDiseases}</Text>
                     </TouchableOpacity>
 
-                    <TouchableOpacity style={styles.actionCard} onPress={pickImage}>
-                        <View style={[styles.actionIconCircle, { backgroundColor: '#388e3c' }]}>
-                            <Text style={styles.actionIcon}>🖼️</Text>
+                    <TouchableOpacity style={[styles.primaryActionCard, { backgroundColor: COLORS.secondary + '10' }]} onPress={pickImage}>
+                        <View style={[styles.actionIconContainer, { backgroundColor: COLORS.secondary }]}>
+                            <Text style={styles.actionEmoji}>🖼️</Text>
                         </View>
-                        <Text style={styles.actionTitle}>{t.pickFromGallery}</Text>
-                        <Text style={styles.actionSubtitle}>{t.detectDiseases}</Text>
+                        <Text style={styles.actionTitleText}>{t.pickFromGallery}</Text>
+                        <Text style={styles.actionDescText}>{t.detectDiseases}</Text>
                     </TouchableOpacity>
                 </View>
 
-                {/* History Button (Moved below or as a full width card) */}
-                <TouchableOpacity
-                    style={styles.historyFullCard}
-                    onPress={() => navigation.navigate('History', { language })}
-                >
-                    <View style={styles.historyIconSmall}>
-                        <Text style={{ fontSize: 18 }}>↺</Text>
+                {/* Daily Expert Tips integrated from Translations */}
+                {t.dailyTips && (
+                    <View style={styles.proTipCard}>
+                        <View style={styles.tipHeaderBox}>
+                            <Text style={styles.tipLabel}>💡 {language === 'ta' ? "நிபுணரின் குறிப்பு" : "EXPERT TIP"}</Text>
+                        </View>
+                        <Text style={styles.tipMainText}>{t.dailyTips[tipIndex]}</Text>
                     </View>
-                    <Text style={styles.historyText}>{t.history}</Text>
-                    <Text style={styles.historySubText}>{t.pastDiagnoses}</Text>
-                </TouchableOpacity>
+                )}
 
-                {/* Government Schemes Button */}
-                <TouchableOpacity
-                    style={styles.historyFullCard}
-                    onPress={() => navigation.navigate('Schemes', { language })}
-                >
-                    <View style={[styles.historyIconSmall, { backgroundColor: '#fff3e0' }]}>
-                        <Text style={{ fontSize: 18 }}>📋</Text>
-                    </View>
-                    <Text style={styles.historyText}>{t.govtSchemes}</Text>
-                    <Text style={styles.historySubText}>{t.viewSchemes}</Text>
-                </TouchableOpacity>
+                {/* Secondary Hub Actions */}
+                <View style={styles.listActionArea}>
+                    <TouchableOpacity
+                        style={styles.fullWidthItem}
+                        onPress={() => navigation.navigate('History', { language })}
+                    >
+                        <View style={[styles.itemIconBox, { backgroundColor: '#E3F2FD' }]}>
+                            <Text style={styles.itemIcon}>↺</Text>
+                        </View>
+                        <View style={styles.itemInfo}>
+                            <Text style={styles.itemTitle}>{t.history}</Text>
+                            <Text style={styles.itemSubtitle}>{t.pastDiagnoses}</Text>
+                        </View>
+                        <Text style={styles.itemChevron}>›</Text>
+                    </TouchableOpacity>
 
-                {/* Stats */}
-                <Text style={styles.sectionTitle}>{t.yourStats}</Text>
-                <View style={styles.statsContainer}>
-                    <StatCard icon="📈" number={stats.total} label={t.totalScans} color="#00897b" />
-                    <StatCard icon="🌿" number={stats.healthy} label={t.healthyPlants} color="#00c853" />
-                    <StatCard icon="!" number={stats.issues} label={t.issuesDetected} color="#ff6f00" />
+                    <TouchableOpacity
+                        style={styles.fullWidthItem}
+                        onPress={() => navigation.navigate('Schemes', { language })}
+                    >
+                        <View style={[styles.itemIconBox, { backgroundColor: '#FFF3E0' }]}>
+                            <Text style={styles.itemIcon}>📋</Text>
+                        </View>
+                        <View style={styles.itemInfo}>
+                            <Text style={styles.itemTitle}>{t.govtSchemes}</Text>
+                            <Text style={styles.itemSubtitle}>{t.viewSchemes}</Text>
+                        </View>
+                        <Text style={[styles.itemChevron, { color: '#FFB74D' }]}>›</Text>
+                    </TouchableOpacity>
                 </View>
 
-                {/* Today's Tip */}
-                <Text style={styles.sectionTitle}>{t.todaysTip}</Text>
-                <View style={styles.tipCard}>
-                    <Text style={styles.tipIcon}>📖</Text>
-                    <Text style={styles.tipText}>{t.tipContent}</Text>
+                <View style={styles.statsBlock}>
+                    <Text style={styles.sectionHeading}>{t.yourStats}</Text>
+                    <View style={styles.statsRow}>
+                        <StatCard icon="📈" number={stats.total} label={t.totalScans} color={COLORS.info} />
+                        <StatCard icon="🌿" number={stats.healthy} label={t.healthyPlants} color={COLORS.success} />
+                        <StatCard icon="⚠" number={stats.issues} label={t.issuesDetected} color={COLORS.warning} />
+                    </View>
                 </View>
 
-                {/* Recent Scans */}
-                <Text style={styles.sectionTitle}>{t.recentScans}</Text>
-
-                {recentScans.length === 0 ? (
-                    <Text style={{ color: COLORS.gray, fontStyle: 'italic', marginTop: 10 }}>{t.noHistory}</Text>
-                ) : (
-                    recentScans.map((item, index) => (
-                        <TouchableOpacity
-                            key={index}
-                            style={styles.recentItem}
-                            onPress={() => navigation.navigate('Result', {
-                                imageUri: item.imageUri,
-                                analysisResult: item.analysisResult,
-                                language: language
-                            })}
-                        >
-                            <Image source={{ uri: item.imageUri }} style={styles.recentImagePlaceholder} />
-                            <View style={styles.recentInfo}>
-                                <Text style={styles.recentPlant}>{item.analysisResult.crop}</Text>
-                                <Text style={[
-                                    styles.recentIssue,
-                                    { color: item.analysisResult.isHealthy ? COLORS.secondary : COLORS.warning }
-                                ]}>
-                                    {item.analysisResult.name[language]}
-                                </Text>
-                                <Text style={styles.recentTime}>
-                                    {new Date(item.timestamp).toLocaleDateString()}
-                                </Text>
-                            </View>
-                            <Text style={[
-                                styles.alertIcon,
-                                { color: item.analysisResult.isHealthy ? COLORS.secondary : COLORS.warning }
-                            ]}>
-                                {item.analysisResult.isHealthy ? "🌿" : "!"}
-                            </Text>
-                        </TouchableOpacity>
-                    ))
-                )}
+                <View style={styles.recentBlock}>
+                    <Text style={styles.sectionHeading}>{t.recentScans}</Text>
+                    {recentScans.length === 0 ? (
+                        <View style={styles.noRecentBox}>
+                            <Text style={styles.noRecentText}>{t.noHistory}</Text>
+                        </View>
+                    ) : (
+                        recentScans.map((item, index) => (
+                            <TouchableOpacity
+                                key={index}
+                                style={styles.recentPreviewCard}
+                                onPress={() => navigation.navigate('Result', {
+                                    imageUri: item.imageUri,
+                                    analysisResult: item.analysisResult,
+                                    language: language
+                                })}
+                            >
+                                <Image source={{ uri: item.imageUri }} style={styles.previewImage} />
+                                <View style={styles.previewBio}>
+                                    <Text style={styles.previewCrop}>{item.analysisResult.crop}</Text>
+                                    <Text style={[
+                                        styles.previewDisease,
+                                        { color: item.analysisResult.isHealthy ? COLORS.success : COLORS.error }
+                                    ]}>
+                                        {item.analysisResult.name[language]}
+                                    </Text>
+                                </View>
+                                <View style={styles.previewAction}>
+                                    <Text style={styles.previewTime}>
+                                        {new Date(item.timestamp).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}
+                                    </Text>
+                                    <Text style={styles.previewArrow}>→</Text>
+                                </View>
+                            </TouchableOpacity>
+                        ))
+                    )}
+                </View>
 
-                <View style={{ height: 100 }} />
+                <View style={{ height: 40 }} />
             </ScrollView>
         </SafeAreaView>
     );
@@ -212,235 +241,319 @@ const styles = StyleSheet.create({
         flex: 1,
         backgroundColor: COLORS.background,
     },
-    scrollContent: {
-        padding: SIZES.padding,
-        paddingBottom: 20,
-    },
-    header: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginBottom: 20,
+    premiumHeader: {
         backgroundColor: COLORS.primary,
-        // Removed negative margins for SafeAreaView
         paddingTop: 10,
-        paddingBottom: 20,
+        paddingBottom: 30,
         paddingHorizontal: SIZES.padding,
-        borderRadius: 20, // Rounded corners all around for card-like feel inside container
-        elevation: 5,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.2,
-        shadowRadius: 4,
-    },
-    headerLeft: {
+        borderBottomLeftRadius: 35,
+        borderBottomRightRadius: 35,
+        ...COLORS.shadow.lg,
+    },
+    headerTopRow: {
         flexDirection: 'row',
+        justifyContent: 'space-between',
         alignItems: 'center',
+        marginBottom: 25,
     },
-    logoCircle: {
-        width: 55,
-        height: 55,
-        backgroundColor: COLORS.white,
-        borderRadius: 27.5,
-        overflow: 'hidden',
-        justifyContent: 'center',
-        alignItems: 'center',
-        borderWidth: 2,
-        borderColor: 'rgba(255,255,255,0.3)',
+    headerTitleContainer: {
+        flex: 1,
     },
-    headerLogo: {
-        width: '100%',
-        height: '100%',
+    greetingText: {
+        color: 'rgba(255,255,255,0.7)',
+        fontSize: 14,
+        fontWeight: '600',
+        letterSpacing: 0.5,
     },
-    headerTextContainer: {
-        marginLeft: 12,
-        justifyContent: 'center',
+    brandTitle: {
+        color: COLORS.white,
+        fontSize: 22,
+        fontWeight: '900',
+        letterSpacing: 1,
     },
     headerActions: {
         flexDirection: 'row',
+        gap: 10,
     },
     headerActionButton: {
-        width: 40,
-        height: 40,
-        borderRadius: 20,
-        backgroundColor: 'rgba(255,255,255,0.2)',
+        width: 44,
+        height: 44,
+        borderRadius: 14,
+        backgroundColor: 'rgba(255,255,255,0.15)',
         justifyContent: 'center',
         alignItems: 'center',
-        marginLeft: 8,
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.2)',
     },
     headerActionIcon: {
         fontSize: 20,
     },
-    historyFullCard: {
+    heroCard: {
         flexDirection: 'row',
-        backgroundColor: COLORS.white,
+        alignItems: 'center',
+        backgroundColor: 'rgba(255,255,255,0.1)',
         padding: 15,
-        borderRadius: SIZES.radius,
+        borderRadius: 25,
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.1)',
+    },
+    logoCircleLg: {
+        width: 70,
+        height: 70,
+        borderRadius: 35,
+        backgroundColor: COLORS.white,
+        justifyContent: 'center',
         alignItems: 'center',
-        marginBottom: 20,
-        elevation: 3,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.1,
-        shadowRadius: 2,
-    },
-    historyIconSmall: {
-        width: 36,
-        height: 36,
-        borderRadius: 18,
-        backgroundColor: '#e0f2f1',
+        ...COLORS.shadow.md,
+    },
+    heroLogo: {
+        width: '80%',
+        height: '80%',
+    },
+    heroImpact: {
+        marginLeft: 15,
+        flex: 1,
+    },
+    heroTagline: {
+        color: COLORS.white,
+        fontSize: 15,
+        fontWeight: '700',
+        marginBottom: 6,
+    },
+    activeLabelContainer: {
+        flexDirection: 'row',
         alignItems: 'center',
+        backgroundColor: 'rgba(0,0,0,0.2)',
+        alignSelf: 'flex-start',
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 10,
+    },
+    pulseIndicator: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+        backgroundColor: '#4ade80',
+        marginRight: 6,
+    },
+    pulseText: {
+        color: '#4ade80',
+        fontSize: 9,
+        fontWeight: '900',
+        letterSpacing: 1,
+    },
+    scrollContent: {
+        padding: SIZES.padding,
+    },
+    primaryActionRow: {
+        flexDirection: 'row',
+        gap: 15,
+        marginTop: 20,
+        marginBottom: 25,
+    },
+    primaryActionCard: {
+        flex: 1,
+        backgroundColor: COLORS.primary + '10',
+        borderRadius: 25,
+        padding: 20,
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: COLORS.border,
+    },
+    actionIconContainer: {
+        width: 60,
+        height: 60,
+        borderRadius: 30,
+        backgroundColor: COLORS.primary,
         justifyContent: 'center',
-        marginRight: 12,
+        alignItems: 'center',
+        marginBottom: 12,
+        ...COLORS.shadow.md,
+    },
+    actionEmoji: {
+        fontSize: 28,
     },
-    historyText: {
+    actionTitleText: {
         fontSize: 16,
-        fontWeight: 'bold',
+        fontWeight: '800',
         color: COLORS.text,
-        flex: 1,
+        textAlign: 'center',
     },
-    historySubText: {
-        fontSize: 12,
-        color: COLORS.gray,
-        marginRight: 10,
+    actionDescText: {
+        fontSize: 11,
+        color: COLORS.textLight,
+        textAlign: 'center',
+        marginTop: 4,
+        fontWeight: '600',
     },
-    headerTitle: {
-        color: 'white',
-        fontSize: 20,
-        fontWeight: 'bold',
+    proTipCard: {
+        backgroundColor: COLORS.surface,
+        borderRadius: 25,
+        padding: 20,
+        marginBottom: 25,
+        borderLeftWidth: 6,
+        borderLeftColor: COLORS.secondary,
+        ...COLORS.shadow.md,
     },
-    headerSubtitle: {
-        color: '#e8f5e9',
+    tipHeaderBox: {
+        marginBottom: 10,
+    },
+    tipLabel: {
         fontSize: 12,
+        fontWeight: '900',
+        color: COLORS.secondary,
+        letterSpacing: 1,
     },
-    actionContainer: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        marginBottom: 20,
-        marginTop: 10,
+    tipMainText: {
+        fontSize: 15,
+        color: COLORS.text,
+        lineHeight: 22,
+        fontWeight: '500',
     },
-    actionCard: {
-        backgroundColor: COLORS.white,
-        width: '48%',
-        padding: 20,
-        borderRadius: SIZES.radius,
-        alignItems: 'center',
-        elevation: 4,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.1,
-        shadowRadius: 4,
+    listActionArea: {
+        gap: 12,
+        marginBottom: 30,
     },
-    actionIconCircle: {
+    fullWidthItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: COLORS.surface,
+        padding: 16,
+        borderRadius: 22,
+        borderWidth: 1,
+        borderColor: COLORS.border,
+        ...COLORS.shadow.sm,
+    },
+    itemIconBox: {
         width: 50,
         height: 50,
-        borderRadius: 25,
-        backgroundColor: '#004d40',
-        alignItems: 'center',
+        borderRadius: 15,
         justifyContent: 'center',
-        marginBottom: 10,
+        alignItems: 'center',
+        marginRight: 15,
     },
-    actionIcon: {
+    itemIcon: {
         fontSize: 24,
-        color: 'white',
     },
-    actionTitle: {
-        fontSize: 16,
-        fontWeight: 'bold',
+    itemInfo: {
+        flex: 1,
+    },
+    itemTitle: {
+        fontSize: 17,
+        fontWeight: '800',
         color: COLORS.text,
-        marginBottom: 5,
+        marginBottom: 2,
     },
-    actionSubtitle: {
-        fontSize: 11,
-        color: COLORS.gray,
-        textAlign: 'center',
+    itemSubtitle: {
+        fontSize: 12,
+        color: COLORS.textLight,
+        fontWeight: '500',
     },
-    sectionTitle: {
+    itemChevron: {
+        fontSize: 28,
+        color: COLORS.primary,
+        opacity: 0.3,
+        fontWeight: '300',
+    },
+    sectionHeading: {
         fontSize: 18,
-        color: '#00695c',
-        marginBottom: 10,
-        fontWeight: 'bold',
+        fontWeight: '900',
+        color: COLORS.primaryDark,
+        marginBottom: 15,
+        letterSpacing: 0.5,
     },
-    statsContainer: {
+    statsBlock: {
+        marginBottom: 30,
+    },
+    statsRow: {
         flexDirection: 'row',
-        justifyContent: 'space-between',
-        marginBottom: 25,
+        gap: 12,
     },
     statCard: {
-        width: '31%',
-        paddingVertical: 15,
-        paddingHorizontal: 5,
-        borderRadius: SIZES.radius,
+        flex: 1,
+        backgroundColor: COLORS.surface,
+        borderRadius: 20,
+        padding: 15,
         alignItems: 'center',
-        elevation: 2,
+        borderBottomWidth: 4,
+        ...COLORS.shadow.sm,
+    },
+    statIcon: {
+        fontSize: 24,
+        marginBottom: 8,
     },
     statNumber: {
-        fontSize: 20,
-        fontWeight: 'bold',
-        marginBottom: 5,
+        fontSize: 22,
+        fontWeight: '900',
+        color: COLORS.text,
     },
     statLabel: {
-        fontSize: 11,
+        fontSize: 10,
+        fontWeight: '700',
+        color: COLORS.textLight,
         textAlign: 'center',
+        marginTop: 2,
     },
-    tipCard: {
+    recentBlock: {
+        marginBottom: 20,
+    },
+    recentPreviewCard: {
         flexDirection: 'row',
-        backgroundColor: '#e0f2f1',
-        padding: 15,
-        borderRadius: SIZES.radius,
-        marginBottom: 25,
         alignItems: 'center',
-        borderLeftWidth: 4,
-        borderLeftColor: '#00897b',
+        backgroundColor: COLORS.surface,
+        padding: 12,
+        borderRadius: 20,
+        marginBottom: 10,
+        borderWidth: 1,
+        borderColor: COLORS.border,
     },
-    tipIcon: {
-        fontSize: 24,
-        marginRight: 15,
-        color: '#004d40',
+    previewImage: {
+        width: 54,
+        height: 54,
+        borderRadius: 12,
+        backgroundColor: COLORS.background,
     },
-    tipText: {
+    previewBio: {
         flex: 1,
-        color: '#004d40',
-        fontSize: 14,
-        lineHeight: 20,
+        marginLeft: 15,
     },
-    recentItem: {
-        flexDirection: 'row',
-        backgroundColor: COLORS.white,
-        padding: 10,
-        borderRadius: SIZES.radius,
-        marginBottom: 10,
-        alignItems: 'center',
-        elevation: 2,
+    previewCrop: {
+        fontSize: 13,
+        fontWeight: '700',
+        color: COLORS.textLight,
+        textTransform: 'uppercase',
     },
-    recentImagePlaceholder: {
-        width: 50,
-        height: 50,
-        borderRadius: 10,
-        backgroundColor: '#eee',
-        marginRight: 15,
+    previewDisease: {
+        fontSize: 16,
+        fontWeight: '800',
     },
-    recentInfo: {
-        flex: 1,
+    previewAction: {
+        alignItems: 'flex-end',
     },
-    recentPlant: {
-        fontSize: 14,
-        color: COLORS.gray,
-        fontWeight: 'bold',
+    previewTime: {
+        fontSize: 11,
+        fontWeight: '700',
+        color: COLORS.textLight,
     },
-    recentIssue: {
-        fontSize: 15,
-        color: COLORS.text,
-        fontWeight: '600',
-        marginVertical: 2,
+    previewArrow: {
+        fontSize: 18,
+        color: COLORS.primary,
+        fontWeight: '900',
+        marginTop: 2,
     },
-    recentTime: {
-        fontSize: 12,
-        color: '#999',
+    noRecentBox: {
+        padding: 40,
+        alignItems: 'center',
+        backgroundColor: COLORS.surface,
+        borderRadius: 20,
+        borderStyle: 'dashed',
+        borderWidth: 1,
+        borderColor: COLORS.border,
     },
-    alertIcon: {
-        fontSize: 20,
-        paddingRight: 10,
+    noRecentText: {
+        color: COLORS.textLight,
+        fontStyle: 'italic',
+        fontSize: 14,
     }
 });
 

screens/LanguageScreen.js

@@ -1,97 +1,221 @@
 import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, Image } from 'react-native';
-import { COLORS, SIZES } from '../constants/theme';
+import { View, Text, TouchableOpacity, StyleSheet, Image, Dimensions, StatusBar } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { COLORS, SIZES, FONTS } from '../constants/theme';
 import { TRANSLATIONS } from '../constants/translations';
 
+const { width } = Dimensions.get('window');
+
 const LanguageScreen = ({ navigation }) => {
     const handleLanguageSelect = (lang) => {
-        // Navigate to Home with selected language
         navigation.reset({
             index: 0,
             routes: [{ name: 'Home', params: { language: lang } }],
         });
     };
 
-    return (
-        <View style={styles.container}>
-            {/* Logo Area */}
-            <View style={styles.logoContainer}>
-                <Image
-                    source={require('../assets/logo.png')}
-                    style={styles.logoImage}
-                    resizeMode="contain"
-                />
+    const LanguageTile = ({ lang, code, label, subLabel, icon }) => (
+        <TouchableOpacity
+            style={styles.langTile}
+            onPress={() => handleLanguageSelect(code)}
+            activeOpacity={0.7}
+        >
+            <View style={styles.tileContent}>
+                <View style={styles.iconCircle}>
+                    <Text style={styles.tileIcon}>{icon}</Text>
+                </View>
+                <View style={styles.tileTextContainer}>
+                    <Text style={styles.tileLabel}>{label}</Text>
+                    <Text style={styles.tileSubLabel}>{subLabel}</Text>
+                </View>
+                <View style={styles.arrowContainer}>
+                    <Text style={styles.arrowIcon}>→</Text>
+                </View>
             </View>
+        </TouchableOpacity>
+    );
+
+    return (
+        <SafeAreaView style={styles.container}>
+            <StatusBar backgroundColor={COLORS.background} barStyle="dark-content" />
 
-            <View style={styles.spacer} />
+            <View style={styles.content}>
+                {/* Visual Accent */}
+                <View style={styles.topAccent} />
 
-            {/* Language Selection Header */}
-            <Text style={styles.title}>{TRANSLATIONS.en.selectLanguage}/</Text>
-            <Text style={styles.title}>{TRANSLATIONS.ta.selectLanguage}</Text>
+                {/* Logo Section */}
+                <View style={styles.logoWrapper}>
+                    <Image
+                        source={require('../assets/logo.png')}
+                        style={styles.logoImage}
+                        resizeMode="contain"
+                    />
+                </View>
 
-            <View style={styles.spacer} />
+                {/* Header Section */}
+                <View style={styles.header}>
+                    <Text style={styles.welcomeText}>WELCOME / வரவேற்கிறோம்</Text>
+                    <Text style={styles.title}>
+                        {TRANSLATIONS.en.selectLanguage} / {TRANSLATIONS.ta.selectLanguage}
+                    </Text>
+                </View>
 
-            {/* Buttons */}
-            <TouchableOpacity
-                style={styles.button}
-                onPress={() => handleLanguageSelect('en')}
-            >
-                <Text style={styles.buttonText}>{TRANSLATIONS.en.english}</Text>
-            </TouchableOpacity>
+                {/* Selection Section */}
+                <View style={styles.selectionGrid}>
+                    <LanguageTile
+                        code="en"
+                        label="English"
+                        subLabel="Continue in English"
+                        icon="🇬🇧"
+                    />
 
-            <TouchableOpacity
-                style={styles.button}
-                onPress={() => handleLanguageSelect('ta')}
-            >
-                <Text style={styles.buttonText}>{TRANSLATIONS.ta.tamil}</Text>
-            </TouchableOpacity>
-        </View>
+                    <LanguageTile
+                        code="ta"
+                        label="தமிழ்"
+                        subLabel="தமிழில் தொடரவும்"
+                        icon="🇮🇳"
+                    />
+                </View>
+
+                <View style={styles.footer}>
+                    <Text style={styles.footerText}>Green Doctor v1.0.0</Text>
+                    <View style={styles.divider} />
+                    <Text style={styles.powerText}>Empowering Farmers with AI</Text>
+                </View>
+            </View>
+        </SafeAreaView>
     );
 };
 
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: COLORS.white,
-        alignItems: 'center',
+        backgroundColor: COLORS.background,
+    },
+    topAccent: {
+        position: 'absolute',
+        top: -100,
+        right: -100,
+        width: 300,
+        height: 300,
+        borderRadius: 150,
+        backgroundColor: COLORS.primaryLight + '10',
+    },
+    content: {
+        flex: 1,
+        paddingHorizontal: SIZES.padding * 1.5,
         justifyContent: 'center',
-        padding: SIZES.padding,
+        alignItems: 'center',
     },
-    logoContainer: {
+    logoWrapper: {
+        marginBottom: 30,
+        height: 160,
+        width: '100%',
         alignItems: 'center',
-        marginBottom: 20,
-        height: 180,
     },
     logoImage: {
         width: 300,
         height: '100%',
     },
-    spacer: {
-        height: 30,
+    header: {
+        alignItems: 'center',
+        marginBottom: 40,
+    },
+    welcomeText: {
+        fontSize: 12,
+        color: COLORS.primary,
+        fontWeight: '800',
+        letterSpacing: 3,
+        marginBottom: 12,
+        textTransform: 'uppercase',
     },
     title: {
-        color: '#004d00', // Dark green
-        fontSize: 18,
+        color: COLORS.text,
+        fontSize: SIZES.h3,
+        fontWeight: '600',
         textAlign: 'center',
-        marginBottom: 5,
+        lineHeight: 26,
+        opacity: 0.8,
+    },
+    selectionGrid: {
+        width: '100%',
+        gap: 20,
     },
-    button: {
+    langTile: {
+        backgroundColor: COLORS.surface,
+        borderRadius: SIZES.radius,
+        padding: SIZES.padding,
         width: '100%',
-        maxWidth: 250,
-        paddingVertical: 15,
-        borderRadius: 25,
         borderWidth: 1,
-        borderColor: '#000',
-        backgroundColor: COLORS.white,
-        marginVertical: 15,
+        borderColor: COLORS.border,
+        ...COLORS.shadow.md,
+    },
+    tileContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    iconCircle: {
+        width: 56,
+        height: 56,
+        borderRadius: 28,
+        backgroundColor: COLORS.background,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: 16,
+    },
+    tileIcon: {
+        fontSize: 28,
+    },
+    tileTextContainer: {
+        flex: 1,
+    },
+    tileLabel: {
+        fontSize: 22,
+        fontWeight: '900',
+        color: COLORS.primaryDark,
+        marginBottom: 2,
+    },
+    tileSubLabel: {
+        fontSize: 13,
+        color: COLORS.textLight,
+        fontWeight: '600',
+    },
+    arrowContainer: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: COLORS.primary,
+        justifyContent: 'center',
         alignItems: 'center',
     },
-    buttonText: {
+    arrowIcon: {
+        color: COLORS.white,
         fontSize: 20,
+        fontWeight: '900',
+    },
+    footer: {
+        marginTop: 60,
+        alignItems: 'center',
+    },
+    divider: {
+        width: 40,
+        height: 2,
+        backgroundColor: COLORS.border,
+        marginVertical: 12,
+    },
+    footerText: {
+        fontSize: 12,
+        color: COLORS.textLight,
         fontWeight: 'bold',
-        color: '#3e2723', // Dark brownish color from image
-        letterSpacing: 1,
+        opacity: 0.6,
     },
+    powerText: {
+        fontSize: 10,
+        color: COLORS.textLight,
+        letterSpacing: 1.5,
+        textTransform: 'uppercase',
+        opacity: 0.5,
+    }
 });
 
 export default LanguageScreen;

screens/ResultScreen.js

@@ -9,24 +9,64 @@ const ResultScreen = ({ route, navigation }) => {
     // We expect imageUri and language from HomeScreen
     const { imageUri, language, analysisResult: initialResult } = route.params || {};
 
-    const [loading, setLoading] = useState(!initialResult);
+    const [loading, setLoading] = useState(false);
     const [analysisResult, setAnalysisResult] = useState(initialResult || null);
+    const [confirmed, setConfirmed] = useState(!!initialResult);
     const [activeTab, setActiveTab] = useState('organic');
 
     const translations = TRANSLATIONS[language] || TRANSLATIONS['en'];
 
+    const renderHeader = (isHealthyResult = null) => {
+        const headerBg = isHealthyResult === null
+            ? COLORS.primary
+            : (isHealthyResult ? COLORS.success : COLORS.error);
+
+        return (
+            <View style={[styles.header, { backgroundColor: headerBg }]}>
+                <TouchableOpacity onPress={() => navigation.goBack()} style={styles.headerButton}>
+                    <Text style={styles.headerButtonText}>←</Text>
+                </TouchableOpacity>
+                <View style={styles.headerTitleUnit}>
+                    <Text style={styles.headerLabel}>{translations.results}</Text>
+                    {isHealthyResult !== null && (
+                        <Text style={styles.headerStatusSub}>
+                            {isHealthyResult ? "PLANT IS HEALTHY" : "ISSUE DETECTED"}
+                        </Text>
+                    )}
+                </View>
+                <View style={styles.logoCircleHeader}>
+                    <Image
+                        source={require('../assets/logo.png')}
+                        style={styles.logoImgSmall}
+                        resizeMode="contain"
+                    />
+                </View>
+            </View>
+        );
+    };
+
+    const renderTab = (key, label) => (
+        <TouchableOpacity
+            style={[styles.tabItem, activeTab === key && styles.activeTabItem]}
+            onPress={() => setActiveTab(key)}
+            activeOpacity={0.7}
+        >
+            <Text style={[styles.tabLabelText, activeTab === key && styles.activeTabLabelText]}>{label}</Text>
+        </TouchableOpacity>
+    );
+
     useEffect(() => {
-        if (!initialResult && imageUri) {
+        if (!initialResult && imageUri && confirmed) {
             performAnalysis();
         }
-    }, [imageUri, initialResult]);
+    }, [imageUri, initialResult, confirmed]);
 
     const performAnalysis = async () => {
+        setLoading(true);
         try {
             const result = await analyzeImage(imageUri);
             setAnalysisResult(result);
 
-            // Save to history
             const scanData = {
                 id: Date.now().toString(),
                 timestamp: Date.now(),
@@ -42,11 +82,45 @@ const ResultScreen = ({ route, navigation }) => {
         }
     };
 
+    if (!confirmed) {
+        return (
+            <View style={styles.container}>
+                {renderHeader()}
+                <View style={styles.confirmBox}>
+                    <View style={styles.imageCard}>
+                        <Image source={{ uri: imageUri }} style={styles.previewFullScreen} />
+                        <View style={styles.imageOverlay}>
+                            <Text style={styles.overlayText}>READY FOR AI ANALYSIS</Text>
+                        </View>
+                    </View>
+                    <View style={styles.confirmActions}>
+                        <Text style={styles.confirmMainTitle}>{translations.analyseNow}</Text>
+                        <Text style={styles.confirmSubTitle}>
+                            {language === 'ta' ? "இந்த படத்தை ஆய்வு செய்ய விரும்புகிறீர்களா?" : "Our AI will now check this leaf for 30+ potential issues."}
+                        </Text>
+                        <TouchableOpacity
+                            style={styles.primaryAnalyseBtn}
+                            onPress={() => setConfirmed(true)}
+                        >
+                            <Text style={styles.primaryAnalyseBtnText}>START ANALYSIS</Text>
+                        </TouchableOpacity>
+                        <TouchableOpacity
+                            style={styles.cancelAction}
+                            onPress={() => navigation.goBack()}
+                        >
+                            <Text style={styles.cancelActionText}>{translations.cancel}</Text>
+                        </TouchableOpacity>
+                    </View>
+                </View>
+            </View>
+        );
+    }
+
     if (loading) {
         return (
-            <View style={styles.loadingContainer}>
+            <View style={styles.loaderContainer}>
                 <ActivityIndicator size="large" color={COLORS.primary} />
-                <Text style={styles.loadingText}>{translations.analyzing || "Analyzing..."}</Text>
+                <Text style={styles.loaderText}>{translations.analyzing || "Consulting AI Expert..."}</Text>
             </View>
         );
     }
@@ -54,10 +128,10 @@ const ResultScreen = ({ route, navigation }) => {
     if (!analysisResult) {
         return (
             <View style={styles.container}>
-                <View style={styles.loadingContainer}>
-                    <Text style={{ color: COLORS.error, fontSize: 18 }}>{translations.error || "Detection Failed"}</Text>
-                    <TouchableOpacity style={styles.homeButton} onPress={() => navigation.navigate('Home')}>
-                        <Text style={styles.homeButtonText}>{translations.backHome}</Text>
+                <View style={styles.loaderContainer}>
+                    <Text style={styles.errorTextHeading}>{translations.error || "System Error"}</Text>
+                    <TouchableOpacity style={styles.errorBtn} onPress={() => navigation.navigate('Home')}>
+                        <Text style={styles.errorBtnText}>{translations.backHome}</Text>
                     </TouchableOpacity>
                 </View>
             </View>
@@ -67,123 +141,110 @@ const ResultScreen = ({ route, navigation }) => {
     const { crop, name, isHealthy, severity, symptoms, cause, remedy, remedy_organic, remedy_chemical, prevention, confidence } = analysisResult;
 
     const getSeverityColor = (sev) => {
-        if (!sev) return COLORS.gray;
+        if (!sev) return COLORS.textLight;
         switch (sev.toLowerCase()) {
-            case 'low': return COLORS.secondary; // Green-ish/Yellow
-            case 'medium': return 'orange';
+            case 'low': return COLORS.success;
+            case 'medium': return COLORS.warning;
             case 'high': return COLORS.error;
-            default: return COLORS.gray;
+            default: return COLORS.textLight;
         }
     };
 
-    const renderHeader = () => (
-        <View style={[styles.header, { backgroundColor: isHealthy ? COLORS.secondary : COLORS.error }]}>
-            <TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
-                <Text style={styles.backButtonText}>←</Text>
-            </TouchableOpacity>
-            <View style={styles.logoCircleSmall}>
-                <Image
-                    source={require('../assets/logo.png')}
-                    style={styles.headerLogoSmall}
-                    resizeMode="cover"
-                />
-            </View>
-            <Text style={[styles.headerTitle, { marginLeft: 10 }]}>{translations.results}</Text>
-        </View>
-    );
-
-    const renderTab = (key, label) => (
-        <TouchableOpacity
-            style={[styles.tab, activeTab === key && styles.activeTab]}
-            onPress={() => setActiveTab(key)}
-        >
-            <Text style={[styles.tabText, activeTab === key && styles.activeTabText]}>{label}</Text>
-        </TouchableOpacity>
-    );
-
     return (
         <View style={styles.container}>
-            {renderHeader()}
+            {renderHeader(isHealthy)}
 
-            <ScrollView showsVerticalScrollIndicator={false}>
-                <Image source={{ uri: imageUri }} style={styles.scannedImage} />
+            <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.scrollBody}>
+                <View style={styles.imageFrame}>
+                    <Image source={{ uri: imageUri }} style={styles.mainResultImage} />
+                    <View style={styles.confidenceFlag}>
+                        <Text style={styles.flagValue}>{confidence}%</Text>
+                        <Text style={styles.flagLabel}>CONFIDENCE</Text>
+                    </View>
+                </View>
 
-                <View style={styles.resultContainer}>
-                    <View style={styles.titleRow}>
-                        <Text style={styles.diseaseName}>{name[language]}</Text>
-                        <View style={{ alignItems: 'flex-end' }}>
-                            <View style={styles.confidenceBadge}>
-                                <Text style={styles.confidenceText}>{confidence}%</Text>
-                            </View>
-                            {analysisResult.isMock && (
-                                <Text style={{ fontSize: 10, color: COLORS.gray, marginTop: 2 }}>
-                                    Offline Mode
-                                </Text>
-                            )}
-                        </View>
+                <View style={styles.diagnosisCard}>
+                    <View style={styles.diagnosisHead}>
+                        <Text style={styles.cropLabelText}>{crop.toUpperCase()}</Text>
+                        <Text style={styles.diagnosisMainTitle}>{name[language]}</Text>
                     </View>
 
                     {!isHealthy && (
-                        <View style={styles.metaContainer}>
-                            <View style={[styles.severityBadge, { backgroundColor: getSeverityColor(severity) }]}>
-                                <Text style={styles.severityText}>{translations.severity}: {severity}</Text>
+                        <View style={styles.severityRow}>
+                            <View style={[styles.severityPill, { backgroundColor: getSeverityColor(severity) + '20' }]}>
+                                <View style={[styles.severityDot, { backgroundColor: getSeverityColor(severity) }]} />
+                                <Text style={[styles.severityPillText, { color: getSeverityColor(severity) }]}>
+                                    {translations.severity}: {severity.toUpperCase()}
+                                </Text>
                             </View>
-                            <Text style={styles.cropText}>{translations.detected}: {crop}</Text>
                         </View>
                     )}
 
-                    <Text style={styles.sectionTitle}>
-                        {analysisResult.id === 'UNKNOWN' ? translations.unknownStatus : translations.symptoms}
-                    </Text>
-                    <Text style={styles.description}>{symptoms[language]}</Text>
+                    <View style={styles.infoSection}>
+                        <Text style={styles.sectionHeaderLabel}>
+                            {analysisResult.id === 'UNKNOWN' ? translations.unknownStatus : translations.symptoms}
+                        </Text>
+                        <Text style={styles.sectionDescText}>{symptoms[language]}</Text>
+                    </View>
 
                     {!isHealthy && cause && (
-                        <>
-                            <Text style={styles.sectionTitle}>{translations.cause}</Text>
-                            <Text style={styles.description}>{cause[language]}</Text>
-
-                            <View style={styles.tabContainer}>
-                                {renderTab('organic', analysisResult.id === 'UNKNOWN' ? translations.unknownInstruction : translations.organic)}
-                                {renderTab('chemical', analysisResult.id === 'UNKNOWN' ? translations.unknownAdvice : translations.chemical)}
-                                {renderTab('prevention', analysisResult.id === 'UNKNOWN' ? translations.unknownNextSteps : translations.prevention)}
-                            </View>
-
-                            <View style={styles.remedyBox}>
-                                {activeTab === 'organic' && <Text style={styles.remedyText}>{remedy_organic[language]}</Text>}
-                                {activeTab === 'chemical' && <Text style={styles.remedyText}>{remedy_chemical[language]}</Text>}
-                                {activeTab === 'prevention' && <Text style={styles.remedyText}>{prevention[language]}</Text>}
-                            </View>
-                        </>
+                        <View style={styles.infoSection}>
+                            <Text style={styles.sectionHeaderLabel}>{translations.cause}</Text>
+                            <Text style={styles.sectionDescText}>{cause[language]}</Text>
+                        </View>
                     )}
 
                     {isHealthy && remedy && (
-                        <>
-                            <Text style={styles.sectionTitle}>{translations.remedy}</Text>
-                            <Text style={styles.description}>{remedy[language]}</Text>
-                        </>
+                        <View style={styles.infoSection}>
+                            <Text style={styles.sectionHeaderLabel}>{translations.remedy}</Text>
+                            <Text style={styles.sectionDescText}>{remedy[language]}</Text>
+                        </View>
                     )}
+                </View>
+
+                {!isHealthy && (
+                    <View style={styles.treatmentHub}>
+                        <Text style={styles.hubTitle}>TREATMENT OPTIONS</Text>
+                        <View style={styles.tabSelector}>
+                            {renderTab('organic', analysisResult.id === 'UNKNOWN' ? translations.unknownInstruction : translations.organic)}
+                            {renderTab('chemical', analysisResult.id === 'UNKNOWN' ? translations.unknownAdvice : translations.chemical)}
+                            {renderTab('prevention', analysisResult.id === 'UNKNOWN' ? translations.unknownNextSteps : translations.prevention)}
+                        </View>
+
+                        <View style={styles.remedyDisplay}>
+                            <Text style={styles.remedyContentText}>
+                                {activeTab === 'organic' && remedy_organic[language]}
+                                {activeTab === 'chemical' && remedy_chemical[language]}
+                                {activeTab === 'prevention' && prevention[language]}
+                            </Text>
+                        </View>
+                    </View>
+                )}
 
-                    {analysisResult.diagnosticChecklist && (
-                        <View style={styles.checklistContainer}>
-                            <Text style={styles.checklistTitle}>
+                {analysisResult.diagnosticChecklist && (
+                    <View style={styles.checklistBoard}>
+                        <View style={styles.checklistHead}>
+                            <Text style={styles.checklistHeadTitle}>
                                 {analysisResult.diagnosticChecklist.title[language]}
                             </Text>
-                            {analysisResult.diagnosticChecklist.steps.map((step, index) => (
-                                <View key={index} style={styles.checkItem}>
-                                    <View style={styles.bullet} />
-                                    <Text style={styles.checkText}>{step[language]}</Text>
-                                </View>
-                            ))}
                         </View>
-                    )}
+                        {analysisResult.diagnosticChecklist.steps.map((step, index) => (
+                            <View key={index} style={styles.checklistLine}>
+                                <View style={styles.checkBullet} />
+                                <Text style={styles.checklistLineText}>{step[language]}</Text>
+                            </View>
+                        ))}
+                    </View>
+                )}
 
-                </View>
-                <View style={{ height: 30 }} />
+                <View style={{ height: 40 }} />
             </ScrollView>
 
-            <TouchableOpacity style={styles.homeButton} onPress={() => navigation.navigate('Home')}>
-                <Text style={styles.homeButtonText}>{translations.backHome}</Text>
-            </TouchableOpacity>
+            <View style={styles.bottomActions}>
+                <TouchableOpacity style={styles.returnHomeBtn} onPress={() => navigation.navigate('Home')}>
+                    <Text style={styles.returnHomeBtnText}>{translations.backHome}</Text>
+                </TouchableOpacity>
+            </View>
         </View>
     );
 };
@@ -195,202 +256,371 @@ const styles = StyleSheet.create({
     },
     header: {
         paddingTop: 50,
-        paddingBottom: 20,
-        paddingHorizontal: 20,
+        paddingBottom: 25,
+        paddingHorizontal: SIZES.padding,
         flexDirection: 'row',
         alignItems: 'center',
-        borderBottomLeftRadius: 30,
-        borderBottomRightRadius: 30,
-    },
-    backButton: {
-        marginRight: 15,
+        borderBottomLeftRadius: 35,
+        borderBottomRightRadius: 35,
+        ...COLORS.shadow.lg,
+    },
+    headerButton: {
+        width: 44,
+        height: 44,
+        borderRadius: 22,
+        backgroundColor: 'rgba(255,255,255,0.2)',
+        justifyContent: 'center',
+        alignItems: 'center',
     },
-    backButtonText: {
+    headerButtonText: {
         fontSize: 24,
-        color: '#fff',
+        color: COLORS.white,
         fontWeight: 'bold',
     },
-    logoCircleSmall: {
-        width: 40,
-        height: 40,
-        backgroundColor: '#fff',
-        borderRadius: 20,
-        overflow: 'hidden',
+    headerTitleUnit: {
+        flex: 1,
+        marginLeft: 15,
+    },
+    headerLabel: {
+        fontSize: 20,
+        fontWeight: '900',
+        color: COLORS.white,
+        letterSpacing: 0.5,
+    },
+    headerStatusSub: {
+        fontSize: 10,
+        fontWeight: '800',
+        color: 'rgba(255,255,255,0.8)',
+        letterSpacing: 1,
+        marginTop: 2,
+    },
+    logoCircleHeader: {
+        width: 48,
+        height: 48,
+        backgroundColor: COLORS.white,
+        borderRadius: 24,
         justifyContent: 'center',
         alignItems: 'center',
+        ...COLORS.shadow.sm,
+    },
+    logoImgSmall: {
+        width: '70%',
+        height: '70%',
+    },
+    scrollBody: {
+        padding: SIZES.padding,
+    },
+    imageFrame: {
+        width: '100%',
+        height: 280,
+        borderRadius: 30,
+        backgroundColor: COLORS.surface,
+        ...COLORS.shadow.md,
+        overflow: 'hidden',
+        marginBottom: 25,
     },
-    headerLogoSmall: {
+    mainResultImage: {
         width: '100%',
         height: '100%',
     },
-    headerTitle: {
-        fontSize: 22,
-        fontWeight: 'bold',
-        color: '#fff',
+    confidenceFlag: {
+        position: 'absolute',
+        bottom: 20,
+        right: 20,
+        backgroundColor: COLORS.surface,
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        borderRadius: 15,
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: COLORS.border,
+        ...COLORS.shadow.sm,
     },
-    scannedImage: {
-        width: '90%',
-        height: 250,
-        alignSelf: 'center',
-        borderRadius: 20,
-        marginTop: 20,
-        marginBottom: 20,
+    flagValue: {
+        fontSize: 18,
+        fontWeight: '900',
+        color: COLORS.primary,
     },
-    resultContainer: {
-        paddingHorizontal: 20,
+    flagLabel: {
+        fontSize: 8,
+        fontWeight: '800',
+        color: COLORS.textLight,
+        letterSpacing: 0.5,
     },
-    titleRow: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        marginBottom: 10,
+    diagnosisCard: {
+        backgroundColor: COLORS.surface,
+        borderRadius: 30,
+        padding: 25,
+        marginBottom: 20,
+        ...COLORS.shadow.md,
+        borderWidth: 1,
+        borderColor: COLORS.border,
     },
-    diseaseName: {
-        fontSize: 24,
-        fontWeight: 'bold',
-        color: COLORS.text,
-        flex: 1,
+    diagnosisHead: {
+        marginBottom: 15,
     },
-    confidenceBadge: {
-        backgroundColor: COLORS.primary + '20', // 20% opacity
-        paddingHorizontal: 10,
-        paddingVertical: 5,
-        borderRadius: 15,
+    cropLabelText: {
+        fontSize: 12,
+        fontWeight: '900',
+        color: COLORS.textLight,
+        letterSpacing: 1.5,
+        marginBottom: 4,
+    },
+    diagnosisMainTitle: {
+        fontSize: 26,
+        fontWeight: '900',
+        color: COLORS.text,
     },
-    confidenceText: {
-        color: COLORS.primary,
-        fontWeight: 'bold',
+    severityRow: {
+        marginBottom: 20,
     },
-    metaContainer: {
+    severityPill: {
         flexDirection: 'row',
         alignItems: 'center',
-        marginBottom: 15,
+        alignSelf: 'flex-start',
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        borderRadius: 12,
     },
-    severityBadge: {
-        paddingHorizontal: 10,
-        paddingVertical: 4,
-        borderRadius: 8,
-        marginRight: 10,
+    severityDot: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+        marginRight: 8,
     },
-    severityText: {
-        color: '#fff',
-        fontWeight: 'bold',
+    severityPillText: {
         fontSize: 12,
+        fontWeight: '900',
+        letterSpacing: 0.5,
     },
-    cropText: {
-        fontSize: 14,
-        color: COLORS.gray,
+    infoSection: {
+        marginBottom: 20,
     },
-    sectionTitle: {
-        fontSize: 18,
-        fontWeight: 'bold',
+    sectionHeaderLabel: {
+        fontSize: 14,
+        fontWeight: '900',
         color: COLORS.primary,
-        marginTop: 15,
-        marginBottom: 5,
+        letterSpacing: 1,
+        marginBottom: 8,
+        textTransform: 'uppercase',
     },
-    description: {
+    sectionDescText: {
         fontSize: 16,
         color: COLORS.text,
         lineHeight: 24,
+        fontWeight: '500',
+    },
+    treatmentHub: {
+        marginBottom: 25,
+    },
+    hubTitle: {
+        fontSize: 14,
+        fontWeight: '900',
+        color: COLORS.textLight,
+        letterSpacing: 1.5,
+        marginBottom: 12,
+        textAlign: 'center',
     },
-    tabContainer: {
+    tabSelector: {
         flexDirection: 'row',
-        marginTop: 20,
-        backgroundColor: '#f0f0f0',
-        borderRadius: 10,
-        padding: 4,
+        backgroundColor: 'rgba(0,0,0,0.05)',
+        borderRadius: 20,
+        padding: 5,
+        marginBottom: 15,
     },
-    tab: {
+    tabItem: {
         flex: 1,
-        paddingVertical: 10,
+        paddingVertical: 12,
         alignItems: 'center',
-        borderRadius: 8,
+        borderRadius: 15,
     },
-    activeTab: {
-        backgroundColor: '#fff',
-        shadowColor: "#000",
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.1,
-        shadowRadius: 1,
-        elevation: 1,
+    activeTabItem: {
+        backgroundColor: COLORS.surface,
+        ...COLORS.shadow.sm,
     },
-    tabText: {
-        color: COLORS.gray,
-        fontWeight: '600',
+    tabLabelText: {
+        fontSize: 13,
+        fontWeight: '700',
+        color: COLORS.textLight,
     },
-    activeTabText: {
-        color: COLORS.primary,
+    activeTabLabelText: {
+        color: COLORS.primaryDark,
+        fontWeight: '900',
     },
-    remedyBox: {
-        marginTop: 15,
-        padding: 15,
-        backgroundColor: '#f9f9f9',
-        borderRadius: 10,
-        borderLeftWidth: 4,
+    remedyDisplay: {
+        backgroundColor: COLORS.surface,
+        borderRadius: 25,
+        padding: 20,
+        borderLeftWidth: 6,
         borderLeftColor: COLORS.primary,
+        ...COLORS.shadow.sm,
     },
-    remedyText: {
-        fontSize: 16,
+    remedyContentText: {
+        fontSize: 15,
         color: COLORS.text,
         lineHeight: 24,
+        fontWeight: '500',
     },
-    homeButton: {
-        backgroundColor: COLORS.primary,
-        margin: 20,
-        padding: 15,
-        borderRadius: 15,
-        alignItems: 'center',
-    },
-    homeButtonText: {
-        color: '#fff',
-        fontSize: 18,
-        fontWeight: 'bold',
+    checklistBoard: {
+        backgroundColor: COLORS.primaryDark,
+        borderRadius: 30,
+        padding: 25,
+        ...COLORS.shadow.md,
     },
-    checklistContainer: {
-        marginTop: 25,
-        padding: 20,
-        backgroundColor: COLORS.primary + '10', // 10% opacity
-        borderRadius: 20,
-        borderWidth: 1,
-        borderColor: COLORS.primary + '30',
-        marginBottom: 10,
+    checklistHead: {
+        marginBottom: 15,
+        borderBottomWidth: 1,
+        borderBottomColor: 'rgba(255,255,255,0.1)',
+        paddingBottom: 10,
     },
-    checklistTitle: {
+    checklistHeadTitle: {
         fontSize: 18,
-        fontWeight: 'bold',
-        color: COLORS.primary,
-        marginBottom: 15,
+        fontWeight: '900',
+        color: COLORS.white,
     },
-    checkItem: {
+    checklistLine: {
         flexDirection: 'row',
         alignItems: 'flex-start',
-        marginBottom: 12,
+        marginBottom: 15,
     },
-    bullet: {
-        width: 8,
-        height: 8,
-        borderRadius: 4,
-        backgroundColor: COLORS.primary,
-        marginTop: 8,
-        marginRight: 12,
+    checkBullet: {
+        width: 10,
+        height: 10,
+        borderRadius: 5,
+        backgroundColor: COLORS.secondary,
+        marginTop: 6,
+        marginRight: 15,
     },
-    checkText: {
+    checklistLineText: {
         fontSize: 15,
-        color: COLORS.text,
+        color: 'rgba(255,255,255,0.9)',
         lineHeight: 22,
         flex: 1,
+        fontWeight: '500',
+    },
+    bottomActions: {
+        padding: SIZES.padding,
+        backgroundColor: COLORS.surface,
+        borderTopWidth: 1,
+        borderTopColor: COLORS.border,
+    },
+    returnHomeBtn: {
+        backgroundColor: COLORS.primary,
+        paddingVertical: 18,
+        borderRadius: 20,
+        alignItems: 'center',
+        ...COLORS.shadow.md,
+    },
+    returnHomeBtnText: {
+        color: COLORS.white,
+        fontSize: 18,
+        fontWeight: '900',
+        letterSpacing: 1,
     },
-    loadingContainer: {
+    loaderContainer: {
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundColor: COLORS.background
+        backgroundColor: COLORS.background,
     },
-    loadingText: {
+    loaderText: {
         marginTop: 20,
+        fontSize: 16,
+        color: COLORS.textLight,
+        fontWeight: '700',
+        letterSpacing: 0.5,
+    },
+    confirmBox: {
+        flex: 1,
+        padding: SIZES.padding,
+    },
+    imageCard: {
+        flex: 1.5,
+        borderRadius: 35,
+        overflow: 'hidden',
+        ...COLORS.shadow.lg,
+        backgroundColor: COLORS.black,
+    },
+    previewFullScreen: {
+        width: '100%',
+        height: '100%',
+        opacity: 0.8,
+    },
+    imageOverlay: {
+        position: 'absolute',
+        top: 30,
+        left: 30,
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.3)',
+    },
+    overlayText: {
+        color: COLORS.white,
+        fontSize: 10,
+        fontWeight: '900',
+        letterSpacing: 1,
+    },
+    confirmActions: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingHorizontal: 10,
+    },
+    confirmMainTitle: {
+        fontSize: 28,
+        fontWeight: '900',
+        color: COLORS.text,
+        marginBottom: 10,
+    },
+    confirmSubTitle: {
+        fontSize: 15,
+        color: COLORS.textLight,
+        textAlign: 'center',
+        lineHeight: 22,
+        marginBottom: 35,
+    },
+    primaryAnalyseBtn: {
+        backgroundColor: COLORS.primary,
+        width: '100%',
+        paddingVertical: 20,
+        borderRadius: 22,
+        alignItems: 'center',
+        ...COLORS.shadow.lg,
+    },
+    primaryAnalyseBtnText: {
+        color: COLORS.white,
         fontSize: 18,
-        color: COLORS.primary,
-        fontWeight: 'bold'
+        fontWeight: '900',
+        letterSpacing: 2,
+    },
+    cancelAction: {
+        marginTop: 20,
+        padding: 10,
+    },
+    cancelActionText: {
+        color: COLORS.textLight,
+        fontSize: 15,
+        fontWeight: '700',
+        textDecorationLine: 'underline',
+    },
+    errorTextHeading: {
+        fontSize: 20,
+        fontWeight: '900',
+        color: COLORS.error,
+        marginBottom: 20,
+    },
+    errorBtn: {
+        paddingHorizontal: 30,
+        paddingVertical: 15,
+        backgroundColor: COLORS.primary,
+        borderRadius: 15,
+    },
+    errorBtnText: {
+        color: COLORS.white,
+        fontWeight: '800',
     }
 });
 

screens/ScannerScreen.js

@@ -1,45 +1,74 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { StyleSheet, Text, View, TouchableOpacity, Dimensions, Animated, StatusBar, ActivityIndicator } from 'react-native';
+import { StyleSheet, Text, View, TouchableOpacity, Dimensions, Animated, StatusBar, ActivityIndicator, Easing } from 'react-native';
 import { CameraView, useCameraPermissions } from 'expo-camera';
 import { COLORS, SIZES, FONTS } from '../constants/theme';
 import { TRANSLATIONS } from '../constants/translations';
 import { analyzeImage } from '../services/aiService';
 
 const { width, height } = Dimensions.get('window');
+const SCAN_SIZE = width * 0.75;
 
 const ScannerScreen = ({ navigation, route }) => {
     const language = route.params?.language || 'en';
     const t = TRANSLATIONS[language] || TRANSLATIONS['en'];
 
     const [permission, requestPermission] = useCameraPermissions();
+    const [scanMode, setScanMode] = useState('auto'); // 'auto' or 'manual'
     const [isScanning, setIsScanning] = useState(true);
     const [loading, setLoading] = useState(false);
-    const [lastScanResult, setLastScanResult] = useState(null);
+    const [statusMessage, setStatusMessage] = useState('LOOKING FOR LEAVES...');
 
-    // Animation for the scanning pulse
+    // Animations
+    const laserAnim = useRef(new Animated.Value(0)).current;
     const pulseAnim = useRef(new Animated.Value(1)).current;
     const cameraRef = useRef(null);
 
     useEffect(() => {
-        if (isScanning) {
-            startPulse();
+        if (isScanning && scanMode === 'auto') {
+            startAnimations();
             const interval = setInterval(() => {
-                if (!loading && isScanning) {
+                if (!loading && isScanning && scanMode === 'auto') {
                     autoCapture();
                 }
-            }, 2000); // Polling every 2 seconds for balance between real-time and server load
+            }, 3000);
             return () => {
                 clearInterval(interval);
+                laserAnim.stopAnimation();
+                pulseAnim.stopAnimation();
+            };
+        } else if (isScanning && scanMode === 'manual') {
+            startAnimations();
+            return () => {
+                laserAnim.stopAnimation();
                 pulseAnim.stopAnimation();
             };
         }
-    }, [isScanning, loading]);
+    }, [isScanning, loading, scanMode]);
 
-    const startPulse = () => {
+    const startAnimations = () => {
+        // Laser Sweep
+        Animated.loop(
+            Animated.sequence([
+                Animated.timing(laserAnim, {
+                    toValue: SCAN_SIZE - 4,
+                    duration: 2000,
+                    easing: Easing.inOut(Easing.quad),
+                    useNativeDriver: true,
+                }),
+                Animated.timing(laserAnim, {
+                    toValue: 0,
+                    duration: 2000,
+                    easing: Easing.inOut(Easing.quad),
+                    useNativeDriver: true,
+                })
+            ])
+        ).start();
+
+        // Frame Pulse
         Animated.loop(
             Animated.sequence([
                 Animated.timing(pulseAnim, {
-                    toValue: 1.2,
+                    toValue: 1.05,
                     duration: 1000,
                     useNativeDriver: true,
                 }),
@@ -53,44 +82,58 @@ const ScannerScreen = ({ navigation, route }) => {
     };
 
     const autoCapture = async () => {
-        if (!cameraRef.current) return;
+        if (!cameraRef.current || loading || !isScanning || scanMode !== 'auto') return;
+        performCapture();
+    };
+
+    const performCapture = async () => {
+        if (!cameraRef.current || loading) return;
 
         try {
             setLoading(true);
+            setStatusMessage(scanMode === 'auto' ? 'ANALYZING DETAILS...' : 'CAPTURING...');
+
             const photo = await cameraRef.current.takePictureAsync({
-                quality: 0.5, // Lower quality for faster real-time processing
+                quality: 0.7,
                 base64: false,
             });
 
             const result = await analyzeImage(photo.uri);
 
             if (result && result.status === 'success') {
-                setLastScanResult(result);
-                // If high confidence, stop and show result
-                if (result.confidence > 0.85) {
+                // In auto mode, we need high confidence to auto-navigate
+                // In manual mode, we always navigate on button press
+                if (scanMode === 'manual' || (result.confidence > 0.45)) {
                     setIsScanning(false);
                     navigation.navigate('Result', {
                         imageUri: photo.uri,
                         analysisResult: result,
                         language
                     });
+                } else {
+                    setStatusMessage('HOLD STEADY...');
                 }
             }
         } catch (error) {
             console.log("Scanner Error:", error);
+            setStatusMessage('POOR LIGHTING? TRY AGAIN');
         } finally {
             setLoading(false);
+            if (isScanning) setTimeout(() => setStatusMessage(scanMode === 'auto' ? 'LOOKING FOR LEAVES...' : 'READY FOR CAPTURE'), 1000);
         }
     };
 
-    if (!permission) return <View />;
+    if (!permission) return <View style={styles.container} />;
     if (!permission.granted) {
         return (
             <View style={styles.container}>
-                <Text style={styles.text}>{t.cameraPermissionMessage}</Text>
-                <TouchableOpacity onPress={requestPermission} style={styles.button}>
-                    <Text style={styles.buttonText}>{t.grantPermission}</Text>
-                </TouchableOpacity>
+                <View style={styles.permissionBox}>
+                    <Text style={styles.permissionIcon}>📷</Text>
+                    <Text style={styles.text}>{language === 'ta' ? "கேமரா அனுமதி தேவை" : "Camera Access Needed"}</Text>
+                    <TouchableOpacity onPress={requestPermission} style={styles.grantButton}>
+                        <Text style={styles.grantButtonText}>{t.grantPermission}</Text>
+                    </TouchableOpacity>
+                </View>
             </View>
         );
     }
@@ -102,56 +145,124 @@ const ScannerScreen = ({ navigation, route }) => {
                 style={StyleSheet.absoluteFill}
                 facing="back"
                 ref={cameraRef}
+                shutterSound={false}
             />
 
-            {/* Scanning Overlay */}
-            <View style={styles.overlay}>
-                <View style={styles.header}>
-                    <TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
-                        <Text style={styles.backIcon}>✕</Text>
-                    </TouchableOpacity>
-                    <Text style={styles.headerText}>{t.scanning || 'Scanning...'}</Text>
-                </View>
+            {/* Immersive Overlay */}
+            <View style={styles.maskContainer}>
+                <View style={styles.maskSide} />
+                <View style={styles.maskMiddle}>
+                    <View style={styles.maskSide} />
+                    <View style={styles.scanHole}>
+                        <Animated.View style={[styles.laser, { transform: [{ translateY: laserAnim }] }]} />
+                        <Animated.View style={[styles.cornerFrame, { transform: [{ scale: pulseAnim }] }]}>
+                            <View style={[styles.corner, styles.topLeft]} />
+                            <View style={[styles.corner, styles.topRight]} />
+                            <View style={[styles.corner, styles.bottomLeft]} />
+                            <View style={[styles.corner, styles.bottomRight]} />
+                        </Animated.View>
 
-                <View style={styles.guideContainer}>
-                    <Animated.View style={[
-                        styles.scannerFrame,
-                        { transform: [{ scale: pulseAnim }], borderColor: loading ? COLORS.primary : COLORS.white }
-                    ]}>
-                        <View style={styles.cornerTopLeft} />
-                        <View style={styles.cornerTopRight} />
-                        <View style={styles.cornerBottomLeft} />
-                        <View style={styles.cornerBottomRight} />
-                    </Animated.View>
+                        {/* Technical HUD Details */}
+                        <View style={styles.hudTechnicalLeft}>
+                            <View style={styles.hudLine} />
+                            <Text style={styles.hudTechText}>LR-24</Text>
+                        </View>
+                        <View style={styles.hudTechnicalRight}>
+                            <Text style={styles.hudTechText}>AF-ON</Text>
+                            <View style={styles.hudLine} />
+                        </View>
+                    </View>
+                    <View style={styles.maskSide} />
                 </View>
+                <View style={styles.maskSide} />
+            </View>
+
+            {/* UI UI Controls */}
+            <View style={styles.uiContainer}>
+                {/* Header Elevation */}
+                <View style={styles.topRegion}>
+                    <View style={styles.appHeaderRow}>
+                        <TouchableOpacity onPress={() => navigation.goBack()} style={styles.glassBtn}>
+                            <Text style={styles.glassBtnText}>✕</Text>
+                        </TouchableOpacity>
 
-                <View style={styles.footer}>
-                    {loading ? (
-                        <View style={styles.loadingContainer}>
-                            <ActivityIndicator size="large" color={COLORS.secondary} />
-                            <Text style={styles.loadingText}>{t.analyzing || 'Analyzing...'}</Text>
+                        {/* High-Tech Mode Selector */}
+                        <View style={styles.premiumSwitch}>
+                            <TouchableOpacity
+                                style={[styles.switchTab, scanMode === 'auto' && styles.activeSwitchTab]}
+                                onPress={() => setScanMode('auto')}
+                            >
+                                <Text style={[styles.switchTabText, scanMode === 'auto' && styles.activeSwitchTabText]}>
+                                    {t.autoScan}
+                                </Text>
+                            </TouchableOpacity>
+                            <TouchableOpacity
+                                style={[styles.switchTab, scanMode === 'manual' && styles.activeSwitchTab]}
+                                onPress={() => setScanMode('manual')}
+                            >
+                                <Text style={[styles.switchTabText, scanMode === 'manual' && styles.activeSwitchTabText]}>
+                                    {t.manualCapture}
+                                </Text>
+                            </TouchableOpacity>
                         </View>
-                    ) : (
-                        <View style={styles.infoBox}>
-                            <Text style={styles.guideText}>{t.scannerTip || 'Point camera at leaf for instant diagnosis'}</Text>
-                            {lastScanResult && (
-                                <View style={styles.miniResult}>
-                                    <Text style={styles.miniResultText}>
-                                        Last Check: {lastScanResult.class} ({(lastScanResult.confidence * 100).toFixed(0)}%)
-                                    </Text>
-                                </View>
-                            )}
+
+                        <View style={{ width: 44 }} />
+                    </View>
+
+                    <View style={styles.statusDisplay}>
+                        <View style={styles.statusPill}>
+                            <View style={[styles.pulseDot, { backgroundColor: loading ? COLORS.warning : (scanMode === 'auto' ? '#4ade80' : '#fbbf24') }]} />
+                            <Text style={styles.statusPillText}>{statusMessage}</Text>
                         </View>
-                    )}
+                    </View>
+                </View>
 
-                    <TouchableOpacity
-                        style={styles.manualButton}
-                        onPress={() => setIsScanning(!isScanning)}
-                    >
-                        <Text style={styles.manualButtonText}>
-                            {isScanning ? 'PAUSE' : 'RESUME SCAN'}
+                {/* Footer elevation */}
+                <View style={styles.bottomRegion}>
+                    <View style={styles.hintBox}>
+                        <Text style={styles.instructionText}>
+                            {scanMode === 'auto'
+                                ? (language === 'ta' ? "இலையை சட்டத்திற்குள் வைக்கவும்" : "AI IS LOOKING FOR DISEASES AUTOMATICALLY")
+                                : (language === 'ta' ? "புகைப்படம் எடுக்க பட்டனை அழுத்தவும்" : "TAP TO CAPTURE MANUALLY")}
                         </Text>
-                    </TouchableOpacity>
+                    </View>
+
+                    <View style={styles.controlCenter}>
+                        <TouchableOpacity style={styles.secondaryCircle} onPress={() => navigation.navigate('About')}>
+                            <Text style={{ fontSize: 24 }}>❓</Text>
+                        </TouchableOpacity>
+
+                        <View style={styles.mainShutterOuter}>
+                            <TouchableOpacity
+                                style={[
+                                    styles.masterShutter,
+                                    loading && styles.shutterBusy,
+                                    scanMode === 'auto' && styles.shutterAutoMode
+                                ]}
+                                onPress={performCapture}
+                                disabled={loading}
+                            >
+                                <View style={[styles.shutterInnerRing, scanMode === 'auto' && styles.shutterInnerAutoRing]}>
+                                    {loading ? (
+                                        <ActivityIndicator color="white" />
+                                    ) : (
+                                        scanMode === 'manual' ? (
+                                            <View style={styles.manualCore} />
+                                        ) : (
+                                            <Text style={styles.robotIcon}>🤖</Text>
+                                        )
+                                    )}
+                                </View>
+                            </TouchableOpacity>
+                        </View>
+
+                        <TouchableOpacity
+                            style={styles.secondaryCircle}
+                            onPress={() => setIsScanning(!isScanning)}
+                        >
+                            <Text style={{ fontSize: 24 }}>{isScanning ? '⏸️' : '▶️'}</Text>
+                        </TouchableOpacity>
+                    </View>
                 </View>
             </View>
         </View>
@@ -161,157 +272,264 @@ const ScannerScreen = ({ navigation, route }) => {
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: 'black',
+        backgroundColor: '#000',
+    },
+    maskContainer: {
+        ...StyleSheet.absoluteFillObject,
+        justifyContent: 'center',
+        alignItems: 'center',
     },
-    overlay: {
+    maskSide: {
         flex: 1,
-        justify_content: 'space-between',
-        padding: 20,
+        width: '100%',
+        backgroundColor: 'rgba(0,0,0,0.65)',
     },
-    header: {
+    maskMiddle: {
+        flexDirection: 'row',
+        height: SCAN_SIZE,
+    },
+    scanHole: {
+        width: SCAN_SIZE,
+        height: SCAN_SIZE,
+        backgroundColor: 'transparent',
+        overflow: 'hidden',
+    },
+    cornerFrame: {
+        ...StyleSheet.absoluteFillObject,
+    },
+    corner: {
+        position: 'absolute',
+        width: 32,
+        height: 32,
+        borderColor: '#4ade80',
+    },
+    topLeft: { top: 0, left: 0, borderTopWidth: 5, borderLeftWidth: 5, borderTopLeftRadius: 18 },
+    topRight: { top: 0, right: 0, borderTopWidth: 5, borderRightWidth: 5, borderTopRightRadius: 18 },
+    bottomLeft: { bottom: 0, left: 0, borderBottomWidth: 5, borderLeftWidth: 5, borderBottomLeftRadius: 18 },
+    bottomRight: { bottom: 0, right: 0, borderBottomWidth: 5, borderRightWidth: 5, borderBottomRightRadius: 18 },
+    laser: {
+        height: 4,
+        width: '100%',
+        backgroundColor: '#4ade80',
+        shadowColor: '#4ade80',
+        shadowOffset: { width: 0, height: 0 },
+        shadowOpacity: 1,
+        shadowRadius: 15,
+        zIndex: 10,
+    },
+    hudTechnicalLeft: {
+        position: 'absolute',
+        left: 20,
+        top: '40%',
         flexDirection: 'row',
         alignItems: 'center',
-        marginTop: 40,
     },
-    backButton: {
-        padding: 10,
-        backgroundColor: 'rgba(0,0,0,0.5)',
-        borderRadius: 20,
+    hudTechnicalRight: {
+        position: 'absolute',
+        right: 20,
+        top: '40%',
+        flexDirection: 'row',
+        alignItems: 'center',
     },
-    backIcon: {
-        color: 'white',
-        fontSize: 20,
-        fontWeight: 'bold',
+    hudLine: {
+        width: 30,
+        height: 1,
+        backgroundColor: 'rgba(74, 222, 128, 0.5)',
     },
-    headerText: {
-        color: 'white',
-        fontSize: 18,
-        fontWeight: 'bold',
-        marginLeft: 20,
+    hudTechText: {
+        color: 'rgba(74, 222, 128, 0.7)',
+        fontSize: 8,
+        fontWeight: '900',
+        marginHorizontal: 8,
+        letterSpacing: 2,
     },
-    guideContainer: {
-        flex: 1,
+    uiContainer: {
+        ...StyleSheet.absoluteFillObject,
+        justifyContent: 'space-between',
+        paddingVertical: 50,
+    },
+    topRegion: {
+        gap: 20,
+    },
+    appHeaderRow: {
+        flexDirection: 'row',
         alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 25,
+    },
+    glassBtn: {
+        width: 44,
+        height: 44,
+        borderRadius: 14,
+        backgroundColor: 'rgba(255,255,255,0.15)',
         justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.2)',
+    },
+    glassBtnText: {
+        color: COLORS.white,
+        fontSize: 18,
+        fontWeight: 'bold',
     },
-    scannerFrame: {
-        width: width * 0.7,
-        height: width * 0.7,
-        borderWidth: 2,
+    premiumSwitch: {
+        flexDirection: 'row',
+        backgroundColor: 'rgba(0,0,0,0.5)',
         borderRadius: 20,
-        position: 'relative',
+        padding: 4,
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.15)',
     },
-    cornerTopLeft: {
-        position: 'absolute',
-        top: -2,
-        left: -2,
-        width: 40,
-        height: 40,
-        borderTopWidth: 6,
-        borderLeftWidth: 6,
-        borderColor: COLORS.secondary,
-        borderTopLeftRadius: 20,
-    },
-    cornerTopRight: {
-        position: 'absolute',
-        top: -2,
-        right: -2,
-        width: 40,
-        height: 40,
-        borderTopWidth: 6,
-        borderRightWidth: 6,
-        borderColor: COLORS.secondary,
-        borderTopRightRadius: 20,
-    },
-    cornerBottomLeft: {
-        position: 'absolute',
-        bottom: -2,
-        left: -2,
-        width: 40,
-        height: 40,
-        borderBottomWidth: 6,
-        borderLeftWidth: 6,
-        borderColor: COLORS.secondary,
-        borderBottomLeftRadius: 20,
-    },
-    cornerBottomRight: {
-        position: 'absolute',
-        bottom: -2,
-        right: -2,
-        width: 40,
-        height: 40,
-        borderBottomWidth: 6,
-        borderRightWidth: 6,
-        borderColor: COLORS.secondary,
-        borderBottomRightRadius: 20,
-    },
-    footer: {
-        marginBottom: 40,
+    switchTab: {
+        paddingHorizontal: 22,
+        paddingVertical: 8,
+        borderRadius: 16,
+    },
+    activeSwitchTab: {
+        backgroundColor: COLORS.white,
+    },
+    switchTabText: {
+        color: COLORS.white,
+        fontSize: 11,
+        fontWeight: '900',
+        letterSpacing: 1,
+    },
+    activeSwitchTabText: {
+        color: COLORS.primaryDark,
+    },
+    statusDisplay: {
         alignItems: 'center',
     },
-    infoBox: {
-        backgroundColor: 'rgba(0,0,0,0.6)',
-        padding: 15,
-        borderRadius: 15,
-        width: '100%',
+    statusPill: {
+        flexDirection: 'row',
         alignItems: 'center',
-        marginBottom: 20,
+        backgroundColor: 'rgba(0,0,0,0.7)',
+        paddingHorizontal: 18,
+        paddingVertical: 10,
+        borderRadius: 25,
+        borderWidth: 1,
+        borderColor: 'rgba(74, 222, 128, 0.3)',
+        ...COLORS.shadow.md,
+    },
+    pulseDot: {
+        width: 10,
+        height: 10,
+        borderRadius: 5,
+        marginRight: 12,
+    },
+    statusPillText: {
+        color: COLORS.white,
+        fontSize: 12,
+        fontWeight: '900',
+        letterSpacing: 1.5,
     },
-    guideText: {
-        color: 'white',
-        fontSize: 14,
+    bottomRegion: {
+        alignItems: 'center',
+        paddingHorizontal: 25,
+    },
+    hintBox: {
+        marginBottom: 40,
+        backgroundColor: 'rgba(0,0,0,0.4)',
+        paddingHorizontal: 15,
+        paddingVertical: 8,
+        borderRadius: 12,
+    },
+    instructionText: {
+        color: 'rgba(255,255,255,0.9)',
+        fontSize: 11,
+        fontWeight: '800',
+        letterSpacing: 1,
         textAlign: 'center',
     },
-    miniResult: {
-        marginTop: 10,
-        paddingTop: 10,
-        borderTopWidth: 1,
-        borderTopColor: 'rgba(255,255,255,0.2)',
+    controlCenter: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-around',
         width: '100%',
     },
-    miniResultText: {
-        color: COLORS.secondary,
-        fontWeight: 'bold',
-        textAlign: 'center',
-        fontSize: 14,
+    secondaryCircle: {
+        width: 60,
+        height: 60,
+        borderRadius: 30,
+        backgroundColor: 'rgba(255,255,255,0.15)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.1)',
     },
-    loadingContainer: {
+    mainShutterOuter: {
+        width: 100,
+        height: 100,
+        borderRadius: 50,
+        borderWidth: 3,
+        borderColor: 'rgba(255,255,255,0.3)',
+        justifyContent: 'center',
         alignItems: 'center',
-        marginBottom: 20,
     },
-    loadingText: {
-        color: COLORS.secondary,
-        marginTop: 10,
-        fontWeight: 'bold',
+    masterShutter: {
+        width: 84,
+        height: 84,
+        borderRadius: 42,
+        backgroundColor: 'rgba(255,255,255,0.1)',
+        padding: 5,
     },
-    manualButton: {
+    shutterAutoMode: {
+        opacity: 0.8,
+    },
+    shutterInnerRing: {
+        flex: 1,
+        borderRadius: 37,
         backgroundColor: COLORS.white,
-        paddingVertical: 12,
-        paddingHorizontal: 30,
-        borderRadius: 25,
+        justifyContent: 'center',
+        alignItems: 'center',
     },
-    manualButtonText: {
-        color: COLORS.primary,
-        fontWeight: 'bold',
-        fontSize: 14,
+    shutterInnerAutoRing: {
+        backgroundColor: 'rgba(255,255,255,0.2)',
     },
-    text: {
-        color: 'white',
-        textAlign: 'center',
-        fontSize: 16,
-        padding: 20,
+    manualCore: {
+        width: 60,
+        height: 60,
+        borderRadius: 30,
+        backgroundColor: COLORS.white,
+        borderWidth: 4,
+        borderColor: 'rgba(0,0,0,0.05)',
     },
-    button: {
-        backgroundColor: COLORS.secondary,
-        padding: 15,
-        borderRadius: 10,
-        marginHorizontal: 40,
+    robotIcon: {
+        fontSize: 34,
     },
-    buttonText: {
-        color: 'white',
-        fontWeight: 'bold',
+    shutterBusy: {
+        opacity: 0.5,
+    },
+    permissionBox: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 30,
+    },
+    permissionIcon: {
+        fontSize: 60,
+        marginBottom: 20,
+    },
+    text: {
+        color: COLORS.white,
+        fontSize: 18,
         textAlign: 'center',
+        marginBottom: 30,
+        fontWeight: '900',
     },
+    grantButton: {
+        backgroundColor: COLORS.primary,
+        paddingHorizontal: 45,
+        paddingVertical: 18,
+        borderRadius: 30,
+        ...COLORS.shadow.md,
+    },
+    grantButtonText: {
+        color: COLORS.white,
+        fontWeight: '900',
+        fontSize: 16,
+        letterSpacing: 1,
+    }
 });
 
 export default ScannerScreen;

screens/SchemesScreen.js

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { StyleSheet, Text, View, ScrollView, TouchableOpacity, SafeAreaView, StatusBar, Modal } from 'react-native';
+import { StyleSheet, Text, View, ScrollView, TouchableOpacity, StatusBar, Modal, Linking } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { COLORS, SIZES } from '../constants/theme';
 import { TRANSLATIONS } from '../constants/translations';
 
@@ -154,6 +154,12 @@ const SchemesScreen = ({ route, navigation }) => {
     const [selectedScheme, setSelectedScheme] = useState(null);
     const [modalVisible, setModalVisible] = useState(false);
 
+    const handleApply = (url) => {
+        if (url) {
+            Linking.openURL(url);
+        }
+    };
+
     const openSchemeDetail = (scheme) => {
         setSelectedScheme(scheme);
         setModalVisible(true);
@@ -165,93 +171,119 @@ const SchemesScreen = ({ route, navigation }) => {
             onPress={() => openSchemeDetail(scheme)}
             activeOpacity={0.7}
         >
-            <View style={styles.schemeIconContainer}>
-                <Text style={styles.schemeIcon}>{scheme.icon}</Text>
+            <View style={styles.schemeIconBox}>
+                <Text style={styles.schemeIconEmoji}>{scheme.icon}</Text>
             </View>
-            <Text style={styles.schemeName}>{scheme.name[language]}</Text>
+            <View style={styles.schemeInfo}>
+                <Text style={styles.schemeTitleText}>{scheme.name[language]}</Text>
+                <Text style={styles.schemeSubtitleText} numberOfLines={2}>
+                    {scheme.shortDesc[language]}
+                </Text>
+            </View>
+            <Text style={styles.schemeArrow}>›</Text>
         </TouchableOpacity>
     );
 
     return (
-        <SafeAreaView style={styles.container}>
-            <StatusBar backgroundColor={COLORS.white} barStyle="dark-content" />
-
-            {/* Header */}
-            <View style={styles.header}>
-                <Text style={styles.appName}>GREEN DOCTOR</Text>
-                <TouchableOpacity
-                    onPress={() => navigation.navigate('Language')}
-                    style={styles.languageButton}
-                >
-                    <Text style={styles.languageIcon}>🌐</Text>
-                </TouchableOpacity>
-            </View>
+        <SafeAreaView style={styles.container} edges={['right', 'left', 'top']}>
+            <StatusBar backgroundColor={COLORS.primary} barStyle="light-content" />
 
-            {/* Title */}
-            <View style={styles.titleContainer}>
-                <Text style={styles.pageTitle}>{t.govtSchemes.toUpperCase()}</Text>
+            {/* Immersive Header */}
+            <View style={styles.premiumHeader}>
+                <View style={styles.headerTopRow}>
+                    <TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
+                        <Text style={styles.backButtonText}>←</Text>
+                    </TouchableOpacity>
+                    <Text style={styles.headerTitle}>{t.govtSchemes}</Text>
+                    <View style={{ width: 44 }} />
+                </View>
+                <View style={styles.headerSearchPlaceholder}>
+                    <Text style={styles.searchLabel}>OFFICIAL GOVERNMENT INITIATIVES</Text>
+                </View>
             </View>
 
-            {/* Schemes List */}
             <ScrollView
                 style={styles.scrollView}
                 contentContainerStyle={styles.scrollContent}
                 showsVerticalScrollIndicator={false}
             >
-                {SCHEMES_DATA.map((scheme) => (
-                    <SchemeCard key={scheme.id} scheme={scheme} />
-                ))}
-                <View style={{ height: 30 }} />
+                <View style={styles.listSection}>
+                    <Text style={styles.sectionHeading}>AVAILABLE PROGRAMS</Text>
+                    {SCHEMES_DATA.map((scheme) => (
+                        <SchemeCard key={scheme.id} scheme={scheme} />
+                    ))}
+                </View>
+                <View style={{ height: 40 }} />
             </ScrollView>
 
-            {/* Scheme Detail Modal */}
+            {/* Scheme Detail Modal - Redesigned as a Premium Over Sheet */}
             <Modal
                 animationType="slide"
                 transparent={false}
                 visible={modalVisible}
                 onRequestClose={() => setModalVisible(false)}
             >
-                <SafeAreaView style={styles.modalContainer}>
-                    <View style={styles.modalHeader}>
+                <SafeAreaView style={styles.modalViewContainer}>
+                    <View style={styles.modalPremiumHeader}>
                         <TouchableOpacity
                             onPress={() => setModalVisible(false)}
-                            style={styles.closeButton}
+                            style={styles.modalBackBtn}
                         >
-                            <Text style={styles.closeButtonText}>✕</Text>
+                            <Text style={styles.modalBackBtnText}>✕</Text>
                         </TouchableOpacity>
-                        <Text style={styles.modalTitle}>
-                            {selectedScheme?.name[language]}
+                        <Text style={styles.modalHeaderTitle} numberOfLines={1}>
+                            {selectedScheme?.name?.[language] || ""}
                         </Text>
                     </View>
 
-                    <ScrollView style={styles.modalScroll} showsVerticalScrollIndicator={false}>
+                    <ScrollView style={styles.modalInnerScroll} showsVerticalScrollIndicator={false}>
                         {selectedScheme && (
-                            <View style={styles.modalContent}>
-                                <View style={styles.schemeIconLarge}>
-                                    <Text style={styles.schemeIconLargeText}>{selectedScheme.icon}</Text>
+                            <View style={styles.detailWrapper}>
+                                <View style={styles.heroFeature}>
+                                    <View style={styles.heroEmojiCircle}>
+                                        <Text style={styles.heroEmojiText}>{selectedScheme.icon}</Text>
+                                    </View>
+                                    <View style={styles.heroMeta}>
+                                        <Text style={styles.heroTag}>VERIFIED SCHEME</Text>
+                                        <Text style={styles.heroTitleMain}>{selectedScheme.name[language]}</Text>
+                                    </View>
                                 </View>
 
-                                <View style={styles.detailSection}>
-                                    <Text style={styles.detailSectionTitle}>📋 {t.aboutTitle || 'About'}</Text>
-                                    <Text style={styles.detailText}>{selectedScheme.description[language]}</Text>
+                                <View style={styles.contentBlock}>
+                                    <View style={styles.infoPill}>
+                                        <Text style={styles.pillLabel}>📋 PROGRAM OVERVIEW</Text>
+                                    </View>
+                                    <Text style={styles.bodyPara}>{selectedScheme.description[language]}</Text>
                                 </View>
 
-                                <View style={styles.detailSection}>
-                                    <Text style={styles.detailSectionTitle}>✅ Eligibility</Text>
-                                    <Text style={styles.detailText}>{selectedScheme.eligibility[language]}</Text>
+                                <View style={styles.gridBoard}>
+                                    <View style={styles.gridItem}>
+                                        <Text style={styles.gridLabel}>✅ ELIGIBILITY</Text>
+                                        <Text style={styles.gridValue}>{selectedScheme.eligibility[language]}</Text>
+                                    </View>
+                                    <View style={styles.gridItem}>
+                                        <Text style={styles.gridLabel}>🎁 KEY BENEFITS</Text>
+                                        <Text style={styles.gridValue}>{selectedScheme.benefits[language]}</Text>
+                                    </View>
                                 </View>
 
-                                <View style={styles.detailSection}>
-                                    <Text style={styles.detailSectionTitle}>🎁 Benefits</Text>
-                                    <Text style={styles.detailText}>{selectedScheme.benefits[language]}</Text>
+                                <View style={[styles.contentBlock, { backgroundColor: COLORS.primaryDark, borderRadius: 25, padding: 25 }]}>
+                                    <Text style={[styles.pillLabel, { color: COLORS.secondary }]}>📝 APPLICATION PROCESS</Text>
+                                    <Text style={[styles.bodyPara, { color: 'rgba(255,255,255,0.9)', marginTop: 10 }]}>
+                                        {selectedScheme.howToApply[language]}
+                                    </Text>
                                 </View>
 
-                                <View style={styles.detailSection}>
-                                    <Text style={styles.detailSectionTitle}>📝 How to Apply</Text>
-                                    <Text style={styles.detailText}>{selectedScheme.howToApply[language]}</Text>
-                                </View>
+                                {t.schemeLinks && t.schemeLinks[selectedScheme.id] && (
+                                    <TouchableOpacity
+                                        style={styles.ctaButton}
+                                        onPress={() => handleApply(t.schemeLinks[selectedScheme.id])}
+                                    >
+                                        <Text style={styles.ctaButtonText}>{t.applyOnline}</Text>
+                                    </TouchableOpacity>
+                                )}
 
-                                <View style={{ height: 40 }} />
+                                <View style={{ height: 60 }} />
                             </View>
                         )}
                     </ScrollView>
@@ -264,146 +296,250 @@ const SchemesScreen = ({ route, navigation }) => {
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: '#E8F5E9',
+        backgroundColor: COLORS.background,
     },
-    header: {
-        backgroundColor: COLORS.white,
-        paddingVertical: 15,
-        paddingHorizontal: 20,
+    premiumHeader: {
+        backgroundColor: COLORS.primary,
+        paddingTop: 10,
+        paddingBottom: 25,
+        paddingHorizontal: SIZES.padding,
+        borderBottomLeftRadius: 35,
+        borderBottomRightRadius: 35,
+        ...COLORS.shadow.lg,
+    },
+    headerTopRow: {
         flexDirection: 'row',
+        alignItems: 'center',
         justifyContent: 'space-between',
+        marginBottom: 20,
+    },
+    backButton: {
+        width: 44,
+        height: 44,
+        borderRadius: 22,
+        backgroundColor: 'rgba(255,255,255,0.2)',
+        justifyContent: 'center',
         alignItems: 'center',
-        borderBottomWidth: 1,
-        borderBottomColor: '#e0e0e0',
     },
-    appName: {
-        fontSize: 18,
+    backButtonText: {
+        fontSize: 24,
+        color: COLORS.white,
         fontWeight: 'bold',
-        color: COLORS.primary,
-    },
-    languageButton: {
-        padding: 5,
     },
-    languageIcon: {
-        fontSize: 24,
+    headerTitle: {
+        fontSize: 20,
+        fontWeight: '900',
+        color: COLORS.white,
+        letterSpacing: 0.5,
     },
-    titleContainer: {
-        backgroundColor: COLORS.white,
-        paddingVertical: 20,
-        paddingHorizontal: 20,
+    headerSearchPlaceholder: {
+        backgroundColor: 'rgba(0,0,0,0.15)',
+        paddingVertical: 8,
+        paddingHorizontal: 15,
+        borderRadius: 12,
         alignItems: 'center',
     },
-    pageTitle: {
-        fontSize: 24,
-        fontWeight: 'bold',
-        color: '#000',
-        letterSpacing: 1,
+    searchLabel: {
+        color: 'rgba(255,255,255,0.6)',
+        fontSize: 10,
+        fontWeight: '900',
+        letterSpacing: 2,
     },
     scrollView: {
         flex: 1,
     },
     scrollContent: {
-        paddingHorizontal: 20,
-        paddingTop: 20,
+        padding: SIZES.padding,
     },
-    schemeCard: {
-        backgroundColor: COLORS.white,
-        borderRadius: 25,
-        padding: 16,
+    listSection: {
+        paddingBottom: 20,
+    },
+    sectionHeading: {
+        fontSize: 12,
+        fontWeight: '900',
+        color: COLORS.textLight,
+        letterSpacing: 1.5,
         marginBottom: 15,
+        marginLeft: 5,
+    },
+    schemeCard: {
         flexDirection: 'row',
         alignItems: 'center',
-        elevation: 2,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.1,
-        shadowRadius: 2,
-        borderWidth: 1.5,
-        borderColor: '#4CAF50',
-    },
-    schemeIconContainer: {
-        width: 50,
-        height: 50,
+        backgroundColor: COLORS.surface,
         borderRadius: 25,
-        backgroundColor: '#E8F5E9',
+        padding: 18,
+        marginBottom: 15,
+        borderWidth: 1,
+        borderColor: COLORS.border,
+        ...COLORS.shadow.sm,
+    },
+    schemeIconBox: {
+        width: 56,
+        height: 56,
+        borderRadius: 18,
+        backgroundColor: COLORS.primary + '10',
         justifyContent: 'center',
         alignItems: 'center',
-        marginRight: 15,
+        marginRight: 18,
     },
-    schemeIcon: {
+    schemeIconEmoji: {
         fontSize: 28,
     },
-    schemeName: {
-        fontSize: 16,
-        fontWeight: 'bold',
-        color: '#000',
+    schemeInfo: {
         flex: 1,
     },
+    schemeTitleText: {
+        fontSize: 17,
+        fontWeight: '800',
+        color: COLORS.text,
+        marginBottom: 4,
+    },
+    schemeSubtitleText: {
+        fontSize: 12,
+        color: COLORS.textLight,
+        fontWeight: '500',
+        lineHeight: 18,
+    },
+    schemeArrow: {
+        fontSize: 24,
+        color: COLORS.primary,
+        opacity: 0.3,
+        fontWeight: '300',
+        marginLeft: 10,
+    },
     // Modal Styles
-    modalContainer: {
+    modalViewContainer: {
         flex: 1,
         backgroundColor: COLORS.background,
     },
-    modalHeader: {
-        backgroundColor: COLORS.primary,
+    modalPremiumHeader: {
+        backgroundColor: COLORS.primaryDark,
         paddingVertical: 15,
-        paddingHorizontal: 20,
+        paddingHorizontal: SIZES.padding,
         flexDirection: 'row',
         alignItems: 'center',
     },
-    closeButton: {
+    modalBackBtn: {
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        backgroundColor: 'rgba(255,255,255,0.15)',
+        justifyContent: 'center',
+        alignItems: 'center',
         marginRight: 15,
-        padding: 5,
     },
-    closeButtonText: {
-        fontSize: 24,
+    modalBackBtnText: {
+        fontSize: 18,
         color: COLORS.white,
         fontWeight: 'bold',
     },
-    modalTitle: {
+    modalHeaderTitle: {
         fontSize: 18,
-        fontWeight: 'bold',
+        fontWeight: '800',
         color: COLORS.white,
         flex: 1,
     },
-    modalScroll: {
+    modalInnerScroll: {
         flex: 1,
     },
-    modalContent: {
+    detailWrapper: {
+        padding: SIZES.padding,
+    },
+    heroFeature: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: COLORS.surface,
+        borderRadius: 30,
         padding: 20,
+        marginBottom: 25,
+        ...COLORS.shadow.md,
+        borderWidth: 1,
+        borderColor: COLORS.border,
     },
-    schemeIconLarge: {
-        width: 80,
-        height: 80,
-        borderRadius: 40,
-        backgroundColor: COLORS.primary + '20',
+    heroEmojiCircle: {
+        width: 70,
+        height: 70,
+        borderRadius: 35,
+        backgroundColor: COLORS.primary + '15',
         justifyContent: 'center',
         alignItems: 'center',
-        alignSelf: 'center',
-        marginBottom: 20,
+        marginRight: 20,
     },
-    schemeIconLargeText: {
-        fontSize: 40,
+    heroEmojiText: {
+        fontSize: 36,
     },
-    detailSection: {
-        backgroundColor: COLORS.white,
-        borderRadius: 12,
-        padding: 16,
-        marginBottom: 15,
-        borderLeftWidth: 4,
-        borderLeftColor: COLORS.primary,
+    heroMeta: {
+        flex: 1,
     },
-    detailSectionTitle: {
-        fontSize: 18,
-        fontWeight: 'bold',
+    heroTag: {
+        fontSize: 9,
+        fontWeight: '900',
+        color: COLORS.success,
+        letterSpacing: 2,
+        marginBottom: 4,
+    },
+    heroTitleMain: {
+        fontSize: 22,
+        fontWeight: '900',
+        color: COLORS.text,
+    },
+    contentBlock: {
+        marginBottom: 25,
+    },
+    pillLabel: {
+        fontSize: 11,
+        fontWeight: '900',
         color: COLORS.primary,
-        marginBottom: 10,
+        letterSpacing: 1.5,
+        marginBottom: 12,
+    },
+    bodyPara: {
+        fontSize: 16,
+        color: COLORS.text,
+        lineHeight: 26,
+        fontWeight: '500',
+    },
+    gridBoard: {
+        flexDirection: 'row',
+        gap: 15,
+        marginBottom: 25,
+    },
+    gridItem: {
+        flex: 1,
+        backgroundColor: COLORS.surface,
+        borderRadius: 22,
+        padding: 20,
+        borderWidth: 1,
+        borderColor: COLORS.border,
+        ...COLORS.shadow.sm,
     },
-    detailText: {
-        fontSize: 15,
+    gridLabel: {
+        fontSize: 10,
+        fontWeight: '900',
+        color: COLORS.textLight,
+        letterSpacing: 1,
+        marginBottom: 8,
+    },
+    gridValue: {
+        fontSize: 14,
         color: COLORS.text,
-        lineHeight: 24,
+        lineHeight: 20,
+        fontWeight: '700',
+    },
+    ctaButton: {
+        backgroundColor: COLORS.primary,
+        paddingVertical: 20,
+        borderRadius: 25,
+        alignItems: 'center',
+        ...COLORS.shadow.lg,
+        marginTop: 10,
     },
+    ctaButtonText: {
+        color: COLORS.white,
+        fontSize: 18,
+        fontWeight: '900',
+        letterSpacing: 2,
+    }
 });
 
 export default SchemesScreen;

services/aiService.js

@@ -25,14 +25,16 @@ export const analyzeImage = async (imageUri) => {
 
         // 1. Try Custom Backend First
         try {
-            console.log("Trying Backend...");
+            console.log("---------------------------------------------------");
+            console.log("DEBUG: Sending request to:", BACKEND_API_URL);
             const uploadResult = await FileSystem.uploadAsync(BACKEND_API_URL, imageUri, {
                 httpMethod: 'POST',
                 uploadType: FileSystem.FileSystemUploadType.MULTIPART,
                 fieldName: 'file',
             });
 
-            console.log("Render Backend Response:", uploadResult.status);
+            console.log("DEBUG: Response Status:", uploadResult.status);
+            console.log("DEBUG: Response Body:", uploadResult.body);
 
             if (uploadResult.status === 200) {
                 const data = JSON.parse(uploadResult.body);
@@ -59,9 +61,12 @@ export const analyzeImage = async (imageUri) => {
                     isFallback: false,
                     isMock: false
                 }
+            } else {
+                console.log("DEBUG: Server returned non-200 status");
             }
         } catch (e) {
-            console.log("Render Backend failed (likely waking up or offline):", e.message);
+            console.log("DEBUG: Upload Failed Error:", e);
+            console.log("DEBUG: Error Message:", e.message);
         }
 
         // 2. Fallback to Cloud APIs if Render fails

test_image.txt

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:86348476c0970b6b41a68b640229a134bb4d7ab6a229e9980245aeb936b02774
+size 26