# If you used Create React App
npm run build

# If you used Vite
npm run build
import React, { useState, useEffect, useRef } from "react";
import { HashRouter, Routes, Route, Link, useLocation, Outlet, useNavigate } from "react-router-dom";
import { motion, AnimatePresence } from "framer-motion";
import {
  Camera, Leaf, Utensils, Home as HomeIcon, Scan as ScanIcon,
  Flower2, User, MessageSquare, X, Send, Mic, ChefHat, Play,
  Clock, Volume2, VolumeX, Sun, Info, Plus, Calendar, Flame,
  Droplets, Wind, Settings, Bell, Heart, LogOut, ChevronRight,
  Upload, Check, Loader2, Zap
} from "lucide-react";
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
import * as mobilenet from '@tensorflow-models/mobilenet';
import '@tensorflow/tfjs';

// ==========================================
// UTILS
// ==========================================
function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

// ==========================================
// AI & DATA SERVICES
// ==========================================

// AI Model Service
let model: mobilenet.MobileNet | null = null;

async function loadModel() {
  if (!model) {
    console.log('Loading MobileNet model...');
    model = await mobilenet.load();
    console.log('Model loaded.');
  }
  return model;
}

async function classifyImage(
  imageElement: HTMLImageElement | HTMLVideoElement | HTMLCanvasElement
): Promise<{ className: string; probability: number }[]> {
  const net = await loadModel();
  const predictions = await net.classify(imageElement);
  return predictions;
}

// Data Types
export type ScanType = 'food' | 'plant' | 'unknown';

export interface ScanResult {
  id: string;
  type: ScanType;
  name: string;
  confidence: number;
  safety: 'safe' | 'caution' | 'unsafe';
  image: string;
  description: string;
  details: Record<string, any>;
  timestamp: number;
}

// Mock Data
export const MEAL_SUGGESTIONS = [
  {
    id: 'm1',
    type: 'Breakfast',
    name: 'Green Smoothie Bowl',
    calories: 320,
    image: 'https://images.unsplash.com/photo-1610970881699-44a5587cabec?auto=format&fit=crop&q=80&w=1200'
  },
  {
    id: 'm2',
    type: 'Lunch',
    name: 'Quinoa Salad',
    calories: 450,
    image: 'https://images.unsplash.com/photo-1505253716362-afaea1d3d1af?auto=format&fit=crop&q=80&w=1200'
  },
  {
    id: 'm3',
    type: 'Dinner',
    name: 'Grilled Salmon & Asparagus',
    calories: 580,
    image: 'https://images.unsplash.com/photo-1467003909585-2f8a7270028d?auto=format&fit=crop&q=80&w=1200'
  }
];

export const RECIPES = [
  {
    id: 'r1',
    name: 'Avocado Toast with Egg',
    image: 'https://images.unsplash.com/photo-1525351484163-7529414395d8?auto=format&fit=crop&q=80&w=1200',
    time: '10 min',
    calories: 350,
    ingredients: ['2 slices whole grain bread', '1 ripe avocado', '2 eggs', 'Salt & Pepper', 'Chili flakes'],
    steps: [
      'Toast the bread until golden brown.',
      'Mash the avocado with salt and pepper.',
      'Fry or poach the eggs to your liking.',
      'Spread avocado on toast and top with egg.',
      'Sprinkle with chili flakes and serve.'
    ]
  },
  {
    id: 'r2',
    name: 'Mediterranean Salad',
    image: 'https://images.unsplash.com/photo-1540189549336-e6e99c3679fe?auto=format&fit=crop&q=80&w=1200',
    time: '15 min',
    calories: 280,
    ingredients: ['Cucumber', 'Tomatoes', 'Red Onion', 'Feta Cheese', 'Olives', 'Olive Oil', 'Lemon Juice'],
    steps: [
      'Chop cucumber, tomatoes, and onion.',
      'Combine in a large bowl.',
      'Add olives and crumbled feta cheese.',
      'Drizzle with olive oil and lemon juice.',
      'Toss gently and serve fresh.'
    ]
  },
  {
    id: 'r3',
    name: 'Grilled Chicken & Veggies',
    image: 'https://images.unsplash.com/photo-1532550907401-a500c9a57435?auto=format&fit=crop&q=80&w=1200',
    time: '30 min',
    calories: 450,
    ingredients: ['Chicken Breast', 'Bell Peppers', 'Zucchini', 'Olive Oil', 'Herbs'],
    steps: [
      'Marinate chicken with herbs and olive oil.',
      'Chop vegetables into chunks.',
      'Grill chicken for 6-8 mins per side.',
      'Grill vegetables until tender.',
      'Serve hot with a side of rice or salad.'
    ]
  }
];

