[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" isMerged="true" 'use client' import { Button } from "@/components/ui/button" import Link from "next/link" import { motion } from "framer-motion" import { BarChart, BookOpen, Brain, Lightbulb, ArrowRight } from 'lucide-react' import { Progress } from "@/components/ui/progress" import { ScrollArea } from "@/components/ui/scroll-area" const features = [ { href: '/mood-tracker', icon: BarChart, label: 'Track Your Mood', description: 'Monitor your emotional states over time' }, { href: '/journal', icon: BookOpen, label: 'Guided Journaling', description: 'Reflect on your thoughts and experiences' }, { href: '/thought-diary', icon: Brain, label: 'Thought Diary', description: 'Identify and challenge negative thinking patterns' }, { href: '/techniques', icon: Lightbulb, label: 'CBT Techniques', description: 'Learn and practice evidence-based strategies' }, ] const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { y: 20, opacity: 0 }, visible: { y: 0, opacity: 1, }, } export default function Home() { return (

Your Path to Mental Wellness Empower yourself with Cognitive Behavioral Therapy techniques, right at your fingertips. {features.map((feature, index) => (

{feature.label}

{feature.description}

))}

) } [V0_FILE]typescriptreact:file="app/mood-tracker/page.tsx" isMerged="true" import MoodTracker from '../components/MoodTracker' export default function MoodTrackerPage() { return (

Mood Tracker

) } [V0_FILE]typescriptreact:file="app/journal/page.tsx" isMerged="true" import GuidedJournal from '../components/GuidedJournal' export default function JournalPage() { return (

Guided Journal

) } [V0_FILE]typescriptreact:file="app/components/LoadingAnimation.tsx" isMerged="true" 'use client' import { motion } from 'framer-motion' import { useEffect, useState } from 'react' export default function LoadingAnimation() { const [isLoading, setIsLoading] = useState(true) useEffect(() => { const timer = setTimeout(() => setIsLoading(false), 2000) return () => clearTimeout(timer) }, []) if (!isLoading) return null return ( setIsLoading(false)} > ) } [V0_FILE]typescriptreact:file="app/thought-diary/page.tsx" isMerged="true" import ThoughtDiary from '../components/ThoughtDiary' export default function ThoughtDiaryPage() { return (

Thought Diary

) } [V0_FILE]typescriptreact:file="app/components/CBTTechniques.tsx" isQuickEdit="true" isMerged="true" 'use client' import { useState, useEffect } from 'react' import { motion } from 'framer-motion' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" import { Button } from "@/components/ui/button" import { ChevronRight, ExternalLink } from 'lucide-react' import Link from 'next/link' import { LoadingSkeleton } from "@/components/LoadingSkeleton" import { useToast } from "@/components/ui/use-toast" const techniques = [ { id: 'cognitive-restructuring', title: 'Cognitive Restructuring', description: 'Challenge and change negative thought patterns.', steps: [ 'Identify negative thoughts', 'Evaluate the evidence for and against these thoughts', 'Develop more balanced, realistic thoughts', 'Practice replacing negative thoughts with balanced ones', ], resources: [ { title: 'Cognitive Restructuring Worksheet', url: 'https://www.psychpoint.com/mental-health/worksheets/cognitive-restructuring' }, { title: 'Video: Cognitive Restructuring', url: 'https://www.youtube.com/watch?v=1VYsO6HlUHw' }, ], }, { id: 'exposure-therapy', title: 'Exposure Therapy', description: 'Gradually face fears and anxieties in a controlled manner.', steps: [ 'Create a fear hierarchy', 'Start with less challenging exposures', 'Gradually work up to more difficult situations', 'Practice relaxation techniques during exposures', ], resources: [ { title: 'Exposure Therapy Guide', url: 'https://www.apa.org/ptsd-guideline/patients-and-families/exposure-therapy' }, { title: 'Fear Hierarchy Worksheet', url: 'https://www.therapistaid.com/therapy-worksheet/fear-hierarchy' }, ], }, { id: 'behavioral-activation', title: 'Behavioral Activation', description: 'Increase engagement in positive activities to improve mood.', steps: [ 'Identify activities that bring joy or a sense of accomplishment', 'Schedule these activities into your daily routine', 'Monitor your mood before and after each activity', 'Gradually increase the frequency and duration of positive activities', ], resources: [ { title: 'Behavioral Activation Guide', url: 'https://www.div12.org/treatment/behavioral-activation-for-depression/' }, { title: 'Activity Planning Worksheet', url: 'https://www.therapistaid.com/therapy-worksheet/activity-planning' }, ], }, { id: 'mindfulness', title: 'Mindfulness Techniques', description: 'Practice being present in the moment to reduce stress and anxiety.', steps: [ 'Focus on your breath or a specific sensation', 'Observe thoughts and feelings without judgment', 'Gently return focus when your mind wanders', 'Practice regularly, starting with short sessions', ], resources: [ { title: 'Mindfulness Exercises', url: 'https://www.mayoclinic.org/healthy-lifestyle/consumer-health/in-depth/mindfulness-exercises/art-20046356' }, { title: 'Guided Mindfulness Meditation (Audio)', url: 'https://www.uclahealth.org/programs/marc/mindful-meditations' }, ], }, { id: 'problem-solving', title: 'Problem-Solving Therapy', description: 'Develop effective strategies to address life challenges.', steps: [ 'Identify and define the problem', 'Generate potential solutions', 'Evaluate and choose the best solution', 'Implement and review the outcome', 'Adjust approach based on results', ], resources: [ { title: 'Problem-Solving Therapy Guide', url: 'https://www.apa.org/ptsd-guideline/treatments/problem-solving-therapy' }, { title: 'Problem-Solving Worksheet', url: 'https://www.therapistaid.com/therapy-worksheet/dbt-problem-solving' }, ], }, { id: 'relaxation-techniques', title: 'Relaxation Techniques', description: 'Practice methods to reduce physical tension and promote calmness.', steps: [ 'Learn deep breathing exercises', 'Practice progressive muscle relaxation', 'Try guided imagery or visualization', 'Incorporate regular relaxation sessions into your routine', ], resources: [ { title: 'Progressive Muscle Relaxation Guide', url: 'https://www.uofmhealth.org/health-library/uz2225' }, { title: 'Relaxation Techniques for Stress Relief', url: 'https://www.helpguide.org/articles/stress/relaxation-techniques-for-stress-relief.htm' }, ], }, { id: 'acceptance-commitment-therapy', title: 'Acceptance and Commitment Therapy (ACT)', description: 'Learn to accept difficult thoughts and feelings while committing to value-driven actions.', steps: [ 'Practice mindfulness and present-moment awareness', 'Develop psychological flexibility', 'Identify personal values', 'Commit to actions aligned with your values', ], resources: [ { title: 'ACT: An Overview', url: 'https://www.psychologytoday.com/us/therapy-types/acceptance-and-commitment-therapy' }, { title: 'Values Clarification Worksheet', url: 'https://www.therapistaid.com/therapy-worksheet/values-clarification' }, ], }, ] export default function CBTTechniques() { const [expandedTechnique, setExpandedTechnique] = useState(null) const [isLoading, setIsLoading] = useState(true) const { toast } = useToast() useEffect(() => { // Simulate loading delay const timer = setTimeout(() => setIsLoading(false), 1500) return () => clearTimeout(timer) }, []) const handleResourceClick = (url: string) => { toast({ title: "Opening resource", description: "The resource will open in a new tab.", }) } if (isLoading) { return ( CBT Techniques Loading techniques... ) } return ( CBT Techniques Explore various Cognitive Behavioral Therapy techniques and related approaches {techniques.map((technique) => ( setExpandedTechnique(technique.id)} className="hover-lift"> {technique.title}

{technique.description}

Steps:

{step}

