prototype code

import React, { useState, useEffect } from ‘react’;
import { Calculator, UtensilsCrossed, Calendar, Home, User, ChevronRight, Heart, Search, Clock, Flame, Users, X, TrendingDown, TrendingUp, Ruler, Weight, Activity, Target, Zap, Plus, Trash2, MessageCircle, Send, Dumbbell, Play, CheckCircle, Award, Coffee, Moon, Sun, Droplets } from ‘lucide-react’;

const RECIPE_DATABASE = [
{ id: 1, name: ‘Oikos Triple Zero Vanilla’, emoji: ‘🥛’, gradient: ‘from-yellow-200 to-amber-300’, calories: 90, protein: 15, carbs: 7, fats: 0, time: 1, servings: 1, category: ‘Breakfast’, difficulty: ‘Easy’, ingredients: [‘1 Oikos Triple Zero Vanilla Greek Yogurt (5.3 oz)’], instructions: [‘Open cup and enjoy’], tags: [‘high-protein’, ‘quick’] },
{ id: 2, name: ‘Oikos Triple Zero Strawberry’, emoji: ‘🍓’, gradient: ‘from-pink-200 to-red-300’, calories: 90, protein: 15, carbs: 7, fats: 0, time: 1, servings: 1, category: ‘Breakfast’, difficulty: ‘Easy’, ingredients: [‘1 Oikos Triple Zero Strawberry Greek Yogurt (5.3 oz)’], instructions: [‘Open cup and enjoy’], tags: [‘high-protein’, ‘quick’] },
{ id: 3, name: ‘Grilled Chicken Salad’, emoji: ‘🥗’, gradient: ‘from-green-200 to-emerald-300’, calories: 320, protein: 35, carbs: 20, fats: 8, time: 20, servings: 2, category: ‘Lunch’, difficulty: ‘Medium’, ingredients: [‘Chicken breast’, ‘Mixed greens’, ‘Cherry tomatoes’, ‘Cucumber’, ‘Cooking spray’, ‘Lemon’], instructions: [‘Season and spray chicken with cooking spray’, ‘Grill chicken breast’, ‘Chop vegetables’, ‘Slice grilled chicken’, ‘Toss with greens and lemon’, ‘Serve fresh’], tags: [‘high-protein’, ‘low-fat’] },
{ id: 4, name: ‘Grilled Salmon’, emoji: ‘🐟’, gradient: ‘from-orange-200 to-pink-300’, calories: 380, protein: 40, carbs: 12, fats: 18, time: 25, servings: 2, category: ‘Dinner’, difficulty: ‘Medium’, ingredients: [‘Salmon fillet’, ‘Asparagus’, ‘Garlic’, ‘Lemon’, ‘Cooking spray’], instructions: [‘Preheat grill’, ‘Season salmon’, ‘Spray with cooking spray’, ‘Grill 4-5 min per side’, ‘Grill asparagus’, ‘Serve with lemon’], tags: [‘high-protein’] },
{ id: 5, name: ‘Protein Smoothie Bowl’, emoji: ‘🥤’, gradient: ‘from-purple-300 to-pink-300’, calories: 320, protein: 28, carbs: 35, fats: 8, time: 5, servings: 1, category: ‘Breakfast’, difficulty: ‘Easy’, ingredients: [‘Protein powder’, ‘Banana’, ‘Berries’, ‘Almond milk’, ‘Granola’], instructions: [‘Blend protein, banana, berries with milk’, ‘Pour into bowl’, ‘Top with granola and fresh fruit’], tags: [‘high-protein’, ‘quick’] },
{ id: 6, name: ‘Quinoa Power Bowl’, emoji: ‘🍚’, gradient: ‘from-amber-200 to-orange-300’, calories: 420, protein: 22, carbs: 48, fats: 16, time: 30, servings: 2, category: ‘Lunch’, difficulty: ‘Medium’, ingredients: [‘Quinoa’, ‘Chickpeas’, ‘Avocado’, ‘Sweet potato’, ‘Spinach’], instructions: [‘Cook quinoa’, ‘Roast chickpeas and sweet potato’, ‘Assemble bowl with spinach’, ‘Add avocado and dressing’], tags: [‘vegetarian’] },

// Breakfast Recipes
{ id: 7, name: ‘Avocado Toast Supreme’, emoji: ‘🥑’, gradient: ‘from-green-300 to-lime-400’, calories: 340, protein: 18, carbs: 32, fats: 16, time: 10, servings: 1, category: ‘Breakfast’, difficulty: ‘Easy’, ingredients: [‘Whole grain bread’, ‘Avocado’, ‘Eggs’, ‘Cherry tomatoes’, ‘Everything bagel seasoning’], instructions: [‘Toast bread until golden’, ‘Mash avocado with lime and salt’, ‘Fry or poach eggs’, ‘Spread avocado on toast, top with eggs’, ‘Add tomatoes and seasoning’], tags: [‘quick’, ‘vegetarian’] },
{ id: 8, name: ‘Overnight Oats Deluxe’, emoji: ‘🥣’, gradient: ‘from-blue-200 to-indigo-300’, calories: 380, protein: 20, carbs: 52, fats: 10, time: 5, servings: 1, category: ‘Breakfast’, difficulty: ‘Easy’, ingredients: [‘Rolled oats’, ‘Greek yogurt’, ‘Chia seeds’, ‘Honey’, ‘Berries’, ‘Almond milk’], instructions: [‘Mix oats, yogurt, chia seeds in jar’, ‘Add almond milk and honey’, ‘Refrigerate overnight’, ‘Top with fresh berries before serving’], tags: [‘make-ahead’, ‘high-protein’] },
{ id: 9, name: ‘Egg White Veggie Scramble’, emoji: ‘🍳’, gradient: ‘from-yellow-300 to-orange-400’, calories: 220, protein: 26, carbs: 12, fats: 6, time: 15, servings: 1, category: ‘Breakfast’, difficulty: ‘Easy’, ingredients: [‘Egg whites (6)’, ‘Spinach’, ‘Bell peppers’, ‘Mushrooms’, ‘Onion’, ‘Feta cheese’], instructions: [‘Sauté vegetables in pan’, ‘Add egg whites and scramble’, ‘Cook until fluffy’, ‘Top with feta cheese’, ‘Season with herbs’], tags: [‘high-protein’, ‘low-carb’] },
{ id: 10, name: ‘Banana Protein Pancakes’, emoji: ‘🥞’, gradient: ‘from-amber-300 to-yellow-400’, calories: 360, protein: 24, carbs: 42, fats: 10, time: 20, servings: 2, category: ‘Breakfast’, difficulty: ‘Medium’, ingredients: [‘Banana’, ‘Eggs’, ‘Protein powder’, ‘Oats’, ‘Cinnamon’, ‘Vanilla extract’], instructions: [‘Blend all ingredients until smooth’, ‘Heat non-stick pan over medium’, ‘Pour batter to form pancakes’, ‘Flip when bubbles form’, ‘Serve with Greek yogurt’], tags: [‘high-protein’] },
{ id: 11, name: ‘Chia Seed Pudding’, emoji: ‘🍮’, gradient: ‘from-purple-200 to-pink-300’, calories: 280, protein: 12, carbs: 28, fats: 14, time: 5, servings: 1, category: ‘Breakfast’, difficulty: ‘Easy’, ingredients: [‘Chia seeds’, ‘Almond milk’, ‘Vanilla’, ‘Maple syrup’, ‘Fresh fruit’, ‘Coconut flakes’], instructions: [‘Mix chia seeds with almond milk’, ‘Add vanilla and maple syrup’, ‘Refrigerate for 4 hours or overnight’, ‘Top with fruit and coconut’], tags: [‘make-ahead’, ‘vegan’] },
{ id: 12, name: ‘Turkey Sausage Breakfast Bowl’, emoji: ‘🌯’, gradient: ‘from-red-300 to-orange-400’, calories: 410, protein: 32, carbs: 28, fats: 18, time: 25, servings: 1, category: ‘Breakfast’, difficulty: ‘Medium’, ingredients: [‘Turkey sausage’, ‘Eggs’, ‘Sweet potato hash’, ‘Spinach’, ‘Red onion’], instructions: [‘Cook turkey sausage and slice’, ‘Roast sweet potato cubes’, ‘Scramble eggs’, ‘Sauté spinach and onion’, ‘Combine all in bowl’], tags: [‘high-protein’] },

// Lunch Recipes
{ id: 13, name: ‘Mediterranean Wrap’, emoji: ‘🌯’, gradient: ‘from-blue-300 to-teal-400’, calories: 420, protein: 28, carbs: 45, fats: 14, time: 15, servings: 1, category: ‘Lunch’, difficulty: ‘Easy’, ingredients: [‘Whole wheat tortilla’, ‘Grilled chicken’, ‘Hummus’, ‘Cucumber’, ‘Tomatoes’, ‘Feta’, ‘Lettuce’], instructions: [‘Spread hummus on tortilla’, ‘Layer chicken and vegetables’, ‘Add feta cheese’, ‘Roll tightly and slice in half’, ‘Serve immediately’], tags: [‘high-protein’] },
{ id: 14, name: ‘Tuna Poke Bowl’, emoji: ‘🍱’, gradient: ‘from-pink-300 to-red-400’, calories: 480, protein: 38, carbs: 52, fats: 12, time: 20, servings: 2, category: ‘Lunch’, difficulty: ‘Medium’, ingredients: [‘Sushi-grade tuna’, ‘Brown rice’, ‘Edamame’, ‘Cucumber’, ‘Avocado’, ‘Soy sauce’, ‘Sesame seeds’], instructions: [‘Cube tuna and marinate in soy sauce’, ‘Cook brown rice’, ‘Prep all vegetables’, ‘Assemble bowl with rice as base’, ‘Top with tuna and garnish’], tags: [‘high-protein’] },
{ id: 15, name: ‘Southwest Chicken Bowl’, emoji: ‘🌮’, gradient: ‘from-yellow-400 to-red-500’, calories: 520, protein: 42, carbs: 48, fats: 18, time: 30, servings: 2, category: ‘Lunch’, difficulty: ‘Medium’, ingredients: [‘Chicken breast’, ‘Black beans’, ‘Corn’, ‘Brown rice’, ‘Salsa’, ‘Greek yogurt’, ‘Cheese’], instructions: [‘Season and grill chicken’, ‘Cook rice and warm beans’, ‘Char corn in pan’, ‘Assemble bowl with all ingredients’, ‘Top with Greek yogurt and salsa’], tags: [‘high-protein’] },
{ id: 16, name: ‘Asian Lettuce Wraps’, emoji: ‘🥬’, gradient: ‘from-green-400 to-emerald-500’, calories: 320, protein: 32, carbs: 18, fats: 14, time: 20, servings: 2, category: ‘Lunch’, difficulty: ‘Easy’, ingredients: [‘Ground turkey’, ‘Lettuce leaves’, ‘Water chestnuts’, ‘Green onions’, ‘Ginger’, ‘Soy sauce’, ‘Hoisin sauce’], instructions: [‘Brown turkey in skillet’, ‘Add water chestnuts and aromatics’, ‘Season with sauces’, ‘Spoon mixture into lettuce cups’, ‘Garnish with green onions’], tags: [‘low-carb’, ‘high-protein’] },
{ id: 17, name: ‘Greek Chicken Bowl’, emoji: ‘🇬🇷’, gradient: ‘from-blue-400 to-cyan-500’, calories: 460, protein: 40, carbs: 38, fats: 16, time: 25, servings: 2, category: ‘Lunch’, difficulty: ‘Medium’, ingredients: [‘Chicken breast’, ‘Quinoa’, ‘Cucumber’, ‘Tomatoes’, ‘Kalamata olives’, ‘Feta’, ‘Tzatziki’], instructions: [‘Marinate chicken in lemon and oregano’, ‘Grill chicken until cooked through’, ‘Cook quinoa’, ‘Chop vegetables’, ‘Assemble bowl and top with tzatziki’], tags: [‘high-protein’, ‘mediterranean’] },
{ id: 18, name: ‘Shrimp Cauliflower Rice’, emoji: ‘🍤’, gradient: ‘from-orange-300 to-pink-400’, calories: 340, protein: 35, carbs: 22, fats: 12, time: 20, servings: 2, category: ‘Lunch’, difficulty: ‘Easy’, ingredients: [‘Shrimp’, ‘Cauliflower rice’, ‘Mixed vegetables’, ‘Garlic’, ‘Ginger’, ‘Coconut aminos’], instructions: [‘Sauté garlic and ginger’, ‘Add shrimp and cook until pink’, ‘Add cauliflower rice and vegetables’, ‘Season with coconut aminos’, ‘Stir fry until heated through’], tags: [‘low-carb’, ‘high-protein’] },

// Dinner Recipes
{ id: 19, name: ‘Baked Cod with Vegetables’, emoji: ‘🐠’, gradient: ‘from-cyan-300 to-blue-400’, calories: 380, protein: 42, carbs: 24, fats: 12, time: 30, servings: 2, category: ‘Dinner’, difficulty: ‘Medium’, ingredients: [‘Cod fillets’, ‘Broccoli’, ‘Cherry tomatoes’, ‘Lemon’, ‘Garlic’, ‘Olive oil’, ‘Herbs’], instructions: [‘Preheat oven to 400°F’, ‘Place cod and vegetables on baking sheet’, ‘Drizzle with olive oil and season’, ‘Bake for 20 minutes’, ‘Serve with lemon wedges’], tags: [‘low-carb’, ‘high-protein’] },
{ id: 20, name: ‘Turkey Meatballs & Zucchini Noodles’, emoji: ‘🍝’, gradient: ‘from-green-400 to-lime-500’, calories: 420, protein: 38, carbs: 18, fats: 22, time: 35, servings: 2, category: ‘Dinner’, difficulty: ‘Medium’, ingredients: [‘Ground turkey’, ‘Egg’, ‘Breadcrumbs’, ‘Zucchini’, ‘Marinara sauce’, ‘Parmesan’, ‘Italian herbs’], instructions: [‘Mix turkey with egg, breadcrumbs, herbs’, ‘Form into meatballs and bake at 375°F’, ‘Spiralize zucchini into noodles’, ‘Heat marinara sauce’, ‘Combine meatballs with zoodles and sauce’], tags: [‘low-carb’, ‘high-protein’] },
{ id: 21, name: ‘Chicken Fajita Skillet’, emoji: ‘🍗’, gradient: ‘from-red-400 to-orange-500’, calories: 440, protein: 45, carbs: 32, fats: 14, time: 25, servings: 2, category: ‘Dinner’, difficulty: ‘Easy’, ingredients: [‘Chicken breast’, ‘Bell peppers (3 colors)’, ‘Onion’, ‘Fajita seasoning’, ‘Lime’, ‘Cilantro’], instructions: [‘Slice chicken and vegetables’, ‘Heat skillet and cook chicken’, ‘Add peppers and onions’, ‘Season with fajita spices’, ‘Finish with lime and cilantro’], tags: [‘high-protein’, ‘mexican’] },
{ id: 22, name: ‘Beef & Broccoli Stir Fry’, emoji: ‘🥦’, gradient: ‘from-green-500 to-emerald-600’, calories: 480, protein: 40, carbs: 28, fats: 22, time: 20, servings: 2, category: ‘Dinner’, difficulty: ‘Easy’, ingredients: [‘Flank steak’, ‘Broccoli’, ‘Garlic’, ‘Ginger’, ‘Soy sauce’, ‘Sesame oil’, ‘Brown rice’], instructions: [‘Slice beef thinly against grain’, ‘Stir fry beef in hot wok’, ‘Remove beef, add broccoli’, ‘Add sauce ingredients’, ‘Return beef and toss together’], tags: [‘high-protein’, ‘asian’] },
{ id: 23, name: ‘Baked Chicken Thighs’, emoji: ‘🍖’, gradient: ‘from-amber-400 to-orange-500’, calories: 520, protein: 48, carbs: 8, fats: 32, time: 40, servings: 2, category: ‘Dinner’, difficulty: ‘Easy’, ingredients: [‘Chicken thighs’, ‘Garlic powder’, ‘Paprika’, ‘Rosemary’, ‘Lemon’, ‘Green beans’], instructions: [‘Season chicken with spices’, ‘Place in baking dish with lemon slices’, ‘Bake at 425°F for 35 minutes’, ‘Add green beans halfway through’, ‘Let rest before serving’], tags: [‘high-protein’, ‘keto-friendly’] },
{ id: 24, name: ‘Lemon Herb Tilapia’, emoji: ‘🐟’, gradient: ‘from-yellow-300 to-green-400’, calories: 360, protein: 38, carbs: 18, fats: 14, time: 25, servings: 2, category: ‘Dinner’, difficulty: ‘Easy’, ingredients: [‘Tilapia fillets’, ‘Lemon’, ‘Fresh herbs’, ‘Garlic’, ‘White wine’, ‘Asparagus’], instructions: [‘Season tilapia with herbs and garlic’, ‘Place in baking dish with lemon and wine’, ‘Add asparagus to dish’, ‘Bake at 400°F for 15-18 minutes’, ‘Serve immediately’], tags: [‘low-carb’, ‘high-protein’] },

// Snack Recipes
{ id: 25, name: ‘Protein Energy Balls’, emoji: ‘⚡’, gradient: ‘from-purple-400 to-pink-500’, calories: 180, protein: 8, carbs: 22, fats: 7, time: 10, servings: 4, category: ‘Snack’, difficulty: ‘Easy’, ingredients: [‘Oats’, ‘Protein powder’, ‘Peanut butter’, ‘Honey’, ‘Dark chocolate chips’, ‘Chia seeds’], instructions: [‘Mix all ingredients in bowl’, ‘Roll into 1-inch balls’, ‘Refrigerate for 30 minutes’, ‘Store in airtight container’], tags: [‘make-ahead’, ‘high-protein’] },
{ id: 26, name: ‘Cottage Cheese Bowl’, emoji: ‘🥣’, gradient: ‘from-blue-300 to-purple-400’, calories: 240, protein: 24, carbs: 18, fats: 8, time: 5, servings: 1, category: ‘Snack’, difficulty: ‘Easy’, ingredients: [‘Cottage cheese’, ‘Pineapple’, ‘Almonds’, ‘Cinnamon’, ‘Honey’], instructions: [‘Scoop cottage cheese into bowl’, ‘Top with pineapple chunks’, ‘Add sliced almonds’, ‘Drizzle with honey’, ‘Sprinkle cinnamon on top’], tags: [‘quick’, ‘high-protein’] },
{ id: 27, name: ‘Apple Almond Butter Slices’, emoji: ‘🍎’, gradient: ‘from-red-300 to-orange-400’, calories: 220, protein: 6, carbs: 28, fats: 10, time: 5, servings: 1, category: ‘Snack’, difficulty: ‘Easy’, ingredients: [‘Apple’, ‘Almond butter’, ‘Granola’, ‘Cinnamon’], instructions: [‘Slice apple into rounds’, ‘Spread almond butter on each slice’, ‘Sprinkle with granola’, ‘Dust with cinnamon’], tags: [‘quick’, ‘vegan’] },
{ id: 28, name: ‘Turkey Roll-Ups’, emoji: ‘🦃’, gradient: ‘from-pink-300 to-red-400’, calories: 160, protein: 18, carbs: 4, fats: 8, time: 5, servings: 1, category: ‘Snack’, difficulty: ‘Easy’, ingredients: [‘Turkey slices (deli)’, ‘Cream cheese’, ‘Cucumber sticks’, ‘Bell pepper strips’], instructions: [‘Spread cream cheese on turkey slices’, ‘Place veggie sticks on one end’, ‘Roll up tightly’, ‘Secure with toothpick if needed’], tags: [‘quick’, ‘low-carb’, ‘high-protein’] },
{ id: 29, name: ‘Hummus Veggie Plate’, emoji: ‘🥕’, gradient: ‘from-orange-300 to-yellow-400’, calories: 200, protein: 8, carbs: 24, fats: 9, time: 10, servings: 1, category: ‘Snack’, difficulty: ‘Easy’, ingredients: [‘Hummus’, ‘Carrots’, ‘Cucumber’, ‘Bell peppers’, ‘Cherry tomatoes’, ‘Celery’], instructions: [‘Slice all vegetables into sticks’, ‘Arrange on plate’, ‘Add hummus to center for dipping’, ‘Season vegetables with salt and pepper’], tags: [‘vegan’, ‘quick’] },
{ id: 30, name: ‘Greek Yogurt Parfait’, emoji: ‘🍨’, gradient: ‘from-pink-400 to-purple-500’, calories: 280, protein: 20, carbs: 36, fats: 6, time: 5, servings: 1, category: ‘Snack’, difficulty: ‘Easy’, ingredients: [‘Greek yogurt’, ‘Mixed berries’, ‘Granola’, ‘Honey’, ‘Chia seeds’], instructions: [‘Layer yogurt in glass’, ‘Add berries and granola’, ‘Repeat layers’, ‘Top with honey and chia seeds’], tags: [‘quick’, ‘high-protein’] },

// More Dinner Options
{ id: 31, name: ‘Stuffed Bell Peppers’, emoji: ‘🫑’, gradient: ‘from-red-500 to-orange-600’, calories: 420, protein: 32, carbs: 38, fats: 16, time: 45, servings: 2, category: ‘Dinner’, difficulty: ‘Medium’, ingredients: [‘Bell peppers’, ‘Ground turkey’, ‘Brown rice’, ‘Black beans’, ‘Tomato sauce’, ‘Cheese’, ‘Spices’], instructions: [‘Cut tops off peppers and remove seeds’, ‘Cook turkey with spices’, ‘Mix with cooked rice and beans’, ‘Stuff peppers with mixture’, ‘Bake covered at 375°F for 30 minutes’], tags: [‘high-protein’] },
{ id: 32, name: ‘Pesto Chicken & Veggies’, emoji: ‘🌿’, gradient: ‘from-green-500 to-teal-600’, calories: 460, protein: 44, carbs: 22, fats: 22, time: 30, servings: 2, category: ‘Dinner’, difficulty: ‘Medium’, ingredients: [‘Chicken breast’, ‘Basil pesto’, ‘Cherry tomatoes’, ‘Zucchini’, ‘Mozzarella’, ‘Pine nuts’], instructions: [‘Coat chicken with pesto’, ‘Grill or bake chicken’, ‘Sauté zucchini and tomatoes’, ‘Top chicken with mozzarella’, ‘Garnish with pine nuts’], tags: [‘high-protein’, ‘italian’] },
{ id: 33, name: ‘Teriyaki Salmon Bowl’, emoji: ‘🍣’, gradient: ‘from-orange-400 to-pink-500’, calories: 520, protein: 42, carbs: 48, fats: 18, time: 30, servings: 2, category: ‘Dinner’, difficulty: ‘Medium’, ingredients: [‘Salmon fillet’, ‘Brown rice’, ‘Teriyaki sauce’, ‘Edamame’, ‘Carrots’, ‘Sesame seeds’], instructions: [‘Marinate salmon in teriyaki’, ‘Bake salmon at 400°F for 15 minutes’, ‘Cook rice and steam edamame’, ‘Julienne carrots’, ‘Assemble bowl and garnish’], tags: [‘high-protein’, ‘asian’] },
{ id: 34, name: ‘Chicken Caprese’, emoji: ‘🍅’, gradient: ‘from-red-400 to-green-500’, calories: 480, protein: 48, carbs: 14, fats: 26, time: 25, servings: 2, category: ‘Dinner’, difficulty: ‘Easy’, ingredients: [‘Chicken breast’, ‘Fresh mozzarella’, ‘Tomatoes’, ‘Fresh basil’, ‘Balsamic glaze’, ‘Olive oil’], instructions: [‘Grill or pan-sear chicken’, ‘Top with mozzarella and tomato slices’, ‘Add basil leaves’, ‘Drizzle with balsamic glaze’, ‘Serve immediately’], tags: [‘high-protein’, ‘italian’] },
{ id: 35, name: ‘Cajun Shrimp & Sausage’, emoji: ‘🦐’, gradient: ‘from-red-500 to-orange-600’, calories: 440, protein: 38, carbs: 24, fats: 22, time: 25, servings: 2, category: ‘Dinner’, difficulty: ‘Medium’, ingredients: [‘Shrimp’, ‘Turkey sausage’, ‘Bell peppers’, ‘Onion’, ‘Cajun seasoning’, ‘Brown rice’], instructions: [‘Slice sausage and cook in skillet’, ‘Add peppers and onions’, ‘Season with cajun spices’, ‘Add shrimp and cook until pink’, ‘Serve over brown rice’], tags: [‘high-protein’, ‘spicy’] },
{ id: 36, name: ‘Vegetarian Chili’, emoji: ‘🌶️’, gradient: ‘from-orange-500 to-red-600’, calories: 380, protein: 18, carbs: 58, fats: 8, time: 40, servings: 4, category: ‘Dinner’, difficulty: ‘Easy’, ingredients: [‘Black beans’, ‘Kidney beans’, ‘Tomatoes’, ‘Corn’, ‘Onion’, ‘Chili powder’, ‘Cumin’], instructions: [‘Sauté onion and garlic’, ‘Add all beans and tomatoes’, ‘Season with spices’, ‘Simmer for 30 minutes’, ‘Serve with toppings of choice’], tags: [‘vegetarian’, ‘high-fiber’] },

// Low-Carb Meals
{ id: 37, name: ‘Keto Cauliflower Pizza’, emoji: ‘🍕’, gradient: ‘from-yellow-400 to-red-500’, calories: 380, protein: 28, carbs: 12, fats: 24, time: 35, servings: 2, category: ‘Dinner’, difficulty: ‘Medium’, ingredients: [‘Cauliflower’, ‘Eggs’, ‘Mozzarella cheese’, ‘Parmesan’, ‘Pizza sauce’, ‘Italian seasoning’, ‘Toppings of choice’], instructions: [‘Rice cauliflower and squeeze out moisture’, ‘Mix with eggs and cheese to form crust’, ‘Bake crust at 425°F for 15 minutes’, ‘Add sauce and toppings’, ‘Bake another 10 minutes’], tags: [‘low-carb’, ‘keto’, ‘vegetarian’] },
{ id: 38, name: ‘Lettuce Wrapped Burgers’, emoji: ‘🍔’, gradient: ‘from-green-400 to-red-500’, calories: 420, protein: 38, carbs: 8, fats: 26, time: 20, servings: 2, category: ‘Lunch’, difficulty: ‘Easy’, ingredients: [‘Ground beef (93% lean)’, ‘Lettuce leaves’, ‘Tomato’, ‘Onion’, ‘Pickles’, ‘Sugar-free ketchup’, ‘Mustard’], instructions: [‘Form beef into patties and season’, ‘Grill or pan-fry burgers to desired doneness’, ‘Wash and dry large lettuce leaves’, ‘Wrap burgers in lettuce with toppings’, ‘Serve immediately’], tags: [‘low-carb’, ‘keto’, ‘high-protein’] },
{ id: 39, name: ‘Garlic Butter Shrimp’, emoji: ‘🧈’, gradient: ‘from-yellow-300 to-pink-400’, calories: 320, protein: 36, carbs: 6, fats: 18, time: 15, servings: 2, category: ‘Dinner’, difficulty: ‘Easy’, ingredients: [‘Large shrimp’, ‘Butter’, ‘Garlic’, ‘Lemon juice’, ‘White wine’, ‘Parsley’, ‘Red pepper flakes’], instructions: [‘Melt butter in pan with garlic’, ‘Add shrimp and cook 2 min per side’, ‘Add wine and lemon juice’, ‘Season with red pepper and parsley’, ‘Serve with cauliflower rice’], tags: [‘low-carb’, ‘keto’, ‘high-protein’] },
{ id: 40, name: ‘Zucchini Lasagna’, emoji: ‘🥒’, gradient: ‘from-green-500 to-red-500’, calories: 360, protein: 32, carbs: 14, fats: 22, time: 50, servings: 4, category: ‘Dinner’, difficulty: ‘Hard’, ingredients: [‘Zucchini (4 large)’, ‘Ground turkey’, ‘Ricotta cheese’, ‘Mozzarella’, ‘Marinara sauce’, ‘Parmesan’, ‘Italian herbs’], instructions: [‘Slice zucchini lengthwise, salt and drain’, ‘Brown turkey with herbs’, ‘Layer zucchini, meat, ricotta, sauce’, ‘Repeat layers, top with mozzarella’, ‘Bake at 375°F for 35 minutes’], tags: [‘low-carb’, ‘high-protein’] },
{ id: 41, name: ‘Chicken Alfredo Shirataki’, emoji: ‘🍜’, gradient: ‘from-white-300 to-yellow-400’, calories: 340, protein: 42, carbs: 8, fats: 16, time: 20, servings: 2, category: ‘Dinner’, difficulty: ‘Easy’, ingredients: [‘Chicken breast’, ‘Shirataki noodles’, ‘Heavy cream’, ‘Parmesan cheese’, ‘Garlic’, ‘Butter’, ‘Spinach’], instructions: [‘Rinse and dry shirataki noodles’, ‘Cook chicken and slice’, ‘Make alfredo sauce with cream, butter, parmesan’, ‘Toss noodles in sauce’, ‘Add chicken and spinach’], tags: [‘low-carb’, ‘keto’, ‘high-protein’] },
{ id: 42, name: ‘Egg Roll in a Bowl’, emoji: ‘🥡’, gradient: ‘from-green-400 to-orange-500’, calories: 380, protein: 28, carbs: 12, fats: 24, time: 20, servings: 2, category: ‘Lunch’, difficulty: ‘Easy’, ingredients: [‘Ground pork’, ‘Cabbage (shredded)’, ‘Carrots’, ‘Ginger’, ‘Garlic’, ‘Soy sauce’, ‘Sesame oil’], instructions: [‘Brown ground pork in large skillet’, ‘Add ginger and garlic’, ‘Add cabbage and carrots’, ‘Season with soy sauce and sesame oil’, ‘Cook until cabbage is tender’], tags: [‘low-carb’, ‘asian’, ‘high-protein’] },
{ id: 43, name: ‘Spicy Tuna Cucumber Boats’, emoji: ‘🚤’, gradient: ‘from-green-400 to-red-500’, calories: 180, protein: 24, carbs: 6, fats: 6, time: 10, servings: 2, category: ‘Lunch’, difficulty: ‘Easy’, ingredients: [‘Canned tuna’, ‘Cucumber’, ‘Sriracha mayo’, ‘Green onions’, ‘Sesame seeds’, ‘Avocado’], instructions: [‘Halve cucumbers and scoop out seeds’, ‘Mix tuna with sriracha mayo’, ‘Fill cucumber boats with tuna mixture’, ‘Top with avocado and green onions’, ‘Sprinkle with sesame seeds’], tags: [‘low-carb’, ‘quick’, ‘high-protein’] },
{ id: 44, name: ‘Buffalo Chicken Salad’, emoji: ‘🥗’, gradient: ‘from-orange-500 to-red-600’, calories: 340, protein: 38, carbs: 10, fats: 18, time: 15, servings: 2, category: ‘Lunch’, difficulty: ‘Easy’, ingredients: [‘Grilled chicken’, ‘Buffalo sauce’, ‘Romaine lettuce’, ‘Celery’, ‘Blue cheese dressing’, ‘Ranch (low-fat)’, ‘Carrots’], instructions: [‘Toss chicken with buffalo sauce’, ‘Chop romaine and celery’, ‘Arrange salad with vegetables’, ‘Top with buffalo chicken’, ‘Drizzle with blue cheese or ranch’], tags: [‘low-carb’, ‘high-protein’, ‘spicy’] },
{ id: 45, name: ‘Keto Taco Salad’, emoji: ‘🌮’, gradient: ‘from-green-500 to-yellow-600’, calories: 420, protein: 35, carbs: 10, fats: 28, time: 20, servings: 2, category: ‘Dinner’, difficulty: ‘Easy’, ingredients: [‘Ground beef’, ‘Lettuce’, ‘Cheese’, ‘Sour cream’, ‘Salsa’, ‘Avocado’, ‘Taco seasoning’], instructions: [‘Brown beef with taco seasoning’, ‘Chop lettuce and vegetables’, ‘Layer lettuce as base’, ‘Top with seasoned beef’, ‘Add cheese, sour cream, salsa, avocado’], tags: [‘low-carb’, ‘keto’, ‘high-protein’] },
{ id: 46, name: ‘Portobello Mushroom Burger’, emoji: ‘🍄’, gradient: ‘from-brown-400 to-green-500’, calories: 280, protein: 18, carbs: 12, fats: 18, time: 25, servings: 2, category: ‘Lunch’, difficulty: ‘Easy’, ingredients: [‘Portobello mushroom caps’, ‘Mozzarella cheese’, ‘Tomato’, ‘Basil’, ‘Balsamic vinegar’, ‘Olive oil’, ‘Garlic’], instructions: [‘Marinate mushrooms in balsamic and oil’, ‘Grill mushrooms 4 min per side’, ‘Top with cheese to melt’, ‘Add tomato and fresh basil’, ‘Serve as open-faced burger’], tags: [‘low-carb’, ‘vegetarian’] },
{ id: 47, name: ‘Cabbage Stir Fry’, emoji: ‘🥬’, gradient: ‘from-green-500 to-purple-500’, calories: 320, protein: 26, carbs: 14, fats: 18, time: 20, servings: 2, category: ‘Dinner’, difficulty: ‘Easy’, ingredients: [‘Cabbage’, ‘Chicken or tofu’, ‘Bell peppers’, ‘Soy sauce’, ‘Ginger’, ‘Garlic’, ‘Sesame oil’], instructions: [‘Slice cabbage and peppers’, ‘Stir-fry protein until cooked’, ‘Add vegetables and aromatics’, ‘Season with soy sauce and sesame oil’, ‘Cook until cabbage is tender-crisp’], tags: [‘low-carb’, ‘asian’, ‘high-protein’] },
{ id: 48, name: ‘Baked Avocado Eggs’, emoji: ‘🥑’, gradient: ‘from-green-400 to-yellow-500’, calories: 280, protein: 14, carbs: 9, fats: 22, time: 20, servings: 2, category: ‘Breakfast’, difficulty: ‘Easy’, ingredients: [‘Avocados (2)’, ‘Eggs (4)’, ‘Bacon bits’, ‘Cheese’, ‘Chives’, ‘Salt’, ‘Pepper’], instructions: [‘Halve avocados and scoop out some flesh’, ‘Crack egg into each avocado half’, ‘Top with bacon and cheese’, ‘Bake at 425°F for 15 minutes’, ‘Garnish with chives’], tags: [‘low-carb’, ‘keto’, ‘high-protein’] },

// Low-Fat Meals
{ id: 49, name: ‘Grilled Chicken & Veggie Skewers’, emoji: ‘�串’, gradient: ‘from-yellow-400 to-green-500’, calories: 280, protein: 38, carbs: 18, fats: 6, time: 25, servings: 2, category: ‘Dinner’, difficulty: ‘Easy’, ingredients: [‘Chicken breast’, ‘Bell peppers’, ‘Zucchini’, ‘Cherry tomatoes’, ‘Onion’, ‘Lemon’, ‘Herbs’], instructions: [‘Cut chicken and vegetables into chunks’, ‘Thread onto skewers alternating items’, ‘Season with herbs and lemon’, ‘Grill for 12-15 minutes, turning often’, ‘Serve with brown rice’], tags: [‘low-fat’, ‘high-protein’] },
{ id: 50, name: ‘Baked Tilapia & Broccoli’, emoji: ‘🐠’, gradient: ‘from-blue-300 to-green-400’, calories: 260, protein: 36, carbs: 16, fats: 5, time: 25, servings: 2, category: ‘Dinner’, difficulty: ‘Easy’, ingredients: [‘Tilapia fillets’, ‘Broccoli’, ‘Lemon’, ‘Garlic’, ‘White wine’, ‘Herbs’, ‘Cooking spray’], instructions: [‘Spray baking dish with cooking spray’, ‘Place tilapia and broccoli in dish’, ‘Season with garlic, lemon, herbs’, ‘Add splash of white wine’, ‘Bake at 400°F for 20 minutes’], tags: [‘low-fat’, ‘high-protein’, ‘low-calorie’] },
{ id: 51, name: ‘Turkey Chili’, emoji: ‘🍲’, gradient: ‘from-red-400 to-orange-500’, calories: 320, protein: 32, carbs: 36, fats: 6, time: 35, servings: 4, category: ‘Dinner’, difficulty: ‘Easy’, ingredients: [‘Ground turkey (99% lean)’, ‘Kidney beans’, ‘Black beans’, ‘Tomatoes’, ‘Onion’, ‘Chili powder’, ‘Cumin’], instructions: [‘Brown turkey in large pot’, ‘Add onions and cook until soft’, ‘Add all beans, tomatoes, spices’, ‘Simmer for 25 minutes’, ‘Serve with optional low-fat toppings’], tags: [‘low-fat’, ‘high-protein’, ‘high-fiber’] },
{ id: 52, name: ‘Egg White Frittata’, emoji: ‘🍳’, gradient: ‘from-yellow-300 to-green-400’, calories: 180, protein: 24, carbs: 10, fats: 4, time: 30, servings: 4, category: ‘Breakfast’, difficulty: ‘Medium’, ingredients: [‘Egg whites (12)’, ‘Spinach’, ‘Mushrooms’, ‘Tomatoes’, ‘Onion’, ‘Low-fat feta’, ‘Herbs’], instructions: [‘Sauté vegetables in oven-safe pan’, ‘Pour egg whites over vegetables’, ‘Cook on stove for 5 minutes’, ‘Transfer to oven at 375°F’, ‘Bake 15-20 minutes until set’], tags: [‘low-fat’, ‘high-protein’, ‘vegetarian’] },
{ id: 53, name: ‘Shrimp & Veggie Stir Fry’, emoji: ‘🦐’, gradient: ‘from-pink-300 to-green-400’, calories: 240, protein: 32, carbs: 22, fats: 4, time: 20, servings: 2, category: ‘Lunch’, difficulty: ‘Easy’, ingredients: [‘Shrimp’, ‘Broccoli’, ‘Snow peas’, ‘Carrots’, ‘Ginger’, ‘Low-sodium soy sauce’, ‘Brown rice’], instructions: [‘Stir-fry shrimp in non-stick pan’, ‘Remove shrimp, add vegetables’, ‘Add ginger and soy sauce’, ‘Return shrimp to pan’, ‘Serve over brown rice’], tags: [‘low-fat’, ‘high-protein’] },
{ id: 54, name: ‘Lentil Soup’, emoji: ‘🥣’, gradient: ‘from-orange-400 to-red-500’, calories: 280, protein: 18, carbs: 48, fats: 3, time: 40, servings: 4, category: ‘Lunch’, difficulty: ‘Easy’, ingredients: [‘Lentils’, ‘Carrots’, ‘Celery’, ‘Onion’, ‘Tomatoes’, ‘Vegetable broth’, ‘Cumin’, ‘Turmeric’], instructions: [‘Sauté vegetables in pot’, ‘Add lentils and broth’, ‘Season with spices’, ‘Simmer for 30 minutes’, ‘Blend partially for creamy texture’], tags: [‘low-fat’, ‘vegan’, ‘high-fiber’] },
{ id: 55, name: ‘Chicken & Rice Bowl’, emoji: ‘🍚’, gradient: ‘from-brown-300 to-green-400’, calories: 380, protein: 36, carbs: 48, fats: 6, time: 30, servings: 2, category: ‘Lunch’, difficulty: ‘Easy’, ingredients: [‘Chicken breast’, ‘Brown rice’, ‘Steamed broccoli’, ‘Carrots’, ‘Low-sodium teriyaki’, ‘Garlic’, ‘Ginger’], instructions: [‘Cook brown rice’, ‘Grill or bake chicken breast’, ‘Steam vegetables’, ‘Slice chicken’, ‘Assemble bowl and drizzle with teriyaki’], tags: [‘low-fat’, ‘high-protein’] },
{ id: 56, name: ‘Tuna Salad Lettuce Wraps’, emoji: ‘🥬’, gradient: ‘from-green-400 to-blue-400’, calories: 220, protein: 28, carbs: 12, fats: 6, time: 10, servings: 2, category: ‘Lunch’, difficulty: ‘Easy’, ingredients: [‘Canned tuna (in water)’, ‘Greek yogurt’, ‘Celery’, ‘Onion’, ‘Mustard’, ‘Lettuce leaves’, ‘Cherry tomatoes’], instructions: [‘Drain tuna well’, ‘Mix tuna with yogurt, celery, onion, mustard’, ‘Wash and dry lettuce leaves’, ‘Spoon tuna mixture into lettuce cups’, ‘Top with cherry tomatoes’], tags: [‘low-fat’, ‘high-protein’, ‘quick’] },
{ id: 57, name: ‘Veggie Omelette’, emoji: ‘🥚’, gradient: ‘from-yellow-400 to-red-500’, calories: 240, protein: 20, carbs: 12, fats: 12, time: 15, servings: 1, category: ‘Breakfast’, difficulty: ‘Easy’, ingredients: [‘Eggs (2 whole + 2 whites)’, ‘Spinach’, ‘Mushrooms’, ‘Tomatoes’, ‘Onion’, ‘Low-fat cheese’, ‘Herbs’], instructions: [‘Whisk eggs with herbs’, ‘Sauté vegetables in non-stick pan’, ‘Pour eggs over vegetables’, ‘Add cheese and fold omelette’, ‘Cook until set’], tags: [‘low-fat’, ‘vegetarian’, ‘high-protein’] },
{ id: 58, name: ‘Baked Chicken Breast’, emoji: ‘🍗’, gradient: ‘from-orange-300 to-yellow-400’, calories: 280, protein: 48, carbs: 4, fats: 6, time: 30, servings: 2, category: ‘Dinner’, difficulty: ‘Easy’, ingredients: [‘Chicken breast’, ‘Lemon’, ‘Rosemary’, ‘Garlic’, ‘Steamed vegetables’, ‘Low-sodium broth’], instructions: [‘Season chicken with herbs and garlic’, ‘Place in baking dish with lemon slices’, ‘Add a bit of broth to keep moist’, ‘Bake at 375°F for 25 minutes’, ‘Serve with steamed vegetables’], tags: [‘low-fat’, ‘high-protein’, ‘low-calorie’] },
{ id: 59, name: ‘Quinoa Veggie Bowl’, emoji: ‘🥙’, gradient: ‘from-green-500 to-yellow-500’, calories: 340, protein: 14, carbs: 52, fats: 8, time: 25, servings: 2, category: ‘Lunch’, difficulty: ‘Easy’, ingredients: [‘Quinoa’, ‘Chickpeas’, ‘Cucumber’, ‘Tomatoes’, ‘Red onion’, ‘Lemon juice’, ‘Herbs’], instructions: [‘Cook quinoa according to package’, ‘Dice all vegetables’, ‘Rinse and drain chickpeas’, ‘Combine all ingredients’, ‘Dress with lemon juice and herbs’], tags: [‘low-fat’, ‘vegan’, ‘high-fiber’] },
{ id: 60, name: ‘Turkey Meatball Marinara’, emoji: ‘🍝’, gradient: ‘from-red-500 to-orange-500’, calories: 320, protein: 38, carbs: 28, fats: 8, time: 35, servings: 3, category: ‘Dinner’, difficulty: ‘Medium’, ingredients: [‘Ground turkey (99% lean)’, ‘Egg white’, ‘Breadcrumbs’, ‘Marinara sauce’, ‘Italian herbs’, ‘Whole wheat pasta’, ‘Parmesan’], instructions: [‘Mix turkey with egg white, breadcrumbs, herbs’, ‘Form into meatballs’, ‘Bake at 400°F for 20 minutes’, ‘Heat marinara sauce’, ‘Serve over whole wheat pasta’], tags: [‘low-fat’, ‘high-protein’] }
];