export const RECOGNITION_DATABASE = [
  // Plants
  {
    name: 'Snake Plant',
    keywords: ['snake', 'plant', 'sansevieria', 'dracaena'],
    type: 'plant',
    safety: 'caution',
    image: 'https://images.unsplash.com/photo-1593482886870-930272168db4?auto=format&fit=crop&q=80&w=1200',
    description: 'A hardy indoor plant with upright, sword-like leaves.',
    details: { scientificName: 'Sansevieria trifasciata', care: { water: 'Low', light: 'Low to Bright', toxicity: 'Toxic to pets' } }
  },
  {
    name: 'Monstera',
    keywords: ['monstera', 'leaf', 'cheese', 'pot', 'flowerpot'],
    type: 'plant',
    safety: 'caution',
    image: 'https://images.unsplash.com/photo-1614594975525-e45190c55d0b?auto=format&fit=crop&q=80&w=1200',
    description: 'Tropical plant with distinctive holey leaves.',
    details: { scientificName: 'Monstera deliciosa', care: { water: 'Medium', light: 'Indirect', toxicity: 'Toxic to pets' } }
  },
  {
    name: 'Basil',
    keywords: ['basil', 'herb', 'green'],
    type: 'plant',
    safety: 'safe',
    image: 'https://images.unsplash.com/photo-1618375531912-867984bdfdfc?auto=format&fit=crop&q=80&w=1200',
    description: 'A fragrant herb often used in cooking.',
    details: { scientificName: 'Ocimum basilicum', care: { water: 'Regular', light: 'Full Sun', toxicity: 'Safe' } }
  },
  {
    name: 'Daisy',
    keywords: ['daisy', 'flower', 'white', 'yellow'],
    type: 'plant',
    safety: 'safe',
    image: 'https://images.unsplash.com/photo-1560717789-0ac7c58ac90a?auto=format&fit=crop&q=80&w=1200',
    description: 'A classic flower with white petals and a yellow center.',
    details: { scientificName: 'Bellis perennis', care: { water: 'Regular', light: 'Full Sun', toxicity: 'Mildly toxic if ingested in large quantities' } }
  },
  {
    name: 'Cactus',
    keywords: ['cactus', 'succulent', 'thorn', 'spine'],
    type: 'plant',
    safety: 'caution',
    image: 'https://images.unsplash.com/photo-1459411552884-841db9b3cc2a?auto=format&fit=crop&q=80&w=1200',
    description: 'A succulent plant with spines, adapted to dry environments.',
    details: { scientificName: 'Cactaceae', care: { water: 'Very Low', light: 'Full Sun', toxicity: 'Physical injury risk' } }
  },
  // Fruits/Veg
  {
    name: 'Apple',
    keywords: ['apple', 'red', 'fruit', 'granny smith', 'delicious'],
    type: 'food',
    safety: 'safe',
    image: 'https://images.unsplash.com/photo-1560806887-1e4cd0b6cbd6?auto=format&fit=crop&q=80&w=1200',
    description: 'A crisp, sweet, red fruit.',
    details: { calories: 95, nutrients: { carbs: '25g', fiber: '4g', protein: '0.5g' } }
  },
  {
    name: 'Tomato',
    keywords: ['tomato', 'vegetable', 'red', 'cherry tomato'],
    type: 'food',
    safety: 'safe',
    image: 'https://images.unsplash.com/photo-1592924357228-91a4daadcfea?auto=format&fit=crop&q=80&w=1200',
    description: 'A juicy red fruit often used as a vegetable.',
    details: { calories: 22, nutrients: { carbs: '4.8g', fiber: '1.5g', protein: '1.1g' } }
  },
  {
    name: 'Grapes',
    keywords: ['grape', 'fruit', 'purple', 'green', 'vine'],
    type: 'food',
    safety: 'safe',
    image: 'https://images.unsplash.com/photo-1537640538965-1756deb9920c?auto=format&fit=crop&q=80&w=1200',
    description: 'Small, sweet fruit that grows in clusters.',
    details: { calories: 69, nutrients: { carbs: '18g', fiber: '0.9g', protein: '0.7g' } }
  },
  {
    name: 'Banana',
    keywords: ['banana', 'yellow', 'fruit', 'plantain'],
    type: 'food',
    safety: 'safe',
    image: 'https://images.unsplash.com/photo-1571771896395-d97159529e38?auto=format&fit=crop&q=80&w=1200',
    description: 'A curved, yellow fruit with a thick skin and soft sweet flesh.',
    details: { calories: 105, nutrients: { carbs: '27g', fiber: '3.1g', protein: '1.3g' } }
  },
  {
    name: 'Orange',
    keywords: ['orange', 'citrus', 'fruit', 'tangerine', 'mandarin'],
    type: 'food',
    safety: 'safe',
    image: 'https://images.unsplash.com/photo-1611080626919-7cf5a9dbab5b?auto=format&fit=crop&q=80&w=1200',
    description: 'A citrus fruit known for its high vitamin C content.',
    details: { calories: 62, nutrients: { carbs: '15g', fiber: '3g', protein: '1.2g' } }
  },
  {
    name: 'Broccoli',
    keywords: ['broccoli', 'vegetable', 'green', 'cauliflower'],
    type: 'food',
    safety: 'safe',
    image: 'https://images.unsplash.com/photo-1584270354949-c26b0d5b4a0c?auto=format&fit=crop&q=80&w=1200',
    description: 'A green vegetable in the cabbage family.',
    details: { calories: 55, nutrients: { carbs: '11g', fiber: '5g', protein: '3.7g' } }
  },
  {
    name: 'Strawberry',
    keywords: ['strawberry', 'berry', 'red', 'fruit'],
    type: 'food',
    safety: 'safe',
    image: 'https://images.unsplash.com/photo-1464965911861-746a04b4bca6?auto=format&fit=crop&q=80&w=1200',
    description: 'A sweet, red heart-shaped fruit.',
    details: { calories: 53, nutrients: { carbs: '12g', fiber: '3g', protein: '1g' } }
  },
  {
    name: 'Lemon',
    keywords: ['lemon', 'citrus', 'yellow'],
    type: 'food',
    safety: 'safe',
    image: 'https://images.unsplash.com/photo-1590502593747-df8f31bdce85?auto=format&fit=crop&q=80&w=1200',
    description: 'A sour yellow citrus fruit used for flavoring.',
    details: { calories: 29, nutrients: { carbs: '9g', fiber: '2.8g', protein: '1.1g' } }
  },
  {
    name: 'Pineapple',
    keywords: ['pineapple', 'ananas'],
    type: 'food',
    safety: 'safe',
    image: 'https://images.unsplash.com/photo-1550258987-190a2d41a8ba?auto=format&fit=crop&q=80&w=1200',
    description: 'A tropical fruit with spiky skin and sweet yellow flesh.',
    details: { calories: 50, nutrients: { carbs: '13g', fiber: '1.4g', protein: '0.5g' } }
  },
  {
    name: 'Pepper',
    keywords: ['bell pepper', 'pepper', 'capsicum', 'green pepper', 'red pepper'],
    type: 'food',
    safety: 'safe',
    image: 'https://images.unsplash.com/photo-1563565375-f3fdf5ea2e6d?auto=format&fit=crop&q=80&w=1200',
    description: 'A crisp vegetable available in various colors.',
    details: { calories: 20, nutrients: { carbs: '4.6g', fiber: '1.7g', protein: '0.9g' } }
  },
  {
    name: 'Cucumber',
    keywords: ['cucumber', 'pickle', 'zucchini'],
    type: 'food',
    safety: 'safe',
    image: 'https://images.unsplash.com/photo-1449300079323-02e209d9d3a6?auto=format&fit=crop&q=80&w=1200',
    description: 'A long green vegetable with high water content.',
    details: { calories: 15, nutrients: { carbs: '3.6g', fiber: '0.5g', protein: '0.7g' } }
  },
  {
    name: 'Corn',
    keywords: ['corn', 'maize', 'cob'],
    type: 'food',
    safety: 'safe',
    image: 'https://images.unsplash.com/photo-1551754655-cd27e38d2076?auto=format&fit=crop&q=80&w=1200',
    description: 'A cereal grain often eaten as a vegetable.',
    details: { calories: 86, nutrients: { carbs: '19g', fiber: '2.7g', protein: '3.2g' } }
  }
];

async function matchImageToDatabase(predictions: { className: string; probability: number }[]): Promise<ScanResult | null> {
  let bestMatch = null;
  let highestConfidence = 0;

  for (const prediction of predictions) {
    const pName = prediction.className.toLowerCase();
    const match = RECOGNITION_DATABASE.find(item => 
      item.keywords.some(keyword => pName.includes(keyword))
    );

    if (match && prediction.probability > highestConfidence) {
      bestMatch = match;
      highestConfidence = prediction.probability;
    }
  }

  if (bestMatch) {
    return {
      id: Math.random().toString(36).substr(2, 9),
      type: bestMatch.type as ScanType,
      name: bestMatch.name,
      confidence: highestConfidence,
      safety: bestMatch.safety as any,
      image: bestMatch.image, 
      description: bestMatch.description,
      details: bestMatch.details,
      timestamp: Date.now()
    };
  }

  return null;
}

// ==========================================
// COMPONENTS
// ==========================================