Resources:

))} ) } [V0_FILE]typescriptreact:file="app/techniques/page.tsx" isMerged="true" import CBTTechniques from '../components/CBTTechniques' export default function TechniquesPage() { return (

CBT Techniques

) } [V0_FILE]typescript:file="lib/utils.ts" isMerged="true" import { ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="app/components/Sidebar.tsx" isMerged="true" import { motion, AnimatePresence } from "framer-motion"; import { cn } from "@/lib/utils"; import { Menu, X } from 'lucide-react'; import Link from "next/link"; import { useSidebar } from "./SidebarContext"; import { Button } from "@/components/ui/button"; import type { LinkProps } from "next/link"; type Links = { href: string; label: string; icon: React.ReactNode; }; export const DesktopSidebar = ({ className, children, ...props }: React.ComponentProps) => { const { open, setOpen, animate } = useSidebar(); return ( ); }; export const MobileSidebar = ({ className, children, ...props }: React.ComponentProps<"div">) => { const { open, setOpen } = useSidebar(); return ( <>

{open && (

{children} )} ); }; export const SidebarLink = ({ link, className, ...props }: { link: Links; className?: string; props?: LinkProps; }) => { const { open, animate } = useSidebar(); return ( {link.icon} {link.label} ); }; export const Logo = () => { return (

Cogniflorence ); }; [V0_FILE]json:file="package.json" isMerged="true" { "name": "cogniflorence", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@supabase/auth-helpers-nextjs": "^0.7.4", "@supabase/supabase-js": "^2.32.0", "@types/node": "20.5.0", "@types/react": "18.2.20", "@types/react-dom": "18.2.7", "autoprefixer": "10.4.15", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "framer-motion": "^10.16.0", "lucide-react": "^0.268.0", "next": "13.4.19", "next-themes": "^0.2.1", "postcss": "8.4.28", "react": "18.2.0", "react-dom": "18.2.0", "recharts": "^2.7.2", "tailwind-merge": "^1.14.0", "tailwindcss": "3.3.3", "tailwindcss-animate": "^1.0.6", "typescript": "5.1.6" } } [V0_FILE]typescriptreact:file="app/components/MoodTracker.tsx" isQuickEdit="true" isMerged="true" 'use client' import { useState } from 'react' import { motion } from 'framer-motion' import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { Smile, Meh, Frown, Angry, ThumbsUp, Heart, Zap, Coffee, CloudRain, Sun, Moon, Wind } from 'lucide-react' import { useToast } from "@/components/ui/use-toast" import { Progress } from "@/components/ui/progress" import { ScrollArea } from "@/components/ui/scroll-area" const moods = [ { label: 'Happy', icon: Smile, color: 'text-green-500', bgColor: 'bg-green-100' }, { label: 'Excited', icon: Zap, color: 'text-yellow-500', bgColor: 'bg-yellow-100' }, { label: 'Loved', icon: Heart, color: 'text-red-500', bgColor: 'bg-red-100' }, { label: 'Calm', icon: Sun, color: 'text-blue-500', bgColor: 'bg-blue-100' }, { label: 'Okay', icon: Meh, color: 'text-gray-500', bgColor: 'bg-gray-100' }, { label: 'Tired', icon: Coffee, color: 'text-brown-500', bgColor: 'bg-brown-100' }, { label: 'Anxious', icon: Wind, color: 'text-purple-500', bgColor: 'bg-purple-100' }, { label: 'Sad', icon: CloudRain, color: 'text-indigo-500', bgColor: 'bg-indigo-100' }, { label: 'Angry', icon: Angry, color: 'text-orange-500', bgColor: 'bg-orange-100' }, { label: 'Stressed', icon: Frown, color: 'text-pink-500', bgColor: 'bg-pink-100' }, { label: 'Grateful', icon: ThumbsUp, color: 'text-teal-500', bgColor: 'bg-teal-100' }, { label: 'Relaxed', icon: Moon, color: 'text-cyan-500', bgColor: 'bg-cyan-100' }, ] export default function MoodTracker() { const [selectedMood, setSelectedMood] = useState(null) const [customMood, setCustomMood] = useState('') const [moodContext, setMoodContext] = useState('') const [isLoading, setIsLoading] = useState(false) const { toast } = useToast() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) // Simulating an API call setTimeout(() => { toast({ title: "Mood entry saved", description: "Your mood has been recorded successfully.", }) setSelectedMood(null) setCustomMood('') setMoodContext('') setIsLoading(false) }, 1000) } return (

How are you feeling today?

{moods.map(({ label, icon: Icon, color, bgColor }) => ( ))}

Or describe your mood in your own words: setCustomMood(e.target.value)} className="w-full p-2 border border-input bg-background text-foreground rounded-md" placeholder="Enter your mood..." />

What's contributing to your mood today?

setMoodContext(e.target.value)}
                  placeholder="Describe what's influencing your mood..."
                  className="bg-background text-foreground"
                  rows={4}
                />
              </div>

<Button type="submit" className="w-full py-6 text-lg font-semibold hover-lift" disabled={isLoading}>
                {isLoading ? 'Saving...' : 'Save Mood Entry'}
              </Button>
            </CardContent>
          </form>

{(selectedMood || customMood) && (
            <motion.div
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              className="p-4 text-center"
            >
              <p className="text-lg font-medium text-primary">
                You're feeling <span className="font-bold">{selectedMood || customMood}</span> today.
              </p>
              <Progress value={66} className="mt-2" />
            </motion.div>
          )}
        </Card>
      </motion.div>
    </ScrollArea>
  )
}

[V0_FILE]typescriptreact:file="app/components/GuidedJournal.tsx" isQuickEdit="true" isMerged="true"
'use client'

import { useState } from 'react'
import { motion } from 'framer-motion'
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { ChevronRight } from 'lucide-react'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useToast } from "@/components/ui/use-toast"
import { ScrollArea } from "@/components/ui/scroll-area"

const promptCategories = [
  {
    name: "CBT Guided Journal",
    prompts: [
      "Identify a recent situation in which you experienced a strong emotion. Describe the situation and your thoughts.",
      "Reflect on a recent decision. What were the pros and cons? How did your thoughts influence your choice?",
      "Choose a recurring negative thought. What evidence supports and contradicts it? How can you reframe it?",
      "Describe a situation where you successfully managed a difficult emotion. What strategies did you use?",
      "Identify a goal for the next month. What might hold you back? What steps can you take to overcome barriers?",
    ]
  },
  {
    name: "Self-Reflection",
    prompts: [
      "Am I using my time wisely?",
      "Am I taking anything for granted?",
      "Am I employing a healthy perspective?",
      "Am I living true to myself?",
      "Am I putting enough effort into my relationships?",
    ]
  },
]