const DAYS = [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’];
const MEALS = [‘Breakfast’, ‘Lunch’, ‘Dinner’];

const WORKOUT_CATEGORIES = [
{
id: ‘weightlifting’,
name: ‘Weightlifting’,
emoji: ‘🏋️’,
gradient: ‘from-blue-400 to-indigo-500’,
exercises: [
{ name: ‘Bench Press’, sets: 4, reps: 8 },
{ name: ‘Deadlifts’, sets: 4, reps: 6 },
{ name: ‘Squats’, sets: 4, reps: 10 },
{ name: ‘Overhead Press’, sets: 3, reps: 10 },
{ name: ‘Barbell Rows’, sets: 4, reps: 8 },
{ name: ‘Romanian Deadlifts’, sets: 3, reps: 12 },
{ name: ‘Lat Pulldowns’, sets: 3, reps: 12 },
{ name: ‘Leg Press’, sets: 4, reps: 12 },
{ name: ‘Bicep Curls’, sets: 3, reps: 12 },
{ name: ‘Tricep Extensions’, sets: 3, reps: 12 }
]
},
{
id: ‘calisthenics’,
name: ‘Calisthenics’,
emoji: ‘🤸’,
gradient: ‘from-green-400 to-emerald-500’,
exercises: [
{ name: ‘Push-ups’, sets: 3, reps: 15 },
{ name: ‘Pull-ups’, sets: 3, reps: 8 },
{ name: ‘Dips’, sets: 3, reps: 12 },
{ name: ‘Pistol Squats’, sets: 3, reps: 8 },
{ name: ‘Handstand Push-ups’, sets: 3, reps: 5 },
{ name: ‘Muscle-ups’, sets: 3, reps: 5 },
{ name: ‘L-sits’, sets: 3, reps: ‘30 sec’ },
{ name: ‘Planche Holds’, sets: 3, reps: ‘20 sec’ },
{ name: ‘Front Lever’, sets: 3, reps: ‘15 sec’ },
{ name: ‘Burpees’, sets: 3, reps: 15 }
]
},
{
id: ‘cardio’,
name: ‘Cardio’,
emoji: ‘🏃’,
gradient: ‘from-red-400 to-pink-500’,
exercises: [
{ name: ‘Running’, sets: 1, reps: ‘30 min’ },
{ name: ‘Jump Rope’, sets: 5, reps: ‘2 min’ },
{ name: ‘Cycling’, sets: 1, reps: ‘45 min’ },
{ name: ‘Rowing Machine’, sets: 1, reps: ‘20 min’ },
{ name: ‘Stair Climber’, sets: 1, reps: ‘15 min’ },
{ name: ‘High Knees’, sets: 4, reps: 30 },
{ name: ‘Mountain Climbers’, sets: 4, reps: 30 },
{ name: ‘Jumping Jacks’, sets: 4, reps: 40 },
{ name: ‘Box Jumps’, sets: 4, reps: 12 },
{ name: ‘Sprint Intervals’, sets: 8, reps: ‘30 sec’ }
]
},
{
id: ‘core’,
name: ‘Core & Abs’,
emoji: ‘🔥’,
gradient: ‘from-orange-400 to-red-500’,
exercises: [
{ name: ‘Plank’, sets: 3, reps: ‘60 sec’ },
{ name: ‘Crunches’, sets: 3, reps: 25 },
{ name: ‘Russian Twists’, sets: 3, reps: 40 },
{ name: ‘Leg Raises’, sets: 3, reps: 15 },
{ name: ‘Bicycle Crunches’, sets: 3, reps: 30 },
{ name: ‘V-ups’, sets: 3, reps: 15 },
{ name: ‘Mountain Climbers’, sets: 3, reps: 30 },
{ name: ‘Dead Bug’, sets: 3, reps: 20 },
{ name: ‘Hanging Knee Raises’, sets: 3, reps: 12 },
{ name: ‘Ab Wheel Rollouts’, sets: 3, reps: 10 }
]
},
{
id: ‘flexibility’,
name: ‘Flexibility & Yoga’,
emoji: ‘🧘’,
gradient: ‘from-purple-400 to-pink-400’,
exercises: [
{ name: ‘Downward Dog’, sets: 3, reps: ‘45 sec’ },
{ name: ‘Pigeon Pose’, sets: 3, reps: ‘60 sec’ },
{ name: ‘Child's Pose’, sets: 3, reps: ‘60 sec’ },
{ name: ‘Cat-Cow Stretch’, sets: 3, reps: 15 },
{ name: ‘Hamstring Stretch’, sets: 3, reps: ‘45 sec’ },
{ name: ‘Hip Flexor Stretch’, sets: 3, reps: ‘45 sec’ },
{ name: ‘Warrior Pose’, sets: 3, reps: ‘45 sec’ },
{ name: ‘Triangle Pose’, sets: 3, reps: ‘45 sec’ },
{ name: ‘Cobra Stretch’, sets: 3, reps: ‘30 sec’ },
{ name: ‘Spinal Twist’, sets: 3, reps: ‘45 sec’ }
]
},
{
id: ‘hiit’,
name: ‘HIIT’,
emoji: ‘⚡’,
gradient: ‘from-yellow-400 to-orange-500’,
exercises: [
{ name: ‘Burpees’, sets: 4, reps: 15 },
{ name: ‘Jump Squats’, sets: 4, reps: 20 },
{ name: ‘Plank Jacks’, sets: 4, reps: 20 },
{ name: ‘Tuck Jumps’, sets: 4, reps: 15 },
{ name: ‘Battle Ropes’, sets: 4, reps: ‘30 sec’ },
{ name: ‘Kettlebell Swings’, sets: 4, reps: 20 },
{ name: ‘Box Jumps’, sets: 4, reps: 15 },
{ name: ‘Speed Skaters’, sets: 4, reps: 20 },
{ name: ‘Medicine Ball Slams’, sets: 4, reps: 15 },
{ name: ‘Sprint in Place’, sets: 4, reps: ‘30 sec’ }
]
}
];

export default function CalorieFitMobileApp() {
const [currentView, setCurrentView] = useState(‘home’);
const [selectedRecipe, setSelectedRecipe] = useState(null);
const [favorites, setFavorites] = useState([]);
const [mealPlan, setMealPlan] = useState({});
const [tdeeResults, setTdeeResults] = useState(null);
const [unit, setUnit] = useState(‘metric’);
const [searchTerm, setSearchTerm] = useState(’’);
const [selectedDay, setSelectedDay] = useState(‘Mon’);
const [messages, setMessages] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [selectedWorkout, setSelectedWorkout] = useState(null);
const [completedWorkouts, setCompletedWorkouts] = useState([]);
const [selectedCategory, setSelectedCategory] = useState(null);
const [showMealSelector, setShowMealSelector] = useState(null);
const [isGeneratingMeals, setIsGeneratingMeals] = useState(false);
const [showAIRecipeGenerator, setShowAIRecipeGenerator] = useState(false);
const [aiRecipePrompt, setAiRecipePrompt] = useState(’’);
const [isGeneratingRecipe, setIsGeneratingRecipe] = useState(false);
const [customRecipes, setCustomRecipes] = useState([]);
const [animateIn, setAnimateIn] = useState(false);
const [darkMode, setDarkMode] = useState(false);
const [showMenu, setShowMenu] = useState(false);

// New social features state
const [userProfile, setUserProfile] = useState(null);
const [friends, setFriends] = useState([]);
const [friendRequests, setFriendRequests] = useState([]);
const [chatMessages, setChatMessages] = useState({});
const [selectedFriend, setSelectedFriend] = useState(null);
const [showProfileSetup, setShowProfileSetup] = useState(false);
const [searchUsers, setSearchUsers] = useState(’’);
const [allUsers, setAllUsers] = useState([
{ id: ‘user1’, username: ‘FitJohn’, name: ‘John Smith’, avatar: ‘💪’, status: ‘Crushing my goals!’, workouts: 45, calories: 2200 },
{ id: ‘user2’, username: ‘HealthyEmma’, name: ‘Emma Wilson’, avatar: ‘🏃‍♀️’, status: ‘Marathon training’, workouts: 62, calories: 1800 },
{ id: ‘user3’, username: ‘GymRat_Mike’, name: ‘Mike Johnson’, avatar: ‘🏋️’, status: ‘Leg day best day’, workouts: 88, calories: 2800 },
{ id: ‘user4’, username: ‘YogaSarah’, name: ‘Sarah Lee’, avatar: ‘🧘‍♀️’, status: ‘Finding balance’, workouts: 34, calories: 1600 },
{ id: ‘user5’, username: ‘CardioKing’, name: ‘David Chen’, avatar: ‘🚴’, status: ‘Run, bike, repeat’, workouts: 71, calories: 2400 }
]);

useEffect(() => {
setAnimateIn(true);
const savedFavorites = localStorage.getItem(‘favoriteRecipes’);
const savedMealPlan = localStorage.getItem(‘mealPlan’);
const savedTdee = localStorage.getItem(‘tdeeData’);
const savedMessages = localStorage.getItem(‘coachMessages’);
const savedWorkouts = localStorage.getItem(‘completedWorkouts’);
const savedCustomRecipes = localStorage.getItem(‘customRecipes’);
const savedProfile = localStorage.getItem(‘userProfile’);
const savedFriends = localStorage.getItem(‘friends’);
const savedChatMessages = localStorage.getItem(‘chatMessages’);
const savedFriendRequests = localStorage.getItem(‘friendRequests’);
const savedDarkMode = localStorage.getItem(‘darkMode’);

```
if (savedFavorites) setFavorites(JSON.parse(savedFavorites));
if (savedMealPlan) setMealPlan(JSON.parse(savedMealPlan));
if (savedMessages) setMessages(JSON.parse(savedMessages));
if (savedWorkouts) setCompletedWorkouts(JSON.parse(savedWorkouts));
if (savedCustomRecipes) setCustomRecipes(JSON.parse(savedCustomRecipes));
if (savedFriends) setFriends(JSON.parse(savedFriends));
if (savedChatMessages) setChatMessages(JSON.parse(savedChatMessages));
if (savedFriendRequests) setFriendRequests(JSON.parse(savedFriendRequests));
if (savedDarkMode) setDarkMode(JSON.parse(savedDarkMode));

if (savedTdee) {
  const data = JSON.parse(savedTdee);
  setTdeeResults(data.results);
  setUnit(data.unit || 'metric');
}

if (savedProfile) {
  setUserProfile(JSON.parse(savedProfile));
}
// Don't force profile setup on first load - let users explore the app first
```

}, []);

useEffect(() => {
setAnimateIn(false);
setTimeout(() => setAnimateIn(true), 50);
}, [currentView]);

const toggleFavorite = (recipeId) => {
const newFavorites = favorites.includes(recipeId) ? favorites.filter(id => id !== recipeId) : […favorites, recipeId];
setFavorites(newFavorites);
localStorage.setItem(‘favoriteRecipes’, JSON.stringify(newFavorites));
};

const sendFriendRequest = (userId) => {
if (!friends.find(f => f.id === userId) && !friendRequests.find(r => r.id === userId)) {
const user = allUsers.find(u => u.id === userId);
const newRequests = […friendRequests, { …user, status: ‘pending’ }];
setFriendRequests(newRequests);
localStorage.setItem(‘friendRequests’, JSON.stringify(newRequests));
}
};

const acceptFriendRequest = (userId) => {
const user = friendRequests.find(r => r.id === userId);
if (user) {
const newFriends = […friends, user];
const newRequests = friendRequests.filter(r => r.id !== userId);
setFriends(newFriends);
setFriendRequests(newRequests);
localStorage.setItem(‘friends’, JSON.stringify(newFriends));
localStorage.setItem(‘friendRequests’, JSON.stringify(newRequests));

```
  // Initialize empty chat for new friend
  const newChats = { ...chatMessages, [userId]: [] };
  setChatMessages(newChats);
  localStorage.setItem('chatMessages', JSON.stringify(newChats));
}
```

};

const rejectFriendRequest = (userId) => {
const newRequests = friendRequests.filter(r => r.id !== userId);
setFriendRequests(newRequests);
localStorage.setItem(‘friendRequests’, JSON.stringify(newRequests));
};

const sendChatMessage = (friendId, message) => {
const timestamp = new Date().toISOString();
const newMessage = {
id: Date.now(),
text: message,
sender: ‘me’,
timestamp
};

```
const updatedChats = {
  ...chatMessages,
  [friendId]: [...(chatMessages[friendId] || []), newMessage]
};

setChatMessages(updatedChats);
localStorage.setItem('chatMessages', JSON.stringify(updatedChats));

// Simulate friend response after 2 seconds
setTimeout(() => {
  const responses = [
    "That's awesome! Keep it up! 💪",
    "Great job! You're crushing it!",
    "Nice work! Let's stay motivated together!",
    "That's inspiring! 🔥",
    "Amazing progress! Keep going!"
  ];
  const friendResponse = {
    id: Date.now() + 1,
    text: responses[Math.floor(Math.random() * responses.length)],
    sender: 'friend',
    timestamp: new Date().toISOString()
  };
  
  const updatedChatsWithResponse = {
    ...updatedChats,
    [friendId]: [...updatedChats[friendId], friendResponse]
  };
  
  setChatMessages(updatedChatsWithResponse);
  localStorage.setItem('chatMessages', JSON.stringify(updatedChatsWithResponse));
}, 2000);
```

};

const createProfile = (profileData) => {
console.log(’=== CREATE PROFILE CALLED ===’);
console.log(‘Profile data received:’, profileData);

```
if (!profileData.name || !profileData.username) {
  console.error('Validation failed - missing required fields');
  alert('Please fill in all required fields (Name and Username)');
  return;
}

const newProfile = {
  ...profileData,
  id: 'me',
  createdAt: new Date().toISOString()
};

console.log('New profile object created:', newProfile);

try {
  // Save to state
  setUserProfile(newProfile);
  console.log('setUserProfile called');
  
  // Save to localStorage
  localStorage.setItem('userProfile', JSON.stringify(newProfile));
  console.log('localStorage saved');
  
  // Verify localStorage
  const saved = localStorage.getItem('userProfile');
  console.log('Verification - localStorage contains:', saved);
  
  // Close modal
  setShowProfileSetup(false);
  console.log('Modal closed');
  
  // Force re-render and show success
  setTimeout(() => {
    console.log('Current userProfile state:', userProfile);
    alert('✅ Profile created successfully!\n\nRefresh if you don\'t see it.');
    // Force page to recognize the profile
    window.location.hash = '#profile-created';
  }, 200);
} catch (error) {
  console.error('Error creating profile:', error);
  alert('Error creating profile. Check console for details.');
}
```

};

const toggleDarkMode = () => {
const newMode = !darkMode;
setDarkMode(newMode);
localStorage.setItem(‘darkMode’, JSON.stringify(newMode));
};

const completeWorkout = (workoutId) => {
const today = new Date().toISOString().split(‘T’)[0];
const newCompleted = […completedWorkouts, { workoutId, date: today }];
setCompletedWorkouts(newCompleted);
localStorage.setItem(‘completedWorkouts’, JSON.stringify(newCompleted));
setSelectedWorkout(null);
setSelectedCategory(null);
};

const generateAIMealPlan = async () => {
if (isGeneratingMeals) return;

```
setIsGeneratingMeals(true);

try {
  const calorieTarget = tdeeResults?.calorieGoal || 2000;
  const proteinTarget = tdeeResults?.macros?.protein || 150;
  
  const response = await fetch('https://api.anthropic.com/v1/messages', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      model: 'claude-sonnet-4-20250514',
      max_tokens: 1000,
      messages: [
        {
          role: 'user',
          content: `Generate 3 meal suggestions (breakfast, lunch, dinner) for a ${calorieTarget} calorie day. Each meal should include the name, approximate calories, protein, carbs, and fats. Target ${proteinTarget}g protein total. Return ONLY valid JSON in this exact format with no markdown or preamble:
```

{
“Breakfast”: {“name”: “…”, “calories”: 0, “protein”: 0, “carbs”: 0, “fats”: 0},
“Lunch”: {“name”: “…”, “calories”: 0, “protein”: 0, “carbs”: 0, “fats”: 0},
“Dinner”: {“name”: “…”, “calories”: 0, “protein”: 0, “carbs”: 0, “fats”: 0}
}`
}
]
})
});