const Splash = ({ onComplete }: { onComplete: () => void }) => {
  const [step, setStep] = useState(0);

  useEffect(() => {
    const times = [0, 600, 1200, 1800, 2500];
    const t1 = setTimeout(() => setStep(1), times[1]);
    const t2 = setTimeout(() => setStep(2), times[2]);
    const t3 = setTimeout(() => setStep(3), times[3]);
    const t4 = setTimeout(() => onComplete(), times[4]);

    return () => {
      clearTimeout(t1);
      clearTimeout(t2);
      clearTimeout(t3);
      clearTimeout(t4);
    };
  }, [onComplete]);

  return (
    <div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-white">
      <div className="relative flex h-32 w-32 items-center justify-center">
        <AnimatePresence mode="wait">
          {step === 0 && (
            <motion.div
              key="camera"
              initial={{ scale: 0, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.5, opacity: 0 }}
              transition={{ duration: 0.5 }}
              className="absolute text-emerald-600"
            >
              <Camera size={80} strokeWidth={1.5} />
            </motion.div>
          )}
          {step === 1 && (
            <motion.div
              key="leaf"
              initial={{ scale: 0.5, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.5, opacity: 0 }}
              transition={{ duration: 0.5 }}
              className="absolute text-emerald-600"
            >
              <Leaf size={80} strokeWidth={1.5} />
            </motion.div>
          )}
          {step === 2 && (
            <motion.div
              key="plate"
              initial={{ scale: 0.5, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.5, opacity: 0 }}
              transition={{ duration: 0.5 }}
              className="absolute text-orange-500"
            >
              <Utensils size={80} strokeWidth={1.5} />
            </motion.div>
          )}
          {step === 3 && (
            <motion.div
              key="logo"
              initial={{ scale: 0.5, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              transition={{ duration: 0.5 }}
              className="absolute flex flex-col items-center justify-center"
            >
              <div className="relative">
                <Camera size={64} className="text-emerald-700" strokeWidth={2} />
                <Leaf size={24} className="absolute -right-2 -top-2 text-emerald-500" fill="currentColor" />
              </div>
            </motion.div>
          )}
        </AnimatePresence>
        
        <motion.div
          initial={{ top: "0%", opacity: 0 }}
          animate={{ top: "100%", opacity: [0, 1, 0] }}
          transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
          className="absolute h-1 w-full bg-emerald-400/50 blur-sm"
        />
      </div>

      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: step >= 3 ? 1 : 0, y: step >= 3 ? 0 : 20 }}
        transition={{ duration: 0.5 }}
        className="mt-8 text-center"
      >
        <h1 className="text-3xl font-bold tracking-tight text-emerald-800">GREENLENS</h1>
        <p className="mt-2 text-sm font-medium text-emerald-600">See Nature Clearly</p>
      </motion.div>
    </div>
  );
};

interface Message {
  id: string;
  text: string;
  sender: 'user' | 'ai';
  type?: 'text' | 'recipe-card' | 'cooking-step';
  data?: any;
}

