Create V1Q BRAIN PI

V1Q BRAIN PI

@@ -0,0 +1,172 @@
+import React, { useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { 
+  MessageSquare, 
+  GraduationCap, 
+  PenTool, 
+  HeadphonesIcon,
+  FileText,
+  CheckCircle,
+  MapPin,
+  GamepadIcon,
+  Heart
+} from 'lucide-react';
+
+interface ChatMode {
+  id: string;
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  color: string;
+  examples: string[];
+}
+
+const chatModes: ChatMode[] = [
+  {
+    id: 'general',
+    title: 'General Assistant',
+    description: 'Multi-purpose AI helper for various tasks',
+    icon: <MessageSquare className="h-5 w-5" />,
+    color: 'bg-blue-500',
+    examples: ['Answer questions', 'Explain concepts', 'Help with decisions']
+  },
+  {
+    id: 'study',
+    title: 'Study Helper',
+    description: 'Educational support and learning assistance',
+    icon: <GraduationCap className="h-5 w-5" />,
+    color: 'bg-green-500',
+    examples: ['Explain topics', 'Quiz preparation', 'Homework help']
+  },
+  {
+    id: 'writing',
+    title: 'Writing Assistant',
+    description: 'Help with writing, editing, and grammar',
+    icon: <PenTool className="h-5 w-5" />,
+    color: 'bg-purple-500',
+    examples: ['Improve text', 'Grammar check', 'Creative writing']
+  },
+  {
+    id: 'support',
+    title: 'Customer Support',
+    description: 'Automated customer service helper',
+    icon: <HeadphonesIcon className="h-5 w-5" />,
+    color: 'bg-yellow-500',
+    examples: ['Answer FAQs', 'Troubleshooting', 'Product info']
+  },
+  {
+    id: 'resume',
+    title: 'Resume Builder',
+    description: 'AI-powered resume creation and optimization',
+    icon: <FileText className="h-5 w-5" />,
+    color: 'bg-indigo-500',
+    examples: ['Resume writing', 'Format suggestions', 'Skills optimization']
+  },
+  {
+    id: 'grammar',
+    title: 'Grammar Corrector',
+    description: 'Advanced grammar and style checking',
+    icon: <CheckCircle className="h-5 w-5" />,
+    color: 'bg-red-500',
+    examples: ['Fix grammar', 'Style improvements', 'Clarity check']
+  },
+  {
+    id: 'travel',
+    title: 'Travel Planner',
+    description: 'Plan trips and get travel recommendations',
+    icon: <MapPin className="h-5 w-5" />,
+    color: 'bg-teal-500',
+    examples: ['Trip planning', 'Destination info', 'Travel tips']
+  },
+  {
+    id: 'game',
+    title: 'Game Character Generator',
+    description: 'Create dialogues and characters for games',
+    icon: <GamepadIcon className="h-5 w-5" />,
+    color: 'bg-orange-500',
+    examples: ['Character creation', 'Dialogue writing', 'Story ideas']
+  },
+  {
+    id: 'mental',
+    title: 'Mental Health Check-in',
+    description: 'Non-medical wellness and mood support',
+    icon: <Heart className="h-5 w-5" />,
+    color: 'bg-pink-500',
+    examples: ['Mood tracking', 'Wellness tips', 'Mindfulness']
+  }
+];
+
+interface ChatBotModesProps {
+  onModeSelect: (mode: ChatMode) => void;
+}
+
+const ChatBotModes: React.FC<ChatBotModesProps> = ({ onModeSelect }) => {
+  const [selectedMode, setSelectedMode] = useState<string | null>(null);
+
+  const handleModeSelect = (mode: ChatMode) => {
+    setSelectedMode(mode.id);
+    onModeSelect(mode);
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="text-center">
+        <h2 className="text-3xl font-bold mb-2">Choose Your AI Assistant Mode</h2>
+        <p className="text-muted-foreground">Select the type of assistance you need</p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {chatModes.map((mode) => (
+          <Card 
+            key={mode.id}
+            className={`cursor-pointer transition-all hover:shadow-lg ${
+              selectedMode === mode.id ? 'ring-2 ring-primary' : ''
+            }`}
+            onClick={() => handleModeSelect(mode)}
+          >
+            <CardHeader className="pb-3">
+              <div className="flex items-center gap-3">
+                <div className={`p-2 rounded-lg ${mode.color} text-white`}>
+                  {mode.icon}
+                </div>
+                <div>
+                  <CardTitle className="text-lg">{mode.title}</CardTitle>
+                  <Badge variant="secondary" className="text-xs">
+                    V1Q Powered
+                  </Badge>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <CardDescription className="mb-3">
+                {mode.description}
+              </CardDescription>
+              <div className="space-y-1">
+                <p className="text-sm font-medium text-muted-foreground">Examples:</p>
+                {mode.examples.map((example, index) => (
+                  <div key={index} className="text-xs text-muted-foreground">
+                    • {example}
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <div className="text-center">
+        <Button 
+          variant="outline" 
+          onClick={() => onModeSelect(chatModes[0])}
+          className="mt-4"
+        >
+          Start with General Assistant
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default ChatBotModes;