```
  const data = await response.json();
  const content = data.content[0].text.trim();
  
  const cleanedContent = content.replace(/```json\n?|\n?```/g, '').trim();
  const meals = JSON.parse(cleanedContent);
  
  const updated = { ...mealPlan };
  Object.keys(meals).forEach((mealType) => {
    const key = `${selectedDay}-${mealType}`;
    updated[key] = {
      ...meals[mealType],
      id: `ai-${Date.now()}-${mealType}`,
      emoji: mealType === 'Breakfast' ? '🍳' : mealType === 'Lunch' ? '🥗' : '🍽️',
      gradient: mealType === 'Breakfast' ? 'from-yellow-400 to-orange-400' : mealType === 'Lunch' ? 'from-green-400 to-emerald-400' : 'from-purple-400 to-pink-400',
      time: 20,
      servings: 1,
      category: mealType,
      difficulty: 'Medium',
      ingredients: ['AI-generated meal - ingredients not listed'],
      instructions: ['AI-generated meal - follow standard preparation'],
      tags: ['ai-generated']
    };
  });
  
  setMealPlan(updated);
  localStorage.setItem('mealPlan', JSON.stringify(updated));
  
} catch (error) {
  console.error('Error generating meals:', error);
  alert('Failed to generate meal plan. Please try again.');
} finally {
  setIsGeneratingMeals(false);
}
```

};