const AIChat = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [messages, setMessages] = useState<Message[]>([
    { id: '1', text: "Hi! I'm GreenLens AI. Ask me about plants, food, or recipes!", sender: 'ai' }
  ]);
  const [inputText, setInputText] = useState("");
  const [isListening, setIsListening] = useState(false);
  const [cookingMode, setCookingMode] = useState<{ recipe: any, step: number } | null>(null);
  const [isMuted, setIsMuted] = useState(false);
  const [timer, setTimer] = useState<number | null>(null);
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const recognitionRef = useRef<any>(null);

  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages, isOpen]);

  // Timer effect
  useEffect(() => {
    let interval: NodeJS.Timeout | undefined;
    if (timer !== null && timer > 0) {
      interval = setInterval(() => setTimer(t => (t ? t - 1 : 0)), 1000);
    } else if (timer === 0) {
      speak("Timer finished!");
      setTimer(null);
    }
    return () => {
      if (interval) clearInterval(interval);
    };
  }, [timer]); // eslint-disable-line react-hooks/exhaustive-deps
  // speak omitted intentionally to avoid re-triggering on mute changes; but if mute changes, timer finished message may be spoken incorrectly.
  // For production, consider using a ref for isMuted.

  const speak = (text: string) => {
    if (isMuted) return;
    if ('speechSynthesis' in window) {
      window.speechSynthesis.cancel();
      const utterance = new SpeechSynthesisUtterance(text);
      utterance.rate = 1;
      utterance.pitch = 1;
      window.speechSynthesis.speak(utterance);
    }
  };

  const handleSend = () => {
    if (!inputText.trim()) return;

    const userMsg: Message = { id: Date.now().toString(), text: inputText, sender: 'user' };
    setMessages(prev => [...prev, userMsg]);
    setInputText("");
    
    setTimeout(() => {
      let aiResponse: Message = { 
        id: (Date.now() + 1).toString(), 
        text: "I'm not sure about that yet.", 
        sender: 'ai' 
      };

      const lowerInput = userMsg.text.toLowerCase();

      if (lowerInput.includes("recipe") || lowerInput.includes("cook") || lowerInput.includes("dinner") || lowerInput.includes("hungry")) {
        const matchedRecipe = RECIPES.find(r => lowerInput.includes(r.name.toLowerCase().split(' ')[0]));
        const recipeToUse = matchedRecipe || RECIPES[Math.floor(Math.random() * RECIPES.length)];
        
        aiResponse = {
          id: (Date.now() + 1).toString(),
          text: `Here's a delicious idea: ${recipeToUse.name}. It takes about ${recipeToUse.time}. Would you like to start cooking?`,
          sender: 'ai',
          type: 'recipe-card',
          data: recipeToUse
        };
      } 
      else {
        const dbMatch = RECOGNITION_DATABASE.find(item => 
          item.keywords.some(k => lowerInput.includes(k)) || lowerInput.includes(item.name.toLowerCase())
        );

        if (dbMatch) {
           if (dbMatch.type === 'plant') {
             aiResponse.text = `${dbMatch.name} is a ${dbMatch.description.toLowerCase()} Care tip: ${dbMatch.details.care?.light} and water ${dbMatch.details.care?.water.toLowerCase()}.`;
           } else {
             aiResponse.text = `${dbMatch.name} contains about ${dbMatch.details.calories} calories. It's ${dbMatch.description.toLowerCase()}`;
           }
        } else if (lowerInput.includes("plant") || lowerInput.includes("water")) {
          aiResponse.text = "For most indoor plants, check the top inch of soil. If it's dry, it's time to water! Ensure good drainage to prevent root rot.";
        } else if (lowerInput.includes("hello") || lowerInput.includes("hi")) {
          aiResponse.text = "Hello there! Ready to explore nature or cook something delicious?";
        } else if (lowerInput.includes("thank")) {
          aiResponse.text = "You're welcome! Happy to help.";
        } else {
          aiResponse.text = "I can help you identify plants, find recipes, or check nutrition facts. Try asking 'How many calories in an apple?' or 'Suggest a dinner recipe'.";
        }
      }

      setMessages(prev => [...prev, aiResponse]);
      speak(aiResponse.text);
    }, 800);
  };

  const toggleListening = () => {
    if (isListening) {
      if (recognitionRef.current) recognitionRef.current.stop();
      setIsListening(false);
      return;
    }

    const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
    
    if (SpeechRecognition) {
      const recognition = new SpeechRecognition();
      recognition.continuous = false;
      recognition.interimResults = false;
      recognition.lang = 'en-US';

      recognition.onstart = () => setIsListening(true);
      recognition.onend = () => setIsListening(false);
      recognition.onresult = (event: any) => {
        const transcript = event.results[0][0].transcript;
        setInputText(transcript);
      };

      recognitionRef.current = recognition;
      recognition.start();
    } else {
      alert("Voice input is not supported in this browser. Please use Chrome or Safari.");
    }
  };

  const parseTimeFromStep = (step: string) => {
    const match = step.match(/(\d+)\s*(min|minute|sec|second)/i);
    if (match) {
      const val = parseInt(match[1]);
      const unit = match[2].toLowerCase();
      return unit.startsWith('min') ? val * 60 : val;
    }
    return null;
  };

  return (
    <>
      <motion.button
        initial={{ scale: 0 }}
        animate={{ scale: 1 }}
        whileTap={{ scale: 0.9 }}
        onClick={() => setIsOpen(true)}
        className="fixed bottom-20 right-4 z-40 flex h-14 w-14 items-center justify-center rounded-full bg-emerald-600 text-white shadow-lg shadow-emerald-200"
      >
        <MessageSquare size={24} fill="currentColor" />
      </motion.button>

      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ y: "100%" }}
            animate={{ y: 0 }}
            exit={{ y: "100%" }}
            transition={{ type: "spring", damping: 25, stiffness: 200 }}
            className="fixed inset-0 z-50 flex flex-col bg-white"
          >
            <div className="flex items-center justify-between border-b border-slate-100 bg-white p-4 shadow-sm">
              <div className="flex items-center space-x-3">
                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-100 text-emerald-600">
                  <ChefHat size={20} />
                </div>
                <div>
                  <h2 className="font-bold text-slate-800">GreenLens Assistant</h2>
                  <p className="text-xs text-slate-500">Online • AI Powered</p>
                </div>
              </div>
              <div className="flex items-center space-x-2">
                 <button onClick={() => setIsMuted(!isMuted)} className="rounded-full bg-slate-100 p-2 text-slate-500 hover:bg-slate-200">
                    {isMuted ? <VolumeX size={20} /> : <Volume2 size={20} />}
                 </button>
                 <button 
                    onClick={() => setIsOpen(false)}
                    className="rounded-full bg-slate-100 p-2 text-slate-500 hover:bg-slate-200"
                  >
                    <X size={20} />
                  </button>
              </div>
            </div>

            <div className="flex-1 overflow-y-auto bg-slate-50 p-4 space-y-4">
              {messages.map((msg) => (
                <motion.div
                  key={msg.id}
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  className={`flex ${msg.sender === 'user' ? 'justify-end' : 'justify-start'}`}
                >
                  <div className={`max-w-[80%] rounded-2xl p-4 ${
                    msg.sender === 'user' 
                      ? 'bg-emerald-600 text-white rounded-tr-none' 
                      : 'bg-white text-slate-800 shadow-sm border border-slate-100 rounded-tl-none'
                  }`}>
                    <p className="text-sm leading-relaxed">{msg.text}</p>
                    
                    {msg.type === 'recipe-card' && msg.data && (
                      <div className="mt-3 overflow-hidden rounded-xl bg-slate-50 border border-slate-100">
                        <img src={msg.data.image} alt={msg.data.name} className="h-32 w-full object-cover" />
                        <div className="p-3">
                          <h3 className="font-bold text-slate-900">{msg.data.name}</h3>
                          <div className="mt-1 flex items-center justify-between text-xs text-slate-500">
                            <span>{msg.data.calories} kcal</span>
                            <span>{msg.data.time}</span>
                          </div>
                          <button 
                            className="mt-3 flex w-full items-center justify-center space-x-2 rounded-lg bg-emerald-600 py-2 text-xs font-bold text-white"
                            onClick={() => {
                              setCookingMode({ recipe: msg.data, step: 0 });
                              speak(`Let's cook ${msg.data.name}. Step 1: ${msg.data.steps[0]}`);
                            }}
                          >
                            <Play size={12} fill="currentColor" />
                            <span>Start Cooking</span>
                          </button>
                        </div>
                      </div>
                    )}
                  </div>
                </motion.div>
              ))}
              
              {cookingMode && (
                <motion.div 
                  initial={{ opacity: 0, y: 50 }}
                  animate={{ opacity: 1, y: 0 }}
                  className="fixed inset-0 z-50 flex flex-col bg-slate-900 text-white"
                >
                  <div className="flex items-center justify-between p-6">
                    <h2 className="text-xl font-bold">{cookingMode.recipe.name}</h2>
                    <div className="flex space-x-4">
                        <button onClick={() => setIsMuted(!isMuted)} className="text-white/80 hover:text-white">
                            {isMuted ? <VolumeX size={24} /> : <Volume2 size={24} />}
                        </button>
                        <button onClick={() => setCookingMode(null)} className="rounded-full bg-white/20 p-2 hover:bg-white/30">
                            <X size={24} />
                        </button>
                    </div>
                  </div>
                  
                  <div className="flex flex-1 flex-col items-center justify-center px-8 text-center">
                    <span className="mb-4 text-sm font-bold uppercase tracking-wider text-emerald-400">
                      Step {cookingMode.step + 1} of {cookingMode.recipe.steps.length}
                    </span>
                    <h3 className="text-2xl font-medium leading-relaxed">
                      {cookingMode.recipe.steps[cookingMode.step]}
                    </h3>

                    {(() => {
                        const time = parseTimeFromStep(cookingMode.recipe.steps[cookingMode.step]);
                        if (time && timer === null) {
                            return (
                                <button 
                                    onClick={() => setTimer(time)}
                                    className="mt-8 flex items-center space-x-2 rounded-full bg-white/10 px-6 py-3 font-bold text-white hover:bg-white/20"
                                >
                                    <Clock size={20} />
                                    <span>Start {time < 60 ? `${time}s` : `${time/60}m`} Timer</span>
                                </button>
                            );
                        } else if (timer !== null) {
                            return (
                                <div className="mt-8 flex flex-col items-center">
                                    <div className="text-4xl font-mono font-bold text-emerald-400">
                                        {Math.floor(timer / 60)}:{(timer % 60).toString().padStart(2, '0')}
                                    </div>
                                    <button 
                                        onClick={() => setTimer(null)}
                                        className="mt-2 text-xs text-white/60 hover:text-white"
                                    >
                                        Cancel Timer
                                    </button>
                                </div>
                            );
                        }
                        return null;
                    })()}
                  </div>

                  <div className="bg-slate-800 p-6 pb-12">
                    <div className="flex justify-between space-x-4">
                      <button 
                        disabled={cookingMode.step === 0}
                        onClick={() => {
                          const prev = cookingMode.step - 1;
                          setCookingMode({ ...cookingMode, step: prev });
                          setTimer(null);
                          speak(cookingMode.recipe.steps[prev]);
                        }}
                        className="flex-1 rounded-xl bg-slate-700 py-4 font-bold disabled:opacity-50"
                      >
                        Previous
                      </button>
                      
                      {cookingMode.step < cookingMode.recipe.steps.length - 1 ? (
                        <button 
                          onClick={() => {
                            const next = cookingMode.step + 1;
                            setCookingMode({ ...cookingMode, step: next });
                            setTimer(null);
                            speak(cookingMode.recipe.steps[next]);
                          }}
                          className="flex-1 rounded-xl bg-emerald-600 py-4 font-bold"
                        >
                          Next Step
                        </button>
                      ) : (
                        <button 
                          onClick={() => {
                            setCookingMode(null);
                            speak("Great job! Enjoy your meal.");
                          }}
                          className="flex-1 rounded-xl bg-emerald-600 py-4 font-bold"
                        >
                          Finish Cooking
                        </button>
                      )}
                    </div>
                  </div>
                </motion.div>
              )}

              <div ref={messagesEndRef} />
            </div>

            <div className="border-t border-slate-100 bg-white p-4 pb-8">
              <div className="flex items-center space-x-2 rounded-full bg-slate-100 p-1 pl-4">
                <input
                  type="text"
                  value={inputText}
                  onChange={(e) => setInputText(e.target.value)}
                  onKeyDown={(e) => e.key === 'Enter' && handleSend()}
                  placeholder="Ask anything..."
                  className="flex-1 bg-transparent text-sm outline-none placeholder:text-slate-400"
                />
                
                <button 
                  onClick={toggleListening}
                  className={`flex h-10 w-10 items-center justify-center rounded-full transition-colors ${
                    isListening ? 'bg-red-500 text-white animate-pulse' : 'text-slate-400 hover:text-slate-600'
                  }`}
                >
                  <Mic size={20} />
                </button>

                <button 
                  onClick={handleSend}
                  disabled={!inputText.trim()}
                  className="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-600 text-white disabled:opacity-50"
                >
                  <Send size={18} className={inputText.trim() ? "translate-x-0.5" : ""} />
                </button>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
};

