112:"ExplicitChatIdProvider" 113:I[903690,["$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$8c","$8d","$7c","$85","$7f","$7e","$8e","$80","$8f","$90","$91","$7d","$92","$87","$8a","$84","$83","$88","$89","$93","$94","$86","$95","$82"],"$112"] 114:I[838238,["$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$8c","$8d","$7c","$85","$7f","$7e","$8e","$80","$8f","$90","$91","$7d","$92","$87","$8a","$84","$83","$88","$89","$93","$94","$86","$95","$82"],"SWRDataProvider"] 116:[] 117:[["b_PBVfyGqPfQf",null],["b_EMhuEB3Qjte",null],["b_SU8ElmxByxR",null],["b_0N2lYYgGHW6",null],["b_o232s8QjEZW",null]] 118:[["b_PBVfyGqPfQf",{"templateVersionId":null,"templateCanonId":null}],["b_EMhuEB3Qjte",{"templateVersionId":null,"templateCanonId":null}],["b_SU8ElmxByxR",{"templateVersionId":null,"templateCanonId":null}],["b_0N2lYYgGHW6",{"templateVersionId":null,"templateCanonId":null}],["b_o232s8QjEZW",{"templateVersionId":null,"templateCanonId":null}]] 119:[["b_SHlDRiKpAIT","$D2025-08-10T08:27:20.029Z"],["b_NHuosyCghjB","$D2025-08-10T08:29:42.600Z"],["b_LZYIEyMOsQJ","$D2025-08-10T08:39:46.182Z"],["b_1mv1HBvUJA0","$D2025-08-10T08:57:42.858Z"],["b_D7fUuQDjh8x","$D2025-08-10T11:48:00.142Z"],["b_2BM1FNoA9at","$D2025-08-10T11:53:12.581Z"],["b_LTUetNKmbI0","$D2025-08-10T11:59:03.432Z"],["b_VQFq8xlIV5h","$D2025-08-10T12:06:42.352Z"],["b_CcbAm7v8f3h","$D2025-08-12T11:08:58.313Z"],["b_uLtRiePMbbB","$D2025-08-12T11:11:33.649Z"],["b_fygqJCnfQWs","$D2025-08-12T11:16:14.635Z"],["b_IcBzSLWZHKg","$D2025-08-12T11:22:25.161Z"],["b_Q0RXFdRVDQS","$D2025-08-12T11:24:31.173Z"],["b_zmmq0vsQwHt","$D2025-08-12T11:28:40.771Z"],["b_YCvWWcgzrQc","$D2025-08-12T11:34:05.213Z"],["b_tYZKnIIRq3j","$D2025-08-12T11:43:08.931Z"],["b_YYLyayG7LLE","$D2025-08-12T11:46:19.964Z"],["b_IgQX8W1ToIq","$D2025-08-12T11:51:43.484Z"],["b_ryMQXAVeLul","$D2025-08-12T11:56:38.702Z"],["b_qVdEFLhUpH1","$D2025-08-12T12:01:27.849Z"],["b_bFVxVplComH","$D2025-08-12T12:17:19.763Z"],["b_iD1eQ6DtKiS","$D2025-08-12T12:25:30.919Z"],["b_lg2EQclkIJx","$D2025-08-12T12:25:58.468Z"],["b_zreCNYBtPeo","$D2025-08-12T12:26:46.250Z"],["b_sVvkfqj19gU","$D2025-08-12T12:32:36.250Z"],["b_52QA1VlgE0x","$D2025-08-12T12:33:04.985Z"],["b_nnm96vexsrm","$D2025-08-12T12:51:59.797Z"],["b_xitQ8mtlpD2","$D2025-08-12T13:13:22.893Z"],["b_nrcH5y3XLkz","$D2025-08-12T13:15:55.925Z"],["b_vBG48SWpupp","$D2025-08-13T11:34:44.992Z"],["b_FQMaTDinacC","$D2025-08-13T11:38:50.146Z"],["b_Vv0psdeDdrM","$D2025-08-13T11:39:47.839Z"],["b_45BZuOBxgTb","$D2025-08-13T11:42:09.049Z"],["b_KjV8SVA68Uf","$D2025-08-13T11:50:22.064Z"],["b_QDznK7NACsS","$D2025-08-14T06:35:36.013Z"],["b_J3EL00kBRcB","$D2025-12-08T05:25:41.800Z"],["b_mQxLp74XWnv","$D2025-12-08T05:26:54.569Z"],["b_ZugI2JNSEDr","$D2025-12-08T05:27:26.074Z"],["b_zy1C2oODDkU","$D2025-12-08T05:27:58.560Z"],["b_cM8fLJsaqPI","$D2025-12-08T05:28:29.016Z"],["b_QzYj4SjDFuv","$D2026-05-28T05:57:35.379Z"],["b_i0uWZMTFOVP","$D2026-05-28T06:01:08.976Z"],["b_LqYlFFCuluz","$D2026-05-28T06:01:36.337Z"],["b_eHvLA0yqGGK","$D2026-05-28T06:06:46.126Z"],["b_poqwBPUQsft","$D2026-05-28T06:06:54.730Z"],["b_QihAkRf5OUY","$D2026-05-28T06:10:36.416Z"],["b_nRClU24cbnx","$D2026-05-28T06:12:57.729Z"],["b_EnnbG0dXg5F","$D2026-05-28T06:13:18.755Z"],["b_QNrtHWCAw7b","$D2026-05-28T06:13:30.879Z"],["b_97RorTwekUC","$D2026-05-28T06:16:43.249Z"],["b_mffrVB8DHuI","$D2026-06-22T15:36:13.579Z"],["b_bFaStHnh9oq","$D2026-06-26T06:30:10.145Z"],["b_5Ee7BBzDnrx","$D2026-06-26T06:31:15.568Z"],["b_rZ2RnUpa3zw","$D2026-06-26T06:32:53.198Z"],["b_uZTPpqjggc3","$D2026-06-26T06:34:11.756Z"],["b_PBVfyGqPfQf","$D2026-06-26T06:39:43.964Z"],["b_EMhuEB3Qjte","$D2026-06-26T06:40:11.927Z"],["b_SU8ElmxByxR","$D2026-06-26T06:41:37.876Z"],["b_0N2lYYgGHW6","$D2026-07-19T08:17:38.754Z"],["b_o232s8QjEZW","$D2026-07-19T08:17:44.876Z"]] 11a:[["b_PBVfyGqPfQf",false],["b_EMhuEB3Qjte",false],["b_SU8ElmxByxR",false],["b_0N2lYYgGHW6",false],["b_o232s8QjEZW",false]] 11b:[["b_PBVfyGqPfQf","$undefined"],["b_EMhuEB3Qjte","$undefined"],["b_SU8ElmxByxR",{"deploymentId":"dpl_BoeqDYwt6gJz3Pjc3QLNPJfdK1zp","showV0Button":true}],["b_0N2lYYgGHW6","$undefined"],["b_o232s8QjEZW","$undefined"]] 11c:[["b_PBVfyGqPfQf",null],["b_EMhuEB3Qjte",null],["b_SU8ElmxByxR",null],["b_0N2lYYgGHW6",null],["b_o232s8QjEZW",null]] 11d:[["b_PBVfyGqPfQf",true],["b_EMhuEB3Qjte",true],["b_SU8ElmxByxR",true],["b_0N2lYYgGHW6",true],["b_o232s8QjEZW",true]] 11e:[["b_PBVfyGqPfQf",true],["b_EMhuEB3Qjte",true],["b_SU8ElmxByxR",true],["b_0N2lYYgGHW6",true],["b_o232s8QjEZW",true]] 11f:[] 120:T84360,[V0_FILE]png:file="public/healthcare-app-chat.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/healthcare-app-chat-KnofNtN7aOx448bonJn3do2wW7bo3d.png" isMerged="true" [V0_FILE]typescriptreact:file="app/remedies/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/about/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Heart, Users, Award, Globe } from "lucide-react" export default function AboutPage() { const team = [ { name: "Dr. Sarah Williams", role: "Chief Medical Officer", avatar: "/placeholder.svg?height=80&width=80", bio: "15+ years in integrative medicine and natural healing", }, { name: "Alex Chen", role: "AI Technology Lead", avatar: "/placeholder.svg?height=80&width=80", bio: "Expert in healthcare AI and machine learning applications", }, { name: "Maya Patel", role: "Wellness Content Director", avatar: "/placeholder.svg?height=80&width=80", bio: "Certified yoga instructor and holistic health practitioner", }, ] const stats = [ { icon: Users, value: "50K+", label: "Active Users" }, { icon: Heart, value: "1M+", label: "Health Tips Shared" }, { icon: Award, value: "95%", label: "User Satisfaction" }, { icon: Globe, value: "25+", label: "Countries Served" }, ] return (

{/* Hero Section */}

About HealthAI

We're on a mission to make authentic, natural health wisdom accessible to everyone through the power of AI. Our platform combines traditional remedies with modern technology to provide personalized health guidance.

{/* Mission & Vision */}

Our Mission

To democratize access to natural health knowledge by creating an AI-powered platform that provides personalized, evidence-based wellness guidance rooted in traditional healing practices.

Our Vision

A world where everyone has access to holistic health solutions that honor both ancient wisdom and modern science, empowering individuals to take control of their wellness journey.

{/* Stats */}

{stats.map((stat, index) => { const IconComponent = stat.icon return (

{stat.value}

{stat.label}

) })}

{/* Team Section */}

Meet Our Team

{team.map((member, index) => ( {member.name .split(" ") .map((n) => n[0]) .join("")} {member.name} {member.role}

{member.bio}

))}

{/* Values */}

Our Values

Authenticity

We source our remedies from traditional practices backed by scientific research, ensuring every recommendation is both authentic and effective.

Accessibility

Health wisdom should be available to everyone, regardless of location or background. We make natural healing accessible through technology.

Empowerment

We believe in empowering individuals with knowledge and tools to take charge of their health journey naturally and confidently.

) } [V0_FILE]typescriptreact:file="app/api/remedies/route.ts" isMerged="true" import { NextResponse } from "next/server" const remedies = [ { id: 1, title: "Honey and Ginger for Cough", description: "Natural remedy to soothe throat and reduce coughing", ingredients: ["2 tbsp honey", "1 tsp fresh ginger juice", "Warm water"], instructions: [ "Mix honey with fresh ginger juice", "Add to a cup of warm water", "Stir well and drink slowly", "Take 2-3 times daily", ], duration: "5 mins", rating: 4.8, users: 1200, category: "Respiratory", }, { id: 2, title: "Turmeric Milk for Inflammation", description: "Anti-inflammatory drink to boost immunity", ingredients: ["1 cup milk", "1 tsp turmeric powder", "Pinch of black pepper"], instructions: [ "Heat milk in a saucepan", "Add turmeric powder and black pepper", "Simmer for 5 minutes", "Strain and serve warm", ], duration: "10 mins", rating: 4.9, users: 2100, category: "Immunity", }, ] export async function GET() { return NextResponse.json(remedies) } export async function POST(request: Request) { const body = await request.json() const newRemedy = { id: remedies.length + 1, ...body, rating: 0, users: 0, } remedies.push(newRemedy) return NextResponse.json(newRemedy, { status: 201 }) } [V0_FILE]typescriptreact:file="app/api/yoga/route.ts" isMerged="true" import { NextResponse } from "next/server" const yogaSessions = [ { id: 1, title: "Morning Energizer Flow", description: "Start your day with this energizing 15-minute yoga sequence", duration: "15 mins", level: "Beginner", category: "Morning", poses: ["Mountain Pose", "Sun Salutation A", "Warrior I", "Downward Dog", "Child's Pose"], benefits: ["Increases energy", "Improves flexibility", "Reduces stress"], instructions: "Begin in mountain pose, flow through sun salutations...", }, { id: 2, title: "Stress Relief Meditation", description: "Calm your mind with gentle poses and breathing exercises", duration: "20 mins", level: "All Levels", category: "Relaxation", poses: ["Easy Pose", "Cat-Cow Stretch", "Legs Up the Wall", "Corpse Pose"], benefits: ["Reduces anxiety", "Improves sleep", "Mental clarity"], instructions: "Find a quiet space, sit comfortably in easy pose...", }, ] export async function GET() { return NextResponse.json(yogaSessions) } export async function POST(request: Request) { const body = await request.json() const newSession = { id: yogaSessions.length + 1, ...body, } yogaSessions.push(newSession) return NextResponse.json(newSession, { status: 201 }) } [V0_FILE]typescriptreact:file="app/api/community/posts/route.ts" isMerged="true" import { NextResponse } from "next/server" const posts = [ { id: 1, author: "Sarah Johnson", authorId: "user_1", time: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(), title: "Amazing results with turmeric tea!", content: "I've been drinking turmeric tea for 3 weeks now and my joint pain has significantly reduced. Highly recommend this natural remedy!", category: "Success Story", likes: 24, comments: 8, shares: 3, tags: ["turmeric", "joint-pain", "natural-remedy"], }, { id: 2, author: "Mike Chen", authorId: "user_2", time: new Date(Date.now() - 5 * 60 * 60 * 1000).toISOString(), title: "Question about yoga for back pain", content: "Has anyone tried specific yoga poses for lower back pain? I'm looking for gentle exercises that won't strain my back further.", category: "Question", likes: 12, comments: 15, shares: 2, tags: ["yoga", "back-pain", "exercise"], }, ] export async function GET() { return NextResponse.json(posts) } export async function POST(request: Request) { const body = await request.json() const newPost = { id: posts.length + 1, ...body, time: new Date().toISOString(), likes: 0, comments: 0, shares: 0, } posts.push(newPost) return NextResponse.json(newPost, { status: 201 }) } [V0_FILE]typescriptreact:file="app/tools/bmi/page.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Badge } from "@/components/ui/badge" import { useState } from "react" import Link from "next/link" import { ArrowLeft } from "lucide-react" export default function BMICalculatorPage() { const [height, setHeight] = useState("") const [weight, setWeight] = useState("") const [bmi, setBMI] = useState(null) const [category, setCategory] = useState("") const [recommendations, setRecommendations] = useState([]) const calculateBMI = () => { const heightInM = Number.parseFloat(height) / 100 const weightInKg = Number.parseFloat(weight) if (heightInM > 0 && weightInKg > 0) { const bmiValue = weightInKg / (heightInM * heightInM) setBMI(Number.parseFloat(bmiValue.toFixed(1))) let cat = "" let recs: string[] = [] if (bmiValue < 18.5) { cat = "Underweight" recs = [ "Increase caloric intake with healthy foods", "Include protein-rich foods in your diet", "Consider strength training exercises", "Consult with a nutritionist", ] } else if (bmiValue < 25) { cat = "Normal weight" recs = [ "Maintain your current healthy lifestyle", "Continue regular physical activity", "Eat a balanced diet", "Stay hydrated", ] } else if (bmiValue < 30) { cat = "Overweight" recs = [ "Increase physical activity", "Focus on portion control", "Include more vegetables in your diet", "Consider cardio exercises", ] } else { cat = "Obese" recs = [ "Consult with a healthcare provider", "Create a structured exercise plan", "Focus on gradual weight loss", "Consider professional dietary guidance", ] } setCategory(cat) setRecommendations(recs) } } const getBMIColor = () => { if (!bmi) return "gray" if (bmi < 18.5) return "blue" if (bmi < 25) return "green" if (bmi < 30) return "yellow" return "red" } return (

BMI Calculator Calculate your Body Mass Index and get personalized health recommendations

Height (cm) setHeight(e.target.value)} placeholder="170" />

Weight (kg) setWeight(e.target.value)} placeholder="70" />

{bmi && (

{bmi}

{category}

Recommendations

{rec}

)}

) } [V0_FILE]typescriptreact:file="app/community/create/page.tsx" isMerged="true" "use client" import type React from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Badge } from "@/components/ui/badge" import { useState } from "react" import Link from "next/link" import { ArrowLeft, X } from "lucide-react" import { useRouter } from "next/navigation" export default function CreatePostPage() { const [title, setTitle] = useState("") const [content, setContent] = useState("") const [category, setCategory] = useState("") const [tags, setTags] = useState([]) const [newTag, setNewTag] = useState("") const [isLoading, setIsLoading] = useState(false) const router = useRouter() const addTag = () => { if (newTag.trim() && !tags.includes(newTag.trim())) { setTags([...tags, newTag.trim()]) setNewTag("") } } const removeTag = (tagToRemove: string) => { setTags(tags.filter((tag) => tag !== tagToRemove)) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) try { const response = await fetch("/api/community/posts", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ title, content, category, tags, }), }) if (response.ok) { router.push("/community") } else { alert("Failed to create post. Please try again.") } } catch (error) { alert("An error occurred. Please try again.") } finally { setIsLoading(false) } } return (

Share Your Story Share your health journey, ask questions, or provide advice to the community

Title setTitle(e.target.value)} placeholder="What's your story about?" required />

Category

Content

setContent(e.target.value)}
                  placeholder="Share your story, ask your question, or provide advice..."
                  rows={8}
                  required
                />
              </div>

<div className="space-y-2">
                <Label>Tags</Label>
                <div className="flex space-x-2">
                  <Input
                    value={newTag}
                    onChange={(e) => setNewTag(e.target.value)}
                    placeholder="Add a tag"
                    onKeyPress={(e) => e.key === "Enter" && (e.preventDefault(), addTag())}
                  />
                  <Button type="button" onClick={addTag} variant="outline">
                    Add
                  </Button>
                </div>
                {tags.length > 0 && (
                  <div className="flex flex-wrap gap-2 mt-2">
                    {tags.map((tag, index) => (
                      <Badge key={index} variant="outline" className="flex items-center space-x-1">
                        <span>{tag}</span>
                        <button type="button" onClick={() => removeTag(tag)} className="ml-1 hover:text-red-500">
                          <X className="w-3 h-3" />
                        </button>
                      </Badge>
                    ))}
                  </div>
                )}
              </div>

<div className="flex space-x-4">
                <Button
                  type="submit"
                  className="flex-1 bg-gradient-to-r from-green-500 to-teal-500"
                  disabled={isLoading}
                >
                  {isLoading ? "Publishing..." : "Publish Post"}
                </Button>
                <Button type="button" variant="outline" onClick={() => router.back()}>
                  Cancel
                </Button>
              </div>
            </form>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tools/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Calculator, Heart, Activity, Brain, Droplets, Moon } from "lucide-react"
import Link from "next/link"

export default function ToolsPage() {
  const tools = [
    {
      id: 1,
      title: "BMI Calculator",
      description: "Calculate your Body Mass Index and get health recommendations",
      icon: Calculator,
      category: "Fitness",
      link: "/tools/bmi",
    },
    {
      id: 2,
      title: "Heart Rate Monitor",
      description: "Track your heart rate and monitor cardiovascular health",
      icon: Heart,
      category: "Monitoring",
      link: "/tools/heart-rate",
    },
    {
      id: 3,
      title: "Calorie Tracker",
      description: "Monitor your daily calorie intake and burn rate",
      icon: Activity,
      category: "Nutrition",
      link: "/tools/calorie-tracker",
    },
    {
      id: 4,
      title: "Stress Level Assessment",
      description: "Evaluate your stress levels and get coping strategies",
      icon: Brain,
      category: "Mental Health",
      link: "/tools/stress-level",
    },
    {
      id: 5,
      title: "Water Intake Tracker",
      description: "Stay hydrated with personalized water intake goals",
      icon: Droplets,
      category: "Wellness",
      link: "/tools/water-intake",
    },
    {
      id: 6,
      title: "Sleep Quality Analyzer",
      description: "Track and improve your sleep patterns",
      icon: Moon,
      category: "Sleep",
      link: "/tools/sleep-quality",
    },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-green-50 to-teal-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold text-gray-900 mb-4">Health Tools</h1>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
            Use our comprehensive health tools to monitor and improve your wellness
          </p>
        </div>

{/* Tools Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {tools.map((tool) => {
            const IconComponent = tool.icon
            return (
              <Card key={tool.id} className="hover:shadow-lg transition-shadow cursor-pointer">
                <CardHeader className="text-center">
                  <div className="w-16 h-16 bg-gradient-to-r from-green-500 to-teal-500 rounded-full flex items-center justify-center mx-auto mb-4">
                    <IconComponent className="w-8 h-8 text-white" />
                  </div>
                  <CardTitle className="text-green-700">{tool.title}</CardTitle>
                  <CardDescription>{tool.description}</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="text-center space-y-4">
                    <div className="text-sm text-gray-500 bg-gray-100 px-3 py-1 rounded-full inline-block">
                      {tool.category}
                    </div>
                    <Link href={tool.link}>
                      <Button className="w-full bg-gradient-to-r from-green-500 to-teal-500">Use Tool</Button>
                    </Link>
                  </div>
                </CardContent>
              </Card>
            )
          })}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/community/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { MessageCircle, Heart, Share2 } from "lucide-react"
import Link from "next/link"

export default function CommunityPage() {
  const posts = [
    {
      id: 1,
      author: "Sarah Johnson",
      avatar: "/placeholder.svg?height=40&width=40",
      time: "2 hours ago",
      title: "Amazing results with turmeric tea!",
      content:
        "I've been drinking turmeric tea for 3 weeks now and my joint pain has significantly reduced. Highly recommend this natural remedy!",
      category: "Success Story",
      likes: 24,
      comments: 8,
      shares: 3,
    },
    {
      id: 2,
      author: "Mike Chen",
      avatar: "/placeholder.svg?height=40&width=40",
      time: "5 hours ago",
      title: "Question about yoga for back pain",
      content:
        "Has anyone tried specific yoga poses for lower back pain? I'm looking for gentle exercises that won't strain my back further.",
      category: "Question",
      likes: 12,
      comments: 15,
      shares: 2,
    },
    {
      id: 3,
      author: "Dr. Emily Rodriguez",
      avatar: "/placeholder.svg?height=40&width=40",
      time: "1 day ago",
      title: "The Science Behind Meditation",
      content:
        "Recent studies show that just 10 minutes of daily meditation can reduce cortisol levels by up to 23%. Here's what you need to know...",
      category: "Expert Advice",
      likes: 89,
      comments: 23,
      shares: 45,
    },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-green-50 to-teal-50">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold text-gray-900 mb-4">Community</h1>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
            Connect with others on their wellness journey, share experiences, and get support
          </p>
        </div>

{/* Community Stats */}
        <div className="grid grid-cols-3 gap-4 mb-12">
          <Card className="text-center">
            <CardContent className="pt-6">
              <div className="text-2xl font-bold text-green-600">12.5K</div>
              <div className="text-sm text-gray-600">Members</div>
            </CardContent>
          </Card>
          <Card className="text-center">
            <CardContent className="pt-6">
              <div className="text-2xl font-bold text-green-600">3.2K</div>
              <div className="text-sm text-gray-600">Posts</div>
            </CardContent>
          </Card>
          <Card className="text-center">
            <CardContent className="pt-6">
              <div className="text-2xl font-bold text-green-600">850</div>
              <div className="text-sm text-gray-600">Online</div>
            </CardContent>
          </Card>
        </div>

{/* New Post Button */}
        <div className="mb-8">
          <Link href="/community/create">
            <Button className="w-full bg-gradient-to-r from-green-500 to-teal-500 text-lg py-3">
              Share Your Story
            </Button>
          </Link>
        </div>

{/* Posts Feed */}
        <div className="space-y-6">
          {posts.map((post) => (
            <Card key={post.id} className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <div className="flex items-start space-x-4">
                  <Avatar>
                    <AvatarImage src={post.avatar || "/placeholder.svg"} />
                    <AvatarFallback>
                      {post.author
                        .split(" ")
                        .map((n) => n[0])
                        .join("")}
                    </AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <div className="flex items-center space-x-2">
                      <h3 className="font-semibold">{post.author}</h3>
                      <Badge variant="outline" className="text-xs">
                        {post.category}
                      </Badge>
                    </div>
                    <p className="text-sm text-gray-500">{post.time}</p>
                  </div>
                </div>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <h4 className="font-semibold text-lg mb-2">{post.title}</h4>
                  <p className="text-gray-700">{post.content}</p>
                </div>
                <div className="flex items-center justify-between pt-4 border-t">
                  <div className="flex items-center space-x-6">
                    <button className="flex items-center space-x-2 text-gray-500 hover:text-red-500">
                      <Heart className="w-5 h-5" />
                      <span>{post.likes}</span>
                    </button>
                    <button className="flex items-center space-x-2 text-gray-500 hover:text-green-500">
                      <MessageCircle className="w-5 h-5" />
                      <span>{post.comments}</span>
                    </button>
                    <button className="flex items-center space-x-2 text-gray-500 hover:text-blue-500">
                      <Share2 className="w-5 h-5" />
                      <span>{post.shares}</span>
                    </button>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tools/heart-rate/page.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { useState, useEffect } from "react"
import Link from "next/link"
import { ArrowLeft, Heart } from "lucide-react"

export default function HeartRateMonitorPage() {
  const [isMonitoring, setIsMonitoring] = useState(false)
  const [heartRate, setHeartRate] = useState<number | null>(null)
  const [countdown, setCountdown] = useState(15)

useEffect(() => {
    let interval: NodeJS.Timeout
    if (isMonitoring && countdown > 0) {
      interval = setInterval(() => {
        setCountdown((prev) => prev - 1)
      }, 1000)
    } else if (isMonitoring && countdown === 0) {
      // Simulate heart rate measurement
      const simulatedRate = Math.floor(Math.random() * (100 - 60) + 60)
      setHeartRate(simulatedRate)
      setIsMonitoring(false)
      setCountdown(15)
    }
    return () => clearInterval(interval)
  }, [isMonitoring, countdown])

const startMonitoring = () => {
    setIsMonitoring(true)
    setHeartRate(null)
    setCountdown(15)
  }

const getHeartRateCategory = (rate: number) => {
    if (rate < 60) return { category: "Low", color: "blue" }
    if (rate <= 100) return { category: "Normal", color: "green" }
    return { category: "High", color: "red" }
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-green-50 to-teal-50">
      <div className="max-w-2xl mx-auto p-4">
        <div className="mb-6">
          <Link href="/tools">
            <Button variant="ghost" className="flex items-center space-x-2">
              <ArrowLeft className="w-4 h-4" />
              <span>Back to Tools</span>
            </Button>
          </Link>
        </div>

<Card>
          <CardHeader className="text-center">
            <CardTitle className="text-2xl text-green-700 flex items-center justify-center space-x-2">
              <Heart className="w-8 h-8" />
              <span>Heart Rate Monitor</span>
            </CardTitle>
            <CardDescription>Place your finger on your phone's camera to measure your heart rate</CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            {!isMonitoring && !heartRate && (
              <div className="text-center space-y-4">
                <div className="w-32 h-32 bg-gradient-to-r from-green-500 to-teal-500 rounded-full flex items-center justify-center mx-auto">
                  <Heart className="w-16 h-16 text-white" />
                </div>
                <p className="text-gray-600">Place your finger gently on the camera lens and flash</p>
                <Button onClick={startMonitoring} className="bg-gradient-to-r from-green-500 to-teal-500">
                  Start Measurement
                </Button>
              </div>
            )}

{isMonitoring && (
              <div className="text-center space-y-4">
                <div className="w-32 h-32 bg-red-500 rounded-full flex items-center justify-center mx-auto animate-pulse">
                  <span className="text-white text-2xl font-bold">{countdown}</span>
                </div>
                <p className="text-gray-600">Keep your finger still... {countdown}s remaining</p>
              </div>
            )}

{heartRate && (
              <div className="text-center space-y-4">
                <div className="text-6xl font-bold text-gray-900">{heartRate}</div>
                <p className="text-gray-600">beats per minute</p>
                <Badge
                  className={`bg-${getHeartRateCategory(heartRate).color}-100 text-${getHeartRateCategory(heartRate).color}-700`}
                >
                  {getHeartRateCategory(heartRate).category}
                </Badge>

<Card>
                  <CardHeader>
                    <CardTitle className="text-lg">Recommendations</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-2 text-sm">
                      {heartRate < 60 && (
                        <>
                          <li>• Consider light exercise to increase heart rate</li>
                          <li>• Consult a doctor if you feel dizzy or weak</li>
                          <li>• Stay hydrated and eat regular meals</li>
                        </>
                      )}
                      {heartRate >= 60 && heartRate <= 100 && (
                        <>
                          <li>• Your heart rate is in the normal range</li>
                          <li>• Continue regular physical activity</li>
                          <li>• Maintain a healthy lifestyle</li>
                        </>
                      )}
                      {heartRate > 100 && (
                        <>
                          <li>• Try deep breathing exercises</li>
                          <li>• Avoid caffeine and stimulants</li>
                          <li>• Consider stress management techniques</li>
                          <li>• Consult a doctor if persistently high</li>
                        </>
                      )}
                    </ul>
                  </CardContent>
                </Card>

<Button onClick={startMonitoring} variant="outline" className="w-full bg-transparent">
                  Measure Again
                </Button>
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Heart, MessageCircle, BookOpen, Activity, Users, Calendar } from "lucide-react"
import Link from "next/link"
import { useEffect, useState } from "react"

export default function DashboardPage() {
  const [user, setUser] = useState<any>(null)

useEffect(() => {
    const userData = localStorage.getItem("user")
    if (userData) {
      setUser(JSON.parse(userData))
    }
  }, [])

const quickActions = [
    { title: "Start Health Chat", icon: MessageCircle, href: "/chat", color: "green" },
    { title: "Browse Remedies", icon: BookOpen, href: "/remedies", color: "blue" },
    { title: "Yoga Session", icon: Activity, href: "/yoga", color: "purple" },
    { title: "Health Tools", icon: Heart, href: "/tools", color: "red" },
  ]

const recentActivity = [
    { action: "Completed Morning Yoga", time: "2 hours ago", type: "yoga" },
    { action: "Asked about headache remedies", time: "1 day ago", type: "chat" },
    { action: "Calculated BMI", time: "3 days ago", type: "tool" },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-green-50 to-teal-50">
      <div className="max-w-7xl mx-auto p-4">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900">Welcome back, {user?.name || "User"}!</h1>
          <p className="text-gray-600 mt-2">Here's your health journey overview</p>
        </div>

<div className="grid lg:grid-cols-3 gap-6">
          {/* Main Content */}
          <div className="lg:col-span-2 space-y-6">
            {/* Quick Actions */}
            <Card>
              <CardHeader>
                <CardTitle>Quick Actions</CardTitle>
                <CardDescription>Jump into your health activities</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-2 gap-4">
                  {quickActions.map((action, index) => {
                    const IconComponent = action.icon
                    return (
                      <Link key={index} href={action.href}>
                        <Card className="hover:shadow-lg transition-shadow cursor-pointer">
                          <CardContent className="p-4 text-center">
                            <div
                              className={`w-12 h-12 bg-${action.color}-100 rounded-full flex items-center justify-center mx-auto mb-3`}
                            >
                              <IconComponent className={`w-6 h-6 text-${action.color}-600`} />
                            </div>
                            <h3 className="font-semibold">{action.title}</h3>
                          </CardContent>
                        </Card>
                      </Link>
                    )
                  })}
                </div>
              </CardContent>
            </Card>

{/* Health Stats */}
            <Card>
              <CardHeader>
                <CardTitle>Your Health Stats</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-3 gap-4">
                  <div className="text-center">
                    <div className="text-2xl font-bold text-green-600">12</div>
                    <div className="text-sm text-gray-600">Remedies Tried</div>
                  </div>
                  <div className="text-center">
                    <div className="text-2xl font-bold text-green-600">8</div>
                    <div className="text-sm text-gray-600">Yoga Sessions</div>
                  </div>
                  <div className="text-center">
                    <div className="text-2xl font-bold text-green-600">5</div>
                    <div className="text-sm text-gray-600">Tools Used</div>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Recent Activity */}
            <Card>
              <CardHeader>
                <CardTitle>Recent Activity</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {recentActivity.map((activity, index) => (
                    <div key={index} className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg">
                      <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                      <div className="flex-1">
                        <p className="font-medium">{activity.action}</p>
                        <p className="text-sm text-gray-600">{activity.time}</p>
                      </div>
                      <Badge variant="outline">{activity.type}</Badge>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>

{/* Sidebar */}
          <div className="space-y-6">
            {/* Today's Recommendations */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Calendar className="w-5 h-5" />
                  <span>Today's Recommendations</span>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="p-3 bg-green-50 rounded-lg">
                  <h4 className="font-semibold text-green-700">Morning Yoga</h4>
                  <p className="text-sm text-gray-600">Start your day with energy</p>
                </div>
                <div className="p-3 bg-blue-50 rounded-lg">
                  <h4 className="font-semibold text-blue-700">Hydration Reminder</h4>
                  <p className="text-sm text-gray-600">Drink 8 glasses of water</p>
                </div>
                <div className="p-3 bg-purple-50 rounded-lg">
                  <h4 className="font-semibold text-purple-700">Evening Meditation</h4>
                  <p className="text-sm text-gray-600">Relax before bedtime</p>
                </div>
              </CardContent>
            </Card>

{/* Community Highlights */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Users className="w-5 h-5" />
                  <span>Community</span>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  <div className="text-center">
                    <div className="text-lg font-bold text-gray-900">3 new</div>
                    <div className="text-sm text-gray-600">Success stories</div>
                  </div>
                  <Link href="/community">
                    <Button variant="outline" className="w-full bg-transparent">
                      Join Community
                    </Button>
                  </Link>
                </div>
              </CardContent>
            </Card>

{/* AI Health Tip */}
            <Card>
              <CardHeader>
                <CardTitle>AI Health Tip</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-gray-700 mb-3">
                  "Regular deep breathing for just 5 minutes can reduce stress hormones by up to 25%."
                </p>
                <Link href="/chat">
                  <Button variant="outline" className="w-full bg-transparent">
                    Ask AI More
                  </Button>
                </Link>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/yoga/poses/page.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Eye, Search, Play, BookOpen } from "lucide-react"
import { useState, Suspense } from "react"
import Link from "next/link"
import { Canvas } from "@react-three/fiber"
import { OrbitControls, Environment } from "@react-three/drei"

// Mini 3D Pose Preview Component
function MiniPosePreview({ poseName }: { poseName: string }) {
  return (
    <div className="h-32 bg-gradient-to-br from-purple-100 to-pink-100 rounded-lg overflow-hidden">
      <Canvas camera={{ position: [3, 3, 3], fov: 50 }}>
        <Suspense fallback={null}>
          <ambientLight intensity={0.6} />
          <directionalLight position={[5, 5, 5]} intensity={0.8} />

{/* Simplified pose representation */}
          <group>
            <mesh position={[0, 0, 0]}>
              <cylinderGeometry args={[0.15, 0.15, 1, 8]} />
              <meshStandardMaterial color="#10b981" />
            </mesh>
            <mesh position={[0, 0.7, 0]}>
              <sphereGeometry args={[0.12, 16, 16]} />
              <meshStandardMaterial color="#f59e0b" />
            </mesh>
          </group>

<Environment preset="sunset" />
          <OrbitControls enableZoom={false} enablePan={false} autoRotate autoRotateSpeed={2} />
        </Suspense>
      </Canvas>
    </div>
  )
}

export default function YogaPosesPage() {
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedCategory, setSelectedCategory] = useState("all")

const yogaPoses = [
    {
      id: 1,
      name: "Mountain Pose",
      sanskrit: "Tadasana",
      category: "Standing",
      difficulty: "Beginner",
      duration: "1-2 minutes",
      benefits: ["Improves posture", "Increases awareness", "Strengthens legs"],
      description: "The foundation of all standing poses, promoting stability and grounding.",
    },
    {
      id: 2,
      name: "Downward Facing Dog",
      sanskrit: "Adho Mukha Svanasana",
      category: "Inversion",
      difficulty: "Beginner",
      duration: "1-3 minutes",
      benefits: ["Stretches hamstrings", "Strengthens arms", "Calms mind"],
      description: "An energizing inversion that stretches the entire body.",
    },
    {
      id: 3,
      name: "Warrior I",
      sanskrit: "Virabhadrasana I",
      category: "Standing",
      difficulty: "Beginner",
      duration: "30 seconds each side",
      benefits: ["Strengthens legs", "Opens hips", "Builds confidence"],
      description: "A powerful standing pose that builds strength and stability.",
    },
    {
      id: 4,
      name: "Child's Pose",
      sanskrit: "Balasana",
      category: "Restorative",
      difficulty: "Beginner",
      duration: "1-5 minutes",
      benefits: ["Relaxes body", "Calms mind", "Stretches hips"],
      description: "A gentle resting pose that promotes relaxation and introspection.",
    },
    {
      id: 5,
      name: "Cat-Cow Stretch",
      sanskrit: "Marjaryasana-Bitilasana",
      category: "Warm-up",
      difficulty: "Beginner",
      duration: "1-2 minutes",
      benefits: ["Improves spinal mobility", "Relieves tension", "Warms up spine"],
      description: "A gentle flow between two poses that warms the spine.",
    },
    {
      id: 6,
      name: "Tree Pose",
      sanskrit: "Vrikshasana",
      category: "Standing",
      difficulty: "Intermediate",
      duration: "30 seconds each side",
      benefits: ["Improves balance", "Strengthens legs", "Enhances focus"],
      description: "A balancing pose that cultivates stability and concentration.",
    },
    {
      id: 7,
      name: "Cobra Pose",
      sanskrit: "Bhujangasana",
      category: "Backbend",
      difficulty: "Beginner",
      duration: "15-30 seconds",
      benefits: ["Strengthens back", "Opens chest", "Improves posture"],
      description: "A gentle backbend that strengthens the spine and opens the heart.",
    },
    {
      id: 8,
      name: "Seated Forward Fold",
      sanskrit: "Paschimottanasana",
      category: "Forward Fold",
      difficulty: "Intermediate",
      duration: "1-3 minutes",
      benefits: ["Stretches hamstrings", "Calms nervous system", "Aids digestion"],
      description: "A calming forward fold that promotes introspection.",
    },
  ]

const categories = ["all", "Standing", "Inversion", "Restorative", "Warm-up", "Backbend", "Forward Fold"]

const filteredPoses = yogaPoses.filter((pose) => {
    const matchesSearch =
      pose.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      pose.sanskrit.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesCategory = selectedCategory === "all" || pose.category === selectedCategory
    return matchesSearch && matchesCategory
  })

const getDifficultyColor = (difficulty: string) => {
    switch (difficulty) {
      case "Beginner":
        return "bg-green-100 text-green-700"
      case "Intermediate":
        return "bg-yellow-100 text-yellow-700"
      case "Advanced":
        return "bg-red-100 text-red-700"
      default:
        return "bg-gray-100 text-gray-700"
    }
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-green-50 to-teal-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold text-gray-900 mb-4">3D Yoga Pose Library</h1>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
            Explore yoga poses with interactive 3D visualizations and detailed guidance
          </p>
        </div>

{/* Search and Filter */}
        <div className="mb-8 space-y-4">
          <div className="max-w-md mx-auto">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
              <Input
                placeholder="Search poses..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10 py-3 text-lg"
              />
            </div>
          </div>

{/* Category Filter */}
          <div className="flex flex-wrap justify-center gap-2">
            {categories.map((category) => (
              <Button
                key={category}
                variant={selectedCategory === category ? "default" : "outline"}
                size="sm"
                onClick={() => setSelectedCategory(category)}
                className={selectedCategory === category ? "bg-purple-500 hover:bg-purple-600" : ""}
              >
                {category === "all" ? "All Poses" : category}
              </Button>
            ))}
          </div>
        </div>

{/* Poses Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          {filteredPoses.map((pose) => (
            <Card key={pose.id} className="hover:shadow-xl transition-all duration-300 transform hover:scale-105">
              <CardHeader className="pb-2">
                {/* 3D Preview */}
                <MiniPosePreview poseName={pose.name} />

<div className="flex items-start justify-between mt-3">
                  <div>
                    <CardTitle className="text-lg text-purple-700">{pose.name}</CardTitle>
                    <p className="text-sm text-gray-500 italic">{pose.sanskrit}</p>
                  </div>
                  <Badge className={getDifficultyColor(pose.difficulty)}>{pose.difficulty}</Badge>
                </div>
              </CardHeader>

<CardContent className="space-y-4">
                <CardDescription className="text-sm">{pose.description}</CardDescription>

<div className="space-y-2">
                  <div className="flex items-center justify-between text-xs text-gray-600">
                    <span>Category: {pose.category}</span>
                    <span>Duration: {pose.duration}</span>
                  </div>
                </div>

<div>
                  <h4 className="font-semibold text-sm mb-2">Key Benefits:</h4>
                  <ul className="text-xs text-gray-600 space-y-1">
                    {pose.benefits.slice(0, 2).map((benefit, index) => (
                      <li key={index} className="flex items-center space-x-1">
                        <div className="w-1 h-1 bg-purple-500 rounded-full"></div>
                        <span>{benefit}</span>
                      </li>
                    ))}
                    {pose.benefits.length > 2 && (
                      <li className="text-purple-600">+{pose.benefits.length - 2} more benefits</li>
                    )}
                  </ul>
                </div>

<div className="flex space-x-2 pt-2">
                  <Button size="sm" className="flex-1 bg-gradient-to-r from-purple-500 to-pink-500 text-xs">
                    <Eye className="w-3 h-3 mr-1" />
                    View 3D
                  </Button>
                  <Button size="sm" variant="outline" className="flex-1 text-xs bg-transparent">
                    <BookOpen className="w-3 h-3 mr-1" />
                    Guide
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

{/* No results */}
        {filteredPoses.length === 0 && (
          <div className="text-center py-12">
            <div className="text-gray-400 mb-4">
              <Search className="w-16 h-16 mx-auto" />
            </div>
            <h3 className="text-lg font-semibold text-gray-600 mb-2">No poses found</h3>
            <p className="text-gray-500">Try adjusting your search or filter criteria</p>
          </div>
        )}

{/* Quick Start Section */}
        <div className="mt-16 text-center">
          <Card className="max-w-2xl mx-auto">
            <CardHeader>
              <CardTitle className="text-2xl text-purple-700">Ready to Start Your 3D Yoga Journey?</CardTitle>
              <CardDescription>Experience yoga like never before with our immersive 3D guidance system</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-3 gap-4 text-center">
                <div>
                  <div className="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-2">
                    <Eye className="w-6 h-6 text-purple-600" />
                  </div>
                  <p className="text-sm font-semibold">3D Visualization</p>
                </div>
                <div>
                  <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2">
                    <Play className="w-6 h-6 text-green-600" />
                  </div>
                  <p className="text-sm font-semibold">Interactive Sessions</p>
                </div>
                <div>
                  <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-2">
                    <BookOpen className="w-6 h-6 text-blue-600" />
                  </div>
                  <p className="text-sm font-semibold">Step-by-Step Guide</p>
                </div>
              </div>

<div className="flex space-x-4 justify-center">
                <Link href="/yoga">
                  <Button className="bg-gradient-to-r from-purple-500 to-pink-500">
                    <Play className="w-4 h-4 mr-2" />
                    Start 3D Session
                  </Button>
                </Link>
                <Link href="/chat">
                  <Button variant="outline">Ask AI for Pose Recommendations</Button>
                </Link>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/yoga/poses/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="lib/database.ts" isMerged="true"
// Database schema and connection utilities
export interface User {
  id: string
  name: string
  email: string
  password: string
  createdAt: Date
  updatedAt: Date
  preferences: UserPreferences
  stats: UserStats
}

export interface UserPreferences {
  experienceLevel: "beginner" | "intermediate" | "advanced"
  preferredDuration: number
  favoriteCategories: string[]
  reminderTime?: string
  autoPlay: boolean
  show3D: boolean
  voiceGuidance: boolean
}

export interface UserStats {
  totalSessions: number
  totalMinutes: number
  currentStreak: number
  longestStreak: number
  favoriteSession: string
  averageSessionRating: number
  lastSessionDate: Date
}

export interface YogaSession {
  id: string
  title: string
  description: string
  duration: number
  level: "beginner" | "intermediate" | "advanced"
  category: string
  instructor: string
  poses: YogaPose[]
  benefits: string[]
  tags: string[]
  rating: number
  totalRatings: number
  createdAt: Date
  updatedAt: Date
  isPublic: boolean
  createdBy: string
}

export interface YogaPose {
  id: string
  name: string
  sanskrit: string
  duration: number
  instructions: string[]
  benefits: string[]
  precautions: string[]
  breathing: string
  visualization: string
  difficulty: "beginner" | "intermediate" | "advanced"
  category: string
  muscleGroups: string[]
  contraindications: string[]
  modifications: string[]
  alignment: AlignmentCue[]
  energyLevel: "calming" | "neutral" | "energizing"
}

export interface AlignmentCue {
  bodyPart: string
  instruction: string
  commonMistakes: string[]
}

export interface UserSession {
  id: string
  userId: string
  sessionId: string
  startTime: Date
  endTime?: Date
  completedPoses: string[]
  currentPose: number
  rating?: number
  notes?: string
  mood: "stressed" | "neutral" | "energized" | "calm"
  energy: number // 1-10 scale
  flexibility: number // 1-10 scale
  focus: number // 1-10 scale
  pausedAt?: number
  totalPauses: number
}

export interface Progress {
  id: string
  userId: string
  poseId: string
  masteryLevel: number // 0-100
  firstAttempt: Date
  lastPracticed: Date
  totalPractices: number
  averageHoldTime: number
  personalBest: number
  notes: string[]
  improvements: string[]
}

export interface Challenge {
  id: string
  title: string
  description: string
  duration: number // days
  poses: string[]
  difficulty: string
  reward: string
  participants: number
  startDate: Date
  endDate: Date
  isActive: boolean
}

export interface UserChallenge {
  id: string
  userId: string
  challengeId: string
  startDate: Date
  currentDay: number
  completedDays: string[]
  isCompleted: boolean
  reward?: string
}

// Mock database - In production, use PostgreSQL/MongoDB
export const mockDatabase = {
  users: new Map<string, User>(),
  sessions: new Map<string, YogaSession>(),
  poses: new Map<string, YogaPose>(),
  userSessions: new Map<string, UserSession>(),
  progress: new Map<string, Progress>(),
  challenges: new Map<string, Challenge>(),
  userChallenges: new Map<string, UserChallenge>(),
}

// Database utility functions
export class DatabaseService {
  static async createUser(userData: Omit<User, "id" | "createdAt" | "updatedAt">): Promise<User> {
    const user: User = {
      ...userData,
      id: `user_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
      createdAt: new Date(),
      updatedAt: new Date(),
    }
    mockDatabase.users.set(user.id, user)
    return user
  }

static async getUserById(id: string): Promise<User | null> {
    return mockDatabase.users.get(id) || null
  }

static async getUserByEmail(email: string): Promise<User | null> {
    for (const user of mockDatabase.users.values()) {
      if (user.email === email) return user
    }
    return null
  }

static async updateUser(id: string, updates: Partial<User>): Promise<User | null> {
    const user = mockDatabase.users.get(id)
    if (!user) return null

const updatedUser = { ...user, ...updates, updatedAt: new Date() }
    mockDatabase.users.set(id, updatedUser)
    return updatedUser
  }

static async createSession(sessionData: Omit<YogaSession, "id" | "createdAt" | "updatedAt">): Promise<YogaSession> {
    const session: YogaSession = {
      ...sessionData,
      id: `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
      createdAt: new Date(),
      updatedAt: new Date(),
    }
    mockDatabase.sessions.set(session.id, session)
    return session
  }

static async getSessionById(id: string): Promise<YogaSession | null> {
    return mockDatabase.sessions.get(id) || null
  }

static async getAllSessions(): Promise<YogaSession[]> {
    return Array.from(mockDatabase.sessions.values())
  }

static async getSessionsByCategory(category: string): Promise<YogaSession[]> {
    return Array.from(mockDatabase.sessions.values()).filter((s) => s.category === category)
  }

static async getSessionsByLevel(level: string): Promise<YogaSession[]> {
    return Array.from(mockDatabase.sessions.values()).filter((s) => s.level === level)
  }

static async createUserSession(sessionData: Omit<UserSession, "id">): Promise<UserSession> {
    const userSession: UserSession = {
      ...sessionData,
      id: `user_session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
    }
    mockDatabase.userSessions.set(userSession.id, userSession)
    return userSession
  }

static async updateUserSession(id: string, updates: Partial<UserSession>): Promise<UserSession | null> {
    const session = mockDatabase.userSessions.get(id)
    if (!session) return null

const updatedSession = { ...session, ...updates }
    mockDatabase.userSessions.set(id, updatedSession)
    return updatedSession
  }

static async getUserSessions(userId: string): Promise<UserSession[]> {
    return Array.from(mockDatabase.userSessions.values()).filter((s) => s.userId === userId)
  }

static async updateProgress(userId: string, poseId: string, updates: Partial<Progress>): Promise<Progress> {
    const progressId = `${userId}_${poseId}`
    const existing = mockDatabase.progress.get(progressId)

const progress: Progress = existing
      ? { ...existing, ...updates }
      : {
          id: progressId,
          userId,
          poseId,
          masteryLevel: 0,
          firstAttempt: new Date(),
          lastPracticed: new Date(),
          totalPractices: 0,
          averageHoldTime: 0,
          personalBest: 0,
          notes: [],
          improvements: [],
          ...updates,
        }

mockDatabase.progress.set(progressId, progress)
    return progress
  }

static async getUserProgress(userId: string): Promise<Progress[]> {
    return Array.from(mockDatabase.progress.values()).filter((p) => p.userId === userId)
  }
}
[V0_FILE]typescriptreact:file="app/api/yoga/sessions/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"

// Get all yoga sessions with filtering
export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const category = searchParams.get("category")
  const level = searchParams.get("level")
  const duration = searchParams.get("duration")
  const search = searchParams.get("search")
  const limit = Number.parseInt(searchParams.get("limit") || "20")
  const offset = Number.parseInt(searchParams.get("offset") || "0")

try {
    let sessions = await DatabaseService.getAllSessions()

// Apply filters
    if (category && category !== "all") {
      sessions = sessions.filter((s) => s.category.toLowerCase() === category.toLowerCase())
    }

if (level && level !== "all") {
      sessions = sessions.filter((s) => s.level === level)
    }

if (duration) {
      const [min, max] = duration.split("-").map(Number)
      sessions = sessions.filter((s) => s.duration >= min && (!max || s.duration <= max))
    }

if (search) {
      const searchLower = search.toLowerCase()
      sessions = sessions.filter(
        (s) =>
          s.title.toLowerCase().includes(searchLower) ||
          s.description.toLowerCase().includes(searchLower) ||
          s.tags.some((tag) => tag.toLowerCase().includes(searchLower)),
      )
    }

// Sort by rating and popularity
    sessions.sort((a, b) => {
      if (a.rating !== b.rating) return b.rating - a.rating
      return b.totalRatings - a.totalRatings
    })

// Pagination
    const paginatedSessions = sessions.slice(offset, offset + limit)

return NextResponse.json({
      sessions: paginatedSessions,
      total: sessions.length,
      hasMore: offset + limit < sessions.length,
    })
  } catch (error) {
    return NextResponse.json({ error: "Failed to fetch sessions" }, { status: 500 })
  }
}

// Create new yoga session
export async function POST(request: Request) {
  try {
    const sessionData = await request.json()

// Validate required fields
    if (!sessionData.title || !sessionData.poses || !sessionData.level) {
      return NextResponse.json({ error: "Missing required fields" }, { status: 400 })
    }

const session = await DatabaseService.createSession({
      ...sessionData,
      rating: 0,
      totalRatings: 0,
      isPublic: sessionData.isPublic ?? true,
      createdBy: sessionData.userId || "system",
    })

return NextResponse.json(session, { status: 201 })
  } catch (error) {
    return NextResponse.json({ error: "Failed to create session" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/yoga/sessions/[id]/start/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"

export async function POST(request: Request, { params }: { params: { id: string } }) {
  try {
    const { userId, mood, energy } = await request.json()

if (!userId) {
      return NextResponse.json({ error: "User ID required" }, { status: 400 })
    }

const session = await DatabaseService.getSessionById(params.id)
    if (!session) {
      return NextResponse.json({ error: "Session not found" }, { status: 404 })
    }

// Create user session
    const userSession = await DatabaseService.createUserSession({
      userId,
      sessionId: params.id,
      startTime: new Date(),
      completedPoses: [],
      currentPose: 0,
      mood: mood || "neutral",
      energy: energy || 5,
      flexibility: 5,
      focus: 5,
      totalPauses: 0,
    })

return NextResponse.json({
      userSessionId: userSession.id,
      session,
      startTime: userSession.startTime,
    })
  } catch (error) {
    return NextResponse.json({ error: "Failed to start session" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/yoga/sessions/[id]/complete/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"

export async function POST(request: Request, { params }: { params: { id: string } }) {
  try {
    const { userSessionId, rating, notes, completedPoses, finalMood, finalEnergy, finalFlexibility, finalFocus } =
      await request.json()

if (!userSessionId) {
      return NextResponse.json({ error: "User session ID required" }, { status: 400 })
    }

// Update user session
    const userSession = await DatabaseService.updateUserSession(userSessionId, {
      endTime: new Date(),
      rating,
      notes,
      completedPoses,
      mood: finalMood,
      energy: finalEnergy,
      flexibility: finalFlexibility,
      focus: finalFocus,
    })

if (!userSession) {
      return NextResponse.json({ error: "User session not found" }, { status: 404 })
    }

// Update user stats
    const user = await DatabaseService.getUserById(userSession.userId)
    if (user) {
      const sessionDuration =
        userSession.endTime && userSession.startTime
          ? Math.round((userSession.endTime.getTime() - userSession.startTime.getTime()) / 60000)
          : 0

const updatedStats = {
        ...user.stats,
        totalSessions: user.stats.totalSessions + 1,
        totalMinutes: user.stats.totalMinutes + sessionDuration,
        lastSessionDate: new Date(),
        // Update streak logic
        currentStreak: isConsecutiveDay(user.stats.lastSessionDate) ? user.stats.currentStreak + 1 : 1,
        longestStreak: Math.max(user.stats.longestStreak, user.stats.currentStreak + 1),
      }

if (rating) {
        updatedStats.averageSessionRating =
          (user.stats.averageSessionRating * (user.stats.totalSessions - 1) + rating) / user.stats.totalSessions
      }

await DatabaseService.updateUser(userSession.userId, { stats: updatedStats })
    }

// Update progress for each completed pose
    for (const poseId of completedPoses) {
      await DatabaseService.updateProgress(userSession.userId, poseId, {
        lastPracticed: new Date(),
        totalPractices: 1, // This would be incremented in real implementation
        masteryLevel: Math.min(100, 10), // Increment mastery
      })
    }

return NextResponse.json({
      success: true,
      userSession,
      message: "Session completed successfully!",
    })
  } catch (error) {
    return NextResponse.json({ error: "Failed to complete session" }, { status: 500 })
  }
}

function isConsecutiveDay(lastDate: Date): boolean {
  const today = new Date()
  const yesterday = new Date(today)
  yesterday.setDate(yesterday.getDate() - 1)

const lastDateOnly = new Date(lastDate.getFullYear(), lastDate.getMonth(), lastDate.getDate())
  const yesterdayOnly = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate())

return lastDateOnly.getTime() === yesterdayOnly.getTime()
}
[V0_FILE]typescriptreact:file="app/api/yoga/poses/route.ts" isMerged="true"
import { NextResponse } from "next/server"

// Comprehensive yoga poses database
const yogaPosesDatabase = [
  {
    id: "mountain-pose",
    name: "Mountain Pose",
    sanskrit: "Tadasana",
    duration: 60,
    instructions: [
      "Stand with feet hip-width apart, toes pointing forward",
      "Distribute weight evenly on both feet",
      "Engage leg muscles and lift kneecaps",
      "Lengthen spine and lift crown of head",
      "Relax shoulders away from ears",
      "Let arms hang naturally at sides",
      "Breathe deeply and feel grounded",
    ],
    benefits: [
      "Improves posture and body awareness",
      "Strengthens legs and core",
      "Calms the mind and reduces anxiety",
      "Enhances balance and stability",
      "Prepares body for other poses",
    ],
    precautions: [
      "Avoid if you have severe balance issues",
      "Keep micro-bend in knees to protect joints",
      "Don't lock knees completely",
    ],
    breathing: "Take slow, deep breaths. Inhale to lengthen spine, exhale to ground through feet.",
    visualization: "Imagine roots growing from your feet into the earth while your head reaches toward the sky.",
    difficulty: "beginner",
    category: "Standing",
    muscleGroups: ["legs", "core", "back"],
    contraindications: ["severe balance disorders"],
    modifications: ["Use wall support if needed", "Sit in chair for seated version"],
    alignment: [
      {
        bodyPart: "feet",
        instruction: "Hip-width apart, parallel",
        commonMistakes: ["Feet too wide", "Toes turned out"],
      },
      {
        bodyPart: "spine",
        instruction: "Long and neutral",
        commonMistakes: ["Arching back", "Slouching forward"],
      },
    ],
    energyLevel: "neutral",
  },
  {
    id: "downward-dog",
    name: "Downward Facing Dog",
    sanskrit: "Adho Mukha Svanasana",
    duration: 90,
    instructions: [
      "Start on hands and knees in tabletop",
      "Tuck toes under and lift hips up",
      "Straighten legs as much as comfortable",
      "Press firmly through hands",
      "Create inverted V-shape with body",
      "Pedal feet to warm up calves",
      "Hold and breathe deeply",
    ],
    benefits: [
      "Stretches hamstrings and calves",
      "Strengthens arms and shoulders",
      "Calms nervous system",
      "Energizes the body",
      "Improves circulation",
    ],
    precautions: [
      "Bend knees if hamstrings are tight",
      "Come to forearms if wrists hurt",
      "Avoid if you have high blood pressure",
      "Don't force straight legs",
    ],
    breathing: "Long, steady breaths. Let each exhale help you settle deeper.",
    visualization: "Imagine you're a dog stretching after a nap - feel the length through your spine.",
    difficulty: "beginner",
    category: "Inversion",
    muscleGroups: ["arms", "shoulders", "legs", "core"],
    contraindications: ["wrist injuries", "high blood pressure", "late pregnancy"],
    modifications: ["Use blocks under hands", "Bend knees", "Forearm variation"],
    alignment: [
      {
        bodyPart: "hands",
        instruction: "Shoulder-width apart, fingers spread",
        commonMistakes: ["Hands too close", "Weight on wrists"],
      },
      {
        bodyPart: "spine",
        instruction: "Long line from hands to tailbone",
        commonMistakes: ["Rounded back", "Sagging belly"],
      },
    ],
    energyLevel: "energizing",
  },
  {
    id: "warrior-1",
    name: "Warrior I",
    sanskrit: "Virabhadrasana I",
    duration: 60,
    instructions: [
      "Step left foot back 3-4 feet",
      "Turn left foot out 45 degrees",
      "Bend right knee over ankle",
      "Square hips toward front",
      "Sweep arms up overhead",
      "Hold, then switch sides",
    ],
    benefits: [
      "Strengthens legs and glutes",
      "Opens hip flexors",
      "Improves balance and focus",
      "Builds confidence and determination",
      "Stretches chest and shoulders",
    ],
    precautions: [
      "Don't let front knee go past ankle",
      "Modify arm position if shoulders are tight",
      "Use block under front thigh if needed",
    ],
    breathing: "Deep belly breaths. Use exhales to sink deeper into pose.",
    visualization: "Stand like a peaceful warrior - strong in legs, open in heart.",
    difficulty: "beginner",
    category: "Standing",
    muscleGroups: ["legs", "glutes", "core", "shoulders"],
    contraindications: ["knee injuries", "high blood pressure"],
    modifications: ["Hands on hips", "Use wall for support", "Shorter stance"],
    alignment: [
      {
        bodyPart: "front knee",
        instruction: "Directly over ankle",
        commonMistakes: ["Knee past ankle", "Knee caving inward"],
      },
      {
        bodyPart: "hips",
        instruction: "Square to front of mat",
        commonMistakes: ["Hip opened to side", "Uneven hips"],
      },
    ],
    energyLevel: "energizing",
  },
  {
    id: "childs-pose",
    name: "Child's Pose",
    sanskrit: "Balasana",
    duration: 120,
    instructions: [
      "Kneel with big toes touching",
      "Sit back on heels",
      "Open knees hip-width apart",
      "Fold forward, forehead to mat",
      "Extend arms forward or rest by sides",
      "Breathe into back ribs",
      "Stay as long as feels good",
    ],
    benefits: [
      "Deeply relaxes body and mind",
      "Stretches hips, thighs, and ankles",
      "Relieves stress and anxiety",
      "Calms nervous system",
      "Aids digestion",
    ],
    precautions: [
      "Place pillow under knees if uncomfortable",
      "Turn head to side if neck is stiff",
      "Avoid if pregnant (modify with wide knees)",
    ],
    breathing: "Breathe into back ribs. Feel breath massaging internal organs.",
    visualization: "Feel like a child - safe, protected, completely at ease.",
    difficulty: "beginner",
    category: "Restorative",
    muscleGroups: ["hips", "back", "shoulders"],
    contraindications: ["knee injuries", "pregnancy (modify)"],
    modifications: ["Pillow between calves and thighs", "Fists under forehead", "Arms by sides"],
    alignment: [
      {
        bodyPart: "knees",
        instruction: "Hip-width apart or wider",
        commonMistakes: ["Knees too close together"],
      },
      {
        bodyPart: "spine",
        instruction: "Long and relaxed",
        commonMistakes: ["Forcing forehead down"],
      },
    ],
    energyLevel: "calming",
  },
  {
    id: "cat-cow",
    name: "Cat-Cow Stretch",
    sanskrit: "Marjaryasana-Bitilasana",
    duration: 90,
    instructions: [
      "Start in tabletop position",
      "Align wrists under shoulders, knees under hips",
      "Inhale, arch back and look up (Cow)",
      "Exhale, round spine and tuck chin (Cat)",
      "Continue flowing between poses",
      "Move slowly with breath",
      "Feel massage along entire spine",
    ],
    benefits: [
      "Improves spinal flexibility",
      "Relieves back and neck tension",
      "Massages internal organs",
      "Calms the mind",
      "Warms up the spine",
    ],
    precautions: [
      "Place blanket under knees if sensitive",
      "Keep movements gentle and controlled",
      "Don't force the arch or rounding",
    ],
    breathing: "Inhale for Cow (heart opening), exhale for Cat (spine rounding).",
    visualization: "Move like a cat stretching - fluid, graceful, present in your body.",
    difficulty: "beginner",
    category: "Warm-up",
    muscleGroups: ["spine", "core", "shoulders"],
    contraindications: ["severe back injuries"],
    modifications: ["Smaller range of motion", "Seated version in chair"],
    alignment: [
      {
        bodyPart: "wrists",
        instruction: "Directly under shoulders",
        commonMistakes: ["Wrists too far forward"],
      },
      {
        bodyPart: "movement",
        instruction: "Initiate from tailbone",
        commonMistakes: ["Moving only neck", "Rushing the movement"],
      },
    ],
    energyLevel: "neutral",
  },
]

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const category = searchParams.get("category")
  const difficulty = searchParams.get("difficulty")
  const search = searchParams.get("search")
  const muscleGroup = searchParams.get("muscleGroup")

let poses = [...yogaPosesDatabase]

// Apply filters
  if (category && category !== "all") {
    poses = poses.filter((p) => p.category.toLowerCase() === category.toLowerCase())
  }

if (difficulty && difficulty !== "all") {
    poses = poses.filter((p) => p.difficulty === difficulty)
  }

if (muscleGroup) {
    poses = poses.filter((p) => p.muscleGroups.includes(muscleGroup))
  }

if (search) {
    const searchLower = search.toLowerCase()
    poses = poses.filter(
      (p) =>
        p.name.toLowerCase().includes(searchLower) ||
        p.sanskrit.toLowerCase().includes(searchLower) ||
        p.benefits.some((b) => b.toLowerCase().includes(searchLower)),
    )
  }

return NextResponse.json(poses)
}

export async function POST(request: Request) {
  try {
    const poseData = await request.json()

const newPose = {
      ...poseData,
      id: `pose_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
    }

// In real app, save to database
    yogaPosesDatabase.push(newPose)

return NextResponse.json(newPose, { status: 201 })
  } catch (error) {
    return NextResponse.json({ error: "Failed to create pose" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/yoga/progress/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const userId = searchParams.get("userId")

if (!userId) {
    return NextResponse.json({ error: "User ID required" }, { status: 400 })
  }

try {
    const progress = await DatabaseService.getUserProgress(userId)
    const userSessions = await DatabaseService.getUserSessions(userId)

// Calculate analytics
    const analytics = {
      totalSessions: userSessions.length,
      completedSessions: userSessions.filter((s) => s.endTime).length,
      totalMinutes: userSessions.reduce((sum, s) => {
        if (s.endTime && s.startTime) {
          return sum + Math.round((s.endTime.getTime() - s.startTime.getTime()) / 60000)
        }
        return sum
      }, 0),
      averageRating: userSessions
        .filter((s) => s.rating)
        .reduce((sum, s, _, arr) => sum + (s.rating || 0) / arr.length, 0),
      favoriteCategory: getMostFrequentCategory(userSessions),
      currentStreak: calculateStreak(userSessions),
      weeklyProgress: getWeeklyProgress(userSessions),
      monthlyProgress: getMonthlyProgress(userSessions),
      posesMastered: progress.filter((p) => p.masteryLevel >= 80).length,
      improvementAreas: getImprovementAreas(progress),
    }

return NextResponse.json({
      progress,
      analytics,
      recentSessions: userSessions.slice(-10).reverse(),
    })
  } catch (error) {
    return NextResponse.json({ error: "Failed to fetch progress" }, { status: 500 })
  }
}

function getMostFrequentCategory(sessions: any[]): string {
  const categories: { [key: string]: number } = {}
  sessions.forEach((session) => {
    // In real app, would join with session data
    const category = "Morning" // placeholder
    categories[category] = (categories[category] || 0) + 1
  })

return Object.keys(categories).reduce((a, b) => (categories[a] > categories[b] ? a : b), "Morning")
}

function calculateStreak(sessions: any[]): number {
  if (sessions.length === 0) return 0

const sortedSessions = sessions
    .filter((s) => s.endTime)
    .sort((a, b) => new Date(b.startTime).getTime() - new Date(a.startTime).getTime())

let streak = 0
  let currentDate = new Date()

for (const session of sortedSessions) {
    const sessionDate = new Date(session.startTime)
    const daysDiff = Math.floor((currentDate.getTime() - sessionDate.getTime()) / (1000 * 60 * 60 * 24))

if (daysDiff <= streak + 1) {
      streak++
      currentDate = sessionDate
    } else {
      break
    }
  }

return streak
}

function getWeeklyProgress(sessions: any[]): number[] {
  const weeklyData = new Array(7).fill(0)
  const oneWeekAgo = new Date()
  oneWeekAgo.setDate(oneWeekAgo.getDate() - 7)

sessions.forEach((session) => {
    const sessionDate = new Date(session.startTime)
    if (sessionDate >= oneWeekAgo) {
      const dayIndex = sessionDate.getDay()
      weeklyData[dayIndex]++
    }
  })

return weeklyData
}

function getMonthlyProgress(sessions: any[]): number[] {
  const monthlyData = new Array(30).fill(0)
  const oneMonthAgo = new Date()
  oneMonthAgo.setDate(oneMonthAgo.getDate() - 30)

sessions.forEach((session) => {
    const sessionDate = new Date(session.startTime)
    if (sessionDate >= oneMonthAgo) {
      const dayIndex = Math.floor((sessionDate.getTime() - oneMonthAgo.getTime()) / (1000 * 60 * 60 * 24))
      if (dayIndex >= 0 && dayIndex < 30) {
        monthlyData[dayIndex]++
      }
    }
  })

return monthlyData
}

function getImprovementAreas(progress: any[]): string[] {
  return progress
    .filter((p) => p.masteryLevel < 50)
    .sort((a, b) => a.masteryLevel - b.masteryLevel)
    .slice(0, 3)
    .map((p) => p.poseId)
}
[V0_FILE]typescriptreact:file="app/api/yoga/challenges/route.ts" isMerged="true"
import { NextResponse } from "next/server"

const challengesDatabase = [
  {
    id: "30-day-morning-flow",
    title: "30-Day Morning Flow Challenge",
    description: "Start each day with a energizing 15-minute yoga flow",
    duration: 30,
    poses: ["mountain-pose", "sun-salutation", "warrior-1", "downward-dog"],
    difficulty: "beginner",
    reward: "Morning Warrior Badge",
    participants: 1247,
    startDate: new Date("2024-01-01"),
    endDate: new Date("2024-01-31"),
    isActive: true,
    dailyGoal: "Complete one morning flow session",
    benefits: ["Increased energy", "Better mood", "Improved flexibility"],
    requirements: ["15 minutes daily", "Morning practice preferred"],
  },
  {
    id: "flexibility-focus",
    title: "Flexibility Focus Week",
    description: "7 days of deep stretching and flexibility-building poses",
    duration: 7,
    poses: ["forward-fold", "pigeon-pose", "seated-twist", "hip-opener"],
    difficulty: "intermediate",
    reward: "Flexibility Master Badge",
    participants: 892,
    startDate: new Date("2024-01-15"),
    endDate: new Date("2024-01-22"),
    isActive: true,
    dailyGoal: "Hold each pose for 2+ minutes",
    benefits: ["Increased flexibility", "Reduced tension", "Better mobility"],
    requirements: ["20 minutes daily", "Focus on deep stretching"],
  },
  {
    id: "stress-relief-journey",
    title: "21-Day Stress Relief Journey",
    description: "Reduce stress and anxiety with calming yoga practices",
    duration: 21,
    poses: ["childs-pose", "legs-up-wall", "gentle-twist", "savasana"],
    difficulty: "beginner",
    reward: "Zen Master Badge",
    participants: 2156,
    startDate: new Date("2024-01-01"),
    endDate: new Date("2024-01-21"),
    isActive: true,
    dailyGoal: "Complete one restorative session",
    benefits: ["Reduced stress", "Better sleep", "Mental clarity"],
    requirements: ["10-20 minutes daily", "Evening practice recommended"],
  },
]

export async function GET() {
  return NextResponse.json({
    challenges: challengesDatabase,
    featured: challengesDatabase.filter((c) => c.isActive).slice(0, 3),
  })
}

export async function POST(request: Request) {
  try {
    const { userId, challengeId } = await request.json()

if (!userId || !challengeId) {
      return NextResponse.json({ error: "Missing required fields" }, { status: 400 })
    }

const challenge = challengesDatabase.find((c) => c.id === challengeId)
    if (!challenge) {
      return NextResponse.json({ error: "Challenge not found" }, { status: 404 })
    }

// Create user challenge enrollment
    const userChallenge = {
      id: `user_challenge_${Date.now()}`,
      userId,
      challengeId,
      startDate: new Date(),
      currentDay: 1,
      completedDays: [],
      isCompleted: false,
    }

return NextResponse.json({
      success: true,
      userChallenge,
      message: `Successfully enrolled in ${challenge.title}!`,
    })
  } catch (error) {
    return NextResponse.json({ error: "Failed to join challenge" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/yoga/recommendations/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const userId = searchParams.get("userId")
  const mood = searchParams.get("mood")
  const timeAvailable = Number.parseInt(searchParams.get("timeAvailable") || "20")
  const experience = searchParams.get("experience") || "beginner"

try {
    let recommendations = []

if (userId) {
      // Personalized recommendations based on user history
      const userSessions = await DatabaseService.getUserSessions(userId)
      const userProgress = await DatabaseService.getUserProgress(userId)
      const user = await DatabaseService.getUserById(userId)

recommendations = await getPersonalizedRecommendations(user, userSessions, userProgress, {
        mood,
        timeAvailable,
        experience,
      })
    } else {
      // General recommendations
      recommendations = await getGeneralRecommendations({
        mood,
        timeAvailable,
        experience,
      })
    }

return NextResponse.json({
      recommendations,
      reasoning: getRecommendationReasoning(mood, timeAvailable, experience),
    })
  } catch (error) {
    return NextResponse.json({ error: "Failed to get recommendations" }, { status: 500 })
  }
}

async function getPersonalizedRecommendations(user: any, sessions: any[], progress: any[], filters: any) {
  const allSessions = await DatabaseService.getAllSessions()

// Analyze user preferences
  const preferredCategories = getPreferredCategories(sessions)
  const skillLevel = calculateSkillLevel(progress)
  const recentActivity = getRecentActivity(sessions)

let recommendations = allSessions.filter((session) => {
    // Filter by time available
    if (session.duration > filters.timeAvailable + 5) return false

// Match skill level
    if (skillLevel === "advanced" && session.level === "beginner") return false
    if (skillLevel === "beginner" && session.level === "advanced") return false

return true
  })

// Score recommendations
  recommendations = recommendations.map((session) => ({
    ...session,
    score: calculateRecommendationScore(session, {
      preferredCategories,
      skillLevel,
      recentActivity,
      mood: filters.mood,
      userPreferences: user?.preferences,
    }),
  }))

// Sort by score and return top 5
  return recommendations
    .sort((a, b) => b.score - a.score)
    .slice(0, 5)
    .map(({ score, ...session }) => ({
      ...session,
      recommendationReason: getRecommendationReason(session, filters.mood, skillLevel),
    }))
}

async function getGeneralRecommendations(filters: any) {
  const allSessions = await DatabaseService.getAllSessions()

let recommendations = allSessions.filter((session) => {
    if (session.duration > filters.timeAvailable + 5) return false
    if (session.level !== filters.experience && filters.experience !== "all") return false
    return true
  })

// Mood-based filtering
  if (filters.mood) {
    recommendations = recommendations.filter((session) => {
      switch (filters.mood) {
        case "stressed":
          return session.category === "Relaxation" || session.category === "Restorative"
        case "energized":
          return session.category === "Morning" || session.category === "Strength"
        case "tired":
          return session.category === "Gentle" || session.category === "Restorative"
        default:
          return true
      }
    })
  }

return recommendations.slice(0, 5).map((session) => ({
    ...session,
    recommendationReason: getRecommendationReason(session, filters.mood, filters.experience),
  }))
}

function getPreferredCategories(sessions: any[]): string[] {
  const categoryCount: { [key: string]: number } = {}
  sessions.forEach((session) => {
    // In real app, would join with session data to get category
    const category = "Morning" // placeholder
    categoryCount[category] = (categoryCount[category] || 0) + 1
  })

return Object.entries(categoryCount)
    .sort(([, a], [, b]) => b - a)
    .slice(0, 3)
    .map(([category]) => category)
}

function calculateSkillLevel(progress: any[]): string {
  if (progress.length === 0) return "beginner"

const averageMastery = progress.reduce((sum, p) => sum + p.masteryLevel, 0) / progress.length

if (averageMastery >= 70) return "advanced"
  if (averageMastery >= 40) return "intermediate"
  return "beginner"
}

function getRecentActivity(sessions: any[]): any {
  const recentSessions = sessions
    .filter((s) => s.endTime)
    .sort((a, b) => new Date(b.startTime).getTime() - new Date(a.startTime).getTime())
    .slice(0, 10)

return {
    frequency: recentSessions.length,
    averageRating: recentSessions.reduce((sum, s) => sum + (s.rating || 0), 0) / recentSessions.length,
    lastSession: recentSessions[0]?.startTime,
  }
}

function calculateRecommendationScore(session: any, factors: any): number {
  let score = session.rating * 10 // Base score from rating

// Boost for preferred categories
  if (factors.preferredCategories.includes(session.category)) {
    score += 20
  }

// Boost for appropriate skill level
  if (session.level === factors.skillLevel) {
    score += 15
  }

// Mood matching
  if (factors.mood === "stressed" && (session.category === "Relaxation" || session.category === "Restorative")) {
    score += 25
  }

// Recency penalty (avoid recommending recently completed sessions)
  if (factors.recentActivity.lastSession) {
    const daysSinceLastSession = Math.floor(
      (Date.now() - new Date(factors.recentActivity.lastSession).getTime()) / (1000 * 60 * 60 * 24),
    )
    if (daysSinceLastSession < 3) score -= 10
  }

return score
}

function getRecommendationReason(session: any, mood: string, skillLevel: string): string {
  const reasons = []

if (mood === "stressed" && (session.category === "Relaxation" || session.category === "Restorative")) {
    reasons.push("Perfect for stress relief")
  }

if (session.level === skillLevel) {
    reasons.push(`Matches your ${skillLevel} level`)
  }

if (session.rating >= 4.5) {
    reasons.push("Highly rated by users")
  }

if (session.duration <= 15) {
    reasons.push("Quick and effective")
  }

return reasons.join(" • ") || "Great choice for your practice"
}

function getRecommendationReasoning(mood: string, timeAvailable: number, experience: string): string {
  let reasoning = `Based on your ${experience} experience level and ${timeAvailable} minutes available`

if (mood) {
    reasoning += `, plus your current mood (${mood})`
  }

reasoning += ", here are personalized recommendations to enhance your practice."

return reasoning
}
[V0_FILE]typescriptreact:file="app/dashboard/yoga/page.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Clock, TrendingUp, Award, Target, Activity, BarChart3, Flame, Star, Play, Eye, BookOpen } from "lucide-react"
import { useState, useEffect } from "react"
import Link from "next/link"

interface YogaAnalytics {
  totalSessions: number
  completedSessions: number
  totalMinutes: number
  averageRating: number
  favoriteCategory: string
  currentStreak: number
  weeklyProgress: number[]
  monthlyProgress: number[]
  posesMastered: number
  improvementAreas: string[]
}

interface UserProgress {
  id: string
  poseId: string
  masteryLevel: number
  totalPractices: number
  lastPracticed: Date
}

export default function YogaDashboard() {
  const [analytics, setAnalytics] = useState<YogaAnalytics | null>(null)
  const [progress, setProgress] = useState<UserProgress[]>([])
  const [recommendations, setRecommendations] = useState<any[]>([])
  const [challenges, setChallenges] = useState<any[]>([])
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    fetchDashboardData()
  }, [])

const fetchDashboardData = async () => {
    try {
      // In real app, get userId from auth
      const userId = "user_123"

// Fetch analytics and progress
      const progressResponse = await fetch(`/api/yoga/progress?userId=${userId}`)
      const progressData = await progressResponse.json()

// Fetch recommendations
      const recommendationsResponse = await fetch(
        `/api/yoga/recommendations?userId=${userId}&mood=neutral&timeAvailable=20`,
      )
      const recommendationsData = await recommendationsResponse.json()

// Fetch challenges
      const challengesResponse = await fetch("/api/yoga/challenges")
      const challengesData = await challengesResponse.json()

setAnalytics(progressData.analytics)
      setProgress(progressData.progress)
      setRecommendations(recommendationsData.recommendations)
      setChallenges(challengesData.featured)
    } catch (error) {
      console.error("Error fetching dashboard data:", error)
    } finally {
      setIsLoading(false)
    }
  }

if (isLoading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-green-50 to-teal-50 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-green-500 mx-auto"></div>
          <p className="mt-4 text-gray-600">Loading your yoga journey...</p>
        </div>
      </div>
    )
  }

const weekDays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]

return (
    <div className="min-h-screen bg-gradient-to-br from-green-50 to-teal-50">
      <div className="max-w-7xl mx-auto p-4">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900">Your Yoga Journey</h1>
          <p className="text-gray-600 mt-2">
            Track your progress, discover new practices, and achieve your wellness goals
          </p>
        </div>

<div className="grid lg:grid-cols-4 gap-6">
          {/* Main Content */}
          <div className="lg:col-span-3 space-y-6">
            {/* Key Stats */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <Card>
                <CardContent className="p-4 text-center">
                  <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2">
                    <Activity className="w-6 h-6 text-green-600" />
                  </div>
                  <div className="text-2xl font-bold text-gray-900">{analytics?.totalSessions || 0}</div>
                  <div className="text-sm text-gray-600">Total Sessions</div>
                </CardContent>
              </Card>

<Card>
                <CardContent className="p-4 text-center">
                  <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-2">
                    <Clock className="w-6 h-6 text-blue-600" />
                  </div>
                  <div className="text-2xl font-bold text-gray-900">{analytics?.totalMinutes || 0}</div>
                  <div className="text-sm text-gray-600">Minutes Practiced</div>
                </CardContent>
              </Card>

<Card>
                <CardContent className="p-4 text-center">
                  <div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-2">
                    <Flame className="w-6 h-6 text-orange-600" />
                  </div>
                  <div className="text-2xl font-bold text-gray-900">{analytics?.currentStreak || 0}</div>
                  <div className="text-sm text-gray-600">Day Streak</div>
                </CardContent>
              </Card>

<Card>
                <CardContent className="p-4 text-center">
                  <div className="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-2">
                    <Award className="w-6 h-6 text-purple-600" />
                  </div>
                  <div className="text-2xl font-bold text-gray-900">{analytics?.posesMastered || 0}</div>
                  <div className="text-sm text-gray-600">Poses Mastered</div>
                </CardContent>
              </Card>
            </div>

{/* Weekly Progress */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <BarChart3 className="w-5 h-5" />
                  <span>This Week's Practice</span>
                </CardTitle>
                <CardDescription>Your daily yoga sessions this week</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-7 gap-2">
                  {weekDays.map((day, index) => (
                    <div key={day} className="text-center">
                      <div className="text-sm font-medium text-gray-600 mb-2">{day}</div>
                      <div
                        className={`h-16 rounded-lg flex items-end justify-center ${
                          (analytics?.weeklyProgress[index] || 0) > 0
                            ? "bg-gradient-to-t from-green-500 to-green-300"
                            : "bg-gray-100"
                        }`}
                      >
                        <span className="text-white text-xs font-semibold mb-1">
                          {analytics?.weeklyProgress[index] || 0}
                        </span>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

{/* Progress Overview */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <TrendingUp className="w-5 h-5" />
                  <span>Pose Mastery Progress</span>
                </CardTitle>
                <CardDescription>Your improvement in different yoga poses</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {progress.slice(0, 5).map((pose) => (
                    <div key={pose.id} className="space-y-2">
                      <div className="flex items-center justify-between">
                        <span className="font-medium">
                          {pose.poseId.replace("-", " ").replace(/\b\w/g, (l) => l.toUpperCase())}
                        </span>
                        <span className="text-sm text-gray-600">{pose.masteryLevel}% mastered</span>
                      </div>
                      <Progress value={pose.masteryLevel} className="h-2" />
                      <div className="flex items-center justify-between text-xs text-gray-500">
                        <span>{pose.totalPractices} practices</span>
                        <span>Last: {new Date(pose.lastPracticed).toLocaleDateString()}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

{/* Personalized Recommendations */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Target className="w-5 h-5" />
                  <span>Recommended for You</span>
                </CardTitle>
                <CardDescription>Personalized sessions based on your practice history</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid md:grid-cols-2 gap-4">
                  {recommendations.slice(0, 4).map((session) => (
                    <div key={session.id} className="border rounded-lg p-4 hover:shadow-md transition-shadow">
                      <div className="flex items-start justify-between mb-2">
                        <h4 className="font-semibold text-green-700">{session.title}</h4>
                        <Badge variant="outline">{session.level}</Badge>
                      </div>
                      <p className="text-sm text-gray-600 mb-3">{session.description}</p>
                      <div className="flex items-center justify-between text-xs text-gray-500 mb-3">
                        <span>{session.duration} mins</span>
                        <div className="flex items-center space-x-1">
                          <Star className="w-3 h-3 text-yellow-500" />
                          <span>{session.rating}</span>
                        </div>
                      </div>
                      {session.recommendationReason && (
                        <p className="text-xs text-purple-600 mb-3">💡 {session.recommendationReason}</p>
                      )}
                      <Link href={`/yoga/session/${session.id}`}>
                        <Button size="sm" className="w-full bg-gradient-to-r from-green-500 to-teal-500">
                          <Play className="w-3 h-3 mr-1" />
                          Start Session
                        </Button>
                      </Link>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>

{/* Sidebar */}
          <div className="space-y-6">
            {/* Quick Actions */}
            <Card>
              <CardHeader>
                <CardTitle>Quick Actions</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <Link href="/yoga">
                  <Button className="w-full bg-gradient-to-r from-green-500 to-teal-500">
                    <Play className="w-4 h-4 mr-2" />
                    Start Practice
                  </Button>
                </Link>
                <Link href="/yoga/poses">
                  <Button variant="outline" className="w-full bg-transparent">
                    <Eye className="w-4 h-4 mr-2" />
                    3D Pose Library
                  </Button>
                </Link>
                <Link href="/chat">
                  <Button variant="outline" className="w-full bg-transparent">
                    <BookOpen className="w-4 h-4 mr-2" />
                    Ask AI Guide
                  </Button>
                </Link>
              </CardContent>
            </Card>

{/* Current Challenges */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Award className="w-5 h-5" />
                  <span>Active Challenges</span>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                {challenges.map((challenge) => (
                  <div key={challenge.id} className="border rounded-lg p-3">
                    <h4 className="font-semibold text-sm mb-1">{challenge.title}</h4>
                    <p className="text-xs text-gray-600 mb-2">{challenge.description}</p>
                    <div className="flex items-center justify-between text-xs">
                      <span>{challenge.duration} days</span>
                      <Badge variant="outline" className="text-xs">
                        {challenge.difficulty}
                      </Badge>
                    </div>
                    <Progress value={30} className="h-1 mt-2" />
                    <p className="text-xs text-gray-500 mt-1">Day 9 of {challenge.duration}</p>
                  </div>
                ))}
                <Button variant="outline" size="sm" className="w-full bg-transparent">
                  View All Challenges
                </Button>
              </CardContent>
            </Card>

{/* Achievement Badges */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Award className="w-5 h-5" />
                  <span>Recent Achievements</span>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="flex items-center space-x-3 p-2 bg-yellow-50 rounded-lg">
                  <div className="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center">
                    <Flame className="w-4 h-4 text-white" />
                  </div>
                  <div>
                    <p className="text-sm font-semibold">7-Day Streak</p>
                    <p className="text-xs text-gray-600">Keep it up!</p>
                  </div>
                </div>

<div className="flex items-center space-x-3 p-2 bg-green-50 rounded-lg">
                  <div className="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
                    <Target className="w-4 h-4 text-white" />
                  </div>
                  <div>
                    <p className="text-sm font-semibold">Pose Master</p>
                    <p className="text-xs text-gray-600">Mastered 5 poses</p>
                  </div>
                </div>

<div className="flex items-center space-x-3 p-2 bg-purple-50 rounded-lg">
                  <div className="w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center">
                    <Clock className="w-4 h-4 text-white" />
                  </div>
                  <div>
                    <p className="text-sm font-semibold">100 Minutes</p>
                    <p className="text-xs text-gray-600">This week</p>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Improvement Areas */}
            <Card>
              <CardHeader>
                <CardTitle>Focus Areas</CardTitle>
                <CardDescription>Poses to work on</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  {analytics?.improvementAreas.slice(0, 3).map((poseId) => (
                    <div key={poseId} className="flex items-center justify-between p-2 bg-orange-50 rounded">
                      <span className="text-sm font-medium">
                        {poseId.replace("-", " ").replace(/\b\w/g, (l) => l.toUpperCase())}
                      </span>
                      <Button size="sm" variant="outline" className="text-xs bg-transparent">
                        Practice
                      </Button>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/yoga/sessions/[id]/pause/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"

export async function POST(request: Request, { params }: { params: { id: string } }) {
  try {
    const { userSessionId, pausedAt } = await request.json()

if (!userSessionId) {
      return NextResponse.json({ error: "User session ID required" }, { status: 400 })
    }

const userSession = await DatabaseService.updateUserSession(userSessionId, {
      pausedAt,
      totalPauses: 1, // In real implementation, increment existing count
    })

if (!userSession) {
      return NextResponse.json({ error: "User session not found" }, { status: 404 })
    }

return NextResponse.json({
      success: true,
      message: "Session paused",
      pausedAt: userSession.pausedAt,
    })
  } catch (error) {
    return NextResponse.json({ error: "Failed to pause session" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/yoga/sessions/[id]/resume/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"

export async function POST(request: Request, { params }: { params: { id: string } }) {
  try {
    const { userSessionId } = await request.json()

if (!userSessionId) {
      return NextResponse.json({ error: "User session ID required" }, { status: 400 })
    }

const userSession = await DatabaseService.updateUserSession(userSessionId, {
      pausedAt: undefined, // Clear pause timestamp
    })

if (!userSession) {
      return NextResponse.json({ error: "User session not found" }, { status: 404 })
    }

return NextResponse.json({
      success: true,
      message: "Session resumed",
      resumedAt: new Date(),
    })
  } catch (error) {
    return NextResponse.json({ error: "Failed to resume session" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/yoga/sessions/[id]/rate/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"

export async function POST(request: Request, { params }: { params: { id: string } }) {
  try {
    const { userSessionId, rating, feedback } = await request.json()

if (!userSessionId || !rating) {
      return NextResponse.json({ error: "User session ID and rating required" }, { status: 400 })
    }

if (rating < 1 || rating > 5) {
      return NextResponse.json({ error: "Rating must be between 1 and 5" }, { status: 400 })
    }

// Update user session with rating
    const userSession = await DatabaseService.updateUserSession(userSessionId, {
      rating,
      notes: feedback,
    })

if (!userSession) {
      return NextResponse.json({ error: "User session not found" }, { status: 404 })
    }

// Update session's overall rating
    const session = await DatabaseService.getSessionById(params.id)
    if (session) {
      const newTotalRatings = session.totalRatings + 1
      const newRating = (session.rating * session.totalRatings + rating) / newTotalRatings

// In real implementation, update the session in database
      console.log(`Updated session ${params.id} rating to ${newRating}`)
    }

return NextResponse.json({
      success: true,
      message: "Rating submitted successfully",
      rating: userSession.rating,
    })
  } catch (error) {
    return NextResponse.json({ error: "Failed to submit rating" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/yoga/analytics/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const userId = searchParams.get("userId")
  const timeframe = searchParams.get("timeframe") || "30d" // 7d, 30d, 90d, 1y

if (!userId) {
    return NextResponse.json({ error: "User ID required" }, { status: 400 })
  }

try {
    const userSessions = await DatabaseService.getUserSessions(userId)
    const userProgress = await DatabaseService.getUserProgress(userId)
    const user = await DatabaseService.getUserById(userId)

// Calculate timeframe
    const now = new Date()
    const timeframeStart = new Date()

switch (timeframe) {
      case "7d":
        timeframeStart.setDate(now.getDate() - 7)
        break
      case "30d":
        timeframeStart.setDate(now.getDate() - 30)
        break
      case "90d":
        timeframeStart.setDate(now.getDate() - 90)
        break
      case "1y":
        timeframeStart.setFullYear(now.getFullYear() - 1)
        break
    }

const filteredSessions = userSessions.filter((session) => new Date(session.startTime) >= timeframeStart)

// Calculate comprehensive analytics
    const analytics = {
      overview: {
        totalSessions: filteredSessions.length,
        completedSessions: filteredSessions.filter((s) => s.endTime).length,
        totalMinutes: calculateTotalMinutes(filteredSessions),
        averageSessionLength: calculateAverageSessionLength(filteredSessions),
        completionRate: calculateCompletionRate(filteredSessions),
        averageRating: calculateAverageRating(filteredSessions),
      },

streaks: {
        current: calculateCurrentStreak(userSessions),
        longest: user?.stats.longestStreak || 0,
        streakHistory: calculateStreakHistory(userSessions, timeframe),
      },

progress: {
        posesMastered: userProgress.filter((p) => p.masteryLevel >= 80).length,
        posesInProgress: userProgress.filter((p) => p.masteryLevel >= 20 && p.masteryLevel < 80).length,
        averageMasteryLevel: calculateAverageMastery(userProgress),
        improvementRate: calculateImprovementRate(userProgress, timeframe),
      },

patterns: {
        favoriteTimeOfDay: calculateFavoriteTimeOfDay(filteredSessions),
        favoriteCategory: calculateFavoriteCategory(filteredSessions),
        averageSessionsPerWeek: calculateSessionsPerWeek(filteredSessions, timeframe),
        mostProductiveDays: calculateMostProductiveDays(filteredSessions),
      },

wellness: {
        moodTrends: calculateMoodTrends(filteredSessions),
        energyTrends: calculateEnergyTrends(filteredSessions),
        stressReduction: calculateStressReduction(filteredSessions),
        flexibilityImprovement: calculateFlexibilityImprovement(filteredSessions),
      },

goals: {
        weeklyGoalProgress: calculateWeeklyGoalProgress(filteredSessions),
        monthlyGoalProgress: calculateMonthlyGoalProgress(filteredSessions),
        yearlyGoalProgress: calculateYearlyGoalProgress(userSessions),
        personalBests: calculatePersonalBests(userProgress),
      },
    }

return NextResponse.json(analytics)
  } catch (error) {
    return NextResponse.json({ error: "Failed to fetch analytics" }, { status: 500 })
  }
}

// Helper functions for analytics calculations
function calculateTotalMinutes(sessions: any[]): number {
  return sessions.reduce((total, session) => {
    if (session.endTime && session.startTime) {
      const duration = Math.round((new Date(session.endTime).getTime() - new Date(session.startTime).getTime()) / 60000)
      return total + duration
    }
    return total
  }, 0)
}

function calculateAverageSessionLength(sessions: any[]): number {
  const completedSessions = sessions.filter((s) => s.endTime && s.startTime)
  if (completedSessions.length === 0) return 0

const totalMinutes = calculateTotalMinutes(completedSessions)
  return Math.round(totalMinutes / completedSessions.length)
}

function calculateCompletionRate(sessions: any[]): number {
  if (sessions.length === 0) return 0
  const completed = sessions.filter((s) => s.endTime).length
  return Math.round((completed / sessions.length) * 100)
}

function calculateAverageRating(sessions: any[]): number {
  const ratedSessions = sessions.filter((s) => s.rating)
  if (ratedSessions.length === 0) return 0

const totalRating = ratedSessions.reduce((sum, s) => sum + s.rating, 0)
  return Math.round((totalRating / ratedSessions.length) * 10) / 10
}

function calculateCurrentStreak(sessions: any[]): number {
  const completedSessions = sessions
    .filter((s) => s.endTime)
    .sort((a, b) => new Date(b.startTime).getTime() - new Date(a.startTime).getTime())

if (completedSessions.length === 0) return 0

let streak = 0
  let currentDate = new Date()
  currentDate.setHours(0, 0, 0, 0)

for (const session of completedSessions) {
    const sessionDate = new Date(session.startTime)
    sessionDate.setHours(0, 0, 0, 0)

const daysDiff = Math.floor((currentDate.getTime() - sessionDate.getTime()) / (1000 * 60 * 60 * 24))

if (daysDiff === streak) {
      streak++
      currentDate = sessionDate
    } else if (daysDiff === streak + 1) {
      // Allow for one day gap
      streak++
      currentDate = sessionDate
    } else {
      break
    }
  }

return streak
}

function calculateStreakHistory(sessions: any[], timeframe: string): number[] {
  // Return daily streak data for the timeframe
  const days = timeframe === "7d" ? 7 : timeframe === "30d" ? 30 : 90
  const streakData = new Array(days).fill(0)

const now = new Date()
  sessions.forEach((session) => {
    if (session.endTime) {
      const sessionDate = new Date(session.startTime)
      const daysDiff = Math.floor((now.getTime() - sessionDate.getTime()) / (1000 * 60 * 60 * 24))

if (daysDiff >= 0 && daysDiff < days) {
        streakData[days - 1 - daysDiff] = 1
      }
    }
  })

return streakData
}

function calculateAverageMastery(progress: any[]): number {
  if (progress.length === 0) return 0
  const totalMastery = progress.reduce((sum, p) => sum + p.masteryLevel, 0)
  return Math.round(totalMastery / progress.length)
}

function calculateImprovementRate(progress: any[], timeframe: string): number {
  // Calculate improvement rate based on mastery level changes
  // This would require historical data in a real implementation
  return Math.random() * 20 + 5 // Placeholder: 5-25% improvement
}

function calculateFavoriteTimeOfDay(sessions: any[]): string {
  const timeSlots = { morning: 0, afternoon: 0, evening: 0, night: 0 }

sessions.forEach((session) => {
    const hour = new Date(session.startTime).getHours()
    if (hour >= 5 && hour < 12) timeSlots.morning++
    else if (hour >= 12 && hour < 17) timeSlots.afternoon++
    else if (hour >= 17 && hour < 22) timeSlots.evening++
    else timeSlots.night++
  })

return Object.keys(timeSlots).reduce((a, b) => (timeSlots[a] > timeSlots[b] ? a : b))
}

function calculateFavoriteCategory(sessions: any[]): string {
  // In real implementation, would join with session data
  return "Morning Flow" // Placeholder
}

function calculateSessionsPerWeek(sessions: any[], timeframe: string): number {
  const weeks = timeframe === "7d" ? 1 : timeframe === "30d" ? 4 : 12
  return Math.round(sessions.length / weeks)
}

function calculateMostProductiveDays(sessions: any[]): string[] {
  const dayCount = { 0: 0, 1: 0, 2: 0, 3: 0, 4: 0, 5: 0, 6: 0 }
  const dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

sessions.forEach((session) => {
    const day = new Date(session.startTime).getDay()
    dayCount[day]++
  })

return Object.entries(dayCount)
    .sort(([, a], [, b]) => b - a)
    .slice(0, 3)
    .map(([day]) => dayNames[Number.parseInt(day)])
}

function calculateMoodTrends(sessions: any[]): any {
  const moodData = { stressed: 0, neutral: 0, energized: 0, calm: 0 }

sessions.forEach((session) => {
    if (session.mood) {
      moodData[session.mood]++
    }
  })

return moodData
}

function calculateEnergyTrends(sessions: any[]): number[] {
  return sessions
    .filter((s) => s.energy)
    .map((s) => s.energy)
    .slice(-30) // Last 30 sessions
}

function calculateStressReduction(sessions: any[]): number {
  // Calculate average stress reduction based on before/after mood
  return Math.random() * 30 + 20 // Placeholder: 20-50% stress reduction
}

function calculateFlexibilityImprovement(sessions: any[]): number {
  const flexibilityScores = sessions.filter((s) => s.flexibility).map((s) => s.flexibility)

if (flexibilityScores.length < 2) return 0

const recent = flexibilityScores.slice(-10).reduce((a, b) => a + b, 0) / 10
  const earlier = flexibilityScores.slice(0, 10).reduce((a, b) => a + b, 0) / 10

return Math.round(((recent - earlier) / earlier) * 100)
}

function calculateWeeklyGoalProgress(sessions: any[]): number {
  const thisWeek = sessions.filter((session) => {
    const sessionDate = new Date(session.startTime)
    const weekStart = new Date()
    weekStart.setDate(weekStart.getDate() - weekStart.getDay())
    return sessionDate >= weekStart
  })

const weeklyGoal = 5 // 5 sessions per week
  return Math.min(100, Math.round((thisWeek.length / weeklyGoal) * 100))
}

function calculateMonthlyGoalProgress(sessions: any[]): number {
  const thisMonth = sessions.filter((session) => {
    const sessionDate = new Date(session.startTime)
    const now = new Date()
    return sessionDate.getMonth() === now.getMonth() && sessionDate.getFullYear() === now.getFullYear()
  })

const monthlyGoal = 20 // 20 sessions per month
  return Math.min(100, Math.round((thisMonth.length / monthlyGoal) * 100))
}

function calculateYearlyGoalProgress(sessions: any[]): number {
  const thisYear = sessions.filter((session) => {
    const sessionDate = new Date(session.startTime)
    const now = new Date()
    return sessionDate.getFullYear() === now.getFullYear()
  })

const yearlyGoal = 200 // 200 sessions per year
  return Math.min(100, Math.round((thisYear.length / yearlyGoal) * 100))
}

function calculatePersonalBests(progress: any[]): any {
  return {
    longestHold: Math.max(...progress.map((p) => p.personalBest || 0)),
    mostPracticesInDay: 5, // Placeholder
    highestMasteryGain: Math.max(...progress.map((p) => p.masteryLevel || 0)),
    fastestImprovement: "Warrior Pose", // Placeholder
  }
}
[V0_FILE]typescriptreact:file="scripts/seed-yoga-data.js" isMerged="true"
import { DatabaseService } from "../lib/database.js"

async function seedYogaData() {
  console.log("🌱 Seeding yoga database...")

// Create sample users
  const users = [
    {
      name: "Sarah Johnson",
      email: "sarah@example.com",
      password: "hashed_password_123",
      preferences: {
        experienceLevel: "intermediate",
        preferredDuration: 20,
        favoriteCategories: ["Morning", "Strength"],
        reminderTime: "07:00",
        autoPlay: true,
        show3D: true,
        voiceGuidance: false,
      },
      stats: {
        totalSessions: 45,
        totalMinutes: 850,
        currentStreak: 7,
        longestStreak: 12,
        favoriteSession: "morning-energizer",
        averageSessionRating: 4.6,
        lastSessionDate: new Date(),
      },
    },
    {
      name: "Mike Chen",
      email: "mike@example.com",
      password: "hashed_password_456",
      preferences: {
        experienceLevel: "beginner",
        preferredDuration: 15,
        favoriteCategories: ["Relaxation", "Flexibility"],
        reminderTime: "19:00",
        autoPlay: false,
        show3D: true,
        voiceGuidance: true,
      },
      stats: {
        totalSessions: 23,
        totalMinutes: 420,
        currentStreak: 3,
        longestStreak: 5,
        favoriteSession: "stress-relief",
        averageSessionRating: 4.2,
        lastSessionDate: new Date(Date.now() - 86400000), // Yesterday
      },
    },
  ]

for (const userData of users) {
    await DatabaseService.createUser(userData)
    console.log(`✅ Created user: ${userData.name}`)
  }

// Create comprehensive yoga sessions
  const sessions = [
    {
      title: "Morning Energizer Flow",
      description: "Start your day with this energizing 15-minute yoga sequence designed to awaken your body and mind",
      duration: 15,
      level: "beginner",
      category: "Morning",
      instructor: "Sarah Williams",
      poses: [
        {
          id: "mountain-pose",
          name: "Mountain Pose",
          sanskrit: "Tadasana",
          duration: 60,
          instructions: [
            "Stand with feet hip-width apart, toes pointing forward",
            "Distribute weight evenly on both feet",
            "Engage leg muscles and lift kneecaps",
            "Lengthen spine and lift crown of head",
            "Relax shoulders away from ears",
            "Let arms hang naturally at sides",
            "Breathe deeply and feel grounded",
          ],
          benefits: ["Improves posture", "Increases awareness", "Strengthens legs", "Calms mind"],
          precautions: ["Avoid if severe balance issues", "Keep micro-bend in knees"],
          breathing: "Take slow, deep breaths. Inhale to lengthen spine, exhale to ground through feet.",
          visualization: "Imagine roots growing from your feet into the earth while your head reaches toward the sky.",
          difficulty: "beginner",
          category: "Standing",
          muscleGroups: ["legs", "core", "back"],
          contraindications: ["severe balance disorders"],
          modifications: ["Use wall support if needed", "Sit in chair for seated version"],
          alignment: [
            {
              bodyPart: "feet",
              instruction: "Hip-width apart, parallel",
              commonMistakes: ["Feet too wide", "Toes turned out"],
            },
          ],
          energyLevel: "neutral",
        },
        {
          id: "sun-salutation-a",
          name: "Sun Salutation A",
          sanskrit: "Surya Namaskara A",
          duration: 180,
          instructions: [
            "Start in Mountain Pose with palms together at heart center",
            "Inhale, sweep arms up overhead (Upward Salute)",
            "Exhale, fold forward from hips (Standing Forward Fold)",
            "Inhale, lift chest halfway up with hands on shins",
            "Exhale, step back to Plank Pose",
            "Lower down to Chaturanga (low push-up position)",
            "Inhale, roll over toes to Upward Facing Dog",
            "Exhale, roll over toes to Downward Facing Dog",
            "Hold for 5 breaths, then step feet to hands",
            "Inhale, rise up to standing with arms overhead",
            "Exhale, hands to heart center",
          ],
          benefits: ["Warms up body", "Increases flexibility", "Energizes system", "Improves circulation"],
          precautions: ["Modify by stepping instead of jumping", "Skip Chaturanga if wrist issues"],
          breathing: "Coordinate each movement with breath - one breath per movement.",
          visualization: "Flow like water, connecting each pose smoothly.",
          difficulty: "beginner",
          category: "Flow",
          muscleGroups: ["full body"],
          contraindications: ["wrist injuries", "shoulder injuries"],
          modifications: ["Step instead of jump", "Use blocks", "Skip Chaturanga"],
          alignment: [
            {
              bodyPart: "spine",
              instruction: "Keep spine long throughout flow",
              commonMistakes: ["Rushing movements", "Holding breath"],
            },
          ],
          energyLevel: "energizing",
        },
      ],
      benefits: ["Increases energy", "Improves flexibility", "Reduces stress", "Enhances focus"],
      tags: ["morning", "energizing", "beginner-friendly", "quick"],
      rating: 4.8,
      totalRatings: 156,
      isPublic: true,
      createdBy: "system",
    },
    {
      title: "Deep Relaxation & Stress Relief",
      description: "Unwind with gentle poses and breathing exercises designed to calm your nervous system",
      duration: 25,
      level: "beginner",
      category: "Relaxation",
      instructor: "Maya Patel",
      poses: [
        {
          id: "childs-pose",
          name: "Child's Pose",
          sanskrit: "Balasana",
          duration: 120,
          instructions: [
            "Kneel with big toes touching",
            "Sit back on heels",
            "Open knees hip-width apart",
            "Fold forward, forehead to mat",
            "Extend arms forward or rest by sides",
            "Breathe into back ribs",
            "Stay as long as feels good",
          ],
          benefits: ["Deeply relaxes body and mind", "Stretches hips", "Relieves stress"],
          precautions: ["Place pillow under knees if uncomfortable"],
          breathing: "Breathe into back ribs. Feel breath massaging internal organs.",
          visualization: "Feel like a child - safe, protected, completely at ease.",
          difficulty: "beginner",
          category: "Restorative",
          muscleGroups: ["hips", "back", "shoulders"],
          contraindications: ["knee injuries", "pregnancy (modify)"],
          modifications: ["Pillow between calves and thighs", "Fists under forehead"],
          alignment: [
            {
              bodyPart: "knees",
              instruction: "Hip-width apart or wider",
              commonMistakes: ["Knees too close together"],
            },
          ],
          energyLevel: "calming",
        },
      ],
      benefits: ["Reduces anxiety", "Improves sleep", "Mental clarity", "Lowers blood pressure"],
      tags: ["relaxation", "stress-relief", "evening", "restorative"],
      rating: 4.9,
      totalRatings: 203,
      isPublic: true,
      createdBy: "system",
    },
    {
      title: "Power Yoga Flow",
      description: "Build strength and endurance with this dynamic 30-minute power yoga sequence",
      duration: 30,
      level: "intermediate",
      category: "Strength",
      instructor: "Alex Rodriguez",
      poses: [
        {
          id: "warrior-1",
          name: "Warrior I",
          sanskrit: "Virabhadrasana I",
          duration: 60,
          instructions: [
            "Step left foot back 3-4 feet",
            "Turn left foot out 45 degrees",
            "Bend right knee over ankle",
            "Square hips toward front",
            "Sweep arms up overhead",
            "Hold, then switch sides",
          ],
          benefits: ["Strengthens legs and glutes", "Opens hip flexors", "Improves balance"],
          precautions: ["Don't let front knee go past ankle"],
          breathing: "Deep belly breaths. Use exhales to sink deeper into pose.",
          visualization: "Stand like a peaceful warrior - strong in legs, open in heart.",
          difficulty: "beginner",
          category: "Standing",
          muscleGroups: ["legs", "glutes", "core", "shoulders"],
          contraindications: ["knee injuries", "high blood pressure"],
          modifications: ["Hands on hips", "Use wall for support"],
          alignment: [
            {
              bodyPart: "front knee",
              instruction: "Directly over ankle",
              commonMistakes: ["Knee past ankle", "Knee caving inward"],
            },
          ],
          energyLevel: "energizing",
        },
      ],
      benefits: ["Builds strength", "Improves endurance", "Increases confidence", "Burns calories"],
      tags: ["strength", "power", "intermediate", "dynamic"],
      rating: 4.7,
      totalRatings: 89,
      isPublic: true,
      createdBy: "system",
    },
  ]

for (const sessionData of sessions) {
    await DatabaseService.createSession(sessionData)
    console.log(`✅ Created session: ${sessionData.title}`)
  }

console.log("🎉 Yoga database seeded successfully!")
  console.log(`📊 Created ${users.length} users and ${sessions.length} sessions`)
}

// Run the seed function
seedYogaData().catch(console.error)
[V0_FILE]typescriptreact:file="app/api/yoga/sessions/[id]/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

// Mock yoga session data with realistic poses
const mockYogaSessions = {
  "1": {
    id: 1,
    title: "Morning Energizer Flow",
    description: "Start your day with this energizing 20-minute yoga flow",
    duration: "20 minutes",
    level: "Beginner",
    category: "Vinyasa Flow",
    benefits: [
      "Increases energy and alertness",
      "Improves flexibility and strength",
      "Reduces morning stiffness",
      "Enhances mental clarity",
    ],
    poses: [
      {
        name: "Mountain Pose (Tadasana)",
        duration: 60,
        instructions: "Stand tall with feet hip-width apart, arms at your sides",
        benefits: ["Improves posture", "Strengthens legs and core", "Increases body awareness", "Calms the mind"],
        stepByStep: [
          "Stand with feet hip-width apart",
          "Distribute weight evenly on both feet",
          "Engage your leg muscles",
          "Lengthen your spine",
          "Relax your shoulders away from ears",
          "Let arms hang naturally at sides",
          "Breathe deeply and hold",
        ],
        breathing: "Take slow, deep breaths through your nose",
        precautions: ["Avoid if you have low blood pressure", "Don't lock your knees"],
        visualization: "Imagine roots growing from your feet into the earth",
      },
      {
        name: "Downward Facing Dog (Adho Mukha Svanasana)",
        duration: 90,
        instructions: "Form an inverted V-shape with your body",
        benefits: [
          "Stretches hamstrings and calves",
          "Strengthens arms and shoulders",
          "Improves circulation",
          "Calms the nervous system",
        ],
        stepByStep: [
          "Start on hands and knees",
          "Tuck your toes under",
          "Lift your hips up and back",
          "Straighten your legs",
          "Press firmly through your hands",
          "Create an inverted V-shape",
          "Hold and breathe deeply",
        ],
        breathing: "Breathe steadily, focusing on lengthening your spine",
        precautions: ["Avoid if you have wrist injuries", "Modify by bending knees if hamstrings are tight"],
        visualization: "Feel energy flowing from your hands to your hips",
      },
      {
        name: "Warrior I (Virabhadrasana I)",
        duration: 75,
        instructions: "Step into a strong lunge with arms reaching skyward",
        benefits: ["Strengthens legs and glutes", "Opens hip flexors", "Improves balance", "Builds confidence"],
        stepByStep: [
          "Step your left foot back 3-4 feet",
          "Turn left foot out 45 degrees",
          "Bend your right knee over ankle",
          "Square your hips forward",
          "Sweep your arms overhead",
          "Hold steady and strong",
          "Breathe deeply and powerfully",
        ],
        breathing: "Strong, powerful breaths to match the pose's energy",
        precautions: ["Avoid if you have knee injuries", "Don't let front knee go past ankle"],
        visualization: "Feel like a strong warrior, grounded yet reaching for the sky",
      },
      {
        name: "Tree Pose (Vrikshasana)",
        duration: 60,
        instructions: "Balance on one leg with the other foot placed on your thigh",
        benefits: [
          "Improves balance and stability",
          "Strengthens legs and core",
          "Increases focus and concentration",
          "Calms the mind",
        ],
        stepByStep: [
          "Stand on your left foot",
          "Bend your right knee",
          "Place right foot on left inner thigh",
          "Find your balance point",
          "Bring hands to prayer position",
          "Raise arms overhead if stable",
          "Hold and breathe steadily",
        ],
        breathing: "Steady, calm breaths to maintain balance",
        precautions: ["Never place foot on side of knee", "Use wall support if needed"],
        visualization: "Imagine yourself as a strong, rooted tree swaying gently",
      },
      {
        name: "Child's Pose (Balasana)",
        duration: 90,
        instructions: "Kneel and fold forward, resting your forehead on the ground",
        benefits: [
          "Relieves stress and anxiety",
          "Stretches hips and thighs",
          "Calms the nervous system",
          "Provides gentle back stretch",
        ],
        stepByStep: [
          "Kneel on the floor",
          "Touch your big toes together",
          "Sit back on your heels",
          "Open your knees hip-width apart",
          "Fold forward from your hips",
          "Rest your forehead on the ground",
          "Breathe into your back body",
        ],
        breathing: "Deep, relaxing breaths into your back and sides",
        precautions: ["Avoid if you have knee injuries", "Place pillow under forehead if needed"],
        visualization: "Feel safe and protected, like a child resting peacefully",
      },
    ],
  },
  "2": {
    id: 2,
    title: "Evening Relaxation Flow",
    description: "Wind down with this gentle 15-minute evening practice",
    duration: "15 minutes",
    level: "Beginner",
    category: "Restorative",
    benefits: [
      "Reduces stress and tension",
      "Prepares body for sleep",
      "Calms the nervous system",
      "Releases physical tension",
    ],
    poses: [
      {
        name: "Cat-Cow Stretch (Marjaryasana-Bitilasana)",
        duration: 90,
        instructions: "Move between arching and rounding your spine on hands and knees",
        benefits: [
          "Increases spinal flexibility",
          "Massages internal organs",
          "Relieves back tension",
          "Improves posture",
        ],
        stepByStep: [
          "Start in tabletop position",
          "Align wrists under shoulders",
          "Inhale, arch your back (Cow)",
          "Exhale, round your spine (Cat)",
          "Continue flowing with breath",
          "Move slowly and mindfully",
          "Feel the massage along your spine",
        ],
        breathing: "Coordinate movement with breath - inhale for cow, exhale for cat",
        precautions: ["Move slowly if you have back issues", "Avoid if you have wrist pain"],
        visualization: "Imagine your spine as a wave, flowing smoothly",
      },
      {
        name: "Cobra Pose (Bhujangasana)",
        duration: 60,
        instructions: "Lie on your stomach and lift your chest, opening your heart",
        benefits: [
          "Strengthens back muscles",
          "Opens chest and shoulders",
          "Improves spinal flexibility",
          "Energizes the body",
        ],
        stepByStep: [
          "Lie face down on your mat",
          "Place palms under your shoulders",
          "Press into your hands",
          "Lift your chest off the ground",
          "Keep your hips on the mat",
          "Open your heart center",
          "Breathe deeply into your chest",
        ],
        breathing: "Deep breaths to expand your chest and heart space",
        precautions: ["Don't overarch your back", "Keep shoulders away from ears"],
        visualization: "Feel your heart opening like a flower blooming",
      },
      {
        name: "Lotus Pose (Padmasana)",
        duration: 120,
        instructions: "Sit cross-legged in a comfortable meditation position",
        benefits: ["Calms the mind", "Improves posture", "Increases hip flexibility", "Prepares for meditation"],
        stepByStep: [
          "Sit comfortably cross-legged",
          "If possible, place feet on opposite thighs",
          "Otherwise, sit in simple cross-legged position",
          "Sit up tall through your spine",
          "Rest your hands on your knees",
          "Close your eyes gently",
          "Focus on your breath and meditate",
        ],
        breathing: "Natural, peaceful breathing for meditation",
        precautions: ["Don't force the full lotus if hips are tight", "Use cushions for comfort"],
        visualization: "Feel peaceful and centered, like a lotus floating on calm water",
      },
    ],
  },
}

export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const sessionId = params.id
    const session = mockYogaSessions[sessionId as keyof typeof mockYogaSessions]

if (!session) {
      return NextResponse.json({ error: "Session not found" }, { status: 404 })
    }

return NextResponse.json(session)
  } catch (error) {
    console.error("Error fetching yoga session:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]png:file="public/mountain-pose-tadasana.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mountain-pose-tadasana-8ClsyTJRZlvimI2VXbW4xm2Sq9jmX0.png" isMerged="true"
[V0_FILE]png:file="public/downward-facing-dog.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/downward-facing-dog-XaRCYoNzfmpiurOwtgfFJ2xdwk0lCj.png" isMerged="true"
[V0_FILE]png:file="public/warrior-one-yoga.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/warrior-one-yoga-QZqEjeYhN82sPvylSWf1eekVIyQyvV.png" isMerged="true"
[V0_FILE]png:file="public/child-pose-yoga.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/child-pose-yoga-XO8ab5HVjm5Fsz1SZatCYWDmHI8AeQ.png" isMerged="true"
[V0_FILE]png:file="public/cat-cow-yoga.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cat-cow-yoga-dq9hjhq5C8CNLs4n3YwtjDNof8Q1Wn.png" isMerged="true"
[V0_FILE]png:file="public/tree-pose-yoga.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/tree-pose-yoga-KQM9acSlUOkvoXLJuJucMTmzlZ3kUN.png" isMerged="true"
[V0_FILE]png:file="public/cobra-pose-yoga.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cobra-pose-yoga-8hCnn7EN2b9AihMdLKVpiotTLf5EHt.png" isMerged="true"
[V0_FILE]png:file="public/triangle-pose-yoga.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/triangle-pose-yoga-3v7rxY3DZA0Lw7IEuXgBm9U1TUtL8Z.png" isMerged="true"
[V0_FILE]png:file="public/plank-pose-yoga.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/plank-pose-yoga-In46BKwne53aKXFDRFQauog4S6ezXX.png" isMerged="true"
[V0_FILE]png:file="public/lotus-pose-meditation.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/lotus-pose-meditation-BcCNMVIRO44jYGfQaGruRK8gYXH0yz.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/yoga/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Play, Clock, TrendingUp, Eye, Sparkles, Camera } from "lucide-react"
import Link from "next/link"

export default function YogaPage() {
  const yogaSessions = [
    {
      id: 1,
      title: "Morning Energizer Flow",
      description: "Start your day with this energizing 15-minute yoga sequence",
      duration: "15 mins",
      level: "Beginner",
      category: "Morning",
      benefits: ["Increases energy", "Improves flexibility", "Reduces stress"],
      poses3D: 5,
      featured: true,
    },
    {
      id: 2,
      title: "Stress Relief Meditation",
      description: "Calm your mind with gentle poses and breathing exercises",
      duration: "20 mins",
      level: "All Levels",
      category: "Relaxation",
      benefits: ["Reduces anxiety", "Improves sleep", "Mental clarity"],
      poses3D: 4,
      featured: true,
    },
    {
      id: 3,
      title: "Core Strength Builder",
      description: "Build core strength with targeted yoga poses",
      duration: "25 mins",
      level: "Intermediate",
      category: "Strength",
      benefits: ["Stronger core", "Better posture", "Increased stability"],
      poses3D: 6,
      featured: false,
    },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-green-50 to-teal-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold text-gray-900 mb-4">3D Yoga & Meditation</h1>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
            Experience yoga like never before with immersive 3D guidance and step-by-step visualization
          </p>

{/* 3D Features Highlight */}
          <div className="flex justify-center space-x-6 mt-8">
            <div className="flex items-center space-x-2 bg-white px-4 py-2 rounded-full shadow-md">
              <Eye className="w-5 h-5 text-purple-600" />
              <span className="text-sm font-semibold text-gray-700">3D Pose Visualization</span>
            </div>
            <div className="flex items-center space-x-2 bg-white px-4 py-2 rounded-full shadow-md">
              <Sparkles className="w-5 h-5 text-green-600" />
              <span className="text-sm font-semibold text-gray-700">Interactive Step Guidance</span>
            </div>
            <div className="flex items-center space-x-2 bg-white px-4 py-2 rounded-full shadow-md">
              <Play className="w-5 h-5 text-blue-600" />
              <span className="text-sm font-semibold text-gray-700">Real-time Sessions</span>
            </div>
          </div>
        </div>

{/* Categories */}
        <div className="flex flex-wrap justify-center gap-4 mb-12">
          <Badge variant="outline" className="px-4 py-2 text-lg">
            Morning
          </Badge>
          <Badge variant="outline" className="px-4 py-2 text-lg">
            Relaxation
          </Badge>
          <Badge variant="outline" className="px-4 py-2 text-lg">
            Strength
          </Badge>
          <Badge variant="outline" className="px-4 py-2 text-lg">
            Flexibility
          </Badge>
        </div>

{/* Quick Access to 3D Pose Library */}
        <div className="mb-12">
          <Card className="bg-gradient-to-r from-purple-500 to-pink-500 text-white">
            <CardHeader className="text-center">
              <CardTitle className="text-2xl flex items-center justify-center space-x-2">
                <Eye className="w-8 h-8" />
                <span>Explore 3D Yoga Poses</span>
              </CardTitle>
              <CardDescription className="text-purple-100">
                Browse our comprehensive library of 3D yoga poses with interactive visualizations
              </CardDescription>
            </CardHeader>
            <CardContent className="text-center">
              <Link href="/yoga/poses">
                <Button size="lg" className="bg-white text-purple-600 hover:bg-gray-100">
                  <Sparkles className="w-5 h-5 mr-2" />
                  View 3D Pose Library
                </Button>
              </Link>
            </CardContent>
          </Card>
        </div>

{/* Pose Gallery Card */}
        <div className="mb-12">
          <Card className="hover:shadow-lg transition-shadow">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Camera className="w-6 h-6 text-green-600" />
                <span>Yoga Pose Gallery</span>
              </CardTitle>
              <CardDescription>
                Browse our complete collection of yoga poses with visual references and detailed instructions
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-3 gap-2 mb-4">
                <img
                  src="/mountain-pose-tadasana.png"
                  alt="Mountain Pose (Tadasana)"
                  className="w-full h-16 object-cover rounded"
                />
                <img
                  src="/downward-facing-dog.png"
                  alt="Downward Facing Dog"
                  className="w-full h-16 object-cover rounded"
                />
                <img src="/warrior-one-yoga.png" alt="Warrior I Pose" className="w-full h-16 object-cover rounded" />
              </div>
              <Link href="/yoga/poses/gallery">
                <Button className="w-full bg-green-600 hover:bg-green-700">
                  <Camera className="w-4 h-4 mr-2" />
                  View All Pose Photos
                </Button>
              </Link>
            </CardContent>
          </Card>
        </div>

{/* Yoga Sessions Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {yogaSessions.map((session) => (
            <Card key={session.id} className="hover:shadow-lg transition-shadow relative overflow-hidden">
              {session.featured && (
                <div className="absolute top-0 right-0 bg-gradient-to-l from-purple-500 to-pink-500 text-white px-3 py-1 text-xs font-semibold rounded-bl-lg">
                  3D Featured
                </div>
              )}

<CardHeader>
                <div className="flex justify-between items-start mb-2">
                  <Badge className="bg-green-100 text-green-700">{session.level}</Badge>
                  <Badge variant="outline">{session.category}</Badge>
                </div>
                <CardTitle className="text-green-700">{session.title}</CardTitle>
                <CardDescription>{session.description}</CardDescription>
              </CardHeader>

<CardContent className="space-y-4">
                <div className="flex items-center space-x-4 text-sm text-gray-600">
                  <div className="flex items-center space-x-1">
                    <Clock className="w-4 h-4" />
                    <span>{session.duration}</span>
                  </div>
                  <div className="flex items-center space-x-1">
                    <TrendingUp className="w-4 h-4" />
                    <span>{session.level}</span>
                  </div>
                  <div className="flex items-center space-x-1">
                    <Eye className="w-4 h-4 text-purple-600" />
                    <span>{session.poses3D} 3D poses</span>
                  </div>
                </div>

<div>
                  <h4 className="font-semibold mb-2">Benefits:</h4>
                  <ul className="text-sm text-gray-600 space-y-1">
                    {session.benefits.map((benefit, index) => (
                      <li key={index}>• {benefit}</li>
                    ))}
                  </ul>
                </div>

{/* 3D Features Badge */}
                <div className="bg-gradient-to-r from-purple-50 to-pink-50 p-3 rounded-lg">
                  <div className="flex items-center space-x-2 mb-2">
                    <Sparkles className="w-4 h-4 text-purple-600" />
                    <span className="text-sm font-semibold text-purple-700">3D Features:</span>
                  </div>
                  <ul className="text-xs text-purple-600 space-y-1">
                    <li>• Interactive pose visualization</li>
                    <li>• Step-by-step 3D guidance</li>
                    <li>• Real-time breathing cues</li>
                  </ul>
                </div>

<Link href={`/yoga/session/${session.id}`}>
                  <Button className="w-full bg-gradient-to-r from-green-500 to-teal-500">
                    <Play className="w-4 h-4 mr-2" />
                    Start 3D Session
                  </Button>
                </Link>
              </CardContent>
            </Card>
          ))}
        </div>

{/* 3D Technology Info */}
        <div className="mt-16">
          <Card className="max-w-4xl mx-auto">
            <CardHeader className="text-center">
              <CardTitle className="text-2xl text-gray-900">Why 3D Yoga?</CardTitle>
              <CardDescription>
                Experience the future of yoga practice with our advanced 3D visualization technology
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid md:grid-cols-3 gap-6">
                <div className="text-center">
                  <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <Eye className="w-8 h-8 text-purple-600" />
                  </div>
                  <h3 className="font-semibold mb-2">Perfect Alignment</h3>
                  <p className="text-sm text-gray-600">
                    See exactly how each pose should look from every angle with interactive 3D models
                  </p>
                </div>
                <div className="text-center">
                  <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <Sparkles className="w-8 h-8 text-green-600" />
                  </div>
                  <h3 className="font-semibold mb-2">Step-by-Step Guidance</h3>
                  <p className="text-sm text-gray-600">
                    Follow detailed 3D instructions that guide you through each movement safely
                  </p>
                </div>
                <div className="text-center">
                  <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <Play className="w-8 h-8 text-blue-600" />
                  </div>
                  <h3 className="font-semibold mb-2">Interactive Learning</h3>
                  <p className="text-sm text-gray-600">
                    Control the pace, zoom in on details, and practice at your own rhythm
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/yoga/poses/gallery/page.tsx" isEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Clock, Star, Search, Filter } from "lucide-react"
import Link from "next/link"
import { useState } from "react"

export default function YogaPoseGallery() {
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedLevel, setSelectedLevel] = useState("All")
  const [selectedCategory, setSelectedCategory] = useState("All")

const yogaPoses = [
    {
      id: 1,
      name: "Mountain Pose",
      sanskrit: "Tadasana",
      image: "/mountain-pose-tadasana.png",
      level: "Beginner",
      category: "Standing",
      duration: "30-60 seconds",
      benefits: ["Improves posture", "Strengthens legs", "Increases awareness"],
      description: "A foundational standing pose that teaches proper alignment and grounding.",
    },
    {
      id: 2,
      name: "Downward Facing Dog",
      sanskrit: "Adho Mukha Svanasana",
      image: "/downward-facing-dog.png",
      level: "Beginner",
      category: "Inversion",
      duration: "1-3 minutes",
      benefits: ["Strengthens arms", "Stretches hamstrings", "Calms mind"],
      description: "An energizing pose that stretches the entire body while building strength.",
    },
    {
      id: 3,
      name: "Warrior I",
      sanskrit: "Virabhadrasana I",
      image: "/warrior-one-yoga.png",
      level: "Beginner",
      category: "Standing",
      duration: "30-60 seconds each side",
      benefits: ["Strengthens legs", "Opens hips", "Builds confidence"],
      description: "A powerful standing pose that builds strength and stability.",
    },
    {
      id: 4,
      name: "Tree Pose",
      sanskrit: "Vrksasana",
      image: "/tree-pose-yoga.png",
      level: "Beginner",
      category: "Balance",
      duration: "30-60 seconds each side",
      benefits: ["Improves balance", "Strengthens legs", "Increases focus"],
      description: "A balancing pose that cultivates stability and concentration.",
    },
    {
      id: 5,
      name: "Child's Pose",
      sanskrit: "Balasana",
      image: "/child-pose-yoga.png",
      level: "Beginner",
      category: "Restorative",
      duration: "1-5 minutes",
      benefits: ["Relieves stress", "Stretches back", "Calms nervous system"],
      description: "A gentle resting pose that provides comfort and introspection.",
    },
    {
      id: 6,
      name: "Cat-Cow Pose",
      sanskrit: "Marjaryasana-Bitilasana",
      image: "/cat-cow-yoga.png",
      level: "Beginner",
      category: "Warm-up",
      duration: "1-2 minutes",
      benefits: ["Improves spine flexibility", "Relieves back tension", "Warms up body"],
      description: "A gentle flow between two poses that warms the spine.",
    },
    {
      id: 7,
      name: "Cobra Pose",
      sanskrit: "Bhujangasana",
      image: "/cobra-pose-yoga.png",
      level: "Intermediate",
      category: "Backbend",
      duration: "15-30 seconds",
      benefits: ["Strengthens back", "Opens chest", "Improves posture"],
      description: "A heart-opening backbend that strengthens the spine.",
    },
    {
      id: 8,
      name: "Triangle Pose",
      sanskrit: "Trikonasana",
      image: "/triangle-pose-yoga.png",
      level: "Intermediate",
      category: "Standing",
      duration: "30-60 seconds each side",
      benefits: ["Stretches sides", "Strengthens legs", "Improves balance"],
      description: "A classic standing pose that creates length through the side body.",
    },
    {
      id: 9,
      name: "Plank Pose",
      sanskrit: "Phalakasana",
      image: "/plank-pose-yoga.png",
      level: "Intermediate",
      category: "Strength",
      duration: "30-60 seconds",
      benefits: ["Strengthens core", "Builds arm strength", "Improves stability"],
      description: "A foundational strength pose that engages the entire body.",
    },
    {
      id: 10,
      name: "Lotus Pose",
      sanskrit: "Padmasana",
      image: "/lotus-pose-meditation.png",
      level: "Advanced",
      category: "Seated",
      duration: "1-5 minutes",
      benefits: ["Improves flexibility", "Calms mind", "Aids meditation"],
      description: "A traditional meditation pose that promotes inner peace.",
    },
  ]

const levels = ["All", "Beginner", "Intermediate", "Advanced"]
  const categories = [
    "All",
    "Standing",
    "Seated",
    "Balance",
    "Backbend",
    "Inversion",
    "Restorative",
    "Warm-up",
    "Strength",
  ]

const filteredPoses = yogaPoses.filter((pose) => {
    const matchesSearch =
      pose.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      pose.sanskrit.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesLevel = selectedLevel === "All" || pose.level === selectedLevel
    const matchesCategory = selectedCategory === "All" || pose.category === selectedCategory

return matchesSearch && matchesLevel && matchesCategory
  })

const getLevelColor = (level: string) => {
    switch (level) {
      case "Beginner":
        return "bg-green-100 text-green-700"
      case "Intermediate":
        return "bg-yellow-100 text-yellow-700"
      case "Advanced":
        return "bg-red-100 text-red-700"
      default:
        return "bg-gray-100 text-gray-700"
    }
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-green-50 to-teal-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold text-gray-900 mb-4">Yoga Pose Gallery</h1>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
            Explore our comprehensive collection of yoga poses with detailed photos and instructions
          </p>
        </div>

{/* Search and Filters */}
        <div className="mb-8 space-y-4">
          <div className="relative max-w-md mx-auto">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
            <Input
              type="text"
              placeholder="Search poses by name or Sanskrit..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10"
            />
          </div>

<div className="flex flex-wrap justify-center gap-4">
            <div className="flex items-center space-x-2">
              <Filter className="w-4 h-4 text-gray-600" />
              <span className="text-sm font-medium text-gray-600">Level:</span>
              <div className="flex space-x-2">
                {levels.map((level) => (
                  <Button
                    key={level}
                    variant={selectedLevel === level ? "default" : "outline"}
                    size="sm"
                    onClick={() => setSelectedLevel(level)}
                  >
                    {level}
                  </Button>
                ))}
              </div>
            </div>

<div className="flex items-center space-x-2">
              <span className="text-sm font-medium text-gray-600">Category:</span>
              <div className="flex flex-wrap space-x-2">
                {categories.map((category) => (
                  <Button
                    key={category}
                    variant={selectedCategory === category ? "default" : "outline"}
                    size="sm"
                    onClick={() => setSelectedCategory(category)}
                  >
                    {category}
                  </Button>
                ))}
              </div>
            </div>
          </div>
        </div>

{/* Results Count */}
        <div className="text-center mb-6">
          <p className="text-gray-600">
            Showing {filteredPoses.length} of {yogaPoses.length} poses
          </p>
        </div>

{/* Poses Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          {filteredPoses.map((pose) => (
            <Card key={pose.id} className="hover:shadow-lg transition-shadow overflow-hidden">
              <div className="aspect-video relative">
                <img
                  src={pose.image || "/placeholder.svg"}
                  alt={`${pose.name} (${pose.sanskrit})`}
                  className="w-full h-full object-cover"
                />
                <div className="absolute top-2 right-2">
                  <Badge className={getLevelColor(pose.level)}>{pose.level}</Badge>
                </div>
                <div className="absolute bottom-2 left-2">
                  <Badge variant="outline" className="bg-white/90">
                    {pose.category}
                  </Badge>
                </div>
              </div>

<CardHeader className="pb-2">
                <CardTitle className="text-lg">{pose.name}</CardTitle>
                <CardDescription className="text-sm italic text-purple-600">{pose.sanskrit}</CardDescription>
              </CardHeader>

<CardContent className="space-y-3">
                <p className="text-sm text-gray-600 line-clamp-2">{pose.description}</p>

<div className="flex items-center space-x-2 text-sm text-gray-500">
                  <Clock className="w-4 h-4" />
                  <span>{pose.duration}</span>
                </div>

<div>
                  <h4 className="text-sm font-semibold mb-1">Benefits:</h4>
                  <ul className="text-xs text-gray-600 space-y-1">
                    {pose.benefits.slice(0, 2).map((benefit, index) => (
                      <li key={index}>• {benefit}</li>
                    ))}
                    {pose.benefits.length > 2 && <li className="text-purple-600">+ {pose.benefits.length - 2} more</li>}
                  </ul>
                </div>

<div className="flex space-x-2">
                  <Link href={`/yoga/poses/${pose.id}`} className="flex-1">
                    <Button size="sm" className="w-full">
                      View Details
                    </Button>
                  </Link>
                  <Button size="sm" variant="outline">
                    <Star className="w-4 h-4" />
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

{/* No Results */}
        {filteredPoses.length === 0 && (
          <div className="text-center py-12">
            <p className="text-gray-500 text-lg">No poses found matching your criteria.</p>
            <Button
              onClick={() => {
                setSearchTerm("")
                setSelectedLevel("All")
                setSelectedCategory("All")
              }}
              className="mt-4"
            >
              Clear Filters
            </Button>
          </div>
        )}

{/* Back to Sessions */}
        <div className="text-center mt-12">
          <Link href="/yoga">
            <Button size="lg" variant="outline">
              Back to Yoga Sessions
            </Button>
          </Link>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/yoga/poses/gallery/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/search-analytics.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { TrendingUp, Search } from "lucide-react"
import { useEffect, useState } from "react"

interface SearchAnalytics {
  term: string
  count: number
  lastSearched: string
}

export function SearchAnalytics() {
  const [popularSearches, setPopularSearches] = useState<SearchAnalytics[]>([])

useEffect(() => {
    const analytics = localStorage.getItem("remedies-search-analytics")
    if (analytics) {
      const data = JSON.parse(analytics)
      // Sort by count and get top 10
      const sorted = Object.entries(data)
        .map(([term, data]: [string, any]) => ({
          term,
          count: data.count,
          lastSearched: data.lastSearched,
        }))
        .sort((a, b) => b.count - a.count)
        .slice(0, 10)
      setPopularSearches(sorted)
    }
  }, [])

if (popularSearches.length === 0) return null

return (
    <Card className="mb-8">
      <CardHeader>
        <CardTitle className="flex items-center space-x-2 text-lg">
          <TrendingUp className="w-5 h-5 text-green-600" />
          <span>Popular Searches</span>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="flex flex-wrap gap-2">
          {popularSearches.map((search, index) => (
            <Badge key={search.term} variant="outline" className="flex items-center space-x-1 px-3 py-1">
              <Search className="w-3 h-3" />
              <span>{search.term}</span>
              <span className="text-xs text-gray-500">({search.count})</span>
            </Badge>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/search-suggestions.tsx" isMerged="true"
"use client"
import { Clock, TrendingUp, Star } from "lucide-react"

interface SearchSuggestionsProps {
  onSuggestionClick: (suggestion: string) => void
  searchHistory: string[]
}

export function SearchSuggestions({ onSuggestionClick, searchHistory }: SearchSuggestionsProps) {
  const popularSuggestions = [
    { term: "headache", category: "pain", icon: "🤕" },
    { term: "stomach pain", category: "digestive", icon: "🤢" },
    { term: "cough", category: "respiratory", icon: "😷" },
    { term: "anxiety", category: "mental", icon: "😰" },
    { term: "back pain", category: "pain", icon: "🤕" },
    { term: "insomnia", category: "sleep", icon: "😴" },
    { term: "acne", category: "skin", icon: "😔" },
    { term: "diabetes", category: "metabolic", icon: "🩺" },
    { term: "arthritis", category: "joints", icon: "🦴" },
    { term: "hair fall", category: "skin", icon: "💇" },
  ]

const remedySuggestions = [
    { term: "ginger", type: "ingredient", icon: "🫚" },
    { term: "turmeric", type: "ingredient", icon: "🟡" },
    { term: "honey", type: "ingredient", icon: "🍯" },
    { term: "garlic", type: "ingredient", icon: "🧄" },
    { term: "yoga", type: "practice", icon: "🧘" },
    { term: "breathing", type: "practice", icon: "💨" },
  ]

return (
    <div className="max-w-6xl mx-auto mt-4 space-y-4">
      {/* Recent Searches */}
      {searchHistory.length > 0 && (
        <div>
          <div className="flex items-center space-x-2 mb-2">
            <Clock className="w-4 h-4 text-gray-500" />
            <p className="text-sm text-gray-600 font-medium">Recent Searches:</p>
          </div>
          <div className="flex flex-wrap gap-2">
            {searchHistory.slice(0, 5).map((item, index) => (
              <button
                key={index}
                onClick={() => onSuggestionClick(item)}
                className="px-3 py-1 text-xs bg-blue-50 text-blue-700 border border-blue-200 rounded-full hover:bg-blue-100 transition-colors flex items-center space-x-1"
              >
                <Clock className="w-3 h-3" />
                <span>{item}</span>
              </button>
            ))}
          </div>
        </div>
      )}

{/* Popular Health Issues */}
      <div>
        <div className="flex items-center space-x-2 mb-2">
          <TrendingUp className="w-4 h-4 text-gray-500" />
          <p className="text-sm text-gray-600 font-medium">Popular Health Issues:</p>
        </div>
        <div className="flex flex-wrap gap-2">
          {popularSuggestions.map((suggestion) => (
            <button
              key={suggestion.term}
              onClick={() => onSuggestionClick(suggestion.term)}
              className="px-3 py-1 text-xs bg-green-50 text-green-700 border border-green-200 rounded-full hover:bg-green-100 transition-colors flex items-center space-x-1"
            >
              <span>{suggestion.icon}</span>
              <span>{suggestion.term}</span>
            </button>
          ))}
        </div>
      </div>

{/* Popular Remedies */}
      <div>
        <div className="flex items-center space-x-2 mb-2">
          <Star className="w-4 h-4 text-gray-500" />
          <p className="text-sm text-gray-600 font-medium">Popular Remedies & Practices:</p>
        </div>
        <div className="flex flex-wrap gap-2">
          {remedySuggestions.map((suggestion) => (
            <button
              key={suggestion.term}
              onClick={() => onSuggestionClick(suggestion.term)}
              className="px-3 py-1 text-xs bg-orange-50 text-orange-700 border border-orange-200 rounded-full hover:bg-orange-100 transition-colors flex items-center space-x-1"
            >
              <span>{suggestion.icon}</span>
              <span>{suggestion.term}</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/language-selector.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Globe } from "lucide-react"
import { useState } from "react"

interface LanguageSelectorProps {
  currentLanguage: string
  onLanguageChange: (language: string) => void
}

export function LanguageSelector({ currentLanguage, onLanguageChange }: LanguageSelectorProps) {
  const [isOpen, setIsOpen] = useState(false)

const languages = [
    { code: "en", name: "English", nativeName: "English", flag: "🇺🇸" },
    { code: "hi", name: "Hindi", nativeName: "हिंदी", flag: "🇮🇳" },
    { code: "gu", name: "Gujarati", nativeName: "ગુજરાતી", flag: "🇮🇳" },
  ]

const currentLang = languages.find((lang) => lang.code === currentLanguage) || languages[0]

return (
    <div className="relative">
      <Button
        variant="outline"
        onClick={() => setIsOpen(!isOpen)}
        className="flex items-center space-x-2 min-w-[120px]"
      >
        <Globe className="w-4 h-4" />
        <span className="text-sm">{currentLang.flag}</span>
        <span className="text-sm">{currentLang.nativeName}</span>
      </Button>

{isOpen && (
        <div className="absolute top-full left-0 mt-1 bg-white border border-gray-200 rounded-md shadow-lg z-50 min-w-[160px]">
          {languages.map((language) => (
            <button
              key={language.code}
              onClick={() => {
                onLanguageChange(language.code)
                setIsOpen(false)
              }}
              className={`w-full text-left px-4 py-2 hover:bg-gray-50 flex items-center space-x-3 ${
                currentLanguage === language.code ? "bg-green-50 text-green-700" : ""
              }`}
            >
              <span className="text-lg">{language.flag}</span>
              <div>
                <div className="font-medium text-sm">{language.nativeName}</div>
                <div className="text-xs text-gray-500">{language.name}</div>
              </div>
            </button>
          ))}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/auth/login/route.ts" isEdit="true" isMerged="true"
import { NextResponse } from "next/server"

// Mock user database - In production, use a real database
const users = [
  {
    id: 1,
    name: "John Doe",
    email: "john@example.com",
    password: "password123", // In real app, this would be hashed
    avatar: "/placeholder.svg?height=40&width=40&text=JD",
    joinDate: "2024-01-15",
  },
  {
    id: 2,
    name: "Jane Smith",
    email: "jane@example.com",
    password: "password123",
    avatar: "/placeholder.svg?height=40&width=40&text=JS",
    joinDate: "2024-02-20",
  },
  {
    id: 3,
    name: "Demo User",
    email: "demo@healthai.com",
    password: "demo123",
    avatar: "/placeholder.svg?height=40&width=40&text=DU",
    joinDate: "2024-03-01",
  },
]

export async function POST(request: Request) {
  try {
    const { email, password } = await request.json()

// Validate input
    if (!email || !password) {
      return NextResponse.json({ success: false, message: "Email and password are required" }, { status: 400 })
    }

// Simulate database lookup delay
    await new Promise((resolve) => setTimeout(resolve, 500))

// Find user
    const user = users.find((u) => u.email.toLowerCase() === email.toLowerCase())

if (!user) {
      return NextResponse.json({ success: false, message: "No account found with this email address" }, { status: 404 })
    }

// Check password
    if (user.password !== password) {
      return NextResponse.json({ success: false, message: "Incorrect password" }, { status: 401 })
    }

// Return user without password
    const { password: _, ...userWithoutPassword } = user

return NextResponse.json({
      success: true,
      message: "Login successful",
      user: userWithoutPassword,
    })
  } catch (error) {
    console.error("Login error:", error)
    return NextResponse.json({ success: false, message: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/auth/login/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { Eye, EyeOff, AlertCircle, CheckCircle } from "lucide-react"

export default function LoginPage() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const [isGoogleLoading, setIsGoogleLoading] = useState(false)
  const [isFacebookLoading, setIsFacebookLoading] = useState(false)
  const [showPassword, setShowPassword] = useState(false)
  const [error, setError] = useState("")
  const [success, setSuccess] = useState("")
  const router = useRouter()

const validateForm = () => {
    if (!email) {
      setError("Email is required")
      return false
    }
    if (!email.includes("@")) {
      setError("Please enter a valid email address")
      return false
    }
    if (!password) {
      setError("Password is required")
      return false
    }
    if (password.length < 6) {
      setError("Password must be at least 6 characters")
      return false
    }
    return true
  }

const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault()
    setError("")
    setSuccess("")

if (!validateForm()) {
      return
    }

setIsLoading(true)

try {
      const response = await fetch("/api/auth/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, password }),
      })

const data = await response.json()

if (response.ok && data.success) {
        setSuccess("Login successful! Redirecting...")
        localStorage.setItem("user", JSON.stringify(data.user))
        localStorage.setItem("isLoggedIn", "true")

setTimeout(() => {
          router.push("/dashboard")
        }, 1000)
      } else {
        setError(data.message || "Login failed. Please check your credentials.")
      }
    } catch (error) {
      console.error("Login error:", error)
      setError("Network error. Please check your connection and try again.")
    } finally {
      setIsLoading(false)
    }
  }

const handleGoogleLogin = async () => {
    setError("")
    setSuccess("")
    setIsGoogleLoading(true)

try {
      // Simulate Google OAuth flow
      const response = await fetch("/api/auth/google", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
      })

const data = await response.json()

if (response.ok && data.success) {
        setSuccess("Google login successful! Redirecting...")
        localStorage.setItem("user", JSON.stringify(data.user))
        localStorage.setItem("isLoggedIn", "true")

setTimeout(() => {
          router.push("/dashboard")
        }, 1500)
      } else {
        setError(data.message || "Google login failed. Please try again.")
      }
    } catch (error) {
      console.error("Google login error:", error)
      setError("Google login failed. Please try again.")
    } finally {
      setIsGoogleLoading(false)
    }
  }

const handleFacebookLogin = async () => {
    setError("")
    setSuccess("")
    setIsFacebookLoading(true)

try {
      // Simulate Facebook OAuth flow
      const response = await fetch("/api/auth/facebook", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
      })

const data = await response.json()

if (response.ok && data.success) {
        setSuccess("Facebook login successful! Redirecting...")
        localStorage.setItem("user", JSON.stringify(data.user))
        localStorage.setItem("isLoggedIn", "true")

setTimeout(() => {
          router.push("/dashboard")
        }, 1500)
      } else {
        setError(data.message || "Facebook login failed. Please try again.")
      }
    } catch (error) {
      console.error("Facebook login error:", error)
      setError("Facebook login failed. Please try again.")
    } finally {
      setIsFacebookLoading(false)
    }
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-green-50 to-teal-50 flex items-center justify-center p-4">
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <CardTitle className="text-2xl font-bold text-green-700">Welcome Back</CardTitle>
          <CardDescription>Sign in to your HealthAI account</CardDescription>
        </CardHeader>
        <CardContent>
          {error && (
            <Alert variant="destructive" className="mb-4">
              <AlertCircle className="h-4 w-4" />
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}

{success && (
            <Alert className="mb-4 border-green-200 bg-green-50">
              <CheckCircle className="h-4 w-4 text-green-600" />
              <AlertDescription className="text-green-700">{success}</AlertDescription>
            </Alert>
          )}

<form onSubmit={handleLogin} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="email">Email Address</Label>
              <Input
                id="email"
                type="email"
                placeholder="Enter your email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
                className="w-full"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="password">Password</Label>
              <div className="relative">
                <Input
                  id="password"
                  type={showPassword ? "text" : "password"}
                  placeholder="Enter your password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  required
                  className="w-full pr-10"
                />
                <button
                  type="button"
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
                >
                  {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
                </button>
              </div>
            </div>

<div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <input type="checkbox" id="remember" className="rounded" />
                <Label htmlFor="remember" className="text-sm">
                  Remember me
                </Label>
              </div>
              <Link href="/auth/forgot-password" className="text-sm text-green-600 hover:underline">
                Forgot password?
              </Link>
            </div>

<Button
              type="submit"
              className="w-full bg-gradient-to-r from-green-500 to-teal-500 hover:from-green-600 hover:to-teal-600"
              disabled={isLoading}
            >
              {isLoading ? "Signing in..." : "Sign In"}
            </Button>
          </form>

<div className="mt-6">
            <div className="relative">
              <div className="absolute inset-0 flex items-center">
                <span className="w-full border-t" />
              </div>
              <div className="relative flex justify-center text-xs uppercase">
                <span className="bg-white px-2 text-gray-500">Or continue with</span>
              </div>
            </div>

<div className="mt-4 grid grid-cols-2 gap-3">
              <Button
                variant="outline"
                className="w-full bg-transparent hover:bg-gray-50"
                onClick={handleGoogleLogin}
                disabled={isGoogleLoading}
              >
                {isGoogleLoading ? (
                  <div className="w-5 h-5 mr-2 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600"></div>
                ) : (
                  <svg className="w-5 h-5 mr-2" viewBox="0 0 24 24">
                    <path
                      fill="#4285F4"
                      d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
                    />
                    <path
                      fill="#34A853"
                      d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                    />
                    <path
                      fill="#FBBC04"
                      d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
                    />
                    <path
                      fill="#EA4335"
                      d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                    />
                  </svg>
                )}
                {isGoogleLoading ? "Connecting..." : "Google"}
              </Button>

<Button
                variant="outline"
                className="w-full bg-transparent hover:bg-gray-50"
                onClick={handleFacebookLogin}
                disabled={isFacebookLoading}
              >
                {isFacebookLoading ? (
                  <div className="w-5 h-5 mr-2 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600"></div>
                ) : (
                  <svg className="w-5 h-5 mr-2" fill="#1877F2" viewBox="0 0 24 24">
                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
                  </svg>
                )}
                {isFacebookLoading ? "Connecting..." : "Facebook"}
              </Button>
            </div>
          </div>

<div className="mt-6 text-center">
            <p className="text-sm text-gray-600">
              Don't have an account?{" "}
              <Link href="/auth/signup" className="text-green-600 hover:underline font-medium">
                Create account
              </Link>
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/auth/google/route.ts" isMerged="true"
import { NextResponse } from "next/server"

// Mock Google user data - In production, this would come from Google OAuth
const mockGoogleUsers = [
  {
    id: 101,
    name: "Google User",
    email: "googleuser@gmail.com",
    avatar: "/placeholder.svg?height=40&width=40&text=GU",
    provider: "google",
    joinDate: new Date().toISOString().split("T")[0],
  },
  {
    id: 102,
    name: "John Google",
    email: "john.google@gmail.com",
    avatar: "/placeholder.svg?height=40&width=40&text=JG",
    provider: "google",
    joinDate: new Date().toISOString().split("T")[0],
  },
]

export async function POST(request: Request) {
  try {
    // Simulate Google OAuth verification delay
    await new Promise((resolve) => setTimeout(resolve, 1500))

// In a real implementation, you would:
    // 1. Verify the Google OAuth token
    // 2. Get user info from Google API
    // 3. Create or update user in your database

// For demo purposes, we'll simulate a successful Google login
    const randomUser = mockGoogleUsers[Math.floor(Math.random() * mockGoogleUsers.length)]

// Simulate 90% success rate
    const isSuccess = Math.random() > 0.1

if (!isSuccess) {
      return NextResponse.json(
        {
          success: false,
          message: "Google authentication failed. Please try again.",
        },
        { status: 401 },
      )
    }

return NextResponse.json({
      success: true,
      message: "Google login successful",
      user: {
        ...randomUser,
        loginMethod: "google",
        lastLogin: new Date().toISOString(),
      },
    })
  } catch (error) {
    console.error("Google auth error:", error)
    return NextResponse.json(
      {
        success: false,
        message: "Google authentication service unavailable",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="app/api/auth/facebook/route.ts" isMerged="true"
import { NextResponse } from "next/server"

// Mock Facebook user data - In production, this would come from Facebook OAuth
const mockFacebookUsers = [
  {
    id: 201,
    name: "Facebook User",
    email: "fbuser@facebook.com",
    avatar: "/placeholder.svg?height=40&width=40&text=FB",
    provider: "facebook",
    joinDate: new Date().toISOString().split("T")[0],
  },
  {
    id: 202,
    name: "Jane Facebook",
    email: "jane.facebook@fb.com",
    avatar: "/placeholder.svg?height=40&width=40&text=JF",
    provider: "facebook",
    joinDate: new Date().toISOString().split("T")[0],
  },
]

export async function POST(request: Request) {
  try {
    // Simulate Facebook OAuth verification delay
    await new Promise((resolve) => setTimeout(resolve, 1200))

// In a real implementation, you would:
    // 1. Verify the Facebook OAuth token
    // 2. Get user info from Facebook Graph API
    // 3. Create or update user in your database

// For demo purposes, we'll simulate a successful Facebook login
    const randomUser = mockFacebookUsers[Math.floor(Math.random() * mockFacebookUsers.length)]

// Simulate 85% success rate
    const isSuccess = Math.random() > 0.15

if (!isSuccess) {
      return NextResponse.json(
        {
          success: false,
          message: "Facebook authentication failed. Please try again.",
        },
        { status: 401 },
      )
    }

return NextResponse.json({
      success: true,
      message: "Facebook login successful",
      user: {
        ...randomUser,
        loginMethod: "facebook",
        lastLogin: new Date().toISOString(),
      },
    })
  } catch (error) {
    console.error("Facebook auth error:", error)
    return NextResponse.json(
      {
        success: false,
        message: "Facebook authentication service unavailable",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="app/auth/signup/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Progress } from "@/components/ui/progress"
import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { Eye, EyeOff, AlertCircle, CheckCircle, User, Mail, Lock } from "lucide-react"

export default function SignupPage() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    password: "",
    confirmPassword: "",
  })
  const [isLoading, setIsLoading] = useState(false)
  const [isGoogleLoading, setIsGoogleLoading] = useState(false)
  const [isFacebookLoading, setIsFacebookLoading] = useState(false)
  const [showPassword, setShowPassword] = useState(false)
  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
  const [error, setError] = useState("")
  const [success, setSuccess] = useState("")
  const [acceptTerms, setAcceptTerms] = useState(false)
  const router = useRouter()

const getPasswordStrength = (password: string) => {
    let strength = 0
    if (password.length >= 8) strength += 25
    if (/[A-Z]/.test(password)) strength += 25
    if (/[a-z]/.test(password)) strength += 25
    if (/[0-9]/.test(password)) strength += 25
    return strength
  }

const getPasswordStrengthText = (strength: number) => {
    if (strength < 25) return "Very Weak"
    if (strength < 50) return "Weak"
    if (strength < 75) return "Good"
    return "Strong"
  }

const getPasswordStrengthColor = (strength: number) => {
    if (strength < 25) return "bg-red-500"
    if (strength < 50) return "bg-orange-500"
    if (strength < 75) return "bg-yellow-500"
    return "bg-green-500"
  }

const validateForm = () => {
    if (!formData.name.trim()) {
      setError("Full name is required")
      return false
    }
    if (formData.name.trim().length < 2) {
      setError("Name must be at least 2 characters")
      return false
    }
    if (!formData.email) {
      setError("Email is required")
      return false
    }
    if (!formData.email.includes("@")) {
      setError("Please enter a valid email address")
      return false
    }
    if (!formData.password) {
      setError("Password is required")
      return false
    }
    if (formData.password.length < 8) {
      setError("Password must be at least 8 characters")
      return false
    }
    if (formData.password !== formData.confirmPassword) {
      setError("Passwords do not match")
      return false
    }
    if (!acceptTerms) {
      setError("Please accept the terms and conditions")
      return false
    }
    return true
  }

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleSignup = async (e: React.FormEvent) => {
    e.preventDefault()
    setError("")
    setSuccess("")

if (!validateForm()) {
      return
    }

setIsLoading(true)

try {
      const response = await fetch("/api/auth/signup", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(formData),
      })

const data = await response.json()

if (response.ok && data.success) {
        setSuccess("Account created successfully! Redirecting to login...")
        setTimeout(() => {
          router.push("/auth/login")
        }, 2000)
      } else {
        setError(data.message || "Signup failed. Please try again.")
      }
    } catch (error) {
      console.error("Signup error:", error)
      setError("Network error. Please check your connection and try again.")
    } finally {
      setIsLoading(false)
    }
  }

const handleGoogleSignup = async () => {
    setError("")
    setSuccess("")
    setIsGoogleLoading(true)

try {
      const response = await fetch("/api/auth/google", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
      })

const data = await response.json()

if (response.ok && data.success) {
        setSuccess("Google signup successful! Redirecting...")
        localStorage.setItem("user", JSON.stringify(data.user))
        localStorage.setItem("isLoggedIn", "true")

setTimeout(() => {
          router.push("/dashboard")
        }, 1500)
      } else {
        setError(data.message || "Google signup failed. Please try again.")
      }
    } catch (error) {
      console.error("Google signup error:", error)
      setError("Google signup failed. Please try again.")
    } finally {
      setIsGoogleLoading(false)
    }
  }

const handleFacebookSignup = async () => {
    setError("")
    setSuccess("")
    setIsFacebookLoading(true)

try {
      const response = await fetch("/api/auth/facebook", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
      })

const data = await response.json()

if (response.ok && data.success) {
        setSuccess("Facebook signup successful! Redirecting...")
        localStorage.setItem("user", JSON.stringify(data.user))
        localStorage.setItem("isLoggedIn", "true")

setTimeout(() => {
          router.push("/dashboard")
        }, 1500)
      } else {
        setError(data.message || "Facebook signup failed. Please try again.")
      }
    } catch (error) {
      console.error("Facebook signup error:", error)
      setError("Facebook signup failed. Please try again.")
    } finally {
      setIsFacebookLoading(false)
    }
  }

const passwordStrength = getPasswordStrength(formData.password)

return (
    <div className="min-h-screen bg-gradient-to-br from-green-50 to-teal-50 flex items-center justify-center p-4">
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <CardTitle className="text-2xl font-bold text-green-700">Create Account</CardTitle>
          <CardDescription>Join HealthAI for personalized health guidance</CardDescription>
        </CardHeader>
        <CardContent>
          {error && (
            <Alert variant="destructive" className="mb-4">
              <AlertCircle className="h-4 w-4" />
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}

<div className="space-y-2">
              <Label htmlFor="email">Email Address</Label>
              <div className="relative">
                <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={18} />
                <Input
                  id="email"
                  name="email"
                  type="email"
                  placeholder="Enter your email"
                  value={formData.email}
                  onChange={handleInputChange}
                  required
                  className="pl-10"
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="password">Password</Label>
              <div className="relative">
                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={18} />
                <Input
                  id="password"
                  name="password"
                  type={showPassword ? "text" : "password"}
                  placeholder="Create a password"
                  value={formData.password}
                  onChange={handleInputChange}
                  required
                  className="pl-10 pr-10"
                />
                <button
                  type="button"
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
                >
                  {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
                </button>
              </div>
              {formData.password && (
                <div className="space-y-2">
                  <div className="flex justify-between text-sm">
                    <span>Password Strength:</span>
                    <span
                      className={`font-medium ${passwordStrength >= 75 ? "text-green-600" : passwordStrength >= 50 ? "text-yellow-600" : "text-red-600"}`}
                    >
                      {getPasswordStrengthText(passwordStrength)}
                    </span>
                  </div>
                  <Progress value={passwordStrength} className="h-2" />
                </div>
              )}
            </div>

<div className="space-y-2">
              <Label htmlFor="confirmPassword">Confirm Password</Label>
              <div className="relative">
                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={18} />
                <Input
                  id="confirmPassword"
                  name="confirmPassword"
                  type={showConfirmPassword ? "text" : "password"}
                  placeholder="Confirm your password"
                  value={formData.confirmPassword}
                  onChange={handleInputChange}
                  required
                  className="pl-10 pr-10"
                />
                <button
                  type="button"
                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
                >
                  {showConfirmPassword ? <EyeOff size={18} /> : <Eye size={18} />}
                </button>
              </div>
            </div>

<div className="flex items-center space-x-2">
              <input
                type="checkbox"
                id="terms"
                checked={acceptTerms}
                onChange={(e) => setAcceptTerms(e.target.checked)}
                className="rounded"
              />
              <Label htmlFor="terms" className="text-sm">
                I agree to the{" "}
                <Link href="/terms" className="text-green-600 hover:underline">
                  Terms of Service
                </Link>{" "}
                and{" "}
                <Link href="/privacy" className="text-green-600 hover:underline">
                  Privacy Policy
                </Link>
              </Label>
            </div>

<Button
              type="submit"
              className="w-full bg-gradient-to-r from-green-500 to-teal-500 hover:from-green-600 hover:to-teal-600"
              disabled={isLoading}
            >
              {isLoading ? "Creating Account..." : "Create Account"}
            </Button>
          </form>

<div className="mt-4 grid grid-cols-2 gap-3">
              <Button
                variant="outline"
                className="w-full bg-transparent hover:bg-gray-50"
                onClick={handleGoogleSignup}
                disabled={isGoogleLoading}
              >
                {isGoogleLoading ? (
                  <div className="w-5 h-5 mr-2 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600"></div>
                ) : (
                  <svg className="w-5 h-5 mr-2" viewBox="0 0 24 24">
                    <path
                      fill="#4285F4"
                      d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
                    />
                    <path
                      fill="#34A853"
                      d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                    />
                    <path
                      fill="#FBBC04"
                      d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
                    />
                    <path
                      fill="#EA4335"
                      d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                    />
                  </svg>
                )}
                {isGoogleLoading ? "Connecting..." : "Google"}
              </Button>

<Button
                variant="outline"
                className="w-full bg-transparent hover:bg-gray-50"
                onClick={handleFacebookSignup}
                disabled={isFacebookLoading}
              >
                {isFacebookLoading ? (
                  <div className="w-5 h-5 mr-2 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600"></div>
                ) : (
                  <svg className="w-5 h-5 mr-2" fill="#1877F2" viewBox="0 0 24 24">
                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
                  </svg>
                )}
                {isFacebookLoading ? "Connecting..." : "Facebook"}
              </Button>
            </div>
          </div>

<div className="mt-6 text-center">
            <p className="text-sm text-gray-600">
              Already have an account?{" "}
              <Link href="/auth/login" className="text-green-600 hover:underline font-medium">
                Sign in
              </Link>
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/auth/signup/route.ts" isEdit="true" isMerged="true"
import { NextResponse } from "next/server"

// Mock user database - In production, use a real database
const users = [
  {
    id: 1,
    name: "John Doe",
    email: "john@example.com",
    password: "password123",
    avatar: "/placeholder.svg?height=40&width=40&text=JD",
    joinDate: "2024-01-15",
  },
  {
    id: 2,
    name: "Jane Smith",
    email: "jane@example.com",
    password: "password123",
    avatar: "/placeholder.svg?height=40&width=40&text=JS",
    joinDate: "2024-02-20",
  },
  {
    id: 3,
    name: "Demo User",
    email: "demo@healthai.com",
    password: "demo123",
    avatar: "/placeholder.svg?height=40&width=40&text=DU",
    joinDate: "2024-03-01",
  },
]

export async function POST(request: Request) {
  try {
    const { name, email, password, confirmPassword } = await request.json()

// Validate input
    if (!name || !email || !password || !confirmPassword) {
      return NextResponse.json({ success: false, message: "All fields are required" }, { status: 400 })
    }

if (name.trim().length < 2) {
      return NextResponse.json({ success: false, message: "Name must be at least 2 characters" }, { status: 400 })
    }

if (!email.includes("@")) {
      return NextResponse.json({ success: false, message: "Please enter a valid email address" }, { status: 400 })
    }

if (password.length < 8) {
      return NextResponse.json({ success: false, message: "Password must be at least 8 characters" }, { status: 400 })
    }

if (password !== confirmPassword) {
      return NextResponse.json({ success: false, message: "Passwords do not match" }, { status: 400 })
    }

// Check if user already exists
    const existingUser = users.find((u) => u.email.toLowerCase() === email.toLowerCase())
    if (existingUser) {
      return NextResponse.json(
        { success: false, message: "An account with this email already exists" },
        { status: 409 },
      )
    }

// Simulate database save delay
    await new Promise((resolve) => setTimeout(resolve, 800))

// Create new user
    const newUser = {
      id: users.length + 1,
      name: name.trim(),
      email: email.toLowerCase(),
      password, // In production, hash this password
      avatar: `/placeholder.svg?height=40&width=40&text=${name.charAt(0).toUpperCase()}${name.split(" ")[1]?.charAt(0).toUpperCase() || ""}`,
      joinDate: new Date().toISOString().split("T")[0],
    }

users.push(newUser)

// Return user without password
    const { password: _, ...userWithoutPassword } = newUser

return NextResponse.json({
      success: true,
      message: "Account created successfully",
      user: userWithoutPassword,
    })
  } catch (error) {
    console.error("Signup error:", error)
    return NextResponse.json({ success: false, message: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/chat/training/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Brain, Download, Upload, Trash2, Plus, Edit, FileText, Database, Zap, Target, TrendingUp } from "lucide-react"
import Link from "next/link"

interface TrainingData {
  id: string
  question: string
  answer: string
  category: string
  confidence: number
  usage: number
  lastUsed: Date
  effectiveness: number
}

interface AIModel {
  id: string
  name: string
  version: string
  accuracy: number
  trainingData: number
  lastTrained: Date
  status: "active" | "training" | "inactive"
}

export default function AITrainingPage() {
  const [trainingData, setTrainingData] = useState<TrainingData[]>([])
  const [models, setModels] = useState<AIModel[]>([])
  const [isTraining, setIsTraining] = useState(false)
  const [trainingProgress, setTrainingProgress] = useState(0)
  const [newQuestion, setNewQuestion] = useState("")
  const [newAnswer, setNewAnswer] = useState("")
  const [newCategory, setNewCategory] = useState("")
  const [editingId, setEditingId] = useState<string | null>(null)
  const [selectedCategory, setSelectedCategory] = useState("all")

// Initialize data
  useEffect(() => {
    const mockTrainingData: TrainingData[] = [
      {
        id: "1",
        question: "What helps with headaches?",
        answer:
          "For headaches, try peppermint oil massage on temples, cold compress for 15 minutes, ginger tea, or gentle neck stretches. Stay hydrated and rest in a dark room.",
        category: "Pain Management",
        confidence: 95,
        usage: 156,
        lastUsed: new Date("2024-01-10"),
        effectiveness: 4.8,
      },
      {
        id: "2",
        question: "How to treat stomach pain naturally?",
        answer:
          "For stomach pain, drink ginger tea, try fennel seed water, use warm compress on abdomen, or practice wind-relieving yoga pose. Avoid spicy foods and eat smaller meals.",
        category: "Digestive Health",
        confidence: 92,
        usage: 203,
        lastUsed: new Date("2024-01-12"),
        effectiveness: 4.6,
      },
      {
        id: "3",
        question: "Best yoga for anxiety?",
        answer:
          "For anxiety, practice deep breathing (pranayama), child's pose, legs up the wall, gentle forward folds, and meditation. Focus on slow, mindful movements.",
        category: "Mental Health",
        confidence: 88,
        usage: 89,
        lastUsed: new Date("2024-01-08"),
        effectiveness: 4.7,
      },
      {
        id: "4",
        question: "Natural remedies for insomnia?",
        answer:
          "For better sleep, try chamomile tea, warm milk with nutmeg, lavender oil, avoid screens before bed, and practice legs up the wall pose or body scan meditation.",
        category: "Sleep Disorders",
        confidence: 90,
        usage: 134,
        lastUsed: new Date("2024-01-11"),
        effectiveness: 4.5,
      },
      {
        id: "5",
        question: "How to reduce high blood pressure?",
        answer:
          "To lower blood pressure naturally, eat garlic daily, drink hibiscus tea, reduce salt intake, practice gentle yoga, meditation, and maintain healthy weight.",
        category: "Cardiovascular",
        confidence: 85,
        usage: 67,
        lastUsed: new Date("2024-01-09"),
        effectiveness: 4.4,
      },
    ]

const mockModels: AIModel[] = [
      {
        id: "1",
        name: "Health Companion v3.2",
        version: "3.2.1",
        accuracy: 94.5,
        trainingData: 2847,
        lastTrained: new Date("2024-01-10"),
        status: "active",
      },
      {
        id: "2",
        name: "Ayurveda Specialist v2.1",
        version: "2.1.3",
        accuracy: 91.2,
        trainingData: 1523,
        lastTrained: new Date("2024-01-08"),
        status: "inactive",
      },
      {
        id: "3",
        name: "Yoga Therapy v1.8",
        version: "1.8.2",
        accuracy: 89.7,
        trainingData: 956,
        lastTrained: new Date("2024-01-05"),
        status: "training",
      },
    ]

setTrainingData(mockTrainingData)
    setModels(mockModels)
  }, [])

const categories = [
    "all",
    "Pain Management",
    "Digestive Health",
    "Mental Health",
    "Sleep Disorders",
    "Cardiovascular",
    "Respiratory",
    "Skin Care",
  ]

const filteredData =
    selectedCategory === "all" ? trainingData : trainingData.filter((item) => item.category === selectedCategory)

const addTrainingData = () => {
    if (!newQuestion.trim() || !newAnswer.trim() || !newCategory.trim()) return

const newData: TrainingData = {
      id: Date.now().toString(),
      question: newQuestion,
      answer: newAnswer,
      category: newCategory,
      confidence: 0,
      usage: 0,
      lastUsed: new Date(),
      effectiveness: 0,
    }

setTrainingData([...trainingData, newData])
    setNewQuestion("")
    setNewAnswer("")
    setNewCategory("")
  }

const deleteTrainingData = (id: string) => {
    setTrainingData(trainingData.filter((item) => item.id !== id))
  }

const startTraining = async () => {
    setIsTraining(true)
    setTrainingProgress(0)

// Simulate training progress
    for (let i = 0; i <= 100; i += 5) {
      await new Promise((resolve) => setTimeout(resolve, 200))
      setTrainingProgress(i)
    }

// Update model after training
    setModels(
      models.map((model) =>
        model.id === "1"
          ? {
              ...model,
              accuracy: Math.min(model.accuracy + Math.random() * 2, 99),
              trainingData: trainingData.length,
              lastTrained: new Date(),
              version: `3.2.${Number.parseInt(model.version.split(".")[2]) + 1}`,
            }
          : model,
      ),
    )

setIsTraining(false)
    setTrainingProgress(0)
  }

const exportTrainingData = () => {
    const dataToExport = {
      models: models,
      trainingData: trainingData,
      exportDate: new Date().toISOString(),
      totalQuestions: trainingData.length,
      categories: categories.filter((cat) => cat !== "all"),
      statistics: {
        averageConfidence: trainingData.reduce((sum, item) => sum + item.confidence, 0) / trainingData.length,
        totalUsage: trainingData.reduce((sum, item) => sum + item.usage, 0),
        averageEffectiveness: trainingData.reduce((sum, item) => sum + item.effectiveness, 0) / trainingData.length,
      },
    }

const blob = new Blob([JSON.stringify(dataToExport, null, 2)], { type: "application/json" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `health-ai-training-data-${new Date().toISOString().split("T")[0]}.json`
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    URL.revokeObjectURL(url)
  }

const importTrainingData = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (!file) return

const reader = new FileReader()
    reader.onload = (e) => {
      try {
        const importedData = JSON.parse(e.target?.result as string)
        if (importedData.trainingData) {
          setTrainingData([...trainingData, ...importedData.trainingData])
        }
      } catch (error) {
        console.error("Error importing data:", error)
      }
    }
    reader.readAsText(file)
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50 p-4">
      <div className="max-w-7xl mx-auto space-y-6">
        {/* Header */}
        <div className="text-center space-y-4">
          <h1 className="text-4xl font-bold text-gray-900 flex items-center justify-center space-x-3">
            <Brain className="w-10 h-10 text-blue-600" />
            <span>AI Training Center</span>
          </h1>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            Train and improve the Health Companion AI with new knowledge, export training data, and monitor model
            performance.
          </p>
        </div>

{/* Quick Stats */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          <Card>
            <CardContent className="p-4">
              <div className="flex items-center space-x-3">
                <Database className="w-8 h-8 text-blue-600" />
                <div>
                  <p className="text-sm text-gray-600">Training Data</p>
                  <p className="text-2xl font-bold">{trainingData.length}</p>
                </div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-4">
              <div className="flex items-center space-x-3">
                <Target className="w-8 h-8 text-green-600" />
                <div>
                  <p className="text-sm text-gray-600">Avg Accuracy</p>
                  <p className="text-2xl font-bold">
                    {(models.reduce((sum, model) => sum + model.accuracy, 0) / models.length).toFixed(1)}%
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-4">
              <div className="flex items-center space-x-3">
                <TrendingUp className="w-8 h-8 text-purple-600" />
                <div>
                  <p className="text-sm text-gray-600">Total Usage</p>
                  <p className="text-2xl font-bold">{trainingData.reduce((sum, item) => sum + item.usage, 0)}</p>
                </div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-4">
              <div className="flex items-center space-x-3">
                <Zap className="w-8 h-8 text-orange-600" />
                <div>
                  <p className="text-sm text-gray-600">Active Models</p>
                  <p className="text-2xl font-bold">{models.filter((model) => model.status === "active").length}</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

{/* AI Models */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Brain className="w-5 h-5" />
              <span>AI Models</span>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {models.map((model) => (
                <div key={model.id} className="flex items-center justify-between p-4 border rounded-lg">
                  <div className="flex items-center space-x-4">
                    <div
                      className={`w-3 h-3 rounded-full ${
                        model.status === "active"
                          ? "bg-green-500"
                          : model.status === "training"
                            ? "bg-yellow-500"
                            : "bg-gray-400"
                      }`}
                    ></div>
                    <div>
                      <h3 className="font-semibold">{model.name}</h3>
                      <p className="text-sm text-gray-600">Version {model.version}</p>
                    </div>
                  </div>
                  <div className="flex items-center space-x-6">
                    <div className="text-center">
                      <p className="text-sm text-gray-600">Accuracy</p>
                      <p className="font-semibold">{model.accuracy}%</p>
                    </div>
                    <div className="text-center">
                      <p className="text-sm text-gray-600">Training Data</p>
                      <p className="font-semibold">{model.trainingData}</p>
                    </div>
                    <div className="text-center">
                      <p className="text-sm text-gray-600">Last Trained</p>
                      <p className="font-semibold">{model.lastTrained.toLocaleDateString()}</p>
                    </div>
                    <Badge variant={model.status === "active" ? "default" : "secondary"}>{model.status}</Badge>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

{/* Training Controls */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Training Progress */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Zap className="w-5 h-5" />
                <span>Model Training</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              {isTraining && (
                <div className="space-y-2">
                  <div className="flex justify-between text-sm">
                    <span>Training Progress</span>
                    <span>{trainingProgress}%</span>
                  </div>
                  <Progress value={trainingProgress} className="w-full" />
                </div>
              )}
              <Button onClick={startTraining} disabled={isTraining} className="w-full">
                {isTraining ? "Training in Progress..." : "Start Training"}
              </Button>
              <p className="text-sm text-gray-600">
                Training will improve the AI model using current training data ({trainingData.length} questions).
              </p>
            </CardContent>
          </Card>

{/* Export/Import */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <FileText className="w-5 h-5" />
                <span>Data Management</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <Button onClick={exportTrainingData} className="w-full bg-transparent" variant="outline">
                <Download className="w-4 h-4 mr-2" />
                Export Training Data
              </Button>
              <div>
                <input type="file" accept=".json" onChange={importTrainingData} className="hidden" id="import-file" />
                <Button asChild className="w-full bg-transparent" variant="outline">
                  <label htmlFor="import-file" className="cursor-pointer">
                    <Upload className="w-4 h-4 mr-2" />
                    Import Training Data
                  </label>
                </Button>
              </div>
              <p className="text-sm text-gray-600">
                Export your training data for backup or import additional training sets.
              </p>
            </CardContent>
          </Card>
        </div>

{/* Add New Training Data */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Plus className="w-5 h-5" />
              <span>Add Training Data</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
              <Input
                placeholder="Enter question..."
                value={newQuestion}
                onChange={(e) => setNewQuestion(e.target.value)}
              />
              <Input
                placeholder="Category (e.g., Pain Management)"
                value={newCategory}
                onChange={(e) => setNewCategory(e.target.value)}
              />
              <Button onClick={addTrainingData}>
                <Plus className="w-4 h-4 mr-2" />
                Add Data
              </Button>
            </div>
            <Textarea
              placeholder="Enter detailed answer with remedies, yoga poses, and tips..."
              value={newAnswer}
              onChange={(e) => setNewAnswer(e.target.value)}
              rows={3}
            />
          </CardContent>
        </Card>

{/* Training Data List */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <Database className="w-5 h-5" />
                <span>Training Data ({filteredData.length})</span>
              </div>
              <div className="flex items-center space-x-2">
                <select
                  value={selectedCategory}
                  onChange={(e) => setSelectedCategory(e.target.value)}
                  className="px-3 py-1 border rounded-md text-sm"
                >
                  {categories.map((category) => (
                    <option key={category} value={category}>
                      {category === "all" ? "All Categories" : category}
                    </option>
                  ))}
                </select>
              </div>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {filteredData.map((item) => (
                <div key={item.id} className="border rounded-lg p-4 space-y-3">
                  <div className="flex items-start justify-between">
                    <div className="flex-1 space-y-2">
                      <div className="flex items-center space-x-3">
                        <h3 className="font-semibold text-lg">{item.question}</h3>
                        <Badge variant="secondary">{item.category}</Badge>
                      </div>
                      <p className="text-gray-700 leading-relaxed">{item.answer}</p>
                    </div>
                    <div className="flex items-center space-x-2 ml-4">
                      <Button size="sm" variant="outline">
                        <Edit className="w-4 h-4" />
                      </Button>
                      <Button size="sm" variant="outline" onClick={() => deleteTrainingData(item.id)}>
                        <Trash2 className="w-4 h-4" />
                      </Button>
                    </div>
                  </div>
                  <div className="flex items-center justify-between text-sm text-gray-600">
                    <div className="flex items-center space-x-4">
                      <span>Confidence: {item.confidence}%</span>
                      <span>Usage: {item.usage}</span>
                      <span>Effectiveness: {item.effectiveness}/5</span>
                    </div>
                    <span>Last used: {item.lastUsed.toLocaleDateString()}</span>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

{/* Back to Chat */}
        <div className="text-center">
          <Link href="/chat">
            <Button
              size="lg"
              className="bg-gradient-to-r from-green-500 to-teal-500 hover:from-green-600 hover:to-teal-600"
            >
              Back to Health Chat
            </Button>
          </Link>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/ai/training/route.ts" isMerged="true"
import { NextResponse } from "next/server"

interface TrainingRequest {
  action: "train" | "export" | "import"
  data?: any
  modelId?: string
}

export async function POST(request: Request) {
  try {
    const { action, data, modelId }: TrainingRequest = await request.json()

// Simulate processing delay
    await new Promise((resolve) => setTimeout(resolve, 1000))

switch (action) {
      case "train":
        // Simulate AI model training
        const trainingResult = {
          success: true,
          modelId: modelId || "health-companion-v3.2",
          previousAccuracy: 94.5,
          newAccuracy: Math.min(94.5 + Math.random() * 3, 99),
          trainingTime: Math.floor(Math.random() * 300) + 60, // 1-5 minutes
          dataPointsProcessed: data?.length || 0,
          improvements: [
            "Enhanced symptom recognition accuracy",
            "Improved remedy recommendations",
            "Better yoga pose suggestions",
            "More personalized responses",
          ],
        }

return NextResponse.json({
          message: "Model training completed successfully!",
          result: trainingResult,
        })

case "export":
        // Generate comprehensive export data
        const exportData = {
          exportId: `export_${Date.now()}`,
          timestamp: new Date().toISOString(),
          version: "3.2.1",
          totalQuestions: data?.trainingData?.length || 0,
          categories: [
            "Pain Management",
            "Digestive Health",
            "Mental Health",
            "Sleep Disorders",
            "Cardiovascular",
            "Respiratory",
            "Skin Care",
          ],
          models: data?.models || [],
          trainingData: data?.trainingData || [],
          statistics: {
            averageConfidence: 91.2,
            totalUsage: 1247,
            averageEffectiveness: 4.6,
            topCategories: [
              { name: "Pain Management", count: 45 },
              { name: "Digestive Health", count: 38 },
              { name: "Mental Health", count: 32 },
            ],
          },
          metadata: {
            exportFormat: "JSON",
            compression: "none",
            fileSize: "2.4 MB",
            checksum: "sha256:a1b2c3d4e5f6...",
          },
        }

return NextResponse.json({
          message: "Training data exported successfully!",
          data: exportData,
          downloadUrl: `/api/ai/training/download/${exportData.exportId}`,
        })

case "import":
        // Validate and process imported data
        const importResult = {
          success: true,
          imported: {
            questions: data?.trainingData?.length || 0,
            categories: data?.categories?.length || 0,
            models: data?.models?.length || 0,
          },
          validation: {
            duplicatesFound: Math.floor(Math.random() * 5),
            invalidEntries: Math.floor(Math.random() * 2),
            successfulImports: data?.trainingData?.length - Math.floor(Math.random() * 7) || 0,
          },
          warnings: ["Some duplicate questions were skipped", "2 entries had invalid format and were corrected"],
        }

return NextResponse.json({
          message: "Training data imported successfully!",
          result: importResult,
        })

default:
        return NextResponse.json({ error: "Invalid action specified" }, { status: 400 })
    }
  } catch (error) {
    console.error("AI Training API Error:", error)
    return NextResponse.json({ error: "Failed to process AI training request" }, { status: 500 })
  }
}

export async function GET(request: Request) {
  try {
    // Return current AI training statistics
    const stats = {
      models: [
        {
          id: "health-companion-v3.2",
          name: "Health Companion v3.2",
          version: "3.2.1",
          accuracy: 94.5,
          trainingData: 2847,
          lastTrained: new Date().toISOString(),
          status: "active",
          capabilities: [
            "Symptom analysis",
            "Remedy recommendations",
            "Yoga pose suggestions",
            "Lifestyle advice",
            "Multi-language support",
          ],
        },
        {
          id: "ayurveda-specialist-v2.1",
          name: "Ayurveda Specialist v2.1",
          version: "2.1.3",
          accuracy: 91.2,
          trainingData: 1523,
          lastTrained: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
          status: "inactive",
          capabilities: [
            "Traditional Ayurvedic remedies",
            "Dosha analysis",
            "Herbal recommendations",
            "Seasonal health advice",
          ],
        },
      ],
      trainingMetrics: {
        totalQuestions: 2847,
        totalCategories: 12,
        averageAccuracy: 92.85,
        totalUsage: 15634,
        lastTrainingSession: new Date().toISOString(),
        trainingFrequency: "Weekly",
        dataQuality: 96.3,
      },
      performance: {
        responseTime: "1.2s",
        uptime: "99.9%",
        userSatisfaction: 4.7,
        accuracyTrend: "+2.3% this month",
      },
    }

return NextResponse.json(stats)
  } catch (error) {
    console.error("AI Training Stats Error:", error)
    return NextResponse.json({ error: "Failed to fetch AI training statistics" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/chat/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Send, Bot, User, Sparkles, Leaf, Brain, Download, Settings } from "lucide-react"
import { useState, useRef, useEffect } from "react"
import Link from "next/link"

interface Message {
  id: string
  content: string
  sender: "user" | "ai"
  timestamp: Date
  diseaseCategory?: string
  disease?: string
  recommendations?: {
    remedies: string[]
    yoga: string[]
    lifestyle: string[]
  }
}

export default function ChatPage() {
  const [messages, setMessages] = useState<Message[]>([
    {
      id: "1",
      content:
        "Namaste! 🙏 I'm your personal AI health companion. I specialize in natural home remedies and yoga for all kinds of health issues. Think of me as your knowledgeable friend who's always here to help! \n\nWhat's troubling you today? You can tell me about any symptoms, health concerns, or just ask for general wellness advice. I'm here to listen and help! 😊",
      sender: "ai",
      timestamp: new Date(),
    },
  ])
  const [inputMessage, setInputMessage] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const [isTraining, setIsTraining] = useState(false)
  const messagesEndRef = useRef<HTMLDivElement>(null)

const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }

useEffect(() => {
    scrollToBottom()
  }, [messages])

const quickSuggestions = [
    "I have a headache",
    "Stomach pain problem",
    "Can't sleep well",
    "Back pain issue",
    "Feeling stressed",
    "Cold and cough",
    "Joint pain",
    "Skin problems",
  ]

const sendMessage = async (messageText?: string) => {
    const textToSend = messageText || inputMessage
    if (!textToSend.trim()) return

const userMessage: Message = {
      id: Date.now().toString(),
      content: textToSend,
      sender: "user",
      timestamp: new Date(),
    }

setMessages((prev) => [...prev, userMessage])
    setInputMessage("")
    setIsLoading(true)

try {
      const response = await fetch("/api/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ message: textToSend }),
      })

const data = await response.json()

const aiMessage: Message = {
        id: (Date.now() + 1).toString(),
        content: data.response,
        sender: "ai",
        timestamp: new Date(),
        diseaseCategory: data.diseaseCategory,
        disease: data.disease,
        recommendations: data.recommendations,
      }

setMessages((prev) => [...prev, aiMessage])
    } catch (error) {
      console.error("Error sending message:", error)
      const errorMessage: Message = {
        id: (Date.now() + 1).toString(),
        content: "I'm sorry, I'm having trouble connecting right now. Please try again in a moment. 😔",
        sender: "ai",
        timestamp: new Date(),
      }
      setMessages((prev) => [...prev, errorMessage])
    } finally {
      setIsLoading(false)
    }
  }

const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault()
      sendMessage()
    }
  }

const exportChatHistory = () => {
    const chatData = {
      exportDate: new Date().toISOString(),
      totalMessages: messages.length,
      userMessages: messages.filter((m) => m.sender === "user").length,
      aiResponses: messages.filter((m) => m.sender === "ai").length,
      categories: [...new Set(messages.map((m) => m.diseaseCategory).filter(Boolean))],
      messages: messages.map((msg) => ({
        ...msg,
        timestamp: msg.timestamp.toISOString(),
      })),
    }

const blob = new Blob([JSON.stringify(chatData, null, 2)], { type: "application/json" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `health-chat-history-${new Date().toISOString().split("T")[0]}.json`
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    URL.revokeObjectURL(url)
  }

const trainAIFromChat = async () => {
    setIsTraining(true)

// Extract training data from chat
    const trainingData = messages
      .filter((msg) => msg.sender === "user" && msg.recommendations)
      .map((userMsg) => {
        const aiResponse = messages.find(
          (m) => m.sender === "ai" && Number.parseInt(m.id) === Number.parseInt(userMsg.id) + 1,
        )

return {
          question: userMsg.content,
          answer: aiResponse?.content || "",
          category: userMsg.diseaseCategory || "General",
          recommendations: userMsg.recommendations,
        }
      })

try {
      const response = await fetch("/api/ai/training", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          action: "train",
          data: trainingData,
          modelId: "health-companion-v3.2",
        }),
      })

const result = await response.json()

if (result.success) {
        // Show success message
        const successMessage: Message = {
          id: Date.now().toString(),
          content: `🎉 Great! I've learned from our conversation and improved my knowledge. Training completed with ${trainingData.length} new data points. My accuracy has improved from ${result.result.previousAccuracy}% to ${result.result.newAccuracy.toFixed(1)}%!`,
          sender: "ai",
          timestamp: new Date(),
        }
        setMessages((prev) => [...prev, successMessage])
      }
    } catch (error) {
      console.error("Training error:", error)
    } finally {
      setIsTraining(false)
    }
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-green-50 to-teal-50">
      <div className="max-w-4xl mx-auto p-4">
        <Card className="h-[85vh] flex flex-col">
          <CardHeader className="bg-gradient-to-r from-green-500 to-teal-500 text-white rounded-t-lg">
            <CardTitle className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <div className="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center">
                  <Leaf className="w-5 h-5" />
                </div>
                <span>Natural Health Companion</span>
                <div className="flex items-center space-x-1">
                  <div className="w-2 h-2 bg-green-300 rounded-full animate-pulse"></div>
                  <span className="text-sm">Online</span>
                </div>
              </div>
              <div className="flex items-center space-x-2">
                <Button
                  size="sm"
                  variant="secondary"
                  onClick={exportChatHistory}
                  className="bg-white/20 hover:bg-white/30 text-white border-white/30"
                >
                  <Download className="w-4 h-4 mr-1" />
                  Export
                </Button>
                <Button
                  size="sm"
                  variant="secondary"
                  onClick={trainAIFromChat}
                  disabled={isTraining}
                  className="bg-white/20 hover:bg-white/30 text-white border-white/30"
                >
                  <Brain className="w-4 h-4 mr-1" />
                  {isTraining ? "Training..." : "Train AI"}
                </Button>
                <Link href="/chat/training">
                  <Button
                    size="sm"
                    variant="secondary"
                    className="bg-white/20 hover:bg-white/30 text-white border-white/30"
                  >
                    <Settings className="w-4 h-4 mr-1" />
                    AI Center
                  </Button>
                </Link>
              </div>
            </CardTitle>
          </CardHeader>

<CardContent className="flex-1 flex flex-col p-0">
            {/* Messages Area */}
            <div className="flex-1 overflow-y-auto p-4 space-y-4">
              {messages.map((message) => (
                <div key={message.id} className={`flex ${message.sender === "user" ? "justify-end" : "justify-start"}`}>
                  <div
                    className={`max-w-[80%] rounded-2xl p-4 ${
                      message.sender === "user"
                        ? "bg-gradient-to-r from-green-500 to-teal-500 text-white"
                        : "bg-white shadow-md border border-green-100"
                    }`}
                  >
                    <div className="flex items-start space-x-3">
                      {message.sender === "ai" && (
                        <div className="w-8 h-8 bg-gradient-to-r from-green-500 to-teal-500 rounded-full flex items-center justify-center flex-shrink-0">
                          <Bot className="w-5 h-5 text-white" />
                        </div>
                      )}
                      {message.sender === "user" && <User className="w-6 h-6 mt-1 flex-shrink-0" />}
                      <div className="flex-1">
                        <p
                          className={`text-sm leading-relaxed whitespace-pre-line ${
                            message.sender === "user" ? "text-white" : "text-gray-800"
                          }`}
                        >
                          {message.content}
                        </p>

{message.diseaseCategory && (
                          <div className="mt-3">
                            <Badge className="bg-green-100 text-green-700 mb-2">{message.diseaseCategory}</Badge>
                          </div>
                        )}

{message.recommendations && (
                          <div className="mt-4 space-y-3">
                            {message.recommendations.remedies.length > 0 && (
                              <div className="bg-green-50 p-3 rounded-lg">
                                <h4 className="font-semibold text-green-800 flex items-center space-x-1 mb-2">
                                  <Sparkles className="w-4 h-4" />
                                  <span>Natural Remedies:</span>
                                </h4>
                                <ul className="text-sm text-green-700 space-y-1">
                                  {message.recommendations.remedies.slice(0, 3).map((remedy, index) => (
                                    <li key={index} className="flex items-start space-x-2">
                                      <span className="text-green-500 mt-1">🌿</span>
                                      <span>{remedy}</span>
                                    </li>
                                  ))}
                                </ul>
                                {message.recommendations.remedies.length > 3 && (
                                  <p className="text-xs text-green-600 mt-2">
                                    +{message.recommendations.remedies.length - 3} more remedies available
                                  </p>
                                )}
                              </div>
                            )}

{message.recommendations.yoga.length > 0 && (
                              <div className="bg-purple-50 p-3 rounded-lg">
                                <h4 className="font-semibold text-purple-800 flex items-center space-x-1 mb-2">
                                  <span>🧘‍♀️</span>
                                  <span>Yoga Recommendations:</span>
                                </h4>
                                <ul className="text-sm text-purple-700 space-y-1">
                                  {message.recommendations.yoga.map((pose, index) => (
                                    <li key={index} className="flex items-start space-x-2">
                                      <span className="text-purple-500 mt-1">🕉️</span>
                                      <span>{pose}</span>
                                    </li>
                                  ))}
                                </ul>
                                <Link href="/yoga">
                                  <Button size="sm" className="mt-2 bg-purple-600 hover:bg-purple-700 text-white">
                                    Start Yoga Session
                                  </Button>
                                </Link>
                              </div>
                            )}

{message.recommendations.lifestyle.length > 0 && (
                              <div className="bg-blue-50 p-3 rounded-lg">
                                <h4 className="font-semibold text-blue-800 flex items-center space-x-1 mb-2">
                                  <span>💡</span>
                                  <span>Lifestyle Tips:</span>
                                </h4>
                                <ul className="text-sm text-blue-700 space-y-1">
                                  {message.recommendations.lifestyle.map((tip, index) => (
                                    <li key={index} className="flex items-start space-x-2">
                                      <span className="text-blue-500 mt-1">✨</span>
                                      <span>{tip}</span>
                                    </li>
                                  ))}
                                </ul>
                              </div>
                            )}
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                </div>
              ))}

{isLoading && (
                <div className="flex justify-start">
                  <div className="bg-white shadow-md border border-green-100 rounded-2xl p-4">
                    <div className="flex items-center space-x-3">
                      <div className="w-8 h-8 bg-gradient-to-r from-green-500 to-teal-500 rounded-full flex items-center justify-center">
                        <Bot className="w-5 h-5 text-white" />
                      </div>
                      <div className="flex space-x-1">
                        <div className="w-2 h-2 bg-green-500 rounded-full animate-bounce"></div>
                        <div
                          className="w-2 h-2 bg-green-500 rounded-full animate-bounce"
                          style={{ animationDelay: "0.1s" }}
                        ></div>
                        <div
                          className="w-2 h-2 bg-green-500 rounded-full animate-bounce"
                          style={{ animationDelay: "0.2s" }}
                        ></div>
                      </div>
                      <span className="text-sm text-gray-500">Thinking...</span>
                    </div>
                  </div>
                </div>
              )}

{/* Quick Suggestions */}
            {messages.length <= 1 && (
              <div className="px-4 pb-2">
                <p className="text-sm text-gray-600 mb-2">Quick suggestions:</p>
                <div className="flex flex-wrap gap-2">
                  {quickSuggestions.map((suggestion, index) => (
                    <Button
                      key={index}
                      variant="outline"
                      size="sm"
                      onClick={() => sendMessage(suggestion)}
                      className="text-xs bg-white hover:bg-green-50 border-green-200"
                    >
                      {suggestion}
                    </Button>
                  ))}
                </div>
              </div>
            )}

{/* Input Area */}
            <div className="border-t bg-gray-50 p-4">
              <div className="flex space-x-3">
                <Input
                  value={inputMessage}
                  onChange={(e) => setInputMessage(e.target.value)}
                  onKeyPress={handleKeyPress}
                  placeholder="Tell me about your health concern... (e.g., 'I have a headache' or 'stomach pain problem')"
                  className="flex-1 border-green-200 focus:border-green-400"
                />
                <Button
                  onClick={() => sendMessage()}
                  disabled={isLoading || !inputMessage.trim()}
                  className="bg-gradient-to-r from-green-500 to-teal-500 hover:from-green-600 hover:to-teal-600"
                >
                  <Send className="w-4 h-4" />
                </Button>
              </div>
              <p className="text-xs text-gray-500 mt-2 text-center">
                💚 I specialize in natural home remedies and yoga solutions •
                <Link href="/chat/training" className="text-blue-600 hover:underline ml-1">
                  Train AI with your conversations
                </Link>
              </p>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tools/calorie-tracker/page.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Progress } from "@/components/ui/progress"
import { useState } from "react"
import Link from "next/link"
import { ArrowLeft, Plus, Minus, Target, Flame } from "lucide-react"

interface FoodItem {
  id: number
  name: string
  calories: number
  quantity: number
}

export default function CalorieTrackerPage() {
  const [foods, setFoods] = useState<FoodItem[]>([])
  const [foodName, setFoodName] = useState("")
  const [calories, setCalories] = useState("")
  const [dailyGoal] = useState(2000)
  const [age, setAge] = useState("")
  const [weight, setWeight] = useState("")
  const [height, setHeight] = useState("")
  const [activity, setActivity] = useState("moderate")

const totalCalories = foods.reduce((sum, food) => sum + food.calories * food.quantity, 0)
  const remainingCalories = dailyGoal - totalCalories
  const progressPercentage = Math.min((totalCalories / dailyGoal) * 100, 100)

const addFood = () => {
    if (foodName && calories) {
      const newFood: FoodItem = {
        id: Date.now(),
        name: foodName,
        calories: Number.parseInt(calories),
        quantity: 1,
      }
      setFoods([...foods, newFood])
      setFoodName("")
      setCalories("")
    }
  }

const updateQuantity = (id: number, change: number) => {
    setFoods(
      foods
        .map((food) => (food.id === id ? { ...food, quantity: Math.max(0, food.quantity + change) } : food))
        .filter((food) => food.quantity > 0),
    )
  }

const calculateBMR = () => {
    if (!age || !weight || !height) return 0
    const ageNum = Number.parseInt(age)
    const weightNum = Number.parseInt(weight)
    const heightNum = Number.parseInt(height)

// Harris-Benedict equation for men (simplified)
    return Math.round(88.362 + 13.397 * weightNum + 4.799 * heightNum - 5.677 * ageNum)
  }

const getActivityMultiplier = () => {
    switch (activity) {
      case "sedentary":
        return 1.2
      case "light":
        return 1.375
      case "moderate":
        return 1.55
      case "active":
        return 1.725
      case "very-active":
        return 1.9
      default:
        return 1.55
    }
  }

const recommendedCalories = Math.round(calculateBMR() * getActivityMultiplier())

const commonFoods = [
    { name: "Apple", calories: 95 },
    { name: "Banana", calories: 105 },
    { name: "Rice (1 cup)", calories: 205 },
    { name: "Chicken Breast (100g)", calories: 165 },
    { name: "Bread Slice", calories: 80 },
    { name: "Egg", calories: 70 },
    { name: "Milk (1 cup)", calories: 150 },
    { name: "Chapati", calories: 104 },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-green-50 to-teal-50">
      <div className="max-w-4xl mx-auto p-4">
        <div className="mb-6">
          <Link href="/tools">
            <Button variant="ghost" className="flex items-center space-x-2">
              <ArrowLeft className="w-4 h-4" />
              <span>Back to Tools</span>
            </Button>
          </Link>
        </div>

<div className="grid lg:grid-cols-2 gap-6">
          {/* Calorie Counter */}
          <Card>
            <CardHeader className="text-center">
              <CardTitle className="text-2xl text-green-700 flex items-center justify-center space-x-2">
                <Flame className="w-8 h-8" />
                <span>Calorie Tracker</span>
              </CardTitle>
              <CardDescription>Track your daily calorie intake and stay on target</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              {/* Daily Progress */}
              <div className="text-center space-y-4">
                <div className="text-4xl font-bold text-gray-900">{totalCalories}</div>
                <div className="text-sm text-gray-600">of {dailyGoal} calories</div>
                <Progress value={progressPercentage} className="w-full" />
                <div className="flex justify-between text-sm">
                  <span className={remainingCalories >= 0 ? "text-green-600" : "text-red-600"}>
                    {remainingCalories >= 0 ? `${remainingCalories} remaining` : `${Math.abs(remainingCalories)} over`}
                  </span>
                  <span className="text-gray-500">{progressPercentage.toFixed(1)}%</span>
                </div>
              </div>

{/* Add Food */}
              <div className="space-y-4">
                <div className="grid grid-cols-2 gap-2">
                  <div>
                    <Label htmlFor="food">Food Item</Label>
                    <Input
                      id="food"
                      value={foodName}
                      onChange={(e) => setFoodName(e.target.value)}
                      placeholder="e.g., Apple"
                    />
                  </div>
                  <div>
                    <Label htmlFor="calories">Calories</Label>
                    <Input
                      id="calories"
                      type="number"
                      value={calories}
                      onChange={(e) => setCalories(e.target.value)}
                      placeholder="95"
                    />
                  </div>
                </div>
                <Button onClick={addFood} className="w-full bg-gradient-to-r from-green-500 to-teal-500">
                  <Plus className="w-4 h-4 mr-2" />
                  Add Food
                </Button>
              </div>

{/* Common Foods */}
              <div>
                <Label className="text-sm font-medium">Quick Add:</Label>
                <div className="grid grid-cols-2 gap-2 mt-2">
                  {commonFoods.map((food, index) => (
                    <Button
                      key={index}
                      variant="outline"
                      size="sm"
                      onClick={() => {
                        setFoodName(food.name)
                        setCalories(food.calories.toString())
                      }}
                      className="text-xs"
                    >
                      {food.name}
                    </Button>
                  ))}
                </div>
              </div>
            </CardContent>
          </Card>

{/* Food List & Calculator */}
          <div className="space-y-6">
            {/* Today's Foods */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">Today's Foods</CardTitle>
              </CardHeader>
              <CardContent>
                {foods.length === 0 ? (
                  <p className="text-gray-500 text-center py-4">No foods added yet</p>
                ) : (
                  <div className="space-y-3">
                    {foods.map((food) => (
                      <div key={food.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div>
                          <div className="font-medium">{food.name}</div>
                          <div className="text-sm text-gray-600">{food.calories * food.quantity} calories</div>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Button size="sm" variant="outline" onClick={() => updateQuantity(food.id, -1)}>
                            <Minus className="w-3 h-3" />
                          </Button>
                          <span className="w-8 text-center">{food.quantity}</span>
                          <Button size="sm" variant="outline" onClick={() => updateQuantity(food.id, 1)}>
                            <Plus className="w-3 h-3" />
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>

{/* Calorie Calculator */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg flex items-center space-x-2">
                  <Target className="w-5 h-5" />
                  <span>Calorie Calculator</span>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-3 gap-2">
                  <div>
                    <Label htmlFor="age">Age</Label>
                    <Input
                      id="age"
                      type="number"
                      value={age}
                      onChange={(e) => setAge(e.target.value)}
                      placeholder="25"
                    />
                  </div>
                  <div>
                    <Label htmlFor="weight">Weight (kg)</Label>
                    <Input
                      id="weight"
                      type="number"
                      value={weight}
                      onChange={(e) => setWeight(e.target.value)}
                      placeholder="70"
                    />
                  </div>
                  <div>
                    <Label htmlFor="height">Height (cm)</Label>
                    <Input
                      id="height"
                      type="number"
                      value={height}
                      onChange={(e) => setHeight(e.target.value)}
                      placeholder="170"
                    />
                  </div>
                </div>
                <div>
                  <Label htmlFor="activity">Activity Level</Label>
                  <select
                    id="activity"
                    value={activity}
                    onChange={(e) => setActivity(e.target.value)}
                    className="w-full p-2 border rounded-md"
                  >
                    <option value="sedentary">Sedentary (little/no exercise)</option>
                    <option value="light">Light (light exercise 1-3 days/week)</option>
                    <option value="moderate">Moderate (moderate exercise 3-5 days/week)</option>
                    <option value="active">Active (hard exercise 6-7 days/week)</option>
                    <option value="very-active">Very Active (very hard exercise, physical job)</option>
                  </select>
                </div>
                {recommendedCalories > 0 && (
                  <div className="text-center p-4 bg-green-50 rounded-lg">
                    <div className="text-2xl font-bold text-green-700">{recommendedCalories}</div>
                    <div className="text-sm text-green-600">Recommended daily calories</div>
                  </div>
                )}
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tools/stress-level/page.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { useState } from "react"
import Link from "next/link"
import { ArrowLeft, Brain, Heart, Zap } from "lucide-react"

interface Question {
  id: number
  question: string
  options: { text: string; score: number }[]
}

export default function StressLevelPage() {
  const [currentQuestion, setCurrentQuestion] = useState(0)
  const [answers, setAnswers] = useState<number[]>([])
  const [showResults, setShowResults] = useState(false)
  const [stressLevel, setStressLevel] = useState(0)

const questions: Question[] = [
    {
      id: 1,
      question: "How often have you felt nervous or stressed in the past week?",
      options: [
        { text: "Never", score: 0 },
        { text: "Rarely", score: 1 },
        { text: "Sometimes", score: 2 },
        { text: "Often", score: 3 },
        { text: "Very Often", score: 4 },
      ],
    },
    {
      id: 2,
      question: "How often have you felt confident about handling personal problems?",
      options: [
        { text: "Very Often", score: 0 },
        { text: "Often", score: 1 },
        { text: "Sometimes", score: 2 },
        { text: "Rarely", score: 3 },
        { text: "Never", score: 4 },
      ],
    },
    {
      id: 3,
      question: "How often have you felt that things were going your way?",
      options: [
        { text: "Very Often", score: 0 },
        { text: "Often", score: 1 },
        { text: "Sometimes", score: 2 },
        { text: "Rarely", score: 3 },
        { text: "Never", score: 4 },
      ],
    },
    {
      id: 4,
      question: "How often have you felt difficulties piling up so high that you could not overcome them?",
      options: [
        { text: "Never", score: 0 },
        { text: "Rarely", score: 1 },
        { text: "Sometimes", score: 2 },
        { text: "Often", score: 3 },
        { text: "Very Often", score: 4 },
      ],
    },
    {
      id: 5,
      question: "How often have you been upset because of something unexpected?",
      options: [
        { text: "Never", score: 0 },
        { text: "Rarely", score: 1 },
        { text: "Sometimes", score: 2 },
        { text: "Often", score: 3 },
        { text: "Very Often", score: 4 },
      ],
    },
    {
      id: 6,
      question: "How often have you felt unable to control important things in your life?",
      options: [
        { text: "Never", score: 0 },
        { text: "Rarely", score: 1 },
        { text: "Sometimes", score: 2 },
        { text: "Often", score: 3 },
        { text: "Very Often", score: 4 },
      ],
    },
    {
      id: 7,
      question: "How often have you felt irritable or angry?",
      options: [
        { text: "Never", score: 0 },
        { text: "Rarely", score: 1 },
        { text: "Sometimes", score: 2 },
        { text: "Often", score: 3 },
        { text: "Very Often", score: 4 },
      ],
    },
    {
      id: 8,
      question: "How often have you had trouble sleeping due to stress?",
      options: [
        { text: "Never", score: 0 },
        { text: "Rarely", score: 1 },
        { text: "Sometimes", score: 2 },
        { text: "Often", score: 3 },
        { text: "Very Often", score: 4 },
      ],
    },
  ]

const handleAnswer = (score: number) => {
    const newAnswers = [...answers, score]
    setAnswers(newAnswers)

if (currentQuestion < questions.length - 1) {
      setCurrentQuestion(currentQuestion + 1)
    } else {
      const totalScore = newAnswers.reduce((sum, answer) => sum + answer, 0)
      setStressLevel(totalScore)
      setShowResults(true)
    }
  }

const getStressCategory = (score: number) => {
    if (score <= 8) return { level: "Low Stress", color: "green", description: "You're managing stress well!" }
    if (score <= 16)
      return { level: "Moderate Stress", color: "yellow", description: "Some stress management techniques could help" }
    if (score <= 24)
      return { level: "High Stress", color: "orange", description: "Consider stress reduction strategies" }
    return { level: "Very High Stress", color: "red", description: "Professional support may be beneficial" }
  }

const getRecommendations = (score: number) => {
    if (score <= 8) {
      return [
        "Continue your current stress management practices",
        "Maintain regular exercise and healthy sleep",
        "Practice gratitude and mindfulness",
        "Keep social connections strong",
      ]
    } else if (score <= 16) {
      return [
        "Try deep breathing exercises daily",
        "Consider meditation or yoga",
        "Ensure adequate sleep (7-9 hours)",
        "Take regular breaks during work",
        "Practice time management techniques",
      ]
    } else if (score <= 24) {
      return [
        "Implement daily stress reduction activities",
        "Consider professional counseling",
        "Practice progressive muscle relaxation",
        "Limit caffeine and alcohol intake",
        "Engage in regular physical activity",
        "Talk to friends or family about your stress",
      ]
    } else {
      return [
        "Seek professional mental health support",
        "Consider therapy or counseling",
        "Practice stress management techniques daily",
        "Evaluate major life stressors",
        "Consider medication consultation with a doctor",
        "Build a strong support network",
      ]
    }
  }

const resetAssessment = () => {
    setCurrentQuestion(0)
    setAnswers([])
    setShowResults(false)
    setStressLevel(0)
  }

const progressPercentage = ((currentQuestion + 1) / questions.length) * 100

<Card>
          <CardHeader className="text-center">
            <CardTitle className="text-2xl text-green-700 flex items-center justify-center space-x-2">
              <Brain className="w-8 h-8" />
              <span>Stress Level Assessment</span>
            </CardTitle>
            <CardDescription>Answer these questions to evaluate your current stress level</CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            {!showResults ? (
              <>
                {/* Progress */}
                <div className="space-y-2">
                  <div className="flex justify-between text-sm text-gray-600">
                    <span>
                      Question {currentQuestion + 1} of {questions.length}
                    </span>
                    <span>{Math.round(progressPercentage)}% Complete</span>
                  </div>
                  <Progress value={progressPercentage} className="w-full" />
                </div>

{/* Question */}
                <div className="space-y-4">
                  <h3 className="text-lg font-medium text-gray-900">{questions[currentQuestion].question}</h3>
                  <div className="space-y-2">
                    {questions[currentQuestion].options.map((option, index) => (
                      <Button
                        key={index}
                        variant="outline"
                        className="w-full text-left justify-start h-auto p-4 bg-transparent"
                        onClick={() => handleAnswer(option.score)}
                      >
                        {option.text}
                      </Button>
                    ))}
                  </div>
                </div>
              </>
            ) : (
              /* Results */
              <div className="space-y-6">
                <div className="text-center space-y-4">
                  <div className="text-4xl font-bold text-gray-900">{stressLevel}/32</div>
                  <Badge
                    className={`bg-${getStressCategory(stressLevel).color}-100 text-${getStressCategory(stressLevel).color}-700 text-lg px-4 py-2`}
                  >
                    {getStressCategory(stressLevel).level}
                  </Badge>
                  <p className="text-gray-600">{getStressCategory(stressLevel).description}</p>
                </div>

{/* Stress Level Indicator */}
                <div className="space-y-2">
                  <div className="flex justify-between text-sm text-gray-600">
                    <span>Low</span>
                    <span>Moderate</span>
                    <span>High</span>
                    <span>Very High</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-3">
                    <div
                      className={`h-3 rounded-full bg-${getStressCategory(stressLevel).color}-500`}
                      style={{ width: `${(stressLevel / 32) * 100}%` }}
                    ></div>
                  </div>
                </div>

{/* Recommendations */}
                <Card>
                  <CardHeader>
                    <CardTitle className="text-lg flex items-center space-x-2">
                      <Heart className="w-5 h-5" />
                      <span>Recommendations</span>
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-2">
                      {getRecommendations(stressLevel).map((rec, index) => (
                        <li key={index} className="flex items-start space-x-2">
                          <div className="w-2 h-2 bg-green-500 rounded-full mt-2"></div>
                          <span className="text-sm">{rec}</span>
                        </li>
                      ))}
                    </ul>
                  </CardContent>
                </Card>

{/* Quick Stress Relief */}
                <Card>
                  <CardHeader>
                    <CardTitle className="text-lg flex items-center space-x-2">
                      <Zap className="w-5 h-5" />
                      <span>Quick Stress Relief</span>
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="grid grid-cols-2 gap-2">
                      <Button variant="outline" size="sm">
                        4-7-8 Breathing
                      </Button>
                      <Button variant="outline" size="sm">
                        5-Minute Meditation
                      </Button>
                      <Button variant="outline" size="sm">
                        Progressive Relaxation
                      </Button>
                      <Button variant="outline" size="sm">
                        Mindful Walking
                      </Button>
                    </div>
                  </CardContent>
                </Card>

<div className="flex space-x-2">
                  <Button onClick={resetAssessment} variant="outline" className="flex-1 bg-transparent">
                    Take Again
                  </Button>
                  <Button variant="outline" className="flex-1 bg-transparent">
                    Save Results
                  </Button>
                </div>
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tools/water-intake/page.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useState, useEffect } from "react"
import Link from "next/link"
import { ArrowLeft, Droplets, Plus, Target, Clock } from "lucide-react"

interface WaterEntry {
  id: number
  amount: number
  time: string
}

export default function WaterIntakePage() {
  const [waterEntries, setWaterEntries] = useState<WaterEntry[]>([])
  const [customAmount, setCustomAmount] = useState("")
  const [dailyGoal, setDailyGoal] = useState(2000)
  const [weight, setWeight] = useState("")
  const [activity, setActivity] = useState("moderate")
  const [currentTime, setCurrentTime] = useState(new Date())

useEffect(() => {
    const timer = setInterval(() => setCurrentTime(new Date()), 60000)
    return () => clearInterval(timer)
  }, [])

const totalIntake = waterEntries.reduce((sum, entry) => sum + entry.amount, 0)
  const progressPercentage = Math.min((totalIntake / dailyGoal) * 100, 100)
  const remainingIntake = Math.max(dailyGoal - totalIntake, 0)

const addWater = (amount: number) => {
    const newEntry: WaterEntry = {
      id: Date.now(),
      amount,
      time: currentTime.toLocaleTimeString("en-US", {
        hour: "2-digit",
        minute: "2-digit",
      }),
    }
    setWaterEntries([...waterEntries, newEntry])
  }

const addCustomWater = () => {
    if (customAmount) {
      addWater(Number.parseInt(customAmount))
      setCustomAmount("")
    }
  }

const removeEntry = (id: number) => {
    setWaterEntries(waterEntries.filter((entry) => entry.id !== id))
  }

const calculateRecommendedIntake = () => {
    if (!weight) return 2000
    const weightNum = Number.parseInt(weight)
    const baseIntake = weightNum * 35 // 35ml per kg body weight

// Adjust for activity level
    const activityMultiplier = {
      sedentary: 1.0,
      light: 1.1,
      moderate: 1.2,
      active: 1.3,
      intense: 1.5,
    }

return Math.round(baseIntake * (activityMultiplier[activity as keyof typeof activityMultiplier] || 1.2))
  }

const updateGoal = () => {
    const recommended = calculateRecommendedIntake()
    setDailyGoal(recommended)
  }

const getHydrationStatus = () => {
    const percentage = (totalIntake / dailyGoal) * 100
    if (percentage < 25) return { status: "Dehydrated", color: "red", message: "Drink water immediately!" }
    if (percentage < 50) return { status: "Low", color: "orange", message: "You need more water" }
    if (percentage < 75) return { status: "Moderate", color: "yellow", message: "Keep drinking regularly" }
    if (percentage < 100) return { status: "Good", color: "green", message: "Almost there!" }
    return { status: "Excellent", color: "green", message: "Great hydration!" }
  }

const getNextReminderTime = () => {
    const now = new Date()
    const nextHour = new Date(now)
    nextHour.setHours(now.getHours() + 1, 0, 0, 0)
    return nextHour.toLocaleTimeString("en-US", {
      hour: "2-digit",
      minute: "2-digit",
    })
  }

const quickAmounts = [250, 500, 750, 1000]

return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-cyan-50">
      <div className="max-w-4xl mx-auto p-4">
        <div className="mb-6">
          <Link href="/tools">
            <Button variant="ghost" className="flex items-center space-x-2">
              <ArrowLeft className="w-4 h-4" />
              <span>Back to Tools</span>
            </Button>
          </Link>
        </div>

<div className="grid lg:grid-cols-2 gap-6">
          {/* Water Tracker */}
          <Card>
            <CardHeader className="text-center">
              <CardTitle className="text-2xl text-blue-700 flex items-center justify-center space-x-2">
                <Droplets className="w-8 h-8" />
                <span>Water Intake Tracker</span>
              </CardTitle>
              <CardDescription>Stay hydrated and track your daily water consumption</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              {/* Daily Progress */}
              <div className="text-center space-y-4">
                <div className="text-4xl font-bold text-blue-900">{totalIntake}ml</div>
                <div className="text-sm text-gray-600">of {dailyGoal}ml goal</div>
                <Progress value={progressPercentage} className="w-full" />
                <div className="flex justify-between text-sm">
                  <span className="text-blue-600">{remainingIntake}ml remaining</span>
                  <span className="text-gray-500">{progressPercentage.toFixed(1)}%</span>
                </div>
                <Badge className={`bg-${getHydrationStatus().color}-100 text-${getHydrationStatus().color}-700`}>
                  {getHydrationStatus().status}
                </Badge>
                <p className="text-sm text-gray-600">{getHydrationStatus().message}</p>
              </div>

{/* Quick Add Buttons */}
              <div className="space-y-4">
                <Label className="text-sm font-medium">Quick Add:</Label>
                <div className="grid grid-cols-2 gap-2">
                  {quickAmounts.map((amount) => (
                    <Button
                      key={amount}
                      onClick={() => addWater(amount)}
                      variant="outline"
                      className="flex items-center space-x-2"
                    >
                      <Droplets className="w-4 h-4" />
                      <span>{amount}ml</span>
                    </Button>
                  ))}
                </div>
              </div>

{/* Custom Amount */}
              <div className="space-y-2">
                <Label htmlFor="custom">Custom Amount (ml):</Label>
                <div className="flex space-x-2">
                  <Input
                    id="custom"
                    type="number"
                    value={customAmount}
                    onChange={(e) => setCustomAmount(e.target.value)}
                    placeholder="Enter amount"
                  />
                  <Button onClick={addCustomWater} className="bg-blue-500 hover:bg-blue-600">
                    <Plus className="w-4 h-4" />
                  </Button>
                </div>
              </div>

{/* Next Reminder */}
              <Card className="bg-blue-50">
                <CardContent className="p-4">
                  <div className="flex items-center space-x-2 text-blue-700">
                    <Clock className="w-4 h-4" />
                    <span className="text-sm">Next reminder: {getNextReminderTime()}</span>
                  </div>
                </CardContent>
              </Card>
            </CardContent>
          </Card>

{/* Settings & History */}
          <div className="space-y-6">
            {/* Goal Calculator */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg flex items-center space-x-2">
                  <Target className="w-5 h-5" />
                  <span>Personalized Goal</span>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <Label htmlFor="weight">Weight (kg):</Label>
                  <Input
                    id="weight"
                    type="number"
                    value={weight}
                    onChange={(e) => setWeight(e.target.value)}
                    placeholder="70"
                  />
                </div>
                <div>
                  <Label htmlFor="activity">Activity Level:</Label>
                  <select
                    id="activity"
                    value={activity}
                    onChange={(e) => setActivity(e.target.value)}
                    className="w-full p-2 border rounded-md"
                  >
                    <option value="sedentary">Sedentary</option>
                    <option value="light">Light Activity</option>
                    <option value="moderate">Moderate Activity</option>
                    <option value="active">Active</option>
                    <option value="intense">Intense Activity</option>
                  </select>
                </div>
                {weight && (
                  <div className="text-center p-3 bg-blue-50 rounded-lg">
                    <div className="text-lg font-bold text-blue-700">{calculateRecommendedIntake()}ml</div>
                    <div className="text-sm text-blue-600">Recommended daily intake</div>
                  </div>
                )}
                <Button onClick={updateGoal} className="w-full bg-blue-500 hover:bg-blue-600">
                  Update My Goal
                </Button>
              </CardContent>
            </Card>

{/* Today's History */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">Today's Water Log</CardTitle>
              </CardHeader>
              <CardContent>
                {waterEntries.length === 0 ? (
                  <p className="text-gray-500 text-center py-4">No water logged yet today</p>
                ) : (
                  <div className="space-y-2 max-h-60 overflow-y-auto">
                    {waterEntries.map((entry) => (
                      <div key={entry.id} className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
                        <div className="flex items-center space-x-3">
                          <Droplets className="w-4 h-4 text-blue-500" />
                          <div>
                            <div className="font-medium">{entry.amount}ml</div>
                            <div className="text-sm text-gray-600">{entry.time}</div>
                          </div>
                        </div>
                        <Button
                          size="sm"
                          variant="ghost"
                          onClick={() => removeEntry(entry.id)}
                          className="text-red-500 hover:text-red-700"
                        >
                          Remove
                        </Button>
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>

{/* Hydration Tips */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">Hydration Tips</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-sm">
                  <li>• Start your day with a glass of water</li>
                  <li>• Drink water before, during, and after exercise</li>
                  <li>• Keep a water bottle with you</li>
                  <li>• Eat water-rich foods like fruits and vegetables</li>
                  <li>• Set regular reminders to drink water</li>
                  <li>• Monitor your urine color as a hydration indicator</li>
                </ul>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tools/sleep-quality/page.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useState } from "react"
import Link from "next/link"
import { ArrowLeft, Moon, Sun, Clock, Star, TrendingUp } from "lucide-react"

interface SleepEntry {
  id: number
  bedTime: string
  wakeTime: string
  quality: number
  duration: number
  date: string
}

export default function SleepQualityPage() {
  const [sleepEntries, setSleepEntries] = useState<SleepEntry[]>([])
  const [bedTime, setBedTime] = useState("")
  const [wakeTime, setWakeTime] = useState("")
  const [sleepQuality, setSleepQuality] = useState(5)
  const [showAnalysis, setShowAnalysis] = useState(false)

const calculateSleepDuration = (bedTime: string, wakeTime: string) => {
    if (!bedTime || !wakeTime) return 0

const bed = new Date(`2024-01-01 ${bedTime}`)
    let wake = new Date(`2024-01-01 ${wakeTime}`)

// If wake time is earlier than bed time, assume it's next day
    if (wake < bed) {
      wake = new Date(`2024-01-02 ${wakeTime}`)
    }

const diffMs = wake.getTime() - bed.getTime()
    return Math.round((diffMs / (1000 * 60 * 60)) * 10) / 10 // Hours with 1 decimal
  }

const addSleepEntry = () => {
    if (bedTime && wakeTime) {
      const duration = calculateSleepDuration(bedTime, wakeTime)
      const newEntry: SleepEntry = {
        id: Date.now(),
        bedTime,
        wakeTime,
        quality: sleepQuality,
        duration,
        date: new Date().toLocaleDateString(),
      }
      setSleepEntries([newEntry, ...sleepEntries])
      setBedTime("")
      setWakeTime("")
      setSleepQuality(5)
    }
  }

const getAverageSleep = () => {
    if (sleepEntries.length === 0) return 0
    const total = sleepEntries.reduce((sum, entry) => sum + entry.duration, 0)
    return Math.round((total / sleepEntries.length) * 10) / 10
  }

const getAverageQuality = () => {
    if (sleepEntries.length === 0) return 0
    const total = sleepEntries.reduce((sum, entry) => sum + entry.quality, 0)
    return Math.round((total / sleepEntries.length) * 10) / 10
  }

const getSleepScore = () => {
    const avgDuration = getAverageSleep()
    const avgQuality = getAverageQuality()

let durationScore = 0
    if (avgDuration >= 7 && avgDuration <= 9) durationScore = 50
    else if (avgDuration >= 6 && avgDuration <= 10) durationScore = 35
    else if (avgDuration >= 5 && avgDuration <= 11) durationScore = 20
    else durationScore = 10

const qualityScore = (avgQuality / 10) * 50

return Math.round(durationScore + qualityScore)
  }

const getSleepGrade = (score: number) => {
    if (score >= 85) return { grade: "A", color: "green", description: "Excellent sleep!" }
    if (score >= 70) return { grade: "B", color: "blue", description: "Good sleep quality" }
    if (score >= 55) return { grade: "C", color: "yellow", description: "Fair sleep, room for improvement" }
    if (score >= 40) return { grade: "D", color: "orange", description: "Poor sleep quality" }
    return { grade: "F", color: "red", description: "Very poor sleep quality" }
  }

const getSleepRecommendations = () => {
    const avgDuration = getAverageSleep()
    const avgQuality = getAverageQuality()
    const recommendations = []

if (avgDuration < 7) {
      recommendations.push("Try to get at least 7-9 hours of sleep per night")
      recommendations.push("Set a consistent bedtime routine")
    }
    if (avgDuration > 9) {
      recommendations.push("You might be oversleeping - try reducing sleep time gradually")
    }
    if (avgQuality < 6) {
      recommendations.push("Create a comfortable sleep environment")
      recommendations.push("Avoid screens 1 hour before bedtime")
      recommendations.push("Consider relaxation techniques before sleep")
    }
    if (sleepEntries.length > 0) {
      recommendations.push("Maintain consistent sleep and wake times")
      recommendations.push("Avoid caffeine 6 hours before bedtime")
    }

return recommendations.length > 0
      ? recommendations
      : [
          "Keep tracking your sleep for personalized insights",
          "Maintain good sleep hygiene",
          "Create a relaxing bedtime routine",
        ]
  }

const sleepScore = getSleepScore()
  const sleepGrade = getSleepGrade(sleepScore)

return (
    <div className="min-h-screen bg-gradient-to-br from-indigo-50 to-purple-50">
      <div className="max-w-4xl mx-auto p-4">
        <div className="mb-6">
          <Link href="/tools">
            <Button variant="ghost" className="flex items-center space-x-2">
              <ArrowLeft className="w-4 h-4" />
              <span>Back to Tools</span>
            </Button>
          </Link>
        </div>

<div className="grid lg:grid-cols-2 gap-6">
          {/* Sleep Logger */}
          <Card>
            <CardHeader className="text-center">
              <CardTitle className="text-2xl text-indigo-700 flex items-center justify-center space-x-2">
                <Moon className="w-8 h-8" />
                <span>Sleep Quality Analyzer</span>
              </CardTitle>
              <CardDescription>Track your sleep patterns and improve your rest quality</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              {/* Sleep Entry Form */}
              <div className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="bedtime" className="flex items-center space-x-2">
                      <Moon className="w-4 h-4" />
                      <span>Bedtime</span>
                    </Label>
                    <Input id="bedtime" type="time" value={bedTime} onChange={(e) => setBedTime(e.target.value)} />
                  </div>
                  <div>
                    <Label htmlFor="waketime" className="flex items-center space-x-2">
                      <Sun className="w-4 h-4" />
                      <span>Wake Time</span>
                    </Label>
                    <Input id="waketime" type="time" value={wakeTime} onChange={(e) => setWakeTime(e.target.value)} />
                  </div>
                </div>

{bedTime && wakeTime && (
                  <div className="text-center p-3 bg-indigo-50 rounded-lg">
                    <div className="flex items-center justify-center space-x-2">
                      <Clock className="w-4 h-4 text-indigo-600" />
                      <span className="text-indigo-700 font-medium">
                        Sleep Duration: {calculateSleepDuration(bedTime, wakeTime)} hours
                      </span>
                    </div>
                  </div>
                )}

<div>
                  <Label className="flex items-center space-x-2 mb-2">
                    <Star className="w-4 h-4" />
                    <span>Sleep Quality (1-10)</span>
                  </Label>
                  <div className="space-y-2">
                    <input
                      type="range"
                      min="1"
                      max="10"
                      value={sleepQuality}
                      onChange={(e) => setSleepQuality(Number.parseInt(e.target.value))}
                      className="w-full"
                    />
                    <div className="flex justify-between text-sm text-gray-600">
                      <span>Poor (1)</span>
                      <span className="font-medium">{sleepQuality}</span>
                      <span>Excellent (10)</span>
                    </div>
                  </div>
                </div>

<Button
                  onClick={addSleepEntry}
                  className="w-full bg-gradient-to-r from-indigo-500 to-purple-500"
                  disabled={!bedTime || !wakeTime}
                >
                  Log Sleep
                </Button>
              </div>

{/* Quick Stats */}
              {sleepEntries.length > 0 && (
                <div className="grid grid-cols-2 gap-4">
                  <div className="text-center p-3 bg-indigo-50 rounded-lg">
                    <div className="text-2xl font-bold text-indigo-700">{getAverageSleep()}h</div>
                    <div className="text-sm text-indigo-600">Avg Duration</div>
                  </div>
                  <div className="text-center p-3 bg-purple-50 rounded-lg">
                    <div className="text-2xl font-bold text-purple-700">{getAverageQuality()}/10</div>
                    <div className="text-sm text-purple-600">Avg Quality</div>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>

{/* Analysis & History */}
          <div className="space-y-6">
            {/* Sleep Score */}
            {sleepEntries.length > 0 && (
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg flex items-center space-x-2">
                    <TrendingUp className="w-5 h-5" />
                    <span>Sleep Score</span>
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="text-center space-y-2">
                    <div className="text-4xl font-bold text-gray-900">{sleepScore}</div>
                    <Badge className={`bg-${sleepGrade.color}-100 text-${sleepGrade.color}-700 text-lg px-4 py-2`}>
                      Grade {sleepGrade.grade}
                    </Badge>
                    <p className="text-gray-600">{sleepGrade.description}</p>
                  </div>
                  <Progress value={sleepScore} className="w-full" />
                </CardContent>
              </Card>
            )}

{/* Sleep History */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">Recent Sleep Log</CardTitle>
              </CardHeader>
              <CardContent>
                {sleepEntries.length === 0 ? (
                  <p className="text-gray-500 text-center py-4">No sleep data logged yet</p>
                ) : (
                  <div className="space-y-3 max-h-60 overflow-y-auto">
                    {sleepEntries.slice(0, 7).map((entry) => (
                      <div key={entry.id} className="p-3 bg-gray-50 rounded-lg">
                        <div className="flex justify-between items-start">
                          <div>
                            <div className="font-medium">{entry.date}</div>
                            <div className="text-sm text-gray-600">
                              {entry.bedTime} - {entry.wakeTime}
                            </div>
                          </div>
                          <div className="text-right">
                            <div className="font-medium">{entry.duration}h</div>
                            <div className="text-sm text-gray-600">Quality: {entry.quality}/10</div>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>

{/* Recommendations */}
            {sleepEntries.length > 0 && (
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">Sleep Recommendations</CardTitle>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2">
                    {getSleepRecommendations().map((rec, index) => (
                      <li key={index} className="flex items-start space-x-2">
                        <div className="w-2 h-2 bg-indigo-500 rounded-full mt-2"></div>
                        <span className="text-sm">{rec}</span>
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            )}

{/* Sleep Tips */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">Sleep Hygiene Tips</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-sm">
                  <li>• Keep a consistent sleep schedule</li>
                  <li>• Create a relaxing bedtime routine</li>
                  <li>• Keep your bedroom cool, dark, and quiet</li>
                  <li>• Avoid large meals, caffeine, and alcohol before bedtime</li>
                  <li>• Get regular physical activity during the day</li>
                  <li>• Limit daytime naps to 30 minutes</li>
                  <li>• Manage stress and anxiety</li>
                </ul>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/chat/route.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { NextResponse } from "next/server"

// Comprehensive disease and symptom database with detailed remedies
const diseaseDatabase = {
  // Respiratory Issues
  cold: {
    symptoms: [
      "cold",
      "cough",
      "runny nose",
      "sore throat",
      "fever",
      "headache",
      "sneezing",
      "congestion",
      "blocked nose",
      "stuffy nose",
      "nasal discharge",
    ],
    remedies: [
      "Honey and ginger tea - Mix 2 tbsp honey with 1 tsp fresh ginger juice in warm water, drink 3 times daily",
      "Steam inhalation with eucalyptus oil - Add 3-4 drops to hot water and inhale for 10 minutes",
      "Turmeric milk - 1 tsp turmeric powder in warm milk with pinch of black pepper before bed",
      "Garlic and honey - Crush 2 garlic cloves, mix with honey, take twice daily on empty stomach",
      "Lemon and salt water gargle - Mix lemon juice and salt in warm water, gargle 3-4 times daily",
      "Tulsi (Holy basil) tea - Boil 10-12 fresh leaves in water, add honey and drink warm",
      "Ginger and cinnamon tea - Boil ginger and cinnamon stick, add honey, drink hot",
      "Onion and honey syrup - Mix onion juice with honey, take 1 tsp every 2 hours",
    ],
    yoga: [
      "Pranayama breathing exercises - Anulom Vilom for 10 minutes daily",
      "Gentle neck stretches and shoulder rolls to relieve tension",
      "Child's pose (Balasana) for relaxation and stress relief",
      "Cat-cow pose (Marjaryasana-Bitilasana) to open chest and improve breathing",
      "Supported fish pose (Matsyasana) to clear airways and expand lungs",
      "Bhramari pranayama (Humming bee breath) to clear nasal passages",
    ],
    category: "Respiratory",
    tips: [
      "Stay hydrated with warm liquids - water, herbal teas, broths",
      "Get plenty of rest - at least 8 hours of sleep",
      "Avoid cold foods, ice cream, and refrigerated drinks",
      "Use a humidifier or place water bowls around the room",
      "Eat vitamin C rich foods - oranges, lemons, amla, guava",
      "Avoid dairy products as they increase mucus production",
    ],
    severity: "mild",
    duration: "3-7 days",
  },

asthma: {
    symptoms: [
      "asthma",
      "wheezing",
      "shortness of breath",
      "chest tightness",
      "difficulty breathing",
      "coughing at night",
      "breathing problems",
    ],
    remedies: [
      "Ginger and honey - Mix fresh ginger juice with honey, take 1 tsp twice daily",
      "Turmeric milk - 1 tsp turmeric in warm milk with black pepper before bed",
      "Eucalyptus oil steam - Add 3-4 drops to hot water, inhale carefully",
      "Garlic tea - Boil 3-4 garlic cloves in water, drink warm",
      "Figs soaked in water - Soak 3-4 figs overnight, eat in morning",
      "Mustard oil massage - Warm mustard oil massage on chest and back",
      "Coffee - Strong black coffee can help open airways during mild attacks",
      "Onion juice - Mix onion juice with honey, take 1 tsp twice daily",
    ],
    yoga: [
      "Pranayama - Anulom Vilom, Bhramari, and Ujjayi breathing",
      "Sukhasana (Easy pose) with deep breathing",
      "Bhujangasana (Cobra pose) to open chest",
      "Matsyasana (Fish pose) to expand lungs",
      "Shavasana (Corpse pose) for complete relaxation",
      "Avoid inverted poses during acute episodes",
    ],
    category: "Respiratory",
    tips: [
      "Identify and avoid triggers - dust, pollen, smoke",
      "Keep rescue inhaler always available",
      "Practice breathing exercises daily",
      "Maintain clean, dust-free environment",
      "Avoid cold air and sudden temperature changes",
      "Consult doctor for severe symptoms",
    ],
    severity: "moderate to severe",
    duration: "chronic condition",
  },

// Digestive Issues
  "stomach pain": {
    symptoms: [
      "stomach pain",
      "stomach ache",
      "abdominal pain",
      "belly pain",
      "gastric",
      "acidity",
      "heartburn",
      "indigestion",
      "stomach cramps",
    ],
    remedies: [
      "Ginger tea - Boil fresh ginger slices in water for 10 minutes, drink warm",
      "Fennel seed water - Soak 1 tsp fennel seeds overnight, drink water in morning",
      "Ajwain (carom seeds) - Chew 1/2 tsp with warm water after meals",
      "Mint leaves tea - Fresh mint leaves boiled in water with honey",
      "Hing (asafoetida) water - Pinch of hing in warm water on empty stomach",
      "Cumin water - Boil 1 tsp cumin seeds in water, drink when cool",
      "Buttermilk with roasted cumin - Mix roasted cumin powder in fresh buttermilk",
      "Aloe vera juice - 2 tbsp fresh aloe vera juice before meals",
    ],
    yoga: [
      "Pawanmuktasana (Wind-relieving pose) - Hold knees to chest",
      "Seated spinal twist (Ardha Matsyendrasana) - Twist gently left and right",
      "Cat-cow pose (Marjaryasana-Bitilasana) - Gentle spinal movement",
      "Child's pose (Balasana) - Kneel and fold forward",
      "Legs up the wall pose (Viparita Karani) - Lie with legs elevated",
      "Vajrasana (Diamond pose) - Sit on heels after meals for 10 minutes",
    ],
    category: "Digestive",
    tips: [
      "Eat smaller, frequent meals instead of large portions",
      "Avoid spicy, oily, and processed foods",
      "Drink warm water 30 minutes before meals",
      "Don't lie down immediately after eating - wait 2-3 hours",
      "Chew food slowly and thoroughly",
      "Avoid eating late at night",
    ],
    severity: "mild to moderate",
    duration: "Few hours to 2 days",
  },

constipation: {
    symptoms: [
      "constipation",
      "hard stool",
      "difficulty passing stool",
      "bloating",
      "abdominal discomfort",
      "infrequent bowel movements",
      "straining",
    ],
    remedies: [
      "Warm water with lemon - First thing in morning on empty stomach",
      "Triphala powder - 1 tsp with warm water before bed",
      "Psyllium husk (Isabgol) - 1 tsp in water before meals",
      "Prunes soaked overnight - Eat 4-5 prunes with the water",
      "Castor oil - 1 tsp with warm milk before bed (occasional use only)",
      "Flaxseeds - 1 tbsp ground flaxseeds with water daily",
      "Aloe vera juice - 2 tbsp fresh juice in morning",
      "Figs soaked overnight - Eat 2-3 figs with water in morning",
    ],
    yoga: [
      "Malasana (Yogic squat) - Deep squat position",
      "Pawanmuktasana (Wind-relieving pose)",
      "Bhujangasana (Cobra pose) - Gentle backbend",
      "Dhanurasana (Bow pose) - Massage abdominal organs",
      "Seated forward bend (Paschimottanasana)",
      "Twisting poses - Bharadvajasana (Seated twist)",
    ],
    category: "Digestive",
    tips: [
      "Increase fiber intake - fruits, vegetables, whole grains",
      "Drink 8-10 glasses of water daily",
      "Exercise regularly - walking, jogging, yoga",
      "Establish regular bathroom routine",
      "Avoid processed and refined foods",
      "Don't delay when you feel the urge",
    ],
    severity: "mild to moderate",
    duration: "Immediate to few days",
  },

diarrhea: {
    symptoms: [
      "diarrhea",
      "loose stool",
      "watery stool",
      "frequent bowel movements",
      "stomach cramps",
      "dehydration",
      "nausea",
    ],
    remedies: [
      "ORS solution - Mix 1 tsp salt + 2 tsp sugar in 1 liter water",
      "BRAT diet - Bananas, Rice, Applesauce, Toast",
      "Buttermilk with salt - Fresh buttermilk with pinch of salt",
      "Pomegranate peel powder - 1/2 tsp with water twice daily",
      "Fenugreek seeds - Chew 1 tsp seeds with water",
      "Ginger and honey - Fresh ginger juice with honey",
      "Coconut water - Natural electrolyte replacement",
      "Carrot soup - Boiled and blended carrots with salt",
    ],
    yoga: [
      "Gentle pranayama - Slow, deep breathing",
      "Supported child's pose - Rest and relaxation",
      "Legs up the wall - Gentle inversion",
      "Gentle twists - Seated spinal twist",
      "Shavasana - Complete rest and recovery",
    ],
    category: "Digestive",
    tips: [
      "Stay hydrated - drink plenty of fluids",
      "Avoid dairy, caffeine, alcohol, fatty foods",
      "Eat bland, easy-to-digest foods",
      "Rest and avoid strenuous activities",
      "Maintain hygiene - wash hands frequently",
      "Seek medical help if severe or persistent",
    ],
    severity: "mild to severe",
    duration: "1-3 days",
  },

// Pain and Inflammation
  headache: {
    symptoms: [
      "headache",
      "migraine",
      "head pain",
      "tension headache",
      "cluster headache",
      "sinus headache",
      "temple pain",
    ],
    remedies: [
      "Peppermint oil massage - Mix with coconut oil and massage temples",
      "Cold compress - Apply ice pack wrapped in cloth for 15 minutes",
      "Ginger tea - Fresh ginger boiled in water with honey",
      "Lavender oil inhalation - Add to hot water and inhale steam",
      "Cinnamon paste - Mix cinnamon powder with water, apply on forehead",
      "Clove oil - Dilute and apply to temples (very small amount)",
      "Eucalyptus oil steam - Add to hot water for inhalation",
      "Basil leaves - Chew fresh basil leaves or make tea",
    ],
    yoga: [
      "Uttanasana (Forward fold) - Increase blood flow to head",
      "Neck rolls and gentle stretches - Release tension",
      "Pranayama - Deep breathing exercises",
      "Supported child's pose - Rest and relaxation",
      "Legs up the wall pose - Gentle inversion",
      "Shavasana with guided meditation",
    ],
    category: "Neurological",
    tips: [
      "Stay hydrated - dehydration causes headaches",
      "Maintain regular sleep schedule - 7-8 hours daily",
      "Avoid bright lights and loud noises",
      "Practice stress management techniques",
      "Limit screen time and take regular breaks",
      "Avoid trigger foods - chocolate, cheese, alcohol",
    ],
    severity: "mild to severe",
    duration: "30 minutes to several days",
  },

"back pain": {
    symptoms: [
      "back pain",
      "lower back pain",
      "upper back pain",
      "spine pain",
      "backache",
      "muscle stiffness",
      "sciatica",
      "disc pain",
    ],
    remedies: [
      "Hot compress - Apply heat pad or hot water bottle for 20 minutes",
      "Turmeric paste - Mix turmeric powder with mustard oil, apply topically",
      "Epsom salt bath - Add 2 cups to warm bath water, soak for 20 minutes",
      "Ginger and garlic paste - Apply externally with sesame oil",
      "Fenugreek powder - Mix with warm milk and drink before bed",
      "Eucalyptus oil massage - Mix with carrier oil and massage affected area",
      "Willow bark tea - Natural pain reliever, steep in hot water",
      "Ice pack - For acute pain, apply for 15 minutes every 2 hours",
    ],
    yoga: [
      "Cat-cow pose (Marjaryasana-Bitilasana) - Gentle spinal movement",
      "Child's pose (Balasana) - Stretch lower back",
      "Knee-to-chest pose (Apanasana) - Release lower back tension",
      "Spinal twist (Bharadvajasana) - Gentle rotation",
      "Bridge pose (Setu Bandhasana) - Strengthen back muscles",
      "Cobra pose (Bhujangasana) - Gentle backbend",
    ],
    category: "Musculoskeletal",
    tips: [
      "Maintain good posture while sitting and standing",
      "Sleep on firm mattress with proper pillow support",
      "Avoid heavy lifting or lift with proper technique",
      "Stay active with gentle movement and stretching",
      "Strengthen core muscles to support spine",
      "Take breaks from prolonged sitting",
    ],
    severity: "mild to severe",
    duration: "Few days to several weeks",
  },

arthritis: {
    symptoms: [
      "arthritis",
      "joint pain",
      "knee pain",
      "joint stiffness",
      "rheumatism",
      "swollen joints",
      "morning stiffness",
      "joint inflammation",
    ],
    remedies: [
      "Turmeric milk - 1 tsp turmeric with warm milk and black pepper",
      "Ginger tea - Fresh ginger boiled in water, anti-inflammatory",
      "Sesame oil massage - Warm oil massage on affected joints",
      "Garlic oil - Fry garlic in sesame oil, use for massage",
      "Fenugreek seeds - Soak overnight, eat in morning",
      "Boswellia (Shallaki) - Natural anti-inflammatory herb",
      "Epsom salt bath - Magnesium for muscle and joint relief",
      "Cherry juice - Natural anti-inflammatory compounds",
    ],
    yoga: [
      "Gentle joint movements - Slow, controlled motions",
      "Cat-cow pose - Gentle spinal mobility",
      "Seated spinal twist - Improve joint flexibility",
      "Supported warrior poses - Strengthen muscles around joints",
      "Gentle hip circles - Improve hip mobility",
      "Chair yoga - Modified poses for limited mobility",
    ],
    category: "Musculoskeletal",
    tips: [
      "Stay active with gentle movement daily",
      "Apply heat to stiff joints, cold to inflamed joints",
      "Maintain healthy weight to reduce joint stress",
      "Avoid prolonged sitting or standing",
      "Use ergonomic tools and supports",
      "Get adequate rest and sleep",
    ],
    severity: "mild to severe",
    duration: "chronic condition",
  },

// Mental Health
  anxiety: {
    symptoms: [
      "anxiety",
      "stress",
      "worry",
      "panic",
      "nervous",
      "anxious",
      "tension",
      "restless",
      "fear",
      "unease",
      "panic attacks",
    ],
    remedies: [
      "Chamomile tea - 2-3 cups daily for calming effect",
      "Ashwagandha powder - 1 tsp with warm milk before bed",
      "Brahmi (Bacopa) leaves - Chew fresh leaves or make tea",
      "Jatamansi oil massage - Mix with coconut oil for head massage",
      "Tulsi (Holy basil) tea - Fresh leaves boiled in water",
      "Lavender oil - Add to bath water or use in diffuser",
      "Passionflower tea - Steep dried herb in hot water",
      "Lemon balm tea - Natural anxiety reliever",
    ],
    yoga: [
      "Pranayama - Deep breathing exercises (Anulom Vilom, Bhramari)",
      "Meditation and mindfulness practice - 10-20 minutes daily",
      "Restorative poses - Supported child's pose, legs up wall",
      "Gentle forward folds - Balasana, Janu Sirsasana",
      "Savasana (Corpse pose) - Complete relaxation",
      "Yin yoga - Long-held, passive poses",
    ],
    category: "Mental Health",
    tips: [
      "Practice regular meditation and mindfulness",
      "Maintain consistent sleep routine - same time daily",
      "Limit caffeine intake, especially afternoon/evening",
      "Spend time in nature - parks, gardens, outdoors",
      "Exercise regularly - walking, swimming, yoga",
      "Connect with supportive friends and family",
    ],
    severity: "mild to severe",
    duration: "Varies - minutes to ongoing",
  },

depression: {
    symptoms: [
      "depression",
      "sadness",
      "hopelessness",
      "low mood",
      "lack of energy",
      "loss of interest",
      "fatigue",
      "mood swings",
      "emptiness",
    ],
    remedies: [
      "St. John's Wort tea - Natural mood enhancer (consult doctor first)",
      "Turmeric with black pepper - Anti-inflammatory for brain health",
      "Omega-3 rich foods - Walnuts, flaxseeds, fish oil",
      "Saffron tea - Few strands in warm milk",
      "Dark chocolate - Small amounts of 70%+ cacao",
      "Green tea - L-theanine for calm alertness",
      "Rhodiola root - Adaptogenic herb for stress",
      "Ginkgo biloba - Improve circulation to brain",
    ],
    yoga: [
      "Sun salutations (Surya Namaskara) - Energizing sequence",
      "Heart-opening poses - Camel, fish, cobra poses",
      "Inversions - Headstand, shoulder stand (if comfortable)",
      "Pranayama - Kapalabhati (skull-shining breath)",
      "Meditation - Loving-kindness meditation",
      "Gentle backbends - Open chest and heart",
    ],
    category: "Mental Health",
    tips: [
      "Maintain regular exercise routine",
      "Get adequate sunlight exposure daily",
      "Eat nutrient-dense, whole foods",
      "Establish social connections and support",
      "Practice gratitude journaling",
      "Seek professional help when needed",
    ],
    severity: "mild to severe",
    duration: "Weeks to months",
  },

// Sleep Disorders
  insomnia: {
    symptoms: [
      "insomnia",
      "sleeplessness",
      "can't sleep",
      "sleep problem",
      "restless sleep",
      "difficulty falling asleep",
      "waking up frequently",
    ],
    remedies: [
      "Warm milk with nutmeg - Pinch of nutmeg powder in warm milk before bed",
      "Chamomile tea - 1 cup 1 hour before bedtime",
      "Lavender oil - Few drops on pillow or diffuse in room",
      "Banana and almond - Natural melatonin and magnesium",
      "Poppy seeds (Khus Khus) - 1 tsp with warm milk",
      "Valerian root tea - Natural sedative herb",
      "Tart cherry juice - Natural source of melatonin",
      "Magnesium supplement - 200-400mg before bed",
    ],
    yoga: [
      "Legs up the wall pose (Viparita Karani) - 10-15 minutes",
      "Gentle forward fold (Janu Sirsasana) - Calming effect",
      "Supported child's pose - Deep relaxation",
      "Deep breathing exercises - 4-7-8 breathing technique",
      "Body scan meditation - Progressive muscle relaxation",
      "Yoga Nidra - Guided sleep meditation",
    ],
    category: "Sleep Disorders",
    tips: [
      "Avoid screens 1-2 hours before bed",
      "Keep bedroom cool (65-68°F), dark, and quiet",
      "Maintain consistent sleep schedule - same time daily",
      "Avoid caffeine after 2 PM",
      "Create relaxing bedtime routine",
      "Avoid large meals and alcohol before bed",
    ],
    severity: "mild to severe",
    duration: "Few nights to chronic",
  },

// Metabolic Disorders
  diabetes: {
    symptoms: [
      "diabetes",
      "high blood sugar",
      "sugar problem",
      "diabetic",
      "frequent urination",
      "excessive thirst",
      "fatigue",
      "blurred vision",
    ],
    remedies: [
      "Bitter gourd juice - Fresh juice on empty stomach daily",
      "Fenugreek seeds - Soak overnight, eat in morning with water",
      "Cinnamon powder - 1 tsp with warm water daily",
      "Neem leaves - Chew 4-5 fresh leaves daily on empty stomach",
      "Jamun seeds powder - 1 tsp with water twice daily",
      "Amla juice - Fresh amla juice with turmeric",
      "Karela and amla juice - Mix equal parts, drink morning",
      "Gymnema sylvestre - Herb that reduces sugar cravings",
    ],
    yoga: [
      "Surya Namaskara (Sun salutations) - Complete body workout",
      "Seated forward bend (Paschimottanasana) - Stimulate pancreas",
      "Legs up the wall (Viparita Karani) - Improve circulation",
      "Pranayama breathing - Anulom Vilom, Bhramari",
      "Meditation - Stress reduction for blood sugar control",
      "Twisting poses - Bharadvajasana, Ardha Matsyendrasana",
    ],
    category: "Metabolic",
    tips: [
      "Eat small frequent meals - 5-6 times daily",
      "Avoid refined sugars and processed foods",
      "Include high-fiber foods - vegetables, whole grains",
      "Regular physical activity - 30 minutes daily",
      "Monitor blood sugar levels regularly",
      "Maintain healthy weight",
    ],
    severity: "chronic condition",
    duration: "lifelong management",
  },

// Cardiovascular
  "high blood pressure": {
    symptoms: [
      "high blood pressure",
      "hypertension",
      "bp high",
      "blood pressure",
      "chest pressure",
      "dizziness",
      "headaches",
      "shortness of breath",
    ],
    remedies: [
      "Garlic - 2-3 cloves daily on empty stomach",
      "Hibiscus tea - 2 cups daily, natural ACE inhibitor",
      "Watermelon seeds - Dry and powder, 1 tsp with water",
      "Lemon water - Fresh lemon in warm water every morning",
      "Celery juice - Fresh celery stalks juiced daily",
      "Beetroot juice - Rich in nitrates, lowers BP",
      "Hawthorn berry tea - Cardiovascular support",
      "Pomegranate juice - Antioxidants for heart health",
    ],
    yoga: [
      "Gentle pranayama - Slow, deep breathing exercises",
      "Supported forward folds - Janu Sirsasana with props",
      "Legs up the wall (Viparita Karani) - Gentle inversion",
      "Meditation - Stress reduction techniques",
      "Gentle twists - Seated spinal twist",
      "Restorative poses - Supported child's pose",
    ],
    category: "Cardiovascular",
    tips: [
      "Reduce salt intake - less than 2300mg daily",
      "Regular gentle exercise - walking, swimming",
      "Manage stress levels - meditation, yoga",
      "Maintain healthy weight",
      "Limit alcohol consumption",
      "Quit smoking completely",
    ],
    severity: "mild to severe",
    duration: "chronic condition",
  },

// Skin Problems
  acne: {
    symptoms: [
      "acne",
      "pimples",
      "blackheads",
      "whiteheads",
      "skin breakouts",
      "oily skin",
      "clogged pores",
      "facial spots",
    ],
    remedies: [
      "Neem paste - Fresh neem leaves ground with water",
      "Turmeric and honey mask - Mix equal parts, apply for 20 minutes",
      "Tea tree oil - Dilute and apply to affected areas",
      "Aloe vera gel - Fresh gel applied twice daily",
      "Rose water - Use as toner morning and evening",
      "Cucumber juice - Apply fresh juice and leave for 30 minutes",
      "Oatmeal scrub - Gentle exfoliation with oats and honey",
      "Green tea toner - Cool green tea applied with cotton pad",
    ],
    yoga: [
      "Sun salutations - Improve circulation and detoxification",
      "Twisting poses - Help eliminate toxins",
      "Pranayama - Stress reduction for hormonal balance",
      "Meditation - Reduce stress-related breakouts",
      "Inversions - Increase blood flow to face",
      "Forward folds - Calm nervous system",
    ],
    category: "Dermatological",
    tips: [
      "Drink plenty of water - 8-10 glasses daily",
      "Eat fresh fruits and vegetables",
      "Avoid touching face with dirty hands",
      "Use natural, non-comedogenic skincare products",
      "Change pillowcases frequently",
      "Avoid squeezing or picking at pimples",
    ],
    severity: "mild to moderate",
    duration: "Few days to weeks",
  },

eczema: {
    symptoms: [
      "eczema",
      "skin rash",
      "itchy skin",
      "dry skin",
      "red patches",
      "skin inflammation",
      "dermatitis",
      "scaly skin",
    ],
    remedies: [
      "Coconut oil - Virgin coconut oil applied to affected areas",
      "Oatmeal bath - Colloidal oatmeal in lukewarm bath",
      "Aloe vera gel - Fresh gel for soothing and healing",
      "Honey - Raw honey applied as natural antiseptic",
      "Chamomile tea compress - Cool tea applied with cloth",
      "Evening primrose oil - Rich in gamma-linolenic acid",
      "Calendula cream - Natural anti-inflammatory",
      "Shea butter - Natural moisturizer for dry skin",
    ],
    yoga: [
      "Gentle, restorative poses - Reduce stress and inflammation",
      "Pranayama - Deep breathing for stress management",
      "Meditation - Reduce stress-triggered flare-ups",
      "Yin yoga - Long-held poses for relaxation",
      "Supported child's pose - Calming and grounding",
      "Legs up the wall - Improve circulation",
    ],
    category: "Dermatological",
    tips: [
      "Use fragrance-free, hypoallergenic products",
      "Take lukewarm (not hot) showers",
      "Pat skin dry, don't rub",
      "Moisturize immediately after bathing",
      "Wear soft, breathable fabrics",
      "Identify and avoid triggers",
    ],
    severity: "mild to severe",
    duration: "Chronic with flare-ups",
  },

// Hair Problems
  "hair fall": {
    symptoms: ["hair fall", "hair loss", "baldness", "thinning hair", "weak hair", "brittle hair", "receding hairline"],
    remedies: [
      "Onion juice - Apply fresh juice to scalp, leave for 30 minutes",
      "Coconut oil with curry leaves - Heat together, massage into scalp",
      "Fenugreek seed paste - Soak overnight, grind and apply",
      "Aloe vera gel - Apply to scalp and leave overnight",
      "Green tea rinse - Cool green tea used as final rinse",
      "Rosemary oil - Mix with carrier oil, massage scalp",
      "Egg mask - Whole egg applied to hair and scalp",
      "Amla oil - Rich in vitamin C, strengthens hair",
    ],
    yoga: [
      "Adho Mukha Svanasana (Downward dog) - Increase blood circulation",
      "Sirsasana (Headstand) - If comfortable, improves scalp circulation",
      "Neck rolls and stretches - Release tension in neck and shoulders",
      "Pranayama breathing - Reduce stress-related hair loss",
      "Scalp massage during meditation - Improve blood flow",
      "Balayam yoga - Rub fingernails together for hair growth",
    ],
    category: "Dermatological",
    tips: [
      "Eat protein-rich foods - eggs, fish, legumes, nuts",
      "Avoid harsh chemical treatments and heat styling",
      "Handle hair gently - no aggressive brushing",
      "Regular scalp massage with natural oils",
      "Get adequate sleep and manage stress",
      "Include iron and vitamin D in diet",
    ],
    severity: "mild to moderate",
    duration: "Few weeks to months",
  },

// Women's Health
  "menstrual cramps": {
    symptoms: [
      "menstrual cramps",
      "period pain",
      "menstrual pain",
      "pms",
      "period cramps",
      "dysmenorrhea",
      "abdominal cramps",
    ],
    remedies: [
      "Ginger tea - Fresh ginger boiled in water, drink warm",
      "Heat therapy - Hot water bottle or heating pad on lower abdomen",
      "Turmeric milk - Anti-inflammatory properties",
      "Cinnamon tea - Helps regulate menstrual cycle",
      "Fennel seeds - Chew or make tea, reduces cramping",
      "Chamomile tea - Natural muscle relaxant",
      "Magnesium supplement - Reduces muscle tension",
      "Dark chocolate - Small amounts for endorphins",
    ],
    yoga: [
      "Child's pose (Balasana) - Gentle compression on abdomen",
      "Cat-cow pose - Gentle spinal movement",
      "Supine twist - Gentle rotation to ease cramps",
      "Legs up the wall - Improve circulation",
      "Supported bridge pose - Open hips and pelvis",
      "Gentle pranayama - Deep breathing for pain relief",
    ],
    category: "Women's Health",
    tips: [
      "Stay hydrated with warm liquids",
      "Gentle exercise - walking, yoga",
      "Avoid caffeine and alcohol",
      "Get adequate rest",
      "Use heat therapy for comfort",
      "Maintain regular sleep schedule",
    ],
    severity: "mild to severe",
    duration: "1-3 days during menstruation",
  },

// Urinary Issues
  "urinary tract infection": {
    symptoms: [
      "uti",
      "urinary tract infection",
      "burning urination",
      "frequent urination",
      "bladder infection",
      "painful urination",
    ],
    remedies: [
      "Cranberry juice - Unsweetened, prevents bacteria adhesion",
      "D-Mannose supplement - Natural sugar that fights E. coli",
      "Increase water intake - Flush out bacteria",
      "Baking soda water - 1 tsp in glass of water",
      "Garlic - Natural antibiotic properties",
      "Probiotics - Restore healthy bacteria balance",
      "Uva ursi tea - Natural urinary antiseptic",
      "Corn silk tea - Soothing for urinary tract",
    ],
    yoga: [
      "Gentle twists - Improve kidney function",
      "Child's pose - Gentle pressure on bladder area",
      "Happy baby pose - Open hips and pelvis",
      "Legs up the wall - Improve circulation",
      "Gentle pranayama - Stress reduction",
      "Meditation - Support immune system",
    ],
    category: "Urinary",
    tips: [
      "Drink plenty of water - 8-10 glasses daily",
      "Urinate frequently, don't hold it",
      "Wipe front to back after using bathroom",
      "Avoid irritating feminine products",
      "Wear breathable cotton underwear",
      "Avoid tight-fitting clothes",
    ],
    severity: "mild to moderate",
    duration: "Few days with treatment",
  },

// Eye Problems
  "eye strain": {
    symptoms: [
      "eye strain",
      "tired eyes",
      "dry eyes",
      "blurry vision",
      "eye fatigue",
      "computer vision syndrome",
      "burning eyes",
    ],
    remedies: [
      "Cucumber slices - Place on closed eyes for 10-15 minutes",
      "Rose water - Use as eye drops or compress",
      "Cold compress - Reduce inflammation and puffiness",
      "Aloe vera gel - Gentle application around eyes",
      "Tea bags - Cool chamomile or green tea bags on eyes",
      "Castor oil - One drop in each eye before bed",
      "Triphala water - Ayurvedic eye wash",
      "Palming - Cover eyes with palms for relaxation",
    ],
    yoga: [
      "Eye exercises - Look up, down, left, right, circles",
      "Palming - Cover eyes with palms, relax",
      "Trataka - Candle gazing meditation",
      "Blinking exercises - Conscious blinking",
      "Distance gazing - Look at distant objects",
      "Neck and shoulder stretches - Release tension",
    ],
    category: "Ophthalmological",
    tips: [
      "Follow 20-20-20 rule - Every 20 minutes, look 20 feet away for 20 seconds",
      "Adjust screen brightness and contrast",
      "Maintain proper distance from screens",
      "Blink frequently to keep eyes moist",
      "Use artificial tears if needed",
      "Ensure proper lighting while reading",
    ],
    severity: "mild",
    duration: "Immediate relief to few days",
  },

// Kidney Issues
  "kidney stones": {
    symptoms: [
      "kidney stones",
      "kidney pain",
      "flank pain",
      "painful urination",
      "blood in urine",
      "nausea",
      "vomiting",
      "frequent urination",
    ],
    remedies: [
      "Lemon water - Fresh lemon juice in water throughout day",
      "Apple cider vinegar - 2 tbsp in water twice daily",
      "Kidney bean broth - Boil kidney beans, drink the liquid",
      "Watermelon juice - Natural diuretic, helps flush stones",
      "Pomegranate juice - Antioxidants and astringent properties",
      "Basil tea - Fresh basil leaves boiled in water",
      "Celery juice - Natural diuretic and anti-inflammatory",
      "Dandelion root tea - Supports kidney function",
    ],
    yoga: [
      "Gentle twisting poses - Stimulate kidney function",
      "Child's pose - Gentle pressure on kidneys",
      "Cat-cow pose - Gentle spinal movement",
      "Legs up the wall - Improve circulation",
      "Deep breathing - Stress reduction",
      "Avoid intense backbends during acute pain",
    ],
    category: "Urinary",
    tips: [
      "Drink plenty of water - 10-12 glasses daily",
      "Reduce sodium intake",
      "Limit oxalate-rich foods - spinach, nuts, chocolate",
      "Increase citrus fruits consumption",
      "Avoid excessive protein intake",
      "Seek medical attention for severe pain",
    ],
    severity: "moderate to severe",
    duration: "Few days to weeks",
  },

// Liver Issues
  "fatty liver": {
    symptoms: [
      "fatty liver",
      "liver problems",
      "abdominal pain",
      "fatigue",
      "nausea",
      "loss of appetite",
      "weight loss",
      "jaundice",
    ],
    remedies: [
      "Turmeric milk - 1 tsp turmeric in warm milk daily",
      "Green tea - 2-3 cups daily for antioxidants",
      "Lemon water - Fresh lemon in warm water morning",
      "Milk thistle tea - Liver detoxification herb",
      "Dandelion tea - Supports liver function",
      "Beetroot juice - Rich in antioxidants",
      "Garlic - 2-3 cloves daily for liver detox",
      "Apple cider vinegar - 1 tbsp in water before meals",
    ],
    yoga: [
      "Twisting poses - Stimulate liver function",
      "Seated spinal twist - Gentle liver massage",
      "Revolved triangle pose - Deep twist",
      "Pranayama - Deep breathing for detox",
      "Sun salutations - Full body detoxification",
      "Meditation - Stress reduction",
    ],
    category: "Digestive",
    tips: [
      "Avoid alcohol completely",
      "Reduce refined sugars and processed foods",
      "Eat plenty of fruits and vegetables",
      "Exercise regularly - 30 minutes daily",
      "Maintain healthy weight",
      "Avoid unnecessary medications",
    ],
    severity: "mild to severe",
    duration: "Months to years with lifestyle changes",
  },
}

function analyzeMessage(message: string) {
  const lowerMessage = message.toLowerCase()

// Check for exact disease matches first
  for (const [disease, data] of Object.entries(diseaseDatabase)) {
    if (lowerMessage.includes(disease)) {
      return { disease, data }
    }
  }

// Then check symptoms
  for (const [disease, data] of Object.entries(diseaseDatabase)) {
    if (data.symptoms.some((symptom) => lowerMessage.includes(symptom))) {
      return { disease, data }
    }
  }

return null
}

function generateConversationalResponse(disease: string, data: any) {
  const responses = [
    `I understand you're dealing with ${disease}. Don't worry, I'm here to help! I have some excellent natural remedies that have helped many people with similar issues.`,
    `Oh, ${disease} can be really uncomfortable! Let me share some tried and tested home remedies that can provide relief naturally.`,
    `I see you're experiencing ${disease}. The good news is that there are several effective natural treatments we can try together.`,
    `${disease} is quite common, and I have some wonderful natural solutions that can help you feel better. Let's explore some options!`,
    `I'm sorry to hear about your ${disease}. Let me suggest some gentle, natural remedies that have been very effective for this condition.`,
  ]

return responses[Math.floor(Math.random() * responses.length)]
}

export async function POST(request: Request) {
  const { message } = await request.json()

// Simulate AI processing delay
  await new Promise((resolve) => setTimeout(resolve, 1500))

const analysis = analyzeMessage(message)

if (analysis) {
    const { disease, data } = analysis
    const conversationalResponse = generateConversationalResponse(disease, data)

return NextResponse.json({
      response: conversationalResponse,
      diseaseCategory: data.category,
      disease: disease,
      severity: data.severity,
      duration: data.duration,
      prevention: data.prevention,
      recommendations: {
        remedies: data.remedies,
        yoga: data.yoga,
        lifestyle: data.tips,
      },
    })
  }

// More conversational general responses
  const generalResponses = [
    "Hello! I'm your personal health companion. I specialize in natural home remedies and yoga for various health conditions. What's bothering you today? Feel free to describe your symptoms or health concerns.",
    "Hi there! I'm here to help you with natural healing solutions. Whether it's a headache, stomach issues, stress, or any other health concern, I can suggest effective home remedies and yoga practices. What would you like to know about?",
    "Welcome! I'm like having a knowledgeable friend who knows all about natural health remedies. Tell me what's troubling you - whether it's physical discomfort, stress, or any health issue - and I'll share some wonderful natural solutions with you.",
    "Hey! Think of me as your personal wellness guide. I have extensive knowledge about home remedies, natural treatments, and yoga practices for all kinds of health issues. What can I help you with today?",
    "Namaste! I'm here to share the wisdom of natural healing with you. From common colds to chronic conditions, I can suggest effective home remedies and yoga practices. What health concern would you like to discuss?",
  ]

const randomResponse = generalResponses[Math.floor(Math.random() * generalResponses.length)]

return NextResponse.json({
    response: randomResponse,
    diseaseCategory: "General Wellness",
    recommendations: {
      remedies: ["Stay hydrated with warm water", "Eat fresh, seasonal fruits", "Get adequate sunlight"],
      yoga: ["Daily stretching routine", "Deep breathing exercises", "5-minute meditation"],
      lifestyle: ["Regular sleep schedule", "Balanced nutrition", "Stress management", "Stay connected with nature"],
    },
  })
}
[V0_FILE]typescriptreact:file="app/remedies/categories/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/remedies/category/[id]/loading.tsx" isMerged="true"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

export default function CategoryLoading() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-green-50 to-teal-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        {/* Header Skeleton */}
        <div className="mb-8">
          <Skeleton className="h-10 w-32 mb-4" />
          <Skeleton className="h-10 w-96 mb-4" />
          <Skeleton className="h-6 w-full max-w-2xl" />
        </div>

{/* Disease Cards Skeleton */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {Array.from({ length: 6 }).map((_, index) => (
            <Card key={index}>
              <CardHeader>
                <div className="flex items-center justify-between mb-2">
                  <Skeleton className="h-6 w-32" />
                  <Skeleton className="h-6 w-20" />
                </div>
                <div className="flex items-center space-x-4">
                  <Skeleton className="h-4 w-24" />
                  <Skeleton className="h-4 w-24" />
                </div>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  <div>
                    <Skeleton className="h-4 w-32 mb-2" />
                    <div className="space-y-2">
                      <Skeleton className="h-4 w-full" />
                      <Skeleton className="h-4 w-full" />
                      <Skeleton className="h-4 w-3/4" />
                    </div>
                  </div>
                  <div>
                    <Skeleton className="h-4 w-24 mb-2" />
                    <div className="space-y-1">
                      <Skeleton className="h-4 w-full" />
                      <Skeleton className="h-4 w-full" />
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/translations.ts" isEdit="true" isQuickEdit="true" isMerged="true"
export const translations = {
  en: {
    // Navigation
    nav: {
      home: "Home",
      remedies: "Remedies",
      yoga: "Yoga",
      tools: "Health Tools",
      community: "Community",
      dashboard: "Dashboard",
      about: "About",
      login: "Login",
      signup: "Sign Up",
      logout: "Logout",
    },

// Header
    title: "Complete Remedies Database",
    subtitle:
      "Comprehensive collection of natural home remedies for all health conditions with detailed solutions, yoga practices, and lifestyle tips",

// Search
    searchPlaceholder: "Search diseases, symptoms, or remedies (e.g., headache, ginger, stomach pain)...",
    recentSearches: "Recent Searches:",
    popularHealthIssues: "Popular Health Issues:",
    popularRemedies: "Popular Remedies & Practices:",
    clearAll: "Clear All",
    showing: "Showing",
    of: "of",
    remedies: "remedies",
    searchResults: "Search Results",
    noResults: "No remedies found matching your search criteria.",
    clearFilters: "Clear Filters",

// Categories
    categories: {
      all: "All",
      respiratory: "Respiratory",
      digestive: "Digestive",
      neurological: "Neurological",
      musculoskeletal: "Musculoskeletal",
      mentalHealth: "Mental Health",
      sleepDisorders: "Sleep Disorders",
      metabolic: "Metabolic",
      cardiovascular: "Cardiovascular",
      dermatological: "Dermatological",
      womensHealth: "Women's Health",
      ophthalmological: "Eye Problems",
      entDisorders: "ENT Disorders",
      immuneSystem: "Immune System",
    },

// Severity
    severity: {
      mild: "Mild",
      mildToModerate: "Mild to Moderate",
      mildToSevere: "Mild to Severe",
      chronic: "Chronic condition",
    },

// Common terms
    duration: "Duration",
    symptoms: "Common Symptoms",
    topRemedies: "Top Remedies",
    viewCompleteGuide: "View Complete Guide",
    ingredients: "Ingredients",
    preparation: "Preparation",
    dosage: "Dosage",
    precautions: "Precautions",
    effectiveness: "Effectiveness",
    userRating: "User Rating",
    reviews: "Reviews",

// Buttons and Actions
    buttons: {
      search: "Search",
      filter: "Filter",
      reset: "Reset",
      save: "Save",
      share: "Share",
      bookmark: "Bookmark",
      tryRemedy: "Try This Remedy",
      viewMore: "View More",
      loadMore: "Load More",
      back: "Back",
      next: "Next",
      submit: "Submit",
      cancel: "Cancel",
    },

// Health Tools
    tools: {
      bmi: "BMI Calculator",
      heartRate: "Heart Rate Monitor",
      calorieTracker: "Calorie Tracker",
      stressLevel: "Stress Level Assessment",
      waterIntake: "Water Intake Tracker",
      sleepQuality: "Sleep Quality Tracker",
    },

// Yoga
    yoga: {
      poses: "Yoga Poses",
      sessions: "Yoga Sessions",
      beginner: "Beginner",
      intermediate: "Intermediate",
      advanced: "Advanced",
      duration: "Duration",
      difficulty: "Difficulty",
      benefits: "Benefits",
      instructions: "Instructions",
      startSession: "Start Session",
      pauseSession: "Pause Session",
      completeSession: "Complete Session",
    },

// Community
    community: {
      posts: "Community Posts",
      createPost: "Create Post",
      share: "Share Experience",
      comments: "Comments",
      likes: "Likes",
      helpful: "Helpful",
      notHelpful: "Not Helpful",
    },

// Diseases
    diseases: {
      commonCold: "Common Cold",
      cough: "Cough",
      stomachPain: "Stomach Pain",
      constipation: "Constipation",
      headache: "Headache",
      backPain: "Back Pain",
      anxiety: "Anxiety",
      insomnia: "Insomnia",
      diabetes: "Diabetes",
      highBloodPressure: "High Blood Pressure",
      arthritis: "Arthritis",
      acne: "Acne",
      hairFall: "Hair Fall",
      menstrualCramps: "Menstrual Cramps",
      eyeStrain: "Eye Strain",
    },
  },

hi: {
    // Navigation
    nav: {
      home: "होम",
      remedies: "उपचार",
      yoga: "योग",
      tools: "स्वास्थ्य उपकरण",
      community: "समुदाय",
      dashboard: "डैशबोर्ड",
      about: "हमारे बारे में",
      login: "लॉगिन",
      signup: "साइन अप",
      logout: "लॉगआउट",
    },

// Header
    title: "संपूर्ण घरेलू उपचार डेटाबेस",
    subtitle: "सभी स्वास्थ्य समस्याओं के लिए प्राकृतिक घरेलू उपचार, योग अभ्यास और जीवनशैली सुझावों का व्यापक संग्रह",

// Search
    searchPlaceholder: "रोग, लक्षण या उपचार खोजें (जैसे: सिरदर्द, अदरक, पेट दर्द)...",
    recentSearches: "हाल की खोजें:",
    popularHealthIssues: "लोकप्रिय स्वास्थ्य समस्याएं:",
    popularRemedies: "लोकप्रिय उपचार और अभ्यास:",
    clearAll: "सभी साफ़ करें",
    showing: "दिखाया जा रहा",
    of: "में से",
    remedies: "उपचार",
    searchResults: "खोज परिणाम",
    noResults: "आपकी खोज के अनुसार कोई उपचार नहीं मिला।",
    clearFilters: "फिल्टर साफ़ करें",

// Categories
    categories: {
      all: "सभी",
      respiratory: "श्वसन संबंधी",
      digestive: "पाचन संबंधी",
      neurological: "न्यूरोलॉजिकल",
      musculoskeletal: "मांसपेशी और हड्डी",
      mentalHealth: "मानसिक स्वास्थ्य",
      sleepDisorders: "नींद की समस्याएं",
      metabolic: "चयापचय संबंधी",
      cardiovascular: "हृदय संबंधी",
      dermatological: "त्वचा संबंधी",
      womensHealth: "महिला स्वास्थ्य",
      ophthalmological: "आंखों की समस्याएं",
      entDisorders: "कान, नाक, गला",
      immuneSystem: "प्रतिरक्षा प्रणाली",
    },

// Severity
    severity: {
      mild: "हल्का",
      mildToModerate: "हल्का से मध्यम",
      mildToSevere: "हल्का से गंभीर",
      chronic: "पुरानी समस्या",
    },

// Common terms
    duration: "अवधि",
    symptoms: "सामान्य लक्षण",
    topRemedies: "मुख्य उपचार",
    viewCompleteGuide: "पूरी गाइड देखें",
    ingredients: "सामग्री",
    preparation: "तैयारी",
    dosage: "खुराक",
    precautions: "सावधानियां",
    effectiveness: "प्रभावशीलता",
    userRating: "उपयोगकर्ता रेटिंग",
    reviews: "समीक्षाएं",

// Buttons and Actions
    buttons: {
      search: "खोजें",
      filter: "फिल्टर",
      reset: "रीसेट",
      save: "सेव करें",
      share: "साझा करें",
      bookmark: "बुकमार्क",
      tryRemedy: "यह उपचार आजमाएं",
      viewMore: "और देखें",
      loadMore: "और लोड करें",
      back: "वापस",
      next: "आगे",
      submit: "जमा करें",
      cancel: "रद्द करें",
    },

// Health Tools
    tools: {
      bmi: "बीएमआई कैलकुलेटर",
      heartRate: "हृदय गति मॉनिटर",
      calorieTracker: "कैलोरी ट्रैकर",
      stressLevel: "तनाव स्तर आकलन",
      waterIntake: "पानी सेवन ट्रैकर",
      sleepQuality: "नींद की गुणवत्ता ट्रैकर",
    },

// Yoga
    yoga: {
      poses: "योग आसन",
      sessions: "योग सत्र",
      beginner: "शुरुआती",
      intermediate: "मध्यम",
      advanced: "उन्नत",
      duration: "अवधि",
      difficulty: "कठिनाई",
      benefits: "लाभ",
      instructions: "निर्देश",
      startSession: "सत्र शुरू करें",
      pauseSession: "सत्र रोकें",
      completeSession: "सत्र पूरा करें",
    },

// Community
    community: {
      posts: "समुदाय पोस्ट",
      createPost: "पोस्ट बनाएं",
      share: "अनुभव साझा करें",
      comments: "टिप्पणियां",
      likes: "पसंद",
      helpful: "उपयोगी",
      notHelpful: "उपयोगी नहीं",
    },

// Diseases
    diseases: {
      commonCold: "सामान्य सर्दी-जुकाम",
      cough: "खांसी",
      stomachPain: "पेट दर्द",
      constipation: "कब्ज",
      headache: "सिरदर्द",
      backPain: "कमर दर्द",
      anxiety: "चिंता",
      insomnia: "अनिद्रा",
      diabetes: "मधुमेह",
      highBloodPressure: "उच्च रक्तचाप",
      arthritis: "गठिया",
      acne: "मुंहासे",
      hairFall: "बाल झड़ना",
      menstrualCramps: "मासिक धर्म में दर्द",
      eyeStrain: "आंखों की थकान",
    },
  },

gu: {
    // Navigation
    nav: {
      home: "હોમ",
      remedies: "ઉપચાર",
      yoga: "યોગ",
      tools: "સ્વાસ્થ્ય સાધનો",
      community: "સમુદાય",
      dashboard: "ડેશબોર્ડ",
      about: "અમારા વિશે",
      login: "લોગિન",
      signup: "સાઇન અપ",
      logout: "લોગઆઉટ",
    },

// Header
    title: "સંપૂર્ણ ઘરેલું ઉપચાર ડેટાબેસ",
    subtitle: "તમામ સ્વાસ્થ્ય સમસ્યાઓ માટે કુદરતી ઘરેલું ઉપચાર, યોગ અભ્યાસ અને જીવનશૈલીના સૂચનોનો વ્યાપક સંગ્રહ",

// Search
    searchPlaceholder: "રોગ, લક્ષણો અથવા ઉપચાર શોધો (જેમ કે: માથાનો દુખાવો, આદુ, પેટનો દુખાવો)...",
    recentSearches: "તાજેતરની શોધ:",
    popularHealthIssues: "લોકપ્રિય સ્વાસ્થ્ય સમસ્યાઓ:",
    popularRemedies: "લોકપ્રિય ઉપચાર અને પ્રથાઓ:",
    clearAll: "બધું સાફ કરો",
    showing: "બતાવી રહ્યા છીએ",
    of: "માંથી",
    remedies: "ઉપચાર",
    searchResults: "શોધ પરિણામો",
    noResults: "તમારી શોધ અનુસાર કોઈ ઉપચાર મળ્યો નથી.",
    clearFilters: "ફિલ્ટર સાફ કરો",

// Categories
    categories: {
      all: "બધા",
      respiratory: "શ્વસન સંબંધી",
      digestive: "પાચન સંબંધી",
      neurological: "ન્યુરોલોજિકલ",
      musculoskeletal: "સ્નાયુ અને હાડકા",
      mentalHealth: "માનસિક સ્વાસ્થ્ય",
      sleepDisorders: "ઊંઘની સમસ્યાઓ",
      metabolic: "ચયાપચય સંબંધી",
      cardiovascular: "હૃદય સંબંધી",
      dermatological: "ત્વચા સંબંધી",
      womensHealth: "મહિલા સ્વાસ્થ્ય",
      ophthalmological: "આંખની સમસ્યાઓ",
      entDisorders: "કાન, નાક, ગળા",
      immuneSystem: "રોગપ્રતિકારક શક્તિ",
    },

// Severity
    severity: {
      mild: "હળવી",
      mildToModerate: "હળવીથી મધ્યમ",
      mildToSevere: "હળવીથી ગંભીર",
      chronic: "જૂની સમસ્યા",
    },

// Common terms
    duration: "અવધિ",
    symptoms: "સામાન્ય લક્ષણો",
    topRemedies: "મુખ્ય ઉપચાર",
    viewCompleteGuide: "સંપૂર્ણ માર્ગદર્શિકા જુઓ",
    ingredients: "સામગ્રી",
    preparation: "તૈયારી",
    dosage: "માત્રા",
    precautions: "સાવચેતીઓ",
    effectiveness: "અસરકારકતા",
    userRating: "વપરાશકર્તા રેટિંગ",
    reviews: "સમીક્ષાઓ",

// Buttons and Actions
    buttons: {
      search: "શોધો",
      filter: "ફિલ્ટર",
      reset: "રીસેટ",
      save: "સેવ કરો",
      share: "શેર કરો",
      bookmark: "બુકમાર્ક",
      tryRemedy: "આ ઉપચાર અજમાવો",
      viewMore: "વધુ જુઓ",
      loadMore: "વધુ લોડ કરો",
      back: "પાછા",
      next: "આગળ",
      submit: "સબમિટ",
      cancel: "રદ કરો",
    },

// Health Tools
    tools: {
      bmi: "બીએમઆઈ કેલ્ક્યુલેટર",
      heartRate: "હૃદય ગતિ મોનિટર",
      calorieTracker: "કેલરી ટ્રેકર",
      stressLevel: "તણાવ સ્તર મૂલ્યાંકન",
      waterIntake: "પાણી સેવન ટ્રેકર",
      sleepQuality: "ઊંઘની ગુણવત્તા ટ્રેકર",
    },

// Yoga
    yoga: {
      poses: "યોગ આસનો",
      sessions: "યોગ સત્રો",
      beginner: "શરૂઆતી",
      intermediate: "મધ્યમ",
      advanced: "અદ્યતન",
      duration: "અવધિ",
      difficulty: "મુશ્કેલી",
      benefits: "ફાયદા",
      instructions: "સૂચનાઓ",
      startSession: "સત્ર શરૂ કરો",
      pauseSession: "સત્ર થોભાવો",
      completeSession: "સત્ર પૂર્ણ કરો",
    },

// Community
    community: {
      posts: "સમુદાય પોસ્ટ્સ",
      createPost: "પોસ્ટ બનાવો",
      share: "અનુભવ શેર કરો",
      comments: "ટિપ્પણીઓ",
      likes: "પસંદ",
      helpful: "ઉપયોગી",
      notHelpful: "ઉપયોગી નથી",
    },

// Diseases
    diseases: {
      commonCold: "સામાન્ય શરદી-ઉધરસ",
      cough: "ઉધરસ",
      stomachPain: "પેટનો દુખાવો",
      constipation: "કબજિયાત",
      headache: "માથાનો દુખાવો",
      backPain: "કમરનો દુખાવો",
      anxiety: "ચિંતા",
      insomnia: "અનિદ્રા",
      diabetes: "મધુપ્રમેહ",
      highBloodPressure: "ઉચ્ચ બ્લડ પ્રેશર",
      arthritis: "સાંધાનો દુખાવો",
      acne: "ખીલ",
      hairFall: "વાળ ખરવા",
      menstrualCramps: "માસિક ધર્મમાં દુખાવો",
      eyeStrain: "આંખોની થાક",
    },
  },
}

export type Language = keyof typeof translations
export type TranslationKey = keyof typeof translations.en

export function getTranslation(language: Language, key: string): string {
  const keys = key.split(".")
  let value: any = translations[language]

for (const k of keys) {
    value = value?.[k]
  }

return value || translations.en[key as TranslationKey] || key
}
[V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="lib/language-context.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useState, useEffect } from "react"

type Language = "en" | "hi" | "gu"

interface LanguageContextType {
  language: Language
  setLanguage: (lang: Language) => void
  t: (key: string) => string
}

const LanguageContext = createContext<LanguageContextType | undefined>(undefined)

const translations = {
  en: {
    home: "Home",
    remedies: "Remedies",
    yoga: "Yoga",
    tools: "Health Tools",
    community: "Community",
    chat: "AI Chat",
    dashboard: "Dashboard",
    about: "About",
    login: "Login",
    signup: "Sign Up",
    search: "Search remedies...",
    categories: "Categories",
    popular: "Popular Remedies",
    recent: "Recent",
    featured: "Featured",
    loading: "Loading...",
    error: "Something went wrong",
    tryAgain: "Try Again",
    viewAll: "View All",
    learnMore: "Learn More",
    getStarted: "Get Started",
    // Category names
    respiratory: "Respiratory",
    digestive: "Digestive",
    skinHair: "Skin & Hair",
    jointMuscle: "Joint & Muscle",
    mentalHealth: "Mental Health",
    womensHealth: "Women's Health",
    eyeCare: "Eye Care",
    ent: "ENT",
    immuneSystem: "Immune System",
    urinarySystem: "Urinary System",
    childrensHealth: "Children's Health",
  },
  hi: {
    home: "होम",
    remedies: "उपचार",
    yoga: "योग",
    tools: "स्वास्थ्य उपकरण",
    community: "समुदाय",
    chat: "एआई चैट",
    dashboard: "डैशबोर्ड",
    about: "के बारे में",
    login: "लॉगिन",
    signup: "साइन अप",
    search: "उपचार खोजें...",
    categories: "श्रेणियां",
    popular: "लोकप्रिय उपचार",
    recent: "हाल का",
    featured: "विशेष",
    loading: "लोड हो रहा है...",
    error: "कुछ गलत हुआ",
    tryAgain: "फिर कोशिश करें",
    viewAll: "सभी देखें",
    learnMore: "और जानें",
    getStarted: "शुरू करें",
    // Category names
    respiratory: "श्वसन संबंधी",
    digestive: "पाचन संबंधी",
    skinHair: "त्वचा और बाल",
    jointMuscle: "जोड़ों और मांसपेशियों",
    mentalHealth: "मानसिक स्वास्थ्य",
    womensHealth: "महिलाओं का स्वास्थ्य",
    eyeCare: "आंखों की देखभाल",
    ent: "कान, नाक, गला",
    immuneSystem: "प्रतिरक्षा प्रणाली",
    urinarySystem: "मूत्र संबंधी",
    childrensHealth: "बच्चों का स्वास्थ्य",
  },
  gu: {
    home: "હોમ",
    remedies: "ઉપચાર",
    yoga: "યોગ",
    tools: "આરોગ્ય સાધનો",
    community: "સમુદાય",
    chat: "એઆઈ ચેટ",
    dashboard: "ડેશબોર્ડ",
    about: "વિશે",
    login: "લોગિન",
    signup: "સાઇન અપ",
    search: "ઉપચાર શોધો...",
    categories: "શ્રેણીઓ",
    popular: "લોકપ્રિય ઉપચાર",
    recent: "તાજેતરના",
    featured: "વિશેષ",
    loading: "લોડ થઈ રહ્યું છે...",
    error: "કંઈક ખોટું થયું",
    tryAgain: "ફરી પ્રયાસ કરો",
    viewAll: "બધું જુઓ",
    learnMore: "વધુ જાણો",
    getStarted: "શરૂ કરો",
    // Category names
    respiratory: "શ્વસન સંબંધી",
    digestive: "પાચન સંબંધી",
    skinHair: "ત્વચા અને વાળ",
    jointMuscle: "સાંધા અને સ્નાયુઓ",
    mentalHealth: "માનસિક આરોગ્ય",
    womensHealth: "મહિલાઓનું આરોગ્ય",
    eyeCare: "આંખોની સંભાળ",
    ent: "કાન, નાક, ગળું",
    immuneSystem: "રોગપ્રતિકારક શક્તિ",
    urinarySystem: "પેશાબ સંબંધી",
    childrensHealth: "બાળકોનું આરોગ્ય",
  },
}

export function LanguageProvider({ children }: { children: React.ReactNode }) {
  const [language, setLanguage] = useState<Language>("en")

useEffect(() => {
    const savedLanguage = localStorage.getItem("language") as Language
    if (savedLanguage && ["en", "hi", "gu"].includes(savedLanguage)) {
      setLanguage(savedLanguage)
    }
  }, [])

const handleSetLanguage = (lang: Language) => {
    setLanguage(lang)
    localStorage.setItem("language", lang)
  }

const t = (key: string): string => {
    return translations[language][key as keyof (typeof translations)[typeof language]] || key
  }

return (
    <LanguageContext.Provider value={{ language, setLanguage: handleSetLanguage, t }}>
      {children}
    </LanguageContext.Provider>
  )
}

export function useLanguage() {
  const context = useContext(LanguageContext)
  if (context === undefined) {
    throw new Error("useLanguage must be used within a LanguageProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="app/api/remedies/[id]/route.ts" isEdit="true" isMerged="true"
import { NextResponse } from "next/server"

const remediesDatabase = {
  "1": {
    id: 1,
    title: "Honey and Ginger for Cough",
    description: "Natural remedy to soothe throat and reduce coughing",
    ingredients: ["2 tbsp honey", "1 tsp fresh ginger juice", "Warm water"],
    instructions: [
      "Grate fresh ginger and extract juice using a clean cloth",
      "Mix honey with fresh ginger juice in a small bowl",
      "Add the mixture to a cup of warm water",
      "Stir well and drink slowly while warm",
      "Take 2-3 times daily for best results",
    ],
    duration: "5 mins",
    rating: 4.8,
    users: 1200,
    category: "Respiratory",
    benefits: [
      "Soothes throat irritation",
      "Reduces cough frequency",
      "Boosts immune system",
      "Anti-inflammatory properties",
      "Natural antibacterial effects",
    ],
    precautions: [
      "Not suitable for children under 1 year",
      "Diabetics should monitor honey intake",
      "May interact with blood thinning medications",
      "Consult doctor if symptoms persist",
    ],
    relatedDiseases: ["Cold", "Flu", "Bronchitis", "Sore Throat"],
  },
  "2": {
    id: 2,
    title: "Turmeric Milk for Inflammation",
    description: "Anti-inflammatory drink to boost immunity",
    ingredients: ["1 cup milk", "1 tsp turmeric powder", "Pinch of black pepper", "1 tsp honey"],
    instructions: [
      "Heat milk in a saucepan over medium heat",
      "Add turmeric powder and black pepper",
      "Simmer for 5 minutes while stirring",
      "Remove from heat and add honey",
      "Strain and serve warm before bedtime",
    ],
    duration: "10 mins",
    rating: 4.9,
    users: 2100,
    category: "Immunity",
    benefits: [
      "Reduces inflammation",
      "Boosts immune system",
      "Improves sleep quality",
      "Supports joint health",
      "Rich in antioxidants",
    ],
    precautions: [
      "May stain teeth and clothes",
      "Can increase bleeding risk",
      "May worsen acid reflux",
      "Avoid if allergic to turmeric",
    ],
    relatedDiseases: ["Arthritis", "Joint Pain", "Inflammation", "Insomnia"],
  },
  "3": {
    id: 3,
    title: "Aloe Vera for Skin Burns",
    description: "Natural cooling remedy for minor burns and skin irritation",
    ingredients: ["Fresh aloe vera leaf", "Clean cloth", "Cold water"],
    instructions: [
      "Cut a fresh aloe vera leaf and extract the gel",
      "Clean the affected area with cold water",
      "Apply aloe vera gel gently on the burn",
      "Leave it on for 15-20 minutes",
      "Rinse with cool water and pat dry",
      "Repeat 2-3 times daily until healed",
    ],
    duration: "3 mins",
    rating: 4.7,
    users: 890,
    category: "Skin & Hair",
    benefits: [
      "Cools and soothes burns",
      "Reduces inflammation",
      "Promotes healing",
      "Moisturizes skin",
      "Prevents scarring",
    ],
    precautions: [
      "Test on small area first",
      "Avoid if allergic to aloe",
      "Don't use on deep burns",
      "Seek medical help for severe burns",
    ],
    relatedDiseases: ["Burns", "Sunburn", "Skin Irritation", "Eczema"],
  },
  "4": {
    id: 4,
    title: "Ginger Tea for Nausea",
    description: "Effective remedy for morning sickness and motion sickness",
    ingredients: ["1 inch fresh ginger", "1 cup water", "Honey to taste", "Lemon juice (optional)"],
    instructions: [
      "Slice fresh ginger into thin pieces",
      "Boil water in a small pot",
      "Add ginger slices and simmer for 10 minutes",
      "Strain the tea into a cup",
      "Add honey and lemon juice if desired",
      "Drink warm, 2-3 times daily",
    ],
    duration: "15 mins",
    rating: 4.6,
    users: 1500,
    category: "Digestive",
    benefits: [
      "Reduces nausea and vomiting",
      "Improves digestion",
      "Settles upset stomach",
      "Anti-inflammatory effects",
      "Boosts circulation",
    ],
    precautions: [
      "May interact with blood thinners",
      "Avoid excessive amounts during pregnancy",
      "Can cause heartburn in some people",
      "Consult doctor if symptoms persist",
    ],
    relatedDiseases: ["Nausea", "Morning Sickness", "Motion Sickness", "Indigestion"],
  },
  "5": {
    id: 5,
    title: "Chamomile Tea for Sleep",
    description: "Calming herbal tea to promote better sleep and relaxation",
    ingredients: ["2 tsp dried chamomile flowers", "1 cup hot water", "Honey (optional)"],
    instructions: [
      "Place chamomile flowers in a tea infuser or cup",
      "Pour hot water over the flowers",
      "Cover and steep for 5-10 minutes",
      "Remove infuser or strain the tea",
      "Add honey if desired",
      "Drink 30 minutes before bedtime",
    ],
    duration: "10 mins",
    rating: 4.5,
    users: 2300,
    category: "Mental Health",
    benefits: [
      "Promotes better sleep",
      "Reduces anxiety",
      "Calms the mind",
      "Relieves stress",
      "Improves sleep quality",
    ],
    precautions: [
      "May cause drowsiness",
      "Avoid if allergic to ragweed",
      "Can interact with sedatives",
      "Not recommended with blood thinners",
    ],
    relatedDiseases: ["Insomnia", "Anxiety", "Stress", "Sleep Disorders"],
  },
  "ginger-tea-cold": {
    id: "ginger-tea-cold",
    title: "Ginger Tea for Cold",
    description: "Natural remedy to boost immunity and fight cold symptoms",
    ingredients: ["Fresh ginger", "Honey", "Lemon", "Hot water"],
    instructions: [
      "Slice 1 inch of fresh ginger into thin pieces",
      "Boil 2 cups of water in a pot",
      "Add ginger slices and simmer for 10 minutes",
      "Strain the tea into a cup",
      "Add 1 tablespoon honey and lemon juice",
      "Drink hot, 2-3 times daily",
    ],
    duration: "2-3 days",
    rating: 4.8,
    users: 2847,
    category: "Respiratory",
    benefits: [
      "Boosts immune system",
      "Reduces cold symptoms",
      "Anti-inflammatory properties",
      "Soothes sore throat",
      "Clears nasal congestion",
    ],
    precautions: [
      "May interact with blood thinners",
      "Avoid if you have gallstones",
      "Can cause heartburn in sensitive individuals",
      "Consult doctor if symptoms worsen",
    ],
    relatedDiseases: ["Common Cold", "Flu", "Sore Throat", "Congestion"],
  },
  "turmeric-milk-cough": {
    id: "turmeric-milk-cough",
    title: "Turmeric Milk for Cough",
    description: "Anti-inflammatory remedy to soothe throat and reduce cough",
    ingredients: ["Turmeric powder", "Warm milk", "Honey", "Black pepper"],
    instructions: [
      "Heat 1 cup of milk in a saucepan",
      "Add 1/2 teaspoon turmeric powder",
      "Add a pinch of black pepper",
      "Simmer for 5 minutes while stirring",
      "Remove from heat and add honey to taste",
      "Drink warm before bedtime",
    ],
    duration: "3-5 days",
    rating: 4.7,
    users: 1923,
    category: "Respiratory",
    benefits: [
      "Reduces cough and throat irritation",
      "Anti-inflammatory effects",
      "Boosts immunity",
      "Promotes better sleep",
      "Rich in antioxidants",
    ],
    precautions: [
      "May stain teeth temporarily",
      "Can increase bleeding risk",
      "Avoid if lactose intolerant",
      "May worsen acid reflux",
    ],
    relatedDiseases: ["Cough", "Bronchitis", "Throat Infection", "Respiratory Issues"],
  },
  "peppermint-tea-headache": {
    id: "peppermint-tea-headache",
    title: "Peppermint Tea for Headache",
    description: "Natural pain relief for tension headaches and migraines",
    ingredients: ["Fresh peppermint leaves", "Hot water", "Honey"],
    instructions: [
      "Take 10-12 fresh peppermint leaves",
      "Wash the leaves thoroughly",
      "Place leaves in a cup and pour hot water",
      "Cover and steep for 5-7 minutes",
      "Strain and add honey if desired",
      "Drink slowly while inhaling the aroma",
    ],
    duration: "30 minutes",
    rating: 4.5,
    users: 1456,
    category: "Neurological",
    benefits: [
      "Relieves tension headaches",
      "Reduces migraine intensity",
      "Calms the nervous system",
      "Improves mental clarity",
      "Natural muscle relaxant",
    ],
    precautions: [
      "May worsen acid reflux",
      "Can interact with certain medications",
      "Avoid if allergic to mint",
      "May cause drowsiness in some people",
    ],
    relatedDiseases: ["Headache", "Migraine", "Tension", "Stress"],
  },
}

export async function GET(request: Request, { params }: { params: { id: string } }) {
  try {
    const remedyId = params.id
    console.log("Fetching remedy with ID:", remedyId)

const remedy = remediesDatabase[remedyId as keyof typeof remediesDatabase]

if (!remedy) {
      console.log("Remedy not found for ID:", remedyId)
      return NextResponse.json(
        { error: "Remedy not found", message: `No remedy found with ID: ${remedyId}` },
        { status: 404 },
      )
    }

console.log("Remedy found:", remedy.title)
    return NextResponse.json(remedy)
  } catch (error) {
    console.error("Error fetching remedy:", error)
    return NextResponse.json({ error: "Internal server error", message: "Failed to fetch remedy" }, { status: 500 })
  }
}

export async function POST(request: Request, { params }: { params: { id: string } }) {
  try {
    const remedyId = params.id
    const remedy = remediesDatabase[remedyId as keyof typeof remediesDatabase]

if (!remedy) {
      return NextResponse.json({ error: "Remedy not found" }, { status: 404 })
    }

// Handle favorite toggle
    return NextResponse.json({ success: true, message: "Favorite toggled successfully" })
  } catch (error) {
    console.error("Error toggling favorite:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/remedies/categories/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import {
  Search,
  Users,
  BookOpen,
  Leaf,
  Heart,
  Brain,
  Droplets,
  Eye,
  Ear,
  Shield,
  Baby,
  Stethoscope,
} from "lucide-react"
import Link from "next/link"

interface Category {
  id: string
  name: string
  description: string
  icon: React.ReactNode
  remedyCount: number
  commonConditions: string[]
  color: string
  gradient: string
}

export default function CategoriesPage() {
  const [searchTerm, setSearchTerm] = useState("")
  const [filteredCategories, setFilteredCategories] = useState<Category[]>([])

const categories: Category[] = [
    {
      id: "respiratory",
      name: "Respiratory Health",
      description: "Natural remedies for breathing, lung health, and respiratory conditions",
      icon: <Stethoscope className="w-8 h-8" />,
      remedyCount: 45,
      commonConditions: ["Common Cold", "Cough", "Asthma", "Bronchitis", "Sore Throat", "Congestion"],
      color: "text-blue-600",
      gradient: "from-blue-500 to-cyan-500",
    },
    {
      id: "digestive",
      name: "Digestive System",
      description: "Remedies for stomach, intestinal, and digestive health issues",
      icon: <Leaf className="w-8 h-8" />,
      remedyCount: 38,
      commonConditions: ["Indigestion", "Nausea", "Constipation", "Diarrhea", "Acid Reflux", "Bloating"],
      color: "text-green-600",
      gradient: "from-green-500 to-emerald-500",
    },
    {
      id: "skin-hair",
      name: "Skin & Hair Care",
      description: "Natural treatments for skin conditions and hair health",
      icon: <Heart className="w-8 h-8" />,
      remedyCount: 52,
      commonConditions: ["Acne", "Eczema", "Dry Skin", "Hair Loss", "Dandruff", "Wounds"],
      color: "text-purple-600",
      gradient: "from-purple-500 to-pink-500",
    },
    {
      id: "joint-muscle",
      name: "Joint & Muscle Health",
      description: "Remedies for pain relief, inflammation, and mobility issues",
      icon: <Users className="w-8 h-8" />,
      remedyCount: 29,
      commonConditions: ["Arthritis", "Joint Pain", "Muscle Cramps", "Back Pain", "Inflammation", "Stiffness"],
      color: "text-orange-600",
      gradient: "from-orange-500 to-red-500",
    },
    {
      id: "mental-health",
      name: "Mental Health & Sleep",
      description: "Natural solutions for stress, anxiety, and sleep disorders",
      icon: <Brain className="w-8 h-8" />,
      remedyCount: 24,
      commonConditions: ["Insomnia", "Anxiety", "Stress", "Depression", "Mental Fatigue", "Mood Swings"],
      color: "text-indigo-600",
      gradient: "from-indigo-500 to-purple-500",
    },
    {
      id: "womens-health",
      name: "Women's Health",
      description: "Specialized remedies for women's health and wellness needs",
      icon: <Heart className="w-8 h-8" />,
      remedyCount: 31,
      commonConditions: ["Menstrual Issues", "Pregnancy Care", "Menopause", "Hormonal Balance", "PCOS", "Fertility"],
      color: "text-pink-600",
      gradient: "from-pink-500 to-rose-500",
    },
    {
      id: "eye-care",
      name: "Eye Care",
      description: "Natural remedies for eye health and vision problems",
      icon: <Eye className="w-8 h-8" />,
      remedyCount: 18,
      commonConditions: ["Eye Strain", "Dry Eyes", "Conjunctivitis", "Dark Circles", "Puffy Eyes", "Vision Support"],
      color: "text-teal-600",
      gradient: "from-teal-500 to-cyan-500",
    },
    {
      id: "ent",
      name: "Ear, Nose & Throat",
      description: "Treatments for ENT conditions and related health issues",
      icon: <Ear className="w-8 h-8" />,
      remedyCount: 22,
      commonConditions: [
        "Ear Infection",
        "Sinusitis",
        "Tonsillitis",
        "Hearing Issues",
        "Nasal Congestion",
        "Throat Pain",
      ],
      color: "text-yellow-600",
      gradient: "from-yellow-500 to-orange-500",
    },
    {
      id: "immune-system",
      name: "Immune System",
      description: "Boost immunity and fight infections naturally",
      icon: <Shield className="w-8 h-8" />,
      remedyCount: 35,
      commonConditions: [
        "Low Immunity",
        "Frequent Infections",
        "Allergies",
        "Autoimmune Issues",
        "Fatigue",
        "Recovery",
      ],
      color: "text-red-600",
      gradient: "from-red-500 to-pink-500",
    },
    {
      id: "urinary-system",
      name: "Urinary System",
      description: "Natural remedies for kidney and urinary tract health",
      icon: <Droplets className="w-8 h-8" />,
      remedyCount: 16,
      commonConditions: ["UTI", "Kidney Stones", "Bladder Issues", "Frequent Urination", "Water Retention", "Detox"],
      color: "text-cyan-600",
      gradient: "from-cyan-500 to-blue-500",
    },
    {
      id: "childrens-health",
      name: "Children's Health",
      description: "Safe and gentle remedies specifically for children",
      icon: <Baby className="w-8 h-8" />,
      remedyCount: 27,
      commonConditions: ["Colic", "Teething", "Fever", "Rashes", "Sleep Issues", "Digestive Problems"],
      color: "text-emerald-600",
      gradient: "from-emerald-500 to-green-500",
    },
  ]

useEffect(() => {
    if (searchTerm) {
      const filtered = categories.filter(
        (category) =>
          category.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
          category.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
          category.commonConditions.some((condition) => condition.toLowerCase().includes(searchTerm.toLowerCase())),
      )
      setFilteredCategories(filtered)
    } else {
      setFilteredCategories(categories)
    }
  }, [searchTerm])

const totalRemedies = categories.reduce((sum, category) => sum + category.remedyCount, 0)

return (
    <div className="min-h-screen bg-gradient-to-br from-green-50 to-teal-50">
      <div className="max-w-7xl mx-auto p-4">
        {/* Header */}
        <div className="text-center mb-8">
          <h1 className="text-4xl font-bold text-green-700 mb-4">Health Categories</h1>
          <p className="text-lg text-gray-600 max-w-3xl mx-auto">
            Explore our comprehensive collection of natural remedies organized by health categories. Find targeted
            solutions for your specific health needs.
          </p>
        </div>

{/* Search */}
        <div className="max-w-md mx-auto mb-8">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
            <Input
              type="text"
              placeholder="Search categories or conditions..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10"
            />
          </div>
        </div>

{/* Stats */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
          <Card className="text-center">
            <CardContent className="p-6">
              <div className="text-3xl font-bold text-green-600 mb-2">{categories.length}</div>
              <div className="text-gray-600">Health Categories</div>
            </CardContent>
          </Card>
          <Card className="text-center">
            <CardContent className="p-6">
              <div className="text-3xl font-bold text-blue-600 mb-2">{totalRemedies}</div>
              <div className="text-gray-600">Natural Remedies</div>
            </CardContent>
          </Card>
          <Card className="text-center">
            <CardContent className="p-6">
              <div className="text-3xl font-bold text-purple-600 mb-2">1000+</div>
              <div className="text-gray-600">Health Conditions</div>
            </CardContent>
          </Card>
        </div>

{/* Categories Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredCategories.map((category) => (
            <Card key={category.id} className="hover:shadow-lg transition-all duration-300 group cursor-pointer">
              <CardHeader>
                <div className="flex items-center space-x-3 mb-3">
                  <div className={`p-3 rounded-lg bg-gradient-to-r ${category.gradient} text-white`}>
                    {category.icon}
                  </div>
                  <div className="flex-1">
                    <CardTitle className={`text-xl ${category.color} group-hover:text-green-600 transition-colors`}>
                      {category.name}
                    </CardTitle>
                    <Badge variant="secondary" className="mt-1">
                      {category.remedyCount} remedies
                    </Badge>
                  </div>
                </div>
                <CardDescription className="text-gray-600">{category.description}</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="mb-4">
                  <h4 className="text-sm font-semibold text-gray-700 mb-2">Common Conditions:</h4>
                  <div className="flex flex-wrap gap-1">
                    {category.commonConditions.slice(0, 4).map((condition, index) => (
                      <Badge key={index} variant="outline" className="text-xs">
                        {condition}
                      </Badge>
                    ))}
                    {category.commonConditions.length > 4 && (
                      <Badge variant="outline" className="text-xs">
                        +{category.commonConditions.length - 4} more
                      </Badge>
                    )}
                  </div>
                </div>
                <Link href={`/remedies/category/${category.id}`}>
                  <Button
                    className={`w-full bg-gradient-to-r ${category.gradient} hover:opacity-90 transition-opacity`}
                  >
                    <BookOpen className="w-4 h-4 mr-2" />
                    Explore Remedies
                  </Button>
                </Link>
              </CardContent>
            </Card>
          ))}
        </div>

{/* No Results */}
        {filteredCategories.length === 0 && (
          <div className="text-center py-12">
            <Search className="w-16 h-16 text-gray-300 mx-auto mb-4" />
            <h3 className="text-xl font-medium text-gray-600 mb-2">No categories found</h3>
            <p className="text-gray-500 mb-4">Try adjusting your search terms</p>
            <Button onClick={() => setSearchTerm("")}>Clear Search</Button>
          </div>
        )}

{/* Quick Actions */}
        <div className="mt-12 text-center">
          <div className="flex flex-wrap justify-center gap-4">
            <Link href="/remedies">
              <Button variant="outline" size="lg">
                <BookOpen className="w-5 h-5 mr-2" />
                Browse All Remedies
              </Button>
            </Link>
            <Link href="/chat">
              <Button variant="outline" size="lg">
                <Brain className="w-5 h-5 mr-2" />
                Ask AI Doctor
              </Button>
            </Link>
            <Link href="/tools">
              <Button variant="outline" size="lg">
                <Stethoscope className="w-5 h-5 mr-2" />
                Health Tools
              </Button>
            </Link>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/remedies/page.tsx" isEdit="true" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Clock, Users, Star, Search, Filter, Heart, BookOpen } from "lucide-react"
import { useState, useEffect } from "react"
import Link from "next/link"

interface Remedy {
  id: string | number
  title: string
  description: string
  duration: string
  rating: number
  users: number
  category: string
  relatedDiseases: string[]
}

export default function RemediesPage() {
  const [remedies, setRemedies] = useState<Remedy[]>([])
  const [filteredRemedies, setFilteredRemedies] = useState<Remedy[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedCategory, setSelectedCategory] = useState("all")
  const [isLoading, setIsLoading] = useState(true)

// Sample remedies data that matches our API
  const sampleRemedies: Remedy[] = [
    {
      id: 1,
      title: "Honey and Ginger for Cough",
      description: "Natural remedy to soothe throat and reduce coughing",
      duration: "5 mins",
      rating: 4.8,
      users: 1200,
      category: "Respiratory",
      relatedDiseases: ["Cold", "Flu", "Bronchitis", "Sore Throat"],
    },
    {
      id: 2,
      title: "Turmeric Milk for Inflammation",
      description: "Anti-inflammatory drink to boost immunity",
      duration: "10 mins",
      rating: 4.9,
      users: 2100,
      category: "Immunity",
      relatedDiseases: ["Arthritis", "Joint Pain", "Inflammation", "Insomnia"],
    },
    {
      id: 3,
      title: "Aloe Vera for Skin Burns",
      description: "Natural cooling remedy for minor burns and skin irritation",
      duration: "3 mins",
      rating: 4.7,
      users: 890,
      category: "Skin & Hair",
      relatedDiseases: ["Burns", "Sunburn", "Skin Irritation", "Eczema"],
    },
    {
      id: 4,
      title: "Ginger Tea for Nausea",
      description: "Effective remedy for morning sickness and motion sickness",
      duration: "15 mins",
      rating: 4.6,
      users: 1500,
      category: "Digestive",
      relatedDiseases: ["Nausea", "Morning Sickness", "Motion Sickness", "Indigestion"],
    },
    {
      id: 5,
      title: "Chamomile Tea for Sleep",
      description: "Calming herbal tea to promote better sleep and relaxation",
      duration: "10 mins",
      rating: 4.5,
      users: 2300,
      category: "Mental Health",
      relatedDiseases: ["Insomnia", "Anxiety", "Stress", "Sleep Disorders"],
    },
    {
      id: "ginger-tea-cold",
      title: "Ginger Tea for Cold",
      description: "Natural remedy to boost immunity and fight cold symptoms",
      duration: "2-3 days",
      rating: 4.8,
      users: 2847,
      category: "Respiratory",
      relatedDiseases: ["Common Cold", "Flu", "Sore Throat", "Congestion"],
    },
    {
      id: "turmeric-milk-cough",
      title: "Turmeric Milk for Cough",
      description: "Anti-inflammatory remedy to soothe throat and reduce cough",
      duration: "3-5 days",
      rating: 4.7,
      users: 1923,
      category: "Respiratory",
      relatedDiseases: ["Cough", "Bronchitis", "Throat Infection", "Respiratory Issues"],
    },
    {
      id: "peppermint-tea-headache",
      title: "Peppermint Tea for Headache",
      description: "Natural pain relief for tension headaches and migraines",
      duration: "30 minutes",
      rating: 4.5,
      users: 1456,
      category: "Neurological",
      relatedDiseases: ["Headache", "Migraine", "Tension", "Stress"],
    },
  ]

useEffect(() => {
    // Simulate API call
    setTimeout(() => {
      setRemedies(sampleRemedies)
      setFilteredRemedies(sampleRemedies)
      setIsLoading(false)
    }, 1000)
  }, [])

useEffect(() => {
    let filtered = remedies

// Filter by search term
    if (searchTerm) {
      filtered = filtered.filter(
        (remedy) =>
          remedy.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
          remedy.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
          remedy.category.toLowerCase().includes(searchTerm.toLowerCase()) ||
          remedy.relatedDiseases.some((disease) => disease.toLowerCase().includes(searchTerm.toLowerCase())),
      )
    }

// Filter by category
    if (selectedCategory !== "all") {
      filtered = filtered.filter((remedy) => remedy.category === selectedCategory)
    }

setFilteredRemedies(filtered)
  }, [searchTerm, selectedCategory, remedies])

const categories = ["all", ...Array.from(new Set(remedies.map((remedy) => remedy.category)))]

const getCategoryColor = (category: string) => {
    const colors = {
      Respiratory: "bg-blue-100 text-blue-700",
      Immunity: "bg-green-100 text-green-700",
      "Skin & Hair": "bg-purple-100 text-purple-700",
      Digestive: "bg-orange-100 text-orange-700",
      "Mental Health": "bg-indigo-100 text-indigo-700",
      Neurological: "bg-pink-100 text-pink-700",
    }
    return colors[category as keyof typeof colors] || "bg-gray-100 text-gray-700"
  }

if (isLoading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-green-50 to-teal-50 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-green-500 mx-auto"></div>
          <p className="mt-4 text-gray-600">Loading remedies...</p>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-green-50 to-teal-50">
      <div className="max-w-7xl mx-auto p-4">
        {/* Header */}
        <div className="text-center mb-8">
          <h1 className="text-4xl font-bold text-green-700 mb-4">Natural Remedies Database</h1>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            Discover time-tested natural remedies for common health conditions. All remedies are based on traditional
            knowledge and natural ingredients.
          </p>
        </div>

{/* Search and Filter */}
        <div className="flex flex-col md:flex-row gap-4 mb-8">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
            <Input
              placeholder="Search remedies, conditions, or ingredients..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10"
            />
          </div>
          <div className="flex items-center space-x-2">
            <Filter className="w-4 h-4 text-gray-500" />
            <select
              value={selectedCategory}
              onChange={(e) => setSelectedCategory(e.target.value)}
              className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
            >
              {categories.map((category) => (
                <option key={category} value={category}>
                  {category === "all" ? "All Categories" : category}
                </option>
              ))}
            </select>
          </div>
        </div>

{/* Quick Actions */}
        <div className="flex flex-wrap gap-4 mb-8">
          <Link href="/remedies/categories">
            <Button variant="outline" className="flex items-center space-x-2 bg-transparent">
              <BookOpen className="w-4 h-4" />
              <span>Browse Categories</span>
            </Button>
          </Link>
          <Link href="/remedies/favorites">
            <Button variant="outline" className="flex items-center space-x-2 bg-transparent">
              <Heart className="w-4 h-4" />
              <span>My Favorites</span>
            </Button>
          </Link>
        </div>

{/* Results Count */}
        <div className="mb-6">
          <p className="text-gray-600">
            Showing {filteredRemedies.length} of {remedies.length} remedies
          </p>
        </div>

{/* Remedies Grid */}
        {filteredRemedies.length > 0 ? (
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredRemedies.map((remedy) => (
              <Card key={remedy.id} className="hover:shadow-lg transition-shadow cursor-pointer">
                <CardHeader>
                  <div className="flex items-start justify-between">
                    <div className="flex-1">
                      <CardTitle className="text-lg text-green-700 mb-2">{remedy.title}</CardTitle>
                      <CardDescription className="text-sm">{remedy.description}</CardDescription>
                    </div>
                    <Badge className={getCategoryColor(remedy.category)}>{remedy.category}</Badge>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center justify-between text-sm text-gray-600 mb-4">
                    <div className="flex items-center space-x-1">
                      <Clock className="w-4 h-4" />
                      <span>{remedy.duration}</span>
                    </div>
                    <div className="flex items-center space-x-1">
                      <Star className="w-4 h-4 text-yellow-500" />
                      <span>{remedy.rating}</span>
                    </div>
                    <div className="flex items-center space-x-1">
                      <Users className="w-4 h-4" />
                      <span>{remedy.users}</span>
                    </div>
                  </div>

<div className="mb-4">
                    <p className="text-xs text-gray-500 mb-2">Helps with:</p>
                    <div className="flex flex-wrap gap-1">
                      {remedy.relatedDiseases.slice(0, 3).map((disease, index) => (
                        <Badge key={index} variant="outline" className="text-xs">
                          {disease}
                        </Badge>
                      ))}
                      {remedy.relatedDiseases.length > 3 && (
                        <Badge variant="outline" className="text-xs">
                          +{remedy.relatedDiseases.length - 3} more
                        </Badge>
                      )}
                    </div>
                  </div>

<Link href={`/remedies/${remedy.id}`}>
                    <Button className="w-full bg-gradient-to-r from-green-500 to-teal-500">View Details</Button>
                  </Link>
                </CardContent>
              </Card>
            ))}
          </div>
        ) : (
          <div className="text-center py-12">
            <div className="text-gray-400 mb-4">
              <Search className="w-16 h-16 mx-auto" />
            </div>
            <h3 className="text-xl font-semibold text-gray-600 mb-2">No remedies found</h3>
            <p className="text-gray-500 mb-4">Try adjusting your search terms or browse all categories</p>
            <Button
              onClick={() => {
                setSearchTerm("")
                setSelectedCategory("all")
              }}
            >
              Clear Filters
            </Button>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]png:file="public/category-screenshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-08-13%20171854-NW4IA8iaVKINISqRLEr0GnZpdKVOh1.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/remedies/category/[id]/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { useParams } from "next/navigation"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useLanguage } from "@/lib/language-context"
import {
  Search,
  Heart,
  Clock,
  Users,
  Star,
  ArrowLeft,
  Filter,
  ChefHat,
  Leaf,
  Activity,
  Brain,
  Eye,
  Shield,
  Stethoscope,
} from "lucide-react"

interface Remedy {
  id: string
  name: string
  description: string
  ingredients: string[]
  difficulty: "Easy" | "Medium" | "Advanced"
  prepTime: string
  rating: number
  usedBy: number
  conditions: string[]
  category: string
}

const categoryData = {
  respiratory: {
    name: { en: "Respiratory", hi: "श्वसन", gu: "શ્વસન" },
    icon: Activity,
    color: "bg-blue-100 text-blue-700",
    description: {
      en: "Natural solutions for breathing issues",
      hi: "सांस की समस्याओं के लिए प्राकृतिक समाधान",
      gu: "શ્વાસની સમસ્યાઓ માટે કુદરતી ઉકેલ",
    },
    remedies: [
      {
        id: "honey-ginger-cough",
        name: "Honey Ginger Tea",
        description: "Soothing remedy for cough and cold symptoms",
        ingredients: ["Fresh ginger", "Honey", "Lemon", "Hot water"],
        difficulty: "Easy" as const,
        prepTime: "10 mins",
        rating: 4.8,
        usedBy: 2847,
        conditions: ["Cough", "Cold", "Sore throat"],
        category: "respiratory",
      },
      {
        id: "steam-inhalation",
        name: "Steam Inhalation",
        description: "Clear nasal congestion naturally",
        ingredients: ["Hot water", "Eucalyptus oil", "Towel"],
        difficulty: "Easy" as const,
        prepTime: "15 mins",
        rating: 4.6,
        usedBy: 1923,
        conditions: ["Congestion", "Sinusitis", "Cold"],
        category: "respiratory",
      },
      {
        id: "turmeric-milk-respiratory",
        name: "Turmeric Milk",
        description: "Anti-inflammatory drink for respiratory health",
        ingredients: ["Milk", "Turmeric powder", "Black pepper", "Honey"],
        difficulty: "Easy" as const,
        prepTime: "8 mins",
        rating: 4.7,
        usedBy: 3156,
        conditions: ["Cough", "Inflammation", "Immunity"],
        category: "respiratory",
      },
      {
        id: "garlic-honey-syrup",
        name: "Garlic Honey Syrup",
        description: "Natural antibiotic for respiratory infections",
        ingredients: ["Fresh garlic", "Raw honey", "Lemon juice"],
        difficulty: "Medium" as const,
        prepTime: "20 mins",
        rating: 4.5,
        usedBy: 1456,
        conditions: ["Bronchitis", "Cough", "Infection"],
        category: "respiratory",
      },
      {
        id: "thyme-tea",
        name: "Thyme Tea",
        description: "Herbal remedy for respiratory relief",
        ingredients: ["Dried thyme", "Hot water", "Honey"],
        difficulty: "Easy" as const,
        prepTime: "12 mins",
        rating: 4.4,
        usedBy: 987,
        conditions: ["Cough", "Bronchitis", "Asthma"],
        category: "respiratory",
      },
    ],
  },
  digestive: {
    name: { en: "Digestive", hi: "पाचन", gu: "પાચન" },
    icon: Heart,
    color: "bg-green-100 text-green-700",
    description: {
      en: "Home remedies for digestive health",
      hi: "पाचन स्वास्थ्य के लिए घरेलू उपचार",
      gu: "પાચન આરોગ્ય માટે ઘરેલું ઉપચાર",
    },
    remedies: [
      {
        id: "ginger-tea-nausea",
        name: "Ginger Tea for Nausea",
        description: "Natural remedy for nausea and digestive issues",
        ingredients: ["Fresh ginger", "Hot water", "Honey", "Lemon"],
        difficulty: "Easy" as const,
        prepTime: "10 mins",
        rating: 4.7,
        usedBy: 2134,
        conditions: ["Nausea", "Indigestion", "Motion sickness"],
        category: "digestive",
      },
      {
        id: "fennel-tea",
        name: "Fennel Tea",
        description: "Soothing tea for bloating and gas",
        ingredients: ["Fennel seeds", "Hot water", "Honey"],
        difficulty: "Easy" as const,
        prepTime: "8 mins",
        rating: 4.5,
        usedBy: 1678,
        conditions: ["Bloating", "Gas", "Indigestion"],
        category: "digestive",
      },
      {
        id: "mint-lemon-water",
        name: "Mint Lemon Water",
        description: "Refreshing drink for digestive health",
        ingredients: ["Fresh mint", "Lemon", "Water", "Salt"],
        difficulty: "Easy" as const,
        prepTime: "5 mins",
        rating: 4.6,
        usedBy: 2456,
        conditions: ["Acidity", "Indigestion", "Dehydration"],
        category: "digestive",
      },
      {
        id: "cumin-water",
        name: "Cumin Water",
        description: "Traditional remedy for digestive problems",
        ingredients: ["Cumin seeds", "Water", "Salt"],
        difficulty: "Easy" as const,
        prepTime: "15 mins",
        rating: 4.3,
        usedBy: 1234,
        conditions: ["Indigestion", "Bloating", "Gas"],
        category: "digestive",
      },
    ],
  },
  "skin-hair": {
    name: { en: "Skin & Hair", hi: "त्वचा और बाल", gu: "ત્વચા અને વાળ" },
    icon: Leaf,
    color: "bg-purple-100 text-purple-700",
    description: {
      en: "Skin and hair care solutions",
      hi: "त्वचा और बालों की देखभाल के समाधान",
      gu: "ત્વચા અને વાળની સંભાળના ઉકેલો",
    },
    remedies: [
      {
        id: "aloe-vera-gel",
        name: "Aloe Vera Gel",
        description: "Natural healing for skin irritation and burns",
        ingredients: ["Fresh aloe vera leaf", "Vitamin E oil"],
        difficulty: "Easy" as const,
        prepTime: "5 mins",
        rating: 4.8,
        usedBy: 3456,
        conditions: ["Burns", "Acne", "Dry skin"],
        category: "skin-hair",
      },
      {
        id: "coconut-oil-hair-mask",
        name: "Coconut Oil Hair Mask",
        description: "Deep conditioning treatment for hair",
        ingredients: ["Coconut oil", "Honey", "Egg yolk"],
        difficulty: "Medium" as const,
        prepTime: "45 mins",
        rating: 4.6,
        usedBy: 2789,
        conditions: ["Dry hair", "Hair fall", "Dandruff"],
        category: "skin-hair",
      },
      {
        id: "turmeric-face-mask",
        name: "Turmeric Face Mask",
        description: "Anti-inflammatory mask for glowing skin",
        ingredients: ["Turmeric powder", "Yogurt", "Honey"],
        difficulty: "Easy" as const,
        prepTime: "20 mins",
        rating: 4.7,
        usedBy: 1987,
        conditions: ["Acne", "Dark spots", "Dull skin"],
        category: "skin-hair",
      },
      {
        id: "oatmeal-scrub",
        name: "Oatmeal Scrub",
        description: "Gentle exfoliation for smooth skin",
        ingredients: ["Oats", "Honey", "Milk"],
        difficulty: "Easy" as const,
        prepTime: "15 mins",
        rating: 4.5,
        usedBy: 1456,
        conditions: ["Dead skin", "Blackheads", "Rough skin"],
        category: "skin-hair",
      },
    ],
  },
  "mental-health": {
    name: { en: "Mental Health", hi: "मानसिक स्वास्थ्य", gu: "માનસિક આરોગ્ય" },
    icon: Brain,
    color: "bg-orange-100 text-orange-700",
    description: {
      en: "Natural remedies for stress and anxiety",
      hi: "तनाव और चिंता के लिए प्राकृतिक उपचार",
      gu: "તણાવ અને ચિંતા માટે કુદરતી ઉપચાર",
    },
    remedies: [
      {
        id: "chamomile-tea-sleep",
        name: "Chamomile Tea",
        description: "Calming tea for better sleep and relaxation",
        ingredients: ["Dried chamomile flowers", "Hot water", "Honey"],
        difficulty: "Easy" as const,
        prepTime: "10 mins",
        rating: 4.8,
        usedBy: 2345,
        conditions: ["Insomnia", "Anxiety", "Stress"],
        category: "mental-health",
      },
      {
        id: "lavender-oil-aromatherapy",
        name: "Lavender Oil Aromatherapy",
        description: "Essential oil therapy for stress relief",
        ingredients: ["Lavender essential oil", "Carrier oil", "Diffuser"],
        difficulty: "Easy" as const,
        prepTime: "5 mins",
        rating: 4.7,
        usedBy: 1876,
        conditions: ["Stress", "Anxiety", "Sleep issues"],
        category: "mental-health",
      },
      {
        id: "ashwagandha-milk",
        name: "Ashwagandha Milk",
        description: "Adaptogenic drink for stress management",
        ingredients: ["Ashwagandha powder", "Warm milk", "Honey", "Cardamom"],
        difficulty: "Medium" as const,
        prepTime: "12 mins",
        rating: 4.6,
        usedBy: 1234,
        conditions: ["Stress", "Fatigue", "Sleep"],
        category: "mental-health",
      },
    ],
  },
  "immune-system": {
    name: { en: "Immune System", hi: "प्रतिरक्षा प्रणाली", gu: "રોગપ્રતિકારક શક્તિ" },
    icon: Shield,
    color: "bg-red-100 text-red-700",
    description: {
      en: "Strengthen your immune system naturally",
      hi: "अपनी प्रतिरक्षा प्रणाली को प्राकृतिक रूप से मजबूत बनाएं",
      gu: "તમારી રોગપ્રતિકારક શક્તિને કુદરતી રીતે મજબૂત બનાવો",
    },
    remedies: [
      {
        id: "turmeric-milk-immunity",
        name: "Golden Milk (Turmeric Milk)",
        description: "Powerful immunity booster with anti-inflammatory properties",
        ingredients: ["Turmeric powder", "Milk", "Ginger", "Black pepper", "Honey"],
        difficulty: "Easy" as const,
        prepTime: "10 mins",
        rating: 4.9,
        usedBy: 4567,
        conditions: ["Low immunity", "Inflammation", "Cold prevention"],
        category: "immune-system",
      },
      {
        id: "elderberry-syrup",
        name: "Elderberry Syrup",
        description: "Natural antiviral syrup for immune support",
        ingredients: ["Elderberries", "Water", "Honey", "Ginger", "Cinnamon"],
        difficulty: "Advanced" as const,
        prepTime: "60 mins",
        rating: 4.7,
        usedBy: 2134,
        conditions: ["Flu prevention", "Cold", "Viral infections"],
        category: "immune-system",
      },
      {
        id: "vitamin-c-drink",
        name: "Vitamin C Immunity Drink",
        description: "Citrus-rich drink for daily immune support",
        ingredients: ["Orange juice", "Lemon", "Ginger", "Honey", "Cayenne pepper"],
        difficulty: "Easy" as const,
        prepTime: "8 mins",
        rating: 4.5,
        usedBy: 1789,
        conditions: ["Low immunity", "Cold prevention", "Energy boost"],
        category: "immune-system",
      },
    ],
  },
  "eye-care": {
    name: { en: "Eye Care", hi: "आंखों की देखभाल", gu: "આંખની સંભાળ" },
    icon: Eye,
    color: "bg-teal-100 text-teal-700",
    description: {
      en: "Natural remedies for eye health and care",
      hi: "आंखों के स्वास्थ्य और देखभाल के लिए प्राकृतिक उपचार",
      gu: "આંખના આરોગ્ય અને સંભાળ માટે કુદરતી ઉપચાર",
    },
    remedies: [
      {
        id: "cucumber-eye-mask",
        name: "Cucumber Eye Mask",
        description: "Cooling treatment for tired and puffy eyes",
        ingredients: ["Fresh cucumber", "Cotton pads"],
        difficulty: "Easy" as const,
        prepTime: "15 mins",
        rating: 4.6,
        usedBy: 1567,
        conditions: ["Puffy eyes", "Dark circles", "Eye strain"],
        category: "eye-care",
      },
      {
        id: "rose-water-eye-wash",
        name: "Rose Water Eye Wash",
        description: "Gentle cleansing and soothing for irritated eyes",
        ingredients: ["Pure rose water", "Cotton balls"],
        difficulty: "Easy" as const,
        prepTime: "5 mins",
        rating: 4.4,
        usedBy: 987,
        conditions: ["Eye irritation", "Redness", "Dryness"],
        category: "eye-care",
      },
      {
        id: "tea-bags-eye-compress",
        name: "Tea Bags Eye Compress",
        description: "Anti-inflammatory treatment using tea bags",
        ingredients: ["Green tea bags", "Chamomile tea bags", "Warm water"],
        difficulty: "Easy" as const,
        prepTime: "20 mins",
        rating: 4.5,
        usedBy: 1234,
        conditions: ["Puffy eyes", "Inflammation", "Tired eyes"],
        category: "eye-care",
      },
    ],
  },
}

export default function CategoryPage() {
  const params = useParams()
  const { language, t } = useLanguage()
  const [searchQuery, setSearchQuery] = useState("")
  const [difficultyFilter, setDifficultyFilter] = useState<string>("all")
  const [favorites, setFavorites] = useState<string[]>([])

const categoryId = params.id as string
  const category = categoryData[categoryId as keyof typeof categoryData]

if (!category) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-2xl font-bold text-gray-900 mb-4">Category Not Found</h1>
          <p className="text-gray-600 mb-6">The requested health category could not be found.</p>
          <Link href="/remedies/categories">
            <Button>Back to Categories</Button>
          </Link>
        </div>
      </div>
    )
  }

const IconComponent = category.icon
  const filteredRemedies = category.remedies.filter((remedy) => {
    const matchesSearch =
      remedy.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      remedy.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
      remedy.ingredients.some((ingredient) => ingredient.toLowerCase().includes(searchQuery.toLowerCase())) ||
      remedy.conditions.some((condition) => condition.toLowerCase().includes(searchQuery.toLowerCase()))

const matchesDifficulty = difficultyFilter === "all" || remedy.difficulty === difficultyFilter

return matchesSearch && matchesDifficulty
  })

const toggleFavorite = (remedyId: string) => {
    setFavorites((prev) => (prev.includes(remedyId) ? prev.filter((id) => id !== remedyId) : [...prev, remedyId]))
  }

const totalUsers = category.remedies.reduce((sum, remedy) => sum + remedy.usedBy, 0)
  const averageRating = category.remedies.reduce((sum, remedy) => sum + remedy.rating, 0) / category.remedies.length

return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-white shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <div className="flex items-center space-x-4 mb-6">
            <Link href="/remedies/categories">
              <Button variant="ghost" size="sm">
                <ArrowLeft className="w-4 h-4 mr-2" />
                Back to Categories
              </Button>
            </Link>
          </div>

<div className="flex items-center space-x-6 mb-6">
            <div className={`p-4 rounded-full ${category.color}`}>
              <IconComponent className="w-8 h-8" />
            </div>
            <div>
              <h1 className="text-3xl font-bold text-gray-900">{category.name[language]}</h1>
              <p className="text-lg text-gray-600 mt-1">{category.description[language]}</p>
            </div>
          </div>

{/* Stats */}
          <div className="grid grid-cols-3 gap-6 mb-8">
            <div className="text-center">
              <div className="text-2xl font-bold text-gray-900">{category.remedies.length}</div>
              <div className="text-sm text-gray-600">
                {language === "hi" ? "उपचार" : language === "gu" ? "ઉપચાર" : "Remedies"}
              </div>
            </div>
            <div className="text-center">
              <div className="text-2xl font-bold text-gray-900">{totalUsers.toLocaleString()}</div>
              <div className="text-sm text-gray-600">
                {language === "hi" ? "उपयोगकर्ता" : language === "gu" ? "વપરાશકર્તાઓ" : "Users Helped"}
              </div>
            </div>
            <div className="text-center">
              <div className="text-2xl font-bold text-gray-900">{averageRating.toFixed(1)}</div>
              <div className="text-sm text-gray-600">
                {language === "hi" ? "औसत रेटिंग" : language === "gu" ? "સરેરાશ રેટિંગ" : "Avg Rating"}
              </div>
            </div>
          </div>

{/* Search and Filters */}
          <div className="flex flex-col sm:flex-row gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
              <Input
                type="text"
                placeholder={
                  language === "hi"
                    ? "उपचार, सामग्री या स्थिति खोजें..."
                    : language === "gu"
                      ? "ઉપચાર, સામગ્રી અથવા સ્થિતિ શોધો..."
                      : "Search remedies, ingredients, or conditions..."
                }
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10"
              />
            </div>
            <Select value={difficultyFilter} onValueChange={setDifficultyFilter}>
              <SelectTrigger className="w-full sm:w-48">
                <Filter className="w-4 h-4 mr-2" />
                <SelectValue placeholder="Difficulty" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">
                  {language === "hi" ? "सभी कठिनाई" : language === "gu" ? "બધી મુશ્કેલી" : "All Difficulty"}
                </SelectItem>
                <SelectItem value="Easy">{language === "hi" ? "आसान" : language === "gu" ? "સરળ" : "Easy"}</SelectItem>
                <SelectItem value="Medium">
                  {language === "hi" ? "मध्यम" : language === "gu" ? "મધ્યમ" : "Medium"}
                </SelectItem>
                <SelectItem value="Advanced">
                  {language === "hi" ? "उन्नत" : language === "gu" ? "અદ્યતન" : "Advanced"}
                </SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>
      </div>

{/* Remedies Grid */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {filteredRemedies.length === 0 ? (
          <div className="text-center py-12">
            <Stethoscope className="w-16 h-16 text-gray-400 mx-auto mb-4" />
            <h3 className="text-lg font-medium text-gray-900 mb-2">
              {language === "hi"
                ? "कोई उपचार नहीं मिला"
                : language === "gu"
                  ? "કોઈ ઉપચાર મળ્યો નથી"
                  : "No remedies found"}
            </h3>
            <p className="text-gray-600">
              {language === "hi"
                ? "अपनी खोज या फ़िल्टर बदलने का प्रयास करें"
                : language === "gu"
                  ? "તમારી શોધ અથવા ફિલ્ટર બદલવાનો પ્રયાસ કરો"
                  : "Try changing your search or filters"}
            </p>
          </div>
        ) : (
          <>
            <div className="flex items-center justify-between mb-6">
              <p className="text-gray-600">
                {language === "hi"
                  ? `${filteredRemedies.length} में से ${category.remedies.length} उपचार दिखा रहे हैं`
                  : language === "gu"
                    ? `${category.remedies.length} માંથી ${filteredRemedies.length} ઉપચાર બતાવી રહ્યા છીએ`
                    : `Showing ${filteredRemedies.length} of ${category.remedies.length} remedies`}
              </p>
            </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
              {filteredRemedies.map((remedy) => (
                <Card key={remedy.id} className="hover:shadow-lg transition-shadow duration-300">
                  <CardHeader>
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <div className="flex items-center space-x-2 mb-2">
                          <Badge
                            variant="secondary"
                            className={
                              remedy.difficulty === "Easy"
                                ? "bg-green-100 text-green-700"
                                : remedy.difficulty === "Medium"
                                  ? "bg-yellow-100 text-yellow-700"
                                  : "bg-red-100 text-red-700"
                            }
                          >
                            <ChefHat className="w-3 h-3 mr-1" />
                            {remedy.difficulty}
                          </Badge>
                          <div className="flex items-center space-x-1">
                            <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                            <span className="text-sm font-medium">{remedy.rating}</span>
                          </div>
                        </div>
                        <CardTitle className="text-lg">{remedy.name}</CardTitle>
                        <CardDescription className="text-sm">{remedy.description}</CardDescription>
                      </div>
                      <Button variant="ghost" size="sm" onClick={() => toggleFavorite(remedy.id)} className="ml-2 p-1">
                        <Heart
                          className={`w-5 h-5 ${
                            favorites.includes(remedy.id)
                              ? "fill-red-500 text-red-500"
                              : "text-gray-400 hover:text-red-500"
                          }`}
                        />
                      </Button>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3">
                      <div className="flex items-center space-x-4 text-sm text-gray-600">
                        <div className="flex items-center space-x-1">
                          <Clock className="w-4 h-4" />
                          <span>{remedy.prepTime}</span>
                        </div>
                        <div className="flex items-center space-x-1">
                          <Users className="w-4 h-4" />
                          <span>{remedy.usedBy.toLocaleString()}</span>
                        </div>
                      </div>

<div className="flex flex-wrap gap-1">
                        {remedy.conditions.slice(0, 3).map((condition) => (
                          <Badge key={condition} variant="outline" className="text-xs">
                            {condition}
                          </Badge>
                        ))}
                        {remedy.conditions.length > 3 && (
                          <Badge variant="outline" className="text-xs">
                            +{remedy.conditions.length - 3} more
                          </Badge>
                        )}
                      </div>

<div className="pt-2">
                        <Link href={`/remedies/${remedy.id}`}>
                          <Button className="w-full bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600">
                            {language === "hi"
                              ? "पूरा गाइड देखें"
                              : language === "gu"
                                ? "સંપૂર્ણ માર્ગદર્શિકા જુઓ"
                                : "View Complete Guide"}
                          </Button>
                        </Link>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/remedies/[id]/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useParams } from "next/navigation"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { useLanguage } from "@/lib/language-context"
import {
  ArrowLeft,
  Clock,
  Users,
  Star,
  Heart,
  Share2,
  ChefHat,
  AlertTriangle,
  CheckCircle,
  Leaf,
  Timer,
  BookOpen,
} from "lucide-react"

interface Remedy {
  id: string
  name: string
  description: string
  ingredients: string[]
  instructions: string[]
  benefits: string[]
  precautions: string[]
  difficulty: "Easy" | "Medium" | "Advanced"
  prepTime: string
  rating: number
  usedBy: number
  conditions: string[]
  category: string
  tips?: string[]
}

export default function RemedyDetailPage() {
  const params = useParams()
  const { language, t } = useLanguage()
  const [remedy, setRemedy] = useState<Remedy | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [isFavorite, setIsFavorite] = useState(false)

useEffect(() => {
    const fetchRemedy = async () => {
      try {
        setLoading(true)
        const response = await fetch(`/api/remedies/${params.id}`)

if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`)
        }

const data = await response.json()
        setRemedy(data)
      } catch (err) {
        console.error("Error fetching remedy:", err)
        setError(err instanceof Error ? err.message : "Failed to fetch remedy")
      } finally {
        setLoading(false)
      }
    }

if (params.id) {
      fetchRemedy()
    }
  }, [params.id])

const toggleFavorite = () => {
    setIsFavorite(!isFavorite)
    // Here you would typically save to localStorage or send to API
  }

const shareRemedy = async () => {
    if (navigator.share && remedy) {
      try {
        await navigator.share({
          title: remedy.name,
          text: remedy.description,
          url: window.location.href,
        })
      } catch (err) {
        console.log("Error sharing:", err)
      }
    } else {
      // Fallback: copy to clipboard
      navigator.clipboard.writeText(window.location.href)
    }
  }

if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-green-500 mx-auto mb-4"></div>
          <p className="text-gray-600">
            {language === "hi"
              ? "उपचार लोड हो रहा है..."
              : language === "gu"
                ? "ઉપચાર લોડ થઈ રહ્યો છે..."
                : "Loading remedy..."}
          </p>
        </div>
      </div>
    )
  }

if (error || !remedy) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <AlertTriangle className="w-16 h-16 text-red-500 mx-auto mb-4" />
          <h1 className="text-2xl font-bold text-gray-900 mb-4">
            {language === "hi" ? "उपचार नहीं मिला" : language === "gu" ? "ઉપચાર મળ્યો નથી" : "Remedy Not Found"}
          </h1>
          <p className="text-gray-600 mb-6">
            {error ||
              (language === "hi"
                ? "अनुरोधित उपचार नहीं मिल सका।"
                : language === "gu"
                  ? "વિનંતી કરેલ ઉપચાર મળી શક્યો નથી."
                  : "The requested remedy could not be found.")}
          </p>
          <Link href="/remedies">
            <Button>
              {language === "hi" ? "उपचारों पर वापस जाएं" : language === "gu" ? "ઉપચારો પર પાછા જાઓ" : "Back to Remedies"}
            </Button>
          </Link>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-white shadow-sm">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <div className="flex items-center space-x-4 mb-6">
            <Link href="/remedies">
              <Button variant="ghost" size="sm">
                <ArrowLeft className="w-4 h-4 mr-2" />
                {language === "hi" ? "वापस" : language === "gu" ? "પાછા" : "Back"}
              </Button>
            </Link>
          </div>

<div className="flex flex-col lg:flex-row lg:items-start lg:space-x-8">
            <div className="flex-1">
              <div className="flex items-center space-x-2 mb-4">
                <Badge
                  variant="secondary"
                  className={
                    remedy.difficulty === "Easy"
                      ? "bg-green-100 text-green-700"
                      : remedy.difficulty === "Medium"
                        ? "bg-yellow-100 text-yellow-700"
                        : "bg-red-100 text-red-700"
                  }
                >
                  <ChefHat className="w-3 h-3 mr-1" />
                  {remedy.difficulty}
                </Badge>
                <Badge variant="outline" className="capitalize">
                  {remedy.category.replace("-", " ")}
                </Badge>
              </div>

<h1 className="text-3xl font-bold text-gray-900 mb-4">{remedy.name}</h1>
              <p className="text-lg text-gray-600 mb-6">{remedy.description}</p>

<div className="flex items-center space-x-6 mb-6">
                <div className="flex items-center space-x-1">
                  <Star className="w-5 h-5 fill-yellow-400 text-yellow-400" />
                  <span className="font-medium">{remedy.rating}</span>
                  <span className="text-gray-500">rating</span>
                </div>
                <div className="flex items-center space-x-1">
                  <Users className="w-5 h-5 text-gray-400" />
                  <span className="font-medium">{remedy.usedBy.toLocaleString()}</span>
                  <span className="text-gray-500">
                    {language === "hi" ? "उपयोगकर्ता" : language === "gu" ? "વપરાશકર્તાઓ" : "users"}
                  </span>
                </div>
                <div className="flex items-center space-x-1">
                  <Clock className="w-5 h-5 text-gray-400" />
                  <span className="font-medium">{remedy.prepTime}</span>
                </div>
              </div>

<div className="flex space-x-3">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={toggleFavorite}
                  className={isFavorite ? "text-red-600 border-red-200" : ""}
                >
                  <Heart className={`w-4 h-4 mr-2 ${isFavorite ? "fill-red-500 text-red-500" : ""}`} />
                  {language === "hi" ? "पसंदीदा" : language === "gu" ? "મનપસંદ" : "Favorite"}
                </Button>
                <Button variant="outline" size="sm" onClick={shareRemedy}>
                  <Share2 className="w-4 h-4 mr-2" />
                  {language === "hi" ? "साझा करें" : language === "gu" ? "શેર કરો" : "Share"}
                </Button>
              </div>
            </div>

{/* Quick Info Sidebar */}
            <div className="lg:w-80 mt-8 lg:mt-0">
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">
                    {language === "hi" ? "त्वरित जानकारी" : language === "gu" ? "ઝડપી માહિતી" : "Quick Info"}
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-center justify-between">
                    <span className="text-gray-600">
                      {language === "hi" ? "तैयारी का समय" : language === "gu" ? "તૈયારીનો સમય" : "Prep Time"}
                    </span>
                    <span className="font-medium">{remedy.prepTime}</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-gray-600">
                      {language === "hi" ? "कठिनाई" : language === "gu" ? "મુશ્કેલી" : "Difficulty"}
                    </span>
                    <span className="font-medium">{remedy.difficulty}</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-gray-600">
                      {language === "hi" ? "श्रेणी" : language === "gu" ? "શ્રેણી" : "Category"}
                    </span>
                    <span className="font-medium capitalize">{remedy.category.replace("-", " ")}</span>
                  </div>
                  <Separator />
                  <div>
                    <h4 className="font-medium mb-2">
                      {language === "hi" ? "इसके लिए प्रभावी" : language === "gu" ? "આના માટે અસરકારક" : "Effective for"}
                    </h4>
                    <div className="flex flex-wrap gap-1">
                      {remedy.conditions?.map((condition) => (
                        <Badge key={condition} variant="outline" className="text-xs">
                          {condition}
                        </Badge>
                      )) || <span className="text-gray-500">No conditions listed</span>}
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </div>

{/* Main Content */}
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="grid lg:grid-cols-3 gap-8">
          <div className="lg:col-span-2 space-y-8">
            {/* Ingredients */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Leaf className="w-5 h-5 mr-2 text-green-600" />
                  {language === "hi" ? "सामग्री" : language === "gu" ? "સામગ્રી" : "Ingredients"}
                </CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2">
                  {remedy.ingredients?.map((ingredient, index) => (
                    <li key={index} className="flex items-center">
                      <CheckCircle className="w-4 h-4 text-green-500 mr-3 flex-shrink-0" />
                      <span>{ingredient}</span>
                    </li>
                  )) || <p className="text-gray-500">No ingredients listed</p>}
                </ul>
              </CardContent>
            </Card>

{/* Instructions */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <BookOpen className="w-5 h-5 mr-2 text-blue-600" />
                  {language === "hi" ? "निर्देश" : language === "gu" ? "સૂચનાઓ" : "Instructions"}
                </CardTitle>
              </CardHeader>
              <CardContent>
                <ol className="space-y-4">
                  {remedy.instructions?.map((instruction, index) => (
                    <li key={index} className="flex">
                      <span className="flex-shrink-0 w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-sm font-medium mr-4">
                        {index + 1}
                      </span>
                      <span className="pt-0.5">{instruction}</span>
                    </li>
                  )) || <p className="text-gray-500">No instructions available</p>}
                </ol>
              </CardContent>
            </Card>

{/* Benefits */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Star className="w-5 h-5 mr-2 text-yellow-600" />
                  {language === "hi" ? "लाभ" : language === "gu" ? "ફાયદા" : "Benefits"}
                </CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2">
                  {remedy.benefits?.map((benefit, index) => (
                    <li key={index} className="flex items-start">
                      <CheckCircle className="w-4 h-4 text-green-500 mr-3 flex-shrink-0 mt-0.5" />
                      <span>{benefit}</span>
                    </li>
                  )) || <p className="text-gray-500">No benefits listed</p>}
                </ul>
              </CardContent>
            </Card>

{/* Precautions */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <AlertTriangle className="w-5 h-5 mr-2 text-red-600" />
                  {language === "hi" ? "सावधानियां" : language === "gu" ? "સાવધાનીઓ" : "Precautions"}
                </CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2">
                  {remedy.precautions?.map((precaution, index) => (
                    <li key={index} className="flex items-start">
                      <AlertTriangle className="w-4 h-4 text-red-500 mr-3 flex-shrink-0 mt-0.5" />
                      <span>{precaution}</span>
                    </li>
                  )) || <p className="text-gray-500">No precautions listed</p>}
                </ul>
              </CardContent>
            </Card>
          </div>

{/* Sidebar */}
          <div className="space-y-6">
            {/* Tips */}
            {remedy.tips && remedy.tips.length > 0 && (
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">
                    {language === "hi" ? "उपयोगी सुझाव" : language === "gu" ? "ઉપયોગી સૂચનો" : "Helpful Tips"}
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2 text-sm">
                    {remedy.tips.map((tip, index) => (
                      <li key={index} className="flex items-start">
                        <Timer className="w-4 h-4 text-blue-500 mr-2 flex-shrink-0 mt-0.5" />
                        <span>{tip}</span>
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            )}

{/* Related Actions */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">
                  {language === "hi" ? "संबंधित क्रियाएं" : language === "gu" ? "સંબંધિત ક્રિયાઓ" : "Related Actions"}
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <Link href={`/remedies/category/${remedy.category}`}>
                  <Button variant="outline" className="w-full justify-start bg-transparent">
                    <Leaf className="w-4 h-4 mr-2" />
                    {language === "hi"
                      ? "समान उपचार देखें"
                      : language === "gu"
                        ? "સમાન ઉપચાર જુઓ"
                        : "View Similar Remedies"}
                  </Button>
                </Link>
                <Link href="/chat">
                  <Button variant="outline" className="w-full justify-start bg-transparent">
                    <BookOpen className="w-4 h-4 mr-2" />
                    {language === "hi" ? "AI डॉक्टर से पूछें" : language === "gu" ? "AI ડૉક્ટરને પૂછો" : "Ask AI Doctor"}
                  </Button>
                </Link>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ."
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "15.5.9",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^1.1.2",
    "zod": "3.25.76",
    "@react-three/fiber": "9.4.2",
    "@react-three/drei": "10.7.7",
    "next-themes": "0.4.6"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]css:file="app/globals.css" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --font-sans: "Geist", "Geist Fallback";
  --font-mono: "Geist Mono", "Geist Mono Fallback";
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
  html {
    scroll-behavior: smooth;
  }
}
[V0_FILE]typescriptreact:file="components/ui/chart.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as RechartsPrimitive from 'recharts'

import { cn } from '@/lib/utils'

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: '', dark: '.dark' } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

if (!context) {
    throw new Error('useChart must be used within a <ChartContainer />')
  }

return context
}

function ChartContainer({
  id,
  className,
  children,
  config,
  ...props
}: React.ComponentProps<'div'> & {
  config: ChartConfig
  children: React.ComponentProps<
    typeof RechartsPrimitive.ResponsiveContainer
  >['children']
}) {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`

return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-slot="chart"
        data-chart={chartId}
        className={cn(
          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
          className,
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
}

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([, config]) => config.theme || config.color,
  )

if (!colorConfig.length) {
    return null
  }

const styleContent = Object.entries(THEMES)
    .map(
      ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
      itemConfig.color
    return color ? `  --color-${key}: ${color};` : null
  })
  .join('\n')}
}
`,
    )
    .join('\n')

return (
    <style suppressHydrationWarning>
      {styleContent}
    </style>
  )
}

const ChartTooltip = RechartsPrimitive.Tooltip

function ChartTooltipContent({
  active,
  payload,
  className,
  indicator = 'dot',
  hideLabel = false,
  hideIndicator = false,
  label,
  labelFormatter,
  labelClassName,
  formatter,
  color,
  nameKey,
  labelKey,
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
  React.ComponentProps<'div'> & {
    hideLabel?: boolean
    hideIndicator?: boolean
    indicator?: 'line' | 'dot' | 'dashed'
    nameKey?: string
    labelKey?: string
  }) {
  const { config } = useChart()

const tooltipLabel = React.useMemo(() => {
    if (hideLabel || !payload?.length) {
      return null
    }

const [item] = payload
    const key = `${labelKey || item?.dataKey || item?.name || 'value'}`
    const itemConfig = getPayloadConfigFromPayload(config, item, key)
    const value =
      !labelKey && typeof label === 'string'
        ? config[label as keyof typeof config]?.label || label
        : itemConfig?.label

if (labelFormatter) {
      return (
        <div className={cn('font-medium', labelClassName)}>
          {labelFormatter(value, payload)}
        </div>
      )
    }

if (!value) {
      return null
    }

return <div className={cn('font-medium', labelClassName)}>{value}</div>
  }, [
    label,
    labelFormatter,
    payload,
    hideLabel,
    labelClassName,
    config,
    labelKey,
  ])

if (!active || !payload?.length) {
    return null
  }

const nestLabel = payload.length === 1 && indicator !== 'dot'

return (
    <div
      className={cn(
        'border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
        className,
      )}
    >
      {!nestLabel ? tooltipLabel : null}
      <div className="grid gap-1.5">
        {payload.map((item, index) => {
          const key = `${nameKey || item.name || item.dataKey || 'value'}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)
          const indicatorColor = color || item.payload.fill || item.color

return (
            <div
              key={item.dataKey}
              className={cn(
                '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
                indicator === 'dot' && 'items-center',
              )}
            >
              {formatter && item?.value !== undefined && item.name ? (
                formatter(item.value, item.name, item, index, item.payload)
              ) : (
                <>
                  {itemConfig?.icon ? (
                    <itemConfig.icon />
                  ) : (
                    !hideIndicator && (
                      <div
                        className={cn(
                          'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',
                          {
                            'h-2.5 w-2.5': indicator === 'dot',
                            'w-1': indicator === 'line',
                            'w-0 border-[1.5px] border-dashed bg-transparent':
                              indicator === 'dashed',
                            'my-0.5': nestLabel && indicator === 'dashed',
                          },
                        )}
                        style={
                          {
                            '--color-bg': indicatorColor,
                            '--color-border': indicatorColor,
                          } as React.CSSProperties
                        }
                      />
                    )
                  )}
                  <div
                    className={cn(
                      'flex flex-1 justify-between leading-none',
                      nestLabel ? 'items-end' : 'items-center',
                    )}
                  >
                    <div className="grid gap-1.5">
                      {nestLabel ? tooltipLabel : null}
                      <span className="text-muted-foreground">
                        {itemConfig?.label || item.name}
                      </span>
                    </div>
                    {item.value && (
                      <span className="text-foreground font-mono font-medium tabular-nums">
                        {item.value.toLocaleString()}
                      </span>
                    )}
                  </div>
                </>
              )}
            </div>
          )
        })}
      </div>
    </div>
  )
}

const ChartLegend = RechartsPrimitive.Legend

function ChartLegendContent({
  className,
  hideIcon = false,
  payload,
  verticalAlign = 'bottom',
  nameKey,
}: React.ComponentProps<'div'> &
  Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
    hideIcon?: boolean
    nameKey?: string
  }) {
  const { config } = useChart()

if (!payload?.length) {
    return null
  }

return (
    <div
      className={cn(
        'flex items-center justify-center gap-4',
        verticalAlign === 'top' ? 'pb-3' : 'pt-3',
        className,
      )}
    >
      {payload.map((item) => {
        const key = `${nameKey || item.dataKey || 'value'}`
        const itemConfig = getPayloadConfigFromPayload(config, item, key)

return (
          <div
            key={item.value}
            className="[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
          >
            {itemConfig?.icon && !hideIcon ? (
              <itemConfig.icon />
            ) : (
              <div
                className="h-2 w-2 shrink-0 rounded-[2px]"
                style={{
                  backgroundColor: item.color,
                }}
              />
            )}
            {itemConfig?.label}
          </div>
        )
      })}
    </div>
  )
}

// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string,
) {
  if (typeof payload !== 'object' || payload === null) {
    return undefined
  }

const payloadPayload =
    'payload' in payload &&
    typeof payload.payload === 'object' &&
    payload.payload !== null
      ? payload.payload
      : undefined

let configLabelKey: string = key

if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === 'string'
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }

return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
}

export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
}
[V0_FILE]typescriptreact:file="components/simple-theme-provider.tsx" isMerged="true"
'use client'

import { ReactNode, useEffect, useState } from 'react'

export function SimpleThemeProvider({ children }: { children: ReactNode }) {
  const [mounted, setMounted] = useState(false)

useEffect(() => {
    setMounted(true)
    // Simple theme detection - check system preference or localStorage
    const isDark = 
      localStorage.getItem('theme') === 'dark' ||
      (localStorage.getItem('theme') !== 'light' && 
       window.matchMedia('(prefers-color-scheme: dark)').matches)
    
    if (isDark) {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove('dark')
    }
  }, [])

if (!mounted) {
    return <>{children}</>
  }

return <>{children}</>
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { SimpleThemeProvider } from "@/components/simple-theme-provider"
import { LanguageProvider } from "@/lib/language-context"
import { Navigation } from "@/components/navigation"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "DocGhar - Your Personal Home Doctor | घर का डॉक्टर",
  description:
    "Complete natural remedies, Ayurvedic solutions, and health guidance at home. प्राकृतिक उपचार और आयुर्वेदिक समाधान घर पर।",
  keywords: "home doctor, gharelu upchar, ayurvedic remedies, natural healing, health companion",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning className="scroll-smooth">
      <head>
        <link rel="icon" href="/favicon.ico" />
        <meta name="theme-color" content="#16a34a" />
        <meta property="og:title" content="DocGhar - Your Personal Home Doctor" />
        <meta property="og:description" content="Complete natural remedies and health guidance at home" />
        <meta property="og:image" content="/og-image.png" />
      </head>
      <body className={inter.className}>
        <SimpleThemeProvider>
          <LanguageProvider>
            <Navigation />
            <main className="min-h-screen">{children}</main>
          </LanguageProvider>
        </SimpleThemeProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="components/navigation.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Menu, Home, Heart, Activity, Users, MessageCircle, User, Globe, Stethoscope } from "lucide-react"
import { useLanguage } from "@/lib/language-context"

export function Navigation() {
  const [isOpen, setIsOpen] = useState(false)
  const { language, setLanguage, t } = useLanguage()

const navItems = [
    { href: "/", label: t("home"), icon: Home },
    { href: "/remedies", label: t("remedies"), icon: Heart },
    { href: "/yoga", label: t("yoga"), icon: Activity },
    { href: "/tools", label: t("tools"), icon: Activity },
    { href: "/community", label: t("community"), icon: Users },
    { href: "/chat", label: t("chat"), icon: MessageCircle },
  ]

const languages = [
    { code: "en", name: "English", flag: "🇺🇸" },
    { code: "hi", name: "हिंदी", flag: "🇮🇳" },
    { code: "gu", name: "ગુજરાતી", flag: "🇮🇳" },
  ]

const appNames = {
    en: "DocGhar",
    hi: "डॉकघर",
    gu: "ડોકઘર",
  }

return (
    <nav className="sticky top-0 z-50 w-full border-b border-gray-100 bg-white">
      <div className="mx-auto max-w-6xl flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8">
        {/* Logo */}
        <Link href="/" className="flex items-center gap-2">
          <div className="w-9 h-9 bg-green-600 rounded-lg flex items-center justify-center">
            <Stethoscope className="w-5 h-5 text-white" />
          </div>
          <div>
            <span className="text-lg font-bold text-gray-900">
              {appNames[language as keyof typeof appNames]}
            </span>
            <div className="text-xs text-gray-500 -mt-1">
              {language === "hi" ? "घर का डॉक्टर" : language === "gu" ? "ઘરનો ડૉક્ટર" : "Home Doctor"}
            </div>
          </div>
        </Link>

{/* Desktop Navigation */}
        <div className="hidden md:flex items-center space-x-6">
          {navItems.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className="text-sm font-medium text-gray-600 hover:text-green-600 transition-colors"
            >
              {item.label}
            </Link>
          ))}
        </div>

{/* Right Side Actions */}
        <div className="flex items-center space-x-4">
          {/* Language Selector */}
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="sm" className="flex items-center space-x-1">
                <Globe className="w-4 h-4" />
                <span className="hidden sm:inline">{languages.find((lang) => lang.code === language)?.flag}</span>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              {languages.map((lang) => (
                <DropdownMenuItem
                  key={lang.code}
                  onClick={() => setLanguage(lang.code as any)}
                  className={`flex items-center space-x-2 ${language === lang.code ? "bg-green-50" : ""}`}
                >
                  <span>{lang.flag}</span>
                  <span>{lang.name}</span>
                </DropdownMenuItem>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>

{/* User Menu */}
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="sm">
                <User className="w-4 h-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem asChild>
                <Link href="/dashboard">{t("dashboard")}</Link>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <Link href="/auth/login">Login</Link>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>

{/* Mobile Menu */}
          <Sheet open={isOpen} onOpenChange={setIsOpen}>
            <SheetTrigger asChild className="md:hidden">
              <Button variant="ghost" size="sm">
                <Menu className="w-5 h-5" />
              </Button>
            </SheetTrigger>
            <SheetContent side="right" className="w-80">
              <div className="flex flex-col space-y-4 mt-8">
                {navItems.map((item) => {
                  const IconComponent = item.icon
                  return (
                    <Link
                      key={item.href}
                      href={item.href}
                      onClick={() => setIsOpen(false)}
                      className="flex items-center space-x-3 text-lg font-medium text-gray-600 hover:text-green-600 transition-colors"
                    >
                      <IconComponent className="w-5 h-5" />
                      <span>{item.label}</span>
                    </Link>
                  )
                })}
              </div>
            </SheetContent>
          </Sheet>
        </div>
      </div>
    </nav>
  )
}

// Default export for easier importing
export default Navigation
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { useLanguage } from "@/lib/language-context"
import {
  Search,
  Heart,
  Leaf,
  Users,
  Star,
  ArrowRight,
  Activity,
  Shield,
  Brain,
  Eye,
  Stethoscope,
  MessageCircle,
  BookOpen,
  TrendingUp,
} from "lucide-react"

export default function HomePage() {
  const { language, t } = useLanguage()
  const [searchQuery, setSearchQuery] = useState("")

const featuredRemedies = [
    {
      id: "honey-ginger-tea",
      name: language === "hi" ? "शहद अदरक चाय" : language === "gu" ? "મધ આદુ ચા" : "Honey Ginger Tea",
      description:
        language === "hi"
          ? "सर्दी के लिए प्राकृतिक उपचार"
          : language === "gu"
            ? "શરદી માટે કુદરતી ઉપચાર"
            : "Natural cold remedy",
      category: t("respiratory"),
      rating: 4.8,
      uses: 1250,
    },
    {
      id: "turmeric-milk",
      name: language === "hi" ? "हल्दी दूध" : language === "gu" ? "હળદર દૂધ" : "Turmeric Milk",
      description:
        language === "hi"
          ? "प्रतिरक्षा बढ़ाने और सूजन कम करने के लिए"
          : language === "gu"
            ? "રોગપ્રતિકારક શક્તિ વધારવા અને સોજો ઘટાડવા માટે"
            : "Boost immunity and reduce inflammation",
      category: t("immuneSystem"),
      rating: 4.9,
      uses: 2100,
    },
    {
      id: "aloe-vera-gel",
      name: language === "hi" ? "एलोवेरा जेल" : language === "gu" ? "એલોવેરા જેલ" : "Aloe Vera Gel",
      description:
        language === "hi"
          ? "त्वचा की जलन और घावों के लिए"
          : language === "gu"
            ? "ત્વચાની બળતરા અને ઘા માટે"
            : "For skin irritation and wounds",
      category: t("skinHair"),
      rating: 4.7,
      uses: 890,
    },
  ]

const healthCategories = [
    {
      id: "respiratory",
      name: t("respiratory"),
      icon: Activity,
      color: "bg-blue-100 text-blue-700",
      count: 45,
      description:
        language === "hi"
          ? "सांस की समस्याओं के लिए प्राकृतिक समाधान"
          : language === "gu"
            ? "શ્વાસની સમસ્યાઓ માટે કુદરતી ઉકેલ"
            : "Natural solutions for breathing issues",
    },
    {
      id: "digestive",
      name: t("digestive"),
      icon: Heart,
      color: "bg-green-100 text-green-700",
      count: 38,
      description:
        language === "hi"
          ? "पाचन स्वास्थ्य के लिए घरेलू उपचार"
          : language === "gu"
            ? "પાચન આરોગ્ય માટે ઘરેલું ઉપચાર"
            : "Home remedies for digestive health",
    },
    {
      id: "skin-hair",
      name: t("skinHair"),
      icon: Leaf,
      color: "bg-purple-100 text-purple-700",
      count: 52,
      description:
        language === "hi"
          ? "त्वचा और बालों की देखभाल"
          : language === "gu"
            ? "ત્વચા અને વાળની સંભાળ"
            : "Skin and hair care solutions",
    },
    {
      id: "mental-health",
      name: t("mentalHealth"),
      icon: Brain,
      color: "bg-orange-100 text-orange-700",
      count: 24,
      description:
        language === "hi"
          ? "तनाव और चिंता के लिए प्राकृतिक उपचार"
          : language === "gu"
            ? "તણાવ અને ચિંતા માટે કુદરતી ઉપચાર"
            : "Natural remedies for stress and anxiety",
    },
    {
      id: "immune-system",
      name: t("immuneSystem"),
      icon: Shield,
      color: "bg-red-100 text-red-700",
      count: 35,
      description:
        language === "hi"
          ? "प्रतिरक्षा प्रणाली को मजबूत बनाएं"
          : language === "gu"
            ? "રોગપ્રતિકારક શક્તિને મજબૂત બનાવો"
            : "Strengthen your immune system",
    },
    {
      id: "eye-care",
      name: t("eyeCare"),
      icon: Eye,
      color: "bg-teal-100 text-teal-700",
      count: 18,
      description:
        language === "hi"
          ? "आंखों की स्वास्थ्य और देखभाल"
          : language === "gu"
            ? "આંખોનું આરોગ્ય અને સંભાળ"
            : "Eye health and care remedies",
    },
  ]

const stats = [
    {
      label: language === "hi" ? "प्राकृतिक उपचार" : language === "gu" ? "કુદરતી ઉપચાર" : "Natural Remedies",
      value: "500+",
      icon: Leaf,
    },
    {
      label: language === "hi" ? "खुश उपयोगकर्ता" : language === "gu" ? "ખુશ વપરાશકર્તાઓ" : "Happy Users",
      value: "50K+",
      icon: Users,
    },
    {
      label: language === "hi" ? "स्वास्थ्य श्रेणियां" : language === "gu" ? "આરોગ્ય શ્રેણીઓ" : "Health Categories",
      value: "12",
      icon: BookOpen,
    },
    {
      label: language === "hi" ? "सफलता दर" : language === "gu" ? "સફળતા દર" : "Success Rate",
      value: "95%",
      icon: TrendingUp,
    },
  ]

return (
    <div className="min-h-screen bg-white">
      {/* Hero Section */}
      <div className="border-b border-gray-100 bg-white py-16 sm:py-20">
        <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-12">
            {/* Left Content */}
            <div className="flex flex-col justify-center">
              <h1 className="mb-4 text-4xl font-bold text-gray-900 sm:text-5xl lg:text-5xl">
                {language === "hi"
                  ? "आपका स्वास्थ्य सहायक"
                  : language === "gu"
                    ? "તમારો આરોગ્ય સહાયક"
                    : "Your Health Companion"}
              </h1>
              <p className="mb-8 text-lg text-gray-600">
                {language === "hi"
                  ? "घरेलू उपचार, योग और स्वास्थ्य सुझाव"
                  : language === "gu"
                    ? "ઘરેલું ઉપચાર અને આરોગ્ય માર્ગદર્શન"
                    : "Home remedies and health guidance"}
              </p>
              <div className="flex flex-col gap-3 sm:flex-row">
                <Link href="/chat">
                  <Button className="w-full gap-2 bg-green-600 px-6 py-5 text-base font-medium hover:bg-green-700 sm:w-auto">
                    <MessageCircle className="h-4 w-4" />
                    {language === "hi" ? "चैट शुरू करें" : language === "gu" ? "ચેટ શરૂ કરો" : "Start Chat"}
                  </Button>
                </Link>
                <Link href="/remedies/categories">
                  <Button variant="outline" className="w-full gap-2 border-gray-200 px-6 py-5 text-base font-medium hover:bg-gray-50 sm:w-auto">
                    <Leaf className="h-4 w-4" />
                    {language === "hi" ? "उपचार" : language === "gu" ? "ઉપચાર" : "Remedies"}
                  </Button>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>

{/* Stats Section */}
      <div className="py-16 bg-gray-50">
        <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
            {stats.map((stat, index) => {
              const IconComponent = stat.icon
              return (
                <div key={index} className="text-center">
                  <div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-green-500 to-blue-500 rounded-full mb-4">
                    <IconComponent className="w-8 h-8 text-white" />
                  </div>
                  <div className="text-3xl font-bold text-gray-900 mb-2">{stat.value}</div>
                  <div className="text-gray-600">{stat.label}</div>
                </div>
              )
            })}
          </div>
        </div>
      </div>

{/* Featured Remedies */}
      <div className="py-16 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">{t("popular")}</h2>
            <p className="text-xl text-gray-600">
              {language === "hi"
                ? "सबसे प्रभावी और लोकप्रिय प्राकृतिक उपचार"
                : language === "gu"
                  ? "સૌથી અસરકારક અને લોકપ્રિય કુદરતી ઉપચાર"
                  : "Most effective and popular natural remedies"}
            </p>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {featuredRemedies.map((remedy) => (
              <Card key={remedy.id} className="hover:shadow-lg transition-shadow duration-300 border-0 shadow-md">
                <CardHeader>
                  <div className="flex items-center justify-between mb-2">
                    <Badge variant="secondary" className="bg-green-100 text-green-700">
                      {remedy.category}
                    </Badge>
                    <div className="flex items-center space-x-1">
                      <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                      <span className="text-sm font-medium">{remedy.rating}</span>
                    </div>
                  </div>
                  <CardTitle className="text-xl">{remedy.name}</CardTitle>
                  <CardDescription className="text-gray-600">{remedy.description}</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-gray-500">
                      {remedy.uses.toLocaleString()}{" "}
                      {language === "hi" ? "लोगों ने उपयोग किया" : language === "gu" ? "લોકોએ ઉપયોગ કર્યો" : "people used"}
                    </span>
                    <Link href={`/remedies/${remedy.id}`}>
                      <Button variant="ghost" size="sm" className="text-green-600 hover:text-green-700">
                        {t("learnMore")}
                        <ArrowRight className="ml-1 w-4 h-4" />
                      </Button>
                    </Link>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>

<div className="text-center mt-12">
            <Link href="/remedies">
              <Button
                variant="outline"
                size="lg"
                className="border-2 border-green-500 text-green-600 hover:bg-green-50 bg-transparent"
              >
                {t("viewAll")}
                <ArrowRight className="ml-2 w-5 h-5" />
              </Button>
            </Link>
          </div>
        </div>
      </div>

{/* Health Categories */}
      <div className="py-16 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">{t("categories")}</h2>
            <p className="text-xl text-gray-600">
              {language === "hi"
                ? "विभिन्न स्वास्थ्य समस्याओं के लिए विशेषज्ञ समाधान"
                : language === "gu"
                  ? "વિવિધ આરોગ્ય સમસ્યાઓ માટે નિષ્ણાત ઉકેલો"
                  : "Expert solutions for various health conditions"}
            </p>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {healthCategories.map((category) => {
              const IconComponent = category.icon
              return (
                <Link key={category.id} href={`/remedies/category/${category.id}`}>
                  <Card className="hover:shadow-lg transition-all duration-300 cursor-pointer border-0 shadow-md hover:scale-105">
                    <CardHeader>
                      <div className="flex items-center space-x-4">
                        <div className={`p-3 rounded-full ${category.color}`}>
                          <IconComponent className="w-6 h-6" />
                        </div>
                        <div>
                          <CardTitle className="text-lg">{category.name}</CardTitle>
                          <div className="text-sm text-gray-500">
                            {category.count} {language === "hi" ? "उपचार" : language === "gu" ? "ઉપચાર" : "remedies"}
                          </div>
                        </div>
                      </div>
                    </CardHeader>
                    <CardContent>
                      <CardDescription className="text-gray-600 mb-4">{category.description}</CardDescription>
                      <div className="flex items-center text-green-600 font-medium">
                        {language === "hi" ? "अन्वेषण करें" : language === "gu" ? "અન્વેષણ કરો" : "Explore"}
                        <ArrowRight className="ml-1 w-4 h-4" />
                      </div>
                    </CardContent>
                  </Card>
                </Link>
              )
            })}
          </div>
        </div>
      </div>

{/* CTA Section */}
      <div className="py-20 bg-gradient-to-r from-green-500 to-blue-500">
        <div className="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-white mb-6">
            {language === "hi"
              ? "आज ही अपनी स्वास्थ्य यात्रा शुरू करें"
              : language === "gu"
                ? "આજે જ તમારી આરોગ્ય યાત્રા શરૂ કરો"
                : "Start Your Health Journey Today"}
          </h2>
          <p className="text-xl text-green-100 mb-8">
            {language === "hi"
              ? "हजारों प्राकृतिक उपचार, विशेषज्ञ सलाह, और AI-संचालित स्वास्थ्य मार्गदर्शन तक पहुंच प्राप्त करें।"
              : language === "gu"
                ? "હજારો કુદરતી ઉપચાર, નિષ્ણાત સલાહ, અને AI-સંચાલિત આરોગ્ય માર્ગદર્શન મેળવો."
                : "Access thousands of natural remedies, expert advice, and AI-powered health guidance."}
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="/auth/signup">
              <Button
                size="lg"
                variant="secondary"
                className="bg-white text-green-600 hover:bg-gray-100 px-8 py-4 text-lg rounded-full"
              >
                {language === "hi" ? "मुफ्त में शुरू करें" : language === "gu" ? "મફતમાં શરૂ કરો" : "Get Started Free"}
                <ArrowRight className="ml-2 w-5 h-5" />
              </Button>
            </Link>
            <Link href="/about">
              <Button
                size="lg"
                variant="ghost"
                className="text-white border-2 border-white hover:bg-white hover:text-green-600 px-8 py-4 text-lg rounded-full"
              >
                {t("learnMore")}
              </Button>
            </Link>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/yoga/session/[id]/page.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Play, Pause, RotateCcw, ArrowLeft, Timer, Eye, RotateCw, ZoomIn, ZoomOut } from "lucide-react"
import { useState, useEffect, Suspense } from "react"
import Link from "next/link"
import { useParams } from "next/navigation"
import { Canvas } from "@react-three/fiber"
import { OrbitControls, Text3D, Html } from "@react-three/drei"

// 3D Yoga Pose Component with realistic poses
function YogaPose3D({ poseName, step, isActive }: { poseName: string; step: number; isActive: boolean }) {
  const [rotation, setRotation] = useState([0, 0, 0])

// Different poses have different 3D representations
  const getPoseGeometry = () => {
    const lowerPoseName = poseName?.toLowerCase() || ""

if (lowerPoseName.includes("mountain") || lowerPoseName.includes("tadasana")) {
      return <MountainPose3D step={step} isActive={isActive} />
    } else if (
      lowerPoseName.includes("downward") ||
      lowerPoseName.includes("dog") ||
      lowerPoseName.includes("adho mukha")
    ) {
      return <DownwardDog3D step={step} isActive={isActive} />
    } else if (lowerPoseName.includes("warrior") || lowerPoseName.includes("virabhadrasana")) {
      return <WarriorPose3D step={step} isActive={isActive} />
    } else if (lowerPoseName.includes("child") || lowerPoseName.includes("balasana")) {
      return <ChildsPose3D step={step} isActive={isActive} />
    } else if (
      lowerPoseName.includes("cat") ||
      lowerPoseName.includes("cow") ||
      lowerPoseName.includes("marjaryasana")
    ) {
      return <CatCowPose3D step={step} isActive={isActive} />
    } else if (lowerPoseName.includes("tree") || lowerPoseName.includes("vrikshasana")) {
      return <TreePose3D step={step} isActive={isActive} />
    } else if (lowerPoseName.includes("cobra") || lowerPoseName.includes("bhujangasana")) {
      return <CobraPose3D step={step} isActive={isActive} />
    } else if (lowerPoseName.includes("triangle") || lowerPoseName.includes("trikonasana")) {
      return <TrianglePose3D step={step} isActive={isActive} />
    } else if (lowerPoseName.includes("plank") || lowerPoseName.includes("phalakasana")) {
      return <PlankPose3D step={step} isActive={isActive} />
    } else if (lowerPoseName.includes("lotus") || lowerPoseName.includes("padmasana")) {
      return <LotusPose3D step={step} isActive={isActive} />
    } else {
      return <GenericPose3D poseName={poseName} step={step} isActive={isActive} />
    }
  }

return <group rotation={rotation}>{getPoseGeometry()}</group>
}

// Mountain Pose (Tadasana) - Standing straight
function MountainPose3D({ step, isActive }: { step: number; isActive: boolean }) {
  return (
    <group>
      {/* Torso */}
      <mesh position={[0, 0, 0]}>
        <cylinderGeometry args={[0.35, 0.3, 1.8, 8]} />
        <meshStandardMaterial color={isActive ? "#10b981" : "#6b7280"} />
      </mesh>

{/* Head */}
      <mesh position={[0, 1.2, 0]}>
        <sphereGeometry args={[0.22, 16, 16]} />
        <meshStandardMaterial color={isActive ? "#f59e0b" : "#9ca3af"} />
      </mesh>

{/* Arms - straight down by sides */}
      <mesh position={[-0.45, 0.2, 0]} rotation={[0, 0, 0]}>
        <cylinderGeometry args={[0.06, 0.06, 1.1, 8]} />
        <meshStandardMaterial color={isActive ? "#ef4444" : "#6b7280"} />
      </mesh>
      <mesh position={[0.45, 0.2, 0]} rotation={[0, 0, 0]}>
        <cylinderGeometry args={[0.06, 0.06, 1.1, 8]} />
        <meshStandardMaterial color={isActive ? "#ef4444" : "#6b7280"} />
      </mesh>

{/* Hands */}
      <mesh position={[-0.45, -0.4, 0]}>
        <sphereGeometry args={[0.08, 8, 8]} />
        <meshStandardMaterial color={isActive ? "#fbbf24" : "#9ca3af"} />
      </mesh>
      <mesh position={[0.45, -0.4, 0]}>
        <sphereGeometry args={[0.08, 8, 8]} />
        <meshStandardMaterial color={isActive ? "#fbbf24" : "#9ca3af"} />
      </mesh>

{/* Legs - straight and together */}
      <mesh position={[-0.15, -1.3, 0]}>
        <cylinderGeometry args={[0.1, 0.1, 1.4, 8]} />
        <meshStandardMaterial color={isActive ? "#3b82f6" : "#6b7280"} />
      </mesh>
      <mesh position={[0.15, -1.3, 0]}>
        <cylinderGeometry args={[0.1, 0.1, 1.4, 8]} />
        <meshStandardMaterial color={isActive ? "#3b82f6" : "#6b7280"} />
      </mesh>

{/* Feet */}
      <mesh position={[-0.15, -2.1, 0.1]}>
        <boxGeometry args={[0.15, 0.1, 0.3]} />
        <meshStandardMaterial color={isActive ? "#8b5cf6" : "#6b7280"} />
      </mesh>
      <mesh position={[0.15, -2.1, 0.1]}>
        <boxGeometry args={[0.15, 0.1, 0.3]} />
        <meshStandardMaterial color={isActive ? "#8b5cf6" : "#6b7280"} />
      </mesh>

{/* Step indicator */}
      {step > 0 && (
        <Html position={[0, 2, 0]} center>
          <div className="bg-green-500 text-white px-2 py-1 rounded text-xs">
            Step {step}: {getStepDescription("mountain", step)}
          </div>
        </Html>
      )}

{/* Grounding energy */}
      {step > 2 && (
        <mesh position={[0, -2.3, 0]} rotation={[-Math.PI / 2, 0, 0]}>
          <ringGeometry args={[0.8, 1.2, 16]} />
          <meshStandardMaterial color="#10b981" transparent opacity={0.3} />
        </mesh>
      )}
    </group>
  )
}

// Downward Facing Dog (Adho Mukha Svanasana) - Inverted V shape
function DownwardDog3D({ step, isActive }: { step: number; isActive: boolean }) {
  return (
    <group>
      {/* Torso - angled downward */}
      <mesh position={[0, 0.2, 0]} rotation={[0, 0, Math.PI / 4]}>
        <cylinderGeometry args={[0.25, 0.25, 1.6, 8]} />
        <meshStandardMaterial color={isActive ? "#10b981" : "#6b7280"} />
      </mesh>

{/* Head - looking down */}
      <mesh position={[-0.6, -0.3, 0]}>
        <sphereGeometry args={[0.18, 16, 16]} />
        <meshStandardMaterial color={isActive ? "#f59e0b" : "#9ca3af"} />
      </mesh>

{/* Front arms - straight down to ground */}
      <mesh position={[-1.0, -0.6, -0.25]} rotation={[0, 0, -Math.PI / 2.5]}>
        <cylinderGeometry args={[0.06, 0.06, 0.8, 8]} />
        <meshStandardMaterial color={isActive ? "#ef4444" : "#6b7280"} />
      </mesh>
      <mesh position={[-1.0, -0.6, 0.25]} rotation={[0, 0, -Math.PI / 2.5]}>
        <cylinderGeometry args={[0.06, 0.06, 0.8, 8]} />
        <meshStandardMaterial color={isActive ? "#ef4444" : "#6b7280"} />
      </mesh>

{/* Hands on ground */}
      <mesh position={[-1.4, -1.0, -0.25]}>
        <sphereGeometry args={[0.08, 8, 8]} />
        <meshStandardMaterial color={isActive ? "#fbbf24" : "#9ca3af"} />
      </mesh>
      <mesh position={[-1.4, -1.0, 0.25]}>
        <sphereGeometry args={[0.08, 8, 8]} />
        <meshStandardMaterial color={isActive ? "#fbbf24" : "#9ca3af"} />
      </mesh>

{/* Back legs - straight up */}
      <mesh position={[0.6, 0.8, -0.25]} rotation={[0, 0, Math.PI / 2.2]}>
        <cylinderGeometry args={[0.1, 0.1, 1.2, 8]} />
        <meshStandardMaterial color={isActive ? "#3b82f6" : "#6b7280"} />
      </mesh>
      <mesh position={[0.6, 0.8, 0.25]} rotation={[0, 0, Math.PI / 2.2]}>
        <cylinderGeometry args={[0.1, 0.1, 1.2, 8]} />
        <meshStandardMaterial color={isActive ? "#3b82f6" : "#6b7280"} />
      </mesh>

{/* Feet */}
      <mesh position={[1.2, 1.4, -0.25]}>
        <boxGeometry args={[0.15, 0.1, 0.3]} />
        <meshStandardMaterial color={isActive ? "#8b5cf6" : "#6b7280"} />
      </mesh>
      <mesh position={[1.2, 1.4, 0.25]}>
        <boxGeometry args={[0.15, 0.1, 0.3]} />
        <meshStandardMaterial color={isActive ? "#8b5cf6" : "#6b7280"} />
      </mesh>

{/* Step indicator */}
      {step > 0 && (
        <Html position={[0, 2, 0]} center>
          <div className="bg-purple-500 text-white px-2 py-1 rounded text-xs">
            Step {step}: {getStepDescription("downward-dog", step)}
          </div>
        </Html>
      )}

{/* Energy flow visualization */}
      {step > 4 && isActive && (
        <mesh position={[0, 0.2, 0]} rotation={[0, 0, Math.PI / 4]}>
          <cylinderGeometry args={[0.02, 0.02, 2.2, 8]} />
          <meshStandardMaterial color="#fbbf24" emissive="#fbbf24" emissiveIntensity={0.3} />
        </mesh>
      )}
    </group>
  )
}

// Warrior I (Virabhadrasana I) - Lunge with arms up
function WarriorPose3D({ step, isActive }: { step: number; isActive: boolean }) {
  return (
    <group>
      {/* Torso - upright */}
      <mesh position={[0, 0.3, 0]}>
        <cylinderGeometry args={[0.3, 0.3, 1.8, 8]} />
        <meshStandardMaterial color={isActive ? "#10b981" : "#6b7280"} />
      </mesh>

{/* Head */}
      <mesh position={[0, 1.4, 0]}>
        <sphereGeometry args={[0.22, 16, 16]} />
        <meshStandardMaterial color={isActive ? "#f59e0b" : "#9ca3af"} />
      </mesh>

{/* Arms raised up */}
      <mesh position={[-0.2, 1.2, 0]} rotation={[0, 0, -Math.PI / 6]}>
        <cylinderGeometry args={[0.06, 0.06, 1.0, 8]} />
        <meshStandardMaterial color={isActive ? "#ef4444" : "#6b7280"} />
      </mesh>
      <mesh position={[0.2, 1.2, 0]} rotation={[0, 0, Math.PI / 6]}>
        <cylinderGeometry args={[0.06, 0.06, 1.0, 8]} />
        <meshStandardMaterial color={isActive ? "#ef4444" : "#6b7280"} />
      </mesh>

{/* Hands up */}
      <mesh position={[-0.3, 1.8, 0]}>
        <sphereGeometry args={[0.08, 8, 8]} />
        <meshStandardMaterial color={isActive ? "#fbbf24" : "#9ca3af"} />
      </mesh>
      <mesh position={[0.3, 1.8, 0]}>
        <sphereGeometry args={[0.08, 8, 8]} />
        <meshStandardMaterial color={isActive ? "#fbbf24" : "#9ca3af"} />
      </mesh>

{/* Front leg - bent (lunge position) */}
      <mesh position={[0.2, -0.8, 0.6]} rotation={[Math.PI / 8, 0, 0]}>
        <cylinderGeometry args={[0.1, 0.1, 1.2, 8]} />
        <meshStandardMaterial color={isActive ? "#3b82f6" : "#6b7280"} />
      </mesh>

{/* Back leg - straight and extended */}
      <mesh position={[-0.2, -1.0, -0.8]} rotation={[-Math.PI / 6, 0, 0]}>
        <cylinderGeometry args={[0.1, 0.1, 1.4, 8]} />
        <meshStandardMaterial color={isActive ? "#3b82f6" : "#6b7280"} />
      </mesh>

{/* Feet */}
      <mesh position={[0.2, -1.5, 1.0]}>
        <boxGeometry args={[0.15, 0.1, 0.3]} />
        <meshStandardMaterial color={isActive ? "#8b5cf6" : "#6b7280"} />
      </mesh>
      <mesh position={[-0.2, -1.8, -1.4]}>
        <boxGeometry args={[0.15, 0.1, 0.3]} />
        <meshStandardMaterial color={isActive ? "#8b5cf6" : "#6b7280"} />
      </mesh>

{/* Step indicator */}
      {step > 0 && (
        <Html position={[0, 2.5, 0]} center>
          <div className="bg-red-500 text-white px-2 py-1 rounded text-xs">
            Step {step}: {getStepDescription("warrior", step)}
          </div>
        </Html>
      )}

{/* Power aura */}
      {step > 5 && isActive && (
        <mesh position={[0, 0, 0]}>
          <sphereGeometry args={[2.2, 16, 16]} />
          <meshStandardMaterial color="#fbbf24" transparent opacity={0.1} />
        </mesh>
      )}
    </group>
  )
}

// Child's Pose (Balasana) - Kneeling with forehead to ground
function ChildsPose3D({ step, isActive }: { step: number; isActive: boolean }) {
  return (
    <group>
      {/* Torso - folded forward */}
      <mesh position={[0, -0.3, 0.3]} rotation={[Math.PI / 2.5, 0, 0]}>
        <cylinderGeometry args={[0.25, 0.25, 1.4, 8]} />
        <meshStandardMaterial color={isActive ? "#10b981" : "#6b7280"} />
      </mesh>

{/* Head - resting on ground */}
      <mesh position={[0, -0.7, 1.0]}>
        <sphereGeometry args={[0.18, 16, 16]} />
        <meshStandardMaterial color={isActive ? "#f59e0b" : "#9ca3af"} />
      </mesh>

{/* Arms - extended forward or by sides */}
      <mesh position={[-0.3, -0.6, step > 4 ? 1.4 : 0.5]} rotation={[step > 4 ? Math.PI / 2 : Math.PI / 4, 0, 0]}>
        <cylinderGeometry args={[0.06, 0.06, 0.9, 8]} />
        <meshStandardMaterial color={isActive ? "#ef4444" : "#6b7280"} />
      </mesh>
      <mesh position={[0.3, -0.6, step > 4 ? 1.4 : 0.5]} rotation={[step > 4 ? Math.PI / 2 : Math.PI / 4, 0, 0]}>
        <cylinderGeometry args={[0.06, 0.06, 0.9, 8]} />
        <meshStandardMaterial color={isActive ? "#ef4444" : "#6b7280"} />
      </mesh>

{/* Hands */}
      <mesh position={[-0.3, -0.8, step > 4 ? 1.9 : 0.8]}>
        <sphereGeometry args={[0.08, 8, 8]} />
        <meshStandardMaterial color={isActive ? "#fbbf24" : "#9ca3af"} />
      </mesh>
      <mesh position={[0.3, -0.8, step > 4 ? 1.9 : 0.8]}>
        <sphereGeometry args={[0.08, 8, 8]} />
        <meshStandardMaterial color={isActive ? "#fbbf24" : "#9ca3af"} />
      </mesh>

{/* Legs - folded under */}
      <mesh position={[-0.15, -0.1, -0.6]} rotation={[Math.PI / 2.5, 0, 0]}>
        <cylinderGeometry args={[0.1, 0.1, 0.8, 8]} />
        <meshStandardMaterial color={isActive ? "#3b82f6" : "#6b7280"} />
      </mesh>
      <mesh position={[0.15, -0.1, -0.6]} rotation={[Math.PI / 2.5, 0, 0]}>
        <cylinderGeometry args={[0.1, 0.1, 0.8, 8]} />
        <meshStandardMaterial color={isActive ? "#3b82f6" : "#6b7280"} />
      </mesh>

{/* Feet tucked under */}
      <mesh position={[-0.15, 0.2, -1.0]}>
        <boxGeometry args={[0.15, 0.1, 0.25]} />
        <meshStandardMaterial color={isActive ? "#8b5cf6" : "#6b7280"} />
      </mesh>
      <mesh position={[0.15, 0.2, -1.0]}>
        <boxGeometry args={[0.15, 0.1, 0.25]} />
        <meshStandardMaterial color={isActive ? "#8b5cf6" : "#6b7280"} />
      </mesh>

{/* Step indicator */}
      {step > 0 && (
        <Html position={[0, 0.8, 0]} center>
          <div className="bg-blue-500 text-white px-2 py-1 rounded text-xs">
            Step {step}: {getStepDescription("childs-pose", step)}
          </div>
        </Html>
      )}

{/* Relaxation aura */}
      {step > 3 && isActive && (
        <mesh position={[0, -0.3, 0]}>
          <sphereGeometry args={[1.8, 16, 16]} />
          <meshStandardMaterial color="#60a5fa" transparent opacity={0.1} />
        </mesh>
      )}
    </group>
  )
}

// Cat-Cow Pose - On hands and knees with spine movement
function CatCowPose3D({ step, isActive }: { step: number; isActive: boolean }) {
  const isCat = step % 2 === 0

return (
    <group>
      {/* Torso - curved based on cat/cow */}
      <mesh position={[0, 0.2, 0]} rotation={[0, 0, isCat ? Math.PI / 15 : -Math.PI / 15]}>
        <cylinderGeometry args={[0.22, 0.22, 1.6, 8]} />
        <meshStandardMaterial color={isActive ? "#10b981" : "#6b7280"} />
      </mesh>

{/* Head - up for cow, down for cat */}
      <mesh position={[isCat ? -0.1 : 0.1, isCat ? 0.0 : 0.4, 0]}>
        <sphereGeometry args={[0.18, 16, 16]} />
        <meshStandardMaterial color={isActive ? "#f59e0b" : "#9ca3af"} />
      </mesh>

{/* Front arms - supporting body */}
      <mesh position={[-0.7, -0.3, -0.25]} rotation={[0, 0, -Math.PI / 2]}>
        <cylinderGeometry args={[0.06, 0.06, 0.7, 8]} />
        <meshStandardMaterial color={isActive ? "#ef4444" : "#6b7280"} />
      </mesh>
      <mesh position={[-0.7, -0.3, 0.25]} rotation={[0, 0, -Math.PI / 2]}>
        <cylinderGeometry args={[0.06, 0.06, 0.7, 8]} />
        <meshStandardMaterial color={isActive ? "#ef4444" : "#6b7280"} />
      </mesh>

{/* Hands on ground */}
      <mesh position={[-1.1, -0.3, -0.25]}>
        <sphereGeometry args={[0.08, 8, 8]} />
        <meshStandardMaterial color={isActive ? "#fbbf24" : "#9ca3af"} />
      </mesh>
      <mesh position={[-1.1, -0.3, 0.25]}>
        <sphereGeometry args={[0.08, 8, 8]} />
        <meshStandardMaterial color={isActive ? "#fbbf24" : "#9ca3af"} />
      </mesh>

{/* Back legs - supporting body */}
      <mesh position={[0.7, -0.3, -0.25]} rotation={[0, 0, -Math.PI / 2]}>
        <cylinderGeometry args={[0.1, 0.1, 0.7, 8]} />
        <meshStandardMaterial color={isActive ? "#3b82f6" : "#6b7280"} />
      </mesh>
      <mesh position={[0.7, -0.3, 0.25]} rotation={[0, 0, -Math.PI / 2]}>
        <cylinderGeometry args={[0.1, 0.1, 0.7, 8]} />
        <meshStandardMaterial color={isActive ? "#3b82f6" : "#6b7280"} />
      </mesh>

{/* Knees on ground */}
      <mesh position={[1.1, -0.3, -0.25]}>
        <sphereGeometry args={[0.1, 8, 8]} />
        <meshStandardMaterial color={isActive ? "#8b5cf6" : "#6b7280"} />
      </mesh>
      <mesh position={[1.1, -0.3, 0.25]}>
        <sphereGeometry args={[0.1, 8, 8]} />
        <meshStandardMaterial color={isActive ? "#8b5cf6" : "#6b7280"} />
      </mesh>

{/* Step indicator */}
      {step > 0 && (
        <Html position={[0, 1.2, 0]} center>
          <div className={`${isCat ? "bg-purple-500" : "bg-orange-500"} text-white px-2 py-1 rounded text-xs`}>
            {isCat ? "Cat" : "Cow"} - Step {step}: {getStepDescription("cat-cow", step)}
          </div>
        </Html>
      )}

{/* Movement flow visualization */}
      {isActive && (
        <mesh position={[0, 0.8, 0]} rotation={[-Math.PI / 2, 0, 0]}>
          <ringGeometry args={[0.6, 0.8, 16]} />
          <meshStandardMaterial color={isCat ? "#a855f7" : "#f97316"} transparent opacity={0.4} />
        </mesh>
      )}
    </group>
  )
}

// Tree Pose (Vrikshasana) - Standing on one leg
function TreePose3D({ step, isActive }: { step: number; isActive: boolean }) {
  return (
    <group>
      {/* Torso */}
      <mesh position={[0, 0.2, 0]}>
        <cylinderGeometry args={[0.3, 0.3, 1.8, 8]} />
        <meshStandardMaterial color={isActive ? "#10b981" : "#6b7280"} />
      </mesh>

{/* Head */}
      <mesh position={[0, 1.3, 0]}>
        <sphereGeometry args={[0.22, 16, 16]} />
        <meshStandardMaterial color={isActive ? "#f59e0b" : "#9ca3af"} />
      </mesh>

{/* Arms - in prayer position or raised */}
      <mesh position={[step > 4 ? -0.2 : 0, step > 4 ? 1.0 : 0.8, 0]} rotation={[0, 0, step > 4 ? -Math.PI / 6 : 0]}>
        <cylinderGeometry args={[0.06, 0.06, 1.0, 8]} />
        <meshStandardMaterial color={isActive ? "#ef4444" : "#6b7280"} />
      </mesh>
      <mesh position={[step > 4 ? 0.2 : 0, step > 4 ? 1.0 : 0.8, 0]} rotation={[0, 0, step > 4 ? Math.PI / 6 : 0]}>
        <cylinderGeometry args={[0.06, 0.06, 1.0, 8]} />
        <meshStandardMaterial color={isActive ? "#ef4444" : "#6b7280"} />
      </mesh>

{/* Hands */}
      <mesh position={[step > 4 ? -0.3 : 0, step > 4 ? 1.5 : 1.3, 0]}>
        <sphereGeometry args={[0.08, 8, 8]} />
        <meshStandardMaterial color={isActive ? "#fbbf24" : "#9ca3af"} />
      </mesh>
      <mesh position={[step > 4 ? 0.3 : 0, step > 4 ? 1.5 : 1.3, 0]}>
        <sphereGeometry args={[0.08, 8, 8]} />
        <meshStandardMaterial color={isActive ? "#fbbf24" : "#9ca3af"} />
      </mesh>

{/* Standing leg - straight */}
      <mesh position={[0, -1.1, 0]}>
        <cylinderGeometry args={[0.1, 0.1, 1.4, 8]} />
        <meshStandardMaterial color={isActive ? "#3b82f6" : "#6b7280"} />
      </mesh>

{/* Bent leg - foot against standing leg */}
      <mesh position={[0.4, -0.3, 0]} rotation={[0, 0, Math.PI / 2]}>
        <cylinderGeometry args={[0.1, 0.1, 0.8, 8]} />
        <meshStandardMaterial color={isActive ? "#3b82f6" : "#6b7280"} />
      </mesh>

{/* Standing foot */}
      <mesh position={[0, -1.9, 0.1]}>
        <boxGeometry args={[0.15, 0.1, 0.3]} />
        <meshStandardMaterial color={isActive ? "#8b5cf6" : "#6b7280"} />
      </mesh>

{/* Bent leg foot against thigh */}
      <mesh position={[0.8, -0.3, 0]}>
        <boxGeometry args={[0.3, 0.1, 0.15]} />
        <meshStandardMaterial color={isActive ? "#8b5cf6" : "#6b7280"} />
      </mesh>

{/* Step indicator */}
      {step > 0 && (
        <Html position={[0, 2.2, 0]} center>
          <div className="bg-green-600 text-white px-2 py-1 rounded text-xs">
            Step {step}: {getStepDescription("tree", step)}
          </div>
        </Html>
      )}

{/* Balance energy */}
      {step > 3 && isActive && (
        <mesh position={[0, -1.9, 0]} rotation={[-Math.PI / 2, 0, 0]}>
          <ringGeometry args={[0.5, 0.7, 16]} />
          <meshStandardMaterial color="#22c55e" transparent opacity={0.4} />
        </mesh>
      )}
    </group>
  )
}

// Cobra Pose (Bhujangasana) - Lying on stomach with chest lifted
function CobraPose3D({ step, isActive }: { step: number; isActive: boolean }) {
  return (
    <group>
      {/* Torso - arched back */}
      <mesh position={[0, -0.2, 0]} rotation={[0, 0, -Math.PI / 8]}>
        <cylinderGeometry args={[0.25, 0.25, 1.6, 8]} />
        <meshStandardMaterial color={isActive ? "#10b981" : "#6b7280"} />
      </mesh>

{/* Head - lifted up */}
      <mesh position={[0.4, 0.3, 0]}>
        <sphereGeometry args={[0.18, 16, 16]} />
        <meshStandardMaterial color={isActive ? "#f59e0b" : "#9ca3af"} />
      </mesh>

{/* Arms - supporting the lift */}
      <mesh position={[-0.3, -0.5, -0.25]} rotation={[0, 0, -Math.PI / 3]}>
        <cylinderGeometry args={[0.06, 0.06, 0.8, 8]} />
        <meshStandardMaterial color={isActive ? "#ef4444" : "#6b7280"} />
      </mesh>
      <mesh position={[-0.3, -0.5, 0.25]} rotation={[0, 0, -Math.PI / 3]}>
        <cylinderGeometry args={[0.06, 0.06, 0.8, 8]} />
        <meshStandardMaterial color={isActive ? "#ef4444" : "#6b7280"} />
      </mesh>

{/* Hands on ground */}
      <mesh position={[-0.7, -0.8, -0.25]}>
        <sphereGeometry args={[0.08, 8, 8]} />
        <meshStandardMaterial color={isActive ? "#fbbf24" : "#9ca3af"} />
      </mesh>
      <mesh position={[-0.7, -0.8, 0.25]}>
        <sphereGeometry args={[0.08, 8, 8]} />
        <meshStandardMaterial color={isActive ? "#fbbf24" : "#9ca3af"} />
      </mesh>

{/* Legs - straight and on ground */}
      <mesh position={[-0.6, -0.8, -0.15]} rotation={[0, 0, 0]}>
        <cylinderGeometry args={[0.1, 0.1, 1.2, 8]} />
        <meshStandardMaterial color={isActive ? "#3b82f6" : "#6b7280"} />
      </mesh>
      <mesh position={[-0.6, -0.8, 0.15]} rotation={[0, 0, 0]}>
        <cylinderGeometry args={[0.1, 0.1, 1.2, 8]} />
        <meshStandardMaterial color={isActive ? "#3b82f6" : "#6b7280"} />
      </mesh>

{/* Feet */}
      <mesh position={[-1.3, -0.8, -0.15]}>
        <boxGeometry args={[0.3, 0.1, 0.15]} />
        <meshStandardMaterial color={isActive ? "#8b5cf6" : "#6b7280"} />
      </mesh>
      <mesh position={[-1.3, -0.8, 0.15]}>
        <boxGeometry args={[0.3, 0.1, 0.15]} />
        <meshStandardMaterial color={isActive ? "#8b5cf6" : "#6b7280"} />
      </mesh>

{/* Step indicator */}
      {step > 0 && (
        <Html position={[0, 1.2, 0]} center>
          <div className="bg-yellow-500 text-white px-2 py-1 rounded text-xs">
            Step {step}: {getStepDescription("cobra", step)}
          </div>
        </Html>
      )}

{/* Heart opening energy */}
      {step > 3 && isActive && (
        <mesh position={[0, 0, 0]}>
          <sphereGeometry args={[1.5, 16, 16]} />
          <meshStandardMaterial color="#fbbf24" transparent opacity={0.1} />
        </mesh>
      )}
    </group>
  )
}

// Triangle Pose (Trikonasana) - Side bend with hand to floor
function TrianglePose3D({ step, isActive }: { step: number; isActive: boolean }) {
  return (
    <group>
      {/* Torso - bent to side */}
      <mesh position={[0, 0, 0]} rotation={[0, 0, Math.PI / 4]}>
        <cylinderGeometry args={[0.3, 0.3, 1.8, 8]} />
        <meshStandardMaterial color={isActive ? "#10b981" : "#6b7280"} />
      </mesh>

{/* Head */}
      <mesh position={[0.6, 0.6, 0]}>
        <sphereGeometry args={[0.22, 16, 16]} />
        <meshStandardMaterial color={isActive ? "#f59e0b" : "#9ca3af"} />
      </mesh>

{/* Bottom arm - reaching to floor */}
      <mesh position={[0.8, -0.5, 0]} rotation={[0, 0, Math.PI / 2]}>
        <cylinderGeometry args={[0.06, 0.06, 1.0, 8]} />
        <meshStandardMaterial color={isActive ? "#ef4444" : "#6b7280"} />
      </mesh>

{/* Top arm - reaching up */}
      <mesh position={[-0.8, 0.5, 0]} rotation={[0, 0, -Math.PI / 2]}>
        <cylinderGeometry args={[0.06, 0.06, 1.0, 8]} />
        <meshStandardMaterial color={isActive ? "#ef4444" : "#6b7280"} />
      </mesh>

{/* Hands */}
      <mesh position={[1.3, -0.5, 0]}>
        <sphereGeometry args={[0.08, 8, 8]} />
        <meshStandardMaterial color={isActive ? "#fbbf24" : "#9ca3af"} />
      </mesh>
      <mesh position={[-1.3, 0.5, 0]}>
        <sphereGeometry args={[0.08, 8, 8]} />
        <meshStandardMaterial color={isActive ? "#fbbf24" : "#9ca3af"} />
      </mesh>

{/* Legs - wide stance */}
      <mesh position={[0.4, -1.3, 0]}>
        <cylinderGeometry args={[0.1, 0.1, 1.4, 8]} />
        <meshStandardMaterial color={isActive ? "#3b82f6" : "#6b7280"} />
      </mesh>
      <mesh position={[-0.4, -1.3, 0]}>
        <cylinderGeometry args={[0.1, 0.1, 1.4, 8]} />
        <meshStandardMaterial color={isActive ? "#3b82f6" : "#6b7280"} />
      </mesh>

{/* Feet */}
      <mesh position={[0.4, -2.1, 0.1]}>
        <boxGeometry args={[0.15, 0.1, 0.3]} />
        <meshStandardMaterial color={isActive ? "#8b5cf6" : "#6b7280"} />
      </mesh>
      <mesh position={[-0.4, -2.1, 0.1]}>
        <boxGeometry args={[0.15, 0.1, 0.3]} />
        <meshStandardMaterial color={isActive ? "#8b5cf6" : "#6b7280"} />
      </mesh>

{/* Step indicator */}
      {step > 0 && (
        <Html position={[0, 2, 0]} center>
          <div className="bg-indigo-500 text-white px-2 py-1 rounded text-xs">
            Step {step}: {getStepDescription("triangle", step)}
          </div>
        </Html>
      )}
    </group>
  )
}

// Plank Pose (Phalakasana) - Straight body supported by arms
function PlankPose3D({ step, isActive }: { step: number; isActive: boolean }) {
  return (
    <group>
      {/* Torso - straight horizontal */}
      <mesh position={[0, 0, 0]} rotation={[0, 0, 0]}>
        <cylinderGeometry args={[0.25, 0.25, 1.8, 8]} />
        <meshStandardMaterial color={isActive ? "#10b981" : "#6b7280"} />
      </mesh>

{/* Head */}
      <mesh position={[1.0, 0, 0]}>
        <sphereGeometry args={[0.18, 16, 16]} />
        <meshStandardMaterial color={isActive ? "#f59e0b" : "#9ca3af"} />
      </mesh>

{/* Arms - supporting body */}
      <mesh position={[0.6, -0.6, -0.25]} rotation={[0, 0, -Math.PI / 2]}>
        <cylinderGeometry args={[0.06, 0.06, 0.8, 8]} />
        <meshStandardMaterial color={isActive ? "#ef4444" : "#6b7280"} />
      </mesh>
      <mesh position={[0.6, -0.6, 0.25]} rotation={[0, 0, -Math.PI / 2]}>
        <cylinderGeometry args={[0.06, 0.06, 0.8, 8]} />
        <meshStandardMaterial color={isActive ? "#ef4444" : "#6b7280"} />
      </mesh>

{/* Hands on ground */}
      <mesh position={[0.6, -1.0, -0.25]}>
        <sphereGeometry args={[0.08, 8, 8]} />
        <meshStandardMaterial color={isActive ? "#fbbf24" : "#9ca3af"} />
      </mesh>
      <mesh position={[0.6, -1.0, 0.25]}>
        <sphereGeometry args={[0.08, 8, 8]} />
        <meshStandardMaterial color={isActive ? "#fbbf24" : "#9ca3af"} />
      </mesh>

{/* Legs - straight */}
      <mesh position={[-0.6, 0, -0.15]}>
        <cylinderGeometry args={[0.1, 0.1, 1.2, 8]} />
        <meshStandardMaterial color={isActive ? "#3b82f6" : "#6b7280"} />
      </mesh>
      <mesh position={[-0.6, 0, 0.15]}>
        <cylinderGeometry args={[0.1, 0.1, 1.2, 8]} />
        <meshStandardMaterial color={isActive ? "#3b82f6" : "#6b7280"} />
      </mesh>

{/* Feet on toes */}
      <mesh position={[-1.3, -0.1, -0.15]}>
        <boxGeometry args={[0.15, 0.15, 0.15]} />
        <meshStandardMaterial color={isActive ? "#8b5cf6" : "#6b7280"} />
      </mesh>
      <mesh position={[-1.3, -0.1, 0.15]}>
        <boxGeometry args={[0.15, 0.15, 0.15]} />
        <meshStandardMaterial color={isActive ? "#8b5cf6" : "#6b7280"} />
      </mesh>

{/* Step indicator */}
      {step > 0 && (
        <Html position={[0, 1.2, 0]} center>
          <div className="bg-red-600 text-white px-2 py-1 rounded text-xs">
            Step {step}: {getStepDescription("plank", step)}
          </div>
        </Html>
      )}

{/* Core strength visualization */}
      {step > 2 && isActive && (
        <mesh position={[0, 0, 0]}>
          <cylinderGeometry args={[0.3, 0.3, 1.9, 8]} />
          <meshStandardMaterial color="#ef4444" transparent opacity={0.2} />
        </mesh>
      )}
    </group>
  )
}

// Lotus Pose (Padmasana) - Cross-legged meditation pose
function LotusPose3D({ step, isActive }: { step: number; isActive: boolean }) {
  return (
    <group>
      {/* Torso - upright */}
      <mesh position={[0, 0.3, 0]}>
        <cylinderGeometry args={[0.3, 0.3, 1.6, 8]} />
        <meshStandardMaterial color={isActive ? "#10b981" : "#6b7280"} />
      </mesh>

{/* Head */}
      <mesh position={[0, 1.2, 0]}>
        <sphereGeometry args={[0.22, 16, 16]} />
        <meshStandardMaterial color={isActive ? "#f59e0b" : "#9ca3af"} />
      </mesh>

{/* Arms - resting on knees */}
      <mesh position={[-0.4, 0.1, 0]} rotation={[0, 0, Math.PI / 6]}>
        <cylinderGeometry args={[0.06, 0.06, 0.9, 8]} />
        <meshStandardMaterial color={isActive ? "#ef4444" : "#6b7280"} />
      </mesh>
      <mesh position={[0.4, 0.1, 0]} rotation={[0, 0, -Math.PI / 6]}>
        <cylinderGeometry args={[0.06, 0.06, 0.9, 8]} />
        <meshStandardMaterial color={isActive ? "#ef4444" : "#6b7280"} />
      </mesh>

{/* Hands in mudra position */}
      <mesh position={[-0.7, -0.3, 0]}>
        <sphereGeometry args={[0.08, 8, 8]} />
        <meshStandardMaterial color={isActive ? "#fbbf24" : "#9ca3af"} />
      </mesh>
      <mesh position={[0.7, -0.3, 0]}>
        <sphereGeometry args={[0.08, 8, 8]} />
        <meshStandardMaterial color={isActive ? "#fbbf24" : "#9ca3af"} />
      </mesh>

{/* Crossed legs */}
      <mesh position={[-0.3, -0.5, 0.4]} rotation={[0, Math.PI / 4, 0]}>
        <cylinderGeometry args={[0.1, 0.1, 1.0, 8]} />
        <meshStandardMaterial color={isActive ? "#3b82f6" : "#6b7280"} />
      </mesh>
      <mesh position={[0.3, -0.5, -0.4]} rotation={[0, -Math.PI / 4, 0]}>
        <cylinderGeometry args={[0.1, 0.1, 1.0, 8]} />
        <meshStandardMaterial color={isActive ? "#3b82f6" : "#6b7280"} />
      </mesh>

{/* Feet in lotus position */}
      <mesh position={[0.2, -0.4, 0.8]}>
        <boxGeometry args={[0.3, 0.1, 0.15]} />
        <meshStandardMaterial color={isActive ? "#8b5cf6" : "#6b7280"} />
      </mesh>
      <mesh position={[-0.2, -0.4, -0.8]}>
        <boxGeometry args={[0.3, 0.1, 0.15]} />
        <meshStandardMaterial color={isActive ? "#8b5cf6" : "#6b7280"} />
      </mesh>

{/* Step indicator */}
      {step > 0 && (
        <Html position={[0, 2, 0]} center>
          <div className="bg-purple-600 text-white px-2 py-1 rounded text-xs">
            Step {step}: {getStepDescription("lotus", step)}
          </div>
        </Html>
      )}

{/* Meditation energy */}
      {step > 3 && isActive && (
        <mesh position={[0, 1.2, 0]}>
          <sphereGeometry args={[0.4, 16, 16]} />
          <meshStandardMaterial color="#a855f7" transparent opacity={0.2} />
        </mesh>
      )}
    </group>
  )
}

// Generic Pose 3D Component
function GenericPose3D({ poseName, step, isActive }: { poseName: string; step: number; isActive: boolean }) {
  return (
    <group>
      {/* Basic human figure */}
      <mesh position={[0, 0, 0]}>
        <cylinderGeometry args={[0.3, 0.3, 2, 8]} />
        <meshStandardMaterial color={isActive ? "#10b981" : "#6b7280"} />
      </mesh>

{/* Arms */}
      <mesh position={[-0.5, 0.3, 0]}>
        <cylinderGeometry args={[0.08, 0.08, 1.2, 8]} />
        <meshStandardMaterial color={isActive ? "#ef4444" : "#6b7280"} />
      </mesh>
      <mesh position={[0.5, 0.3, 0]}>
        <cylinderGeometry args={[0.08, 0.08, 1.2, 8]} />
        <meshStandardMaterial color={isActive ? "#ef4444" : "#6b7280"} />
      </mesh>

{/* Legs */}
      <mesh position={[-0.2, -1.2, 0]}>
        <cylinderGeometry args={[0.12, 0.12, 1.5, 8]} />
        <meshStandardMaterial color={isActive ? "#3b82f6" : "#6b7280"} />
      </mesh>
      <mesh position={[0.2, -1.2, 0]}>
        <cylinderGeometry args={[0.12, 0.12, 1.5, 8]} />
        <meshStandardMaterial color={isActive ? "#3b82f6" : "#6b7280"} />
      </mesh>

{/* Pose name */}
      <Html position={[0, 2, 0]} center>
        <div className="bg-gray-700 text-white px-3 py-2 rounded text-sm">{poseName || "Yoga Pose"}</div>
      </Html>
    </group>
  )
}

// Helper function to get pose reference images
function getPoseImage(poseName: string): string {
  const lowerPoseName = poseName?.toLowerCase() || ""

if (lowerPoseName.includes("mountain") || lowerPoseName.includes("tadasana")) {
    return "/mountain-pose-tadasana.png"
  } else if (lowerPoseName.includes("downward") || lowerPoseName.includes("dog") || lowerPoseName.includes("adho")) {
    return "/downward-facing-dog.png"
  } else if (lowerPoseName.includes("warrior") || lowerPoseName.includes("virabhadrasana")) {
    return "/warrior-one-yoga.png"
  } else if (lowerPoseName.includes("child") || lowerPoseName.includes("balasana")) {
    return "/child-pose-yoga.png"
  } else if (lowerPoseName.includes("cat") || lowerPoseName.includes("cow") || lowerPoseName.includes("marjary")) {
    return "/cat-cow-yoga.png"
  } else if (lowerPoseName.includes("tree") || lowerPoseName.includes("vrikshasana")) {
    return "/tree-pose-yoga.png"
  } else if (lowerPoseName.includes("cobra") || lowerPoseName.includes("bhujangasana")) {
    return "/cobra-pose-yoga.png"
  } else if (lowerPoseName.includes("triangle") || lowerPoseName.includes("trikonasana")) {
    return "/triangle-pose-yoga.png"
  } else if (lowerPoseName.includes("plank") || lowerPoseName.includes("phalakasana")) {
    return "/plank-pose-yoga.png"
  } else if (lowerPoseName.includes("lotus") || lowerPoseName.includes("padmasana")) {
    return "/lotus-pose-meditation.png"
  } else {
    return "/placeholder.svg?height=256&width=400"
  }
}

// Helper function for step descriptions
function getStepDescription(pose: string, step: number): string {
  const descriptions: { [key: string]: string[] } = {
    mountain: [
      "Stand with feet hip-width apart",
      "Distribute weight evenly",
      "Engage leg muscles",
      "Lengthen spine",
      "Relax shoulders",
      "Arms at sides",
      "Breathe deeply",
    ],
    "downward-dog": [
      "Start on hands and knees",
      "Tuck toes under",
      "Lift hips up",
      "Straighten legs",
      "Press through hands",
      "Create V-shape",
      "Hold and breathe",
    ],
    warrior: [
      "Step left foot back",
      "Turn left foot out 45°",
      "Bend right knee",
      "Square hips forward",
      "Sweep arms up",
      "Hold steady",
      "Breathe deeply",
    ],
    "childs-pose": [
      "Kneel on floor",
      "Big toes touching",
      "Sit back on heels",
      "Open knees wide",
      "Fold forward",
      "Rest forehead down",
      "Breathe into back",
    ],
    "cat-cow": [
      "Start in tabletop",
      "Align wrists/shoulders",
      "Inhale, arch back",
      "Exhale, round spine",
      "Continue flowing",
      "Move with breath",
      "Feel spine massage",
    ],
    tree: [
      "Stand on left foot",
      "Bend right knee",
      "Place foot on thigh",
      "Find your balance",
      "Hands in prayer",
      "Arms overhead",
      "Hold and breathe",
    ],
    cobra: [
      "Lie on stomach",
      "Palms under shoulders",
      "Press into hands",
      "Lift chest up",
      "Keep hips down",
      "Open heart",
      "Breathe deeply",
    ],
    triangle: [
      "Stand with wide legs",
      "Turn right foot out",
      "Reach right hand down",
      "Left hand reaches up",
      "Keep both legs straight",
      "Look up at hand",
      "Hold and breathe",
    ],
    plank: [
      "Start in push-up position",
      "Align shoulders over wrists",
      "Engage core muscles",
      "Keep body straight",
      "Don't let hips sag",
      "Breathe steadily",
      "Hold position",
    ],
    lotus: [
      "Sit cross-legged",
      "Place right foot on left thigh",
      "Place left foot on right thigh",
      "Sit up tall",
      "Rest hands on knees",
      "Close eyes",
      "Meditate deeply",
    ],
  }

const poseDescriptions = descriptions[pose] || ["Follow the guidance"]
  return poseDescriptions[Math.min(step - 1, poseDescriptions.length - 1)] || "Follow the guidance"
}

interface YogaPose {
  name: string
  duration: number
  instructions: string
  benefits: string[]
  stepByStep: string[]
  breathing: string
  precautions: string[]
  visualization: string
}

interface YogaSession {
  id: number
  title: string
  description: string
  duration: string
  level: string
  category: string
  poses: YogaPose[]
  benefits: string[]
}

export default function YogaSessionPage() {
  const params = useParams()
  const [session, setSession] = useState<YogaSession | null>(null)
  const [currentPoseIndex, setCurrentPoseIndex] = useState(0)
  const [isPlaying, setIsPlaying] = useState(false)
  const [timeRemaining, setTimeRemaining] = useState(0)
  const [currentStep, setCurrentStep] = useState(0)
  const [isLoading, setIsLoading] = useState(true)
  const [show3D, setShow3D] = useState(true)
  const [cameraAngle, setCameraAngle] = useState(0)
  const [zoom, setZoom] = useState(5)

useEffect(() => {
    fetchSession()
  }, [params.id])

useEffect(() => {
    let interval: NodeJS.Timeout
    if (isPlaying && timeRemaining > 0) {
      interval = setInterval(() => {
        setTimeRemaining((prev) => {
          if (prev <= 1) {
            nextPose()
            return 0
          }
          return prev - 1
        })
      }, 1000)
    }
    return () => clearInterval(interval)
  }, [isPlaying, timeRemaining])

const fetchSession = async () => {
    try {
      const response = await fetch(`/api/yoga/sessions/${params.id}`)
      const data = await response.json()
      setSession(data)
      if (data?.poses && data.poses.length > 0) {
        setTimeRemaining(data.poses[0]?.duration || 60)
      }
    } catch (error) {
      console.error("Error fetching session:", error)
    } finally {
      setIsLoading(false)
    }
  }

const startSession = () => {
    setIsPlaying(true)
    if (timeRemaining === 0 && session?.poses && session.poses.length > 0) {
      setTimeRemaining(session.poses[currentPoseIndex]?.duration || 60)
    }
  }

const pauseSession = () => {
    setIsPlaying(false)
  }

const resetSession = () => {
    setIsPlaying(false)
    setCurrentPoseIndex(0)
    setCurrentStep(0)
    if (session?.poses && session.poses.length > 0) {
      setTimeRemaining(session.poses[0]?.duration || 60)
    }
  }

const nextPose = () => {
    if (session?.poses && currentPoseIndex < session.poses.length - 1) {
      const nextIndex = currentPoseIndex + 1
      setCurrentPoseIndex(nextIndex)
      setCurrentStep(0)
      setTimeRemaining(session.poses[nextIndex]?.duration || 60)
    } else {
      setIsPlaying(false)
      alert("🎉 Session completed! Namaste! You did amazing! 🧘‍♀️")
    }
  }

const nextStep = () => {
    if (session?.poses && session.poses[currentPoseIndex]?.stepByStep) {
      const currentPose = session.poses[currentPoseIndex]
      if (currentStep < currentPose.stepByStep.length - 1) {
        setCurrentStep(currentStep + 1)
      }
    }
  }

const prevStep = () => {
    if (currentStep > 0) {
      setCurrentStep(currentStep - 1)
    }
  }

const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60)
    const secs = seconds % 60
    return `${mins}:${secs.toString().padStart(2, "0")}`
  }

if (isLoading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-green-50 to-teal-50 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-green-500 mx-auto"></div>
          <p className="mt-4 text-gray-600">Loading your 3D yoga session...</p>
        </div>
      </div>
    )
  }

if (!session) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-green-50 to-teal-50 flex items-center justify-center">
        <div className="text-center">
          <p className="text-gray-600">Session not found</p>
          <Link href="/yoga">
            <Button className="mt-4">Back to Yoga</Button>
          </Link>
        </div>
      </div>
    )
  }

// Safety checks for poses array
  if (!session.poses || session.poses.length === 0) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-green-50 to-teal-50 flex items-center justify-center">
        <div className="text-center">
          <p className="text-gray-600">No poses found in this session</p>
          <Link href="/yoga">
            <Button className="mt-4">Back to Yoga</Button>
          </Link>
        </div>
      </div>
    )
  }

const currentPose = session.poses[currentPoseIndex]

// Safety check for current pose
  if (!currentPose) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-green-50 to-teal-50 flex items-center justify-center">
        <div className="text-center">
          <p className="text-gray-600">Pose data not available</p>
          <Link href="/yoga">
            <Button className="mt-4">Back to Yoga</Button>
          </Link>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-green-50 to-teal-50">
      <div className="max-w-7xl mx-auto p-4">
        <div className="mb-6">
          <Link href="/yoga">
            <Button variant="ghost" className="flex items-center space-x-2">
              <ArrowLeft className="w-4 h-4" />
              <span>Back to Yoga</span>
            </Button>
          </Link>
        </div>

<div className="grid lg:grid-cols-3 gap-6">
          {/* Main 3D Display Area */}
          <div className="lg:col-span-2 space-y-6">
            <Card>
              <CardHeader className="text-center bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-t-lg">
                <CardTitle className="text-2xl">{session.title}</CardTitle>
                <div className="flex justify-center space-x-2 mt-2">
                  <Badge className="bg-white/20">{session.level}</Badge>
                  <Badge className="bg-white/20">{session.category}</Badge>
                </div>
              </CardHeader>
            </Card>

{/* 3D Yoga Pose Display */}
            <Card>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <CardTitle className="text-xl text-purple-700">{currentPose.name}</CardTitle>
                  <div className="flex space-x-2">
                    <Button variant="outline" size="sm" onClick={() => setShow3D(!show3D)}>
                      <Eye className="w-4 h-4 mr-2" />
                      {show3D ? "Hide" : "Show"} 3D
                    </Button>
                    <Button variant="outline" size="sm" onClick={() => setCameraAngle(cameraAngle + 45)}>
                      <RotateCw className="w-4 h-4" />
                    </Button>
                    <Button variant="outline" size="sm" onClick={() => setZoom(Math.max(3, zoom - 1))}>
                      <ZoomIn className="w-4 h-4" />
                    </Button>
                    <Button variant="outline" size="sm" onClick={() => setZoom(Math.min(10, zoom + 1))}>
                      <ZoomOut className="w-4 h-4" />
                    </Button>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                {/* 3D Canvas */}
                {show3D && (
                  <div className="h-[400px] bg-gradient-to-br from-blue-100 to-purple-100 rounded-lg overflow-hidden">
                    <Canvas camera={{ position: [zoom, zoom, zoom], fov: 50 }}>
                      <Suspense fallback={null}>
                        <ambientLight intensity={0.6} />
                        <directionalLight position={[10, 10, 5]} intensity={1} />
                        <pointLight position={[-10, -10, -5]} intensity={0.5} />

{/* 3D Yoga Pose */}
                        <YogaPose3D poseName={currentPose.name} step={currentStep + 1} isActive={isPlaying} />

{/* Ground plane */}
                        <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -2.5, 0]}>
                          <planeGeometry args={[10, 10]} />
                          <meshStandardMaterial color="#e5e7eb" transparent opacity={0.5} />
                        </mesh>

{/* Yoga mat */}
                        <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -2.4, 0]}>
                          <planeGeometry args={[2, 6]} />
                          <meshStandardMaterial color="#7c3aed" transparent opacity={0.7} />
                        </mesh>

{/* Interactive controls */}
                        <OrbitControls
                          enablePan={true}
                          enableZoom={true}
                          enableRotate={true}
                          autoRotate={isPlaying}
                          autoRotateSpeed={0.5}
                        />

{/* Floating instruction text */}
                        <Text3D font="/fonts/Geist_Regular.json" size={0.2} height={0.02} position={[0, 3, 0]}>
                          {currentPose.stepByStep?.[currentStep] || "Follow the pose"}
                          <meshStandardMaterial color="#1f2937" />
                        </Text3D>
                      </Suspense>
                    </Canvas>
                  </div>
                )}

{/* Pose Reference Image */}
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center space-x-2">
                      <span>📸</span>
                      <span>Pose Reference</span>
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-center space-y-4">
                      <div className="relative">
                        <img
                          src={getPoseImage(currentPose.name) || "/placeholder.svg"}
                          alt={`${currentPose.name} yoga pose demonstration`}
                          className="w-full h-64 object-cover rounded-lg shadow-lg"
                          onError={(e) => {
                            e.currentTarget.src = "/placeholder.svg?height=256&width=400&text=Yoga+Pose"
                          }}
                        />
                        <div className="absolute top-2 right-2 bg-black/70 text-white px-2 py-1 rounded text-xs">
                          Reference Photo
                        </div>
                      </div>
                      <p className="text-sm text-gray-600">
                        Follow this reference image along with the 3D model for perfect alignment
                      </p>
                    </div>
                  </CardContent>
                </Card>

{/* Timer and Controls */}
                <div className="text-center space-y-4 mt-6">
                  <div className="text-6xl font-bold text-purple-600 mb-4">{formatTime(timeRemaining)}</div>
                  <p className="text-sm text-gray-600">
                    Pose {currentPoseIndex + 1} of {session.poses.length} • Step {currentStep + 1} of{" "}
                    {currentPose.stepByStep?.length || 1}
                  </p>

{/* Control Buttons */}
                  <div className="flex justify-center space-x-4">
                    {!isPlaying ? (
                      <Button onClick={startSession} className="bg-gradient-to-r from-purple-500 to-pink-500">
                        <Play className="w-4 h-4 mr-2" />
                        Start
                      </Button>
                    ) : (
                      <Button onClick={pauseSession} variant="outline">
                        <Pause className="w-4 h-4 mr-2" />
                        Pause
                      </Button>
                    )}
                    <Button onClick={resetSession} variant="outline">
                      <RotateCcw className="w-4 h-4 mr-2" />
                      Reset
                    </Button>
                    <Button onClick={nextPose} variant="outline">
                      Next Pose
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Step-by-Step Instructions with 3D Integration */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <span>🔢</span>
                  <span>3D Step-by-Step Guide</span>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-gray-600">
                      Step {currentStep + 1} of {currentPose.stepByStep?.length || 1}
                    </span>
                    <div className="flex space-x-2">
                      <Button size="sm" variant="outline" onClick={prevStep} disabled={currentStep === 0}>
                        ← Previous
                      </Button>
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={nextStep}
                        disabled={currentStep === (currentPose.stepByStep?.length || 1) - 1}
                      >
                        Next →
                      </Button>
                    </div>
                  </div>

<div className="bg-gradient-to-r from-purple-50 to-pink-50 p-4 rounded-lg">
                    <p className="text-lg font-medium text-gray-800">
                      {currentPose.stepByStep?.[currentStep] || "Follow the pose guidance"}
                    </p>
                  </div>

{/* 3D Visual Cues */}
                  <div className="grid grid-cols-3 gap-4">
                    <div className="bg-green-50 p-3 rounded-lg text-center">
                      <div className="w-8 h-8 bg-green-500 rounded-full mx-auto mb-2"></div>
                      <p className="text-xs text-green-700">Body Position</p>
                    </div>
                    <div className="bg-blue-50 p-3 rounded-lg text-center">
                      <div className="w-8 h-8 bg-blue-500 rounded-full mx-auto mb-2"></div>
                      <p className="text-xs text-blue-700">Breathing</p>
                    </div>
                    <div className="bg-purple-50 p-3 rounded-lg text-center">
                      <div className="w-8 h-8 bg-purple-500 rounded-full mx-auto mb-2"></div>
                      <p className="text-xs text-purple-700">Energy Flow</p>
                    </div>
                  </div>

{/* Breathing Guide with 3D Visualization */}
                  <div className="bg-blue-50 p-4 rounded-lg">
                    <h4 className="font-semibold text-blue-700 flex items-center space-x-1 mb-2">
                      <span>🫁</span>
                      <span>3D Breathing Guide:</span>
                    </h4>
                    <p className="text-blue-700 mb-3">{currentPose.breathing || "Breathe naturally and deeply"}</p>

{/* Breathing visualization */}
                    <div className="flex items-center justify-center space-x-4">
                      <div
                        className={`w-16 h-16 rounded-full bg-blue-200 flex items-center justify-center transition-all duration-2000 ${isPlaying ? "scale-110" : "scale-100"}`}
                      >
                        <span className="text-blue-600 text-xs">Inhale</span>
                      </div>
                      <div className="text-blue-500">→</div>
                      <div
                        className={`w-16 h-16 rounded-full bg-blue-300 flex items-center justify-center transition-all duration-2000 ${isPlaying ? "scale-90" : "scale-100"}`}
                      >
                        <span className="text-blue-700 text-xs">Exhale</span>
                      </div>
                    </div>
                  </div>

{/* Progress Bar with 3D Effect */}
                  <div className="relative">
                    <div className="w-full bg-gray-200 rounded-full h-3 shadow-inner">
                      <div
                        className="bg-gradient-to-r from-purple-500 to-pink-500 h-3 rounded-full transition-all duration-300 shadow-lg"
                        style={{ width: `${((currentStep + 1) / (currentPose.stepByStep?.length || 1)) * 100}%` }}
                      ></div>
                    </div>
                    <div className="absolute top-0 left-0 w-full h-3 bg-gradient-to-r from-transparent via-white to-transparent opacity-30 rounded-full"></div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

{/* Enhanced Sidebar */}
          <div className="space-y-6">
            {/* 3D Session Progress */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Timer className="w-5 h-5" />
                  <span>3D Session Progress</span>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {session.poses.map((pose, index) => (
                    <div
                      key={index}
                      className={`p-3 rounded-lg text-sm transition-all transform hover:scale-105 ${
                        index === currentPoseIndex
                          ? "bg-gradient-to-r from-purple-100 to-pink-100 text-purple-700 font-semibold border-2 border-purple-300 shadow-lg"
                          : index < currentPoseIndex
                            ? "bg-gradient-to-r from-green-100 to-emerald-100 text-green-700 shadow-md"
                            : "bg-gray-50 text-gray-700 hover:bg-gray-100"
                      }`}
                    >
                      <div className="flex items-center space-x-2">
                        {index < currentPoseIndex && <span className="text-green-500">✅</span>}
                        {index === currentPoseIndex && <span className="text-purple-500 animate-pulse">🔄</span>}
                        {index > currentPoseIndex && <span className="text-gray-400">⏳</span>}
                        <span>{pose.name}</span>
                      </div>
                      <div className="text-xs mt-1 flex items-center space-x-2">
                        <span>({formatTime(pose.duration)})</span>
                        {index === currentPoseIndex && (
                          <div className="flex space-x-1">
                            <div className="w-1 h-1 bg-purple-500 rounded-full animate-bounce"></div>
                            <div
                              className="w-1 h-1 bg-purple-500 rounded-full animate-bounce"
                              style={{ animationDelay: "0.1s" }}
                            ></div>
                            <div
                              className="w-1 h-1 bg-purple-500 rounded-full animate-bounce"
                              style={{ animationDelay: "0.2s" }}
                            ></div>
                          </div>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

{/* 3D Pose Benefits with Mini Gallery */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <span>✨</span>
                  <span>Pose Benefits & Gallery</span>
                </CardTitle>
              </CardHeader>
              <CardContent>
                {/* Mini pose gallery */}
                <div className="mb-4">
                  <h4 className="text-sm font-semibold mb-2">Quick Reference:</h4>
                  <div className="grid grid-cols-2 gap-2">
                    <img
                      src={getPoseImage(currentPose.name) || "/placeholder.svg"}
                      alt={currentPose.name}
                      className="w-full h-20 object-cover rounded border"
                    />
                    <div className="bg-gradient-to-br from-purple-100 to-pink-100 rounded flex items-center justify-center">
                      <span className="text-xs text-center text-purple-700 font-medium">3D Model Active</span>
                    </div>
                  </div>
                </div>

<ul className="space-y-3">
                  {(currentPose.benefits || []).map((benefit, index) => (
                    <li
                      key={index}
                      className="flex items-start space-x-3 p-2 bg-gradient-to-r from-purple-50 to-pink-50 rounded-lg"
                    >
                      <div className="w-3 h-3 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full mt-1 shadow-sm"></div>
                      <span className="text-sm text-gray-700">{benefit}</span>
                    </li>
                  ))}
                </ul>
              </CardContent>
            </Card>

{/* 3D Visualization Controls */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <span>🎮</span>
                  <span>3D Controls</span>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="grid grid-cols-2 gap-2">
                  <Button size="sm" variant="outline" onClick={() => setCameraAngle(0)}>
                    Front View
                  </Button>
                  <Button size="sm" variant="outline" onClick={() => setCameraAngle(90)}>
                    Side View
                  </Button>
                  <Button size="sm" variant="outline" onClick={() => setCameraAngle(180)}>
                    Back View
                  </Button>
                  <Button size="sm" variant="outline" onClick={() => setCameraAngle(270)}>
                    Other Side
                  </Button>
                </div>

<div className="space-y-2">
                  <label className="text-sm font-medium">Zoom Level</label>
                  <input
                    type="range"
                    min="3"
                    max="10"
                    value={zoom}
                    onChange={(e) => setZoom(Number(e.target.value))}
                    className="w-full"
                  />
                </div>

<div className="text-xs text-gray-600 space-y-1">
                  <p>• Drag to rotate view</p>
                  <p>• Scroll to zoom</p>
                  <p>• Right-click to pan</p>
                </div>
              </CardContent>
            </Card>

export default function AboutPage() {
  const team = [
    {
      name: "Dr. Sarah Williams",
      role: "Chief Medical Officer",
      avatar: "/placeholder.svg?height=80&width=80",
      bio: "15+ years in integrative medicine and natural healing",
    },
    {
      name: "Alex Chen",
      role: "AI Technology Lead",
      avatar: "/placeholder.svg?height=80&width=80",
      bio: "Expert in healthcare AI and machine learning applications",
    },
    {
      name: "Maya Patel",
      role: "Wellness Content Director",
      avatar: "/placeholder.svg?height=80&width=80",
      bio: "Certified yoga instructor and holistic health practitioner",
    },
  ]

const stats = [
    { icon: Users, value: "50K+", label: "Active Users" },
    { icon: Heart, value: "1M+", label: "Health Tips Shared" },
    { icon: Award, value: "95%", label: "User Satisfaction" },
    { icon: Globe, value: "25+", label: "Countries Served" },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-green-50 to-teal-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        {/* Hero Section */}
        <div className="text-center mb-16">
          <h1 className="text-4xl font-bold text-gray-900 mb-6">About HealthAI</h1>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
            We're on a mission to make authentic, natural health wisdom accessible to everyone through the power of AI.
            Our platform combines traditional remedies with modern technology to provide personalized health guidance.
          </p>
        </div>

{/* Mission & Vision */}
        <div className="grid md:grid-cols-2 gap-8 mb-16">
          <Card>
            <CardHeader>
              <CardTitle className="text-green-700">Our Mission</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-gray-600">
                To democratize access to natural health knowledge by creating an AI-powered platform that provides
                personalized, evidence-based wellness guidance rooted in traditional healing practices.
              </p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle className="text-green-700">Our Vision</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-gray-600">
                A world where everyone has access to holistic health solutions that honor both ancient wisdom and modern
                science, empowering individuals to take control of their wellness journey.
              </p>
            </CardContent>
          </Card>
        </div>

{/* Stats */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16">
          {stats.map((stat, index) => {
            const IconComponent = stat.icon
            return (
              <Card key={index} className="text-center">
                <CardContent className="pt-6">
                  <div className="w-12 h-12 bg-gradient-to-r from-green-500 to-teal-500 rounded-full flex items-center justify-center mx-auto mb-4">
                    <IconComponent className="w-6 h-6 text-white" />
                  </div>
                  <div className="text-2xl font-bold text-gray-900">{stat.value}</div>
                  <div className="text-sm text-gray-600">{stat.label}</div>
                </CardContent>
              </Card>
            )
          })}
        </div>

{/* Team Section */}
        <div className="mb-16">
          <h2 className="text-3xl font-bold text-center text-gray-900 mb-12">Meet Our Team</h2>
          <div className="grid md:grid-cols-3 gap-8">
            {team.map((member, index) => (
              <Card key={index} className="text-center">
                <CardHeader>
                  <Avatar className="w-20 h-20 mx-auto mb-4">
                    <AvatarImage src={member.avatar || "/placeholder.svg"} />
                    <AvatarFallback>
                      {member.name
                        .split(" ")
                        .map((n) => n[0])
                        .join("")}
                    </AvatarFallback>
                  </Avatar>
                  <CardTitle className="text-green-700">{member.name}</CardTitle>
                  <CardDescription className="font-semibold">{member.role}</CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-600">{member.bio}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>

{/* Values */}
        <div>
          <h2 className="text-3xl font-bold text-center text-gray-900 mb-12">Our Values</h2>
          <div className="grid md:grid-cols-3 gap-8">
            <Card>
              <CardHeader>
                <CardTitle className="text-green-700">Authenticity</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">
                  We source our remedies from traditional practices backed by scientific research, ensuring every
                  recommendation is both authentic and effective.
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle className="text-green-700">Accessibility</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">
                  Health wisdom should be available to everyone, regardless of location or background. We make natural
                  healing accessible through technology.
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle className="text-green-700">Empowerment</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">
                  We believe in empowering individuals with knowledge and tools to take charge of their health journey
                  naturally and confidently.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/remedies/route.ts" isMerged="true"
import { NextResponse } from "next/server"

const remedies = [
  {
    id: 1,
    title: "Honey and Ginger for Cough",
    description: "Natural remedy to soothe throat and reduce coughing",
    ingredients: ["2 tbsp honey", "1 tsp fresh ginger juice", "Warm water"],
    instructions: [
      "Mix honey with fresh ginger juice",
      "Add to a cup of warm water",
      "Stir well and drink slowly",
      "Take 2-3 times daily",
    ],
    duration: "5 mins",
    rating: 4.8,
    users: 1200,
    category: "Respiratory",
  },
  {
    id: 2,
    title: "Turmeric Milk for Inflammation",
    description: "Anti-inflammatory drink to boost immunity",
    ingredients: ["1 cup milk", "1 tsp turmeric powder", "Pinch of black pepper"],
    instructions: [
      "Heat milk in a saucepan",
      "Add turmeric powder and black pepper",
      "Simmer for 5 minutes",
      "Strain and serve warm",
    ],
    duration: "10 mins",
    rating: 4.9,
    users: 2100,
    category: "Immunity",
  },
]

export async function GET() {
  return NextResponse.json(remedies)
}

export async function POST(request: Request) {
  const body = await request.json()
  const newRemedy = {
    id: remedies.length + 1,
    ...body,
    rating: 0,
    users: 0,
  }
  remedies.push(newRemedy)
  return NextResponse.json(newRemedy, { status: 201 })
}
[V0_FILE]typescriptreact:file="app/api/yoga/route.ts" isMerged="true"
import { NextResponse } from "next/server"

const yogaSessions = [
  {
    id: 1,
    title: "Morning Energizer Flow",
    description: "Start your day with this energizing 15-minute yoga sequence",
    duration: "15 mins",
    level: "Beginner",
    category: "Morning",
    poses: ["Mountain Pose", "Sun Salutation A", "Warrior I", "Downward Dog", "Child's Pose"],
    benefits: ["Increases energy", "Improves flexibility", "Reduces stress"],
    instructions: "Begin in mountain pose, flow through sun salutations...",
  },
  {
    id: 2,
    title: "Stress Relief Meditation",
    description: "Calm your mind with gentle poses and breathing exercises",
    duration: "20 mins",
    level: "All Levels",
    category: "Relaxation",
    poses: ["Easy Pose", "Cat-Cow Stretch", "Legs Up the Wall", "Corpse Pose"],
    benefits: ["Reduces anxiety", "Improves sleep", "Mental clarity"],
    instructions: "Find a quiet space, sit comfortably in easy pose...",
  },
]

export async function GET() {
  return NextResponse.json(yogaSessions)
}

export async function POST(request: Request) {
  const body = await request.json()
  const newSession = {
    id: yogaSessions.length + 1,
    ...body,
  }
  yogaSessions.push(newSession)
  return NextResponse.json(newSession, { status: 201 })
}
[V0_FILE]typescriptreact:file="app/api/community/posts/route.ts" isMerged="true"
import { NextResponse } from "next/server"

const posts = [
  {
    id: 1,
    author: "Sarah Johnson",
    authorId: "user_1",
    time: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
    title: "Amazing results with turmeric tea!",
    content:
      "I've been drinking turmeric tea for 3 weeks now and my joint pain has significantly reduced. Highly recommend this natural remedy!",
    category: "Success Story",
    likes: 24,
    comments: 8,
    shares: 3,
    tags: ["turmeric", "joint-pain", "natural-remedy"],
  },
  {
    id: 2,
    author: "Mike Chen",
    authorId: "user_2",
    time: new Date(Date.now() - 5 * 60 * 60 * 1000).toISOString(),
    title: "Question about yoga for back pain",
    content:
      "Has anyone tried specific yoga poses for lower back pain? I'm looking for gentle exercises that won't strain my back further.",
    category: "Question",
    likes: 12,
    comments: 15,
    shares: 2,
    tags: ["yoga", "back-pain", "exercise"],
  },
]

export async function GET() {
  return NextResponse.json(posts)
}

export async function POST(request: Request) {
  const body = await request.json()
  const newPost = {
    id: posts.length + 1,
    ...body,
    time: new Date().toISOString(),
    likes: 0,
    comments: 0,
    shares: 0,
  }
  posts.push(newPost)
  return NextResponse.json(newPost, { status: 201 })
}
[V0_FILE]typescriptreact:file="app/tools/bmi/page.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import { useState } from "react"
import Link from "next/link"
import { ArrowLeft } from "lucide-react"

export default function BMICalculatorPage() {
  const [height, setHeight] = useState("")
  const [weight, setWeight] = useState("")
  const [bmi, setBMI] = useState<number | null>(null)
  const [category, setCategory] = useState("")
  const [recommendations, setRecommendations] = useState<string[]>([])

const calculateBMI = () => {
    const heightInM = Number.parseFloat(height) / 100
    const weightInKg = Number.parseFloat(weight)

if (heightInM > 0 && weightInKg > 0) {
      const bmiValue = weightInKg / (heightInM * heightInM)
      setBMI(Number.parseFloat(bmiValue.toFixed(1)))

let cat = ""
      let recs: string[] = []

if (bmiValue < 18.5) {
        cat = "Underweight"
        recs = [
          "Increase caloric intake with healthy foods",
          "Include protein-rich foods in your diet",
          "Consider strength training exercises",
          "Consult with a nutritionist",
        ]
      } else if (bmiValue < 25) {
        cat = "Normal weight"
        recs = [
          "Maintain your current healthy lifestyle",
          "Continue regular physical activity",
          "Eat a balanced diet",
          "Stay hydrated",
        ]
      } else if (bmiValue < 30) {
        cat = "Overweight"
        recs = [
          "Increase physical activity",
          "Focus on portion control",
          "Include more vegetables in your diet",
          "Consider cardio exercises",
        ]
      } else {
        cat = "Obese"
        recs = [
          "Consult with a healthcare provider",
          "Create a structured exercise plan",
          "Focus on gradual weight loss",
          "Consider professional dietary guidance",
        ]
      }

setCategory(cat)
      setRecommendations(recs)
    }
  }

const getBMIColor = () => {
    if (!bmi) return "gray"
    if (bmi < 18.5) return "blue"
    if (bmi < 25) return "green"
    if (bmi < 30) return "yellow"
    return "red"
  }

<Card>
          <CardHeader className="text-center">
            <CardTitle className="text-2xl text-green-700">BMI Calculator</CardTitle>
            <CardDescription>
              Calculate your Body Mass Index and get personalized health recommendations
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="height">Height (cm)</Label>
                <Input
                  id="height"
                  type="number"
                  value={height}
                  onChange={(e) => setHeight(e.target.value)}
                  placeholder="170"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="weight">Weight (kg)</Label>
                <Input
                  id="weight"
                  type="number"
                  value={weight}
                  onChange={(e) => setWeight(e.target.value)}
                  placeholder="70"
                />
              </div>
            </div>

<Button
              onClick={calculateBMI}
              className="w-full bg-gradient-to-r from-green-500 to-teal-500"
              disabled={!height || !weight}
            >
              Calculate BMI
            </Button>

{bmi && (
              <div className="space-y-4">
                <div className="text-center">
                  <div className="text-4xl font-bold text-gray-900">{bmi}</div>
                  <Badge className={`mt-2 bg-${getBMIColor()}-100 text-${getBMIColor()}-700`}>{category}</Badge>
                </div>

<Card>
                  <CardHeader>
                    <CardTitle className="text-lg">Recommendations</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-2">
                      {recommendations.map((rec, index) => (
                        <li key={index} className="flex items-start space-x-2">
                          <div className="w-2 h-2 bg-green-500 rounded-full mt-2"></div>
                          <span className="text-sm">{rec}</span>
                        </li>
                      ))}
                    </ul>
                  </CardContent>
                </Card>

<div className="flex space-x-2">
                  <Button variant="outline" className="flex-1 bg-transparent">
                    Save Result
                  </Button>
                  <Button variant="outline" className="flex-1 bg-transparent">
                    Share
                  </Button>
                </div>
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/community/create/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { useState } from "react"
import Link from "next/link"
import { ArrowLeft, X } from "lucide-react"
import { useRouter } from "next/navigation"

export default function CreatePostPage() {
  const [title, setTitle] = useState("")
  const [content, setContent] = useState("")
  const [category, setCategory] = useState("")
  const [tags, setTags] = useState<string[]>([])
  const [newTag, setNewTag] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()

const addTag = () => {
    if (newTag.trim() && !tags.includes(newTag.trim())) {
      setTags([...tags, newTag.trim()])
      setNewTag("")
    }
  }

const removeTag = (tagToRemove: string) => {
    setTags(tags.filter((tag) => tag !== tagToRemove))
  }

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

try {
      const response = await fetch("/api/community/posts", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          title,
          content,
          category,
          tags,
        }),
      })

if (response.ok) {
        router.push("/community")
      } else {
        alert("Failed to create post. Please try again.")
      }
    } catch (error) {
      alert("An error occurred. Please try again.")
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-green-50 to-teal-50">
      <div className="max-w-2xl mx-auto p-4">
        <div className="mb-6">
          <Link href="/community">
            <Button variant="ghost" className="flex items-center space-x-2">
              <ArrowLeft className="w-4 h-4" />
              <span>Back to Community</span>
            </Button>
          </Link>
        </div>

<Card>
          <CardHeader>
            <CardTitle className="text-2xl text-green-700">Share Your Story</CardTitle>
            <CardDescription>
              Share your health journey, ask questions, or provide advice to the community
            </CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-6">
              <div className="space-y-2">
                <Label htmlFor="title">Title</Label>
                <Input
                  id="title"
                  value={title}
                  onChange={(e) => setTitle(e.target.value)}
                  placeholder="What's your story about?"
                  required
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="category">Category</Label>
                <Select value={category} onValueChange={setCategory} required>
                  <SelectTrigger>
                    <SelectValue placeholder="Select a category" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="success-story">Success Story</SelectItem>
                    <SelectItem value="question">Question</SelectItem>
                    <SelectItem value="advice">Advice</SelectItem>
                    <SelectItem value="experience">Experience</SelectItem>
                    <SelectItem value="support">Support</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="content">Content</Label>
                <Textarea
                  id="content"
                  value={content}
                  onChange={(e) => setContent(e.target.value)}
                  placeholder="Share your story, ask your question, or provide advice..."
                  rows={8}
                  required
                />
              </div>