const HamburgerMenu = () => (
<>
{/* Enhanced Hamburger Button - Fixed top right */}
<button
onClick={() => setShowMenu(!showMenu)}
className={`fixed top-6 right-6 z-50 p-4 rounded-2xl shadow-2xl transition-all duration-300 hover:scale-110 active:scale-95 ${ showMenu  ? 'bg-gradient-to-br from-teal-500 to-cyan-500 rotate-90 scale-110'  : darkMode  ? 'bg-gradient-to-br from-slate-800 to-slate-700 border-2 border-slate-600 hover:border-slate-500'  : 'bg-gradient-to-br from-white to-slate-50 border-2 border-slate-200 hover:border-slate-300 hover:shadow-xl' }`}
>
{showMenu ? (
<X className="w-7 h-7 text-white" />
) : (
<div className="relative">
<svg className={`w-7 h-7 ${darkMode ? 'text-white' : 'text-slate-800'}`} fill=“none” stroke=“currentColor” viewBox=“0 0 24 24”>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M4 6h16M4 12h16M4 18h16" />
</svg>
{/* Pulse indicator */}
<div className="absolute -top-1 -right-1 w-3 h-3 bg-gradient-to-br from-teal-500 to-cyan-500 rounded-full animate-pulse" />
</div>
)}
</button>

```
  {/* Slide-out Menu */}
  {showMenu && (
    <div 
      className="fixed inset-0 z-40"
      onClick={() => setShowMenu(false)}
    >
      {/* Backdrop */}
      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-[fadeIn_0.2s_ease-out]" />
      
      {/* Menu Panel */}
      <div 
        className={`absolute top-0 right-0 h-full w-80 shadow-2xl overflow-y-auto animate-[slideInRight_0.3s_ease-out] ${
          darkMode ? 'bg-slate-900' : 'bg-white'
        }`}
        onClick={(e) => e.stopPropagation()}
      >
        <div className="p-6 pt-20">
          {/* Header */}
          <div className="mb-8">
            <h2 className={`text-3xl font-black mb-2 bg-gradient-to-r from-teal-600 to-cyan-600 bg-clip-text text-transparent`}>
              Menu
            </h2>
            <p className={`text-sm ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>
              Navigate to any section
            </p>
          </div>

          {/* Main Navigation */}
          <div className="space-y-2 mb-8">
            <p className={`text-xs font-bold uppercase tracking-wider mb-3 ${darkMode ? 'text-slate-500' : 'text-slate-400'}`}>
              Main
            </p>
            {[
              { view: 'home', icon: Home, label: 'Home', desc: 'Dashboard', gradient: 'from-teal-500 to-cyan-500', emoji: '🏠' },
              { view: 'workouts', icon: Dumbbell, label: 'Workouts', desc: 'Training programs', gradient: 'from-orange-500 to-red-500', emoji: '💪' },
              { view: 'recipes', icon: UtensilsCrossed, label: 'Recipes', desc: '60+ meals', gradient: 'from-green-500 to-emerald-500', emoji: '🍽️' },
              { view: 'mealplan', icon: Calendar, label: 'Meal Plan', desc: 'Weekly planner', gradient: 'from-purple-500 to-pink-500', emoji: '📅' },
            ].map(item => (
              <button
                key={item.view}
                onClick={() => {
                  setCurrentView(item.view);
                  setShowMenu(false);
                }}
                className={`w-full p-4 rounded-xl flex items-center gap-4 transition-all duration-300 group relative overflow-hidden ${
                  currentView === item.view
                    ? `bg-gradient-to-r ${item.gradient} text-white shadow-xl scale-105`
                    : darkMode 
                      ? 'hover:bg-slate-800 text-slate-300 hover:shadow-lg hover:scale-105 hover:-translate-x-1' 
                      : 'hover:bg-slate-50 text-slate-700 hover:shadow-lg hover:scale-105 hover:-translate-x-1'
                }`}
              >
                {/* Shimmer effect on hover */}
                {currentView !== item.view && (
                  <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 shimmer pointer-events-none" />
                )}
                
                <div className={`w-12 h-12 rounded-xl flex items-center justify-center text-2xl transition-all duration-300 relative z-10 ${
                  currentView === item.view
                    ? 'bg-white/20 scale-110'
                    : darkMode 
                      ? 'bg-slate-800 group-hover:scale-125 group-hover:rotate-12' 
                      : 'bg-slate-100 group-hover:scale-125 group-hover:rotate-12'
                }`}>
                  {item.emoji}
                </div>
                <div className="flex-1 text-left relative z-10">
                  <p className={`font-bold transition-all duration-300 ${currentView !== item.view && 'group-hover:translate-x-1'}`}>{item.label}</p>
                  <p className={`text-xs transition-all duration-300 ${
                    currentView === item.view 
                      ? 'text-white/80' 
                      : darkMode 
                        ? 'text-slate-500 group-hover:text-slate-400' 
                        : 'text-slate-500 group-hover:text-slate-600'
                  } ${currentView !== item.view && 'group-hover:translate-x-1'}`}>
                    {item.desc}
                  </p>
                </div>
                {currentView === item.view ? (
                  <CheckCircle className="w-5 h-5 animate-pulse relative z-10" />
                ) : (
                  <ChevronRight className={`w-5 h-5 opacity-0 group-hover:opacity-100 transition-all duration-300 group-hover:translate-x-1 relative z-10 ${
                    darkMode ? 'text-slate-400' : 'text-slate-500'
                  }`} />
                )}
              </button>
            ))}
          </div>

          {/* Tools */}
          <div className="space-y-2 mb-8">
            <p className={`text-xs font-bold uppercase tracking-wider mb-3 ${darkMode ? 'text-slate-500' : 'text-slate-400'}`}>
              Tools
            </p>
            {[
              { view: 'calculator', icon: Calculator, label: 'TDEE Calculator', desc: 'Calculate goals', gradient: 'from-blue-500 to-indigo-500', emoji: '🧮' },
              { view: 'coach', icon: MessageCircle, label: 'AI Coach', desc: 'Ask questions', gradient: 'from-indigo-500 to-purple-500', emoji: '🤖' },
            ].map(item => (
              <button
                key={item.view}
                onClick={() => {
                  setCurrentView(item.view);
                  setShowMenu(false);
                }}
                className={`w-full p-4 rounded-xl flex items-center gap-4 transition-all duration-300 group relative overflow-hidden ${
                  currentView === item.view
                    ? `bg-gradient-to-r ${item.gradient} text-white shadow-xl scale-105`
                    : darkMode 
                      ? 'hover:bg-slate-800 text-slate-300 hover:shadow-lg hover:scale-105 hover:-translate-x-1' 
                      : 'hover:bg-slate-50 text-slate-700 hover:shadow-lg hover:scale-105 hover:-translate-x-1'
                }`}
              >
                {/* Shimmer effect on hover */}
                {currentView !== item.view && (
                  <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 shimmer pointer-events-none" />
                )}
                
                <div className={`w-12 h-12 rounded-xl flex items-center justify-center text-2xl transition-all duration-300 relative z-10 ${
                  currentView === item.view
                    ? 'bg-white/20 scale-110'
                    : darkMode 
                      ? 'bg-slate-800 group-hover:scale-125 group-hover:rotate-12' 
                      : 'bg-slate-100 group-hover:scale-125 group-hover:rotate-12'
                }`}>
                  {item.emoji}
                </div>
                <div className="flex-1 text-left relative z-10">
                  <p className={`font-bold transition-all duration-300 ${currentView !== item.view && 'group-hover:translate-x-1'}`}>{item.label}</p>
                  <p className={`text-xs transition-all duration-300 ${
                    currentView === item.view 
                      ? 'text-white/80' 
                      : darkMode 
                        ? 'text-slate-500 group-hover:text-slate-400' 
                        : 'text-slate-500 group-hover:text-slate-600'
                  } ${currentView !== item.view && 'group-hover:translate-x-1'}`}>
                    {item.desc}
                  </p>
                </div>
                {currentView === item.view ? (
                  <CheckCircle className="w-5 h-5 animate-pulse relative z-10" />
                ) : (
                  <ChevronRight className={`w-5 h-5 opacity-0 group-hover:opacity-100 transition-all duration-300 group-hover:translate-x-1 relative z-10 ${
                    darkMode ? 'text-slate-400' : 'text-slate-500'
                  }`} />
                )}
              </button>
            ))}
          </div>

          {/* Social */}
          <div className="space-y-2 mb-8">
            <p className={`text-xs font-bold uppercase tracking-wider mb-3 ${darkMode ? 'text-slate-500' : 'text-slate-400'}`}>
              Social
            </p>
            <button
              onClick={() => {
                setCurrentView('social');
                setShowMenu(false);
              }}
              className={`w-full p-4 rounded-xl flex items-center gap-4 transition-all duration-300 group relative overflow-hidden ${
                currentView === 'social'
                  ? 'bg-gradient-to-r from-pink-500 to-rose-500 text-white shadow-xl scale-105'
                  : darkMode 
                    ? 'hover:bg-slate-800 text-slate-300 hover:shadow-lg hover:scale-105 hover:-translate-x-1' 
                    : 'hover:bg-slate-50 text-slate-700 hover:shadow-lg hover:scale-105 hover:-translate-x-1'
              }`}
            >
              {/* Shimmer effect */}
              {currentView !== 'social' && (
                <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 shimmer pointer-events-none" />
              )}
              
              <div className={`w-12 h-12 rounded-xl flex items-center justify-center relative text-2xl transition-all duration-300 z-10 ${
                currentView === 'social'
                  ? 'bg-white/20 scale-110'
                  : darkMode 
                    ? 'bg-slate-800 group-hover:scale-125 group-hover:rotate-12' 
                    : 'bg-slate-100 group-hover:scale-125 group-hover:rotate-12'
              }`}>
                👥
                {friendRequests.length > 0 && (
                  <div className="absolute -top-1 -right-1 w-6 h-6 bg-red-500 rounded-full flex items-center justify-center border-2 border-white animate-pulse">
                    <span className="text-white text-xs font-bold">{friendRequests.length}</span>
                  </div>
                )}
              </div>
              <div className="flex-1 text-left relative z-10">
                <p className={`font-bold transition-all duration-300 ${currentView !== 'social' && 'group-hover:translate-x-1'}`}>Social</p>
                <p className={`text-xs transition-all duration-300 ${
                  currentView === 'social' 
                    ? 'text-white/80' 
                    : darkMode 
                      ? 'text-slate-500 group-hover:text-slate-400' 
                      : 'text-slate-500 group-hover:text-slate-600'
                } ${currentView !== 'social' && 'group-hover:translate-x-1'}`}>
                  Friends & chat
                </p>
              </div>
              {currentView === 'social' ? (
                <CheckCircle className="w-5 h-5 animate-pulse relative z-10" />
              ) : (
                <ChevronRight className={`w-5 h-5 opacity-0 group-hover:opacity-100 transition-all duration-300 group-hover:translate-x-1 relative z-10 ${
                  darkMode ? 'text-slate-400' : 'text-slate-500'
                }`} />
              )}
            </button>

            <button
              onClick={() => {
                setCurrentView('profile');
                setShowMenu(false);
              }}
              className={`w-full p-4 rounded-xl flex items-center gap-4 transition-all duration-300 group relative overflow-hidden ${
                currentView === 'profile'
                  ? 'bg-gradient-to-r from-amber-500 to-orange-500 text-white shadow-xl scale-105'
                  : darkMode 
                    ? 'hover:bg-slate-800 text-slate-300 hover:shadow-lg hover:scale-105 hover:-translate-x-1' 
                    : 'hover:bg-slate-50 text-slate-700 hover:shadow-lg hover:scale-105 hover:-translate-x-1'
              }`}
            >
              {/* Shimmer effect */}
              {currentView !== 'profile' && (
                <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 shimmer pointer-events-none" />
              )}
              
              <div className={`w-12 h-12 rounded-xl flex items-center justify-center text-2xl transition-all duration-300 relative z-10 ${
                currentView === 'profile'
                  ? 'bg-white/20 scale-110'
                  : darkMode 
                    ? 'bg-slate-800 group-hover:scale-125 group-hover:rotate-12' 
                    : 'bg-slate-100 group-hover:scale-125 group-hover:rotate-12'
              }`}>
                👤
              </div>
              <div className="flex-1 text-left relative z-10">
                <p className={`font-bold transition-all duration-300 ${currentView !== 'profile' && 'group-hover:translate-x-1'}`}>Profile</p>
                <p className={`text-xs transition-all duration-300 ${
                  currentView === 'profile' 
                    ? 'text-white/80' 
                    : darkMode 
                      ? 'text-slate-500 group-hover:text-slate-400' 
                      : 'text-slate-500 group-hover:text-slate-600'
                } ${currentView !== 'profile' && 'group-hover:translate-x-1'}`}>
                  Settings & stats
                </p>
              </div>
              {currentView === 'profile' ? (
                <CheckCircle className="w-5 h-5 animate-pulse relative z-10" />
              ) : (
                <ChevronRight className={`w-5 h-5 opacity-0 group-hover:opacity-100 transition-all duration-300 group-hover:translate-x-1 relative z-10 ${
                  darkMode ? 'text-slate-400' : 'text-slate-500'
                }`} />
              )}
            </button>
          </div>

          {/* Quick Settings */}
          <div className="space-y-2">
            <p className={`text-xs font-bold uppercase tracking-wider mb-3 ${darkMode ? 'text-slate-500' : 'text-slate-400'}`}>
              Quick Settings
            </p>
            <button
              onClick={() => {
                toggleDarkMode();
              }}
              className={`w-full p-4 rounded-xl flex items-center gap-4 transition-all duration-300 group hover:scale-105 hover:-translate-x-1 hover:shadow-lg ${
                darkMode 
                  ? 'hover:bg-slate-800 text-slate-300' 
                  : 'hover:bg-slate-50 text-slate-700'
              }`}
            >
              <div className={`w-12 h-12 rounded-xl flex items-center justify-center transition-all duration-300 group-hover:scale-125 ${
                darkMode ? 'bg-slate-800 group-hover:rotate-12' : 'bg-slate-100 group-hover:rotate-12'
              }`}>
                {darkMode ? (
                  <Sun className="w-6 h-6 text-yellow-400 group-hover:rotate-180 transition-transform duration-500" />
                ) : (
                  <Moon className="w-6 h-6 text-indigo-500 group-hover:rotate-12 transition-transform duration-300" />
                )}
              </div>
              <div className="flex-1 text-left">
                <p className={`font-bold transition-all duration-300 group-hover:translate-x-1`}>{darkMode ? 'Light Mode' : 'Dark Mode'}</p>
                <p className={`text-xs transition-all duration-300 group-hover:translate-x-1 ${darkMode ? 'text-slate-500 group-hover:text-slate-400' : 'text-slate-500 group-hover:text-slate-600'}`}>
                  Toggle theme
                </p>
              </div>
              <div className={`w-14 h-7 rounded-full transition-all duration-300 ${darkMode ? 'bg-teal-600' : 'bg-slate-300'}`}>
                <div className={`w-6 h-6 rounded-full bg-white shadow-lg transform transition-all duration-300 mt-0.5 ${
                  darkMode ? 'translate-x-7 ml-1' : 'translate-x-0.5'
                }`} />
              </div>
            </button>
          </div>

          {/* App Info */}
          <div className={`mt-8 p-4 rounded-xl border-2 ${darkMode ? 'bg-slate-800/50 border-slate-700' : 'bg-slate-50 border-slate-200'}`}>
            <div className="flex items-center gap-3 mb-2">
              <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-teal-500 to-cyan-500 flex items-center justify-center">
                <Zap className="w-6 h-6 text-white" />
              </div>
              <div>
                <p className={`font-bold ${darkMode ? 'text-slate-200' : 'text-slate-800'}`}>CalorieFit</p>
                <p className={`text-xs ${darkMode ? 'text-slate-500' : 'text-slate-400'}`}>Version 1.0</p>
              </div>
            </div>
            <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>
              Your AI-powered fitness companion
            </p>
          </div>
        </div>
      </div>
    </div>
  )}