const Layout = () => {
  const location = useLocation();

  const navItems = [
    { name: "Home", icon: HomeIcon, path: "/" },
    { name: "Scan", icon: ScanIcon, path: "/scan" },
    { name: "Meals", icon: Utensils, path: "/meals" },
    { name: "Plants", icon: Flower2, path: "/plants" },
    { name: "Profile", icon: User, path: "/profile" },
  ];

  return (
    <div className="flex h-screen w-full flex-col bg-slate-50 text-slate-900 overflow-hidden">
      <main className="flex-1 overflow-y-auto pb-20 scrollbar-hide">
        <Outlet />
      </main>
      
      <AIChat />

      <nav className="fixed bottom-0 z-40 w-full border-t border-slate-200 bg-white/90 backdrop-blur-lg pb-safe">
        <div className="flex h-16 items-center justify-around px-2">
          {navItems.map((item) => {
            const isActive = location.pathname === item.path;
            const Icon = item.icon;
            
            return (
              <Link
                key={item.name}
                to={item.path}
                className={cn(
                  "flex flex-col items-center justify-center p-2 transition-colors duration-200",
                  isActive ? "text-emerald-600" : "text-slate-400 hover:text-slate-600"
                )}
              >
                <div className={cn(
                  "relative flex items-center justify-center rounded-xl p-1 transition-all",
                  isActive && "bg-emerald-50"
                )}>
                  <Icon 
                    size={24} 
                    strokeWidth={isActive ? 2.5 : 2} 
                    className={cn("transition-transform", isActive && "scale-110")}
                  />
                  {isActive && (
                    <span className="absolute -bottom-1 h-1 w-1 rounded-full bg-emerald-600" />
                  )}
                </div>
                <span className="mt-1 text-[10px] font-medium">{item.name}</span>
              </Link>
            );
          })}
        </div>
      </nav>
    </div>
  );
};

// ==========================================
// PAGES
// ==========================================

