import React, { useState, useRef, useEffect } from 'react'; import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Textarea } from "@/components/ui/textarea"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Label } from "@/components/ui/label"; import { User, MessageSquare, BookOpen, Users, Heart, Shield, HelpCircle, CreditCard } from "lucide-react"; type Message = { id: string; text: string; sender: 'user' | 'darla'; timestamp: Date; }; type MoodEntry = { id: string; mood: number; text: string; date: Date; }; type GroupMessage = { id: string; text: string; sender: string; timestamp: Date; }; export default function MhereApp() { const [activeTab, setActiveTab] = useState<'chat' | 'mood' | 'groups' | 'human' | 'about'>('chat'); const [input, setInput] = useState(''); const [messages, setMessages] = useState([]); const [mood, setMood] = useState(3); const [journalText, setJournalText] = useState(''); const [moodEntries, setMoodEntries] = useState([]); const [groupMessages, setGroupMessages] = useState([]); const [groupInput, setGroupInput] = useState(''); const [selectedCountry, setSelectedCountry] = useState('United States'); const [paymentMethod, setPaymentMethod] = useState('credit'); const messagesEndRef = useRef(null); const countryPrices = { 'India': { price: 99, currency: '₹' }, 'Brazil': { price: 15, currency: '$' }, 'United States': { price: 25, currency: '$' }, 'United Kingdom': { price: 25, currency: '£' }, 'Germany': { price: 25, currency: '€' } }; useEffect(() => { if (messages.length === 0) { setMessages([{ id: '1', text: "Hi there! I'm Darla. How are you feeling today?", sender: 'darla', timestamp: new Date() }]); } }, [messages.length]); useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages, groupMessages]); const handleSendMessage = () => { if (!input.trim()) return; const userMessage: Message = { id: Date.now().toString(), text: input, sender: 'user', timestamp: new Date() }; setMessages(prev => [...prev, userMessage]); setInput(''); setTimeout(() => { const responses = [ "I hear you. It's okay to feel this way.", "Thank you for sharing that with me.", "That sounds challenging. Would you like to talk more about it?", "I'm here for you. Your feelings are valid.", "Let's take a deep breath together." ]; const darlaMessage: Message = { id: Date.now().toString(), text: responses[Math.floor(Math.random() * responses.length)], sender: 'darla', timestamp: new Date() }; setMessages(prev => [...prev, darlaMessage]); }, 1000); }; const handleSaveMoodEntry = () => { if (!journalText.trim()) return; const newEntry: MoodEntry = { id: Date.now().toString(), mood, text: journalText, date: new Date() }; setMoodEntries(prev => [...prev, newEntry]); setJournalText(''); setMood(3); }; const handleSendGroupMessage = () => { if (!groupInput.trim()) return; const newMessage: GroupMessage = { id: Date.now().toString(), text: groupInput, sender: `User${Math.floor(Math.random() * 1000)}`, timestamp: new Date() }; setGroupMessages(prev => [...prev, newMessage]); setGroupInput(''); setTimeout(() => { const responses = [ "I've felt that way too. You're not alone.", "Thanks for sharing. That takes courage.", "I understand what you're going through.", "Sending you virtual support 💙", "How can we support each other through this?" ]; const responseMessage: GroupMessage = { id: Date.now().toString(), text: responses[Math.floor(Math.random() * responses.length)], sender: `User${Math.floor(Math.random() * 1000)}`, timestamp: new Date() }; setGroupMessages(prev => [...prev, responseMessage]); }, 2000); }; const renderHumanSection = () => (

Connect with a Psychologist Book a 50-minute video session with a licensed professional

Dr. Sarah Johnson

Licensed Clinical Psychologist

10+ years experience

Select your country

Payment Method

Session Summary

50-minute session {countryPrices[selectedCountry as keyof typeof countryPrices].currency} {countryPrices[selectedCountry as keyof typeof countryPrices].price}

Crisis Support

If you're in immediate distress, please contact your local crisis hotline.

); const renderAboutSection = () => ( About Mhere

Our Mission

Mhere provides accessible mental health support through AI companionship, mood tracking, and connections to licensed professionals.

Features

Talk to Darla - our empathetic AI companion
Mood journal to track your emotional wellbeing
Anonymous support groups for shared experiences
Access to licensed mental health professionals

Privacy & Security

Your conversations are private. We use end-to-end encryption for all communications with professionals.

); return (

Mhere

{activeTab === 'chat' && (

{messages.map((message) => (

{message.text}

))}

setInput(e.target.value)}
                placeholder="Type your message..."
                className="flex-grow"
                onKeyDown={(e) => e.key === 'Enter' && handleSendMessage()}
              />
              <Button onClick={handleSendMessage} className="bg-blue-500 hover:bg-blue-600">
                Send
              </Button>
            </div>
          </div>
        )}