</>
```

);

const HomeView = () => {
const getGreeting = () => {
const hour = new Date().getHours();
if (hour < 12) return { text: ‘Good Morning’, icon: Sun, color: ‘text-orange-400’ };
if (hour < 18) return { text: ‘Good Afternoon’, icon: Sun, color: ‘text-yellow-400’ };
return { text: ‘Good Evening’, icon: Moon, color: ‘text-indigo-400’ };
};

```
const greeting = getGreeting();
const GreetingIcon = greeting.icon;

return (
  <div className={`pb-6 min-h-screen transition-all duration-500 ${animateIn ? 'opacity-100' : 'opacity-0'} ${darkMode ? 'bg-gradient-to-b from-slate-900 to-slate-800' : 'bg-gradient-to-b from-slate-50 to-white'}`}>
    {/* Hero Header with Gradient */}
    <div className={`relative px-6 pt-14 pb-12 overflow-hidden ${darkMode ? 'bg-gradient-to-br from-teal-700 via-teal-800 to-cyan-900' : 'bg-gradient-to-br from-teal-500 via-teal-600 to-cyan-600'}`}>
      {/* Decorative circles */}
      <div className="absolute top-0 right-0 w-40 h-40 bg-white/10 rounded-full blur-3xl" />
      <div className="absolute bottom-0 left-0 w-32 h-32 bg-white/10 rounded-full blur-2xl" />
      
      <div className="relative z-10">
        <div className="flex items-center justify-between mb-3">
          <div className="flex items-center gap-2">
            <GreetingIcon className={`w-6 h-6 ${greeting.color}`} />
            <p className="text-teal-100 font-medium">{greeting.text}</p>
          </div>
          <button
            onClick={toggleDarkMode}
            className="p-2 bg-white/20 hover:bg-white/30 rounded-xl transition-all duration-300"
          >
            {darkMode ? <Sun className="w-5 h-5 text-yellow-300" /> : <Moon className="w-5 h-5 text-slate-700" />}
          </button>
        </div>
        <h1 className="text-4xl font-bold text-white mb-2 tracking-tight">CalorieFit</h1>
        <p className="text-teal-100 text-sm">Let's crush your goals today 💪</p>
      </div>
    </div>
  
    {/* Stats Card */}
    {tdeeResults && (
      <div className={`px-6 -mt-8 mb-6 transition-all duration-700 ${animateIn ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'}`}>
        <div className="bg-white rounded-3xl shadow-xl p-6 border border-slate-100">
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center gap-2">
              <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-teal-400 to-cyan-500 flex items-center justify-center">
                <Target className="w-5 h-5 text-white" />
              </div>
              <div>
                <p className="text-xs text-slate-500 font-medium">Daily Target</p>
                <p className="text-sm text-slate-400">Stay on track</p>
              </div>
            </div>
            <Award className="w-8 h-8 text-amber-400" />
          </div>
          
          <div className="flex items-baseline gap-2 mb-4">
            <span className="text-5xl font-bold bg-gradient-to-r from-teal-600 to-cyan-600 bg-clip-text text-transparent">
              {tdeeResults.calorieGoal}
            </span>
            <span className="text-slate-400 text-lg">cal</span>
          </div>

          {/* Macro rings */}
          <div className="grid grid-cols-3 gap-3">
            <div className="text-center p-3 rounded-2xl bg-blue-50">
              <div className="w-12 h-12 mx-auto mb-2 relative">
                <svg className="w-full h-full transform -rotate-90">
                  <circle cx="24" cy="24" r="20" stroke="#dbeafe" strokeWidth="4" fill="none" />
                  <circle cx="24" cy="24" r="20" stroke="#3b82f6" strokeWidth="4" fill="none" 
                    strokeDasharray={`${(tdeeResults.macros.protein / 200) * 125} 125`} />
                </svg>
                <div className="absolute inset-0 flex items-center justify-center">
                  <Zap className="w-5 h-5 text-blue-500" />
                </div>
              </div>
              <p className="text-xs text-slate-500 mb-1">Protein</p>
              <p className="text-sm font-bold text-slate-800">{tdeeResults.macros.protein}g</p>
            </div>
            
            <div className="text-center p-3 rounded-2xl bg-green-50">
              <div className="w-12 h-12 mx-auto mb-2 relative">
                <svg className="w-full h-full transform -rotate-90">
                  <circle cx="24" cy="24" r="20" stroke="#dcfce7" strokeWidth="4" fill="none" />
                  <circle cx="24" cy="24" r="20" stroke="#22c55e" strokeWidth="4" fill="none" 
                    strokeDasharray={`${(tdeeResults.macros.carbs / 300) * 125} 125`} />
                </svg>
                <div className="absolute inset-0 flex items-center justify-center">
                  <Coffee className="w-5 h-5 text-green-500" />
                </div>
              </div>
              <p className="text-xs text-slate-500 mb-1">Carbs</p>
              <p className="text-sm font-bold text-slate-800">{tdeeResults.macros.carbs}g</p>
            </div>
            
            <div className="text-center p-3 rounded-2xl bg-amber-50">
              <div className="w-12 h-12 mx-auto mb-2 relative">
                <svg className="w-full h-full transform -rotate-90">
                  <circle cx="24" cy="24" r="20" stroke="#fef3c7" strokeWidth="4" fill="none" />
                  <circle cx="24" cy="24" r="20" stroke="#f59e0b" strokeWidth="4" fill="none" 
                    strokeDasharray={`${(tdeeResults.macros.fats / 100) * 125} 125`} />
                </svg>
                <div className="absolute inset-0 flex items-center justify-center">
                  <Droplets className="w-5 h-5 text-amber-500" />
                </div>
              </div>
              <p className="text-xs text-slate-500 mb-1">Fats</p>
              <p className="text-sm font-bold text-slate-800">{tdeeResults.macros.fats}g</p>
            </div>
          </div>
        </div>
      </div>
    )}

    {/* Quick Actions */}
    <div className="px-6 space-y-3">
      <div className="flex items-center justify-between mb-4">
        <h2 className={`font-bold text-lg ${darkMode ? 'text-slate-200' : 'text-slate-800'}`}>Quick Access</h2>
        <p className={`text-xs ${darkMode ? 'text-slate-500' : 'text-slate-400'}`}>Tap menu for more</p>
      </div>

      {[
        { view: 'workouts', icon: Dumbbell, title: 'Start Workout', desc: 'Browse programs', gradient: 'from-orange-500 to-red-500', delay: '0s' },
        { view: 'coach', icon: MessageCircle, title: 'AI Coach', desc: 'Ask anything', gradient: 'from-indigo-500 to-purple-500', delay: '0.1s' }
      ].map((action, idx) => (
        <button 
          key={action.view}
          onClick={() => setCurrentView(action.view)} 
          className={`w-full group rounded-2xl p-5 flex items-center justify-between shadow-sm hover:shadow-2xl transition-all duration-300 border relative overflow-hidden hover-lift ${
            darkMode 
              ? 'bg-slate-800 border-slate-700 hover:border-slate-600' 
              : 'bg-white border-slate-100 hover:border-slate-200'
          } ${animateIn ? 'translate-x-0 opacity-100' : 'translate-x-4 opacity-0'}`}
          style={{ 
            transitionDelay: animateIn ? action.delay : '0s'
          }}
        >
          {/* Hover shimmer effect */}
          <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 shimmer pointer-events-none" />
          
          <div className="flex items-center gap-4 relative z-10">
            <div className={`w-14 h-14 bg-gradient-to-br ${action.gradient} rounded-2xl flex items-center justify-center shadow-lg transition-all duration-300 group-hover:scale-110 group-hover:rotate-3`}>
              <action.icon className="w-7 h-7 text-white group-hover:scale-110 transition-transform duration-300" />
            </div>
            <div className="text-left">
              <p className={`font-bold text-lg transition-colors duration-300 ${darkMode ? 'text-slate-200 group-hover:text-white' : 'text-slate-800 group-hover:text-slate-900'}`}>{action.title}</p>
              <p className={`text-sm transition-colors duration-300 ${darkMode ? 'text-slate-400 group-hover:text-slate-300' : 'text-slate-500 group-hover:text-slate-600'}`}>{action.desc}</p>
            </div>
          </div>
          <div className={`w-10 h-10 rounded-xl flex items-center justify-center transition-all duration-300 group-hover:bg-gradient-to-br group-hover:${action.gradient} ${
            darkMode ? 'bg-slate-700/50 group-hover:scale-110' : 'bg-slate-50 group-hover:scale-110'
          }`}>
            <ChevronRight className={`w-6 h-6 transition-all duration-300 group-hover:translate-x-1 group-hover:text-white ${darkMode ? 'text-slate-400' : 'text-slate-500'}`} />
          </div>
        </button>
      ))}
    </div>

    {/* Motivational Quote */}
    <div className={`mx-6 mt-6 p-6 rounded-2xl border transition-all duration-700 ${
      darkMode 
        ? 'bg-gradient-to-br from-indigo-900/40 to-purple-900/40 border-indigo-800' 
        : 'bg-gradient-to-br from-indigo-50 to-purple-50 border-indigo-100'
    } ${animateIn ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'}`} style={{transitionDelay: '0.3s'}}>
      <p className={`text-sm italic mb-2 ${darkMode ? 'text-indigo-200' : 'text-indigo-900'}`}>"The only bad workout is the one that didn't happen."</p>
      <p className={`text-xs ${darkMode ? 'text-indigo-400' : 'text-indigo-600'}`}>— Keep pushing forward!</p>
    </div>
  </div>
);
```

};

const CalculatorView = () => {
const [formData, setFormData] = useState({ age: ‘’, gender: ‘male’, weight: ‘’, height: ‘’, heightFeet: ‘’, heightInches: ‘’, currentWeight: ‘’, targetWeight: ‘’, pace: 1 });

```
const handleCalculate = () => {
  if (!formData.age || !formData.weight || !formData.currentWeight || !formData.targetWeight) {
    alert('Please fill all fields');
    return;
  }
  
  let w = parseFloat(formData.weight);
  let h = unit === 'imperial' ? ((parseFloat(formData.heightFeet) || 0) * 12 + (parseFloat(formData.heightInches) || 0)) * 2.54 : parseFloat(formData.height);
  if (unit === 'imperial') w = w * 0.453592;
  
  const bmr = formData.gender === 'male' ? (10 * w) + (6.25 * h) - (5 * parseInt(formData.age)) + 5 : (10 * w) + (6.25 * h) - (5 * parseInt(formData.age)) - 161;
  const tdee = bmr * 1.55;
  const current = parseFloat(formData.currentWeight);
  const target = parseFloat(formData.targetWeight);
  const pace = parseFloat(formData.pace);
  const isLosing = target < current;
  const calorieGoal = Math.round(isLosing ? tdee - (pace * (unit === 'imperial' ? 3500 : 7700) / 7) : tdee + (pace * (unit === 'imperial' ? 3500 : 7700) / 7));
  
  const results = { 
    bmr: Math.round(bmr), 
    tdee: Math.round(tdee), 
    calorieGoal, 
    weeklyChange: isLosing ? -pace : pace, 
    weeksToGoal: Math.ceil(Math.abs(target - current) / pace), 
    macros: { 
      protein: Math.round((calorieGoal * 0.30) / 4), 
      carbs: Math.round((calorieGoal * 0.40) / 4), 
      fats: Math.round((calorieGoal * 0.30) / 9) 
    } 
  };
  
  setTdeeResults(results);
  localStorage.setItem('tdeeData', JSON.stringify({ formData, unit, results }));
};

return (
  <div className={`pb-6 bg-gradient-to-b from-slate-50 to-white min-h-screen transition-opacity duration-500 ${animateIn ? 'opacity-100' : 'opacity-0'}`}>
    <div className="bg-gradient-to-br from-teal-500 via-teal-600 to-cyan-600 px-6 pt-12 pb-8">
      <h1 className="text-3xl font-bold text-white mb-2">Calculator</h1>
      <p className="text-teal-100">Calculate your daily calorie needs</p>
    </div>

    <div className="px-6 py-6 space-y-4">
      {/* Unit Toggle */}
      <div className="flex gap-3 p-1 bg-slate-100 rounded-2xl">
        <button 
          onClick={() => setUnit('metric')} 
          className={`flex-1 py-3 rounded-xl font-semibold transition-all duration-300 ${
            unit === 'metric' 
              ? 'bg-white text-teal-600 shadow-md' 
              : 'text-slate-500'
          }`}
        >
          Metric (kg/cm)
        </button>
        <button 
          onClick={() => setUnit('imperial')} 
          className={`flex-1 py-3 rounded-xl font-semibold transition-all duration-300 ${
            unit === 'imperial' 
              ? 'bg-white text-teal-600 shadow-md' 
              : 'text-slate-500'
          }`}
        >
          Imperial (lb/ft)
        </button>
      </div>

      {/* Gender Selection */}
      <div className="grid grid-cols-2 gap-3">
        <button 
          onClick={() => setFormData(p => ({ ...p, gender: 'male' }))} 
          className={`py-4 rounded-2xl font-semibold transition-all duration-300 border-2 ${
            formData.gender === 'male' 
              ? 'bg-gradient-to-br from-teal-500 to-cyan-500 text-white border-teal-500 shadow-lg' 
              : 'bg-white text-slate-600 border-slate-200 hover:border-teal-300'
          }`}
        >
          🚹 Male
        </button>
        <button 
          onClick={() => setFormData(p => ({ ...p, gender: 'female' }))} 
          className={`py-4 rounded-2xl font-semibold transition-all duration-300 border-2 ${
            formData.gender === 'female' 
              ? 'bg-gradient-to-br from-pink-500 to-rose-500 text-white border-pink-500 shadow-lg' 
              : 'bg-white text-slate-600 border-slate-200 hover:border-pink-300'
          }`}
        >
          🚺 Female
        </button>
      </div>

      {/* Input Fields */}
      <div className="space-y-3">
        <input 
          type="number" 
          value={formData.age} 
          onChange={(e) => setFormData(p => ({ ...p, age: e.target.value }))} 
          className="w-full px-5 py-4 bg-white rounded-2xl border-2 border-slate-200 focus:border-teal-400 focus:ring-2 focus:ring-teal-100 transition-all outline-none font-medium" 
          placeholder="Age (years)" 
        />
        
        {unit === 'imperial' ? (
          <div className="grid grid-cols-2 gap-3">
            <input 
              type="number" 
              value={formData.heightFeet} 
              onChange={(e) => setFormData(p => ({ ...p, heightFeet: e.target.value }))} 
              className="px-5 py-4 bg-white rounded-2xl border-2 border-slate-200 focus:border-teal-400 focus:ring-2 focus:ring-teal-100 transition-all outline-none font-medium" 
              placeholder="Height (ft)" 
            />
            <input 
              type="number" 
              value={formData.heightInches} 
              onChange={(e) => setFormData(p => ({ ...p, heightInches: e.target.value }))} 
              className="px-5 py-4 bg-white rounded-2xl border-2 border-slate-200 focus:border-teal-400 focus:ring-2 focus:ring-teal-100 transition-all outline-none font-medium" 
              placeholder="Inches" 
            />
          </div>
        ) : (
          <input 
            type="number" 
            value={formData.height} 
            onChange={(e) => setFormData(p => ({ ...p, height: e.target.value }))} 
            className="w-full px-5 py-4 bg-white rounded-2xl border-2 border-slate-200 focus:border-teal-400 focus:ring-2 focus:ring-teal-100 transition-all outline-none font-medium" 
            placeholder="Height (cm)" 
          />
        )}

        <input 
          type="number" 
          value={formData.weight} 
          onChange={(e) => setFormData(p => ({ ...p, weight: e.target.value }))} 
          className="w-full px-5 py-4 bg-white rounded-2xl border-2 border-slate-200 focus:border-teal-400 focus:ring-2 focus:ring-teal-100 transition-all outline-none font-medium" 
          placeholder={`Current Weight (${unit === 'metric' ? 'kg' : 'lbs'})`} 
        />

        <div className="grid grid-cols-2 gap-3">
          <input 
            type="number" 
            value={formData.currentWeight} 
            onChange={(e) => setFormData(p => ({ ...p, currentWeight: e.target.value }))} 
            className="px-5 py-4 bg-white rounded-2xl border-2 border-slate-200 focus:border-teal-400 focus:ring-2 focus:ring-teal-100 transition-all outline-none font-medium" 
            placeholder="Current" 
          />
          <input 
            type="number" 
            value={formData.targetWeight} 
            onChange={(e) => setFormData(p => ({ ...p, targetWeight: e.target.value }))} 
            className="px-5 py-4 bg-white rounded-2xl border-2 border-slate-200 focus:border-teal-400 focus:ring-2 focus:ring-teal-100 transition-all outline-none font-medium" 
            placeholder="Target" 
          />
        </div>
      </div>

      {/* Pace Slider */}
      <div className="bg-white rounded-2xl p-5 border-2 border-slate-200">
        <div className="flex items-center justify-between mb-3">
          <p className="text-sm font-semibold text-slate-700">Weekly Pace</p>
          <span className="px-3 py-1 bg-teal-100 text-teal-700 rounded-full text-sm font-bold">
            {formData.pace} {unit === 'metric' ? 'kg' : 'lbs'}/week
          </span>
        </div>
        <input 
          type="range" 
          min={unit === 'imperial' ? '0.5' : '0.25'} 
          max={unit === 'imperial' ? '2' : '1'} 
          step={unit === 'imperial' ? '0.25' : '0.1'} 
          value={formData.pace} 
          onChange={(e) => setFormData(p => ({ ...p, pace: e.target.value }))} 
          className="w-full h-2 bg-slate-200 rounded-full appearance-none cursor-pointer accent-teal-500"
          style={{
            background: `linear-gradient(to right, #14b8a6 0%, #14b8a6 ${((formData.pace - (unit === 'imperial' ? 0.5 : 0.25)) / ((unit === 'imperial' ? 2 : 1) - (unit === 'imperial' ? 0.5 : 0.25))) * 100}%, #e2e8f0 ${((formData.pace - (unit === 'imperial' ? 0.5 : 0.25)) / ((unit === 'imperial' ? 2 : 1) - (unit === 'imperial' ? 0.5 : 0.25))) * 100}%, #e2e8f0 100%)`
          }}
        />
        <div className="flex justify-between mt-2 text-xs text-slate-500">
          <span>Slower</span>
          <span>Faster</span>
        </div>
      </div>

      {/* Calculate Button */}
      <button 
        onClick={handleCalculate} 
        className="w-full bg-gradient-to-r from-teal-500 to-cyan-500 text-white py-5 rounded-2xl font-bold text-lg shadow-lg hover:shadow-xl hover:scale-[1.02] active:scale-[0.98] transition-all duration-300"
      >
        Calculate My Goals 🎯
      </button>

      {/* Results */}
      {tdeeResults && (
        <div className="bg-gradient-to-br from-teal-500 via-teal-600 to-cyan-600 rounded-3xl p-6 text-white shadow-xl animate-[slideIn_0.5s_ease-out]">
          <div className="flex items-center gap-2 mb-4">
            <Award className="w-6 h-6" />
            <p className="text-lg font-semibold">Your Daily Goal</p>
          </div>
          
          <div className="flex items-baseline gap-2 mb-6">
            <span className="text-6xl font-bold">{tdeeResults.calorieGoal}</span>
            <span className="text-xl text-teal-100">calories</span>
          </div>
          
          <div className="space-y-3 bg-white/10 rounded-2xl p-4 backdrop-blur-sm">
            <div className="flex justify-between items-center">
              <span className="text-teal-100">Weekly Change:</span>
              <span className="font-bold text-lg">{Math.abs(tdeeResults.weeklyChange)} {unit === 'imperial' ? 'lbs' : 'kg'}</span>
            </div>
            <div className="flex justify-between items-center">
              <span className="text-teal-100">Time to Goal:</span>
              <span className="font-bold text-lg">{tdeeResults.weeksToGoal} weeks</span>
            </div>
            <div className="flex justify-between items-center">
              <span className="text-teal-100">BMR:</span>
              <span className="font-bold text-lg">{tdeeResults.bmr} cal</span>
            </div>
            <div className="flex justify-between items-center">
              <span className="text-teal-100">TDEE:</span>
              <span className="font-bold text-lg">{tdeeResults.tdee} cal</span>
            </div>
          </div>
        </div>
      )}
    </div>
  </div>
);
```

};

const WorkoutsView = () => {
const today = new Date().toISOString().split(‘T’)[0];
const todayWorkouts = completedWorkouts.filter(w => w.date === today);

```
if (selectedCategory) {
  const category = WORKOUT_CATEGORIES.find(c => c.id === selectedCategory);
  
  return (
    <div className={`pb-6 bg-slate-50 min-h-screen transition-opacity duration-500 ${animateIn ? 'opacity-100' : 'opacity-0'}`}>
      <div className={`bg-gradient-to-br ${category.gradient} px-6 pt-12 pb-8 relative overflow-hidden`}>
        <div className="absolute top-0 right-0 w-40 h-40 bg-white/10 rounded-full blur-3xl" />
        <button 
          onClick={() => setSelectedCategory(null)} 
          className="relative z-10 text-white mb-4 flex items-center gap-2 hover:gap-3 transition-all duration-300"
        >
          <ChevronRight className="w-5 h-5 rotate-180" />
          <span className="font-medium">Back</span>
        </button>
        <div className="relative z-10 flex items-center gap-4">
          <span className="text-6xl">{category.emoji}</span>
          <div>
            <h1 className="text-3xl font-bold text-white mb-1">{category.name}</h1>
            <p className="text-white/80">{category.exercises.length} exercises available</p>
          </div>
        </div>
      </div>

      <div className="px-6 py-6 space-y-3">
        {category.exercises.map((exercise, idx) => (
          <div
            key={idx}
            onClick={() => setSelectedWorkout({ ...exercise, category: category.name, gradient: category.gradient })}
            className="bg-white rounded-2xl p-5 shadow-sm hover:shadow-md flex items-center gap-4 transition-all duration-300 border border-slate-100 hover:border-slate-200 cursor-pointer group"
            style={{
              animation: `slideIn 0.3s ease-out ${idx * 0.05}s both`
            }}
          >
            <div className={`w-14 h-14 rounded-2xl bg-gradient-to-br ${category.gradient} flex items-center justify-center text-white font-bold text-lg shadow-lg group-hover:scale-110 transition-transform duration-300`}>
              {idx + 1}
            </div>
            <div className="flex-1">
              <p className="font-semibold text-slate-800 text-lg mb-1">{exercise.name}</p>
              <div className="flex items-center gap-3 text-sm text-slate-500">
                <span className="flex items-center gap-1">
                  <Activity className="w-4 h-4" />
                  {exercise.sets} sets
                </span>
                <span>×</span>
                <span>{exercise.reps}</span>
              </div>
            </div>
            <ChevronRight className="w-5 h-5 text-slate-400 group-hover:translate-x-1 transition-transform duration-300" />
          </div>
        ))}
      </div>
    </div>
  );
}