const Home = () => {
  const navigate = useNavigate();

  return (
    <div className="flex min-h-screen flex-col bg-slate-50 p-6 pb-24">
      <header className="mb-8 flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight text-emerald-900">
            Hello, Explorer
          </h1>
          <p className="text-sm text-slate-500">Ready to discover nature?</p>
        </div>
        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-orange-100 text-orange-600 shadow-sm">
          <Sun size={20} />
        </div>
      <link rel="me" href="https://www.blogger.com/profile/14750773786722395951" />
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>
</header><body>

      <motion.div
        whileTap={{ scale: 0.98 }}
        onClick={() => navigate("/scan")}
        className="relative mb-8 flex h-40 w-full cursor-pointer flex-col items-center justify-center overflow-hidden rounded-3xl bg-gradient-to-br from-emerald-600 to-teal-700 shadow-xl shadow-emerald-200"
      >
        <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10" />
        <div className="z-10 flex flex-col items-center space-y-3 text-white">
          <div className="flex h-16 w-16 items-center justify-center rounded-full bg-white/20 backdrop-blur-md">
            <Camera size={32} />
          </div>
          <span className="text-lg font-semibold tracking-wide">Scan Anything</span>
        </div>
      </motion.div>

      <div className="mb-8 grid grid-cols-4 gap-4">
        {[
          { label: "Food", icon: Utensils, color: "bg-orange-100 text-orange-600", path: "/scan?mode=food" },
          { label: "Plant", icon: Leaf, color: "bg-emerald-100 text-emerald-600", path: "/scan?mode=plant" },
          { label: "Upload", icon: Plus, color: "bg-blue-100 text-blue-600", path: "/scan?mode=upload" },
          { label: "Plan", icon: Calendar, color: "bg-purple-100 text-purple-600", path: "/meals" },
        ].map((item) => (
          <motion.button
            key={item.label}
            whileTap={{ scale: 0.95 }}
            onClick={() => navigate(item.path)}
            className="flex flex-col items-center space-y-2"
          >
            <div className={`flex h-14 w-14 items-center justify-center rounded-2xl ${item.color} shadow-sm`}>
              <item.icon size={24} />
            </div>
            <span className="text-xs font-medium text-slate-600">{item.label}</span>
          </motion.button>
        ))}
      </div>

      <div className="mb-8 rounded-2xl bg-white p-5 shadow-sm border border-slate-100">
        <div className="mb-3 flex items-center space-x-2 text-teal-600">
          <Info size={18} />
          <h3 className="font-semibold">Tip of the Day</h3>
        </div>
        <p className="text-sm leading-relaxed text-slate-600">
          "Did you know? Adding lemon to your spinach helps your body absorb more iron due to the Vitamin C boost!"
        </p>
      </div>

      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <h2 className="text-lg font-bold text-slate-800">Today's Suggestions</h2>
          <button onClick={() => navigate("/meals")} className="text-xs font-medium text-emerald-600 hover:underline">
            View All
          </button>
        </div>
        
        <div className="flex space-x-4 overflow-x-auto pb-4 scrollbar-hide">
          {MEAL_SUGGESTIONS.map((meal) => (
            <motion.div
              key={meal.id}
              whileTap={{ scale: 0.98 }}
              className="min-w-[200px] flex-shrink-0 overflow-hidden rounded-2xl bg-white shadow-sm border border-slate-100"
            >
              <div className="h-28 w-full bg-slate-200">
                <img src={meal.image} alt={meal.name} className="h-full w-full object-cover" />
              </div>
              <div className="p-3">
                <span className="mb-1 block text-xs font-bold uppercase tracking-wider text-orange-500">
                  {meal.type}
                </span>
                <h4 className="font-medium text-slate-800 line-clamp-1">{meal.name}</h4>
                <p className="mt-1 text-xs text-slate-500">{meal.calories} kcal</p>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );
};

const Scan = () => {
  const navigate = useNavigate();
  const videoRef = useRef<HTMLVideoElement>(null);
  const [image, setImage] = useState<string | null>(null);
  const [isAnalyzing, setIsAnalyzing] = useState(false);
  const [result, setResult] = useState<ScanResult | null>(null);
  const [cameraActive, setCameraActive] = useState(true);

  useEffect(() => {
    if (cameraActive && !image) {
      startCamera();
    } else {
      stopCamera();
    }
    return () => stopCamera();
  }, [cameraActive, image]);

  const startCamera = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ 
        video: { facingMode: "environment" } 
      });
      if (videoRef.current) {
        videoRef.current.srcObject = stream;
      }
    } catch (err) {
      console.error("Camera error:", err);
      setCameraActive(false);
    }
  };

  const stopCamera = () => {
    if (videoRef.current && videoRef.current.srcObject) {
      const stream = videoRef.current.srcObject as MediaStream;
      stream.getTracks().forEach(track => track.stop());
      videoRef.current.srcObject = null;
    }
  };

  const capturePhoto = () => {
    if (videoRef.current) {
      const canvas = document.createElement("canvas");
      canvas.width = videoRef.current.videoWidth;
      canvas.height = videoRef.current.videoHeight;
      canvas.getContext("2d")?.drawImage(videoRef.current, 0, 0);
      const dataUrl = canvas.toDataURL("image/jpeg");
      
      setImage(dataUrl);
      handleAnalyze(videoRef.current);
      setCameraActive(false);
    }
  };

  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      const url = URL.createObjectURL(file);
      setImage(url);
      setCameraActive(false);
      
      const img = new Image();
      img.crossOrigin = "anonymous";
      img.src = url;
      img.onload = () => {
        handleAnalyze(img);
      };
    }
  };

  const handleAnalyze = async (source: HTMLImageElement | HTMLVideoElement) => {
    setIsAnalyzing(true);
    try {
      const predictions = await classifyImage(source);
      console.log("AI Predictions:", predictions);

      let scanResult = await matchImageToDatabase(predictions);

      if (!scanResult && predictions.length > 0) {
        const top = predictions[0];
        scanResult = {
          id: Math.random().toString(36).substr(2, 9),
          type: 'unknown',
          name: top.className.split(',')[0],
          confidence: top.probability,
          safety: 'caution',
          image: image || '', 
          description: `Identified as ${top.className}. Not found in our curated database.`,
          details: { rawPredictions: predictions },
          timestamp: Date.now()
        };
      } else if (!scanResult) {
         throw new Error("Could not identify object");
      }
      
      setResult(scanResult);
    } catch (error) {
      console.error("Analysis failed:", error);
      setResult({
        id: "err",
        type: 'unknown',
        name: "Unknown Object",
        confidence: 0,
        safety: 'caution',
        image: image || '',
        description: "We couldn't identify this object clearly. Please try again.",
        details: {},
        timestamp: Date.now()
      });
    } finally {
      setIsAnalyzing(false);
    }
  };

  const reset = () => {
    setImage(null);
    setResult(null);
    setCameraActive(true);
  };

  if (result) {
    return (
      <div className="flex h-full flex-col overflow-y-auto bg-slate-50 p-6 pb-24">
        <button onClick={reset} className="absolute left-4 top-4 z-10 rounded-full bg-white/80 p-2 backdrop-blur-md shadow-sm">
          <X size={20} />
        </button>
        
        <div className="relative mb-6 h-64 w-full overflow-hidden rounded-3xl shadow-lg">
          <img src={image!} alt="Scanned" className="h-full w-full object-cover" />
          <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-4 text-white">
            <h2 className="text-2xl font-bold capitalize">{result.name}</h2>
            <div className="flex items-center space-x-2">
              <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
                result.safety === 'safe' ? 'bg-green-500/20 text-green-100' : 
                result.safety === 'caution' ? 'bg-yellow-500/20 text-yellow-100' : 
                'bg-red-500/20 text-red-100'
              }`}>
                {result.safety.toUpperCase()}
              </span>
              <span className="text-xs text-slate-300">{(result.confidence * 100).toFixed(0)}% Confidence</span>
            </div>
          </div>
        </div>

        <div className="space-y-6">
          <section className="rounded-2xl bg-white p-5 shadow-sm">
            <h3 className="mb-2 text-lg font-semibold text-slate-800">Description</h3>
            <p className="text-slate-600 text-sm leading-relaxed">{result.description}</p>
          </section>

          {result.type === 'food' && (
            <section className="rounded-2xl bg-white p-5 shadow-sm">
              <h3 className="mb-4 text-lg font-semibold text-slate-800">Nutrition Facts</h3>
              <div className="grid grid-cols-3 gap-4 text-center">
                <div className="rounded-xl bg-orange-50 p-3">
                  <span className="block text-xl font-bold text-orange-600">{result.details.calories || '?'}</span>
                  <span className="text-xs text-orange-400">kcal</span>
                </div>
                <div className="rounded-xl bg-blue-50 p-3">
                  <span className="block text-xl font-bold text-blue-600">{result.details.nutrients?.protein || '?'}</span>
                  <span className="text-xs text-blue-400">Protein</span>
                </div>
                <div className="rounded-xl bg-green-50 p-3">
                  <span className="block text-xl font-bold text-green-600">{result.details.nutrients?.carbs || '?'}</span>
                  <span className="text-xs text-green-400">Carbs</span>
                </div>
              </div>
            </section>
          )}

          {result.type === 'plant' && (
            <section className="rounded-2xl bg-white p-5 shadow-sm">
              <h3 className="mb-4 text-lg font-semibold text-slate-800">Care Guide</h3>
              <div className="space-y-4">
                <div className="flex items-start space-x-3">
                  <div className="rounded-full bg-blue-100 p-2 text-blue-600"><Zap size={16} /></div>
                  <div>
                    <span className="block text-sm font-medium text-slate-900">Light</span>
                    <span className="text-xs text-slate-500">{result.details.care?.light || 'Moderate'}</span>
                  </div>
                </div>
                <div className="flex items-start space-x-3">
                  <div className="rounded-full bg-cyan-100 p-2 text-cyan-600"><Check size={16} /></div>
                  <div>
                    <span className="block text-sm font-medium text-slate-900">Water</span>
                    <span className="text-xs text-slate-500">{result.details.care?.water || 'Regularly'}</span>
                  </div>
                </div>
                {result.details.care?.toxicity && (
                  <div className="mt-2 rounded-lg bg-red-50 p-3 text-xs text-red-600 border border-red-100">
                    <span className="font-bold">Warning: </span>{result.details.care.toxicity}
                  </div>
                )}
              </div>
            </section>
          )}
          
          {result.type === 'unknown' && result.details.rawPredictions && (
             <section className="rounded-2xl bg-white p-5 shadow-sm">
               <h3 className="mb-2 text-lg font-semibold text-slate-800">AI Results</h3>
               <ul className="list-disc pl-5 text-sm text-slate-600">
                 {result.details.rawPredictions.slice(0, 3).map((p: any) => (
                   <li key={p.className}>{p.className} ({(p.probability * 100).toFixed(0)}%)</li>
                 ))}
               </ul>
             </section>
          )}

          <button onClick={() => {}} className="w-full rounded-xl bg-emerald-600 py-4 font-semibold text-white shadow-lg shadow-emerald-200 hover:bg-emerald-700">
            {result.type === 'food' ? 'Add to Meal Plan' : result.type === 'plant' ? 'Save to My Plants' : 'Research More'}
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="relative flex h-full flex-col bg-black">
      <div className="absolute top-0 z-20 flex w-full justify-between p-4">
        <button onClick={() => navigate("/")} className="text-white/80 hover:text-white"><X size={24} /></button>
        <div className="rounded-full bg-black/40 px-3 py-1 text-xs font-medium text-white backdrop-blur-md">
          {isAnalyzing ? 'Analyzing...' : 'Point at Food or Plant'}
        </div>
        <button className="text-white/80 hover:text-white"><Zap size={24} /></button>
      </div>

      <div className="relative flex-1 overflow-hidden rounded-b-3xl bg-slate-900">
        {!image ? (
          <video
            ref={videoRef}
            autoPlay
            playsInline
            muted
            className="h-full w-full object-cover"
          />
        ) : (
          <img src={image} alt="Captured" className="h-full w-full object-cover" />
        )}
        
        {isAnalyzing && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            className="absolute inset-0 flex items-center justify-center bg-black/60 backdrop-blur-sm"
          >
            <div className="flex flex-col items-center space-y-4">
              <Loader2 size={48} className="animate-spin text-emerald-500" />
              <p className="text-sm font-medium text-emerald-100">AI Analyzing...</p>
            </div>
          </motion.div>
        )}
      </div>

      <div className="flex h-32 items-center justify-around bg-black px-8">
        <label className="flex flex-col items-center space-y-1 text-white/60 hover:text-white cursor-pointer">
          <input type="file" accept="image/*" className="hidden" onChange={handleFileUpload} />
          <div className="rounded-full bg-white/10 p-3 backdrop-blur-md">
            <Upload size={24} />
          </div>
          <span className="text-[10px]">Upload</span>
        </label>

        <button
          onClick={capturePhoto}
          className="relative flex h-20 w-20 items-center justify-center rounded-full border-4 border-white bg-white/20 transition-all active:scale-95"
        >
          <div className="h-16 w-16 rounded-full bg-white shadow-lg shadow-white/50" />
        </button>

        <div className="flex flex-col items-center space-y-1 text-white/60">
          <div className="rounded-full bg-white/10 p-3 backdrop-blur-md">
            <Info size={24} />
          </div>
          <span className="text-[10px]">Tips</span>
        </div>
      </div>
    </div>
  );
};

const Meals = () => {
  const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
  const currentDayIndex = 2;

  return (
    <div className="flex min-h-screen flex-col bg-slate-50 p-6 pb-24">
      <header className="mb-6 flex items-center justify-between">
        <h1 className="text-2xl font-bold text-slate-900">Meal Planner</h1>
        <button className="rounded-full bg-emerald-100 p-2 text-emerald-600">
          <Plus size={20} />
        </button>
      </header>

      <div className="mb-8 flex justify-between rounded-2xl bg-white p-4 shadow-sm">
        {days.map((day, i) => (
          <div
            key={day}
            onClick={() => {}}
            className={`flex h-14 w-10 flex-col items-center justify-center rounded-xl text-xs font-medium transition-colors ${
              i === currentDayIndex
                ? "bg-emerald-600 text-white shadow-lg shadow-emerald-200"
                : "text-slate-400 hover:bg-slate-50"
            }`}
          >
            <span>{day}</span>
            <span className="mt-1 text-sm font-bold">{12 + i}</span>
          </div>
        ))}
      </div>

      <div className="mb-8 grid grid-cols-2 gap-4">
        <div className="rounded-2xl bg-orange-50 p-4">
          <div className="flex items-center space-x-2 text-orange-600">
            <Flame size={18} />
            <span className="text-sm font-semibold">Calories</span>
          </div>
          <div className="mt-2">
            <span className="text-2xl font-bold text-slate-900">1,250</span>
            <span className="text-xs text-slate-500"> / 2,000 kcal</span>
          </div>
          <div className="mt-2 h-2 w-full rounded-full bg-orange-200">
            <div className="h-2 w-[62%] rounded-full bg-orange-500" />
          </div>
        </div>
        <div className="rounded-2xl bg-blue-50 p-4">
          <div className="flex items-center space-x-2 text-blue-600">
            <Droplets size={18} />
            <span className="text-sm font-semibold">Water</span>
          </div>
          <div className="mt-2">
            <span className="text-2xl font-bold text-slate-900">1.2</span>
            <span className="text-xs text-slate-500"> / 2.5 L</span>
          </div>
          <div className="mt-2 h-2 w-full rounded-full bg-blue-200">
            <div className="h-2 w-[48%] rounded-full bg-blue-500" />
          </div>
        </div>
      </div>

      <div className="space-y-6">
        {["Breakfast", "Lunch", "Dinner", "Snack"].map((slot, index) => {
            const meal = MEAL_SUGGESTIONS[index % MEAL_SUGGESTIONS.length];
            
            return (
                <div key={slot} className="relative">
                    <div className="mb-2 flex items-center justify-between">
                        <h3 className="text-lg font-bold text-slate-800">{slot}</h3>
                        <span className="text-xs font-medium text-slate-400">Recommended</span>
                    </div>
                    
                    <motion.div 
                        whileTap={{ scale: 0.98 }}
                        className="flex overflow-hidden rounded-2xl bg-white shadow-sm border border-slate-100"
                    >
                        <div className="h-24 w-24 flex-shrink-0 bg-slate-200">
                            <img src={meal.image} alt={meal.name} className="h-full w-full object-cover" />
                        </div>
                        <div className="flex flex-1 flex-col justify-center p-3">
                            <h4 className="font-semibold text-slate-900 line-clamp-1">{meal.name}</h4>
                            <div className="mt-1 flex items-center space-x-3 text-xs text-slate-500">
                                <div className="flex items-center space-x-1">
                                    <Flame size={12} className="text-orange-500" />
                                    <span>{meal.calories} kcal</span>
                                </div>
                                <div className="flex items-center space-x-1">
                                    <Utensils size={12} className="text-emerald-500" />
                                    <span>20 min</span>
                                </div>
                            </div>
                        </div>
                        <button className="flex w-12 items-center justify-center bg-emerald-50 text-emerald-600 hover:bg-emerald-100">
                            <Plus size={20} />
                        </button>
                    </motion.div>
                </div>
            );
        })}
      </div>
    </div>
  );
};

const Plants = () => {
  const navigate = useNavigate();

  const myPlants = [
    {
      id: 1,
      name: "Monstera Deliciosa",
      nickname: "Monty",
      image: "https://images.unsplash.com/photo-1614594975525-e45190c55d0b?auto=format&fit=crop&q=80&w=1200",
      nextWater: "Today",
      waterStatus: "urgent"
    },
    {
      id: 2,
      name: "Snake Plant",
      nickname: "Snape",
      image: "https://images.unsplash.com/photo-1593482886870-930272168db4?auto=format&fit=crop&q=80&w=1200",
      nextWater: "in 5 days",
      waterStatus: "ok"
    },
    {
      id: 3,
      name: "Fiddle Leaf Fig",
      nickname: "Figgy",
      image: "https://images.unsplash.com/photo-1612437118748-0c3098f98c8c?auto=format&fit=crop&q=80&w=1200",
      nextWater: "Tomorrow",
      waterStatus: "soon"
    }
  ];

  return (
    <div className="flex min-h-screen flex-col bg-slate-50 p-6 pb-24">
      <header className="mb-6 flex items-center justify-between">
        <h1 className="text-2xl font-bold text-slate-900">My Plants</h1>
        <button 
          onClick={() => navigate("/scan?mode=plant")}
          className="flex items-center space-x-2 rounded-full bg-emerald-600 px-4 py-2 text-white shadow-lg shadow-emerald-200"
        >
          <Plus size={16} />
          <span className="text-xs font-semibold">Add Plant</span>
        </button>
      </header>

      <div className="mb-8 rounded-2xl bg-white p-5 shadow-sm border border-slate-100">
        <h2 className="mb-4 text-sm font-bold uppercase tracking-wide text-slate-400">Care Dashboard</h2>
        <div className="flex items-center justify-between">
          <div className="text-center">
            <div className="mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 text-blue-600">
              <Droplets size={20} />
            </div>
            <span className="text-xs font-medium text-slate-600">1 Needs Water</span>
          </div>
          <div className="text-center">
            <div className="mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-yellow-100 text-yellow-600">
              <Sun size={20} />
            </div>
            <span className="text-xs font-medium text-slate-600">Good Light</span>
          </div>
          <div className="text-center">
            <div className="mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-slate-100 text-slate-600">
              <Wind size={20} />
            </div>
            <span className="text-xs font-medium text-slate-600">Humidity OK</span>
          </div>
        </div>
      </div>

      <div className="space-y-4">
        {myPlants.map((plant) => (
          <motion.div
            key={plant.id}
            whileTap={{ scale: 0.98 }}
            className="flex items-center overflow-hidden rounded-2xl bg-white p-3 shadow-sm border border-slate-100"
          >
            <div className="h-16 w-16 flex-shrink-0 overflow-hidden rounded-xl bg-slate-200">
              <img src={plant.image} alt={plant.name} className="h-full w-full object-cover" />
            </div>
            <div className="ml-4 flex-1">
              <h3 className="font-semibold text-slate-900">{plant.nickname}</h3>
              <p className="text-xs text-slate-500">{plant.name}</p>
            </div>
            <div className="text-right">
              <div className={`mb-1 inline-flex items-center space-x-1 rounded-full px-2 py-0.5 text-xs font-medium ${
                plant.waterStatus === 'urgent' ? 'bg-red-100 text-red-600' :
                plant.waterStatus === 'soon' ? 'bg-yellow-100 text-yellow-600' :
                'bg-green-100 text-green-600'
              }`}>
                <Droplets size={10} />
                <span>{plant.nextWater}</span>
              </div>
            </div>
          </motion.div>
        ))}
      </div>
    </div>
  );
};

const Profile = () => {
  return (
    <div className="flex min-h-screen flex-col bg-slate-50 p-6 pb-24">
      <header className="mb-8 flex flex-col items-center">
        <div className="mb-4 flex h-24 w-24 items-center justify-center rounded-full bg-emerald-100 text-emerald-600 shadow-inner">
          <User size={48} />
        </div>
        <h1 className="text-xl font-bold text-slate-900">Alex Green</h1>
        <p className="text-sm text-slate-500">Nature Enthusiast</p>
      </header>

      <div className="space-y-6">
        <section className="rounded-2xl bg-white shadow-sm border border-slate-100">
          <h2 className="border-b border-slate-100 px-5 py-3 text-xs font-bold uppercase tracking-wide text-slate-400">
            Account
          </h2>
          <div className="divide-y divide-slate-100">
            {[
              { icon: User, label: "Personal Details" },
              { icon: Heart, label: "Favorites" },
              { icon: Bell, label: "Notifications" },
            ].map((item) => (
              <motion.button
                key={item.label}
                whileTap={{ scale: 0.98 }}
                className="flex w-full items-center justify-between px-5 py-4 text-left hover:bg-slate-50"
              >
                <div className="flex items-center space-x-3">
                  <item.icon size={20} className="text-slate-400" />
                  <span className="text-sm font-medium text-slate-700">{item.label}</span>
                </div>
                <ChevronRight size={16} className="text-slate-300" />
              </motion.button>
            ))}
          </div>
        </section>

        <section className="rounded-2xl bg-white shadow-sm border border-slate-100">
          <h2 className="border-b border-slate-100 px-5 py-3 text-xs font-bold uppercase tracking-wide text-slate-400">
            Preferences
          </h2>
          <div className="divide-y divide-slate-100">
            {[
              { icon: Settings, label: "App Settings" },
              { icon: LogOut, label: "Log Out", color: "text-red-500" },
            ].map((item) => (
              <motion.button
                key={item.label}
                whileTap={{ scale: 0.98 }}
                className="flex w-full items-center justify-between px-5 py-4 text-left hover:bg-slate-50"
              >
                <div className="flex items-center space-x-3">
                  <item.icon size={20} className={item.color || "text-slate-400"} />
                  <span className={`text-sm font-medium ${item.color || "text-slate-700"}`}>
                    {item.label}
                  </span>
                </div>
                <ChevronRight size={16} className="text-slate-300" />
              </motion.button>
            ))}
          </div>
        </section>
      </div>

      <div className="mt-8 flex flex-col items-center space-y-4 text-center">
        <div className="flex space-x-4">
          <div className="h-8 w-8 rounded-full bg-slate-200" />
          <div className="h-8 w-8 rounded-full bg-slate-200" />
          <div className="h-8 w-8 rounded-full bg-slate-200" />
        </div>
        <div className="text-xs text-slate-400">
          <p>© 2024 GreenLens Inc. All rights reserved.</p>
          <p className="mt-1">Terms of Service • Privacy Policy</p>
        </div>
        <p className="text-[10px] text-slate-300">v1.0.0</p>
      </div>
    </div>
  );
};

// ==========================================
// MAIN APP ENTRY
// ==========================================

export function App() {
  const [splashComplete, setSplashComplete] = useState(false);

  if (!splashComplete) {
    return <Splash onComplete={() => setSplashComplete(true)} />;
  }

  return (
    <HashRouter>
      <Routes>
        <Route element={<Layout />}>
          <Route path="/" element={<Home />} />
          <Route path="/meals" element={<Meals />} />
          <Route path="/plants" element={<Plants />} />
          <Route path="/profile" element={<Profile />} />
        </Route>
        <Route path="/scan" element={<Scan />} />
      </Routes>
    </HashRouter>
  );
}</body></html>