export default function GuidedJournal() {
  const [category, setCategory] = useState(promptCategories[0].name)
  const [currentPrompt, setCurrentPrompt] = useState(0)
  const [entry, setEntry] = useState('')
  const [isLoading, setIsLoading] = useState(false)
  const { toast } = useToast()

const handleNextPrompt = async () => {
    if (entry.trim()) {
      setIsLoading(true)
      // Simulating an API call
      setTimeout(() => {
        toast({
          title: "Journal entry saved",
          description: "Your journal entry has been recorded successfully.",
        })
        setIsLoading(false)
        const currentCategory = promptCategories.find(cat => cat.name === category)
        if (currentCategory) {
          setCurrentPrompt((prev) => (prev + 1) % currentCategory.prompts.length)
          setEntry('')
        }
      }, 1000)
    }
  }

const handleCategoryChange = (value: string) => {
    setCategory(value)
    setCurrentPrompt(0)
    setEntry('')
  }

const currentCategoryPrompts = promptCategories.find(cat => cat.name === category)?.prompts || []

return (
    <ScrollArea className="h-full">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="p-4 sm:p-6 lg:p-8 gradient-bg min-h-screen"
      >
        <Card className="max-w-2xl mx-auto glass-effect">
          <CardHeader>
            <CardTitle className="h2 text-primary">Guided Journal</CardTitle>
            <Select onValueChange={handleCategoryChange} value={category}>
              <SelectTrigger className="w-full">
                <SelectValue placeholder="Select a category" />
              </SelectTrigger>
              <SelectContent>
                {promptCategories.map((cat) => (
                  <SelectItem key={cat.name} value={cat.name}>
                    {cat.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </CardHeader>
          <CardContent className="space-y-6">
            <motion.h2
              key={currentPrompt}
              initial={{ opacity: 0, y: -20 }}
              animate={{ opacity: 1, y: 0 }}
              className="h3 text-primary"
            >
              {currentCategoryPrompts[currentPrompt]}
            </motion.h2>
            <Textarea
              value={entry}
              onChange={(e) => setEntry(e.target.value)}
              placeholder="Start writing here..."
              rows={6}
              className="w-full p-2 border border-input bg-background text-foreground rounded-md"
            />
            <div className="flex items-center mb-4">
              <div className="flex-grow bg-muted rounded-full h-2 mr-2">
                <motion.div
                  className="bg-primary h-2 rounded-full"
                  initial={{ width: 0 }}
                  animate={{ width: `${((currentPrompt + 1) / currentCategoryPrompts.length) * 100}%` }}
                  transition={{ duration: 0.5 }}
                />
              </div>
              <span className="text-sm text-muted-foreground">
                {currentPrompt + 1} / {currentCategoryPrompts.length}
              </span>
            </div>
            <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
              <Button onClick={handleNextPrompt} className="w-full hover-lift" disabled={isLoading}>
                {isLoading ? 'Saving...' : 'Next Prompt'}
                <ChevronRight className="w-4 h-4 ml-2" />
              </Button>
            </motion.div>
          </CardContent>
        </Card>
      </motion.div>
    </ScrollArea>
  )
}

[V0_FILE]typescriptreact:file="app/components/ThoughtDiary.tsx" isQuickEdit="true" isMerged="true"
'use client'

import { useState, useEffect } from 'react'
import { motion } from 'framer-motion'
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Input } from "@/components/ui/input"
import { Card } from "@/components/ui/card"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Save } from 'lucide-react'
import { useToast } from "@/components/ui/use-toast"

const cognitiveDistortions = [
  { value: 'all-or-nothing', label: 'All-or-Nothing Thinking' },
  { value: 'overgeneralization', label: 'Overgeneralization' },
  { value: 'mental-filter', label: 'Mental Filter' },
  { value: 'disqualifying-positive', label: 'Disqualifying the Positive' },
  { value: 'jumping-to-conclusions', label: 'Jumping to Conclusions' },
  { value: 'magnification', label: 'Magnification or Minimization' },
  { value: 'emotional-reasoning', label: 'Emotional Reasoning' },
  { value: 'should-statements', label: 'Should Statements' },
  { value: 'labeling', label: 'Labeling' },
  { value: 'personalization', label: 'Personalization' },
]

export default function ThoughtDiary() {
  const [entry, setEntry] = useState({
    situation: '',
    automaticThoughts: '',
    emotions: '',
    distortion: '',
    evidenceFor: '',
    evidenceAgainst: '',
    alternativeThought: '',
    newEmotion: '',
  })

const [lastSaved, setLastSaved] = useState<Date | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const { toast } = useToast()

useEffect(() => {
    const savedEntry = localStorage.getItem('thoughtDiaryEntry')
    if (savedEntry) {
      setEntry(JSON.parse(savedEntry))
    }
  }, [])

useEffect(() => {
    const saveEntry = () => {
      localStorage.setItem('thoughtDiaryEntry', JSON.stringify(entry))
      setLastSaved(new Date())
    }

const debounce = setTimeout(saveEntry, 1000)
    return () => clearTimeout(debounce)
  }, [entry])

const handleChange = (field: keyof typeof entry, value: string) => {
    setEntry(prev => ({ ...prev, [field]: value }))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    try {
      // Simulating an API call
      await new Promise(resolve => setTimeout(resolve, 1000))
      toast({
        title: "Thought entry saved",
        description: "Your thought diary entry has been recorded successfully.",
      })
      // Reset form
      setEntry({
        situation: '',
        automaticThoughts: '',
        emotions: '',
        distortion: '',
        evidenceFor: '',
        evidenceAgainst: '',
        alternativeThought: '',
        newEmotion: '',
      })
      setLastSaved(null)
    } catch (error) {
      console.error('Error saving thought entry:', error)
      toast({
        title: "Error",
        description: "Failed to save thought entry. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
    >
      <Card className="p-6 bg-white/80 backdrop-blur-lg">
        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="space-y-2">
            <label htmlFor="situation" className="block text-sm font-medium text-gray-700">Situation</label>
            <Textarea
              id="situation"
              value={entry.situation}
              onChange={(e) => handleChange('situation', e.target.value)}
              placeholder="Describe the situation..."
              className="w-full"
            />
          </div>

<div className="space-y-2">
            <label htmlFor="automaticThoughts" className="block text-sm font-medium text-gray-700">Automatic Thoughts</label>
            <Textarea
              id="automaticThoughts"
              value={entry.automaticThoughts}
              onChange={(e) => handleChange('automaticThoughts', e.target.value)}
              placeholder="What thoughts went through your mind?"
              className="w-full"
            />
          </div>

<div className="space-y-2">
            <label htmlFor="emotions" className="block text-sm font-medium text-gray-700">Emotions</label>
            <Input
              id="emotions"
              value={entry.emotions}
              onChange={(e) => handleChange('emotions', e.target.value)}
              placeholder="What emotions did you feel? (e.g., sad, angry, anxious)"
              className="w-full"
            />
          </div>

<div className="space-y-2">
            <label htmlFor="distortion" className="block text-sm font-medium text-gray-700">Cognitive Distortion</label>
            <Select onValueChange={(value) => handleChange('distortion', value)} value={entry.distortion}>
              <SelectTrigger className="w-full">
                <SelectValue placeholder="Select a cognitive distortion" />
              </SelectTrigger>
              <SelectContent>
                {cognitiveDistortions.map((d) => (
                  <SelectItem key={d.value} value={d.value}>
                    {d.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

<div className="space-y-2">
            <label htmlFor="evidenceFor" className="block text-sm font-medium text-gray-700">Evidence For</label>
            <Textarea
              id="evidenceFor"
              value={entry.evidenceFor}
              onChange={(e) => handleChange('evidenceFor', e.target.value)}
              placeholder="What evidence supports your thought?"
              className="w-full"
            />
          </div>

<div className="space-y-2">
            <label htmlFor="evidenceAgainst" className="block text-sm font-medium text-gray-700">Evidence Against</label>
            <Textarea
              id="evidenceAgainst"
              value={entry.evidenceAgainst}
              onChange={(e) => handleChange('evidenceAgainst', e.target.value)}
              placeholder="What evidence does not support your thought?"
              className="w-full"
            />
          </div>

<div className="space-y-2">
            <label htmlFor="alternativeThought" className="block text-sm font-medium text-gray-700">Alternative Thought</label>
            <Textarea
              id="alternativeThought"
              value={entry.alternativeThought}
              onChange={(e) => handleChange('alternativeThought', e.target.value)}
              placeholder="What's a more balanced or realistic thought?"
              className="w-full"
            />
          </div>

<div className="space-y-2">
            <label htmlFor="newEmotion" className="block text-sm font-medium text-gray-700">New Emotion</label>
            <Input
              id="newEmotion"
              value={entry.newEmotion}
              onChange={(e) => handleChange('newEmotion', e.target.value)}
              placeholder="How do you feel now?"
              className="w-full"
            />
          </div>

<div className="flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0 sm:space-x-4">
            <Button type="submit" className="w-full sm:w-auto" disabled={isLoading}>
              {isLoading ? 'Saving...' : 'Save Entry'}
            </Button>
            {lastSaved && (
              <div className="text-sm text-muted-foreground flex items-center">
                <Save className="w-4 h-4 mr-2" />
                Last saved: {lastSaved.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
              </div>
            )}
          </div>
        </form>
      </Card>
    </motion.div>
  )
}

[V0_FILE]typescript:file="types/supabase.ts" isMerged="true"
export type MoodEntry = {
  id: number
  created_at: string
  user_id: string
  mood: string
  context: string
}

export type JournalEntry = {
  id: number
  created_at: string
  user_id: string
  entry: string
  prompt: string
}

export type ThoughtEntry = {
  id: number
  created_at: string
  user_id: string
  situation: string
  automaticThoughts: string
  emotions: string
  distortion: string
  evidenceFor: string
  evidenceAgainst: string
  alternativeThought: string
  newEmotion: string
}

[V0_FILE]typescript:file="app/api/mood-entries/route.ts" isMerged="true"
import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
import { cookies } from 'next/headers'
import { NextResponse } from 'next/server'

export async function POST(request: Request) {
  const { mood, context } = await request.json()
  const supabase = createRouteHandlerClient({ cookies })

const { data: { user } } = await supabase.auth.getUser()

if (!user) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
  }

if (!mood) {
    return NextResponse.json({ error: 'Mood is required' }, { status: 400 })
  }

try {
    const { data, error } = await supabase
      .from('mood_entries')
      .insert([
        { mood, context, user_id: user.id }
      ])
      .select()

if (error) throw error

return NextResponse.json({ data })
  } catch (error) {
    console.error('Error saving mood entry:', error)
    return NextResponse.json({ error: 'An unexpected error occurred' }, { status: 500 })
  }
}

[V0_FILE]typescript:file="app/api/journal-entries/route.ts" isMerged="true"
import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
import { cookies } from 'next/headers'
import { NextResponse } from 'next/server'

export async function POST(request: Request) {
  const { entry, prompt } = await request.json()
  const supabase = createRouteHandlerClient({ cookies })

const { data: { user } } = await supabase.auth.getUser()

if (!user) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
  }

const { data, error } = await supabase
    .from('journal_entries')
    .insert([
      { entry, prompt, user_id: user.id }
    ])
    .select()

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ data })
}

[V0_FILE]typescript:file="app/api/thought-entries/route.ts" isMerged="true"
import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
import { cookies } from 'next/headers'
import { NextResponse } from 'next/server'

export async function POST(request: Request) {
  const { situation, automaticThoughts, emotions, distortion, evidenceFor, evidenceAgainst, alternativeThought, newEmotion } = await request.json()
  const supabase = createRouteHandlerClient({ cookies })

const { data: { user } } = await supabase.auth.getUser()

if (!user) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
  }

const { data, error } = await supabase
    .from('thought_entries')
    .insert([
      { 
        situation, 
        automatic_thoughts: automaticThoughts, 
        emotions, 
        distortion, 
        evidence_for: evidenceFor, 
        evidence_against: evidenceAgainst, 
        alternative_thought: alternativeThought, 
        new_emotion: newEmotion, 
        user_id: user.id 
      }
    ])
    .select()

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ data })
}

[V0_FILE]typescript:file="hooks/useErrorHandler.ts" isMerged="true"
import { useState } from 'react'
import { useToast } from "@/components/ui/use-toast"

export function useErrorHandler() {
  const [error, setError] = useState<Error | null>(null)
  const { toast } = useToast()

const handleError = (error: Error) => {
    console.error('An error occurred:', error)
    setError(error)
    toast({
      title: "Error",
      description: error.message || "An unexpected error occurred. Please try again.",
      variant: "destructive",
    })
  }

return { error, handleError }
}

[V0_FILE]typescriptreact:file="app/cbt-assistant/page.tsx" isMerged="true"
import CBTAssistant from '../components/CBTAssistant'

export default function CBTAssistantPage() {
  return (
    <div className="max-w-2xl mx-auto">
      <h1 className="text-2xl sm:text-3xl font-bold mb-6 text-center">CBT Assistant</h1>
      <p className="text-center mb-6">
        Use this CBT assistant to help identify and challenge negative thoughts.
      </p>
      <CBTAssistant />
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/components/CBTAssistant.tsx" isQuickEdit="true" isMerged="true"
'use client'

import { useState } from 'react'
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { useToast } from "@/components/ui/use-toast"

export default function CBTAssistant() {
  const [thought, setThought] = useState('')
  const [challenge, setChallenge] = useState('')
  const [isLoading, setIsLoading] = useState(false)
  const { toast } = useToast()

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!thought) {
      toast({
        title: "Error",
        description: "Please enter a thought to challenge.",
        variant: "destructive",
      })
      return
    }
    setIsLoading(true)
    try {
      // Simulating an API call
      await new Promise(resolve => setTimeout(resolve, 1000))
      toast({
        title: "Thought entry saved",
        description: "Your CBT exercise has been recorded successfully.",
      })
      setThought('')
      setChallenge('')
    } catch (error) {
      console.error('Error saving thought entry:', error)
      toast({
        title: "Error",
        description: "Failed to save thought entry. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

return (
    <Card className="w-full max-w-2xl mx-auto">
      <CardHeader>
        <CardTitle>CBT Thought Challenger</CardTitle>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="thought">Negative Thought</Label>
            <Textarea
              id="thought"
              value={thought}
              onChange={(e) => setThought(e.target.value)}
              placeholder="Enter your negative thought here..."
              rows={3}
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="challenge">Challenge the Thought</Label>
            <Textarea
              id="challenge"
              value={challenge}
              onChange={(e) => setChallenge(e.target.value)}
              placeholder="How can you challenge or reframe this thought?"
              rows={3}
            />
          </div>
          <Button type="submit" className="w-full" disabled={isLoading}>
            {isLoading ? 'Saving...' : 'Save CBT Exercise'}
          </Button>
        </form>
      </CardContent>
    </Card>
  )
}

[V0_FILE]json:file="tsconfig.json" isMerged="true"
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

[V0_FILE]typescriptreact:file="components/Header.tsx" isMerged="true"
'use client'

import { usePathname, useRouter } from 'next/navigation'
import { ArrowLeft } from 'lucide-react'
import { Button } from "@/components/ui/button"
import { motion } from 'framer-motion'
import Link from 'next/link'

export default function Header() {
  const pathname = usePathname()
  const router = useRouter()

const isHomePage = pathname === '/'

const getPageTitle = () => {
    switch (pathname) {
      case '/':
        return null
      case '/mood-tracker':
        return 'Mood Tracker'
      case '/journal':
        return 'Guided Journal'
      case '/thought-diary':
        return 'Thought Diary'
      case '/techniques':
        return 'CBT Techniques'
      case '/cbt-assistant':
        return 'CBT Assistant'
      case '/login':
        return 'Log In'
      case '/signup':
        return 'Sign Up'
      default:
        return null
    }
  }

const pageTitle = getPageTitle()

return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/80 backdrop-blur-sm">
      <div className="container flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8">
        <div className="flex items-center gap-4">
          {!isHomePage && (
            <motion.div
              whileHover={{ scale: 1.1 }}
              whileTap={{ scale: 0.9 }}
            >
              <Button variant="ghost" size="icon" onClick={() => router.back()} className="mr-2">
                <ArrowLeft className="h-4 w-4" />
              </Button>
            </motion.div>
          )}
          <div className="flex-shrink-0 mr-4 sm:mr-6 lg:mr-8">
            <Link href="/" className="flex items-center">
              <span className="text-lg sm:text-xl md:text-2xl font-semibold text-primary">Cogniflorence</span>
            </Link>
          </div>
        </div>
        {pageTitle && (
          <motion.h1
            className="text-lg font-semibold absolute left-1/2 transform -translate-x-1/2 hidden sm:block"
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ type: 'spring', stiffness: 300, damping: 25, duration: 0.2 }}
          >
            {pageTitle}
          </motion.h1>
        )}
        <div className="flex items-center gap-4">
          <Button variant="outline" size="sm" asChild>
            <Link href="/login">Log in</Link>
          </Button>
        </div>
      </div>
    </header>
  )
}

[V0_FILE]typescriptreact:file="components/ScrollToTop.tsx" isMoved="true" isMovedFrom="app/components/ScrollToTop.tsx" isMerged="true"
'use client'

import { useEffect } from 'react'
import { usePathname } from 'next/navigation'

export function ScrollToTop() {
  const pathname = usePathname()

useEffect(() => {
    window.scrollTo(0, 0)
  }, [pathname])

return null
}

[V0_FILE]typescriptreact:file="components/Navigation.tsx" isMerged="true"
'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Home, BarChart, BookOpen, Brain, Lightbulb, PieChart } from 'lucide-react'
import { motion } from 'framer-motion'

const navItems = [
  { href: '/', icon: Home, label: 'Home' },
  { href: '/mood-tracker', icon: BarChart, label: 'Mood' },
  { href: '/journal', icon: BookOpen, label: 'Journal' },
  { href: '/thought-diary', icon: Brain, label: 'Thoughts' },
  { href: '/techniques', icon: Lightbulb, label: 'Techniques' },
  { href: '/insights', icon: PieChart, label: 'Insights' },
]

export default function Navigation() {
  const pathname = usePathname()

return (
    <nav className="bg-background/80 backdrop-blur-sm border-t border-border safe-bottom glass-effect">
      <div className="flex justify-around">
        {navItems.map(({ href, icon: Icon, label }) => (
          <Link
            key={href}
            href={href}
            className="flex flex-col items-center p-2 relative"
          >
            <motion.div
              whileHover={{ scale: 1.1 }}
              whileTap={{ scale: 0.9 }}
              transition={{ type: 'spring', stiffness: 500, damping: 25, duration: 0.15 }}
              className={`p-2 rounded-full ${pathname === href ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'}`}
            >
              <Icon className="w-6 h-6" />
            </motion.div>
            <span className="text-xs mt-1">{label}</span>
            {pathname === href && (
              <motion.div
                className="absolute -bottom-1 left-0 right-0 h-0.5 bg-primary"
                layoutId="navigation-underline"
                transition={{ type: 'spring', stiffness: 500, damping: 30, duration: 0.2 }}
              />
            )}
          </Link>
        ))}
      </div>
    </nav>
  )
}

[V0_FILE]typescriptreact:file="components/MoodTracker.tsx" isMerged="true"
'use client'

import { useState } from 'react'
import { motion } from 'framer-motion'
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Smile, Meh, Frown, Angry, ThumbsUp, Heart, Zap, Coffee, CloudRain, Sun, Moon, Wind } from 'lucide-react'
import { createClient } from '@/lib/supabase'
import { useToast } from "@/components/ui/use-toast"
import { useErrorHandler } from '@/hooks/useErrorHandler'

// ... moods array remains the same

export default function MoodTracker() {
  const [selectedMood, setSelectedMood] = useState<string | null>(null)
  const [customMood, setCustomMood] = useState('')
  const [moodContext, setMoodContext] = useState('')
  const [isLoading, setIsLoading] = useState(false)
  const { toast } = useToast()
  const { handleError } = useErrorHandler()
  const supabase = createClient()

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    try {
      const { data, error } = await supabase
        .from('mood_entries')
        .insert([
          { 
            mood: selectedMood || customMood, 
            context: moodContext,
          }
        ])
      if (error) throw error
      toast({
        title: "Mood entry saved",
        description: "Your mood has been recorded successfully.",
      })
      // Reset form
      setSelectedMood(null)
      setCustomMood('')
      setMoodContext('')
    } catch (error) {
      console.error('Error saving mood entry:', error)
      toast({
        title: "Error",
        description: "Failed to save mood entry. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

// ... rest of the component remains the same
}

[V0_FILE]typescriptreact:file="components/GuidedJournal.tsx" isQuickEdit="true" isMerged="true"
'use client'

import { useState, useEffect } from 'react'
import { motion } from 'framer-motion'
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { ChevronRight } from 'lucide-react'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { createClient } from '@/lib/supabase'
import { useToast } from "@/components/ui/use-toast"
import { ScrollArea } from "@/components/ui/scroll-area"

const promptCategories = [
  {
    name: "CBT Guided Journal",
    prompts: [
      "Identify a recent situation in which you experienced a strong emotion (e.g., anger, sadness, anxiety). Describe the situation and the thoughts that went through your mind then.",
      "Reflect on a recent decision or choice you made. What were the pros and cons of that decision? How did your thoughts and emotions influence your choice?",
      "Choose a recurring negative thought or belief that you struggle with. What evidence supports this belief? What evidence contradicts it? How might you reframe this thought in a more balanced and realistic way?",
      "Describe a situation where you successfully managed a difficult emotion or overcame a challenging obstacle. What skills or strategies did you use? How can you apply these skills in future situations?",
      "Identify a goal you would like to achieve in the next month. What thoughts, emotions, or behaviors might be holding you back from achieving this goal? What steps can you take to overcome these barriers?",
      "Reflect on a recent interaction with someone that was difficult or unsatisfying. What thoughts and emotions were present during the interaction? How might your thoughts have influenced your behavior in that situation?",
      "Write a letter to your future self, offering encouragement and support for managing challenges and pursuing personal growth."
    ]
  },
  {
    name: "Self-Reflection",
    prompts: [
      "Am I using my time wisely?",
      "Am I taking anything for granted?",
      "Am I employing a healthy perspective?",
      "Am I living true to myself?",
      "Am I waking up in the morning ready to take on the day?",
      "Am I thinking negative thoughts before I fall asleep?",
      "Am I putting enough effort into my relationships?",
      "Am I taking care of myself physically?",
      "Am I letting matters that are out of my control stress me out?",
      "Am I achieving the goals that I've set for myself?"
    ]
  },
  {
    name: "Deep Introspection",
    prompts: [
      "Who am I, really?",
      "What worries me most about the future?",
      "If this were the last day of my life, would I have the same plans for today?",
      "What am I really scared of?",
      "Am I holding on to something I need to let go of?",
      "If not now, then when?",
      "What matters most in my life?",
      "What am I doing about the things that matter most in my life?",
      "Why do I matter?",
      "Have I done anything lately that's worth remembering?"
    ]
  },
  {
    name: "Personal Growth",
    prompts: [
      "My favorite way to spend the day is...",
      "If I could talk to my teenage self, the one thing I would say is...",
      "The two moments I'll never forget in my life are... (Describe them in great detail, and what makes them so unforgettable.)",
      "Make a list of 30 things that make you smile.",
      "The words I'd like to live by are...",
      "I couldn't imagine living without...",
      "When I'm in pain—physical or emotional—the kindest thing I can do for myself is...",
      "What does unconditional love look like for you?",
      "Name what is enough for you.",
      "What do you love about life?"
    ]
  }
]

const currentCategoryPrompts = promptCategories.find(cat => cat.name === category)?.prompts || []

useEffect(() => {
    console.log('Available categories:', promptCategories.map(cat => cat.name));
  }, []);

const handleNextPrompt = async () => {
    if (entry.trim()) {
      setIsLoading(true)
      try {
        await saveJournalEntry(entry, currentCategoryPrompts[currentPrompt])
        toast({
          title: "Journal entry saved",
          description: "Your journal entry has been recorded successfully.",
        })
      } catch (error) {
        console.error('Error saving journal entry:', error)
        toast({
          title: "Error",
          description: "Failed to save journal entry. Please try again.",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }
    setCurrentPrompt((prev) => (prev + 1) % currentCategoryPrompts.length)
    setEntry('')
  }

const handleCategoryChange = (value: string) => {
    setCategory(value)
    setCurrentPrompt(0)
    setEntry('')
  }

const saveJournalEntry = async (entry: string, prompt: string) => {
    const { error } = await supabase
      .from('journal_entries')
      .insert([{ entry, prompt }])
    if (error) throw error
  }

console.log('Current category:', category);
  console.log('Available categories:', promptCategories.map(cat => cat.name));
  console.log('Current category prompts:', currentCategoryPrompts);

return (
    <ScrollArea className="h-[calc(100vh-4rem)]">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="p-4 sm:p-6 lg:p-8 gradient-bg min-h-screen"
      >
        <Card className="max-w-2xl mx-auto glass-effect">
          <CardHeader>
            <CardTitle className="h2 text-primary">Guided Journal</CardTitle>
            <CardDescription>Reflect on your thoughts and experiences</CardDescription>
            <Select onValueChange={handleCategoryChange} value={category}>
              <SelectTrigger className="w-full">
                <SelectValue placeholder="Select a category" />
              </SelectTrigger>
              <SelectContent>
                {promptCategories.map((cat) => (
                  <SelectItem key={cat.name} value={cat.name}>
                    {cat.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </CardHeader>
          <CardContent className="space-y-6">
            <motion.h2
              key={currentPrompt}
              initial={{ opacity: 0, y: -20 }}
              animate={{ opacity: 1, y: 0 }}
              className="h3 text-primary"
            >
              {currentCategoryPrompts[currentPrompt]}
            </motion.h2>
            <Textarea
              value={entry}
              onChange={(e) => setEntry(e.target.value)}
              placeholder="Start writing here..."
              rows={6}
              className="w-full p-2 border border-input bg-background text-foreground rounded-md"
            />
            <div className="flex items-center mb-4">
              <div className="flex-grow bg-muted rounded-full h-2 mr-2">
                <motion.div
                  className="bg-primary h-2 rounded-full"
                  initial={{ width: 0 }}
                  animate={{ width: `${((currentPrompt + 1) / currentCategoryPrompts.length) * 100}%` }}
                  transition={{ duration: 0.5 }}
                />
              </div>
              <span className="text-sm text-muted-foreground">
                {currentPrompt + 1} / {currentCategoryPrompts.length}
              </span>
            </div>
            <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
              <Button onClick={handleNextPrompt} className="w-full hover-lift" disabled={isLoading}>
                {isLoading ? 'Saving...' : 'Next Prompt'}
                <ChevronRight className="w-4 h-4 ml-2" />
              </Button>
            </motion.div>
          </CardContent>
        </Card>
      </motion.div>
    </ScrollArea>
  )
}

[V0_FILE]typescript:file="lib/supabase.ts" isMerged="true"
// This file is intentionally left empty as we're not using Supabase in this simplified version

[V0_FILE]typescriptreact:file="app/login/page.tsx" isMerged="true"
'use client'

import { useState } from 'react'
import { motion } from 'framer-motion'
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { ArrowLeft, Mail, Lock, Loader2 } from 'lucide-react'
import { useToast } from "@/components/ui/use-toast"
import { Alert, AlertDescription } from "@/components/ui/alert"

export default function LoginPage() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [isLoading, setIsLoading] = useState(false)
  const [loginError, setLoginError] = useState('')
  const { toast } = useToast()
  const router = useRouter()

const validateEmail = (email: string) => {
    const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
    return re.test(email)
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    setLoginError('')

if (!validateEmail(email)) {
      setLoginError('Please enter a valid email address.')
      setIsLoading(false)
      return
    }

// Simulating login process
    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 1000))
      
      // Simulating successful login
      toast({
        title: "Login Successful",
        description: "You have successfully logged in.",
        duration: 5000,
      })
      setTimeout(() => {
        router.push('/dashboard')
      }, 1000)
    } catch (error) {
      console.error('Error logging in:', error)
      setLoginError("Invalid email or password. Please try again.")
      toast({
        title: "Login Failed",
        description: "Invalid email or password. Please try again.",
        variant: "destructive",
        duration: 5000,
      })
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="min-h-screen flex items-center justify-center px-4 py-12 sm:px-6 lg:px-8 bg-gradient-to-br from-background to-muted">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="w-full max-w-md"
      >
        <Card className="glass-effect">
          <CardHeader>
            <CardTitle className="text-2xl font-bold text-center">Welcome back</CardTitle>
            <CardDescription className="text-center">Log in to your Cogniflorence account</CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-4">
              {loginError && (
                <Alert variant="destructive">
                  <AlertDescription>{loginError}</AlertDescription>
                </Alert>
              )}
              <div className="space-y-2">
                <Label htmlFor="email">Email</Label>
                <div className="relative">
                  <Input
                    id="email"
                    type="email"
                    placeholder="you@example.com"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    className="pl-10"
                    required
                    aria-required="true"
                    aria-invalid={loginError && loginError.includes('email') ? 'true' : 'false'}
                  />
                  <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground" size={18} aria-hidden="true" />
                </div>
                {loginError && loginError.includes('email') && (
                  <p className="text-sm text-destructive mt-1">{loginError}</p>
                )}
              </div>
              <div className="space-y-2">
                <Label htmlFor="password">Password</Label>
                <div className="relative">
                  <Input
                    id="password"
                    type="password"
                    placeholder="••••••••"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    className="pl-10"
                    required
                    aria-required="true"
                  />
                  <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground" size={18} aria-hidden="true" />
                </div>
              </div>
              <div className="text-sm text-right">
                <Link href="/forgot-password" className="text-primary hover:underline">
                  Forgot your password?
                </Link>
              </div>
              <Button type="submit" className="w-full" disabled={isLoading}>
                {isLoading ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    Logging in...
                  </>
                ) : (
                  'Log In'
                )}
              </Button>
            </form>
          </CardContent>
          <CardFooter className="flex flex-col space-y-4">
            <div className="text-sm text-center">
              Don't have an account?{' '}
              <Link href="/signup" className="font-medium text-primary hover:underline">
                Sign up
              </Link>
            </div>
            <Button variant="outline" asChild className="w-full">
              <Link href="/">
                <ArrowLeft className="mr-2 h-4 w-4" /> Back to Home
              </Link>
            </Button>
          </CardFooter>
        </Card>
      </motion.div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/signup/page.tsx" isMerged="true"
'use client'

import { useState, useCallback } from 'react'
import { motion } from 'framer-motion'
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { ArrowLeft, Mail, Lock, User, AlertCircle, Loader2 } from 'lucide-react'
import { useToast } from "@/components/ui/use-toast"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

const validateEmail = (email: string) => {
  const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
  return re.test(email)
}

export default function SignUpPage() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [name, setName] = useState('')
  const [isLoading, setIsLoading] = useState(false)
  const [passwordError, setPasswordError] = useState('')
  const [signupError, setSignupError] = useState('')
  const { toast } = useToast()
  const router = useRouter()

const validatePassword = useCallback((password: string) => {
    if (password.length < 8) {
      return "Password must be at least 8 characters long"
    }
    if (!/[A-Z]/.test(password)) {
      return "Password must contain at least one uppercase letter"
    }
    if (!/[a-z]/.test(password)) {
      return "Password must contain at least one lowercase letter"
    }
    if (!/[0-9]/.test(password)) {
      return "Password must contain at least one number"
    }
    if (!/[!@#$%^&*]/.test(password)) {
      return "Password must contain at least one special character (!@#$%^&*)"
    }
    return ""
  }, [])

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    setPasswordError('')
    setSignupError('')

if (!validateEmail(email)) {
      setSignupError('Please enter a valid email address.')
      setIsLoading(false)
      return
    }

const passwordValidationError = validatePassword(password)
    if (passwordValidationError) {
      setPasswordError(passwordValidationError)
      setIsLoading(false)
      return
    }

try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 1000))
      
      toast({
        title: "Sign Up Successful",
        description: "Your account has been created. Please check your email for verification.",
        duration: 7000,
      })
      setTimeout(() => {
        router.push('/login')
      }, 2000)
    } catch (error) {
      console.error('Error signing up:', error)
      setSignupError("An unexpected error occurred. Please try again.")
      toast({
        title: "Sign Up Failed",
        description: "An unexpected error occurred. Please try again.",
        variant: "destructive",
        duration: 5000,
      })
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="min-h-screen flex items-center justify-center px-4 py-12 sm:px-6 lg:px-8 bg-gradient-to-br from-background to-muted">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="w-full max-w-md"
      >
        <Card className="glass-effect">
          <CardHeader>
            <CardTitle className="text-2xl font-bold text-center">Join Cogniflorence</CardTitle>
            <CardDescription className="text-center">Start your journey to better mental health</CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-4">
              {signupError && (
                <Alert variant="destructive">
                  <AlertCircle className="h-4 w-4" />
                  <AlertDescription>{signupError}</AlertDescription>
                </Alert>
              )}
              {signupError && signupError.includes('email') && (
                <p className="text-sm text-destructive mt-1">{signupError}</p>
              )}
              <div className="space-y-2">
                <Label htmlFor="name">Name</Label>
                <div className="relative">
                  <Input
                    id="name"
                    type="text"
                    placeholder="John Doe"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    className="pl-10"
                    required
                    aria-required="true"
                  />
                  <User className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground" size={18} aria-hidden="true" />
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="email">Email</Label>
                <div className="relative">
                  <Input
                    id="email"
                    type="email"
                    placeholder="you@example.com"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    className="pl-10"
                    required
                    aria-required="true"
                    aria-invalid={signupError && signupError.includes('email') ? 'true' : 'false'}
                  />
                  <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground" size={18} aria-hidden="true" />
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="password">Password</Label>
                <div className="relative">
                  <Input
                    id="password"
                    type="password"
                    placeholder="••••••••"
                    value={password}
                    onChange={(e) => {
                      setPassword(e.target.value)
                      setPasswordError('')
                    }}
                    className="pl-10"
                    required
                    aria-required="true"
                    aria-invalid={passwordError ? 'true' : 'false'}
                    aria-describedby="password-requirements"
                  />
                  <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground" size={18} aria-hidden="true" />
                </div>
                {passwordError && (
                  <Alert variant="destructive">
                    <AlertCircle className="h-4 w-4" />
                    <AlertTitle>Error</AlertTitle>
                    <AlertDescription>{passwordError}</AlertDescription>
                  </Alert>
                )}
                <p id="password-requirements" className="text-sm text-muted-foreground">
                  Password must be at least 8 characters long, include uppercase and lowercase letters, a number, and a special character.
                </p>
              </div>
              <Button type="submit" className="w-full" disabled={isLoading}>
                {isLoading ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    Signing Up...
                  </>
                ) : (
                  'Sign Up'
                )}
              </Button>
            </form>
          </CardContent>
          <CardFooter className="flex flex-col space-y-4">
            <div className="text-sm text-center">
              Already have an account?{' '}
              <Link href="/login" className="font-medium text-primary hover:underline">
                Log in
              </Link>
            </div>
            <Button variant="outline" asChild className="w-full">
              <Link href="/">
                <ArrowLeft className="mr-2 h-4 w-4" /> Back to Home
              </Link>
            </Button>
          </CardFooter>
        </Card>
      </motion.div>
    </div>
  )
}

[V0_FILE]javascript:file="next.config.js" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ['hebbkx1anhila5yf.public.blob.vercel-storage.com'],
  },
}

module.exports = nextConfig

[V0_FILE]typescriptreact:file="components/PageTransition.tsx" isQuickEdit="true" isMerged="true"
'use client'

import { motion, AnimatePresence } from 'framer-motion'
import { ReactNode } from 'react'
import { usePathname } from 'next/navigation'

interface PageTransitionProps {
  children: ReactNode
}

const variants = {
  hidden: { opacity: 0, y: 8 },
  enter: { opacity: 1, y: 0 },
  exit: { opacity: 0, y: -8 },
}

export default function PageTransition({ children }: PageTransitionProps) {
  const pathname = usePathname()

return (
    <AnimatePresence mode="wait" initial={false}>
      <motion.div
        key={pathname}
        variants={variants}
        initial="hidden"
        animate="enter"
        exit="exit"
        transition={{
          type: 'spring',
          stiffness: 300,
          damping: 30,
          duration: 0.2
        }}
      >
        {children}
      </motion.div>
    </AnimatePresence>
  )
}

[V0_FILE]typescriptreact:file="app/not-found.tsx" isMerged="true"
import Link from 'next/link'
import { Button } from '@/components/ui/button'

export default function NotFound() {
  return (
    <div className="flex flex-col items-center justify-center min-h-[60vh] text-center">
      <h2 className="text-4xl font-bold mb-4">404 - Page Not Found</h2>
      <p className="text-xl mb-8">Oops! The page you're looking for doesn't exist.</p>
      <Button asChild>
        <Link href="/">
          Return to Home
        </Link>
      </Button>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/CBTTechniques.tsx" isMerged="true"
'use client'

import { useState } from 'react'
import { motion } from 'framer-motion'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Button } from "@/components/ui/button"
import { ChevronRight, ExternalLink } from 'lucide-react'
import Link from 'next/link'

const techniques = [
  {
    id: 'cognitive-restructuring',
    title: 'Cognitive Restructuring',
    description: 'Challenge and change negative thought patterns.',
    steps: [
      'Identify negative thoughts',
      'Evaluate the evidence for and against these thoughts',
      'Develop more balanced, realistic thoughts',
      'Practice replacing negative thoughts with balanced ones',
    ],
    resources: [
      { title: 'Cognitive Restructuring Worksheet', url: 'https://www.therapistaid.com/therapy-worksheet/cognitive-restructuring' },
      { title: 'Video: Cognitive Restructuring', url: 'https://www.youtube.com/watch?v=1VYsO6HlUHw' },
    ],
  },
  {
    id: 'exposure-therapy',
    title: 'Exposure Therapy',
    description: 'Gradually face fears and anxieties in a controlled manner.',
    steps: [
      'Create a fear hierarchy',
      'Start with less challenging exposures',
      'Gradually work up to more difficult situations',
      'Practice relaxation techniques during exposures',
    ],
    resources: [
      { title: 'Exposure Therapy Guide', url: 'https://www.apa.org/ptsd-guideline/patients-and-families/exposure-therapy' },
      { title: 'Fear Hierarchy Worksheet', url: 'https://www.therapistaid.com/therapy-worksheet/fear-hierarchy' },
    ],
  },
  {
    id: 'behavioral-activation',
    title: 'Behavioral Activation',
    description: 'Increase engagement in positive activities to improve mood.',
    steps: [
      'Identify activities that bring joy or a sense of accomplishment',
      'Schedule these activities into your daily routine',
      'Monitor your mood before and after each activity',
      'Gradually increase the frequency and duration of positive activities',
    ],
    resources: [
      { title: 'Behavioral Activation Guide', url: 'https://www.div12.org/treatment/behavioral-activation-for-depression/' },
      { title: 'Activity Planning Worksheet', url: 'https://www.therapistaid.com/therapy-worksheet/activity-planning' },
    ],
  },
  {
    id: 'mindfulness',
    title: 'Mindfulness Techniques',
    description: 'Practice being present in the moment to reduce stress and anxiety.',
    steps: [
      'Focus on your breath or a specific sensation',
      'Observe thoughts and feelings without judgment',
      'Gently return focus when your mind wanders',
      'Practice regularly, starting with short sessions',
    ],
    resources: [
      { title: 'Mindfulness Exercises', url: 'https://www.mindful.org/how-to-practice-mindfulness/' },
      { title: 'Guided Mindfulness Meditation (Audio)', url: 'https://www.uclahealth.org/programs/marc/mindful-meditations' },
    ],
  },
  {
    id: 'problem-solving',
    title: 'Problem-Solving Therapy',
    description: 'Develop effective strategies to address life challenges.',
    steps: [
      'Identify and define the problem',
      'Generate potential solutions',
      'Evaluate and choose the best solution',
      'Implement and review the outcome',
      'Adjust approach based on results',
    ],
    resources: [
      { title: 'Problem-Solving Therapy Guide', url: 'https://www.apa.org/ptsd-guideline/treatments/problem-solving-therapy' },
      { title: 'Problem-Solving Worksheet', url: 'https://www.therapistaid.com/therapy-worksheet/problem-solving' },
    ],
  },
  {
    id: 'relaxation-techniques',
    title: 'Relaxation Techniques',
    description: 'Practice methods to reduce physical tension and promote calmness.',
    steps: [
      'Learn deep breathing exercises',
      'Practice progressive muscle relaxation',
      'Try guided imagery or visualization',
      'Incorporate regular relaxation sessions into your routine',
    ],
    resources: [
      { title: 'Progressive Muscle Relaxation Guide', url: 'https://www.uofmhealth.org/health-library/uz2225' },
      { title: 'Relaxation Techniques for Stress Relief', url: 'https://www.helpguide.org/articles/stress/relaxation-techniques-for-stress-relief.htm' },
    ],
  },
  {
    id: 'acceptance-commitment-therapy',
    title: 'Acceptance and Commitment Therapy (ACT)',
    description: 'Learn to accept difficult thoughts and feelings while committing to value-driven actions.',
    steps: [
      'Practice mindfulness and present-moment awareness',
      'Develop psychological flexibility',
      'Identify personal values',
      'Commit to actions aligned with your values',
    ],
    resources: [
      { title: 'ACT: An Overview', url: 'https://www.psychologytoday.com/us/therapy-types/acceptance-and-commitment-therapy' },
      { title: 'Values Clarification Worksheet', url: 'https://www.therapistaid.com/therapy-worksheet/values-clarification' },
    ],
  },
]

export default function CBTTechniques() {
  const [expandedTechnique, setExpandedTechnique] = useState<string | null>(null)

return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
    >
      <Card>
        <CardHeader>
          <CardTitle>CBT Techniques</CardTitle>
          <CardDescription>Explore various Cognitive Behavioral Therapy techniques and related approaches</CardDescription>
        </CardHeader>
        <CardContent>
          <Accordion type="single" collapsible className="w-full">
            {techniques.map((technique) => (
              <AccordionItem key={technique.id} value={technique.id}>
                <AccordionTrigger onClick={() => setExpandedTechnique(technique.id)}>
                  {technique.title}
                </AccordionTrigger>
                <AccordionContent>
                  <p className="mb-4">{technique.description}</p>
                  <h4 className="font-semibold mb-2">Steps:</h4>
                  <ul className="list-disc pl-5 mb-4">
                    {technique.steps.map((step, index) => (
                      <li key={index} className="mb-1">{step}</li>
                    ))}
                  </ul>
                  <h4 className="font-semibold mb-2">Resources:</h4>
                  <ul className="space-y-2">
                    {technique.resources.map((resource, index) => (
                      <li key={index}>
                        <Button variant="link" asChild className="p-0 h-auto text-primary hover:text-primary/80">
                          <Link href={resource.url} target="_blank" rel="noopener noreferrer">
                            {resource.title}
                            <ExternalLink className="ml-1 h-4 w-4 inline" />
                          </Link>
                        </Button>
                      </li>
                    ))}
                  </ul>
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </CardContent>
      </Card>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="app/insights/page.tsx" isQuickEdit="true" isMerged="true"
'use client'

import { useState, useEffect } from 'react'
import { motion } from 'framer-motion'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar, PieChart, Pie, Cell, Legend } from 'recharts'
import { Button } from "@/components/ui/button"
import { ArrowUpRight, ArrowDownRight, Minus, Info } from 'lucide-react'
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
import { ScrollArea } from "@/components/ui/scroll-area"
import { useMediaQuery } from "@/hooks/use-media-query"
import { LoadingSkeleton } from "@/components/LoadingSkeleton"

// Mock data - replace with real data fetching in production
const moodData = [
  { date: '01/01', mood: 5, anxiety: 6, depression: 5 },
  { date: '01/02', mood: 6, anxiety: 5, depression: 4 },
  { date: '01/03', mood: 6, anxiety: 5, depression: 4 },
  { date: '01/04', mood: 7, anxiety: 4, depression: 3 },
  { date: '01/05', mood: 7, anxiety: 4, depression: 3 },
  { date: '01/06', mood: 8, anxiety: 3, depression: 2 },
  { date: '01/07', mood: 8, anxiety: 3, depression: 2 },
]

const thoughtPatterns = [
  { pattern: 'Gratitude', shortLabel: 'Gratitude', frequency: 8 },
  { pattern: 'Positive Self-talk', shortLabel: 'Self-talk', frequency: 7 },
  { pattern: 'Balanced Perspective', shortLabel: 'Balanced', frequency: 6 },
  { pattern: 'Solution-Focused', shortLabel: 'Solutions', frequency: 5 },
  { pattern: 'Mindfulness', shortLabel: 'Mindful', frequency: 4 },
  { pattern: 'Strength Recognition', shortLabel: 'Strengths', frequency: 4 },
  { pattern: 'Growth Mindset', shortLabel: 'Growth', frequency: 3 },
]

const behavioralActivities = [
  { activity: 'Exercise', frequency: 3, mood_impact: 7 },
  { activity: 'Socializing', frequency: 2, mood_impact: 6 },
  { activity: 'Reading', frequency: 5, mood_impact: 5 },
  { activity: 'Meditation', frequency: 4, mood_impact: 8 },
  { activity: 'Hobby', frequency: 3, mood_impact: 7 },
]

const goalProgress = [
  { goal: 'Reduce anxiety', progress: 65 },
  { goal: 'Improve sleep', progress: 40 },
  { goal: 'Increase positive activities', progress: 80 },
  { goal: 'Challenge negative thoughts', progress: 55 },
]

const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884D8', '#82CA9D', '#A4DE6C']

export default function InsightsPage() {
  const [activeTab, setActiveTab] = useState('mood')
  const [isLoading, setIsLoading] = useState(true)
  const isMobile = useMediaQuery("(max-width: 640px)")

useEffect(() => {
    // Simulate loading delay
    const timer = setTimeout(() => setIsLoading(false), 1500)
    return () => clearTimeout(timer)
  }, [])

const renderMoodTrend = () => {
    const lastMood = moodData[moodData.length - 1].mood
    const firstMood = moodData[0].mood
    const diff = lastMood - firstMood
    if (diff > 0) {
      return <span className="text-green-500 flex items-center"><ArrowUpRight size={16} /> Improving steadily</span>
    } else if (diff < 0) {
      return <span className="text-yellow-500 flex items-center"><ArrowDownRight size={16} /> Slight fluctuation, but managing well</span>
    } else {
      return <span className="text-blue-500 flex items-center"><Minus size={16} /> Maintaining stability</span>
    }
  }

const renderInfoPopover = (title: string, content: string) => (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="ghost" className="h-8 w-8 p-0">
          <span className="sr-only">Open info</span>
          <Info className="h-4 w-4" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-80">
        <h3 className="font-medium mb-2">{title}</h3>
        <p className="text-sm text-muted-foreground">{content}</p>
      </PopoverContent>
    </Popover>
  )

if (isLoading) {
    return (
      <Card className="w-full max-w-4xl mx-auto">
        <CardHeader>
          <CardTitle>Data Driven Insights</CardTitle>
          <CardDescription>Loading insights...</CardDescription>
        </CardHeader>
        <CardContent>
          <LoadingSkeleton />
        </CardContent>
      </Card>
    )
  }

return (
    <ScrollArea className="h-[calc(100vh-4rem)]">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.3 }}
        className="container mx-auto px-4 py-8"
      >
        <h1 className="text-3xl font-bold mb-6">Data Driven Insights</h1>
        <Tabs value={activeTab} onValueChange={setActiveTab}>
          <TabsList className="grid w-full grid-cols-2 sm:grid-cols-4 gap-2 mb-6">
            <TabsTrigger value="mood" className="text-sm px-2 py-1">Mood & Symptoms</TabsTrigger>
            <TabsTrigger value="thoughts" className="text-sm px-2 py-1">Thought Patterns</TabsTrigger>
            <TabsTrigger value="behaviors" className="text-sm px-2 py-1">Behavioral Activities</TabsTrigger>
            <TabsTrigger value="goals" className="text-sm px-2 py-1">Goal Progress</TabsTrigger>
          </TabsList>

<TabsContent value="mood">
            <Card>
              <CardHeader>
                <div className="flex justify-between items-center">
                  <CardTitle>Mood & Symptom Trends</CardTitle>
                  {renderInfoPopover("Mood & Symptom Trends", "This chart shows your daily mood, anxiety, and depression levels over the past week. Higher values indicate better mood and lower anxiety/depression.")}
                </div>
                <CardDescription>Track your mood and symptom changes over time</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="w-full" style={{ height: isMobile ? '300px' : '400px' }}>
                  <ResponsiveContainer width="100%" height="100%">
                    <LineChart data={moodData}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="date" />
                      <YAxis />
                      <Tooltip />
                      <Legend />
                      <Line type="monotone" dataKey="mood" stroke="#8884d8" name="Mood" />
                      <Line type="monotone" dataKey="anxiety" stroke="#82ca9d" name="Anxiety" />
                      <Line type="monotone" dataKey="depression" stroke="#ffc658" name="Depression" />
                    </LineChart>
                  </ResponsiveContainer>
                </div>
                <div className="mt-4 space-y-2">
                  <p>Your average mood over the past week: {(moodData.reduce((sum, day) => sum + day.mood, 0) / moodData.length).toFixed(1)} / 10</p>
                  <p>Mood trend: {renderMoodTrend()}</p>
                  <p>Average anxiety level: {(moodData.reduce((sum, day) => sum + day.anxiety, 0) / moodData.length).toFixed(1)} / 10</p>
                  <p>Average depression level: {(moodData.reduce((sum, day) => sum + day.depression, 0) / moodData.length).toFixed(1)} / 10</p>
                </div>
                <div className="mt-4 p-4 bg-muted rounded-md">
                  <h4 className="font-semibold mb-2">Positive Insights:</h4>
                  <ul className="list-disc pl-5 space-y-1">
                    <li>Your mood has been steadily improving over the week. Great job on your progress!</li>
                    <li>Anxiety and depression levels have decreased. Your coping strategies seem to be working well.</li>
                    <li>Consider what activities or thoughts contributed to your mood improvement and try to incorporate more of these into your routine.</li>
                  </ul>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="thoughts">
            <Card>
              <CardHeader>
                <div className="flex justify-between items-center">
                  <CardTitle>Thought Patterns</CardTitle>
                  {renderInfoPopover("Thought Patterns", "This chart shows the frequency of different cognitive distortions in your thought records. Identifying these patterns is the first step in challenging and changing them.")}
                </div>
                <CardDescription>Identify recurring thought patterns in your entries</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="w-full" style={{ height: isMobile ? '300px' : '400px' }}>
                  <ResponsiveContainer width="100%" height="100%">
                    <BarChart data={thoughtPatterns} margin={{ top: 20, right: 30, left: 20, bottom: 60 }}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis
                        dataKey="shortLabel"
                        interval={0}
                        tick={({ x, y, payload }) => (
                          <g transform={`translate(${x},${y})`}>
                            <text
                              x={0}
                              y={0}
                              dy={16}
                              textAnchor="end"
                              fill="#666"
                              transform="rotate(-45)"
                              fontSize={isMobile ? 10 : 12}
                            >
                              {payload.value}
                            </text>
                          </g>
                        )}
                      />
                      <YAxis />
                      <Tooltip
                        content={({ active, payload }) => {
                          if (active && payload && payload.length) {
                            return (
                              <div className="bg-background p-2 border border-border rounded shadow-md">
                                <p className="font-semibold">{payload[0].payload.pattern}</p>
                                <p>Frequency: {payload[0].value}</p>
                              </div>
                            );
                          }
                          return null;
                        }}
                      />
                      <Bar dataKey="frequency" fill="#8884d8" />
                    </BarChart>
                  </ResponsiveContainer>
                </div>
                <div className="mt-4 space-y-2">
                  <p>Most common thought pattern: {thoughtPatterns.reduce((max, pattern) => max.frequency > pattern.frequency ? max : pattern).pattern}</p>
                  <p>Total identified thought distortions: {thoughtPatterns.reduce((sum, pattern) => sum + pattern.frequency, 0)}</p>
                </div>
                <div className="mt-4 p-4 bg-muted rounded-md">
                  <h4 className="font-semibold mb-2">Positive Thinking Patterns:</h4>
                  <ul className="list-disc pl-5 space-y-1 text-sm">
                    <li><strong>Gratitude:</strong> Recognizing and appreciating positive aspects in your life.</li>
                    <li><strong>Positive Self-talk:</strong> Encouraging and supportive internal dialogue.</li>
                    <li><strong>Balanced Perspective:</strong> Considering multiple viewpoints in situations.</li>
                    <li><strong>Solution-Focused:</strong> Concentrating on finding solutions rather than dwelling on problems.</li>
                    <li><strong>Mindfulness:</strong> Being present and aware of your thoughts and surroundings.</li>
                    <li><strong>Strength Recognition:</strong> Acknowledging and utilizing your personal strengths.</li>
                    <li><strong>Growth Mindset:</strong> Viewing challenges as opportunities for learning and growth.</li>
                  </ul>
                </div>
                <div className="mt-4 p-4 bg-muted rounded-md">
                  <h4 className="font-semibold mb-2">Recommendations:</h4>
                  <ul className="list-disc pl-5 space-y-1">
                    <li>Your most frequent positive thinking pattern is "{thoughtPatterns[0].pattern}". Keep practicing this beneficial mindset!</li>
                    <li>Try incorporating more "{thoughtPatterns[thoughtPatterns.length - 1].pattern}" into your daily reflections to further enhance your positive thinking.</li>
                    <li>Consider sharing your success in cultivating positive thought patterns with a friend or therapist to reinforce your progress.</li>
                    <li>Experiment with combining different positive thinking strategies to create a personalized approach that works best for you.</li>
                  </ul>
                </div>
                <div className="flex flex-col sm:flex-row justify-between mt-6 gap-4">
                  <Button className="w-full sm:w-auto">Learn More About Thought Patterns</Button>
                  <Button variant="outline" className="w-full sm:w-auto">Access CBT Exercises</Button>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="behaviors">
            <Card>
              <CardHeader>
                <div className="flex justify-between items-center">
                  <CardTitle>Behavioral Activities</CardTitle>
                  {renderInfoPopover("Behavioral Activities", "This chart compares the frequency of your activities with their impact on your mood. Activities with high frequency and high mood impact are particularly beneficial.")}
                </div>
                <CardDescription>Analyze the impact of activities on your mood</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="w-full" style={{ height: isMobile ? '300px' : '400px' }}>
                  <ResponsiveContainer width="100%" height="100%">
                    <BarChart data={behavioralActivities}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="activity" />
                      <YAxis yAxisId="left" orientation="left" stroke="#8884d8" />
                      <YAxis yAxisId="right" orientation="right" stroke="#82ca9d" />
                      <Tooltip />
                      <Legend />
                      <Bar yAxisId="left" dataKey="frequency" fill="#8884d8" name="Frequency (days/week)" />
                      <Bar yAxisId="right" dataKey="mood_impact" fill="#82ca9d" name="Mood Impact (1-10)" />
                    </BarChart>
                  </ResponsiveContainer>
                </div>
                <div className="mt-4 space-y-2">
                  <p>Most frequent activity: {behavioralActivities.reduce((max, activity) => max.frequency > activity.frequency ? max : activity).activity}</p>
                  <p>Activity with highest mood impact: {behavioralActivities.reduce((max, activity) => max.mood_impact > activity.mood_impact ? max : activity).activity}</p>
                </div>
                <div className="mt-4 p-4 bg-muted rounded-md">
                  <h4 className="font-semibold mb-2">Positive Insights:</h4>
                  <ul className="list-disc pl-5 space-y-1">
                    <li>Great job incorporating mood-boosting activities into your routine!</li>
                    <li>Your engagement in {behavioralActivities.reduce((max, activity) => max.mood_impact > activity.mood_impact ? max : activity).activity} has a significant positive impact on your mood. Keep it up!</li>
                    <li>Consider slightly increasing the frequency of activities with high mood impact to further enhance your well-being.</li>
                    <li>Explore new activities that combine elements of your high-impact activities to discover more enjoyable options.</li>
                  </ul>
                </div>
                <Button className="mt-6 w-full sm:w-auto">Suggest New Activities</Button>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="goals">
            <Card>
              <CardHeader>
                <div className="flex justify-between items-center">
                  <CardTitle>Goal Progress</CardTitle>
                  {renderInfoPopover("Goal Progress", "This chart shows your progress towards personal goals. Each slice represents a goal, with the size indicating the percentage of progress made.")}
                </div>
                <CardDescription>Track your progress towards personal goals</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="w-full" style={{ height: isMobile ? '300px' : '400px' }}>
                  <ResponsiveContainer width="100%" height="100%">
                    <PieChart>
                      <Pie
                        data={goalProgress}
                        cx="50%"
                        cy="50%"
                        labelLine={false}
                        outerRadius={isMobile ? 80 : 100}
                        fill="#8884d8"
                        dataKey="progress"
                        label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                      >
                        {goalProgress.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                        ))}
                      </Pie>
                      <Tooltip />
                      <Legend />
                    </PieChart>
                  </ResponsiveContainer>
                </div>
                <div className="mt-4 space-y-2">
                  <p>Highest progress: {goalProgress.reduce((max, goal) => max.progress > goal.progress ? max : goal).goal} ({goalProgress.reduce((max, goal) => max.progress > goal.progress ? max : goal).progress}%)</p>
                  <p>Area needing most attention: {goalProgress.reduce((min, goal) => min.progress < goal.progress ? min : goal).goal} ({goalProgress.reduce((min, goal) => min.progress < goal.progress ? min : goal).progress}%)</p>
                </div>
                <div className="mt-4 p-4 bg-muted rounded-md">
                  <h4 className="font-semibold mb-2">Progress Celebration:</h4>
                  <ul className="list-disc pl-5 space-y-1">
                    <li>Excellent progress on "{goalProgress.reduce((max, goal) => max.progress > goal.progress ? max : goal).goal}"! Reflect on the strategies that contributed to this success.</li>
                    <li>You're making steady progress on all your goals. Keep up the great work!</li>
                    <li>For "{goalProgress.reduce((min, goal) => min.progress < goal.progress ? min : goal).goal}", consider breaking it down into smaller, achievable steps to maintain motivation.</li>
                    <li>Regularly review and adjust your goals to ensure they remain challenging yet attainable, celebrating each milestone along the way.</li>
                  </ul>
                </div>
                <Button className="mt-6 w-full sm:w-auto">Update Goal Progress</Button>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </motion.div>
    </ScrollArea>
  )
}

[V0_FILE]typescriptreact:file="components/LoadingSkeleton.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export function LoadingSkeleton() {
  return (
    <div className="space-y-4">
      <Skeleton className="h-8 w-[250px]" />
      <Skeleton className="h-4 w-[200px]" />
      <Skeleton className="h-4 w-[300px]" />
      <Skeleton className="h-32 w-full" />
    </div>
  )
}

[V0_FILE]typescript:file="hooks/use-media-query.ts" isMerged="true"
import { useState, useEffect } from 'react'

export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(false)

useEffect(() => {
    const media = window.matchMedia(query)
    if (media.matches !== matches) {
      setMatches(media.matches)
    }
    const listener = () => setMatches(media.matches)
    media.addListener(listener)
    return () => media.removeListener(listener)
  }, [matches, query])

return matches
}

[V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: 200 30% 98%;
  --foreground: 200 40% 20%;

--muted: 200 20% 96%;
  --muted-foreground: 200 40% 40%;

--popover: 0 0% 100%;
  --popover-foreground: 200 40% 20%;

--card: 0 0% 100%;
  --card-foreground: 200 40% 20%;

--border: 200 20% 90%;
  --input: 200 20% 90%;

--primary: 200 60% 45%;
  --primary-foreground: 0 0% 100%;

--secondary: 120 60% 40%;
  --secondary-foreground: 0 0% 100%;

--accent: 120 60% 40%;
  --accent-foreground: 0 0% 100%;

--destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;

--ring: 200 60% 45%;

--radius: 0.5rem;

--gradient-start: 200 30% 98%;
  --gradient-end: 200 30% 93%;
  --card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

@layer base {
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

@layer utilities {
  .safe-top {
    padding-top: env(safe-area-inset-top);
  }
  .safe-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

.gradient-bg {
  background: linear-gradient(135deg, hsl(var(--gradient-start)) 0%, hsl(var(--gradient-end)) 100%);
}

.glass-effect {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: var(--card-shadow);
  @apply rounded-lg;
}

html {
  scroll-behavior: smooth;
}

/* Ensure content doesn't shift during transitions */
body {
  overflow-y: scroll;
}

/* Improve animation performance */
* {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Prevent layout shifts during transitions */
main {
  min-height: calc(100vh - 64px - 56px); /* Adjust based on your header and navigation heights */
}

/* Respect user's reduced motion settings */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

.h1 {
  @apply text-4xl font-extrabold tracking-tight;
}
.h2 {
  @apply text-3xl font-semibold tracking-tight;
}
.h3 {
  @apply text-2xl font-semibold tracking-tight;
}
.h4 {
  @apply text-xl font-semibold tracking-tight;
}

.hover-lift {
  @apply transition-transform duration-300 ease-in-out;
}
.hover-lift:hover {
  @apply -translate-y-1;
}

.progress-ring {
  @apply relative inline-flex;
}
.progress-ring circle {
  @apply transition-all duration-300 ease-in-out;
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
import type React from "react"
import type { MetadataRoute } from "next/server"
import ClientRootLayout from "./client-root-layout"

export const metadata: MetadataRoute = {
  title: "Cogniflorence",
  description: "A comprehensive platform for self-administered Cognitive Behavioral Therapy",
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <ClientRootLayout>{children}</ClientRootLayout>
}

[V0_FILE]typescriptreact:file="app/client-root-layout.tsx" isFixed="true" isQuickEdit="true"
"use client"
import "./globals.css"
import type React from "react"

import { Poppins } from "next/font/google"
import Navigation from "@/components/Navigation"
import Header from "@/components/Header"
import { ScrollToTop } from "@/components/ScrollToTop"
import PageTransition from "@/components/PageTransition"
import { MotionConfig } from "framer-motion"
import { Toaster } from "@/components/ui/toaster"

const poppins = Poppins({
  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700"],
  display: "swap",
  variable: "--font-poppins",
})

export default function ClientRootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={`h-full ${poppins.variable}`}>
      <body className="flex flex-col min-h-screen gradient-bg">
        <MotionConfig reducedMotion="user">
          <ScrollToTop />
          <Header />
          <main className="flex-grow container mx-auto px-4 py-8">
            <PageTransition>{children}</PageTransition>
          </main>
          <Navigation />
          <Toaster />
        </MotionConfig>
      </body>
    </html>
  )
}
</article></body></html>