return (
  <div className={`pb-6 bg-gradient-to-b from-slate-50 to-white min-h-screen transition-opacity duration-500 ${animateIn ? 'opacity-100' : 'opacity-0'}`}>
    <div className="bg-gradient-to-br from-orange-500 via-red-500 to-pink-500 px-6 pt-12 pb-8 relative overflow-hidden">
      <div className="absolute top-0 right-0 w-40 h-40 bg-white/10 rounded-full blur-3xl" />
      <div className="relative z-10">
        <h1 className="text-3xl font-bold text-white mb-2">Workouts</h1>
        <p className="text-orange-100">Choose your training style</p>
      </div>
    </div>

    {todayWorkouts.length > 0 && (
      <div className="px-6 py-4">
        <div className="bg-gradient-to-r from-green-50 to-emerald-50 border-2 border-green-200 rounded-2xl p-5 flex items-center gap-4 shadow-sm">
          <div className="w-12 h-12 rounded-full bg-green-500 flex items-center justify-center">
            <CheckCircle className="w-7 h-7 text-white" />
          </div>
          <div className="flex-1">
            <p className="font-bold text-green-800 text-lg">Awesome work! 💪</p>
            <p className="text-sm text-green-700">{todayWorkouts.length} exercise{todayWorkouts.length > 1 ? 's' : ''} completed today</p>
          </div>
        </div>
      </div>
    )}

    <div className="px-6 py-6 grid grid-cols-2 gap-4">
      {WORKOUT_CATEGORIES.map((category, idx) => (
        <div
          key={category.id}
          onClick={() => setSelectedCategory(category.id)}
          className="bg-white rounded-3xl overflow-hidden shadow-md hover:shadow-2xl transition-all duration-300 cursor-pointer group border border-slate-100 hover:border-slate-200 hover-lift"
          style={{
            animation: `slideIn 0.4s ease-out ${idx * 0.1}s both`
          }}
        >
          <div className={`h-36 bg-gradient-to-br ${category.gradient} flex items-center justify-center relative overflow-hidden transition-all duration-300`}>
            <div className="absolute inset-0 bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
            <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-all duration-300" />
            <span className="text-6xl relative z-10 transition-transform duration-300 group-hover:scale-125 group-hover:rotate-12">{category.emoji}</span>
          </div>
          <div className="p-4 transition-colors duration-300 group-hover:bg-slate-50">
            <h3 className="font-bold text-slate-800 mb-1 text-lg transition-colors duration-300 group-hover:text-slate-900">{category.name}</h3>
            <p className="text-sm text-slate-500 transition-colors duration-300 group-hover:text-slate-600">{category.exercises.length} exercises</p>
          </div>
        </div>
      ))}
    </div>
  </div>
);
```

};

const RecipesView = () => {
const allRecipes = […RECIPE_DATABASE, …customRecipes];
const filtered = allRecipes.filter(r => r.name.toLowerCase().includes(searchTerm.toLowerCase()));

```
return (
  <div className={`pb-6 bg-gradient-to-b from-slate-50 to-white min-h-screen transition-opacity duration-500 ${animateIn ? 'opacity-100' : 'opacity-0'}`}>
    <div className="bg-gradient-to-br from-teal-500 via-teal-600 to-cyan-600 px-6 pt-12 pb-6">
      <h1 className="text-3xl font-bold text-white mb-2">Recipes</h1>
      <p className="text-teal-100 mb-4">Discover healthy meals</p>
      
      <div className="relative">
        <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
        <input 
          type="text" 
          placeholder="Search recipes..." 
          value={searchTerm} 
          onChange={(e) => setSearchTerm(e.target.value)} 
          className="w-full pl-12 pr-4 py-4 rounded-2xl border-2 border-transparent focus:border-white focus:ring-2 focus:ring-white/20 transition-all outline-none font-medium" 
        />
      </div>
    </div>

    <div className="px-6 py-6 space-y-4">
      {filtered.map((recipe, idx) => (
        <div 
          key={recipe.id} 
          onClick={() => setSelectedRecipe(recipe)} 
          className="bg-white rounded-3xl overflow-hidden shadow-md hover:shadow-2xl transition-all duration-300 cursor-pointer group border border-slate-100 hover:border-slate-200 hover-lift"
          style={{
            animation: `slideIn 0.3s ease-out ${idx * 0.05}s both`
          }}
        >
          <div className={`h-48 bg-gradient-to-br ${recipe.gradient} relative flex items-center justify-center overflow-hidden`}>
            <div className="absolute inset-0 bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
            <div className="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-all duration-300" />
            <span className="text-8xl relative z-10 transition-all duration-300 group-hover:scale-125 group-hover:rotate-6">{recipe.emoji}</span>
            <button 
              onClick={(e) => { 
                e.stopPropagation(); 
                e.preventDefault();
                toggleFavorite(recipe.id); 
              }} 
              className="absolute top-4 right-4 p-3 bg-white rounded-full shadow-lg hover:scale-125 hover:rotate-12 transition-all duration-300 z-20 hover-bounce"
            >
              <Heart className={`w-5 h-5 transition-all duration-300 ${favorites.includes(recipe.id) ? 'fill-red-500 text-red-500 scale-110' : 'text-slate-400 hover:text-red-400'}`} />
            </button>
            <div className="absolute bottom-3 left-3 px-3 py-1 bg-white/90 backdrop-blur-sm rounded-full text-xs font-semibold text-slate-700 group-hover:scale-110 transition-transform duration-300">
              {recipe.difficulty}
            </div>
          </div>
          <div className="p-5 transition-colors duration-300 group-hover:bg-slate-50">
            <h3 className="font-bold text-slate-800 mb-3 text-lg transition-colors duration-300 group-hover:text-slate-900">{recipe.name}</h3>
            <div className="grid grid-cols-3 gap-3">
              <div className="text-center p-2 bg-orange-50 rounded-xl transition-all duration-300 group-hover:bg-orange-100 group-hover:scale-105">
                <Flame className="w-4 h-4 text-orange-500 mx-auto mb-1 transition-transform duration-300 group-hover:scale-110" />
                <p className="text-xs text-slate-500">Calories</p>
                <p className="text-sm font-bold text-slate-800">{recipe.calories}</p>
              </div>
              <div className="text-center p-2 bg-blue-50 rounded-xl transition-all duration-300 group-hover:bg-blue-100 group-hover:scale-105">
                <Zap className="w-4 h-4 text-blue-500 mx-auto mb-1 transition-transform duration-300 group-hover:scale-110" />
                <p className="text-xs text-slate-500">Protein</p>
                <p className="text-sm font-bold text-slate-800">{recipe.protein}g</p>
              </div>
              <div className="text-center p-2 bg-green-50 rounded-xl transition-all duration-300 group-hover:bg-green-100 group-hover:scale-105">
                <Clock className="w-4 h-4 text-green-500 mx-auto mb-1 transition-transform duration-300 group-hover:scale-110" />
                <p className="text-xs text-slate-500">Time</p>
                <p className="text-sm font-bold text-slate-800">{recipe.time}m</p>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  </div>
);
```

};

const CoachView = () => {
const messagesEndRef = React.useRef(null);
const [localInput, setLocalInput] = React.useState(’’);

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

const handleSend = async () => {
  if (!localInput.trim() || isLoading) return;

  const userMessage = { role: 'user', content: localInput };
  const newMessages = [...messages, userMessage];
  setMessages(newMessages);
  setLocalInput('');
  setIsLoading(true);

  try {
    const context = tdeeResults ? `User's calorie goal: ${tdeeResults.calorieGoal} cal/day. ` : '';
    
    const response = await fetch('https://api.anthropic.com/v1/messages', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        model: 'claude-sonnet-4-20250514',
        max_tokens: 1000,
        messages: [
          ...newMessages.map(m => ({ role: m.role, content: m.content }))
        ],
        system: `You are a friendly, encouraging fitness and nutrition coach. ${context}Keep responses brief (2-3 sentences), supportive, and actionable. Focus on sustainable habits, not extreme diets. Use emojis occasionally to be friendly.`
      })
    });

    const data = await response.json();
    const assistantMessage = {
      role: 'assistant',
      content: data.content[0].text
    };

    const updatedMessages = [...newMessages, assistantMessage];
    setMessages(updatedMessages);
    localStorage.setItem('coachMessages', JSON.stringify(updatedMessages));
  } catch (error) {
    const errorMessage = {
      role: 'assistant',
      content: 'Sorry, I had trouble connecting. Please try again! 💪'
    };
    setMessages([...newMessages, errorMessage]);
  } finally {
    setIsLoading(false);
  }
};

return (
  <div className={`pb-6 bg-slate-50 min-h-screen flex flex-col transition-opacity duration-500 ${animateIn ? 'opacity-100' : 'opacity-0'}`}>
    <div className="bg-gradient-to-br from-purple-500 via-purple-600 to-pink-600 px-6 pt-12 pb-8 relative overflow-hidden">
      <div className="absolute top-0 right-0 w-40 h-40 bg-white/10 rounded-full blur-3xl" />
      <div className="relative z-10">
        <h1 className="text-3xl font-bold text-white mb-2">AI Coach</h1>
        <p className="text-purple-100">Your personal fitness assistant 🤖</p>
      </div>
    </div>

    <div className="flex-1 overflow-y-auto px-6 py-6 space-y-4">
      {messages.length === 0 ? (
        <div className="text-center py-16">
          <div className="w-20 h-20 bg-gradient-to-br from-purple-500 to-pink-500 rounded-3xl flex items-center justify-center mx-auto mb-6 shadow-xl">
            <MessageCircle className="w-10 h-10 text-white" />
          </div>
          <h3 className="font-bold text-slate-800 text-xl mb-3">Hi! I'm your AI Coach 👋</h3>
          <p className="text-slate-500 px-6 mb-6">Ask me anything about nutrition, workouts, or reaching your fitness goals!</p>
          
          <div className="space-y-2 px-4">
            {['How can I gain muscle?', 'Best protein sources?', 'Create a workout plan'].map((q, idx) => (
              <button
                key={idx}
                onClick={() => setLocalInput(q)}
                className="w-full p-3 bg-white rounded-xl text-sm text-slate-600 hover:bg-purple-50 hover:text-purple-600 transition-all duration-300 border border-slate-200"
              >
                {q}
              </button>
            ))}
          </div>
        </div>
      ) : (
        <>
          {messages.map((msg, idx) => (
            <div 
              key={idx} 
              className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}
              style={{
                animation: `slideIn 0.3s ease-out`
              }}
            >
              <div className={`max-w-[80%] rounded-2xl px-5 py-3 shadow-sm ${
                msg.role === 'user' 
                  ? 'bg-gradient-to-br from-teal-500 to-cyan-500 text-white' 
                  : 'bg-white text-slate-800 border border-slate-100'
              }`}>
                <p className="text-sm leading-relaxed">{msg.content}</p>
              </div>
            </div>
          ))}
          {isLoading && (
            <div className="flex justify-start">
              <div className="bg-white rounded-2xl px-5 py-4 shadow-sm border border-slate-100">
                <div className="flex gap-2">
                  <div className="w-2.5 h-2.5 bg-purple-400 rounded-full animate-bounce"></div>
                  <div className="w-2.5 h-2.5 bg-purple-400 rounded-full animate-bounce" style={{animationDelay: '0.2s'}}></div>
                  <div className="w-2.5 h-2.5 bg-purple-400 rounded-full animate-bounce" style={{animationDelay: '0.4s'}}></div>
                </div>
              </div>
            </div>
          )}
          <div ref={messagesEndRef} />
        </>
      )}
    </div>

    <div className="bg-white/80 backdrop-blur-xl border-t border-slate-200 px-6 py-4">
      <div className="flex gap-3">
        <input
          type="text"
          value={localInput}
          onChange={(e) => setLocalInput(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && handleSend()}
          placeholder="Ask me anything..."
          className="flex-1 px-5 py-4 bg-slate-100 rounded-2xl focus:outline-none focus:ring-2 focus:ring-purple-400 transition-all font-medium"
          disabled={isLoading}
        />
        <button
          onClick={handleSend}
          disabled={!localInput.trim() || isLoading}
          className="px-6 py-4 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-2xl disabled:opacity-50 disabled:cursor-not-allowed hover:shadow-lg active:scale-95 transition-all duration-300"
        >
          <Send className="w-5 h-5" />
        </button>
      </div>
    </div>
  </div>
);
```

};

const MealPlanView = () => {
const getDayMeals = (day) => {
const meals = {};
MEALS.forEach(meal => {
const key = `${day}-${meal}`;
meals[meal] = mealPlan[key] || null;
});
return meals;
};

```
const dayMeals = getDayMeals(selectedDay);
const totalCalories = Object.values(dayMeals).reduce((sum, meal) => sum + (meal?.calories || 0), 0);
const totalProtein = Object.values(dayMeals).reduce((sum, meal) => sum + (meal?.protein || 0), 0);