{activeTab === 'mood' && (
          <div className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>How are you feeling today?</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex justify-between">
                  {[1, 2, 3, 4, 5].map((num) => (
                    <button
                      key={num}
                      onClick={() => setMood(num)}
                      className={`w-10 h-10 rounded-full flex items-center justify-center 
                        ${mood === num ? 'bg-purple-500 text-white' : 'bg-purple-100'}`}
                    >
                      {num}
                    </button>
                  ))}
                </div>
                <Textarea
                  value={journalText}
                  onChange={(e) => setJournalText(e.target.value)}
                  placeholder="Write about your feelings..."
                  rows={5}
                />
                <Button 
                  onClick={handleSaveMoodEntry} 
                  className="w-full bg-blue-500 hover:bg-blue-600"
                >
                  Save Entry
                </Button>
              </CardContent>
            </Card>

{moodEntries.length > 0 && (
              <Card>
                <CardHeader>
                  <CardTitle>Your Mood History</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  {moodEntries.map((entry) => (
                    <div key={entry.id} className="border-b pb-2">
                      <div className="flex justify-between">
                        <span className="font-medium">{entry.date.toLocaleDateString()}</span>
                        <span className={`w-6 h-6 rounded-full flex items-center justify-center 
                          ${entry.mood <= 2 ? 'bg-red-100 text-red-800' : 
                            entry.mood >= 4 ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}`}>
                          {entry.mood}
                        </span>
                      </div>
                      <p className="text-gray-600 mt-1">{entry.text}</p>
                    </div>
                  ))}
                </CardContent>
              </Card>
            )}
          </div>
        )}

{activeTab === 'groups' && (
          <div className="flex flex-col h-full">
            <div className="flex-grow overflow-y-auto mb-4 p-2 space-y-4">
              {groupMessages.length === 0 ? (
                <div className="text-center text-gray-500 py-8">
                  <p>Welcome to the support group!</p>
                  <p>Share your thoughts and connect with others.</p>
                </div>
              ) : (
                groupMessages.map((message) => (
                  <div key={message.id} className="flex flex-col">
                    <div className="text-xs text-gray-500">{message.sender}</div>
                    <div className="bg-purple-100 p-3 rounded-lg max-w-xs">
                      {message.text}
                    </div>
                  </div>
                ))
              )}
              <div ref={messagesEndRef} />
            </div>
            <div className="flex gap-2">
              <Textarea
                value={groupInput}
                onChange={(e) => setGroupInput(e.target.value)}
                placeholder="Type your message..."
                className="flex-grow"
                onKeyDown={(e) => e.key === 'Enter' && handleSendGroupMessage()}
              />
              <Button 
                onClick={handleSendGroupMessage} 
                className="bg-blue-500 hover:bg-blue-600"
              >
                Send
              </Button>
            </div>
          </div>
        )}

{activeTab === 'human' && renderHumanSection()}
        {activeTab === 'about' && renderAboutSection()}
      </main>

<nav className="bg-white border-t border-gray-200 p-2">
        <div className="flex justify-around">
          <button
            onClick={() => setActiveTab('chat')}
            className={`flex flex-col items-center p-2 rounded-lg ${activeTab === 'chat' ? 'bg-blue-100 text-blue-600' : 'text-gray-600'}`}
          >
            <MessageSquare className="h-6 w-6" />
            <span className="text-xs mt-1">Darla</span>
          </button>
          <button
            onClick={() => setActiveTab('mood')}
            className={`flex flex-col items-center p-2 rounded-lg ${activeTab === 'mood' ? 'bg-blue-100 text-blue-600' : 'text-gray-600'}`}
          >
            <BookOpen className="h-6 w-6" />
            <span className="text-xs mt-1">Mood</span>
          </button>
          <button
            onClick={() => setActiveTab('groups')}
            className={`flex flex-col items-center p-2 rounded-lg ${activeTab === 'groups' ? 'bg-blue-100 text-blue-600' : 'text-gray-600'}`}
          >
            <Users className="h-6 w-6" />
            <span className="text-xs mt-1">Groups</span>
          </button>
          <button
            onClick={() => setActiveTab('human')}
            className={`flex flex-col items-center p-2 rounded-lg ${activeTab === 'human' ? 'bg-blue-100 text-blue-600' : 'text-gray-600'}`}
          >
            <User className="h-6 w-6" />
            <span className="text-xs mt-1">Human</span>
          </button>
          <button
            onClick={() => setActiveTab('about')}
            className={`flex flex-col items-center p-2 rounded-lg ${activeTab === 'about' ? 'bg-blue-100 text-blue-600' : 'text-gray-600'}`}
          >
            <HelpCircle className="h-6 w-6" />
            <span className="text-xs mt-1">About</span>
          </button>
        </div>
      </nav>
    </div>
  );
}</article></body></html>