return (
  <div className={`pb-6 bg-gradient-to-b from-slate-50 to-white min-h-screen transition-opacity duration-500 ${animateIn ? 'opacity-100' : 'opacity-0'}`}>
    <div className="bg-gradient-to-br from-purple-500 via-purple-600 to-pink-600 px-6 pt-12 pb-8 relative overflow-hidden">
      <div className="absolute top-0 right-0 w-40 h-40 bg-white/10 rounded-full blur-3xl" />
      <div className="relative z-10">
        <h1 className="text-3xl font-bold text-white mb-2">Meal Plan</h1>
        <p className="text-purple-100">Plan your weekly nutrition</p>
      </div>
    </div>

    {/* Day Selector */}
    <div className="px-6 py-5 bg-white border-b border-slate-200 sticky top-0 z-10 backdrop-blur-xl bg-white/90">
      <div className="flex gap-2 overflow-x-auto pb-2 scrollbar-hide">
        {DAYS.map((day, idx) => (
          <button
            key={day}
            onClick={() => setSelectedDay(day)}
            className={`px-5 py-3 rounded-2xl font-semibold whitespace-nowrap transition-all duration-300 ${
              selectedDay === day 
                ? 'bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg scale-105' 
                : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
            }`}
            style={{
              animation: `slideIn 0.3s ease-out ${idx * 0.05}s both`
            }}
          >
            {day}
          </button>
        ))}
      </div>
    </div>

    {/* AI Generate Button */}
    <div className="px-6 py-4">
      <button
        onClick={generateAIMealPlan}
        disabled={isGeneratingMeals}
        className="w-full bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500 text-white py-4 rounded-2xl font-bold flex items-center justify-center gap-3 disabled:opacity-50 shadow-lg hover:shadow-xl hover:scale-[1.02] active:scale-[0.98] transition-all duration-300"
      >
        {isGeneratingMeals ? (
          <>
            <div className="w-5 h-5 border-3 border-white border-t-transparent rounded-full animate-spin"></div>
            Generating magic...
          </>
        ) : (
          <>
            <Zap className="w-6 h-6" />
            AI Generate Full Day
          </>
        )}
      </button>
    </div>

    {/* Daily Summary */}
    {totalCalories > 0 && (
      <div className="px-6 pb-4">
        <div className="bg-gradient-to-r from-purple-50 to-pink-50 border-2 border-purple-200 rounded-2xl p-5 shadow-sm">
          <div className="flex items-center justify-between mb-3">
            <span className="text-slate-700 font-medium">Daily Total</span>
            <Award className="w-6 h-6 text-purple-500" />
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <p className="text-3xl font-bold text-purple-600">{totalCalories}</p>
              <p className="text-xs text-slate-500">calories</p>
            </div>
            <div>
              <p className="text-3xl font-bold text-pink-600">{totalProtein}g</p>
              <p className="text-xs text-slate-500">protein</p>
            </div>
          </div>
        </div>
      </div>
    )}

    {/* Meals */}
    <div className="px-6 py-4 space-y-4">
      {MEALS.map((mealType, idx) => {
        const meal = dayMeals[mealType];
        const mealIcons = {
          'Breakfast': Coffee,
          'Lunch': UtensilsCrossed,
          'Dinner': Moon
        };
        const MealIcon = mealIcons[mealType];
        
        return (
          <div 
            key={mealType} 
            className="bg-white rounded-3xl p-5 shadow-md border border-slate-100"
            style={{
              animation: `slideIn 0.3s ease-out ${idx * 0.1}s both`
            }}
          >
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-100 to-pink-100 flex items-center justify-center">
                  <MealIcon className="w-5 h-5 text-purple-600" />
                </div>
                <h3 className="font-bold text-slate-800 text-lg">{mealType}</h3>
              </div>
              {!meal && (
                <button
                  onClick={() => setShowMealSelector({ day: selectedDay, mealType })}
                  className="p-2 bg-purple-100 text-purple-600 rounded-xl hover:bg-purple-200 transition-all duration-300"
                >
                  <Plus className="w-5 h-5" />
                </button>
              )}
            </div>

            {meal ? (
              <div className="bg-gradient-to-br from-purple-50 to-pink-50 rounded-2xl p-4 relative border-2 border-purple-100">
                <button
                  onClick={() => {
                    const key = `${selectedDay}-${mealType}`;
                    const updated = { ...mealPlan };
                    delete updated[key];
                    setMealPlan(updated);
                    localStorage.setItem('mealPlan', JSON.stringify(updated));
                  }}
                  className="absolute top-3 right-3 p-2 bg-white rounded-xl shadow-sm hover:bg-red-50 hover:shadow-md transition-all duration-300 group"
                >
                  <Trash2 className="w-4 h-4 text-slate-400 group-hover:text-red-500 transition-colors" />
                </button>
                <div className="flex items-center gap-4 mb-4">
                  <div className={`w-16 h-16 rounded-2xl bg-gradient-to-br ${meal.gradient} flex items-center justify-center text-3xl shadow-lg`}>
                    {meal.emoji}
                  </div>
                  <div className="flex-1">
                    <p className="font-bold text-slate-800 text-lg mb-1">{meal.name}</p>
                    <div className="flex items-center gap-3 text-sm text-slate-600">
                      <span className="flex items-center gap-1">
                        <Flame className="w-4 h-4 text-orange-500" />
                        {meal.calories}
                      </span>
                      <span className="flex items-center gap-1">
                        <Zap className="w-4 h-4 text-blue-500" />
                        {meal.protein}g
                      </span>
                    </div>
                  </div>
                </div>
                
                <div className="grid grid-cols-3 gap-2">
                  <div className="text-center p-2 bg-white rounded-xl">
                    <p className="text-xs text-slate-500 mb-1">Carbs</p>
                    <p className="text-sm font-bold text-slate-800">{meal.carbs}g</p>
                  </div>
                  <div className="text-center p-2 bg-white rounded-xl">
                    <p className="text-xs text-slate-500 mb-1">Fats</p>
                    <p className="text-sm font-bold text-slate-800">{meal.fats}g</p>
                  </div>
                  <div className="text-center p-2 bg-white rounded-xl">
                    <p className="text-xs text-slate-500 mb-1">Time</p>
                    <p className="text-sm font-bold text-slate-800">{meal.time}m</p>
                  </div>
                </div>
              </div>
            ) : (
              <div 
                onClick={() => setShowMealSelector({ day: selectedDay, mealType })}
                className="border-3 border-dashed border-slate-300 rounded-2xl p-8 text-center text-slate-400 cursor-pointer hover:border-purple-400 hover:bg-purple-50 hover:text-purple-600 transition-all duration-300 group"
              >
                <Plus className="w-8 h-8 mx-auto mb-2 group-hover:scale-110 transition-transform duration-300" />
                <p className="text-sm font-medium">Add {mealType.toLowerCase()}</p>
              </div>
            )}
          </div>
        );
      })}
    </div>
  </div>
);
```

};

const SocialView = () => {
const [socialTab, setSocialTab] = useState(‘friends’);
const filteredUsers = allUsers.filter(u =>
!friends.find(f => f.id === u.id) &&
(u.username.toLowerCase().includes(searchUsers.toLowerCase()) ||
u.name.toLowerCase().includes(searchUsers.toLowerCase()))
);

```
return (
  <div className={`pb-6 bg-gradient-to-b from-slate-50 to-white min-h-screen transition-opacity duration-500 ${animateIn ? 'opacity-100' : 'opacity-0'}`}>
    <div className="bg-gradient-to-br from-blue-500 via-indigo-600 to-purple-600 px-6 pt-12 pb-8 relative overflow-hidden">
      <div className="absolute top-0 right-0 w-40 h-40 bg-white/10 rounded-full blur-3xl" />
      <div className="relative z-10">
        <h1 className="text-3xl font-bold text-white mb-2">Social</h1>
        <p className="text-blue-100">Connect with fitness friends</p>
      </div>
    </div>

    {/* Tabs */}
    <div className="px-6 py-4 bg-white border-b border-slate-200">
      <div className="flex gap-2">
        {['friends', 'discover', 'requests'].map(tab => (
          <button
            key={tab}
            onClick={() => setSocialTab(tab)}
            className={`flex-1 py-3 rounded-xl font-semibold capitalize transition-all duration-300 ${
              socialTab === tab
                ? 'bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-lg'
                : 'bg-slate-100 text-slate-600'
            }`}
          >
            {tab}
            {tab === 'requests' && friendRequests.length > 0 && (
              <span className="ml-2 px-2 py-0.5 bg-red-500 text-white rounded-full text-xs">
                {friendRequests.length}
              </span>
            )}
          </button>
        ))}
      </div>
    </div>

    {/* Friends List */}
    {socialTab === 'friends' && (
      <div className="px-6 py-6 space-y-3">
        {friends.length === 0 ? (
          <div className="text-center py-16">
            <Users className="w-16 h-16 text-slate-300 mx-auto mb-4" />
            <p className="text-slate-500 mb-2">No friends yet</p>
            <p className="text-sm text-slate-400">Discover people to connect with!</p>
          </div>
        ) : (
          friends.map((friend, idx) => (
            <div
              key={friend.id}
              onClick={() => setSelectedFriend(friend)}
              className="bg-white rounded-2xl p-4 shadow-sm hover:shadow-md transition-all duration-300 cursor-pointer border border-slate-100"
              style={{ animation: `slideIn 0.3s ease-out ${idx * 0.05}s both` }}
            >
              <div className="flex items-center gap-4">
                <div className="w-14 h-14 rounded-full bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center text-3xl">
                  {friend.avatar}
                </div>
                <div className="flex-1">
                  <p className="font-bold text-slate-800">{friend.name}</p>
                  <p className="text-sm text-slate-500">@{friend.username}</p>
                  <p className="text-xs text-slate-400 mt-1">{friend.status}</p>
                </div>
                <MessageCircle className="w-5 h-5 text-blue-500" />
              </div>
            </div>
          ))
        )}
      </div>
    )}

    {/* Discover Users */}
    {socialTab === 'discover' && (
      <div className="px-6 py-6 space-y-4">
        <div className="relative">
          <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
          <input
            type="text"
            placeholder="Search users..."
            value={searchUsers}
            onChange={(e) => setSearchUsers(e.target.value)}
            className="w-full pl-12 pr-4 py-4 rounded-2xl border-2 border-slate-200 focus:border-blue-400 focus:ring-2 focus:ring-blue-100 transition-all outline-none"
          />
        </div>

        <div className="space-y-3">
          {filteredUsers.map((user, idx) => (
            <div
              key={user.id}
              className="bg-white rounded-2xl p-4 shadow-sm border border-slate-100"
              style={{ animation: `slideIn 0.3s ease-out ${idx * 0.05}s both` }}
            >
              <div className="flex items-center gap-4">
                <div className="w-14 h-14 rounded-full bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center text-3xl">
                  {user.avatar}
                </div>
                <div className="flex-1">
                  <p className="font-bold text-slate-800">{user.name}</p>
                  <p className="text-sm text-slate-500">@{user.username}</p>
                  <div className="flex items-center gap-3 mt-2 text-xs text-slate-500">
                    <span className="flex items-center gap-1">
                      <Dumbbell className="w-3 h-3" />
                      {user.workouts} workouts
                    </span>
                    <span className="flex items-center gap-1">
                      <Flame className="w-3 h-3" />
                      {user.calories} cal/day
                    </span>
                  </div>
                </div>
                <button
                  onClick={() => sendFriendRequest(user.id)}
                  disabled={friendRequests.find(r => r.id === user.id)}
                  className="px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-xl font-semibold disabled:opacity-50 disabled:cursor-not-allowed hover:shadow-lg transition-all"
                >
                  {friendRequests.find(r => r.id === user.id) ? 'Pending' : 'Add'}
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
    )}

    {/* Friend Requests */}
    {socialTab === 'requests' && (
      <div className="px-6 py-6 space-y-3">
        {friendRequests.length === 0 ? (
          <div className="text-center py-16">
            <Users className="w-16 h-16 text-slate-300 mx-auto mb-4" />
            <p className="text-slate-500 mb-2">No friend requests</p>
          </div>
        ) : (
          friendRequests.map((request, idx) => (
            <div
              key={request.id}
              className="bg-white rounded-2xl p-4 shadow-sm border border-slate-100"
              style={{ animation: `slideIn 0.3s ease-out ${idx * 0.05}s both` }}
            >
              <div className="flex items-center gap-4 mb-3">
                <div className="w-14 h-14 rounded-full bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center text-3xl">
                  {request.avatar}
                </div>
                <div className="flex-1">
                  <p className="font-bold text-slate-800">{request.name}</p>
                  <p className="text-sm text-slate-500">@{request.username}</p>
                </div>
              </div>
              <div className="flex gap-2">
                <button
                  onClick={() => acceptFriendRequest(request.id)}
                  className="flex-1 py-2 bg-gradient-to-r from-green-500 to-emerald-500 text-white rounded-xl font-semibold hover:shadow-lg transition-all"
                >
                  Accept
                </button>
                <button
                  onClick={() => rejectFriendRequest(request.id)}
                  className="flex-1 py-2 bg-slate-200 text-slate-700 rounded-xl font-semibold hover:bg-slate-300 transition-all"
                >
                  Decline
                </button>
              </div>
            </div>
          ))
        )}
      </div>
    )}
  </div>
);
```

};

const ProfileView = () => {
// Check localStorage again in case it was just created
React.useEffect(() => {
const savedProfile = localStorage.getItem(‘userProfile’);
if (savedProfile && !userProfile) {
setUserProfile(JSON.parse(savedProfile));
}
}, []);

```
if (!userProfile) {
  return (
    <div className={`pb-6 min-h-screen transition-all duration-500 ${animateIn ? 'opacity-100' : 'opacity-0'} ${darkMode ? 'bg-gradient-to-b from-slate-900 to-slate-800' : 'bg-gradient-to-b from-slate-50 to-white'}`}>
      <div className={`px-6 pt-12 pb-8 ${darkMode ? 'bg-gradient-to-br from-teal-700 via-cyan-800 to-blue-900' : 'bg-gradient-to-br from-teal-500 via-cyan-600 to-blue-600'}`}>
        <h1 className="text-3xl font-bold text-white mb-2">Profile</h1>
        <p className="text-cyan-100">Create your fitness profile</p>
      </div>
      
      <div className="px-6 py-12 text-center">
        <div className="w-24 h-24 mx-auto mb-6 rounded-full bg-gradient-to-br from-teal-100 to-cyan-100 flex items-center justify-center">
          <User className="w-12 h-12 text-teal-600" />
        </div>
        <h2 className={`text-2xl font-bold mb-3 ${darkMode ? 'text-slate-200' : 'text-slate-800'}`}>Welcome to CalorieFit!</h2>
        <p className={`mb-6 px-4 ${darkMode ? 'text-slate-400' : 'text-slate-600'}`}>Create your profile to unlock social features and connect with other fitness enthusiasts</p>
        
        <div className="space-y-3">
          <button
            onClick={() => {
              console.log('Opening profile setup modal');
              setShowProfileSetup(true);
            }}
            className="w-full px-8 py-4 bg-gradient-to-r from-teal-500 to-cyan-500 text-white rounded-2xl font-bold shadow-lg hover:shadow-xl hover:scale-[1.02] active:scale-[0.98] transition-all"
          >
            Create Profile 🎉
          </button>
          
          <button
            onClick={() => {
              const saved = localStorage.getItem('userProfile');
              console.log('=== DEBUG INFO ===');
              console.log('localStorage userProfile:', saved);
              console.log('Current userProfile state:', userProfile);
              
              if (saved) {
                alert('✅ Profile exists in localStorage!\n\nData: ' + saved.substring(0, 100) + '...\n\nTry refreshing the page.');
              } else {
                alert('❌ No profile found in localStorage');
              }
            }}
            className={`w-full px-4 py-2 rounded-xl border-2 text-sm font-medium transition-all ${
              darkMode 
                ? 'border-slate-600 text-slate-400 hover:bg-slate-800' 
                : 'border-slate-300 text-slate-600 hover:bg-slate-100'
            }`}
          >
            🔍 Debug: Check if Profile Exists
          </button>
        </div>
        
        <p className={`text-sm mt-4 ${darkMode ? 'text-slate-500' : 'text-slate-400'}`}>You can do this later from Settings</p>
      </div>
    </div>
  );
}

return (
  <div className={`pb-6 min-h-screen transition-all duration-500 ${animateIn ? 'opacity-100' : 'opacity-0'} ${darkMode ? 'bg-gradient-to-b from-slate-900 to-slate-800' : 'bg-gradient-to-b from-slate-50 to-white'}`}>
    <div className={`px-6 pt-12 pb-16 relative overflow-hidden ${darkMode ? 'bg-gradient-to-br from-teal-700 via-cyan-800 to-blue-900' : 'bg-gradient-to-br from-teal-500 via-cyan-600 to-blue-600'}`}>
      <div className="absolute top-0 right-0 w-40 h-40 bg-white/10 rounded-full blur-3xl" />
      <div className="relative z-10 text-center">
        <div className="w-24 h-24 mx-auto mb-4 rounded-full bg-white flex items-center justify-center text-5xl shadow-xl">
          {userProfile.avatar}
        </div>
        <h1 className="text-3xl font-bold text-white mb-1">{userProfile.name}</h1>
        <p className="text-cyan-100 mb-3">@{userProfile.username}</p>
        <p className="text-white/90 italic">"{userProfile.bio}"</p>
      </div>
    </div>

    <div className="px-6 -mt-8">
      <div className={`rounded-3xl shadow-xl p-6 border ${darkMode ? 'bg-slate-800 border-slate-700' : 'bg-white border-slate-100'}`}>
        <h3 className={`font-bold mb-4 ${darkMode ? 'text-slate-200' : 'text-slate-800'}`}>Stats</h3>
        <div className="grid grid-cols-3 gap-4">
          <div className={`text-center p-3 rounded-xl ${darkMode ? 'bg-blue-900/30' : 'bg-blue-50'}`}>
            <Dumbbell className="w-6 h-6 text-blue-500 mx-auto mb-2" />
            <p className={`text-2xl font-bold ${darkMode ? 'text-slate-200' : 'text-slate-800'}`}>{completedWorkouts.length}</p>
            <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>Workouts</p>
          </div>
          <div className={`text-center p-3 rounded-xl ${darkMode ? 'bg-green-900/30' : 'bg-green-50'}`}>
            <Users className="w-6 h-6 text-green-500 mx-auto mb-2" />
            <p className={`text-2xl font-bold ${darkMode ? 'text-slate-200' : 'text-slate-800'}`}>{friends.length}</p>
            <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>Friends</p>
          </div>
          <div className={`text-center p-3 rounded-xl ${darkMode ? 'bg-orange-900/30' : 'bg-orange-50'}`}>
            <Heart className="w-6 h-6 text-orange-500 mx-auto mb-2" />
            <p className={`text-2xl font-bold ${darkMode ? 'text-slate-200' : 'text-slate-800'}`}>{favorites.length}</p>
            <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>Favorites</p>
          </div>
        </div>
      </div>
    </div>

    <div className="px-6 py-6 space-y-3">
      <button
        onClick={toggleDarkMode}
        className={`w-full rounded-2xl p-4 flex items-center justify-between shadow-sm border transition-all ${
          darkMode 
            ? 'bg-slate-800 border-slate-700' 
            : 'bg-white border-slate-100'
        }`}
      >
        <div className="flex items-center gap-3">
          {darkMode ? <Sun className="w-6 h-6 text-yellow-400" /> : <Moon className="w-6 h-6 text-indigo-500" />}
          <span className={`font-semibold ${darkMode ? 'text-slate-200' : 'text-slate-800'}`}>
            {darkMode ? 'Light Mode' : 'Dark Mode'}
          </span>
        </div>
        <div className={`w-12 h-6 rounded-full transition-all ${darkMode ? 'bg-teal-600' : 'bg-slate-300'}`}>
          <div className={`w-5 h-5 rounded-full bg-white shadow-lg transform transition-transform duration-300 mt-0.5 ${darkMode ? 'translate-x-6 ml-1' : 'translate-x-0.5'}`} />
        </div>
      </button>

      <button
        onClick={() => setCurrentView('mealplan')}
        className={`w-full rounded-2xl p-4 flex items-center justify-between shadow-sm border ${
          darkMode 
            ? 'bg-slate-800 border-slate-700' 
            : 'bg-white border-slate-100'
        }`}
      >
        <div className="flex items-center gap-3">
          <Calendar className="w-6 h-6 text-purple-500" />
          <span className={`font-semibold ${darkMode ? 'text-slate-200' : 'text-slate-800'}`}>Meal Plan</span>
        </div>
        <ChevronRight className={`w-5 h-5 ${darkMode ? 'text-slate-500' : 'text-slate-400'}`} />
      </button>

      <button
        onClick={() => setCurrentView('coach')}
        className={`w-full rounded-2xl p-4 flex items-center justify-between shadow-sm border ${
          darkMode 
            ? 'bg-slate-800 border-slate-700' 
            : 'bg-white border-slate-100'
        }`}
      >
        <div className="flex items-center gap-3">
          <MessageCircle className="w-6 h-6 text-indigo-500" />
          <span className={`font-semibold ${darkMode ? 'text-slate-200' : 'text-slate-800'}`}>AI Coach</span>
        </div>
        <ChevronRight className={`w-5 h-5 ${darkMode ? 'text-slate-500' : 'text-slate-400'}`} />
      </button>

      <button
        onClick={() => {
          if (confirm('Are you sure you want to clear all data?')) {
            localStorage.clear();
            window.location.reload();
          }
        }}
        className={`w-full rounded-2xl p-4 font-semibold border-2 ${
          darkMode 
            ? 'bg-red-900/20 text-red-400 border-red-800' 
            : 'bg-red-50 text-red-600 border-red-200'
        }`}
      >
        Clear All Data
      </button>
    </div>
  </div>
);
```

};

return (
<div className={`max-w-md mx-auto min-h-screen relative transition-colors duration-300 ${darkMode ? 'bg-slate-900' : 'bg-white'}`}>
<style>{`
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

```
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    
    @keyframes slideInRight {
      from {
        transform: translateX(100%);
      }
      to {
        transform: translateX(0);
      }
    }
    
    @keyframes bounce {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-10px);
      }
    }
    
    @keyframes pulse {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0.5;
      }
    }
    
    @keyframes shimmer {
      0% {
        background-position: -1000px 0;
      }
      100% {
        background-position: 1000px 0;
      }
    }
    
    @keyframes float {
      0%, 100% {
        transform: translateY(0px);
      }
      50% {
        transform: translateY(-20px);
      }
    }
    
    .hover-lift {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .hover-lift:hover {
      transform: translateY(-4px) scale(1.02);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
    
    .hover-lift:active {
      transform: translateY(-1px) scale(0.99);
    }
    
    .hover-glow:hover {
      box-shadow: 0 0 20px rgba(20, 184, 166, 0.5);
    }
    
    .hover-rotate:hover {
      transform: rotate(5deg) scale(1.1);
    }
    
    .hover-bounce:hover {
      animation: bounce 0.6s ease-in-out;
    }
    
    .gradient-shift {
      background-size: 200% 200%;
      animation: gradient-shift 3s ease infinite;
    }
    
    @keyframes gradient-shift {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }
    
    .shimmer {
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
      background-size: 200% 100%;
      animation: shimmer 2s infinite;
    }
    
    .scrollbar-hide::-webkit-scrollbar {
      display: none;
    }
    
    .scrollbar-hide {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
  `}</style>
  
  {/* Hamburger Menu */}
  <HamburgerMenu />
  
  {currentView === 'home' && <HomeView />}
  {currentView === 'calculator' && <CalculatorView />}
  {currentView === 'workouts' && <WorkoutsView />}
  {currentView === 'recipes' && <RecipesView />}
  {currentView === 'coach' && <CoachView />}
  {currentView === 'mealplan' && <MealPlanView />}
  {currentView === 'social' && <SocialView />}
  {currentView === 'profile' && <ProfileView />}
  
  {selectedRecipe && (
    <div 
      className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-end animate-[slideIn_0.3s_ease-out]"
      onClick={(e) => {
        if (e.target === e.currentTarget) {
          setSelectedRecipe(null);
        }
      }}
    >
      <div className={`w-full max-h-[90vh] rounded-t-[2rem] overflow-y-auto ${darkMode ? 'bg-slate-900' : 'bg-white'}`}>
        <div className={`relative h-56 bg-gradient-to-br ${selectedRecipe.gradient} flex items-center justify-center`}>
          <span className="text-9xl">{selectedRecipe.emoji}</span>
          <button 
            onClick={(e) => {
              e.stopPropagation();
              e.preventDefault();
              setSelectedRecipe(null);
            }}
            className="absolute top-5 right-5 p-3 bg-white rounded-full shadow-2xl hover:bg-red-500 hover:scale-125 hover:rotate-90 transition-all duration-300 group z-50"
          >
            <X className="w-6 h-6 text-slate-800 group-hover:text-white transition-colors duration-300" />
          </button>
          {/* Additional close hint */}
          <div className="absolute top-5 left-5 px-4 py-2 bg-white/90 backdrop-blur-sm rounded-full text-sm font-semibold text-slate-700 animate-pulse">
            ← Tap outside or X to close
          </div>
        </div>
        <div className="p-6 space-y-5">
          <div>
            <h2 className={`text-3xl font-bold mb-2 ${darkMode ? 'text-white' : 'text-slate-800'}`}>{selectedRecipe.name}</h2>
            <div className="flex items-center gap-2">
              <span className={`px-3 py-1 rounded-full text-xs font-semibold ${darkMode ? 'bg-slate-800 text-slate-300' : 'bg-slate-100 text-slate-600'}`}>
                {selectedRecipe.difficulty}
              </span>
              <span className={`px-3 py-1 rounded-full text-xs font-semibold ${darkMode ? 'bg-slate-800 text-slate-300' : 'bg-slate-100 text-slate-600'}`}>
                {selectedRecipe.servings} serving{selectedRecipe.servings > 1 ? 's' : ''}
              </span>
            </div>
          </div>
          
          <div className="grid grid-cols-4 gap-3">
            <div className="bg-gradient-to-br from-orange-50 to-red-50 rounded-2xl p-4 text-center border-2 border-orange-100">
              <Flame className="w-6 h-6 text-orange-500 mx-auto mb-2" />
              <p className="text-2xl font-bold text-slate-800">{selectedRecipe.calories}</p>
              <p className="text-xs text-slate-500 mt-1">cal</p>
            </div>
            <div className="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl p-4 text-center border-2 border-blue-100">
              <Zap className="w-6 h-6 text-blue-500 mx-auto mb-2" />
              <p className="text-2xl font-bold text-slate-800">{selectedRecipe.protein}g</p>
              <p className="text-xs text-slate-500 mt-1">protein</p>
            </div>
            <div className="bg-gradient-to-br from-green-50 to-emerald-50 rounded-2xl p-4 text-center border-2 border-green-100">
              <Coffee className="w-6 h-6 text-green-500 mx-auto mb-2" />
              <p className="text-2xl font-bold text-slate-800">{selectedRecipe.carbs}g</p>
              <p className="text-xs text-slate-500 mt-1">carbs</p>
            </div>
            <div className="bg-gradient-to-br from-amber-50 to-yellow-50 rounded-2xl p-4 text-center border-2 border-amber-100">
              <Droplets className="w-6 h-6 text-amber-500 mx-auto mb-2" />
              <p className="text-2xl font-bold text-slate-800">{selectedRecipe.fats}g</p>
              <p className="text-xs text-slate-500 mt-1">fats</p>
            </div>
          </div>

          <div className="bg-slate-50 rounded-2xl p-5 border border-slate-200">
            <h3 className="font-bold text-slate-800 mb-3 flex items-center gap-2">
              <div className="w-6 h-6 bg-teal-500 rounded-lg flex items-center justify-center">
                <span className="text-white text-sm">📝</span>
              </div>
              Ingredients
            </h3>
            <ul className="space-y-2">
              {selectedRecipe.ingredients.map((ing, i) => (
                <li key={i} className="flex gap-3 items-start">
                  <div className="w-2 h-2 rounded-full bg-teal-500 mt-2 flex-shrink-0"></div>
                  <span className="text-slate-700">{ing}</span>
                </li>
              ))}
            </ul>
          </div>

          <div className="bg-slate-50 rounded-2xl p-5 border border-slate-200">
            <h3 className="font-bold text-slate-800 mb-3 flex items-center gap-2">
              <div className="w-6 h-6 bg-purple-500 rounded-lg flex items-center justify-center">
                <span className="text-white text-sm">👨‍🍳</span>
              </div>
              Instructions
            </h3>
            <ol className="space-y-3">
              {selectedRecipe.instructions.map((step, i) => (
                <li key={i} className="flex gap-3">
                  <span className="w-7 h-7 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 text-white text-sm flex items-center justify-center font-bold flex-shrink-0">
                    {i + 1}
                  </span>
                  <p className="text-slate-700 pt-0.5">{step}</p>
                </li>
              ))}
            </ol>
          </div>

          <button 
            onClick={() => toggleFavorite(selectedRecipe.id)} 
            className={`w-full py-5 rounded-2xl font-bold text-lg shadow-lg hover:shadow-xl hover:scale-[1.02] active:scale-[0.98] transition-all duration-300 ${
              favorites.includes(selectedRecipe.id) 
                ? 'bg-gradient-to-r from-red-500 to-pink-500 text-white' 
                : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
            }`}
          >
            <Heart className={`w-6 h-6 inline mr-2 ${favorites.includes(selectedRecipe.id) ? 'fill-white' : ''}`} />
            {favorites.includes(selectedRecipe.id) ? 'Saved to Favorites' : 'Save Recipe'}
          </button>
        </div>
      </div>
    </div>
  )}
  
  {selectedWorkout && (
    <div 
      className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-end animate-[slideIn_0.3s_ease-out]"
      onClick={(e) => {
        if (e.target === e.currentTarget) {
          setSelectedWorkout(null);
        }
      }}
    >
      <div className="bg-white w-full max-h-[85vh] rounded-t-[2rem] overflow-y-auto">
        <div className={`relative h-48 bg-gradient-to-br ${selectedWorkout.gradient} flex flex-col items-center justify-center`}>
          <button 
            onClick={(e) => {
              e.stopPropagation();
              e.preventDefault();
              setSelectedWorkout(null);
            }}
            className="absolute top-5 right-5 p-3 bg-white/90 backdrop-blur-sm rounded-full shadow-xl hover:bg-white hover:scale-110 transition-all duration-300"
          >
            <X className="w-6 h-6 text-slate-800" />
          </button>
        </div>
        
        <div className="p-6 space-y-5">
          <h2 className="text-3xl font-bold text-slate-800">{selectedWorkout.name}</h2>
          
          <div className="grid grid-cols-2 gap-4">
            <div className="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl p-5 text-center border-2 border-blue-100">
              <p className="text-sm text-slate-500 mb-2 font-medium">Sets</p>
              <p className="text-4xl font-bold text-slate-800">{selectedWorkout.sets}</p>
            </div>
            <div className="bg-gradient-to-br from-green-50 to-emerald-50 rounded-2xl p-5 text-center border-2 border-green-100">
              <p className="text-sm text-slate-500 mb-2 font-medium">Reps</p>
              <p className="text-4xl font-bold text-slate-800">{selectedWorkout.reps}</p>
            </div>
          </div>

          <div className="bg-slate-50 rounded-2xl p-5 border border-slate-200">
            <h3 className="font-bold text-slate-800 mb-3 flex items-center gap-2">
              <Activity className="w-5 h-5 text-purple-500" />
              Exercise Info
            </h3>
            <p className="text-slate-700 mb-2"><strong>Category:</strong> {selectedWorkout.category}</p>
            <p className="text-slate-600 text-sm">
              Complete {selectedWorkout.sets} sets of {selectedWorkout.reps} reps with proper form. 
              Rest 60-90 seconds between sets for optimal results.
            </p>
          </div>

          <button
            onClick={() => completeWorkout(selectedWorkout.name)}
            className={`w-full bg-gradient-to-r ${selectedWorkout.gradient} text-white py-5 rounded-2xl font-bold text-lg flex items-center justify-center gap-3 shadow-lg hover:shadow-xl hover:scale-[1.02] active:scale-[0.98] transition-all duration-300`}
          >
            <CheckCircle className="w-6 h-6" />
            Mark as Complete
          </button>
        </div>
      </div>
    </div>
  )}

  {showMealSelector && (
    <div 
      className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-end animate-[slideIn_0.3s_ease-out]"
      onClick={(e) => {
        if (e.target === e.currentTarget) {
          setShowMealSelector(null);
        }
      }}
    >
      <div className="bg-white w-full max-h-[85vh] rounded-t-[2rem] overflow-y-auto">
        <div className="sticky top-0 bg-white border-b border-slate-200 px-6 py-5 flex items-center justify-between">
          <h3 className="text-xl font-bold text-slate-800">Select {showMealSelector.mealType}</h3>
          <button 
            onClick={(e) => {
              e.stopPropagation();
              e.preventDefault();
              setShowMealSelector(null);
            }}
            className="p-2 hover:bg-slate-100 rounded-xl transition-all duration-300"
          >
            <X className="w-6 h-6" />
          </button>
        </div>
        
        <div className="p-6 space-y-3">
          {[...RECIPE_DATABASE, ...customRecipes]
            .filter(r => r.category === showMealSelector.mealType)
            .map((recipe, idx) => (
              <div
                key={recipe.id}
                onClick={() => {
                  const key = `${showMealSelector.day}-${showMealSelector.mealType}`;
                  const updated = { ...mealPlan, [key]: recipe };
                  setMealPlan(updated);
                  localStorage.setItem('mealPlan', JSON.stringify(updated));
                  setShowMealSelector(null);
                }}
                className="bg-white rounded-2xl p-4 shadow-sm hover:shadow-md border border-slate-200 hover:border-purple-300 cursor-pointer transition-all duration-300 group"
                style={{
                  animation: `slideIn 0.3s ease-out ${idx * 0.05}s both`
                }}
              >
                <div className="flex items-center gap-4">
                  <div className={`w-14 h-14 rounded-2xl bg-gradient-to-br ${recipe.gradient} flex items-center justify-center text-2xl shadow-md group-hover:scale-110 transition-transform duration-300`}>
                    {recipe.emoji}
                  </div>
                  <div className="flex-1">
                    <p className="font-semibold text-slate-800 mb-1">{recipe.name}</p>
                    <div className="flex items-center gap-3 text-sm text-slate-600">
                      <span className="flex items-center gap-1">
                        <Flame className="w-3 h-3" />
                        {recipe.calories}
                      </span>
                      <span>{recipe.protein}g protein</span>
                    </div>
                  </div>
                  <ChevronRight className="w-5 h-5 text-slate-400 group-hover:translate-x-1 transition-transform duration-300" />
                </div>
              </div>
            ))}
        </div>
      </div>
    </div>
  )}
  
  {/* Chat Modal */}
  {selectedFriend && (
    <div 
      className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex flex-col"
      onClick={(e) => {
        if (e.target === e.currentTarget) {
          setSelectedFriend(null);
        }
      }}
    >
      <div className="bg-white w-full h-full flex flex-col">
        {/* Chat Header */}
        <div className="bg-gradient-to-r from-blue-500 to-purple-500 px-6 py-4 flex items-center gap-4">
          <button
            onClick={() => setSelectedFriend(null)}
            className="p-2 hover:bg-white/20 rounded-xl transition-all"
          >
            <ChevronRight className="w-6 h-6 text-white rotate-180" />
          </button>
          <div className="w-10 h-10 rounded-full bg-white flex items-center justify-center text-2xl">
            {selectedFriend.avatar}
          </div>
          <div className="flex-1">
            <p className="font-bold text-white">{selectedFriend.name}</p>
            <p className="text-sm text-blue-100">@{selectedFriend.username}</p>
          </div>
        </div>

        {/* Chat Messages */}
        <div className="flex-1 overflow-y-auto px-6 py-6 space-y-4 bg-slate-50">
          {(chatMessages[selectedFriend.id] || []).map((msg) => (
            <div
              key={msg.id}
              className={`flex ${msg.sender === 'me' ? 'justify-end' : 'justify-start'}`}
            >
              <div
                className={`max-w-[75%] rounded-2xl px-4 py-3 ${
                  msg.sender === 'me'
                    ? 'bg-gradient-to-r from-blue-500 to-purple-500 text-white'
                    : 'bg-white text-slate-800 shadow-sm'
                }`}
              >
                <p className="text-sm">{msg.text}</p>
                <p className={`text-xs mt-1 ${msg.sender === 'me' ? 'text-blue-100' : 'text-slate-400'}`}>
                  {new Date(msg.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                </p>
              </div>
            </div>
          ))}
          {(chatMessages[selectedFriend.id] || []).length === 0 && (
            <div className="text-center py-16">
              <MessageCircle className="w-16 h-16 text-slate-300 mx-auto mb-4" />
              <p className="text-slate-500">Start your conversation!</p>
            </div>
          )}
        </div>

        {/* Chat Input */}
        <div className="bg-white border-t border-slate-200 px-6 py-4">
          <div className="flex gap-3">
            <input
              type="text"
              placeholder="Type a message..."
              onKeyPress={(e) => {
                if (e.key === 'Enter' && e.target.value.trim()) {
                  sendChatMessage(selectedFriend.id, e.target.value);
                  e.target.value = '';
                }
              }}
              className="flex-1 px-4 py-3 bg-slate-100 rounded-2xl focus:outline-none focus:ring-2 focus:ring-blue-400 transition-all"
            />
            <button
              onClick={(e) => {
                const input = e.target.previousElementSibling;
                if (input.value.trim()) {
                  sendChatMessage(selectedFriend.id, input.value);
                  input.value = '';
                }
              }}
              className="px-5 py-3 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-2xl hover:shadow-lg transition-all"
            >
              <Send className="w-5 h-5" />
            </button>
          </div>
        </div>
      </div>
    </div>
  )}

  {/* Profile Setup Modal */}
  {showProfileSetup && (
    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-6">
      <div className="bg-white w-full max-w-md rounded-3xl p-8">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-2xl font-bold text-slate-800">Create Your Profile</h2>
          <button
            onClick={() => setShowProfileSetup(false)}
            className="p-2 hover:bg-slate-100 rounded-xl transition-all"
          >
            <X className="w-6 h-6 text-slate-400" />
          </button>
        </div>
        <p className="text-slate-500 mb-6">Let's get you set up!</p>
        
        <form
          onSubmit={(e) => {
            console.log('=== FORM SUBMIT EVENT TRIGGERED ===');
            e.preventDefault();
            console.log('preventDefault called');
            
            const formData = new FormData(e.target);
            const name = formData.get('name');
            const username = formData.get('username');
            const bio = formData.get('bio') || '';
            const avatar = formData.get('avatar') || '👤';
            
            console.log('Extracted form data:', { 
              name, 
              username, 
              bio, 
              avatar,
              nameLength: name?.length,
              usernameLength: username?.length
            });
            
            if (!name || !username) {
              console.error('Form validation failed');
              alert('❌ Please enter both your name and username');
              return;
            }
            
            console.log('Validation passed, calling createProfile...');
            createProfile({
              name: name.trim(),
              username: username.trim(),
              bio: bio.trim(),
              avatar: avatar.trim()
            });
          }}
          className="space-y-4"
        >
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-2">Avatar Emoji</label>
            <input
              type="text"
              name="avatar"
              maxLength="2"
              defaultValue="😊"
              placeholder="Choose an emoji 😊"
              className="w-full px-4 py-3 bg-slate-50 rounded-xl border-2 border-slate-200 focus:border-teal-400 focus:ring-2 focus:ring-teal-100 transition-all outline-none text-center text-2xl"
            />
            <p className="text-xs text-slate-500 mt-1">Pick any emoji for your profile picture</p>
          </div>

          <div>
            <label className="block text-sm font-medium text-slate-700 mb-2">Full Name</label>
            <input
              type="text"
              name="name"
              required
              placeholder="Your name"
              className="w-full px-4 py-3 bg-slate-50 rounded-xl border-2 border-slate-200 focus:border-teal-400 focus:ring-2 focus:ring-teal-100 transition-all outline-none"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-slate-700 mb-2">Username</label>
            <input
              type="text"
              name="username"
              required
              placeholder="@username"
              className="w-full px-4 py-3 bg-slate-50 rounded-xl border-2 border-slate-200 focus:border-teal-400 focus:ring-2 focus:ring-teal-100 transition-all outline-none"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-slate-700 mb-2">Bio</label>
            <textarea
              name="bio"
              rows="3"
              placeholder="Tell us about your fitness journey..."
              className="w-full px-4 py-3 bg-slate-50 rounded-xl border-2 border-slate-200 focus:border-teal-400 focus:ring-2 focus:ring-teal-100 transition-all outline-none resize-none"
            />
          </div>

          <button
            type="submit"
            className="w-full py-4 bg-gradient-to-r from-teal-500 to-cyan-500 text-white rounded-xl font-bold shadow-lg hover:shadow-xl hover:scale-[1.02] active:scale-[0.98] transition-all"
          >
            Create Profile 🎉
          </button>
          
          <button
            type="button"
            onClick={() => {
              console.log('=== MANUAL TEST BUTTON CLICKED ===');
              const testProfile = {
                name: 'Test User',
                username: 'testuser',
                bio: 'This is a test',
                avatar: '🧪'
              };
              console.log('Creating test profile:', testProfile);
              createProfile(testProfile);
            }}
            className="w-full py-3 bg-slate-200 text-slate-700 rounded-xl font-semibold hover:bg-slate-300 transition-all text-sm"
          >
            🧪 Test: Create Sample Profile
          </button>
        </form>
      </div>
    </div>
  )}
</div>
```

);
}