[V0_FILE]css:file="app/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.12 0.015 250); --foreground: oklch(0.96 0.01 250); --card: oklch(0.17 0.015 250); --card-foreground: oklch(0.96 0.01 250); --popover: oklch(0.17 0.015 250); --popover-foreground: oklch(0.96 0.01 250); --primary: oklch(0.72 0.19 165); --primary-foreground: oklch(0.12 0.015 250); --secondary: oklch(0.22 0.02 250); --secondary-foreground: oklch(0.92 0.01 250); --muted: oklch(0.22 0.02 250); --muted-foreground: oklch(0.65 0.02 250); --accent: oklch(0.65 0.17 295); --accent-foreground: oklch(0.96 0.01 250); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.28 0.02 250); --input: oklch(0.22 0.02 250); --ring: oklch(0.72 0.19 165); --chart-1: oklch(0.72 0.19 165); --chart-2: oklch(0.65 0.17 295); --chart-3: oklch(0.7 0.15 220); --chart-4: oklch(0.75 0.15 80); --chart-5: oklch(0.65 0.2 25); --radius: 0.75rem; --sidebar: oklch(0.15 0.015 250); --sidebar-foreground: oklch(0.96 0.01 250); --sidebar-primary: oklch(0.72 0.19 165); --sidebar-primary-foreground: oklch(0.12 0.015 250); --sidebar-accent: oklch(0.22 0.02 250); --sidebar-accent-foreground: oklch(0.96 0.01 250); --sidebar-border: oklch(0.28 0.02 250); --sidebar-ring: oklch(0.72 0.19 165); } .dark { --background: oklch(0.12 0.015 250); --foreground: oklch(0.96 0.01 250); --card: oklch(0.17 0.015 250); --card-foreground: oklch(0.96 0.01 250); --popover: oklch(0.17 0.015 250); --popover-foreground: oklch(0.96 0.01 250); --primary: oklch(0.72 0.19 165); --primary-foreground: oklch(0.12 0.015 250); --secondary: oklch(0.22 0.02 250); --secondary-foreground: oklch(0.92 0.01 250); --muted: oklch(0.22 0.02 250); --muted-foreground: oklch(0.65 0.02 250); --accent: oklch(0.65 0.17 295); --accent-foreground: oklch(0.96 0.01 250); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.28 0.02 250); --input: oklch(0.22 0.02 250); --ring: oklch(0.72 0.19 165); --chart-1: oklch(0.72 0.19 165); --chart-2: oklch(0.65 0.17 295); --chart-3: oklch(0.7 0.15 220); --chart-4: oklch(0.75 0.15 80); --chart-5: oklch(0.65 0.2 25); --sidebar: oklch(0.15 0.015 250); --sidebar-foreground: oklch(0.96 0.01 250); --sidebar-primary: oklch(0.72 0.19 165); --sidebar-primary-foreground: oklch(0.12 0.015 250); --sidebar-accent: oklch(0.22 0.02 250); --sidebar-accent-foreground: oklch(0.96 0.01 250); --sidebar-border: oklch(0.28 0.02 250); --sidebar-ring: oklch(0.72 0.19 165); } @theme inline { --font-sans: 'Inter', '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; } } /* Smooth transitions */ @layer utilities { .transition-tab { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } } [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": "16.0.10", "next-themes": "^0.4.6", "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" }, "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]typescriptreact:file="components/weekly-stats.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Calendar } from "lucide-react" import type { Workout } from "@/app/page" interface WeeklyStatsProps { weeklyWorkouts: Workout[] } export function WeeklyStats({ weeklyWorkouts }: WeeklyStatsProps) { const days = ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"] const getWorkoutsByDay = () => { const now = new Date() const weekStart = new Date(now) weekStart.setDate(now.getDate() - now.getDay()) weekStart.setHours(0, 0, 0, 0) const workoutsByDay = Array(7).fill(0) weeklyWorkouts.forEach((workout) => { const workoutDate = new Date(workout.date) const dayIndex = workoutDate.getDay() workoutsByDay[dayIndex]++ }) return workoutsByDay } const workoutsByDay = getWorkoutsByDay() const maxWorkouts = Math.max(...workoutsByDay, 1) return ( Visao Semanal

{days.map((day, index) => { const count = workoutsByDay[index] const height = maxWorkouts > 0 ? (count / maxWorkouts) * 100 : 0 const isToday = new Date().getDay() === index return (

{day}

{count > 0 && (

)}

{count}

) })}

) } [V0_FILE]typescriptreact:file="components/weekly-plan.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { ArrowLeft, Activity, Heart, Footprints, Dumbbell } from "lucide-react" interface WeeklyPlanProps { onBack: () => void } const workoutPlans = { corrida: { name: "Corrida", icon: Footprints, color: "emerald", schedule: [ { day: "Segunda", activity: "Alongamento Suave", duration: "20 min", guidance: "Pare antes de sentir dor" }, { day: "Terça", activity: "Caminhada Leve", duration: "30 min", guidance: "Até sentir leve aquecimento" }, { day: "Quarta", activity: "Mobilidade Articular", duration: "25 min", guidance: "Respeite seus limites" }, { day: "Quinta", activity: "Descanso Ativo", duration: "15 min", guidance: "Movimento gentil" }, { day: "Sexta", activity: "Caminhada Confortável", duration: "40 min", guidance: "Ritmo agradável" }, { day: "Sábado", activity: "Fortalecimento Leve", duration: "30 min", guidance: "Sem forçar demais" }, { day: "Domingo", activity: "Descanso Total", duration: "-", guidance: "Recuperação completa" }, ], }, musculacao: { name: "Musculação Consciente", icon: Dumbbell, color: "blue", schedule: [ { day: "Segunda", activity: "Parte Superior", duration: "40 min", guidance: "Faça até leve cansaço" }, { day: "Terça", activity: "Mobilidade", duration: "30 min", guidance: "Movimentos suaves" }, { day: "Quarta", activity: "Parte Inferior", duration: "40 min", guidance: "Pare antes da dor" }, { day: "Quinta", activity: "Descanso Ativo", duration: "20 min", guidance: "Alongamento leve" }, { day: "Sexta", activity: "Corpo Todo Leve", duration: "35 min", guidance: "Sem exagerar" }, { day: "Sábado", activity: "Movimento Suave", duration: "25 min", guidance: "Escute seu corpo" }, { day: "Domingo", activity: "Descanso Total", duration: "-", guidance: "Recuperação completa" }, ], }, funcional: { name: "Treino Funcional", icon: Activity, color: "purple", schedule: [ { day: "Segunda", activity: "Alongamento Dinâmico", duration: "20 min", guidance: "Até sentir conforto" }, { day: "Terça", activity: "Fortalecimento Gentil", duration: "30 min", guidance: "Respeite seus limites" }, { day: "Quarta", activity: "Mobilidade", duration: "25 min", guidance: "Movimentos controlados" }, { day: "Quinta", activity: "Descanso Ativo", duration: "20 min", guidance: "Caminhada leve" }, { day: "Sexta", activity: "Equilíbrio e Core", duration: "30 min", guidance: "Sem forçar" }, { day: "Sábado", activity: "Cardio Suave", duration: "35 min", guidance: "Ritmo confortável" }, { day: "Domingo", activity: "Descanso Total", duration: "-", guidance: "Recuperação completa" }, ], }, yoga: { name: "Yoga e Bem-Estar", icon: Heart, color: "pink", schedule: [ { day: "Segunda", activity: "Yoga Restaurativo", duration: "40 min", guidance: "Foco na respiração" }, { day: "Terça", activity: "Fluxo Suave", duration: "35 min", guidance: "Respeite seu corpo" }, { day: "Quarta", activity: "Meditação", duration: "20 min", guidance: "Relaxamento profundo" }, { day: "Quinta", activity: "Alongamento Profundo", duration: "40 min", guidance: "Sem dor, só tensão leve" }, { day: "Sexta", activity: "Yoga Gentil", duration: "35 min", guidance: "Movimentos fluidos" }, { day: "Sábado", activity: "Práticas de Respiração", duration: "30 min", guidance: "Calma e presença" }, { day: "Domingo", activity: "Descanso Total", duration: "-", guidance: "Recuperação completa" }, ], }, } export function WeeklyPlan({ onBack }: WeeklyPlanProps) { const [selectedPlan, setSelectedPlan] = useState(null) const getGuidanceColor = () => { return "bg-emerald-500/20 text-emerald-400 border-emerald-500/30" } const getColorClasses = (color: string) => { switch (color) { case "emerald": return "from-emerald-500/20 to-emerald-600/20 border-emerald-500/30 hover:border-emerald-500/50" case "blue": return "from-blue-500/20 to-blue-600/20 border-blue-500/30 hover:border-blue-500/50" case "purple": return "from-purple-500/20 to-purple-600/20 border-purple-500/30 hover:border-purple-500/50" case "pink": return "from-pink-500/20 to-pink-600/20 border-pink-500/30 hover:border-pink-500/50" default: return "from-slate-500/20 to-slate-600/20 border-slate-500/30 hover:border-slate-500/50" } } return (

Planos Semanais

Rotinas que respeitam seu corpo

{!selectedPlan ? (

{(Object.keys(workoutPlans) as Array).map((key) => { const plan = workoutPlans[key] const Icon = plan.icon return ( setSelectedPlan(key)} >

{plan.name}

{plan.schedule.length} dias de atividade

) })}

) : (

{(() => { const Icon = workoutPlans[selectedPlan].icon return })()}

{workoutPlans[selectedPlan].name}

Lembre-se sempre:

• Faça até sentir leve cansaço
• Pare antes da dor
• Respeite os limites do seu corpo

{workoutPlans[selectedPlan].schedule.map((day, index) => (

{day.day}

{day.activity}

{day.duration}

{day.guidance}

))}

)}

) } [V0_FILE]typescriptreact:file="components/workout-history.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { History, Clock, TrendingUp } from "lucide-react" import type { Workout } from "@/app/page" interface WorkoutHistoryProps { workouts: Workout[] } export function WorkoutHistory({ workouts }: WorkoutHistoryProps) { const formatDate = (dateString: string) => { const date = new Date(dateString) return new Intl.DateTimeFormat("pt-BR", { day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit", }).format(date) } const formatDuration = (seconds: number) => { const mins = Math.floor(seconds / 60) return `${mins} min` } const getFeelingDisplay = (feeling: "good" | "moderate" | "tired") => { switch (feeling) { case "good": return { label: "Me senti bem", color: "text-chart-1", bg: "bg-chart-1/15" } case "moderate": return { label: "Cansado, mas ok", color: "text-chart-4", bg: "bg-chart-4/15" } case "tired": return { label: "Muito cansado", color: "text-chart-5", bg: "bg-chart-5/15" } default: return { label: "Me senti bem", color: "text-chart-1", bg: "bg-chart-1/15" } } } if (workouts.length === 0) { return ( Historico de Treinos

Nenhum treino registrado ainda. Comece seu primeiro treino!

) } return ( Historico de Treinos

{workouts.slice(0, 10).map((workout) => { const feelingDisplay = getFeelingDisplay(workout.feeling || "good") return (

{feelingDisplay.label}

{formatDate(workout.date)}

{formatDuration(workout.duration)}

) })}

) } [V0_FILE]typescriptreact:file="components/adapted-workout.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { ArrowLeft, CheckCircle, AlertTriangle, XCircle } from "lucide-react" import type { DailyCondition } from "./daily-assessment" import { MotivationalVoice } from "./motivational-voice" interface AdaptedWorkoutProps { condition: DailyCondition onStartWorkout: () => void onBack: () => void } const workoutPlans = { great: { title: "Movimento Possivel - Completo", subtitle: "Voce esta em otimo estado!", icon: CheckCircle, token: "chart-1", exercises: [ { name: "Aquecimento", guidance: "5-10 min de movimento suave", intensity: "leve" }, { name: "Exercicio Principal", guidance: "Faca ate sentir trabalho muscular", intensity: "moderada" }, { name: "Fortalecimento", guidance: "Continue enquanto sentir conforto", intensity: "moderada" }, { name: "Alongamento", guidance: "Finalize com calma", intensity: "leve" }, ], tips: ["Faca no seu ritmo. Se doer, pare.", "Mantenha a atencao nas sensacoes do corpo", "Cuidar do corpo tambem e saber respeitar"], }, ok: { title: "Movimento Possivel - Moderado", subtitle: "Vamos com calma hoje", icon: AlertTriangle, token: "chart-4", exercises: [ { name: "Aquecimento Gentil", guidance: "10 min de movimento leve", intensity: "leve" }, { name: "Exercicio Adaptado", guidance: "Metade da intensidade normal", intensity: "leve" }, { name: "Mobilidade", guidance: "Foque em movimentos suaves", intensity: "leve" }, { name: "Alongamento", guidance: "Dedique mais tempo aqui", intensity: "leve" }, ], tips: ["Se cansar, respire.", "Foque em qualidade, nao quantidade", "Um pequeno movimento hoje e uma vitoria amanha"], }, struggling: { title: "Dia de Cuidar", subtitle: "Hoje nao e dia de forca. E dia de cuidado.", icon: XCircle, token: "chart-5", exercises: [ { name: "Caminhada Leve", guidance: "10-15 min em ritmo confortavel", intensity: "muito leve" }, { name: "Alongamento Suave", guidance: "Sem forcar, so relaxar", intensity: "muito leve" }, { name: "Mobilidade Articular", guidance: "Movimentos gentis e lentos", intensity: "muito leve" }, { name: "Respiracao", guidance: "5 min de respiracao profunda", intensity: "muito leve" }, ], tips: ["Hoje e dia de recuperacao ativa", "E tudo bem.", "Descansar tambem e treinar"], }, } export function AdaptedWorkout({ condition, onStartWorkout, onBack }: AdaptedWorkoutProps) { const plan = workoutPlans[condition.overallFeeling] const Icon = plan.icon return (

Seu Treino de Hoje

Adaptado especialmente para voce

{plan.title}

{plan.subtitle}

Recomendacoes para hoje {plan.tips.map((tip, index) => (

{tip}

))}

Exercicios Adaptados

{plan.exercises.map((exercise, index) => (

{index + 1}

{exercise.name}

{exercise.guidance}

{exercise.intensity}

))}

) } [V0_FILE]typescriptreact:file="components/daily-assessment.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { ArrowLeft, AlertCircle, Zap, Smile, Frown, Meh } from "lucide-react" import { MotivationalVoice } from "./motivational-voice" interface DailyAssessmentProps { onComplete: (assessment: DailyCondition) => void onCancel: () => void } export interface DailyCondition { legs: "good" | "tired" | "pain" energy: "high" | "medium" | "low" stiffness: "none" | "some" | "lot" overallFeeling: "great" | "ok" | "struggling" } export function DailyAssessment({ onComplete, onCancel }: DailyAssessmentProps) { const [step, setStep] = useState(0) const [assessment, setAssessment] = useState>({}) const questions = [ { id: "legs", question: "Como estao suas pernas hoje?", icon: "legs", options: [ { value: "good", label: "Sem dor", icon: Smile, token: "chart-1" }, { value: "tired", label: "Cansadas", icon: Meh, token: "chart-4" }, { value: "pain", label: "Com dor", icon: Frown, token: "chart-5" }, ], }, { id: "energy", question: "Como esta sua energia?", icon: "energy", options: [ { value: "high", label: "Cheio de energia", icon: Zap, token: "chart-1" }, { value: "medium", label: "Energia moderada", icon: Meh, token: "chart-4" }, { value: "low", label: "Cansado", icon: Frown, token: "chart-5" }, ], }, { id: "stiffness", question: "Sente rigidez no corpo?", icon: "stiffness", options: [ { value: "none", label: "Nenhuma", icon: Smile, token: "chart-1" }, { value: "some", label: "Um pouco", icon: Meh, token: "chart-4" }, { value: "lot", label: "Muita", icon: Frown, token: "chart-5" }, ], }, ] const currentQuestion = questions[step] const handleSelect = (value: string) => { const newAssessment = { ...assessment, [currentQuestion.id]: value } setAssessment(newAssessment) if (step < questions.length - 1) { setStep(step + 1) } else { const overallFeeling = calculateOverallFeeling(newAssessment) onComplete({ ...newAssessment, overallFeeling } as DailyCondition) } } const calculateOverallFeeling = (data: Partial): "great" | "ok" | "struggling" => { let score = 0 if (data.legs === "good") score += 2 if (data.legs === "tired") score += 1 if (data.energy === "high") score += 2 if (data.energy === "medium") score += 1 if (data.stiffness === "none") score += 2 if (data.stiffness === "some") score += 1 if (score >= 5) return "great" if (score >= 3) return "ok" return "struggling" } return (

Como Meu Corpo Esta Hoje

Antes de tudo, queremos saber como voce esta

{step === 0 && } {/* Progress */}

{questions.map((_, index) => (

))}

{/* Question Card */} {currentQuestion.question} {currentQuestion.options.map((option) => { const Icon = option.icon return ( ) })} {/* Info Card */}

Nao existe certo ou errado

Existe o que voce consegue. Responder com sinceridade ajuda a criar o treino perfeito para voce hoje.

) } [V0_FILE]typescriptreact:file="components/my-journey.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { ArrowLeft, BookOpen, Calendar, Smile, Meh, Frown } from "lucide-react" import type { Workout } from "@/app/page" interface MyJourneyProps { workouts: Workout[] onBack: () => void } interface JournalEntry { id: string date: string feeling: "good" | "moderate" | "tired" text: string } export function MyJourney({ workouts, onBack }: MyJourneyProps) { const [entries, setEntries] = useState(() => { const saved = localStorage.getItem("journal") return saved ? JSON.parse(saved) : [] }) const [currentEntry, setCurrentEntry] = useState("") const saveEntry = () => { if (!currentEntry.trim()) return const todaysWorkout = workouts[0] const newEntry: JournalEntry = { id: Date.now().toString(), date: new Date().toISOString(), feeling: todaysWorkout?.feeling || "moderate", text: currentEntry, } const updated = [newEntry, ...entries] setEntries(updated) localStorage.setItem("journal", JSON.stringify(updated)) setCurrentEntry("") } const getFeelingIcon = (feeling: string) => { switch (feeling) { case "good": return case "tired": return default: return } } return (

Minha Caminhada

Diário de evolução física e emocional

Aqui você não precisa provar nada. Esse espaço é só seu.

Como foi hoje?

setCurrentEntry(e.target.value)}
            placeholder="Escreva sobre seu dia, como se sentiu, o que conseguiu fazer..."
            className="min-h-32 bg-slate-900/50 border-slate-600 text-white placeholder:text-slate-500"
          />
          <Button onClick={saveEntry} className="w-full bg-purple-500 hover:bg-purple-600">
            Salvar Anotação
          </Button>
        </CardContent>
      </Card>

<div className="space-y-3">
        <h3 className="text-xl font-bold text-white">Suas Anotações</h3>
        {entries.length === 0 ? (
          <Card className="bg-slate-800/30 border-slate-700">
            <CardContent className="p-8 text-center">
              <p className="text-slate-400">Ainda não há anotações. Comece escrevendo acima.</p>
            </CardContent>
          </Card>
        ) : (
          entries.map((entry) => (
            <Card key={entry.id} className="bg-slate-800/50 border-slate-700 backdrop-blur">
              <CardContent className="p-4">
                <div className="flex items-center gap-3 mb-2">
                  {getFeelingIcon(entry.feeling)}
                  <div className="flex items-center gap-2 text-sm text-slate-400">
                    <Calendar size={14} />
                    {new Date(entry.date).toLocaleDateString("pt-BR", {
                      day: "2-digit",
                      month: "short",
                      year: "numeric",
                    })}
                  </div>
                </div>
                <p className="text-slate-300 whitespace-pre-wrap">{entry.text}</p>
              </CardContent>
            </Card>
          ))
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/everyday-exercises.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, Sofa, Bed, Coffee, Home } from "lucide-react"

interface EverydayExercisesProps {
  onBack: () => void
}

const exercises = [
  {
    category: "No Sofá",
    icon: Sofa,
    color: "blue",
    exercises: [
      {
        name: "Elevação de pernas sentado",
        description: "Sentado no sofá, levante uma perna de cada vez, mantenha 5 segundos",
        guidance: "Faça até sentir o músculo trabalhar levemente",
      },
      {
        name: "Rotação de tornozelos",
        description: "Gire os tornozelos enquanto assiste TV",
        guidance: "10 círculos para cada lado, sem pressa",
      },
      {
        name: "Alongamento de braços",
        description: "Estique os braços acima da cabeça durante os comerciais",
        guidance: "Respire fundo e relaxe",
      },
    ],
  },
  {
    category: "Na Cama",
    icon: Bed,
    color: "purple",
    exercises: [
      {
        name: "Alongamento matinal",
        description: "Antes de levantar, estique braços e pernas na cama",
        guidance: "5 minutos de movimento suave",
      },
      {
        name: "Ponte deitado",
        description: "De barriga para cima, levante o quadril devagar",
        guidance: "Faça 5-10 repetições, ou menos se preferir",
      },
      {
        name: "Joelhos ao peito",
        description: "Puxe os joelhos em direção ao peito, um de cada vez",
        guidance: "Segure por 10 segundos cada",
      },
    ],
  },
  {
    category: "Na Cadeira",
    icon: Coffee,
    color: "emerald",
    exercises: [
      {
        name: "Sentar e levantar",
        description: "Levante da cadeira sem usar as mãos (se conseguir)",
        guidance: "Faça quantas vezes se sentir confortável",
      },
      {
        name: "Marcha sentada",
        description: "Sentado, levante os joelhos alternadamente como se marchasse",
        guidance: "1-2 minutos no seu ritmo",
      },
      {
        name: "Rotação de ombros",
        description: "Faça círculos com os ombros para frente e para trás",
        guidance: "10 repetições para cada direção",
      },
    ],
  },
  {
    category: "Pela Casa",
    icon: Home,
    color: "yellow",
    exercises: [
      {
        name: "Caminhada pelos cômodos",
        description: "Faça pequenas caminhadas entre os cômodos",
        guidance: "5-10 minutos ao longo do dia",
      },
      {
        name: "Subir degraus",
        description: "Se tiver escadas, suba devagar algumas vezes",
        guidance: "No seu ritmo, segurando no corrimão",
      },
      {
        name: "Alongamento na pia",
        description: "Apoie as mãos na pia e empurre levemente para alongar",
        guidance: "Segure por 15-20 segundos",
      },
    ],
  },
]

export function EverydayExercises({ onBack }: EverydayExercisesProps) {
  const getColorClasses = (color: string) => {
    switch (color) {
      case "blue":
        return "from-blue-500/20 to-blue-600/20 border-blue-500/50"
      case "purple":
        return "from-purple-500/20 to-purple-600/20 border-purple-500/50"
      case "emerald":
        return "from-emerald-500/20 to-emerald-600/20 border-emerald-500/50"
      case "yellow":
        return "from-yellow-500/20 to-yellow-600/20 border-yellow-500/50"
      default:
        return "from-slate-500/20 to-slate-600/20 border-slate-500/50"
    }
  }

return (
    <div className="space-y-6">
      <div className="flex items-center gap-4 mb-6">
        <Button onClick={onBack} variant="ghost" size="icon" className="text-slate-400 hover:text-white">
          <ArrowLeft size={24} />
        </Button>
        <div>
          <h2 className="text-3xl font-bold text-white">Treinar Sem Perceber</h2>
          <p className="text-slate-400">Exercícios simples do dia a dia</p>
        </div>
      </div>

<Card className="bg-gradient-to-r from-emerald-500/10 to-blue-500/10 border-emerald-500/30 backdrop-blur">
        <CardContent className="p-4">
          <p className="text-slate-300 text-center">
            Movimento não precisa ser formal. Incorpore exercícios na sua rotina, no sofá, na cama ou pela casa.
          </p>
        </CardContent>
      </Card>

{exercises.map((category, idx) => {
        const Icon = category.icon
        return (
          <div key={idx} className="space-y-3">
            <Card className={`bg-gradient-to-br ${getColorClasses(category.color)} border-2 backdrop-blur`}>
              <CardHeader>
                <CardTitle className="text-white flex items-center gap-3">
                  <Icon size={28} />
                  {category.category}
                </CardTitle>
              </CardHeader>
            </Card>

{category.exercises.map((exercise, exerciseIdx) => (
              <Card key={exerciseIdx} className="bg-slate-800/50 border-slate-700 backdrop-blur">
                <CardContent className="p-4">
                  <h4 className="text-lg font-semibold text-white mb-2">{exercise.name}</h4>
                  <p className="text-slate-300 mb-2">{exercise.description}</p>
                  <Badge variant="outline" className="bg-emerald-500/20 text-emerald-400 border-emerald-500/30">
                    {exercise.guidance}
                  </Badge>
                </CardContent>
              </Card>
            ))}
          </div>
        )
      })}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/real-achievements.tsx" isMerged="true"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, Award, CheckCircle, TrendingUp, Heart } from "lucide-react"
import type { Workout } from "@/app/page"

interface RealAchievementsProps {
  workouts: Workout[]
  onBack: () => void
}

export function RealAchievements({ workouts, onBack }: RealAchievementsProps) {
  const totalWorkouts = workouts.length
  const thisWeekWorkouts = workouts.filter((w) => {
    const now = new Date()
    const weekStart = new Date(now)
    weekStart.setDate(now.getDate() - now.getDay())
    weekStart.setHours(0, 0, 0, 0)
    return new Date(w.date) >= weekStart
  }).length

const achievements = [
    {
      title: "Primeiro Passo",
      description: "Você começou. Isso já é uma vitória.",
      unlocked: totalWorkouts >= 1,
      icon: CheckCircle,
      color: "emerald",
    },
    {
      title: "Escutando o Corpo",
      description: "Completou treinos respeitando seus limites",
      unlocked: totalWorkouts >= 3,
      icon: Heart,
      color: "pink",
    },
    {
      title: "Semana Consistente",
      description: "Treinou 3 vezes esta semana",
      unlocked: thisWeekWorkouts >= 3,
      icon: TrendingUp,
      color: "blue",
    },
    {
      title: "Jornada de 10",
      description: "10 treinos completados no seu ritmo",
      unlocked: totalWorkouts >= 10,
      icon: Award,
      color: "yellow",
    },
    {
      title: "Mês de Dedicação",
      description: "30 treinos de autocuidado",
      unlocked: totalWorkouts >= 30,
      icon: Award,
      color: "purple",
    },
  ]

const realGoals = [
    { text: "Subir escadas sem se cansar tanto", progress: Math.min((totalWorkouts / 10) * 100, 100) },
    { text: "Brincar com netos/filhos por mais tempo", progress: Math.min((totalWorkouts / 15) * 100, 100) },
    { text: "Fazer compras sem dor", progress: Math.min((totalWorkouts / 20) * 100, 100) },
    { text: "Dormir melhor", progress: Math.min((totalWorkouts / 5) * 100, 100) },
  ]

const getColorClasses = (color: string) => {
    switch (color) {
      case "emerald":
        return "bg-emerald-500/20 text-emerald-400 border-emerald-500/30"
      case "pink":
        return "bg-pink-500/20 text-pink-400 border-pink-500/30"
      case "blue":
        return "bg-blue-500/20 text-blue-400 border-blue-500/30"
      case "yellow":
        return "bg-yellow-500/20 text-yellow-400 border-yellow-500/30"
      case "purple":
        return "bg-purple-500/20 text-purple-400 border-purple-500/30"
      default:
        return "bg-slate-500/20 text-slate-400 border-slate-500/30"
    }
  }

return (
    <div className="space-y-6">
      <div className="flex items-center gap-4 mb-6">
        <Button onClick={onBack} variant="ghost" size="icon" className="text-slate-400 hover:text-white">
          <ArrowLeft size={24} />
        </Button>
        <div>
          <h2 className="text-3xl font-bold text-white">Conquistas da Vida Real</h2>
          <p className="text-slate-400">Nada de corpo perfeito. Conquistas que importam.</p>
        </div>
      </div>

<Card className="bg-gradient-to-r from-purple-500/10 to-pink-500/10 border-purple-500/30 backdrop-blur">
        <CardContent className="p-4">
          <p className="text-slate-300 text-center">
            Seu progresso não é sobre números. É sobre viver melhor, um dia de cada vez.
          </p>
        </CardContent>
      </Card>

<div className="space-y-3">
        <h3 className="text-xl font-bold text-white">Suas Conquistas</h3>
        {achievements.map((achievement, idx) => {
          const Icon = achievement.icon
          return (
            <Card
              key={idx}
              className={`${achievement.unlocked ? "bg-slate-800/50 border-slate-700" : "bg-slate-900/30 border-slate-800 opacity-60"} backdrop-blur`}
            >
              <CardContent className="p-4 flex items-center gap-4">
                <div
                  className={`w-12 h-12 rounded-full ${achievement.unlocked ? getColorClasses(achievement.color) : "bg-slate-800 text-slate-600"} flex items-center justify-center`}
                >
                  <Icon size={24} />
                </div>
                <div className="flex-1">
                  <h4 className={`font-semibold ${achievement.unlocked ? "text-white" : "text-slate-500"}`}>
                    {achievement.title}
                  </h4>
                  <p className="text-sm text-slate-400">{achievement.description}</p>
                </div>
                {achievement.unlocked && (
                  <Badge variant="outline" className="bg-emerald-500/20 text-emerald-400 border-emerald-500/30">
                    Conquistado
                  </Badge>
                )}
              </CardContent>
            </Card>
          )
        })}
      </div>

<div className="space-y-3">
        <h3 className="text-xl font-bold text-white">Objetivos da Vida Real</h3>
        {realGoals.map((goal, idx) => (
          <Card key={idx} className="bg-slate-800/50 border-slate-700 backdrop-blur">
            <CardContent className="p-4">
              <div className="flex items-center justify-between mb-2">
                <p className="text-white">{goal.text}</p>
                <span className="text-sm text-emerald-400 font-semibold">{Math.round(goal.progress)}%</span>
              </div>
              <div className="w-full bg-slate-700 rounded-full h-2">
                <div
                  className="bg-gradient-to-r from-emerald-500 to-blue-500 h-2 rounded-full transition-all"
                  style={{ width: `${goal.progress}%` }}
                />
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/welcome-message.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Heart, CheckCircle } from "lucide-react"

interface WelcomeMessageProps {
  onClose: () => void
}

export function WelcomeMessage({ onClose }: WelcomeMessageProps) {
  const features = [
    { text: "Lembrar de beber mais agua ao longo do dia", color: "text-chart-3" },
    { text: "Dormir melhor, acompanhando o tempo ideal de sono", color: "text-accent" },
    { text: "Registrar o tempo de caminhada diaria", color: "text-chart-1" },
    { text: "Controlar as calorias dos alimentos", color: "text-chart-4" },
    { text: "Saber quanto comer para manter a dieta", color: "text-chart-4" },
    { text: "Manter o foco na academia e nos seus objetivos", color: "text-chart-5" },
  ]

return (
    <div className="min-h-screen bg-background flex items-center justify-center p-4">
      <Card className="max-w-2xl w-full bg-card border-border">
        <CardHeader className="text-center">
          <div className="flex justify-center mb-4">
            <div className="w-20 h-20 rounded-2xl bg-primary/15 flex items-center justify-center">
              <Heart className="text-primary" size={40} />
            </div>
          </div>
          <CardTitle className="text-3xl text-foreground mb-2 text-balance">Ola, pessoal!</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <p className="text-muted-foreground text-base leading-relaxed">
            Esse aplicativo foi criado com muito carinho e com o objetivo de ajudar voce a cuidar melhor da sua saude e
            da sua rotina, mesmo quando nem sempre e facil ter acompanhamento profissional.
          </p>

<div className="bg-secondary/50 p-4 rounded-xl border border-border">
            <p className="font-semibold text-primary mb-2">Queremos ouvir voce!</p>
            <p className="text-muted-foreground text-sm leading-relaxed">
              Criamos uma aba de sugestoes, onde voce podera escrever o que acha que pode melhorar no aplicativo e o que
              gostaria de ver aqui dentro. Sua opiniao e muito importante para que o app evolua junto com voce.
            </p>
          </div>

<div>
            <p className="font-semibold text-foreground mb-3">Alem dos treinos, o app vai te ajudar a:</p>
            <div className="space-y-2.5">
              {features.map((feature) => (
                <div key={feature.text} className="flex items-start gap-3">
                  <CheckCircle className={`${feature.color} mt-0.5 shrink-0`} size={18} />
                  <p className="text-muted-foreground text-sm">{feature.text}</p>
                </div>
              ))}
            </div>
          </div>

<Button onClick={onClose} size="lg" className="w-full bg-primary hover:bg-primary/90 text-primary-foreground py-6 font-semibold">
            <Heart className="mr-2" size={20} />
            Vamos Comecar!
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/walk-tracker.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Footprints, TrendingUp, Plus } from "lucide-react"
import { ActivityTracker } from "@/lib/activity-tracker"
import { QuickCheckButton } from "@/components/quick-check-button"

interface WalkEntry { date: string; minutes: number; distance?: number }

export function WalkTracker() {
  const [minutes, setMinutes] = useState("")
  const [distance, setDistance] = useState("")
  const [walkHistory, setWalkHistory] = useState<WalkEntry[]>([])

useEffect(() => {
    const saved = localStorage.getItem("walkData")
    if (saved) setWalkHistory(JSON.parse(saved))
    ActivityTracker.trackActivity("walk", true)
  }, [])

useEffect(() => { localStorage.setItem("walkData", JSON.stringify(walkHistory)) }, [walkHistory])

const addWalkEntry = () => {
    if (!minutes || Number.parseInt(minutes) <= 0) return
    setWalkHistory([{ date: new Date().toLocaleDateString(), minutes: Number.parseInt(minutes), distance: distance ? Number.parseFloat(distance) : undefined }, ...walkHistory])
    setMinutes(""); setDistance("")
    ActivityTracker.trackActivity("walk", true)
  }

const totalMinutes = walkHistory.reduce((sum, e) => sum + e.minutes, 0)
  const totalDistance = walkHistory.reduce((sum, e) => sum + (e.distance || 0), 0)

return (
    <div className="space-y-5">
      <Card className="bg-chart-1/5 border-chart-1/15">
        <CardHeader>
          <CardTitle className="text-2xl text-foreground flex items-center gap-3">
            <Footprints className="text-chart-1" size={28} />
            Caminhadas
          </CardTitle>
          <p className="text-muted-foreground text-sm mt-1">Registre suas caminhadas diarias para uma vida mais ativa</p>
        </CardHeader>
        <CardContent className="space-y-5">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <Label htmlFor="minutes" className="text-foreground mb-2 block text-sm">Tempo (minutos)</Label>
              <Input id="minutes" type="number" min="1" value={minutes} onChange={(e) => setMinutes(e.target.value)} placeholder="Ex: 30" className="bg-secondary/30 border-border text-foreground" />
            </div>
            <div>
              <Label htmlFor="distance" className="text-foreground mb-2 block text-sm">Distancia (km) - opcional</Label>
              <Input id="distance" type="number" step="0.1" min="0" value={distance} onChange={(e) => setDistance(e.target.value)} placeholder="Ex: 2.5" className="bg-secondary/30 border-border text-foreground" />
            </div>
          </div>

<Button onClick={addWalkEntry} size="lg" className="w-full bg-chart-1 hover:bg-chart-1/90 text-primary-foreground">
            <Plus className="mr-2" size={18} /> Registrar Caminhada
          </Button>

<div className="grid grid-cols-2 gap-3">
            <div className="bg-secondary/30 rounded-xl p-4 text-center">
              <p className="text-muted-foreground text-xs mb-1">Total de Minutos</p>
              <p className="text-3xl font-bold text-chart-1">{totalMinutes}</p>
            </div>
            <div className="bg-secondary/30 rounded-xl p-4 text-center">
              <p className="text-muted-foreground text-xs mb-1">Total de KM</p>
              <p className="text-3xl font-bold text-chart-1">{totalDistance.toFixed(1)}</p>
            </div>
          </div>
        </CardContent>
      </Card>

<Card className="bg-card border-border">
        <CardHeader>
          <CardTitle className="text-foreground flex items-center gap-2 text-base">
            <TrendingUp className="text-chart-1" size={18} />
            Historico de Caminhadas
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-2">
            {walkHistory.slice(0, 10).map((entry, index) => (
              <div key={index} className="flex items-center justify-between p-3 bg-secondary/30 rounded-xl">
                <span className="text-muted-foreground text-sm">{entry.date}</span>
                <div className="flex items-center gap-3">
                  <span className="text-foreground font-semibold text-sm">{entry.minutes} min</span>
                  {entry.distance && <span className="text-chart-1 font-semibold text-sm">{entry.distance} km</span>}
                </div>
              </div>
            ))}
            {walkHistory.length === 0 && <p className="text-muted-foreground text-center py-4 text-sm">Comece a registrar suas caminhadas hoje!</p>}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/portion-guide.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Hand, Apple, Wheat, Droplet } from "lucide-react"

export function PortionGuide() {
  const portions = [
    {
      icon: <Hand className="text-red-400" size={32} />,
      title: "Proteínas",
      description: "Tamanho da palma da mão",
      examples: "Carne, frango, peixe",
      color: "from-red-500/20 to-orange-500/20 border-red-500/30",
    },
    {
      icon: <Apple className="text-green-400" size={32} />,
      title: "Vegetais",
      description: "Duas mãos em concha",
      examples: "Folhas, legumes, saladas",
      color: "from-green-500/20 to-emerald-500/20 border-green-500/30",
    },
    {
      icon: <Wheat className="text-yellow-400" size={32} />,
      title: "Carboidratos",
      description: "Uma mão fechada",
      examples: "Arroz, massa, batata, pão",
      color: "from-yellow-500/20 to-orange-500/20 border-yellow-500/30",
    },
    {
      icon: <Droplet className="text-blue-400" size={32} />,
      title: "Gorduras Boas",
      description: "Tamanho do polegar",
      examples: "Azeite, abacate, castanhas",
      color: "from-blue-500/20 to-cyan-500/20 border-blue-500/30",
    },
  ]

return (
    <div className="space-y-6">
      <Card className="bg-gradient-to-br from-yellow-500/20 to-orange-500/20 border-yellow-500/30 backdrop-blur">
        <CardHeader>
          <CardTitle className="text-3xl text-white flex items-center gap-3">
            <Hand className="text-yellow-400" size={32} />
            Guia de Porções
          </CardTitle>
          <p className="text-slate-300 mt-2">Use suas mãos como medida para controlar as porções</p>
        </CardHeader>
        <CardContent>
          <div className="bg-slate-900/50 rounded-lg p-4 mb-6">
            <p className="text-slate-300 leading-relaxed">
              Não precisa de balança! Use suas próprias mãos como referência para medir as porções de cada grupo
              alimentar. É prático, funciona em qualquer lugar e é personalizado para você.
            </p>
          </div>
        </CardContent>
      </Card>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {portions.map((portion, index) => (
          <Card key={index} className={`bg-gradient-to-br ${portion.color} backdrop-blur`}>
            <CardHeader>
              <div className="flex items-center gap-3">
                {portion.icon}
                <CardTitle className="text-xl text-white">{portion.title}</CardTitle>
              </div>
            </CardHeader>
            <CardContent className="space-y-3">
              <div className="bg-slate-900/50 rounded-lg p-4">
                <p className="text-white font-semibold text-lg mb-2">{portion.description}</p>
                <p className="text-slate-300 text-sm">{portion.examples}</p>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

<Card className="bg-slate-800/50 border-slate-700 backdrop-blur">
        <CardHeader>
          <CardTitle className="text-white">Dicas Importantes</CardTitle>
        </CardHeader>
        <CardContent className="space-y-3 text-slate-300">
          <div className="flex items-start gap-2">
            <span className="text-emerald-400 font-bold mt-1">✓</span>
            <p>Monte um prato colorido com metade de vegetais</p>
          </div>
          <div className="flex items-start gap-2">
            <span className="text-emerald-400 font-bold mt-1">✓</span>
            <p>Coma devagar e mastigue bem os alimentos</p>
          </div>
          <div className="flex items-start gap-2">
            <span className="text-emerald-400 font-bold mt-1">✓</span>
            <p>Beba água antes e durante as refeições</p>
          </div>
          <div className="flex items-start gap-2">
            <span className="text-emerald-400 font-bold mt-1">✓</span>
            <p>Respeite sua saciedade - não precisa limpar o prato</p>
          </div>
          <div className="flex items-start gap-2">
            <span className="text-emerald-400 font-bold mt-1">✓</span>
            <p>Faça refeições regulares a cada 3-4 horas</p>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/suggestions.tsx" isMerged="true"
"use client"

interface Suggestion {
  id: string
  text: string
  date: string
}

export function Suggestions() {
  const [suggestionText, setSuggestionText] = useState("")
  const [suggestions, setSuggestions] = useState<Suggestion[]>([])
  const [showThankYou, setShowThankYou] = useState(false)

useEffect(() => {
    const saved = localStorage.getItem("suggestions")
    if (saved) {
      setSuggestions(JSON.parse(saved))
    }
  }, [])

useEffect(() => {
    localStorage.setItem("suggestions", JSON.stringify(suggestions))
  }, [suggestions])

const submitSuggestion = () => {
    if (!suggestionText.trim()) return

const suggestion: Suggestion = {
      id: Date.now().toString(),
      text: suggestionText,
      date: new Date().toLocaleDateString(),
    }

setSuggestions([suggestion, ...suggestions])
    setSuggestionText("")
    setShowThankYou(true)
    setTimeout(() => setShowThankYou(false), 3000)
  }

return (
    <div className="space-y-6">
      <Card className="bg-gradient-to-br from-pink-500/20 to-purple-500/20 border-pink-500/30 backdrop-blur">
        <CardHeader>
          <CardTitle className="text-3xl text-white flex items-center gap-3">
            <MessageSquare className="text-pink-400" size={32} />
            Suas Sugestões
          </CardTitle>
          <p className="text-slate-300 mt-2">Ajude o app a evoluir com suas ideias e feedback</p>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="bg-slate-900/50 rounded-lg p-4">
            <p className="text-slate-300 leading-relaxed mb-3">
              Sua opinião é muito importante! Compartilhe suas ideias sobre o que poderia melhorar, novas
              funcionalidades que gostaria de ver, ou qualquer feedback que possa nos ajudar a tornar o app ainda melhor
              para você.
            </p>
            <div className="flex items-center gap-2 text-emerald-400">
              <Heart size={16} />
              <p className="text-sm font-semibold">Queremos ouvir você!</p>
            </div>
          </div>

<div className="space-y-4">
            <Textarea
              value={suggestionText}
              onChange={(e) => setSuggestionText(e.target.value)}
              placeholder="Digite sua sugestão aqui... O que você gostaria de ver no app? O que poderia melhorar?"
              className="bg-slate-800 border-slate-600 text-white min-h-[150px]"
            />

<Button onClick={submitSuggestion} size="lg" className="w-full bg-pink-500 hover:bg-pink-600">
              <Send className="mr-2" size={20} />
              Enviar Sugestão
            </Button>
          </div>

{showThankYou && (
            <div className="bg-emerald-500/20 border border-emerald-500/30 rounded-lg p-4 text-center animate-in fade-in slide-in-from-bottom-4">
              <Heart className="text-emerald-400 mx-auto mb-2" size={32} />
              <p className="text-emerald-400 font-semibold">Obrigado pelo seu feedback!</p>
              <p className="text-slate-300 text-sm mt-1">Sua sugestão foi salva com sucesso</p>
            </div>
          )}
        </CardContent>
      </Card>

{suggestions.length > 0 && (
        <Card className="bg-slate-800/50 border-slate-700 backdrop-blur">
          <CardHeader>
            <CardTitle className="text-white">Suas Sugestões Anteriores</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            {suggestions.map((suggestion) => (
              <div key={suggestion.id} className="bg-slate-900/50 rounded-lg p-4">
                <p className="text-slate-300 mb-2">{suggestion.text}</p>
                <p className="text-slate-500 text-xs">{suggestion.date}</p>
              </div>
            ))}
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/sleep-tracker.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Moon, Sun, TrendingUp, Clock } from "lucide-react"
import { ActivityTracker } from "@/lib/activity-tracker"
import { QuickCheckButton } from "@/components/quick-check-button"

interface SleepEntry { date: string; hours: number; quality: "good" | "medium" | "poor" }

export function SleepTracker() {
  const [sleepHours, setSleepHours] = useState("")
  const [sleepQuality, setSleepQuality] = useState<"good" | "medium" | "poor">("good")
  const [sleepHistory, setSleepHistory] = useState<SleepEntry[]>([])

useEffect(() => {
    const saved = localStorage.getItem("sleepData")
    if (saved) setSleepHistory(JSON.parse(saved))
    ActivityTracker.trackActivity("sleep", true)
  }, [])

useEffect(() => { localStorage.setItem("sleepData", JSON.stringify(sleepHistory)) }, [sleepHistory])

const addSleepEntry = () => {
    if (!sleepHours || Number.parseFloat(sleepHours) <= 0) return
    const entry: SleepEntry = { date: new Date().toLocaleDateString(), hours: Number.parseFloat(sleepHours), quality: sleepQuality }
    setSleepHistory([entry, ...sleepHistory])
    setSleepHours("")
    setSleepQuality("good")
    ActivityTracker.trackActivity("sleep", true)
  }

const quickRegisterSleep = (quality: "good" | "medium" | "poor") => {
    setSleepHistory([{ date: new Date().toLocaleDateString(), hours: 0, quality }, ...sleepHistory])
    ActivityTracker.trackActivity("sleep", true)
  }

const averageHours = sleepHistory.length
    ? (sleepHistory.filter((e) => e.hours > 0).reduce((sum, e) => sum + e.hours, 0) / (sleepHistory.filter((e) => e.hours > 0).length || 1)).toFixed(1)
    : "0"

const getQualityStyle = (quality: string) => {
    switch (quality) {
      case "good": return "text-chart-1 bg-chart-1/15"
      case "medium": return "text-chart-4 bg-chart-4/15"
      case "poor": return "text-chart-5 bg-chart-5/15"
      default: return "text-muted-foreground bg-secondary"
    }
  }

const getQualityLabel = (quality: string) => {
    switch (quality) { case "good": return "Boa"; case "medium": return "Regular"; case "poor": return "Ruim"; default: return "" }
  }

return (
    <div className="space-y-5">
      <Card className="bg-secondary/30 border-border">
        <CardContent className="py-4">
          <p className="text-muted-foreground text-center text-sm">
            <span className="text-foreground font-medium">Dormir mal nao e fracasso.</span><br />E informacao.
          </p>
        </CardContent>
      </Card>

<Card className="bg-accent/5 border-accent/15">
        <CardHeader>
          <CardTitle className="text-2xl text-foreground flex items-center gap-3">
            <Moon className="text-accent" size={28} />
            Controle de Sono
          </CardTitle>
          <p className="text-muted-foreground text-sm mt-1">Durma bem para ter mais energia e disposicao</p>
        </CardHeader>
        <CardContent className="space-y-5">
          <QuickCheckButton activityType="sleep" label="Registrei meu sono" />

<div className="bg-secondary/30 rounded-xl p-4">
            <p className="text-foreground text-center text-sm mb-3">Como voce dormiu ontem?</p>
            <div className="grid grid-cols-3 gap-2">
              <Button onClick={() => quickRegisterSleep("good")} className="bg-chart-1 hover:bg-chart-1/90 text-primary-foreground">Bem</Button>
              <Button onClick={() => quickRegisterSleep("medium")} className="bg-chart-4 hover:bg-chart-4/90 text-primary-foreground">Regular</Button>
              <Button onClick={() => quickRegisterSleep("poor")} className="bg-chart-5 hover:bg-chart-5/90 text-primary-foreground">Mal</Button>
            </div>
          </div>

<div className="relative">
            <div className="absolute inset-0 flex items-center"><span className="w-full border-t border-border" /></div>
            <div className="relative flex justify-center text-xs uppercase"><span className="bg-card px-2 text-muted-foreground">ou registre com detalhes</span></div>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
            <div>
              <Label htmlFor="hours" className="text-foreground mb-2 block text-sm">Horas dormidas</Label>
              <Input id="hours" type="number" step="0.5" min="0" max="24" value={sleepHours} onChange={(e) => setSleepHours(e.target.value)} placeholder="Ex: 7.5" className="bg-secondary/30 border-border text-foreground" />
            </div>
            <div>
              <Label className="text-foreground mb-2 block text-sm">Qualidade do sono</Label>
              <div className="grid grid-cols-3 gap-2">
                {(["good", "medium", "poor"] as const).map((q) => (
                  <Button key={q} type="button" onClick={() => setSleepQuality(q)} variant={sleepQuality === q ? "default" : "outline"} size="sm"
                    className={sleepQuality === q ? (q === "good" ? "bg-chart-1 text-primary-foreground" : q === "medium" ? "bg-chart-4 text-primary-foreground" : "bg-chart-5 text-primary-foreground") : "border-border hover:bg-secondary"}
                  >{getQualityLabel(q)}</Button>
                ))}
              </div>
            </div>
          </div>

<Button onClick={addSleepEntry} size="lg" className="w-full bg-accent hover:bg-accent/90 text-accent-foreground">
            <Sun className="mr-2" size={18} /> Registrar Sono com Detalhes
          </Button>

<div className="bg-secondary/30 rounded-xl p-4 text-center">
            <div className="flex items-center justify-center gap-2 mb-1">
              <Clock className="text-accent" size={18} />
              <p className="text-muted-foreground text-sm">Media de sono</p>
            </div>
            <p className="text-4xl font-bold text-accent">{averageHours}h</p>
            <p className="text-muted-foreground text-xs mt-1">Ideal: 7-9 horas por noite</p>
          </div>
        </CardContent>
      </Card>

<Card className="bg-card border-border">
        <CardHeader>
          <CardTitle className="text-foreground flex items-center gap-2 text-base">
            <TrendingUp className="text-accent" size={18} />
            Historico de Sono
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-2">
            {sleepHistory.slice(0, 10).map((entry, index) => (
              <div key={index} className="flex items-center justify-between p-3 bg-secondary/30 rounded-xl">
                <span className="text-muted-foreground text-sm">{entry.date}</span>
                <div className="flex items-center gap-3">
                  {entry.hours > 0 && <span className="text-foreground font-semibold text-sm">{entry.hours}h</span>}
                  <span className={`px-2.5 py-1 rounded-full text-xs font-semibold ${getQualityStyle(entry.quality)}`}>{getQualityLabel(entry.quality)}</span>
                </div>
              </div>
            ))}
            {sleepHistory.length === 0 && <p className="text-muted-foreground text-center py-4 text-sm">Registre quando se sentir confortavel</p>}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/quick-check-button.tsx" isMerged="true"
"use client"

import { useState, type ReactNode } from "react"
import { Button } from "@/components/ui/button"
import { Check } from "lucide-react"
import { ActivityTracker } from "@/lib/activity-tracker"

interface QuickCheckButtonProps {
  activityType: "workout" | "water" | "sleep" | "walk" | "calories" | "gym" | "heart"
  label: string
  icon?: ReactNode
  color?: string
}

export function QuickCheckButton({ activityType, label }: QuickCheckButtonProps) {
  const [checked, setChecked] = useState(false)

const handleClick = () => {
    ActivityTracker.trackActivity(activityType, false)
    setChecked(true)

setTimeout(() => {
      setChecked(false)
    }, 2000)
  }

return (
    <Button
      onClick={handleClick}
      size="lg"
      variant="outline"
      className={`w-full transition-all ${
        checked
          ? "bg-primary/15 border-primary text-primary"
          : "bg-secondary/30 border-border hover:bg-secondary/60 text-foreground"
      }`}
    >
      <Check className="mr-2" size={20} />
      {checked ? "Registrado!" : label}
    </Button>
  )
}
[V0_FILE]typescriptreact:file="components/calorie-tracker.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Utensils, Plus, TrendingUp, Check } from "lucide-react"
import { ActivityTracker } from "@/lib/activity-tracker"
import { QuickCheckButton } from "@/components/quick-check-button"

interface CalorieEntry {
  date: string
  meal: string
  calories: number
}

export function CalorieTracker() {
  const [meal, setMeal] = useState("")
  const [calories, setCalories] = useState("")
  const [dailyGoal] = useState(2000)
  const [calorieHistory, setCalorieHistory] = useState<CalorieEntry[]>([])

useEffect(() => {
    const saved = localStorage.getItem("calorieData")
    if (saved) {
      setCalorieHistory(JSON.parse(saved))
    }
    ActivityTracker.trackActivity("calories", true)
  }, [])

useEffect(() => {
    localStorage.setItem("calorieData", JSON.stringify(calorieHistory))
  }, [calorieHistory])

const addCalorieEntry = () => {
    if (!meal || !calories || Number.parseInt(calories) <= 0) return

const entry: CalorieEntry = {
      date: new Date().toLocaleDateString(),
      meal: meal,
      calories: Number.parseInt(calories),
    }

setCalorieHistory([entry, ...calorieHistory])
    setMeal("")
    setCalories("")
    ActivityTracker.trackActivity("calories", true)
  }

const quickMealPresets = [
    { name: "Café simples", calories: 300 },
    { name: "Almoço comum", calories: 600 },
    { name: "Lanche rápido", calories: 200 },
    { name: "Jantar leve", calories: 500 },
  ]

const addQuickMeal = (mealName: string, mealCalories: number) => {
    const entry: CalorieEntry = {
      date: new Date().toLocaleDateString(),
      meal: mealName,
      calories: mealCalories,
    }
    setCalorieHistory([entry, ...calorieHistory])
    ActivityTracker.trackActivity("calories", true)
  }

const registerGeneralDay = () => {
    const entry: CalorieEntry = {
      date: new Date().toLocaleDateString(),
      meal: "Hoje comi o que deu",
      calories: 0,
    }
    setCalorieHistory([entry, ...calorieHistory])
    ActivityTracker.trackActivity("calories", true)
  }

const todayCalories = calorieHistory
    .filter((entry) => entry.date === new Date().toLocaleDateString())
    .reduce((sum, entry) => sum + entry.calories, 0)

const percentage = todayCalories > 0 ? Math.min((todayCalories / dailyGoal) * 100, 100) : 0
  const remaining = Math.max(dailyGoal - todayCalories, 0)

return (
    <div className="space-y-6">
      <Card className="bg-slate-800/50 border-slate-700 backdrop-blur">
        <CardContent className="py-4">
          <p className="text-slate-300 text-center">
            <span className="text-white font-medium">Registrar a intenção e o cuidado,</span>
            <br />
            não só a execução perfeita.
          </p>
        </CardContent>
      </Card>

<Card className="bg-gradient-to-br from-orange-500/20 to-red-500/20 border-orange-500/30 backdrop-blur">
        <CardHeader>
          <CardTitle className="text-3xl text-white flex items-center gap-3">
            <Utensils className="text-orange-400" size={32} />
            Controle de Calorias
          </CardTitle>
          <p className="text-slate-300 mt-2">Acompanhe suas refeições e mantenha o equilíbrio</p>
        </CardHeader>
        <CardContent className="space-y-6">
          <QuickCheckButton activityType="calories" label="Hoje me alimentei" />

<div className="bg-slate-900/50 rounded-lg p-4">
            <p className="text-white text-sm mb-3">Refeições rápidas:</p>
            <div className="grid grid-cols-2 gap-2">
              {quickMealPresets.map((preset) => (
                <Button
                  key={preset.name}
                  onClick={() => addQuickMeal(preset.name, preset.calories)}
                  size="sm"
                  variant="outline"
                  className="bg-slate-800 border-slate-600 hover:bg-slate-700 text-white"
                >
                  {preset.name}
                </Button>
              ))}
            </div>
          </div>

{todayCalories > 0 && (
            <div className="bg-slate-900/50 rounded-lg p-6 text-center">
              <p className="text-slate-400 mb-2">Calorias de hoje</p>
              <div className="text-5xl font-bold text-orange-400 mb-2">{todayCalories}</div>
              <p className="text-slate-300">
                de {dailyGoal} kcal ({Math.round(percentage)}%)
              </p>
              <div className="w-full bg-slate-700 rounded-full h-3 mt-4 overflow-hidden">
                <div
                  className="bg-gradient-to-r from-orange-400 to-red-400 h-full transition-all duration-500 rounded-full"
                  style={{ width: `${percentage}%` }}
                />
              </div>
              <p className="text-slate-400 mt-2 text-sm">Restam {remaining} kcal</p>
            </div>
          )}

<div className="relative">
            <div className="absolute inset-0 flex items-center">
              <span className="w-full border-t border-slate-700" />
            </div>
            <div className="relative flex justify-center text-xs uppercase">
              <span className="bg-slate-900 px-2 text-slate-500">ou registre com detalhes</span>
            </div>
          </div>

<div className="space-y-4">
            <div>
              <Label htmlFor="meal" className="text-white mb-2 block">
                Refeição ou alimento
              </Label>
              <Input
                id="meal"
                type="text"
                value={meal}
                onChange={(e) => setMeal(e.target.value)}
                placeholder="Ex: Almoço, Lanche, Banana"
                className="bg-slate-800 border-slate-600 text-white"
              />
            </div>

<div>
              <Label htmlFor="calories" className="text-white mb-2 block">
                Calorias (kcal)
              </Label>
              <Input
                id="calories"
                type="number"
                min="1"
                value={calories}
                onChange={(e) => setCalories(e.target.value)}
                placeholder="Ex: 450"
                className="bg-slate-800 border-slate-600 text-white"
              />
            </div>
          </div>

<Button onClick={addCalorieEntry} size="lg" className="w-full bg-orange-500 hover:bg-orange-600">
            <Plus className="mr-2" size={20} />
            Adicionar Refeição
          </Button>
        </CardContent>
      </Card>

<Card className="bg-slate-800/50 border-slate-700 backdrop-blur">
        <CardHeader>
          <CardTitle className="text-white flex items-center gap-2">
            <TrendingUp className="text-orange-400" size={20} />
            Refeições de Hoje
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-2">
            {calorieHistory
              .filter((entry) => entry.date === new Date().toLocaleDateString())
              .map((entry, index) => (
                <div key={index} className="flex items-center justify-between p-3 bg-slate-900/50 rounded-lg">
                  <span className="text-slate-300">{entry.meal}</span>
                  {entry.calories > 0 && <span className="text-orange-400 font-semibold">{entry.calories} kcal</span>}
                </div>
              ))}
            {calorieHistory.filter((entry) => entry.date === new Date().toLocaleDateString()).length === 0 && (
              <p className="text-slate-400 text-center py-4">Registre quando puder</p>
            )}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/gym-focus.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Target, Plus, Check, Trash2 } from "lucide-react"
import { ActivityTracker } from "@/lib/activity-tracker"
import { QuickCheckButton } from "@/components/quick-check-button"

interface Goal {
  id: string
  title: string
  description: string
  completed: boolean
  createdAt: string
}

export function GymFocus() {
  const [goals, setGoals] = useState<Goal[]>([])
  const [newGoalTitle, setNewGoalTitle] = useState("")
  const [newGoalDescription, setNewGoalDescription] = useState("")

useEffect(() => {
    const saved = localStorage.getItem("gymGoals")
    if (saved) {
      setGoals(JSON.parse(saved))
    }
    ActivityTracker.trackActivity("gym", true)
  }, [])

useEffect(() => {
    localStorage.setItem("gymGoals", JSON.stringify(goals))
  }, [goals])

const addGoal = () => {
    if (!newGoalTitle.trim()) return

const goal: Goal = {
      id: Date.now().toString(),
      title: newGoalTitle,
      description: newGoalDescription,
      completed: false,
      createdAt: new Date().toISOString(),
    }

setGoals([goal, ...goals])
    setNewGoalTitle("")
    setNewGoalDescription("")
    ActivityTracker.trackActivity("gym", true)
  }

const toggleGoal = (id: string) => {
    setGoals(goals.map((goal) => (goal.id === id ? { ...goal, completed: !goal.completed } : goal)))
    ActivityTracker.trackActivity("gym", true)
  }

const deleteGoal = (id: string) => {
    setGoals(goals.filter((goal) => goal.id !== id))
  }

const activeGoals = goals.filter((g) => !g.completed)
  const completedGoals = goals.filter((g) => g.completed)

return (
    <div className="space-y-6">
      <Card className="bg-slate-800/50 border-slate-700 backdrop-blur">
        <CardContent className="py-4">
          <p className="text-slate-300 text-center">
            <span className="text-white font-medium">Tentar também é avançar.</span>
          </p>
        </CardContent>
      </Card>

<Card className="bg-gradient-to-br from-red-500/20 to-pink-500/20 border-red-500/30 backdrop-blur">
        <CardHeader>
          <CardTitle className="text-3xl text-white flex items-center gap-3">
            <Target className="text-red-400" size={32} />
            Foco na Academia
          </CardTitle>
          <p className="text-slate-300 mt-2">Defina e acompanhe seus objetivos pessoais de treino</p>
        </CardHeader>
        <CardContent className="space-y-6">
          <QuickCheckButton activityType="gym" label="Hoje tentei treinar" />

<div className="space-y-4">
            <div>
              <Label htmlFor="goalTitle" className="text-white mb-2 block">
                Objetivo
              </Label>
              <Input
                id="goalTitle"
                type="text"
                value={newGoalTitle}
                onChange={(e) => setNewGoalTitle(e.target.value)}
                placeholder="Ex: Conseguir fazer 10 flexões"
                className="bg-slate-800 border-slate-600 text-white"
              />
            </div>

<div>
              <Label htmlFor="goalDescription" className="text-white mb-2 block">
                Detalhes (opcional)
              </Label>
              <Textarea
                id="goalDescription"
                value={newGoalDescription}
                onChange={(e) => setNewGoalDescription(e.target.value)}
                placeholder="Ex: Quero melhorar minha força no peitoral..."
                className="bg-slate-800 border-slate-600 text-white min-h-[80px]"
              />
            </div>
          </div>

<Button onClick={addGoal} size="lg" className="w-full bg-red-500 hover:bg-red-600">
            <Plus className="mr-2" size={20} />
            Adicionar Objetivo
          </Button>

<div className="grid grid-cols-2 gap-4">
            <div className="bg-slate-900/50 rounded-lg p-4 text-center">
              <p className="text-slate-400 text-sm mb-1">Em Progresso</p>
              <p className="text-3xl font-bold text-yellow-400">{activeGoals.length}</p>
            </div>
            <div className="bg-slate-900/50 rounded-lg p-4 text-center">
              <p className="text-slate-400 text-sm mb-1">Conquistados</p>
              <p className="text-3xl font-bold text-emerald-400">{completedGoals.length}</p>
            </div>
          </div>
        </CardContent>
      </Card>

{activeGoals.length > 0 && (
        <Card className="bg-slate-800/50 border-slate-700 backdrop-blur">
          <CardHeader>
            <CardTitle className="text-white">Objetivos Ativos</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            {activeGoals.map((goal) => (
              <div key={goal.id} className="bg-slate-900/50 rounded-lg p-4">
                <div className="flex items-start justify-between gap-3 mb-2">
                  <h3 className="text-white font-semibold flex-1">{goal.title}</h3>
                  <div className="flex gap-2">
                    <Button
                      size="sm"
                      onClick={() => toggleGoal(goal.id)}
                      className="bg-emerald-500 hover:bg-emerald-600"
                    >
                      <Check size={16} />
                    </Button>
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => deleteGoal(goal.id)}
                      className="border-slate-600"
                    >
                      <Trash2 size={16} />
                    </Button>
                  </div>
                </div>
                {goal.description && <p className="text-slate-400 text-sm">{goal.description}</p>}
              </div>
            ))}
          </CardContent>
        </Card>
      )}

{completedGoals.length > 0 && (
        <Card className="bg-slate-800/50 border-slate-700 backdrop-blur">
          <CardHeader>
            <CardTitle className="text-white flex items-center gap-2">
              <Check className="text-emerald-400" size={20} />
              Objetivos Conquistados
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            {completedGoals.map((goal) => (
              <div key={goal.id} className="bg-emerald-500/10 border border-emerald-500/30 rounded-lg p-4">
                <div className="flex items-start justify-between gap-3 mb-2">
                  <h3 className="text-emerald-400 font-semibold flex-1 line-through">{goal.title}</h3>
                  <Button size="sm" variant="outline" onClick={() => deleteGoal(goal.id)} className="border-slate-600">
                    <Trash2 size={16} />
                  </Button>
                </div>
                {goal.description && <p className="text-slate-400 text-sm">{goal.description}</p>}
              </div>
            ))}
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/workout-tracker.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { CheckCircle2, X, Timer, Smile, Meh, Frown } from "lucide-react"
import { MotivationalVoice } from "./motivational-voice"
import { ActivityTracker } from "@/lib/activity-tracker"

interface WorkoutTrackerProps {
  onFinish: (feeling: "good" | "moderate" | "tired", duration: number, notes?: string) => void
  onCancel: () => void
}

export function WorkoutTracker({ onFinish, onCancel }: WorkoutTrackerProps) {
  const [feeling, setFeeling] = useState<"good" | "moderate" | "tired" | null>(null)
  const [notes, setNotes] = useState("")
  const [startTime] = useState(Date.now())
  const [elapsedTime, setElapsedTime] = useState(0)

useEffect(() => {
    ActivityTracker.trackActivity("workout", true)
    const interval = setInterval(() => {
      setElapsedTime(Math.floor((Date.now() - startTime) / 1000))
    }, 1000)
    return () => clearInterval(interval)
  }, [startTime])

const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60)
    const secs = seconds % 60
    return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`
  }

const handleFinish = () => {
    if (feeling) {
      ActivityTracker.trackActivity("workout", false)
      onFinish(feeling, elapsedTime, notes)
    }
  }

const feelings = [
    { value: "good" as const, label: "Me sinto bem", icon: Smile, tokenColor: "chart-1", description: "Cansaco leve, poderia continuar" },
    { value: "moderate" as const, label: "Cansado, mas ok", icon: Meh, tokenColor: "chart-4", description: "Cansaco moderado, hora de parar" },
    { value: "tired" as const, label: "Muito cansado", icon: Frown, tokenColor: "chart-5", description: "Preciso descansar" },
  ]

return (
    <div className="flex items-center justify-center min-h-[60vh]">
      <Card className="w-full max-w-2xl bg-card border-border">
        <CardHeader>
          <CardTitle className="text-xl text-foreground flex items-center justify-between">
            <span>Treino em Andamento</span>
            <Button variant="ghost" size="icon" onClick={onCancel} className="text-muted-foreground hover:text-foreground">
              <X size={20} />
            </Button>
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="text-center">
            <div className="flex items-center justify-center gap-2 text-muted-foreground mb-2">
              <Timer size={18} />
              <span className="text-sm font-medium">Tempo de Treino</span>
            </div>
            <div className="text-5xl font-bold text-primary font-mono">{formatTime(elapsedTime)}</div>
          </div>

<div className="bg-secondary/30 rounded-xl p-5 space-y-2.5 border border-border">
            <h3 className="text-sm font-semibold text-foreground text-center uppercase tracking-wider">Lembre-se</h3>
            <ul className="space-y-2 text-muted-foreground text-sm">
              <li className="flex items-start gap-2">
                <span className="text-primary mt-0.5">•</span>
                <span>Faca ate sentir leve cansaco</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-primary mt-0.5">•</span>
                <span>Pare antes da dor</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-primary mt-0.5">•</span>
                <span>Cuidar do corpo tambem e saber respeitar</span>
              </li>
            </ul>
          </div>

<div className="space-y-3">
            <p className="text-muted-foreground font-medium text-center text-sm">Como voce esta se sentindo agora?</p>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
              {feelings.map((item) => {
                const Icon = item.icon
                const isSelected = feeling === item.value
                return (
                  <button
                    key={item.value}
                    onClick={() => setFeeling(item.value)}
                    className={`p-5 rounded-xl border-2 transition-all ${
                      isSelected
                        ? `bg-${item.tokenColor}/15 border-${item.tokenColor}`
                        : "bg-secondary/20 border-border hover:border-muted-foreground/30"
                    }`}
                  >
                    <div className="flex flex-col items-center gap-2">
                      <Icon size={36} className={`text-${item.tokenColor}`} />
                      <div className="text-center">
                        <p className="text-foreground font-semibold text-sm">{item.label}</p>
                        <p className="text-muted-foreground text-xs mt-0.5">{item.description}</p>
                      </div>
                    </div>
                  </button>
                )
              })}
            </div>
          </div>

{feeling && (
            <>
              <div className="space-y-2">
                <label className="text-sm text-muted-foreground">Quer anotar algo sobre o treino? (opcional)</label>
                <Textarea
                  value={notes}
                  onChange={(e) => setNotes(e.target.value)}
                  placeholder="Como foi o treino, o que funcionou, como se sentiu..."
                  className="min-h-24 bg-secondary/30 border-border text-foreground placeholder:text-muted-foreground"
                />
              </div>
              <MotivationalVoice context="post-workout" feeling={feeling} duration={elapsedTime} />
            </>
          )}

<Button
            onClick={handleFinish}
            size="lg"
            className="w-full bg-primary hover:bg-primary/90 text-primary-foreground font-semibold py-6"
            disabled={!feeling}
          >
            <CheckCircle2 className="mr-2" size={20} />
            Finalizar Treino
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/daily-summary.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { CheckCircle2, Heart, Moon } from "lucide-react"
import { ActivityTracker } from "@/lib/activity-tracker"

export function DailySummary() {
  const [message, setMessage] = useState<string>("")
  const [dayType, setDayType] = useState<"active" | "care" | "rest">("rest")

useEffect(() => {
    const updateSummary = () => {
      const todayActivity = ActivityTracker.getTodayActivity()
      const dailyMessage = ActivityTracker.getDailyMessage()

setMessage(dailyMessage)
      setDayType(todayActivity?.type || "rest")
    }

updateSummary()
    const interval = setInterval(updateSummary, 30000)

return () => clearInterval(interval)
  }, [])

if (!message) return null

const config = {
    active: {
      icon: <CheckCircle2 className="text-primary" size={22} />,
      border: "border-primary/20",
      bg: "bg-primary/5",
    },
    care: {
      icon: <Heart className="text-accent" size={22} />,
      border: "border-accent/20",
      bg: "bg-accent/5",
    },
    rest: {
      icon: <Moon className="text-muted-foreground" size={22} />,
      border: "border-border",
      bg: "bg-secondary/30",
    },
  }

const current = config[dayType]

return (
    <Card className={`${current.bg} ${current.border} mb-6`}>
      <CardContent className="py-4">
        <div className="flex items-center gap-3">
          {current.icon}
          <p className="text-foreground text-sm font-medium">{message}</p>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="lib/activity-tracker.ts" isEdit="true" isQuickEdit="true" isMerged="true"
export interface DailyActivity {
  date: string
  activities: {
    workout?: boolean
    water?: boolean
    sleep?: boolean
    walk?: boolean
    calories?: boolean
    gym?: boolean
    heart?: boolean // Added heart tracking
  }
  type: "active" | "care" | "rest"
  autoTracked: boolean
}

export class ActivityTracker {
  private static STORAGE_KEY = "dailyActivities"

static getTodayActivity(): DailyActivity | null {
    const today = new Date().toDateString()
    const activities = this.getAllActivities()
    return activities.find((a) => a.date === today) || null
  }

static getAllActivities(): DailyActivity[] {
    const saved = localStorage.getItem(this.STORAGE_KEY)
    return saved ? JSON.parse(saved) : []
  }

static trackActivity(activityType: keyof DailyActivity["activities"], auto = false) {
    const today = new Date().toDateString()
    const activities = this.getAllActivities()
    const existingIndex = activities.findIndex((a) => a.date === today)

if (existingIndex >= 0) {
      activities[existingIndex].activities[activityType] = true
      if (auto && !activities[existingIndex].autoTracked) {
        activities[existingIndex].autoTracked = true
      }
    } else {
      const newActivity: DailyActivity = {
        date: today,
        activities: {
          [activityType]: true,
        },
        type: this.calculateType({ [activityType]: true }),
        autoTracked: auto,
      }
      activities.unshift(newActivity)
    }

activities[existingIndex >= 0 ? existingIndex : 0].type = this.calculateType(
      activities[existingIndex >= 0 ? existingIndex : 0].activities,
    )

localStorage.setItem(this.STORAGE_KEY, JSON.stringify(activities))
  }

private static calculateType(activities: DailyActivity["activities"]): "active" | "care" | "rest" {
    if (activities.workout || activities.walk || activities.gym || activities.heart) {
      return "active"
    }
    if (activities.water || activities.sleep || activities.calories) {
      return "care"
    }
    return "rest"
  }

static getWeeklyStats(): { active: number; care: number; rest: number } {
    const now = new Date()
    const weekStart = new Date(now)
    weekStart.setDate(now.getDate() - now.getDay())
    weekStart.setHours(0, 0, 0, 0)

const activities = this.getAllActivities()
    const weekActivities = activities.filter((a) => new Date(a.date) >= weekStart)

return {
      active: weekActivities.filter((a) => a.type === "active").length,
      care: weekActivities.filter((a) => a.type === "care").length,
      rest: 7 - weekActivities.length,
    }
  }

static getDailyMessage(): string {
    const activity = this.getTodayActivity()

if (!activity) {
      return "Que bom te ver hoje."
    }

if (activity.type === "active") {
      return "Hoje você fez o que foi possível. Isso importa."
    }

if (activity.type === "care") {
      return "Cuidar do corpo também é progresso."
    }

return "Que bom te ver hoje."
  }
}
[V0_FILE]typescriptreact:file="components/guild-system.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Progress } from "@/components/ui/progress"
import {
  ArrowLeft,
  Users,
  Target,
  Heart,
  MessageCircle,
  Trophy,
  Zap,
  Plus,
  Send,
  Sparkles,
} from "lucide-react"
import { ActivityTracker } from "@/lib/activity-tracker"

interface GuildMember {
  id: string
  name: string
  avatar: string
  contribution: number
  lastActive: string
  needsSupport: boolean
}

interface GuildGoal {
  id: string
  description: string
  current: number
  target: number
  reward: string
}

interface SupportMessage {
  id: string
  from: string
  message: string
  timestamp: string
}

interface GuildSystemProps {
  onBack: () => void
}

export function GuildSystem({ onBack }: GuildSystemProps) {
  const [guildName, setGuildName] = useState("Guerreiros do Movimento")
  const [members, setMembers] = useState<GuildMember[]>([
    {
      id: "1",
      name: "Voce",
      avatar: "🧑",
      contribution: 0,
      lastActive: new Date().toISOString(),
      needsSupport: false,
    },
  ])
  const [goals, setGoals] = useState<GuildGoal[]>([
    {
      id: "1",
      description: "Queimar 5.000 calorias juntos",
      current: 0,
      target: 5000,
      reward: "Badge: Fogo no Time",
    },
    {
      id: "2",
      description: "Completar 20 treinos coletivos",
      current: 0,
      target: 20,
      reward: "Badge: Uniao Faz Forca",
    },
  ])
  const [messages, setMessages] = useState<SupportMessage[]>([])
  const [newMessage, setNewMessage] = useState("")
  const [showCreateGuild, setShowCreateGuild] = useState(false)
  const [newGuildName, setNewGuildName] = useState("")
  const [mounted, setMounted] = useState(false)
  const [showPowerUp, setShowPowerUp] = useState(false)

useEffect(() => {
    setMounted(true)
    const savedGuild = localStorage.getItem("guildData")
    if (savedGuild) {
      const data = JSON.parse(savedGuild)
      setGuildName(data.name || "Guerreiros do Movimento")
      setMembers(data.members || members)
      setGoals(data.goals || goals)
      setMessages(data.messages || [])
    }

// Update contribution based on activities
    const weeklyStats = ActivityTracker.getWeeklyStats()
    setMembers((prev) =>
      prev.map((m) =>
        m.id === "1"
          ? {
              ...m,
              contribution: weeklyStats.active * 100 + weeklyStats.care * 50,
              lastActive: new Date().toISOString(),
            }
          : m,
      ),
    )

// Update goals
    setGoals((prev) =>
      prev.map((g) => {
        if (g.description.includes("calorias")) {
          return { ...g, current: weeklyStats.active * 300 }
        }
        if (g.description.includes("treinos")) {
          return { ...g, current: weeklyStats.active }
        }
        return g
      }),
    )
  }, [])

useEffect(() => {
    if (mounted) {
      localStorage.setItem(
        "guildData",
        JSON.stringify({
          name: guildName,
          members,
          goals,
          messages,
        }),
      )
    }
  }, [guildName, members, goals, messages, mounted])

const sendSupportMessage = (memberId: string) => {
    const newMsg: SupportMessage = {
      id: Date.now().toString(),
      from: "Voce",
      message: newMessage || "Estou torcendo por voce! Voce consegue!",
      timestamp: new Date().toISOString(),
    }
    setMessages([newMsg, ...messages])
    setNewMessage("")
    setShowPowerUp(true)

// Play encouraging sound
    playSound(440, 0.2)
    setTimeout(() => playSound(550, 0.2), 100)

// Speak message
    speakMessage("Power-up enviado! Seu amigo vai adorar.")

setTimeout(() => setShowPowerUp(false), 2000)

// Update member
    setMembers((prev) =>
      prev.map((m) => (m.id === memberId ? { ...m, needsSupport: false } : m)),
    )
  }

const createGuild = () => {
    if (newGuildName.trim()) {
      setGuildName(newGuildName)
      setShowCreateGuild(false)
      setNewGuildName("")
      speakMessage(`Guilda ${newGuildName} criada com sucesso!`)
    }
  }

const addSimulatedMember = () => {
    const names = ["Ana", "Carlos", "Maria", "Pedro", "Julia"]
    const avatars = ["👩", "👨", "👧", "🧔", "👱"]
    const randomIndex = Math.floor(Math.random() * names.length)

const newMember: GuildMember = {
      id: Date.now().toString(),
      name: names[randomIndex],
      avatar: avatars[randomIndex],
      contribution: Math.floor(Math.random() * 500),
      lastActive: new Date(Date.now() - Math.random() * 3 * 24 * 60 * 60 * 1000).toISOString(),
      needsSupport: Math.random() > 0.5,
    }

setMembers([...members, newMember])
    speakMessage(`${newMember.name} entrou na guilda!`)
    playSound(520, 0.2)
  }

const playSound = (frequency: number, duration: number) => {
    try {
      const audioContext = new (window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext)()
      const oscillator = audioContext.createOscillator()
      const gainNode = audioContext.createGain()
      oscillator.connect(gainNode)
      gainNode.connect(audioContext.destination)
      oscillator.frequency.value = frequency
      oscillator.type = "sine"
      gainNode.gain.setValueAtTime(0.08, audioContext.currentTime)
      gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration)
      oscillator.start(audioContext.currentTime)
      oscillator.stop(audioContext.currentTime + duration)
    } catch {
      // Audio not supported
    }
  }

const speakMessage = (message: string) => {
    if ("speechSynthesis" in window) {
      const utterance = new SpeechSynthesisUtterance(message)
      utterance.lang = "pt-BR"
      utterance.rate = 1
      utterance.volume = 0.7
      speechSynthesis.speak(utterance)
    }
  }

const getDaysSinceActive = (lastActive: string) => {
    const days = Math.floor(
      (Date.now() - new Date(lastActive).getTime()) / (1000 * 60 * 60 * 24),
    )
    return days
  }

if (!mounted) return null

const totalContribution = members.reduce((sum, m) => sum + m.contribution, 0)

return (
    <div className="space-y-6">
      <Button variant="ghost" onClick={onBack} className="text-slate-400 hover:text-white mb-4">
        <ArrowLeft className="mr-2" size={20} />
        Voltar
      </Button>

{showPowerUp && (
        <Card className="bg-gradient-to-r from-pink-500/20 to-purple-500/20 border-pink-500/50 animate-pulse">
          <CardContent className="py-4 text-center">
            <Zap className="mx-auto mb-2 text-yellow-400" size={40} />
            <h3 className="text-xl font-bold text-pink-400">Power-Up Enviado!</h3>
          </CardContent>
        </Card>
      )}

{/* Guild Header */}
      <Card className="bg-gradient-to-br from-teal-900/50 to-slate-800/50 border-teal-500/30">
        <CardHeader>
          <CardTitle className="text-white flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Users className="text-teal-400" />
              Entre Nos - {guildName}
            </div>
            <Button
              size="sm"
              variant="outline"
              onClick={() => setShowCreateGuild(true)}
              className="border-teal-500 text-teal-400"
            >
              Renomear
            </Button>
          </CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-slate-400 mb-4">
            Apoio sem comparacao. Aqui a gente cresce junto.
          </p>

<div className="flex items-center gap-4">
            <Users className="text-teal-400" size={24} />
            <span className="text-slate-300">{members.length} membros</span>
            <Trophy className="text-yellow-400 ml-auto" size={24} />
            <span className="text-yellow-400">{totalContribution} pontos</span>
          </div>
        </CardContent>
      </Card>

{showCreateGuild && (
        <Card className="bg-slate-800/50 border-slate-700">
          <CardContent className="py-4">
            <Input
              value={newGuildName}
              onChange={(e) => setNewGuildName(e.target.value)}
              placeholder="Nome da Guilda"
              className="bg-slate-700 border-slate-600 text-white mb-3"
            />
            <div className="flex gap-2">
              <Button onClick={createGuild} className="bg-teal-500 hover:bg-teal-600">
                Salvar
              </Button>
              <Button variant="outline" onClick={() => setShowCreateGuild(false)}>
                Cancelar
              </Button>
            </div>
          </CardContent>
        </Card>
      )}

{/* Guild Goals */}
      <Card className="bg-slate-800/50 border-slate-700">
        <CardHeader>
          <CardTitle className="text-white flex items-center gap-2">
            <Target className="text-orange-400" />
            Metas do Grupo
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {goals.map((goal) => (
            <div key={goal.id} className="space-y-2">
              <div className="flex justify-between text-sm">
                <span className="text-slate-300">{goal.description}</span>
                <span className="text-orange-400">
                  {goal.current}/{goal.target}
                </span>
              </div>
              <Progress value={(goal.current / goal.target) * 100} className="h-3 bg-slate-700" />
              <p className="text-yellow-400 text-xs">Recompensa: {goal.reward}</p>
            </div>
          ))}
        </CardContent>
      </Card>

{/* Members */}
      <Card className="bg-slate-800/50 border-slate-700">
        <CardHeader>
          <CardTitle className="text-white flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Heart className="text-pink-400" />
              Membros
            </div>
            <Button
              size="sm"
              onClick={addSimulatedMember}
              className="bg-slate-700 hover:bg-slate-600"
            >
              <Plus size={16} className="mr-1" />
              Simular Membro
            </Button>
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-3">
          {members.map((member) => {
            const daysSinceActive = getDaysSinceActive(member.lastActive)
            const needsHelp = daysSinceActive >= 3 || member.needsSupport

return (
              <Card
                key={member.id}
                className={`${
                  needsHelp
                    ? "bg-orange-900/20 border-orange-500/30"
                    : "bg-slate-700/50 border-slate-600"
                }`}
              >
                <CardContent className="py-3">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <span className="text-3xl">{member.avatar}</span>
                      <div>
                        <p className="text-white font-semibold">{member.name}</p>
                        <p className="text-slate-400 text-sm">
                          {daysSinceActive === 0
                            ? "Ativo hoje"
                            : `${daysSinceActive} dias sem treinar`}
                        </p>
                      </div>
                    </div>
                    <div className="text-right">
                      <p className="text-teal-400 font-bold">{member.contribution}</p>
                      <p className="text-slate-500 text-xs">pontos</p>
                    </div>
                  </div>

{needsHelp && member.id !== "1" && (
                    <div className="mt-3 p-3 bg-orange-900/30 rounded-lg">
                      <p className="text-orange-300 text-sm mb-2">
                        <Sparkles className="inline mr-1" size={14} />
                        Seu aliado precisa de apoio!
                      </p>
                      <div className="flex gap-2">
                        <Input
                          value={newMessage}
                          onChange={(e) => setNewMessage(e.target.value)}
                          placeholder="Envie uma mensagem de apoio..."
                          className="bg-slate-800 border-slate-600 text-white text-sm"
                        />
                        <Button
                          size="sm"
                          onClick={() => sendSupportMessage(member.id)}
                          className="bg-pink-500 hover:bg-pink-600"
                        >
                          <Send size={16} />
                        </Button>
                      </div>
                    </div>
                  )}
                </CardContent>
              </Card>
            )
          })}
        </CardContent>
      </Card>

{/* Support Messages */}
      {messages.length > 0 && (
        <Card className="bg-slate-800/50 border-slate-700">
          <CardHeader>
            <CardTitle className="text-white flex items-center gap-2">
              <MessageCircle className="text-blue-400" />
              Power-Ups Enviados
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-2">
            {messages.slice(0, 5).map((msg) => (
              <div key={msg.id} className="p-3 bg-blue-900/20 rounded-lg">
                <p className="text-blue-300">{msg.message}</p>
                <p className="text-slate-500 text-xs mt-1">
                  {new Date(msg.timestamp).toLocaleDateString("pt-BR")}
                </p>
              </div>
            ))}
          </CardContent>
        </Card>
      )}

<Card className="bg-teal-900/20 border-teal-500/30">
        <CardContent className="py-4">
          <p className="text-teal-300 text-center">
            Aqui nao tem competicao, tem colaboracao.
            O sucesso de um e o sucesso de todos.
          </p>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/fitness-rpg.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import {
  ArrowLeft,
  Sword,
  Shield,
  Zap,
  Heart,
  Star,
  Trophy,
  Flame,
  Crown,
  Sparkles,
} from "lucide-react"
import { ActivityTracker } from "@/lib/activity-tracker"

interface CharacterStats {
  level: number
  xp: number
  xpToNext: number
  strength: number
  stamina: number
  vitality: number
  focus: number
  equipment: string[]
  titles: string[]
  bossesDefeated: number
}

interface BossChallenge {
  id: string
  name: string
  description: string
  requirement: string
  progress: number
  target: number
  reward: string
  defeated: boolean
}

interface FitnessRPGProps {
  onBack: () => void
}

export function FitnessRPG({ onBack }: FitnessRPGProps) {
  const [stats, setStats] = useState<CharacterStats>({
    level: 1,
    xp: 0,
    xpToNext: 100,
    strength: 10,
    stamina: 10,
    vitality: 10,
    focus: 10,
    equipment: [],
    titles: ["Iniciante"],
    bossesDefeated: 0,
  })

const [bosses, setBosses] = useState<BossChallenge[]>([
    {
      id: "boss1",
      name: "Guardiao da Preguica",
      description: "Derrote completando 3 treinos esta semana",
      requirement: "treinos",
      progress: 0,
      target: 3,
      reward: "Armadura da Determinacao",
      defeated: false,
    },
    {
      id: "boss2",
      name: "Mestre das Sombras",
      description: "Beba 8 copos de agua por 3 dias seguidos",
      requirement: "hidratacao",
      progress: 0,
      target: 3,
      reward: "Elmo da Clareza",
      defeated: false,
    },
    {
      id: "boss3",
      name: "Senhor do Cansaco",
      description: "Durma bem por 5 noites consecutivas",
      requirement: "sono",
      progress: 0,
      target: 5,
      reward: "Capa da Energia",
      defeated: false,
    },
  ])

const [mounted, setMounted] = useState(false)
  const [showBossDefeated, setShowBossDefeated] = useState<string | null>(null)

useEffect(() => {
    setMounted(true)
    const savedStats = localStorage.getItem("fitnessRPGStats")
    const savedBosses = localStorage.getItem("fitnessRPGBosses")

if (savedStats) {
      setStats(JSON.parse(savedStats))
    }
    if (savedBosses) {
      setBosses(JSON.parse(savedBosses))
    }

// Update stats based on activities
    updateStatsFromActivities()
  }, [])

useEffect(() => {
    if (mounted) {
      localStorage.setItem("fitnessRPGStats", JSON.stringify(stats))
      localStorage.setItem("fitnessRPGBosses", JSON.stringify(bosses))
    }
  }, [stats, bosses, mounted])

const updateStatsFromActivities = () => {
    const activities = ActivityTracker.getAllActivities()
    const weeklyStats = ActivityTracker.getWeeklyStats()

// Update boss progress
    setBosses((prev) =>
      prev.map((boss) => {
        if (boss.requirement === "treinos") {
          return { ...boss, progress: Math.min(weeklyStats.active, boss.target) }
        }
        return boss
      }),
    )

// Calculate XP and level from total activities
    const totalActiveDays = activities.filter((a) => a.type === "active").length
    const totalCareDays = activities.filter((a) => a.type === "care").length
    const totalXP = totalActiveDays * 50 + totalCareDays * 25

const newLevel = Math.floor(totalXP / 100) + 1
    const xpInCurrentLevel = totalXP % 100

setStats((prev) => ({
      ...prev,
      level: newLevel,
      xp: xpInCurrentLevel,
      strength: 10 + Math.floor(totalActiveDays / 2),
      stamina: 10 + Math.floor(totalActiveDays / 3),
      vitality: 10 + Math.floor(totalCareDays / 2),
      focus: 10 + Math.floor((totalActiveDays + totalCareDays) / 4),
    }))
  }

const defeatBoss = (bossId: string) => {
    const boss = bosses.find((b) => b.id === bossId)
    if (!boss || boss.defeated || boss.progress < boss.target) return

setBosses((prev) =>
      prev.map((b) => (b.id === bossId ? { ...b, defeated: true } : b)),
    )

setStats((prev) => ({
      ...prev,
      equipment: [...prev.equipment, boss.reward],
      xp: prev.xp + 50,
      bossesDefeated: prev.bossesDefeated + 1,
    }))

setShowBossDefeated(boss.name)
    setTimeout(() => setShowBossDefeated(null), 3000)

// Play victory sound
    playSound(440, 0.3)
    setTimeout(() => playSound(550, 0.3), 150)
    setTimeout(() => playSound(660, 0.4), 300)
  }

const playSound = (frequency: number, duration: number) => {
    try {
      const audioContext = new (window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext)()
      const oscillator = audioContext.createOscillator()
      const gainNode = audioContext.createGain()
      oscillator.connect(gainNode)
      gainNode.connect(audioContext.destination)
      oscillator.frequency.value = frequency
      oscillator.type = "sine"
      gainNode.gain.setValueAtTime(0.1, audioContext.currentTime)
      gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration)
      oscillator.start(audioContext.currentTime)
      oscillator.stop(audioContext.currentTime + duration)
    } catch {
      // Audio not supported
    }
  }

const getStatColor = (value: number) => {
    if (value >= 20) return "text-yellow-400"
    if (value >= 15) return "text-emerald-400"
    return "text-slate-300"
  }

if (!mounted) return null

return (
    <div className="space-y-6">
      <Button
        variant="ghost"
        onClick={onBack}
        className="text-slate-400 hover:text-white mb-4"
      >
        <ArrowLeft className="mr-2" size={20} />
        Voltar
      </Button>

{showBossDefeated && (
        <Card className="bg-gradient-to-r from-yellow-500/20 to-orange-500/20 border-yellow-500/50 animate-pulse">
          <CardContent className="py-6 text-center">
            <Crown className="mx-auto mb-2 text-yellow-400" size={48} />
            <h3 className="text-2xl font-bold text-yellow-400">Boss Derrotado!</h3>
            <p className="text-slate-300">{showBossDefeated}</p>
          </CardContent>
        </Card>
      )}

<Card className="bg-gradient-to-br from-purple-900/50 to-slate-800/50 border-purple-500/30">
        <CardHeader>
          <CardTitle className="text-white flex items-center gap-2">
            <Sparkles className="text-purple-400" />
            O Heroi e Voce
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col md:flex-row gap-6">
            {/* Character Avatar */}
            <div className="flex flex-col items-center">
              <div className="w-32 h-32 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-6xl">
                {stats.level >= 10 ? "🦸" : stats.level >= 5 ? "🧙" : "🧑"}
              </div>
              <div className="mt-2 text-center">
                <p className="text-yellow-400 font-bold text-lg">Nivel {stats.level}</p>
                <p className="text-slate-400 text-sm">{stats.titles[stats.titles.length - 1]}</p>
              </div>
            </div>

{/* Stats */}
            <div className="flex-1 space-y-4">
              <div>
                <div className="flex justify-between text-sm mb-1">
                  <span className="text-slate-400">Experiencia</span>
                  <span className="text-purple-400">{stats.xp}/{stats.xpToNext} XP</span>
                </div>
                <Progress value={(stats.xp / stats.xpToNext) * 100} className="h-3 bg-slate-700" />
              </div>

<div className="grid grid-cols-2 gap-4">
                <div className="flex items-center gap-2">
                  <Sword className="text-red-400" size={20} />
                  <span className="text-slate-400">Forca:</span>
                  <span className={`font-bold ${getStatColor(stats.strength)}`}>{stats.strength}</span>
                </div>
                <div className="flex items-center gap-2">
                  <Zap className="text-yellow-400" size={20} />
                  <span className="text-slate-400">Stamina:</span>
                  <span className={`font-bold ${getStatColor(stats.stamina)}`}>{stats.stamina}</span>
                </div>
                <div className="flex items-center gap-2">
                  <Heart className="text-pink-400" size={20} />
                  <span className="text-slate-400">Vitalidade:</span>
                  <span className={`font-bold ${getStatColor(stats.vitality)}`}>{stats.vitality}</span>
                </div>
                <div className="flex items-center gap-2">
                  <Star className="text-blue-400" size={20} />
                  <span className="text-slate-400">Foco:</span>
                  <span className={`font-bold ${getStatColor(stats.focus)}`}>{stats.focus}</span>
                </div>
              </div>

<p className="text-slate-500 text-sm">
                Seus atributos aumentam com seus treinos reais.
                Bracos = Forca. Cardio = Stamina. Cuidado = Vitalidade.
              </p>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Equipment */}
      {stats.equipment.length > 0 && (
        <Card className="bg-slate-800/50 border-slate-700">
          <CardHeader>
            <CardTitle className="text-white flex items-center gap-2">
              <Shield className="text-blue-400" />
              Equipamentos Desbloqueados
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex flex-wrap gap-2">
              {stats.equipment.map((item, index) => (
                <span
                  key={index}
                  className="px-3 py-1 bg-gradient-to-r from-blue-500/20 to-purple-500/20 border border-blue-500/30 rounded-full text-blue-300 text-sm"
                >
                  {item}
                </span>
              ))}
            </div>
          </CardContent>
        </Card>
      )}

{/* Boss Battles */}
      <Card className="bg-slate-800/50 border-slate-700">
        <CardHeader>
          <CardTitle className="text-white flex items-center gap-2">
            <Flame className="text-orange-400" />
            Batalhas de Boss
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-slate-400 text-sm mb-4">
            Derrote chefes completando desafios reais. Cada vitoria te fortalece.
          </p>

{bosses.map((boss) => (
            <Card
              key={boss.id}
              className={`${
                boss.defeated
                  ? "bg-emerald-900/20 border-emerald-500/30"
                  : "bg-slate-900/50 border-slate-600"
              }`}
            >
              <CardContent className="py-4">
                <div className="flex justify-between items-start mb-2">
                  <div>
                    <h4 className={`font-bold ${boss.defeated ? "text-emerald-400" : "text-white"}`}>
                      {boss.defeated && <Trophy className="inline mr-2 text-yellow-400" size={16} />}
                      {boss.name}
                    </h4>
                    <p className="text-slate-400 text-sm">{boss.description}</p>
                  </div>
                  {boss.defeated ? (
                    <span className="text-emerald-400 text-sm">Derrotado</span>
                  ) : (
                    <span className="text-slate-500 text-sm">
                      {boss.progress}/{boss.target}
                    </span>
                  )}
                </div>

{!boss.defeated && (
                  <>
                    <Progress
                      value={(boss.progress / boss.target) * 100}
                      className="h-2 bg-slate-700 mb-2"
                    />
                    <div className="flex justify-between items-center">
                      <span className="text-yellow-400 text-sm">
                        Recompensa: {boss.reward}
                      </span>
                      {boss.progress >= boss.target && (
                        <Button
                          size="sm"
                          onClick={() => defeatBoss(boss.id)}
                          className="bg-orange-500 hover:bg-orange-600"
                        >
                          Derrotar Boss
                        </Button>
                      )}
                    </div>
                  </>
                )}
              </CardContent>
            </Card>
          ))}
        </CardContent>
      </Card>

<Card className="bg-emerald-900/20 border-emerald-500/30">
        <CardContent className="py-4">
          <p className="text-emerald-300 text-center">
            Seu progresso fisico real reflete diretamente no seu heroi.
            Continue treinando e veja seu personagem evoluir.
          </p>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ghost-mode.tsx" isMerged="true"
"use client"

import { useState, useEffect, useRef, useCallback } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { ArrowLeft, Ghost, Play, Pause, RotateCcw, Trophy, Timer, TrendingUp } from "lucide-react"
import { ActivityTracker } from "@/lib/activity-tracker"

interface PastPerformance {
  date: string
  duration: number
  type: string
}

interface GhostModeProps {
  onBack: () => void
}

export function GhostMode({ onBack }: GhostModeProps) {
  const [isRacing, setIsRacing] = useState(false)
  const [currentTime, setCurrentTime] = useState(0)
  const [ghostTime, setGhostTime] = useState(0)
  const [ghostTarget, setGhostTarget] = useState(300) // 5 min default
  const [pastPerformances, setPastPerformances] = useState<PastPerformance[]>([])
  const [victories, setVictories] = useState(0)
  const [mounted, setMounted] = useState(false)
  const [raceComplete, setRaceComplete] = useState(false)
  const [won, setWon] = useState(false)
  const intervalRef = useRef<NodeJS.Timeout | null>(null)

useEffect(() => {
    setMounted(true)
    // Load past performances from workouts
    const savedWorkouts = localStorage.getItem("workouts")
    if (savedWorkouts) {
      const workouts = JSON.parse(savedWorkouts)
      const performances = workouts.slice(0, 10).map((w: { date: string; duration: number; type?: string }) => ({
        date: w.date,
        duration: w.duration,
        type: w.type || "treino",
      }))
      setPastPerformances(performances)

// Set ghost target as last workout duration
      if (workouts.length > 0) {
        setGhostTarget(workouts[0].duration)
      }
    }

const savedVictories = localStorage.getItem("ghostModeVictories")
    if (savedVictories) {
      setVictories(parseInt(savedVictories))
    }
  }, [])

const playSound = useCallback((frequency: number, duration: number) => {
    try {
      const audioContext = new (window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext)()
      const oscillator = audioContext.createOscillator()
      const gainNode = audioContext.createGain()
      oscillator.connect(gainNode)
      gainNode.connect(audioContext.destination)
      oscillator.frequency.value = frequency
      oscillator.type = "sine"
      gainNode.gain.setValueAtTime(0.08, audioContext.currentTime)
      gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration)
      oscillator.start(audioContext.currentTime)
      oscillator.stop(audioContext.currentTime + duration)
    } catch {
      // Audio not supported
    }
  }, [])

const speakMessage = useCallback((message: string) => {
    if ("speechSynthesis" in window) {
      const utterance = new SpeechSynthesisUtterance(message)
      utterance.lang = "pt-BR"
      utterance.rate = 1
      utterance.volume = 0.7
      speechSynthesis.speak(utterance)
    }
  }, [])

useEffect(() => {
    if (isRacing && !raceComplete) {
      intervalRef.current = setInterval(() => {
        setCurrentTime((prev) => {
          const newTime = prev + 1

// Ghost progresses proportionally
          setGhostTime((ghostTarget / ghostTarget) * newTime * 0.95) // Ghost is slightly slower

// Audio feedback every 30 seconds
          if (newTime % 30 === 0) {
            if (newTime > ghostTime) {
              speakMessage("Voce esta na frente! Continue assim!")
              playSound(520, 0.2)
            } else {
              speakMessage("Seu fantasma esta te alcancando! Acelere!")
              playSound(320, 0.2)
            }
          }

// Check if race complete (beat ghost time)
          if (newTime >= ghostTarget) {
            setRaceComplete(true)
            setWon(true)
            setVictories((v) => {
              const newV = v + 1
              localStorage.setItem("ghostModeVictories", newV.toString())
              return newV
            })
            speakMessage("Parabens! Voce venceu seu eu do passado!")
            playSound(440, 0.3)
            setTimeout(() => playSound(550, 0.3), 150)
            setTimeout(() => playSound(660, 0.4), 300)
            ActivityTracker.trackActivity("workout")
          }

return newTime
        })
      }, 1000)
    }

return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current)
      }
    }
  }, [isRacing, raceComplete, ghostTarget, ghostTime, playSound, speakMessage])

const startRace = () => {
    setIsRacing(true)
    setRaceComplete(false)
    setCurrentTime(0)
    setGhostTime(0)
    speakMessage("Corrida iniciada! Supere seu eu do passado!")
    playSound(440, 0.3)
  }

const pauseRace = () => {
    setIsRacing(false)
  }

const resetRace = () => {
    setIsRacing(false)
    setRaceComplete(false)
    setCurrentTime(0)
    setGhostTime(0)
    setWon(false)
  }

const finishEarly = () => {
    setRaceComplete(true)
    setIsRacing(false)
    if (currentTime > ghostTarget * 0.8) {
      setWon(true)
      speakMessage("Muito bem! Voce foi longe!")
    } else {
      speakMessage("Tudo bem. O importante e ter tentado.")
    }
    ActivityTracker.trackActivity("workout")
  }

const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60)
    const secs = Math.floor(seconds % 60)
    return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`
  }

const selectGhostTarget = (duration: number) => {
    setGhostTarget(duration)
    resetRace()
  }

if (!mounted) return null

const progress = Math.min((currentTime / ghostTarget) * 100, 100)
  const ghostProgress = Math.min((ghostTime / ghostTarget) * 100, 100)

<Card className="bg-gradient-to-br from-indigo-900/50 to-slate-800/50 border-indigo-500/30">
        <CardHeader>
          <CardTitle className="text-white flex items-center gap-2">
            <Ghost className="text-indigo-400" />
            Ghost Mode - Treine Contra Seu Passado
          </CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-slate-400 mb-4">
            Desafie o fantasma do seu eu do passado. O objetivo e nao deixar ele te ultrapassar.
          </p>

<div className="flex items-center gap-4 mb-4">
            <Trophy className="text-yellow-400" size={24} />
            <span className="text-slate-300">Vitorias contra seu passado:</span>
            <span className="text-yellow-400 font-bold text-xl">{victories}</span>
          </div>
        </CardContent>
      </Card>

{/* Race Track */}
      <Card className="bg-slate-800/50 border-slate-700">
        <CardHeader>
          <CardTitle className="text-white flex items-center gap-2">
            <Timer className="text-emerald-400" />
            Pista de Corrida
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Your progress */}
          <div>
            <div className="flex justify-between items-center mb-2">
              <span className="text-emerald-400 font-semibold flex items-center gap-2">
                <span className="text-2xl">🏃</span> Voce
              </span>
              <span className="text-white font-mono text-xl">{formatTime(currentTime)}</span>
            </div>
            <div className="relative">
              <Progress value={progress} className="h-6 bg-slate-700" />
              <div
                className="absolute top-0 h-6 flex items-center transition-all duration-300"
                style={{ left: `${Math.min(progress, 95)}%` }}
              >
                <span className="text-2xl">🏃</span>
              </div>
            </div>
          </div>

{/* Ghost progress */}
          <div>
            <div className="flex justify-between items-center mb-2">
              <span className="text-indigo-400 font-semibold flex items-center gap-2">
                <Ghost size={20} /> Seu Fantasma
              </span>
              <span className="text-slate-400 font-mono">{formatTime(ghostTime)}</span>
            </div>
            <div className="relative">
              <Progress value={ghostProgress} className="h-6 bg-slate-700 opacity-60" />
              <div
                className="absolute top-0 h-6 flex items-center transition-all duration-300 opacity-60"
                style={{ left: `${Math.min(ghostProgress, 95)}%` }}
              >
                <Ghost className="text-indigo-400" size={24} />
              </div>
            </div>
          </div>

{/* Target */}
          <div className="text-center">
            <span className="text-slate-400">Meta: </span>
            <span className="text-white font-bold">{formatTime(ghostTarget)}</span>
          </div>

{/* Race Result */}
          {raceComplete && (
            <Card className={`${won ? "bg-emerald-900/30 border-emerald-500/50" : "bg-slate-700/50 border-slate-600"}`}>
              <CardContent className="py-4 text-center">
                {won ? (
                  <>
                    <Trophy className="mx-auto mb-2 text-yellow-400" size={48} />
                    <h3 className="text-xl font-bold text-emerald-400">Voce Venceu!</h3>
                    <p className="text-slate-300">Superou seu eu do passado em {formatTime(currentTime)}</p>
                  </>
                ) : (
                  <>
                    <TrendingUp className="mx-auto mb-2 text-blue-400" size={48} />
                    <h3 className="text-xl font-bold text-blue-400">Bom Esforco!</h3>
                    <p className="text-slate-300">Cada tentativa te torna mais forte</p>
                  </>
                )}
              </CardContent>
            </Card>
          )}

{/* Controls */}
          <div className="flex gap-4 justify-center">
            {!isRacing && !raceComplete && (
              <Button onClick={startRace} className="bg-emerald-500 hover:bg-emerald-600" size="lg">
                <Play className="mr-2" size={20} />
                Iniciar Corrida
              </Button>
            )}

{isRacing && (
              <>
                <Button onClick={pauseRace} variant="outline" className="border-yellow-500 text-yellow-500 bg-transparent">
                  <Pause className="mr-2" size={20} />
                  Pausar
                </Button>
                <Button onClick={finishEarly} variant="outline" className="border-slate-500 text-slate-300 bg-transparent">
                  Finalizar Agora
                </Button>
              </>
            )}

{(raceComplete || (!isRacing && currentTime > 0)) && (
              <Button onClick={resetRace} variant="outline" className="border-indigo-500 text-indigo-400 bg-transparent">
                <RotateCcw className="mr-2" size={20} />
                Nova Corrida
              </Button>
            )}
          </div>
        </CardContent>
      </Card>

{/* Select Ghost Target */}
      <Card className="bg-slate-800/50 border-slate-700">
        <CardHeader>
          <CardTitle className="text-white text-lg">Escolher Fantasma</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-slate-400 text-sm mb-4">Selecione um treino passado para competir:</p>

{pastPerformances.length > 0 ? (
            <div className="space-y-2">
              {pastPerformances.slice(0, 5).map((perf, index) => (
                <button
                  key={index}
                  onClick={() => selectGhostTarget(perf.duration)}
                  className={`w-full p-3 rounded-lg text-left transition-colors ${
                    ghostTarget === perf.duration
                      ? "bg-indigo-500/20 border border-indigo-500/50"
                      : "bg-slate-700/50 hover:bg-slate-700"
                  }`}
                >
                  <div className="flex justify-between">
                    <span className="text-slate-300">
                      {new Date(perf.date).toLocaleDateString("pt-BR")}
                    </span>
                    <span className="text-indigo-400 font-mono">{formatTime(perf.duration)}</span>
                  </div>
                </button>
              ))}
            </div>
          ) : (
            <p className="text-slate-500 text-center py-4">
              Faca seu primeiro treino para criar um fantasma.
            </p>
          )}

{/* Quick targets */}
          <div className="mt-4 grid grid-cols-3 gap-2">
            <Button
              variant="outline"
              size="sm"
              onClick={() => selectGhostTarget(300)}
              className="border-slate-600 text-slate-300"
            >
              5 min
            </Button>
            <Button
              variant="outline"
              size="sm"
              onClick={() => selectGhostTarget(600)}
              className="border-slate-600 text-slate-300"
            >
              10 min
            </Button>
            <Button
              variant="outline"
              size="sm"
              onClick={() => selectGhostTarget(900)}
              className="border-slate-600 text-slate-300"
            >
              15 min
            </Button>
          </div>
        </CardContent>
      </Card>

<Card className="bg-indigo-900/20 border-indigo-500/30">
        <CardContent className="py-4">
          <p className="text-indigo-300 text-center">
            A verdadeira competicao e com voce mesmo de ontem.
            Nao importa se vencer, importa tentar.
          </p>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/water-tracker.tsx" isMerged="true"
"use client"

import { useState, useEffect, useCallback, useRef } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Droplet, Plus, Minus, TrendingUp, Bell, BellOff, Volume2 } from "lucide-react"
import { ActivityTracker } from "@/lib/activity-tracker"
import { QuickCheckButton } from "@/components/quick-check-button"

export function WaterTracker() {
  const [glasses, setGlasses] = useState(0)
  const [dailyGoal] = useState(8)
  const [weeklyData, setWeeklyData] = useState<{ date: string; glasses: number }[]>([])
  const [notificationsEnabled, setNotificationsEnabled] = useState(false)
  const [notificationPermission, setNotificationPermission] = useState<NotificationPermission>("default")
  const [showReminder, setShowReminder] = useState(false)
  const [reminderInterval, setReminderInterval] = useState(60)
  const [lastReminder, setLastReminder] = useState<number>(0)
  const audioContextRef = useRef<AudioContext | null>(null)
  const reminderIntervalRef = useRef<NodeJS.Timeout | null>(null)

const playReminderSound = useCallback(() => {
    try {
      if (!audioContextRef.current) {
        audioContextRef.current = new (window.AudioContext || (window as typeof window & { webkitAudioContext: typeof AudioContext }).webkitAudioContext)()
      }
      const ctx = audioContextRef.current
      if (ctx.state === "suspended") ctx.resume()
      const oscillator = ctx.createOscillator()
      const gainNode = ctx.createGain()
      oscillator.connect(gainNode)
      gainNode.connect(ctx.destination)
      oscillator.frequency.setValueAtTime(800, ctx.currentTime)
      oscillator.frequency.exponentialRampToValueAtTime(400, ctx.currentTime + 0.3)
      gainNode.gain.setValueAtTime(0.15, ctx.currentTime)
      gainNode.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.3)
      oscillator.start(ctx.currentTime)
      oscillator.stop(ctx.currentTime + 0.3)
      setTimeout(() => {
        const osc2 = ctx.createOscillator()
        const gain2 = ctx.createGain()
        osc2.connect(gain2)
        gain2.connect(ctx.destination)
        osc2.frequency.setValueAtTime(600, ctx.currentTime)
        osc2.frequency.exponentialRampToValueAtTime(300, ctx.currentTime + 0.2)
        gain2.gain.setValueAtTime(0.1, ctx.currentTime)
        gain2.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.2)
        osc2.start(ctx.currentTime)
        osc2.stop(ctx.currentTime + 0.2)
      }, 150)
    } catch { /* silent */ }
  }, [])

const showWaterReminder = useCallback(() => {
    if (glasses < dailyGoal) {
      setShowReminder(true)
      playReminderSound()
      setLastReminder(Date.now())
      if (notificationPermission === "granted" && notificationsEnabled) {
        try {
          new Notification("Hora de beber agua!", {
            body: `Voce bebeu ${glasses} de ${dailyGoal} copos hoje. Que tal mais um?`,
            icon: "/favicon.ico",
            tag: "water-reminder",
            silent: false,
          })
        } catch { /* silent */ }
      }
      setTimeout(() => setShowReminder(false), 10000)
    }
  }, [glasses, dailyGoal, notificationPermission, notificationsEnabled, playReminderSound])

useEffect(() => {
    if (notificationsEnabled && glasses < dailyGoal) {
      if (reminderIntervalRef.current) clearInterval(reminderIntervalRef.current)
      reminderIntervalRef.current = setInterval(() => showWaterReminder(), reminderInterval * 60 * 1000)
      const timeSinceLastReminder = Date.now() - lastReminder
      if (timeSinceLastReminder > 60000) setTimeout(showWaterReminder, 60000)
    }
    return () => { if (reminderIntervalRef.current) clearInterval(reminderIntervalRef.current) }
  }, [notificationsEnabled, reminderInterval, glasses, dailyGoal, showWaterReminder, lastReminder])

useEffect(() => {
    if (typeof window !== "undefined" && "Notification" in window) setNotificationPermission(Notification.permission)
    const savedPrefs = localStorage.getItem("waterNotificationPrefs")
    if (savedPrefs) {
      const prefs = JSON.parse(savedPrefs)
      setNotificationsEnabled(prefs.enabled || false)
      setReminderInterval(prefs.interval || 60)
    }
  }, [])

useEffect(() => {
    localStorage.setItem("waterNotificationPrefs", JSON.stringify({ enabled: notificationsEnabled, interval: reminderInterval }))
  }, [notificationsEnabled, reminderInterval])

const requestNotificationPermission = async () => {
    if (typeof window !== "undefined" && "Notification" in window) {
      const permission = await Notification.requestPermission()
      setNotificationPermission(permission)
      if (permission === "granted") setNotificationsEnabled(true)
    }
  }

const toggleNotifications = () => {
    if (notificationPermission !== "granted") requestNotificationPermission()
    else setNotificationsEnabled(!notificationsEnabled)
  }

useEffect(() => {
    const saved = localStorage.getItem("waterData")
    if (saved) {
      const data = JSON.parse(saved)
      const today = new Date().toLocaleDateString()
      const savedDate = data.lastDate
      if (savedDate !== today) {
        setGlasses(0)
        if (data.today > 0) {
          const newWeekly = [...(data.weekly || []), { date: savedDate, glasses: data.today }].slice(-7)
          setWeeklyData(newWeekly)
        }
      } else {
        setGlasses(data.today || 0)
        setWeeklyData(data.weekly || [])
      }
    }
    ActivityTracker.trackActivity("water", true)
  }, [])

useEffect(() => {
    localStorage.setItem("waterData", JSON.stringify({ today: glasses, weekly: weeklyData, lastDate: new Date().toLocaleDateString() }))
  }, [glasses, weeklyData])

const updateWeeklyData = (currentGlasses: number) => {
    const today = new Date().toLocaleDateString()
    const i = weeklyData.findIndex((d) => d.date === today)
    if (i >= 0) { const u = [...weeklyData]; u[i].glasses = currentGlasses; setWeeklyData(u) }
    else setWeeklyData([...weeklyData, { date: today, glasses: currentGlasses }])
  }

const percentage = Math.min((glasses / dailyGoal) * 100, 100)

return (
    <div className="space-y-5">
      {showReminder && (
        <div className="fixed top-4 left-4 right-4 z-50 animate-pulse">
          <Card className="bg-primary border-none shadow-lg shadow-primary/20">
            <CardContent className="py-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <Droplet className="text-primary-foreground animate-bounce" size={24} />
                  <div>
                    <p className="text-primary-foreground font-semibold text-sm">Hora de beber agua!</p>
                    <p className="text-primary-foreground/80 text-xs">Voce bebeu {glasses} de {dailyGoal} copos hoje</p>
                  </div>
                </div>
                <Button onClick={() => { addGlass(); setShowReminder(false) }} size="sm" className="bg-primary-foreground text-primary hover:bg-primary-foreground/90">
                  <Plus size={14} className="mr-1" /> Bebi!
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      )}

{/* Notifications */}
      <Card className="bg-card border-border">
        <CardHeader className="pb-3">
          <CardTitle className="text-base text-foreground flex items-center gap-2">
            <Bell className="text-primary" size={18} />
            Lembretes Automaticos
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-foreground font-medium text-sm">Notificacoes de Agua</p>
              <p className="text-muted-foreground text-xs">Receba lembretes para beber agua</p>
            </div>
            <Button onClick={toggleNotifications} variant={notificationsEnabled ? "default" : "outline"} size="sm"
              className={notificationsEnabled ? "bg-primary hover:bg-primary/90 text-primary-foreground" : "border-border hover:bg-secondary"}
            >
              {notificationsEnabled ? <><Bell size={14} className="mr-1.5" /> Ativado</> : <><BellOff size={14} className="mr-1.5" /> Desativado</>}
            </Button>
          </div>
          {notificationsEnabled && (
            <div className="space-y-3 pt-3 border-t border-border">
              <p className="text-muted-foreground text-xs">Lembrar a cada:</p>
              <div className="flex gap-2 flex-wrap">
                {[30, 60, 90, 120].map((mins) => (
                  <Button key={mins} onClick={() => setReminderInterval(mins)} variant={reminderInterval === mins ? "default" : "outline"} size="sm"
                    className={reminderInterval === mins ? "bg-primary hover:bg-primary/90 text-primary-foreground" : "border-border hover:bg-secondary"}
                  >
                    {mins < 60 ? `${mins} min` : `${mins / 60}h`}
                  </Button>
                ))}
              </div>
              <Button onClick={() => { playReminderSound(); showWaterReminder() }} variant="outline" size="sm" className="w-full border-border hover:bg-secondary">
                <Volume2 size={14} className="mr-1.5" /> Testar Lembrete
              </Button>
            </div>
          )}
          {notificationPermission === "denied" && (
            <div className="bg-chart-4/10 border border-chart-4/20 rounded-lg p-3">
              <p className="text-chart-4 text-xs">Notificacoes bloqueadas. Habilite nas configuracoes do navegador.</p>
            </div>
          )}
        </CardContent>
      </Card>

{/* Main */}
      <Card className="bg-primary/5 border-primary/15">
        <CardHeader>
          <CardTitle className="text-2xl text-foreground flex items-center gap-3">
            <Droplet className="text-primary" size={28} />
            Hidratacao Diaria
          </CardTitle>
          <p className="text-muted-foreground text-sm mt-1">Beba agua regularmente para manter seu corpo saudavel</p>
        </CardHeader>
        <CardContent className="space-y-5">
          <QuickCheckButton activityType="water" label="Hoje bebi agua" />
          <div className="text-center">
            <div className="text-6xl font-bold text-primary mb-1">{glasses}</div>
            <p className="text-muted-foreground">de {dailyGoal} copos ({Math.round(percentage)}%)</p>
          </div>
          <div className="w-full bg-secondary rounded-full h-3 overflow-hidden">
            <div className="bg-primary h-full transition-all duration-500 rounded-full" style={{ width: `${percentage}%` }} />
          </div>
          <div className="flex gap-3 justify-center">
            <Button onClick={removeGlass} size="lg" variant="outline" className="border-border hover:bg-secondary">
              <Minus size={20} />
            </Button>
            <Button onClick={addGlass} size="lg" className="bg-primary hover:bg-primary/90 text-primary-foreground px-10">
              <Plus size={20} className="mr-2" /> Adicionar Copo
            </Button>
          </div>
          {glasses < dailyGoal && glasses > 0 && (
            <div className="bg-primary/10 border border-primary/20 rounded-xl p-4 text-center">
              <p className="text-primary text-sm">Cada copo conta. Continue quando puder.</p>
            </div>
          )}
          {glasses === 0 && (
            <div className="bg-secondary/50 border border-border rounded-xl p-4 text-center">
              <p className="text-muted-foreground text-sm">Se esqueceu hoje, tudo bem. Amanha a gente tenta de novo.</p>
            </div>
          )}
          {glasses >= dailyGoal && (
            <div className="bg-chart-1/10 border border-chart-1/20 rounded-xl p-4 text-center">
              <p className="text-chart-1 font-semibold text-sm">Voce cuidou da sua hidratacao hoje!</p>
            </div>
          )}
        </CardContent>
      </Card>

{/* History */}
      <Card className="bg-card border-border">
        <CardHeader>
          <CardTitle className="text-foreground flex items-center gap-2 text-base">
            <TrendingUp className="text-primary" size={18} />
            Semana Atual
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-2">
            {weeklyData.slice(-7).map((day) => (
              <div key={day.date} className="flex items-center justify-between p-3 bg-secondary/30 rounded-xl">
                <span className="text-muted-foreground text-sm">{day.date}</span>
                <div className="flex items-center gap-2">
                  <Droplet className="text-primary" size={14} />
                  <span className="text-foreground font-semibold text-sm">{day.glasses} copos</span>
                </div>
              </div>
            ))}
            {weeklyData.length === 0 && (
              <p className="text-muted-foreground text-center py-4 text-sm">Comece quando se sentir pronto!</p>
            )}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/workout-notes.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import {
  StickyNote,
  Plus,
  Trash2,
  CheckCircle2,
  Circle,
  Calendar,
  Clock,
  ChevronDown,
  ChevronUp,
  Edit3,
  X,
  Check,
} from "lucide-react"

interface Note {
  id: string
  text: string
  done: boolean
  createdAt: string
  day: string
  priority: "normal" | "importante" | "urgente"
}

const DAYS = ["Domingo", "Segunda", "Terca", "Quarta", "Quinta", "Sexta", "Sabado"]

const PRIORITY_STYLES = {
  normal: {
    border: "border-slate-600",
    bg: "bg-slate-800/50",
    badge: "bg-slate-600 text-slate-200",
    label: "Normal",
  },
  importante: {
    border: "border-amber-500/40",
    bg: "bg-amber-500/5",
    badge: "bg-amber-500/20 text-amber-300",
    label: "Importante",
  },
  urgente: {
    border: "border-red-500/40",
    bg: "bg-red-500/5",
    badge: "bg-red-500/20 text-red-300",
    label: "Urgente",
  },
}

export function WorkoutNotes() {
  const [notes, setNotes] = useState<Note[]>([])
  const [newNote, setNewNote] = useState("")
  const [selectedDay, setSelectedDay] = useState(() => DAYS[new Date().getDay()])
  const [selectedPriority, setSelectedPriority] = useState<Note["priority"]>("normal")
  const [editingId, setEditingId] = useState<string | null>(null)
  const [editText, setEditText] = useState("")
  const [filterDay, setFilterDay] = useState<string>("todos")
  const [showCompleted, setShowCompleted] = useState(false)

useEffect(() => {
    const saved = localStorage.getItem("workoutNotes")
    if (saved) {
      setNotes(JSON.parse(saved))
    }
  }, [])

useEffect(() => {
    localStorage.setItem("workoutNotes", JSON.stringify(notes))
  }, [notes])

const addNote = () => {
    if (!newNote.trim()) return
    const note: Note = {
      id: Date.now().toString(),
      text: newNote.trim(),
      done: false,
      createdAt: new Date().toISOString(),
      day: selectedDay,
      priority: selectedPriority,
    }
    setNotes([note, ...notes])
    setNewNote("")
    setSelectedPriority("normal")
  }

const toggleDone = (id: string) => {
    setNotes(notes.map((n) => (n.id === id ? { ...n, done: !n.done } : n)))
  }

const deleteNote = (id: string) => {
    setNotes(notes.filter((n) => n.id !== id))
  }

const startEdit = (note: Note) => {
    setEditingId(note.id)
    setEditText(note.text)
  }

const saveEdit = (id: string) => {
    if (!editText.trim()) return
    setNotes(notes.map((n) => (n.id === id ? { ...n, text: editText.trim() } : n)))
    setEditingId(null)
    setEditText("")
  }

const cancelEdit = () => {
    setEditingId(null)
    setEditText("")
  }

const todayName = DAYS[new Date().getDay()]
  const pendingNotes = notes.filter((n) => !n.done)
  const completedNotes = notes.filter((n) => n.done)
  const todayNotes = pendingNotes.filter((n) => n.day === todayName)

const filteredPending =
    filterDay === "todos" ? pendingNotes : pendingNotes.filter((n) => n.day === filterDay)

const filteredCompleted =
    filterDay === "todos" ? completedNotes : completedNotes.filter((n) => n.day === filterDay)

return (
    <div className="space-y-6">
      {/* Lembretes de hoje */}
      {todayNotes.length > 0 && (
        <Card className="bg-gradient-to-r from-emerald-500/20 to-teal-500/20 border-emerald-500/30 backdrop-blur">
          <CardHeader className="pb-3">
            <CardTitle className="text-xl text-white flex items-center gap-2">
              <Clock className="text-emerald-400" size={20} />
              Hoje - {todayName}
            </CardTitle>
            <p className="text-emerald-300 text-sm">
              Voce tem {todayNotes.length} {todayNotes.length === 1 ? "lembrete" : "lembretes"} para hoje
            </p>
          </CardHeader>
          <CardContent className="space-y-2">
            {todayNotes.map((note) => {
              const style = PRIORITY_STYLES[note.priority]
              return (
                <div
                  key={note.id}
                  className={`flex items-center gap-3 p-3 rounded-lg ${style.bg} ${style.border} border`}
                >
                  <button
                    onClick={() => toggleDone(note.id)}
                    className="text-emerald-400 hover:text-emerald-300 shrink-0"
                  >
                    <Circle size={22} />
                  </button>
                  <p className="text-white flex-1">{note.text}</p>
                  <span className={`text-xs px-2 py-0.5 rounded-full ${style.badge}`}>
                    {style.label}
                  </span>
                </div>
              )
            })}
          </CardContent>
        </Card>
      )}

{todayNotes.length === 0 && (
        <Card className="bg-slate-800/50 border-slate-700 backdrop-blur">
          <CardContent className="py-6 text-center">
            <p className="text-slate-300">
              Nenhum lembrete para hoje.
              <br />
              <span className="text-emerald-400">Que tal adicionar algo?</span>
            </p>
          </CardContent>
        </Card>
      )}

{/* Adicionar nova nota */}
      <Card className="bg-gradient-to-br from-amber-500/10 to-orange-500/10 border-amber-500/30 backdrop-blur">
        <CardHeader className="pb-3">
          <CardTitle className="text-2xl text-white flex items-center gap-3">
            <StickyNote className="text-amber-400" size={28} />
            Anotar Lembrete
          </CardTitle>
          <p className="text-slate-400 text-sm">
            Anote o que precisa fazer para nao esquecer
          </p>
        </CardHeader>
        <CardContent className="space-y-4">
          <textarea
            value={newNote}
            onChange={(e) => setNewNote(e.target.value)}
            placeholder="Ex: Preciso fazer treino de perna hoje..."
            className="w-full bg-slate-800/80 border border-slate-600 rounded-lg p-4 text-white placeholder-slate-500 focus:border-amber-500/50 focus:outline-none focus:ring-1 focus:ring-amber-500/30 min-h-[80px] resize-none"
            onKeyDown={(e) => {
              if (e.key === "Enter" && !e.shiftKey) {
                e.preventDefault()
                addNote()
              }
            }}
          />

{/* Dia da semana */}
          <div>
            <p className="text-slate-400 text-sm mb-2">Para qual dia?</p>
            <div className="flex gap-2 flex-wrap">
              {DAYS.map((day) => (
                <Button
                  key={day}
                  onClick={() => setSelectedDay(day)}
                  variant={selectedDay === day ? "default" : "outline"}
                  size="sm"
                  className={
                    selectedDay === day
                      ? "bg-amber-500 hover:bg-amber-600 text-white"
                      : day === todayName
                        ? "border-emerald-500/40 text-emerald-400 hover:bg-emerald-500/10"
                        : "border-slate-600 hover:bg-slate-700"
                  }
                >
                  {day.slice(0, 3)}
                  {day === todayName && selectedDay !== day && (
                    <span className="ml-1 text-xs opacity-70">(hoje)</span>
                  )}
                </Button>
              ))}
            </div>
          </div>

{/* Prioridade */}
          <div>
            <p className="text-slate-400 text-sm mb-2">Prioridade</p>
            <div className="flex gap-2">
              {(Object.keys(PRIORITY_STYLES) as Note["priority"][]).map((p) => {
                const style = PRIORITY_STYLES[p]
                return (
                  <Button
                    key={p}
                    onClick={() => setSelectedPriority(p)}
                    variant={selectedPriority === p ? "default" : "outline"}
                    size="sm"
                    className={
                      selectedPriority === p
                        ? p === "urgente"
                          ? "bg-red-500 hover:bg-red-600 text-white"
                          : p === "importante"
                            ? "bg-amber-500 hover:bg-amber-600 text-white"
                            : "bg-slate-600 hover:bg-slate-500 text-white"
                        : `${style.border} hover:bg-slate-700`
                    }
                  >
                    {style.label}
                  </Button>
                )
              })}
            </div>
          </div>

<Button
            onClick={addNote}
            disabled={!newNote.trim()}
            className="w-full bg-amber-500 hover:bg-amber-600 text-white font-semibold py-3"
          >
            <Plus size={20} className="mr-2" />
            Adicionar Lembrete
          </Button>
        </CardContent>
      </Card>

{/* Sugestoes rapidas */}
      <Card className="bg-slate-800/50 border-slate-700 backdrop-blur">
        <CardHeader className="pb-3">
          <CardTitle className="text-lg text-white">Adicao rapida</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex gap-2 flex-wrap">
            {[
              "Treino de perna",
              "Treino de braco",
              "Cardio leve",
              "Alongamento",
              "Caminhada",
              "Beber mais agua",
              "Dormir cedo",
              "Treino de costas",
              "Abdominais",
              "Yoga",
            ].map((suggestion) => (
              <Button
                key={suggestion}
                onClick={() => {
                  const note: Note = {
                    id: Date.now().toString() + Math.random(),
                    text: suggestion,
                    done: false,
                    createdAt: new Date().toISOString(),
                    day: selectedDay,
                    priority: "normal",
                  }
                  setNotes([note, ...notes])
                }}
                variant="outline"
                size="sm"
                className="border-slate-600 hover:bg-slate-700 text-slate-300"
              >
                <Plus size={14} className="mr-1" />
                {suggestion}
              </Button>
            ))}
          </div>
        </CardContent>
      </Card>

{/* Filtro por dia */}
      <div>
        <p className="text-slate-400 text-sm mb-2">Filtrar por dia:</p>
        <div className="flex gap-2 flex-wrap">
          <Button
            onClick={() => setFilterDay("todos")}
            variant={filterDay === "todos" ? "default" : "outline"}
            size="sm"
            className={
              filterDay === "todos"
                ? "bg-slate-600 hover:bg-slate-500 text-white"
                : "border-slate-600 hover:bg-slate-700"
            }
          >
            Todos
          </Button>
          {DAYS.map((day) => (
            <Button
              key={day}
              onClick={() => setFilterDay(day)}
              variant={filterDay === day ? "default" : "outline"}
              size="sm"
              className={
                filterDay === day
                  ? "bg-slate-600 hover:bg-slate-500 text-white"
                  : "border-slate-600 hover:bg-slate-700"
              }
            >
              {day.slice(0, 3)}
            </Button>
          ))}
        </div>
      </div>

{/* Lista de lembretes pendentes */}
      {filteredPending.length > 0 && (
        <Card className="bg-slate-800/50 border-slate-700 backdrop-blur">
          <CardHeader className="pb-3">
            <CardTitle className="text-xl text-white flex items-center gap-2">
              <Calendar className="text-blue-400" size={20} />
              Lembretes Pendentes ({filteredPending.length})
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-2">
            {filteredPending.map((note) => {
              const style = PRIORITY_STYLES[note.priority]
              const isEditing = editingId === note.id

return (
                <div
                  key={note.id}
                  className={`flex items-start gap-3 p-3 rounded-lg ${style.bg} ${style.border} border transition-all`}
                >
                  <button
                    onClick={() => toggleDone(note.id)}
                    className="text-slate-400 hover:text-emerald-400 mt-0.5 shrink-0"
                  >
                    <Circle size={22} />
                  </button>

<div className="flex-1 min-w-0">
                    {isEditing ? (
                      <div className="flex gap-2">
                        <input
                          type="text"
                          value={editText}
                          onChange={(e) => setEditText(e.target.value)}
                          className="flex-1 bg-slate-700 border border-slate-600 rounded px-2 py-1 text-white text-sm focus:border-amber-500/50 focus:outline-none"
                          onKeyDown={(e) => {
                            if (e.key === "Enter") saveEdit(note.id)
                            if (e.key === "Escape") cancelEdit()
                          }}
                          autoFocus
                        />
                        <button onClick={() => saveEdit(note.id)} className="text-emerald-400 hover:text-emerald-300">
                          <Check size={18} />
                        </button>
                        <button onClick={cancelEdit} className="text-slate-400 hover:text-slate-300">
                          <X size={18} />
                        </button>
                      </div>
                    ) : (
                      <p className="text-white">{note.text}</p>
                    )}

<div className="flex items-center gap-2 mt-1">
                      <span className={`text-xs px-2 py-0.5 rounded-full ${style.badge}`}>
                        {style.label}
                      </span>
                      <span className="text-xs text-slate-500">{note.day}</span>
                    </div>
                  </div>

{!isEditing && (
                    <div className="flex gap-1 shrink-0">
                      <button
                        onClick={() => startEdit(note)}
                        className="text-slate-500 hover:text-amber-400 p-1"
                      >
                        <Edit3 size={16} />
                      </button>
                      <button
                        onClick={() => deleteNote(note.id)}
                        className="text-slate-500 hover:text-red-400 p-1"
                      >
                        <Trash2 size={16} />
                      </button>
                    </div>
                  )}
                </div>
              )
            })}
          </CardContent>
        </Card>
      )}

{/* Concluidos */}
      {filteredCompleted.length > 0 && (
        <Card className="bg-slate-800/30 border-slate-700/50 backdrop-blur">
          <CardHeader className="pb-3">
            <button
              onClick={() => setShowCompleted(!showCompleted)}
              className="flex items-center justify-between w-full"
            >
              <CardTitle className="text-lg text-slate-400 flex items-center gap-2">
                <CheckCircle2 className="text-emerald-500" size={18} />
                Concluidos ({filteredCompleted.length})
              </CardTitle>
              {showCompleted ? (
                <ChevronUp size={18} className="text-slate-400" />
              ) : (
                <ChevronDown size={18} className="text-slate-400" />
              )}
            </button>
          </CardHeader>
          {showCompleted && (
            <CardContent className="space-y-2">
              {filteredCompleted.map((note) => (
                <div
                  key={note.id}
                  className="flex items-center gap-3 p-3 rounded-lg bg-emerald-500/5 border border-emerald-500/20"
                >
                  <button
                    onClick={() => toggleDone(note.id)}
                    className="text-emerald-400 shrink-0"
                  >
                    <CheckCircle2 size={22} />
                  </button>
                  <p className="text-slate-500 line-through flex-1">{note.text}</p>
                  <span className="text-xs text-slate-600">{note.day}</span>
                  <button
                    onClick={() => deleteNote(note.id)}
                    className="text-slate-600 hover:text-red-400 p-1 shrink-0"
                  >
                    <Trash2 size={16} />
                  </button>
                </div>
              ))}

<Button
                onClick={() => setNotes(notes.filter((n) => !n.done))}
                variant="outline"
                size="sm"
                className="w-full mt-2 border-slate-700 hover:bg-slate-700 text-slate-400"
              >
                <Trash2 size={14} className="mr-2" />
                Limpar concluidos
              </Button>
            </CardContent>
          )}
        </Card>
      )}

{/* Resumo da semana */}
      <Card className="bg-slate-800/50 border-slate-700 backdrop-blur">
        <CardHeader className="pb-3">
          <CardTitle className="text-lg text-white">Resumo da Semana</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-7 gap-1">
            {DAYS.map((day) => {
              const dayPending = notes.filter((n) => n.day === day && !n.done).length
              const dayDone = notes.filter((n) => n.day === day && n.done).length
              const isToday = day === todayName

return (
                <button
                  key={day}
                  onClick={() => setFilterDay(day)}
                  className={`flex flex-col items-center p-2 rounded-lg transition-colors ${
                    isToday
                      ? "bg-emerald-500/20 border border-emerald-500/30"
                      : filterDay === day
                        ? "bg-slate-700/50 border border-slate-600"
                        : "hover:bg-slate-700/30"
                  }`}
                >
                  <span className={`text-xs font-medium ${isToday ? "text-emerald-400" : "text-slate-400"}`}>
                    {day.slice(0, 3)}
                  </span>
                  {dayPending > 0 && (
                    <span className="text-xs text-amber-400 mt-1">{dayPending}</span>
                  )}
                  {dayDone > 0 && (
                    <span className="text-xs text-emerald-500 mt-0.5">{dayDone}</span>
                  )}
                  {dayPending === 0 && dayDone === 0 && (
                    <span className="text-xs text-slate-600 mt-1">-</span>
                  )}
                </button>
              )
            })}
          </div>
          <div className="flex items-center gap-4 mt-3 text-xs text-slate-500 justify-center">
            <span className="flex items-center gap-1">
              <span className="w-2 h-2 rounded-full bg-amber-400" />
              Pendente
            </span>
            <span className="flex items-center gap-1">
              <span className="w-2 h-2 rounded-full bg-emerald-500" />
              Concluido
            </span>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type { Metadata, Viewport } from 'next'
import { Inter, Geist_Mono } from 'next/font/google'
import { Analytics } from '@vercel/analytics/next'
import './globals.css'

const _inter = Inter({ subsets: ["latin"] });
const _geistMono = Geist_Mono({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: 'Movimento Possivel - Cuidado que Transforma',
  description: 'App de treino inclusivo que respeita seu corpo. Treinos adaptados, hidratacao, sono, caminhada e muito mais.',
  generator: 'v0.app',
  icons: {
    icon: [
      {
        url: '/icon-light-32x32.png',
        media: '(prefers-color-scheme: light)',
      },
      {
        url: '/icon-dark-32x32.png',
        media: '(prefers-color-scheme: dark)',
      },
      {
        url: '/icon.svg',
        type: 'image/svg+xml',
      },
    ],
    apple: '/apple-icon.png',
  },
}

export const viewport: Viewport = {
  themeColor: '#1a1a2e',
  width: 'device-width',
  initialScale: 1,
  userScalable: false,
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="pt-BR" className="dark">
      <body className="font-sans antialiased">
        {children}
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="components/ai-assistant.tsx" isMerged="true"
"use client"

import { useState, useEffect, useCallback, useRef } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Volume2, VolumeX, ChevronDown, ChevronUp, Mic, Bot } from "lucide-react"

interface AIPreferences {
  name: string
  voiceGender: "female" | "male"
  voiceIndex: number
  enabled: boolean
  setupDone: boolean
}

const DEFAULT_PREFS: AIPreferences = {
  name: "Luna",
  voiceGender: "female",
  voiceIndex: 0,
  enabled: true,
  setupDone: false,
}

const AI_NAME_SUGGESTIONS = [
  { name: "Luna", gender: "female" as const },
  { name: "Aurora", gender: "female" as const },
  { name: "Maya", gender: "female" as const },
  { name: "Kai", gender: "male" as const },
  { name: "Leo", gender: "male" as const },
  { name: "Atlas", gender: "male" as const },
]

function getGreeting(): string {
  const hour = new Date().getHours()
  if (hour >= 5 && hour < 12) return "Bom dia"
  if (hour >= 12 && hour < 18) return "Boa tarde"
  return "Boa noite"
}

// Mensagens contextuais para cada aba do app
const TAB_MESSAGES: Record<string, string[]> = {
  home: [
    "Voce esta na tela inicial. Escolha o que quiser, sem pressa.",
    "Que bom te ver aqui. O que vamos fazer hoje?",
    "Tudo pronto por aqui. Escolha como cuidar de voce.",
  ],
  water: [
    "Hora de cuidar da hidratacao! Cada gole conta.",
    "Lembre-se: beber agua e um ato de carinho com voce.",
    "Sua agua do dia te espera. Sem cobranca, no seu ritmo.",
  ],
  sleep: [
    "Vamos cuidar do seu descanso. Dormir bem e progresso.",
    "Registre como dormiu. Dormir mal nao e fracasso, e informacao.",
    "O sono e fundamental. Vamos ver como esta o seu descanso.",
  ],
  walk: [
    "Cada passo importa. Vamos registrar sua caminhada.",
    "Caminhar e se movimentar. Ate um minutinho ja vale.",
    "Sua caminhada de hoje conta como vitoria. Vamos anotar.",
  ],
  calories: [
    "Vamos olhar sua alimentacao. Sem culpa, so informacao.",
    "Comer tambem e cuidar de voce. Registre sem pressao.",
    "Aqui voce anota o que comeu. Sem julgamento.",
  ],
  portions: [
    "Guia de porcoes para te ajudar no dia a dia.",
    "Informacao e poder. Veja as porcoes recomendadas.",
    "Aqui voce descobre quanto comer sem complicacao.",
  ],
  gym: [
    "Foco na academia! Vamos registrar seu progresso.",
    "Seus objetivos de academia estao aqui. Um dia de cada vez.",
    "A academia e sua aliada. Registre o que conseguir.",
  ],
  suggestions: [
    "Sua opiniao e muito importante para nos.",
    "Conte o que gostaria de ver no app. Estamos ouvindo.",
    "Suas sugestoes fazem o app evoluir junto com voce.",
  ],
  heart: [
    "Vamos verificar seu coracao. Cuide da saude cardiovascular.",
    "O monitor cardiaco esta pronto. Coloque o dedo na camera.",
    "Seu coracao merece atencao. Vamos medir os batimentos.",
  ],
  rpg: [
    "Modo aventura ativado! O heroi e voce.",
    "Hora de evoluir seu personagem com treinos reais.",
    "Sua jornada epica continua. Vamos subir de nivel.",
  ],
  ghost: [
    "Ghost Mode ativado. Supere seu eu do passado.",
    "Vamos ver se voce consegue superar o desempenho anterior.",
    "Competir consigo mesmo e a melhor motivacao.",
  ],
  guild: [
    "Bem-vindo a guilda. Juntos somos mais fortes.",
    "Sua equipe te espera. Colaboracao, nao competicao.",
    "Entre nos, o apoio faz toda a diferenca.",
  ],
  notes: [
    "Suas anotacoes de treino estao aqui. Anote tudo que precisar.",
    "Planeje sua semana. Anotar ajuda a nao esquecer.",
    "Bloco de notas pronto. O que voce precisa lembrar?",
  ],
}

export function useAIAssistant() {
  const [prefs, setPrefsState] = useState<AIPreferences>(DEFAULT_PREFS)
  const [voices, setVoices] = useState<SpeechSynthesisVoice[]>([])
  const [isReady, setIsReady] = useState(false)
  const hasGreeted = useRef(false)
  const lastTabAnnounced = useRef<string>("")
  const isSpeaking = useRef(false)

useEffect(() => {
    const saved = localStorage.getItem("aiAssistantPrefs")
    if (saved) {
      try {
        const parsed = JSON.parse(saved)
        setPrefsState({ ...DEFAULT_PREFS, ...parsed })
      } catch {
        setPrefsState(DEFAULT_PREFS)
      }
    }

const loadVoices = () => {
      const available = window.speechSynthesis.getVoices()
      if (available.length > 0) {
        setVoices(available)
        setIsReady(true)
      }
    }

loadVoices()
    window.speechSynthesis.onvoiceschanged = loadVoices

return () => {
      window.speechSynthesis.onvoiceschanged = null
    }
  }, [])

const setPrefs = useCallback((newPrefs: AIPreferences) => {
    setPrefsState(newPrefs)
    localStorage.setItem("aiAssistantPrefs", JSON.stringify(newPrefs))
  }, [])

const getVoice = useCallback((): SpeechSynthesisVoice | null => {
    if (voices.length === 0) return null

const ptVoices = voices.filter(
      (v) => v.lang.startsWith("pt") || v.lang.startsWith("pt-BR")
    )

if (ptVoices.length === 0) return voices[0]

if (prefs.voiceGender === "female") {
      const female = ptVoices.filter(
        (v) =>
          v.name.toLowerCase().includes("female") ||
          v.name.toLowerCase().includes("feminino") ||
          v.name.toLowerCase().includes("luciana") ||
          v.name.toLowerCase().includes("vitoria") ||
          v.name.toLowerCase().includes("francisca") ||
          (!v.name.toLowerCase().includes("male") &&
            !v.name.toLowerCase().includes("masculino") &&
            !v.name.toLowerCase().includes("daniel"))
      )
      if (female.length > 0) return female[Math.min(prefs.voiceIndex, female.length - 1)]
    }

if (prefs.voiceGender === "male") {
      const male = ptVoices.filter(
        (v) =>
          v.name.toLowerCase().includes("male") ||
          v.name.toLowerCase().includes("masculino") ||
          v.name.toLowerCase().includes("daniel") ||
          v.name.toLowerCase().includes("ricardo")
      )
      if (male.length > 0) return male[Math.min(prefs.voiceIndex, male.length - 1)]
    }

return ptVoices[0]
  }, [voices, prefs.voiceGender, prefs.voiceIndex])

const speak = useCallback(
    (text: string, options?: { rate?: number; pitch?: number }) => {
      if (!prefs.enabled) return

window.speechSynthesis.cancel()
      isSpeaking.current = true
      const utterance = new SpeechSynthesisUtterance(text)
      utterance.lang = "pt-BR"
      utterance.rate = options?.rate ?? 0.95
      utterance.pitch = prefs.voiceGender === "female" ? (options?.pitch ?? 1.1) : (options?.pitch ?? 0.85)
      utterance.volume = 1
      utterance.onend = () => {
        isSpeaking.current = false
      }

const voice = getVoice()
      if (voice) utterance.voice = voice

window.speechSynthesis.speak(utterance)
    },
    [prefs.enabled, prefs.voiceGender, getVoice]
  )

const greet = useCallback(
    (userName?: string) => {
      if (hasGreeted.current || !prefs.enabled) return
      hasGreeted.current = true

const greeting = getGreeting()
      const target = userName ? `, ${userName}` : ""
      const msgs = TAB_MESSAGES.home
      const randomMsg = msgs[Math.floor(Math.random() * msgs.length)]
      const fullMessage = `${greeting}${target}! Aqui e ${prefs.name}. ${randomMsg}`

setTimeout(() => speak(fullMessage), 1200)
      return fullMessage
    },
    [prefs.enabled, prefs.name, speak]
  )

const announceTab = useCallback(
    (tab: string, userName?: string) => {
      if (!prefs.enabled) return
      if (tab === lastTabAnnounced.current) return
      if (isSpeaking.current) return

lastTabAnnounced.current = tab

const msgs = TAB_MESSAGES[tab] || TAB_MESSAGES.home
      const randomMsg = msgs[Math.floor(Math.random() * msgs.length)]
      const nameRef = userName ? `, ${userName}` : ""

// Fala curta e contextual sem saudacao completa (ja saudou na home)
      const fullMsg = `${randomMsg}`

setTimeout(() => speak(fullMsg, { rate: 1 }), 400)
      return fullMsg
    },
    [prefs.enabled, speak]
  )

const announceWorkoutStart = useCallback(() => {
    if (!prefs.enabled) return
    const msgs = [
      `O treino comecou! Eu, ${prefs.name}, vou te acompanhar. Faca no seu ritmo.`,
      `Vamos la! ${prefs.name} esta aqui com voce. Respeite seus limites.`,
      `Treino iniciado! Lembre-se: qualquer movimento e vitoria.`,
    ]
    const msg = msgs[Math.floor(Math.random() * msgs.length)]
    speak(msg)
    return msg
  }, [prefs.enabled, prefs.name, speak])

const announceWorkoutEnd = useCallback(
    (feeling?: "good" | "moderate" | "tired", duration?: number) => {
      if (!prefs.enabled) return
      const mins = duration ? Math.floor(duration / 60) : 0
      let msg = ""

if (feeling === "good") {
        msg = `Treino finalizado! ${mins > 0 ? `${mins} minutos` : "Um otimo treino"}. Voce esta incrivel! ${prefs.name} tem orgulho de voce.`
      } else if (feeling === "moderate") {
        msg = `Treino finalizado! Voce fez o que era possivel hoje e isso e o que importa. ${prefs.name} sabe que voce deu o seu melhor.`
      } else if (feeling === "tired") {
        msg = `Treino finalizado. Eu sei que foi dificil, mas voce tentou. E isso e uma vitoria. Descanse bem.`
      } else {
        msg = `Treino finalizado! Parabens por cuidar de voce hoje. ${prefs.name} vai estar aqui sempre que precisar.`
      }

speak(msg)
      return msg
    },
    [prefs.enabled, prefs.name, speak]
  )

return {
    prefs,
    setPrefs,
    speak,
    greet,
    announceTab,
    announceWorkoutStart,
    announceWorkoutEnd,
    voices,
    isReady,
    getGreeting: () => getGreeting(),
    aiName: prefs.name,
  }
}

// Settings component - salva automaticamente, usuario so configura uma vez
export function AISettings({
  prefs,
  setPrefs,
  voices,
}: {
  prefs: AIPreferences
  setPrefs: (p: AIPreferences) => void
  voices: SpeechSynthesisVoice[]
}) {
  const [showSettings, setShowSettings] = useState(!prefs.setupDone)
  const [customName, setCustomName] = useState(prefs.name)

const ptVoices = voices.filter((v) => v.lang.startsWith("pt"))

const testVoice = (name?: string, gender?: "female" | "male") => {
    window.speechSynthesis.cancel()
    const useName = name || prefs.name
    const useGender = gender || prefs.voiceGender
    const utterance = new SpeechSynthesisUtterance(
      `Ola! Eu sou ${useName}. Vou te acompanhar nos seus treinos.`
    )
    utterance.lang = "pt-BR"
    utterance.rate = 0.95
    utterance.pitch = useGender === "female" ? 1.1 : 0.85

const voice = ptVoices.length > 0 ? ptVoices[0] : voices[0]
    if (voice) utterance.voice = voice

window.speechSynthesis.speak(utterance)
  }

const handleSaveSetup = () => {
    setPrefs({ ...prefs, setupDone: true })
    setShowSettings(false)
  }

return (
    <Card className="bg-card border-border">
      <CardHeader className="pb-2">
        <button
          onClick={() => setShowSettings(!showSettings)}
          className="flex items-center justify-between w-full"
        >
          <CardTitle className="text-base text-foreground flex items-center gap-2">
            <Bot className="text-accent" size={20} />
            {prefs.setupDone ? prefs.name : "Configure seu Assistente"}
          </CardTitle>
          {showSettings ? (
            <ChevronUp className="text-muted-foreground" size={18} />
          ) : (
            <ChevronDown className="text-muted-foreground" size={18} />
          )}
        </button>
      </CardHeader>

{showSettings && (
        <CardContent className="space-y-5 pt-2">
          {/* Toggle */}
          <div className="flex items-center justify-between">
            <div>
              <p className="text-foreground font-medium text-sm">Voz ativada</p>
              <p className="text-muted-foreground text-xs">
                {prefs.name} fala em todas as telas do app
              </p>
            </div>
            <button
              onClick={() => setPrefs({ ...prefs, enabled: !prefs.enabled })}
              className={`w-12 h-7 rounded-full transition-colors relative ${
                prefs.enabled ? "bg-primary" : "bg-secondary"
              }`}
            >
              <div
                className={`w-5 h-5 rounded-full bg-foreground absolute top-1 transition-transform ${
                  prefs.enabled ? "translate-x-6" : "translate-x-1"
                }`}
              />
            </button>
          </div>

{prefs.enabled && (
            <>
              {/* Name Selection */}
              <div className="space-y-3">
                <p className="text-sm font-medium text-foreground">Escolha o nome da IA</p>
                <div className="grid grid-cols-3 gap-2">
                  {AI_NAME_SUGGESTIONS.map((item) => (
                    <button
                      key={item.name}
                      onClick={() => {
                        setPrefs({ ...prefs, name: item.name, voiceGender: item.gender })
                        setCustomName(item.name)
                        testVoice(item.name, item.gender)
                      }}
                      className={`px-3 py-2.5 rounded-xl text-sm font-medium transition-all ${
                        prefs.name === item.name
                          ? "bg-primary text-primary-foreground"
                          : "bg-secondary text-secondary-foreground hover:bg-secondary/80"
                      }`}
                    >
                      {item.name}
                      <span className="block text-xs opacity-60 mt-0.5">
                        {item.gender === "female" ? "Feminina" : "Masculina"}
                      </span>
                    </button>
                  ))}
                </div>

{/* Custom Name */}
                <div className="flex gap-2">
                  <Input
                    value={customName}
                    onChange={(e) => setCustomName(e.target.value)}
                    placeholder="Ou digite um nome..."
                    className="bg-secondary border-border text-foreground placeholder:text-muted-foreground text-sm"
                  />
                  <Button
                    onClick={() => {
                      if (customName.trim()) {
                        setPrefs({ ...prefs, name: customName.trim() })
                        testVoice(customName.trim())
                      }
                    }}
                    size="sm"
                    variant="outline"
                    className="border-primary/30 text-primary hover:bg-primary/10 shrink-0"
                  >
                    Salvar
                  </Button>
                </div>
              </div>

{/* Voice Gender */}
              <div className="space-y-3">
                <p className="text-sm font-medium text-foreground">Tipo de voz</p>
                <div className="grid grid-cols-2 gap-3">
                  <button
                    onClick={() => {
                      setPrefs({ ...prefs, voiceGender: "female" })
                      testVoice(prefs.name, "female")
                    }}
                    className={`p-4 rounded-xl border-2 transition-all text-center ${
                      prefs.voiceGender === "female"
                        ? "bg-accent/15 border-accent"
                        : "bg-secondary/30 border-border hover:border-muted-foreground/30"
                    }`}
                  >
                    <Mic
                      className={`mx-auto mb-2 ${
                        prefs.voiceGender === "female" ? "text-accent" : "text-muted-foreground"
                      }`}
                      size={24}
                    />
                    <p className="text-foreground font-semibold text-sm">Feminina</p>
                    <p className="text-muted-foreground text-xs mt-0.5">Voz suave</p>
                  </button>
                  <button
                    onClick={() => {
                      setPrefs({ ...prefs, voiceGender: "male" })
                      testVoice(prefs.name, "male")
                    }}
                    className={`p-4 rounded-xl border-2 transition-all text-center ${
                      prefs.voiceGender === "male"
                        ? "bg-chart-3/15 border-chart-3"
                        : "bg-secondary/30 border-border hover:border-muted-foreground/30"
                    }`}
                  >
                    <Mic
                      className={`mx-auto mb-2 ${
                        prefs.voiceGender === "male" ? "text-chart-3" : "text-muted-foreground"
                      }`}
                      size={24}
                    />
                    <p className="text-foreground font-semibold text-sm">Masculina</p>
                    <p className="text-muted-foreground text-xs mt-0.5">Voz firme</p>
                  </button>
                </div>
              </div>

{/* Save / Confirm */}
              {!prefs.setupDone && (
                <Button
                  onClick={handleSaveSetup}
                  className="w-full bg-primary hover:bg-primary/90 text-primary-foreground font-semibold"
                >
                  Pronto! Salvar e comecar
                </Button>
              )}

{prefs.setupDone && (
                <Button
                  onClick={() => testVoice()}
                  variant="outline"
                  className="w-full border-border hover:bg-secondary/50 text-foreground"
                >
                  <Volume2 size={16} className="mr-2 text-primary" />
                  Testar voz de {prefs.name}
                </Button>
              )}
            </>
          )}
        </CardContent>
      )}
    </Card>
  )
}

// Greeting banner shown on home
export function AIGreetingBanner({
  aiName,
  greeting,
  message,
  enabled,
  onSpeak,
  isPlaying,
}: {
  aiName: string
  greeting: string
  message: string
  enabled: boolean
  onSpeak: () => void
  isPlaying: boolean
}) {
  if (!enabled) return null

return (
    <Card className="bg-gradient-to-br from-accent/10 to-primary/10 border-accent/20 mb-6 overflow-hidden">
      <CardContent className="py-4">
        <div className="flex items-start gap-3">
          <button
            onClick={onSpeak}
            className="w-10 h-10 rounded-full bg-accent/15 flex items-center justify-center shrink-0 hover:bg-accent/25 transition-colors"
          >
            {isPlaying ? (
              <VolumeX className="text-accent" size={18} />
            ) : (
              <Volume2 className="text-accent" size={18} />
            )}
          </button>
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-1.5 mb-1">
              <Bot size={14} className="text-accent" />
              <p className="text-accent text-xs font-semibold">{aiName}</p>
            </div>
            <p className="text-foreground font-medium text-sm leading-relaxed">{greeting}</p>
            <p className="text-muted-foreground text-xs mt-1 leading-relaxed">{message}</p>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/motivational-voice.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Volume2, VolumeX, Bot } from "lucide-react"

interface MotivationalVoiceProps {
  context: "post-workout" | "daily-assessment" | "workout-complete" | "struggling-day" | "good-day"
  feeling?: "good" | "moderate" | "tired"
  overallFeeling?: "great" | "ok" | "struggling"
  duration?: number
}

const motivationalMessages = {
  "post-workout": {
    good: [
      "Voce esta incrivel! Continue ouvindo seu corpo assim.",
      "Que treino maravilhoso! Voce respeitou seus limites.",
      "Cada movimento seu e uma vitoria. Parabens!",
    ],
    moderate: [
      "Voce fez o melhor que podia hoje, e isso e o que importa.",
      "Treinar com sabedoria e um sinal de forca, nao fraqueza.",
      "Se cansar, respire. Voce ouviu seu corpo e isso e perfeito!",
    ],
    tired: [
      "Eu sei que hoje foi dificil, mas voce tentou.",
      "Um minuto de treino tambem e vitoria.",
      "Talvez ninguem veja seu esforco, mas ele existe.",
    ],
  },
  "daily-assessment": [
    "Antes de tudo, queremos saber: como seu corpo esta hoje?",
    "Nao existe certo ou errado. Existe o que voce consegue.",
    "Vamos descobrir juntos o que seu corpo precisa hoje.",
  ],
  "struggling-day": [
    "Hoje nao e dia de forca. E dia de cuidado. E tudo bem.",
    "Respeitar seus limites e a maior forca que existe.",
    "Dias dificeis fazem parte. Vamos cuidar de voce hoje.",
    "Um pequeno movimento hoje e uma vitoria amanha.",
  ],
  "good-day": [
    "Que alegria ver voce bem! Vamos aproveitar esse momento!",
    "Seu corpo esta pedindo movimento. Vamos la!",
    "Dias assim merecem ser celebrados com um bom treino!",
  ],
  "workout-complete": [
    "Missao cumprida! Voce cuidou de si mesmo hoje.",
    "Cada treino e um passo na sua caminhada.",
    "Voce merece se orgulhar desse momento.",
  ],
}

export function MotivationalVoice({ context, feeling }: MotivationalVoiceProps) {
  const [message, setMessage] = useState("")
  const [isPlaying, setIsPlaying] = useState(false)
  const [autoPlayDone, setAutoPlayDone] = useState(false)

useEffect(() => {
    let messages: string[] = []

if (context === "post-workout" && feeling) {
      messages = motivationalMessages["post-workout"][feeling]
    } else if (context === "struggling-day") {
      messages = motivationalMessages["struggling-day"]
    } else if (context === "good-day") {
      messages = motivationalMessages["good-day"]
    } else if (context === "daily-assessment") {
      messages = motivationalMessages["daily-assessment"]
    } else if (context === "workout-complete") {
      messages = motivationalMessages["workout-complete"]
    }

const randomMessage = messages[Math.floor(Math.random() * messages.length)]
    setMessage(randomMessage)

if (!autoPlayDone) {
      const timer = setTimeout(() => {
        speakMessage(randomMessage)
        setAutoPlayDone(true)
      }, 1000)

return () => clearTimeout(timer)
    }
  }, [context, feeling, autoPlayDone])

const speakMessage = (text: string) => {
    window.speechSynthesis.cancel()

if (isPlaying) {
      setIsPlaying(false)
      return
    }

const utterance = new SpeechSynthesisUtterance(text)
    utterance.lang = "pt-BR"
    utterance.rate = 0.9
    utterance.pitch = 1.1
    utterance.volume = 1

// Use saved AI voice preference
    try {
      const savedPrefs = localStorage.getItem("aiAssistantPrefs")
      if (savedPrefs) {
        const prefs = JSON.parse(savedPrefs)
        utterance.pitch = prefs.voiceGender === "female" ? 1.1 : 0.85
        const voices = window.speechSynthesis.getVoices()
        const ptVoices = voices.filter((v) => v.lang.startsWith("pt"))
        if (ptVoices.length > 0) utterance.voice = ptVoices[0]
      }
    } catch {
      // Use defaults
    }

utterance.onstart = () => setIsPlaying(true)
    utterance.onend = () => setIsPlaying(false)
    utterance.onerror = () => setIsPlaying(false)

window.speechSynthesis.speak(utterance)
  }

// Get AI name
  let aiName = "Assistente"
  try {
    const savedPrefs = localStorage.getItem("aiAssistantPrefs")
    if (savedPrefs) {
      aiName = JSON.parse(savedPrefs).name || "Assistente"
    }
  } catch {
    // Use default
  }

return (
    <Card className="bg-gradient-to-br from-accent/10 to-primary/10 border-accent/20">
      <CardContent className="p-4">
        <div className="flex items-start gap-3">
          <Button
            onClick={() => speakMessage(message)}
            size="icon"
            variant="ghost"
            className="text-accent hover:text-accent/80 hover:bg-accent/15 shrink-0"
          >
            {isPlaying ? <VolumeX size={22} /> : <Volume2 size={22} />}
          </Button>
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-1.5 mb-1">
              <Bot size={14} className="text-accent" />
              <p className="text-accent text-xs font-semibold">{aiName}</p>
            </div>
            <p className="text-foreground text-sm font-medium leading-relaxed">{message}</p>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/login-screen.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Heart, Mail, Lock, Eye, EyeOff, UserPlus, LogIn } from "lucide-react"

interface LoginScreenProps {
  onLogin: (user: { name: string; email: string }) => void
}

export function LoginScreen({ onLogin }: LoginScreenProps) {
  const [isRegistering, setIsRegistering] = useState(false)
  const [showPassword, setShowPassword] = useState(false)
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [name, setName] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [error, setError] = useState("")
  const [isLoading, setIsLoading] = useState(false)

const handleLogin = () => {
    setError("")
    if (!email.trim() || !password.trim()) {
      setError("Preencha todos os campos.")
      return
    }
    if (!email.includes("@")) {
      setError("Digite um e-mail valido.")
      return
    }

setIsLoading(true)

// Check saved users
    const savedUsers = JSON.parse(localStorage.getItem("mp_users") || "[]")
    const user = savedUsers.find((u: { email: string; password: string }) => u.email === email)

if (!user) {
      setIsLoading(false)
      setError("E-mail nao encontrado. Crie uma conta primeiro.")
      return
    }

if (user.password !== password) {
      setIsLoading(false)
      setError("Senha incorreta. Tente novamente.")
      return
    }

setTimeout(() => {
      localStorage.setItem("mp_session", JSON.stringify({ name: user.name, email: user.email, loggedAt: Date.now() }))
      setIsLoading(false)
      onLogin({ name: user.name, email: user.email })
    }, 800)
  }

const handleRegister = () => {
    setError("")
    if (!name.trim() || !email.trim() || !password.trim() || !confirmPassword.trim()) {
      setError("Preencha todos os campos.")
      return
    }
    if (!email.includes("@")) {
      setError("Digite um e-mail valido.")
      return
    }
    if (password.length < 4) {
      setError("A senha deve ter pelo menos 4 caracteres.")
      return
    }
    if (password !== confirmPassword) {
      setError("As senhas nao coincidem.")
      return
    }

setIsLoading(true)

const savedUsers = JSON.parse(localStorage.getItem("mp_users") || "[]")
    const exists = savedUsers.find((u: { email: string }) => u.email === email)

if (exists) {
      setIsLoading(false)
      setError("Esse e-mail ja esta cadastrado.")
      return
    }

const newUser = { name: name.trim(), email: email.trim(), password }
    savedUsers.push(newUser)
    localStorage.setItem("mp_users", JSON.stringify(savedUsers))

setTimeout(() => {
      localStorage.setItem("mp_session", JSON.stringify({ name: newUser.name, email: newUser.email, loggedAt: Date.now() }))
      setIsLoading(false)
      onLogin({ name: newUser.name, email: newUser.email })
    }, 800)
  }

return (
    <div className="min-h-screen bg-background flex flex-col items-center justify-center px-4">
      {/* Logo area */}
      <div className="mb-8 text-center">
        <div className="w-16 h-16 rounded-2xl bg-primary/15 flex items-center justify-center mx-auto mb-4">
          <Heart className="text-primary" size={32} />
        </div>
        <h1 className="text-2xl font-bold text-foreground text-balance">Movimento Possivel</h1>
        <p className="text-muted-foreground text-sm mt-1">Cuidado que transforma</p>
      </div>

{/* Login card */}
      <Card className="w-full max-w-sm bg-card border-border">
        <CardHeader className="pb-4">
          <CardTitle className="text-lg text-foreground text-center">
            {isRegistering ? "Criar conta" : "Entrar"}
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {isRegistering && (
            <div className="space-y-2">
              <label className="text-sm text-muted-foreground font-medium" htmlFor="name">
                Seu nome
              </label>
              <div className="relative">
                <UserPlus className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={16} />
                <Input
                  id="name"
                  type="text"
                  placeholder="Como quer ser chamado?"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  className="pl-10 bg-secondary border-border text-foreground placeholder:text-muted-foreground"
                />
              </div>
            </div>
          )}

<div className="space-y-2">
            <label className="text-sm text-muted-foreground font-medium" htmlFor="email">
              E-mail
            </label>
            <div className="relative">
              <Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={16} />
              <Input
                id="email"
                type="email"
                placeholder="seu@email.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="pl-10 bg-secondary border-border text-foreground placeholder:text-muted-foreground"
                onKeyDown={(e) => e.key === "Enter" && !isRegistering && handleLogin()}
              />
            </div>
          </div>

<div className="space-y-2">
            <label className="text-sm text-muted-foreground font-medium" htmlFor="password">
              Senha
            </label>
            <div className="relative">
              <Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={16} />
              <Input
                id="password"
                type={showPassword ? "text" : "password"}
                placeholder="Sua senha"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="pl-10 pr-10 bg-secondary border-border text-foreground placeholder:text-muted-foreground"
                onKeyDown={(e) => e.key === "Enter" && !isRegistering && handleLogin()}
              />
              <button
                type="button"
                onClick={() => setShowPassword(!showPassword)}
                className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
                aria-label={showPassword ? "Esconder senha" : "Mostrar senha"}
              >
                {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
              </button>
            </div>
          </div>

{isRegistering && (
            <div className="space-y-2">
              <label className="text-sm text-muted-foreground font-medium" htmlFor="confirmPassword">
                Confirmar senha
              </label>
              <div className="relative">
                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={16} />
                <Input
                  id="confirmPassword"
                  type={showPassword ? "text" : "password"}
                  placeholder="Repita a senha"
                  value={confirmPassword}
                  onChange={(e) => setConfirmPassword(e.target.value)}
                  className="pl-10 bg-secondary border-border text-foreground placeholder:text-muted-foreground"
                  onKeyDown={(e) => e.key === "Enter" && handleRegister()}
                />
              </div>
            </div>
          )}

{/* Error */}
          {error && (
            <div className="bg-destructive/10 border border-destructive/30 rounded-lg p-3">
              <p className="text-destructive text-sm text-center">{error}</p>
            </div>
          )}

{/* Submit */}
          <Button
            onClick={isRegistering ? handleRegister : handleLogin}
            className="w-full bg-primary hover:bg-primary/90 text-primary-foreground font-semibold py-5"
            disabled={isLoading}
          >
            {isLoading ? (
              <div className="w-5 h-5 border-2 border-primary-foreground/30 border-t-primary-foreground rounded-full animate-spin" />
            ) : isRegistering ? (
              <>
                <UserPlus size={18} className="mr-2" />
                Criar conta
              </>
            ) : (
              <>
                <LogIn size={18} className="mr-2" />
                Entrar
              </>
            )}
          </Button>

{/* Toggle */}
          <div className="text-center pt-2">
            <button
              onClick={() => {
                setIsRegistering(!isRegistering)
                setError("")
              }}
              className="text-sm text-primary hover:underline"
            >
              {isRegistering ? "Ja tenho conta. Entrar" : "Nao tenho conta. Criar agora"}
            </button>
          </div>
        </CardContent>
      </Card>

{/* Footer message */}
      <p className="text-muted-foreground text-xs text-center mt-6 max-w-xs leading-relaxed">
        Seu progresso nao e sobre perfeicao. E sobre aparecer, tentar e cuidar de voce.
      </p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/possible-day.tsx" isMerged="true"
"use client"

import { useState, useEffect, useCallback, useRef } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Heart, ArrowLeft } from "lucide-react"

interface PossibleDayEntryProps {
  onSelect: (level: "some" | "little" | "try") => void
  aiSpeak?: (text: string) => void
  aiName?: string
  userName?: string
}

export function PossibleDayEntry({ onSelect, aiSpeak, aiName = "Leo", userName }: PossibleDayEntryProps) {
  const [visible, setVisible] = useState(false)

useEffect(() => {
    setTimeout(() => setVisible(true), 200)
    if (aiSpeak) {
      setTimeout(() => {
        aiSpeak(`${userName ? `${userName}, ` : ""}O que e possivel hoje?`)
      }, 600)
    }
  }, [])

const options = [
    {
      value: "some" as const,
      label: "Pouco",
      description: "Consigo me movimentar",
    },
    {
      value: "little" as const,
      label: "Muito pouco",
      description: "Vou fazer o minimo",
    },
    {
      value: "try" as const,
      label: "So tentar",
      description: "Nao sei se consigo",
    },
  ]

return (
    <div className={`flex flex-col items-center justify-center min-h-[70vh] transition-opacity duration-700 ${visible ? "opacity-100" : "opacity-0"}`}>
      <div className="w-14 h-14 rounded-2xl bg-primary/10 flex items-center justify-center mb-8">
        <Heart className="text-primary" size={28} />
      </div>

<h1 className="text-2xl font-bold text-foreground text-center mb-2 text-balance">
        O que e possivel hoje?
      </h1>
      <p className="text-muted-foreground text-sm text-center mb-10 max-w-xs text-pretty leading-relaxed">
        Nao existe certo ou errado. Existe o que voce consegue.
      </p>

<div className="w-full max-w-sm space-y-3">
        {options.map((option) => (
          <button
            key={option.value}
            onClick={() => onSelect(option.value)}
            className="w-full p-5 rounded-2xl border border-border bg-card hover:bg-secondary/50 transition-all text-left group"
          >
            <p className="text-foreground font-semibold text-base group-hover:text-primary transition-colors">
              {option.label}
            </p>
            <p className="text-muted-foreground text-sm mt-0.5">{option.description}</p>
          </button>
        ))}
      </div>
    </div>
  )
}

// Treino silencioso com frases raras da IA
interface PossibleDayWorkoutProps {
  level: "some" | "little" | "try"
  onStop: () => void
  onFinish: () => void
  aiSpeak?: (text: string) => void
  aiName?: string
}

export function PossibleDayWorkout({ level, onStop, onFinish, aiSpeak, aiName = "Leo" }: PossibleDayWorkoutProps) {
  const [elapsed, setElapsed] = useState(0)
  const [started] = useState(Date.now())
  const [currentPhrase, setCurrentPhrase] = useState("")
  const [showPhrase, setShowPhrase] = useState(false)
  const phraseIndex = useRef(0)
  const lastPhraseTime = useRef(0)

// Frases raras - so aparecem de vez em quando
  const phrases = [
    "Ta tudo bem parar.",
    "Voce ainda esta aqui.",
    "Movimento ja e suficiente.",
    "Respeitar o corpo e forca.",
    "Nao precisa provar nada.",
    "Cada segundo aqui importa.",
  ]

useEffect(() => {
    const timer = setInterval(() => {
      setElapsed(Math.floor((Date.now() - started) / 1000))
    }, 1000)
    return () => clearInterval(timer)
  }, [started])

// Mostrar frase rara a cada 90-120 segundos
  useEffect(() => {
    if (elapsed > 0 && elapsed - lastPhraseTime.current > 90 + Math.random() * 30) {
      const phrase = phrases[phraseIndex.current % phrases.length]
      setCurrentPhrase(phrase)
      setShowPhrase(true)
      lastPhraseTime.current = elapsed
      phraseIndex.current++

if (aiSpeak) {
        aiSpeak(phrase)
      }

setTimeout(() => setShowPhrase(false), 6000)
    }
  }, [elapsed])

const formatTime = (secs: number) => {
    const m = Math.floor(secs / 60)
    const s = secs % 60
    return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`
  }

const levelText = {
    some: "Fazendo o possivel",
    little: "Fazendo o minimo",
    try: "Tentando",
  }

const handleStop = () => {
    // Se parar no meio, a IA agradece
    if (aiSpeak) {
      aiSpeak("Obrigado por respeitar seu corpo.")
    }
    onStop()
  }

return (
    <div className="flex flex-col items-center justify-center min-h-[70vh]">
      {/* Minimal timer */}
      <p className="text-muted-foreground text-xs uppercase tracking-widest mb-3">{levelText[level]}</p>
      <div className="text-6xl font-bold text-foreground font-mono mb-8">{formatTime(elapsed)}</div>

{/* Rare phrase from AI */}
      <div className={`h-16 flex items-center justify-center transition-opacity duration-1000 ${showPhrase ? "opacity-100" : "opacity-0"}`}>
        {showPhrase && (
          <p className="text-muted-foreground text-sm text-center italic max-w-xs">
            {currentPhrase}
          </p>
        )}
      </div>

{/* Two simple buttons */}
      <div className="w-full max-w-sm space-y-3 mt-8">
        <Button
          onClick={onFinish}
          className="w-full bg-primary/10 hover:bg-primary/20 text-primary border border-primary/20 font-medium py-6"
          variant="ghost"
        >
          Terminei
        </Button>
        <Button
          onClick={handleStop}
          variant="ghost"
          className="w-full text-muted-foreground hover:text-foreground py-6"
        >
          Preciso parar
        </Button>
      </div>
    </div>
  )
}

// Tela final - sem score, sem parabenizar. Apenas respeito.
interface PossibleDayEndProps {
  stoppedEarly: boolean
  elapsed: number
  onClose: () => void
  aiSpeak?: (text: string) => void
  aiName?: string
  possibleDaysCount?: number
}

export function PossibleDayEnd({ stoppedEarly, elapsed, onClose, aiSpeak, aiName = "Leo", possibleDaysCount = 0 }: PossibleDayEndProps) {
  const [visible, setVisible] = useState(false)
  const [showMilestone, setShowMilestone] = useState(false)
  const spokenRef = useRef(false)

useEffect(() => {
    setTimeout(() => setVisible(true), 300)

if (aiSpeak && !spokenRef.current) {
      spokenRef.current = true
      const msg = stoppedEarly
        ? "Obrigado por respeitar seu corpo."
        : "Hoje voce nao se abandonou."
      setTimeout(() => aiSpeak(msg), 800)
    }

// Milestone: 5 dias possiveis
    if (possibleDaysCount >= 5 && possibleDaysCount % 5 === 0) {
      setTimeout(() => {
        setShowMilestone(true)
        if (aiSpeak) {
          aiSpeak("Voce tem aprendido a nao se violentar para evoluir.")
        }
      }, 4000)
    }
  }, [])

return (
    <div className={`flex flex-col items-center justify-center min-h-[70vh] transition-opacity duration-1000 ${visible ? "opacity-100" : "opacity-0"}`}>
      <div className="max-w-sm text-center">
        {/* Main message - no congratulations, just respect */}
        <p className="text-xl font-semibold text-foreground leading-relaxed mb-12 text-balance">
          {stoppedEarly
            ? "Obrigado por respeitar seu corpo."
            : "Hoje voce nao se abandonou."}
        </p>

{/* Milestone message */}
        {showMilestone && (
          <div className="mb-12 transition-opacity duration-1000 opacity-100">
            <div className="border border-border rounded-2xl p-6 bg-card">
              <p className="text-muted-foreground text-sm leading-relaxed text-pretty">
                Voce tem aprendido a nao se violentar para evoluir.
              </p>
              <p className="text-xs text-muted-foreground/60 mt-3">
                {possibleDaysCount} dias possiveis
              </p>
            </div>
          </div>
        )}

{/* No button, no score. Just a subtle way to go back after reading */}
        <button
          onClick={onClose}
          className="text-muted-foreground/50 text-xs hover:text-muted-foreground transition-colors mt-8"
        >
          voltar
        </button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import {
  Plus,
  TrendingUp,
  Activity,
  Calendar,
  Sparkles,
  BookOpen,
  Heart,
  Droplet,
  Moon,
  Footprints,
  Utensils,
  Target,
  MessageSquare,
  Home,
  Sword,
  Ghost,
  Users,
  StickyNote,
  ChevronRight,
  Flame,
  Clock,
  Bot,
  LogOut,
} from "lucide-react"
import { WorkoutTracker } from "@/components/workout-tracker"
import { WeeklyStats } from "@/components/weekly-stats"
import { WorkoutHistory } from "@/components/workout-history"
import { WeeklyPlan } from "@/components/weekly-plan"
import { DailyAssessment, type DailyCondition } from "@/components/daily-assessment"
import { AdaptedWorkout } from "@/components/adapted-workout"
import { MyJourney } from "@/components/my-journey"
import { EverydayExercises } from "@/components/everyday-exercises"
import { RealAchievements } from "@/components/real-achievements"
import { WaterTracker } from "@/components/water-tracker"
import { SleepTracker } from "@/components/sleep-tracker"
import { WalkTracker } from "@/components/walk-tracker"
import { CalorieTracker } from "@/components/calorie-tracker"
import { PortionGuide } from "@/components/portion-guide"
import { GymFocus } from "@/components/gym-focus"
import { Suggestions } from "@/components/suggestions"
import { WelcomeMessage } from "@/components/welcome-message"
import { DailySummary } from "@/components/daily-summary"
import { HeartMonitor } from "@/components/heart-monitor"
import { FitnessRPG } from "@/components/fitness-rpg"
import { GhostMode } from "@/components/ghost-mode"
import { GuildSystem } from "@/components/guild-system"
import { WorkoutNotes } from "@/components/workout-notes"
import { useAIAssistant, AISettings, AIGreetingBanner } from "@/components/ai-assistant"
import { LoginScreen } from "@/components/login-screen"
import { PossibleDayEntry, PossibleDayWorkout, PossibleDayEnd } from "@/components/possible-day"

export interface Workout {
  id: string
  date: string
  feeling: "good" | "moderate" | "tired"
  duration: number
  type?: string
  notes?: string
}

const NAV_ITEMS: { id: ActiveTab; icon: typeof Home; label: string }[] = [
  { id: "home", icon: Home, label: "Inicio" },
  { id: "heart", icon: Heart, label: "Coracao" },
  { id: "water", icon: Droplet, label: "Agua" },
  { id: "sleep", icon: Moon, label: "Sono" },
  { id: "walk", icon: Footprints, label: "Passos" },
]

const NAV_ITEMS_ROW2: { id: ActiveTab; icon: typeof Home; label: string }[] = [
  { id: "calories", icon: Utensils, label: "Calorias" },
  { id: "gym", icon: Target, label: "Foco" },
  { id: "notes", icon: StickyNote, label: "Notas" },
  { id: "rpg", icon: Sword, label: "RPG" },
  { id: "suggestions", icon: MessageSquare, label: "Feedback" },
]

export default function WorkoutApp() {
  const [workouts, setWorkouts] = useState<Workout[]>([])
  const [isTraining, setIsTraining] = useState(false)
  const [showWeeklyPlan, setShowWeeklyPlan] = useState(false)
  const [showDailyAssessment, setShowDailyAssessment] = useState(false)
  const [dailyCondition, setDailyCondition] = useState<DailyCondition | null>(null)
  const [showJourney, setShowJourney] = useState(false)
  const [showEverydayExercises, setShowEverydayExercises] = useState(false)
  const [showAchievements, setShowAchievements] = useState(false)
  const [mounted, setMounted] = useState(false)
  const [activeTab, setActiveTab] = useState<ActiveTab>("home")
  const [showWelcome, setShowWelcome] = useState(false)
  const [greetingMessage, setGreetingMessage] = useState("")
  const [greetingPhrase, setGreetingPhrase] = useState("")
  const [isPlayingGreeting, setIsPlayingGreeting] = useState(false)
  const [isLoggedIn, setIsLoggedIn] = useState(false)
  const [userName, setUserName] = useState("")

const ai = useAIAssistant()

// Check for existing session on mount
  useEffect(() => {
    setMounted(true)

const session = localStorage.getItem("mp_session")
    if (session) {
      try {
        const parsed = JSON.parse(session)
        setIsLoggedIn(true)
        setUserName(parsed.name || "")
      } catch {
        setIsLoggedIn(false)
      }
    }

const saved = localStorage.getItem("workouts")
    if (saved) {
      setWorkouts(JSON.parse(saved))
    }
    const hasSeenWelcome = localStorage.getItem("hasSeenWelcome")
    if (!hasSeenWelcome) {
      setShowWelcome(true)
    }
  }, [])

const handleLogin = (user: { name: string; email: string }) => {
    setIsLoggedIn(true)
    setUserName(user.name)
    // Set greeting text immediately
    const greeting = ai.getGreeting()
    setGreetingPhrase(`${greeting}, ${user.name}! Aqui e ${ai.aiName}.`)
    setGreetingMessage("Que bom te ver! Vamos cuidar de voce.")
    // AI greets with voice (small delay so voices load)
    setTimeout(() => {
      if (ai.prefs.enabled) {
        const msg = `${greeting}, ${user.name}! Aqui e ${ai.aiName}. Que bom te ver! Vamos cuidar de voce.`
        ai.speak(msg)
      }
    }, 800)
  }

const handleLogout = () => {
    if (ai.prefs.enabled) {
      const hour = new Date().getHours()
      const name = userName || ""
      let goodbye = ""
      if (hour >= 5 && hour < 12) {
        goodbye = `Ate mais${name ? `, ${name}` : ""}! Tenha uma otima manha. ${ai.aiName} vai estar aqui quando voce voltar.`
      } else if (hour >= 12 && hour < 18) {
        goodbye = `Ate mais${name ? `, ${name}` : ""}! Tenha uma boa tarde. Descanse e cuide de voce.`
      } else {
        goodbye = `Boa noite${name ? `, ${name}` : ""}! Descanse bem. Amanha ${ai.aiName} vai estar aqui te esperando.`
      }
      ai.speak(goodbye)
    }

setTimeout(() => {
      localStorage.removeItem("mp_session")
      setIsLoggedIn(false)
      setUserName("")
      setGreetingPhrase("")
      setGreetingMessage("")
    }, 600)
  }

// AI greeting on mount (only if already logged in on page load)
  useEffect(() => {
    if (mounted && !showWelcome && isLoggedIn && ai.isReady && ai.prefs.enabled && !greetingPhrase) {
      const greeting = ai.getGreeting()
      const nameRef = userName ? `, ${userName}` : ""
      setGreetingPhrase(`${greeting}${nameRef}! Aqui e ${ai.aiName}.`)
      const timeCtx = new Date().getHours()
      let ctx = "morning"
      if (timeCtx >= 12 && timeCtx < 18) ctx = "afternoon"
      else if (timeCtx >= 18 || timeCtx < 5) ctx = "evening"
      const msgs: Record<string, string[]> = {
        morning: ["Que bom te ver aqui de manha!", "Um novo dia, uma nova chance de cuidar de voce."],
        afternoon: ["Como esta sendo seu dia?", "A tarde tambem e hora de cuidar de voce."],
        evening: ["A noite chegou. Descanse ou se movimente, voce decide.", "Que bom que voce apareceu."],
      }
      const randomMsg = msgs[ctx][Math.floor(Math.random() * msgs[ctx].length)]
      setGreetingMessage(randomMsg)
      ai.greet(userName || undefined)
    }
  }, [mounted, showWelcome, isLoggedIn, ai.isReady])

// AI anuncia ao trocar de aba
  useEffect(() => {
    if (mounted && isLoggedIn && ai.isReady && ai.prefs.enabled && activeTab !== "home") {
      ai.announceTab(activeTab, userName || undefined)
    }
  }, [activeTab, mounted, isLoggedIn, ai.isReady])

useEffect(() => {
    if (mounted) {
      localStorage.setItem("workouts", JSON.stringify(workouts))
    }
  }, [workouts, mounted])

const getWeeklyWorkouts = () => {
    const now = new Date()
    const weekStart = new Date(now)
    weekStart.setDate(now.getDate() - now.getDay())
    weekStart.setHours(0, 0, 0, 0)
    return workouts.filter((workout) => new Date(workout.date) >= weekStart)
  }

const handleFinishWorkout = (feeling: "good" | "moderate" | "tired", duration: number, notes?: string) => {
    const newWorkout: Workout = {
      id: Date.now().toString(),
      date: new Date().toISOString(),
      feeling,
      duration,
      notes,
    }
    setWorkouts([newWorkout, ...workouts])
    setIsTraining(false)
    setDailyCondition(null)
    ai.announceWorkoutEnd(feeling, duration)
  }

const handleStartTraining = () => {
    setIsTraining(true)
    ai.announceWorkoutStart()
  }

const handleAssessmentComplete = (condition: DailyCondition) => {
    setDailyCondition(condition)
    setShowDailyAssessment(false)
  }

const handleStartAdaptedWorkout = () => {
    setDailyCondition(null)
    handleStartTraining()
  }

const handleCloseWelcome = () => {
    setShowWelcome(false)
    localStorage.setItem("hasSeenWelcome", "true")
  }

const weeklyWorkouts = getWeeklyWorkouts()
  const goodWorkouts = weeklyWorkouts.filter((w) => w.feeling === "good").length
  const totalMinutes = weeklyWorkouts.reduce((sum, w) => sum + Math.floor(w.duration / 60), 0)

if (!mounted) return null
  if (!isLoggedIn) return <LoginScreen onLogin={handleLogin} />
  if (showWelcome) return <WelcomeMessage onClose={handleCloseWelcome} />

const renderTabContent = () => {
    switch (activeTab) {
      case "water": return <WaterTracker />
      case "sleep": return <SleepTracker />
      case "walk": return <WalkTracker />
      case "calories": return <CalorieTracker />
      case "portions": return <PortionGuide />
      case "gym": return <GymFocus />
      case "suggestions": return <Suggestions />
      case "heart": return <HeartMonitor />
      case "rpg": return <FitnessRPG onBack={() => setActiveTab("home")} />
      case "ghost": return <GhostMode onBack={() => setActiveTab("home")} />
      case "guild": return <GuildSystem onBack={() => setActiveTab("home")} />
      case "notes": return <WorkoutNotes />
      default: return renderHomeContent()
    }
  }

const renderHomeContent = () => {
    if (isTraining) {
      return <WorkoutTracker onFinish={handleFinishWorkout} onCancel={() => setIsTraining(false)} />
    }
    if (showWeeklyPlan) {
      return <WeeklyPlan onBack={() => setShowWeeklyPlan(false)} />
    }
    if (showDailyAssessment) {
      return <DailyAssessment onComplete={handleAssessmentComplete} onCancel={() => setShowDailyAssessment(false)} />
    }
    if (dailyCondition) {
      return (
        <AdaptedWorkout
          condition={dailyCondition}
          onStartWorkout={handleStartAdaptedWorkout}
          onBack={() => setDailyCondition(null)}
        />
      )
    }
    if (showJourney) {
      return <MyJourney workouts={workouts} onBack={() => setShowJourney(false)} />
    }
    if (showEverydayExercises) {
      return <EverydayExercises onBack={() => setShowEverydayExercises(false)} />
    }
    if (showAchievements) {
      return <RealAchievements workouts={workouts} onBack={() => setShowAchievements(false)} />
    }

return (
      <>
        {/* AI Greeting */}
        <AIGreetingBanner
          aiName={ai.aiName}
          greeting={greetingPhrase || `${ai.getGreeting()}${userName ? `, ${userName}` : ""}! Aqui e ${ai.aiName}.`}
          message={greetingMessage || "Que bom ter voce aqui. Vamos cuidar de voce."}
          enabled={ai.prefs.enabled}
          onSpeak={() => {
            if (isPlayingGreeting) {
              window.speechSynthesis.cancel()
              setIsPlayingGreeting(false)
            } else {
              setIsPlayingGreeting(true)
              ai.speak(`${greetingPhrase} ${greetingMessage}`)
              setTimeout(() => setIsPlayingGreeting(false), 5000)
            }
          }}
          isPlaying={isPlayingGreeting}
        />

{/* AI Settings */}
        <div className="mb-6">
          <AISettings prefs={ai.prefs} setPrefs={ai.setPrefs} voices={ai.voices} />
        </div>

{/* Daily Summary */}
        <DailySummary />

{/* Motivational Banner */}
        <Card className="bg-secondary/50 border-border mb-6 overflow-hidden relative">
          <div className="absolute inset-0 bg-gradient-to-r from-primary/5 to-accent/5" />
          <CardContent className="py-5 relative">
            <p className="text-muted-foreground text-center text-sm leading-relaxed">
              <span className="text-foreground font-semibold text-base">Seu progresso nao e sobre perfeicao.</span>
              <br />
              {"E sobre aparecer, tentar e cuidar de voce."}
            </p>
          </CardContent>
        </Card>

{/* Stats Grid */}
        <div className="grid grid-cols-3 gap-3 mb-6">
          <Card className="bg-card border-border">
            <CardContent className="py-4 px-3 text-center">
              <div className="flex items-center justify-center mb-2">
                <div className="w-8 h-8 rounded-full bg-primary/15 flex items-center justify-center">
                  <Flame className="text-primary" size={16} />
                </div>
              </div>
              <div className="text-2xl font-bold text-foreground">{weeklyWorkouts.length}</div>
              <p className="text-xs text-muted-foreground mt-0.5">Treinos</p>
            </CardContent>
          </Card>

<Card className="bg-card border-border">
            <CardContent className="py-4 px-3 text-center">
              <div className="flex items-center justify-center mb-2">
                <div className="w-8 h-8 rounded-full bg-accent/15 flex items-center justify-center">
                  <TrendingUp className="text-accent" size={16} />
                </div>
              </div>
              <div className="text-2xl font-bold text-foreground">{goodWorkouts}</div>
              <p className="text-xs text-muted-foreground mt-0.5">Confortaveis</p>
            </CardContent>
          </Card>

<Card className="bg-card border-border">
            <CardContent className="py-4 px-3 text-center">
              <div className="flex items-center justify-center mb-2">
                <div className="w-8 h-8 rounded-full bg-chart-3/15 flex items-center justify-center">
                  <Clock className="text-chart-3" size={16} />
                </div>
              </div>
              <div className="text-2xl font-bold text-foreground">{totalMinutes}<span className="text-sm font-normal text-muted-foreground">min</span></div>
              <p className="text-xs text-muted-foreground mt-0.5">Tempo total</p>
            </CardContent>
          </Card>
        </div>

{/* Main Actions */}
        <div className="space-y-3 mb-6">
          <Button
            onClick={() => setShowDailyAssessment(true)}
            size="lg"
            className="w-full bg-primary hover:bg-primary/90 text-primary-foreground font-semibold py-6 text-base"
          >
            <Sparkles className="mr-2" size={20} />
            Como Meu Corpo Esta Hoje
          </Button>
          <Button
            onClick={handleStartTraining}
            size="lg"
            variant="outline"
            className="w-full border-primary/30 hover:bg-primary/10 text-foreground font-semibold py-6 text-base"
          >
            <Plus className="mr-2" size={20} />
            Iniciar Treino
          </Button>
        </div>

{/* Quick Access Cards */}
        <div className="space-y-2 mb-6">
          <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider px-1">Acesso rapido</h2>

<div className="space-y-2">
            {[
              { label: "Minha Caminhada", desc: "Diario de evolucao", icon: BookOpen, onClick: () => setShowJourney(true), color: "text-chart-1" },
              { label: "Treinar Sem Perceber", desc: "Exercicios do dia a dia", icon: Activity, onClick: () => setShowEverydayExercises(true), color: "text-chart-2" },
              { label: "Conquistas da Vida Real", desc: "Seus objetivos reais", icon: TrendingUp, onClick: () => setShowAchievements(true), color: "text-chart-3" },
              { label: "Planos Semanais", desc: "Rotina organizada", icon: Calendar, onClick: () => setShowWeeklyPlan(true), color: "text-chart-4" },
            ].map((item) => (
              <button
                key={item.label}
                onClick={item.onClick}
                className="w-full flex items-center gap-4 bg-card border border-border rounded-xl p-4 hover:bg-secondary/50 transition-colors text-left"
              >
                <div className="w-10 h-10 rounded-xl bg-secondary flex items-center justify-center shrink-0">
                  <item.icon className={item.color} size={20} />
                </div>
                <div className="flex-1 min-w-0">
                  <p className="text-foreground font-medium text-sm">{item.label}</p>
                  <p className="text-muted-foreground text-xs">{item.desc}</p>
                </div>
                <ChevronRight className="text-muted-foreground shrink-0" size={16} />
              </button>
            ))}
          </div>
        </div>

{/* Adventure Mode */}
        <div className="mb-6">
          <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider px-1 mb-2">Modo Aventura</h2>
          <Card className="bg-gradient-to-br from-accent/10 to-primary/10 border-accent/20">
            <CardContent className="py-4">
              <p className="text-muted-foreground text-xs mb-3">
                Transforme seus treinos em uma jornada. Evolua, supere-se e conquiste.
              </p>
              <div className="grid grid-cols-3 gap-2">
                <Button
                  onClick={() => setActiveTab("rpg")}
                  variant="outline"
                  size="sm"
                  className="border-accent/20 hover:bg-accent/10 text-foreground text-xs h-auto py-3 flex-col gap-1"
                >
                  <Sword size={16} className="text-accent" />
                  O Heroi
                </Button>
                <Button
                  onClick={() => setActiveTab("ghost")}
                  variant="outline"
                  size="sm"
                  className="border-chart-3/20 hover:bg-chart-3/10 text-foreground text-xs h-auto py-3 flex-col gap-1"
                >
                  <Ghost size={16} className="text-chart-3" />
                  Ghost
                </Button>
                <Button
                  onClick={() => setActiveTab("guild")}
                  variant="outline"
                  size="sm"
                  className="border-primary/20 hover:bg-primary/10 text-foreground text-xs h-auto py-3 flex-col gap-1"
                >
                  <Users size={16} className="text-primary" />
                  Guilda
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>

{/* Weekly Stats */}
        <WeeklyStats weeklyWorkouts={weeklyWorkouts} />

{/* History */}
        <WorkoutHistory workouts={workouts} />
      </>
    )
  }

return (
    <div className="min-h-screen bg-background pb-32">
      {/* Header */}
      <header className="sticky top-0 z-40 bg-background/80 backdrop-blur-xl border-b border-border">
        <div className="container mx-auto px-4 max-w-2xl">
          <div className="flex items-center justify-between h-14">
            <div className="flex items-center gap-2.5">
              <div className="w-8 h-8 rounded-lg bg-primary/15 flex items-center justify-center">
                <Heart className="text-primary" size={18} />
              </div>
              <div>
                <h1 className="text-base font-bold text-foreground leading-tight">Movimento Possivel</h1>
                <p className="text-xs text-muted-foreground leading-tight">Cuidado que transforma</p>
              </div>
            </div>
            <div className="flex items-center gap-1.5">
              {userName && (
                <span className="text-xs text-muted-foreground hidden sm:block">
                  {userName}
                </span>
              )}
              {ai.prefs.enabled && (
                <div className="flex items-center gap-1.5 px-2 py-1 rounded-lg bg-accent/10">
                  <Bot size={14} className="text-accent" />
                  <span className="text-accent text-xs font-medium">{ai.aiName}</span>
                </div>
              )}
              <Button
                variant="ghost"
                size="sm"
                onClick={handleLogout}
                className="text-muted-foreground hover:text-destructive"
                aria-label="Sair do app"
              >
                <LogOut size={18} />
              </Button>
            </div>
          </div>
        </div>
      </header>

{/* Content */}
      <main className="container mx-auto px-4 py-5 max-w-2xl">
        {renderTabContent()}
      </main>

{/* Bottom Navigation */}
      <nav className="fixed bottom-0 left-0 right-0 bg-background/95 backdrop-blur-xl border-t border-border z-50">
        <div className="container mx-auto max-w-2xl">
          {/* Row 1 */}
          <div className="grid grid-cols-5 py-1.5 px-2">
            {NAV_ITEMS.map((item) => {
              const isActive = activeTab === item.id
              return (
                <button
                  key={item.id}
                  onClick={() => setActiveTab(item.id)}
                  className={`flex flex-col items-center justify-center py-1.5 rounded-xl transition-tab ${
                    isActive
                      ? "text-primary"
                      : "text-muted-foreground hover:text-foreground"
                  }`}
                >
                  <div className={`relative ${isActive ? "" : ""}`}>
                    {isActive && (
                      <div className="absolute -inset-1.5 rounded-lg bg-primary/10" />
                    )}
                    <item.icon size={20} className="relative" />
                  </div>
                  <span className={`text-[10px] mt-1 ${isActive ? "font-semibold" : ""}`}>{item.label}</span>
                </button>
              )
            })}
          </div>
          {/* Row 2 */}
          <div className="grid grid-cols-5 pb-1.5 px-2 border-t border-border/50">
            {NAV_ITEMS_ROW2.map((item) => {
              const isActive = activeTab === item.id
              return (
                <button
                  key={item.id}
                  onClick={() => setActiveTab(item.id)}
                  className={`flex flex-col items-center justify-center py-1.5 rounded-xl transition-tab ${
                    isActive
                      ? "text-primary"
                      : "text-muted-foreground hover:text-foreground"
                  }`}
                >
                  <div className="relative">
                    {isActive && (
                      <div className="absolute -inset-1.5 rounded-lg bg-primary/10" />
                    )}
                    <item.icon size={20} className="relative" />
                  </div>
                  <span className={`text-[10px] mt-1 ${isActive ? "font-semibold" : ""}`}>{item.label}</span>
                </button>
              )
            })}
          </div>
        </div>
      </nav>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/heart-monitor.tsx"
"use client"

import { useState, useEffect, useRef, useCallback } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Heart, TrendingUp, Activity, AlertCircle, Plus, Trash2, Fingerprint, X } from "lucide-react"
import { ActivityTracker } from "@/lib/activity-tracker"
import { QuickCheckButton } from "@/components/quick-check-button"

interface HeartReading {
  id: string
  bpm: number
  date: string
  notes?: string
}

export function HeartMonitor() {
  const [readings, setReadings] = useState<HeartReading[]>([])
  const [bpm, setBpm] = useState("")
  const [notes, setNotes] = useState("")
  const [mounted, setMounted] = useState(false)
  const [isMeasuring, setIsMeasuring] = useState(false)
  const [fingerDown, setFingerDown] = useState(false)
  const [measureProgress, setMeasureProgress] = useState(0)
  const [currentBPM, setCurrentBPM] = useState<number | null>(null)
  const [pulseCount, setPulseCount] = useState(0)
  const [phase, setPhase] = useState<"waiting" | "measuring" | "done">("waiting")
  const [heartbeatFeedback, setHeartbeatFeedback] = useState(false)
  const [countdown, setCountdown] = useState(15)
  const [tipMessage, setTipMessage] = useState("")

const audioContextRef = useRef<AudioContext | null>(null)
  const startTimeRef = useRef<number>(0)
  const tapTimesRef = useRef<number[]>([])
  const timerRef = useRef<NodeJS.Timeout | null>(null)
  const countdownRef = useRef<NodeJS.Timeout | null>(null)
  const touchAreaRef = useRef<HTMLDivElement>(null)

const DURATION = 15000

useEffect(() => {
    setMounted(true)
    const saved = localStorage.getItem("heartReadings")
    if (saved) setReadings(JSON.parse(saved))
    ActivityTracker.trackActivity("heart", true)
    return () => {
      stopMeasurement()
    }
  }, [])

useEffect(() => {
    if (mounted) localStorage.setItem("heartReadings", JSON.stringify(readings))
  }, [readings, mounted])

const getAudioContext = useCallback(() => {
    if (!audioContextRef.current) {
      audioContextRef.current = new (window.AudioContext || (window as typeof window & { webkitAudioContext: typeof AudioContext }).webkitAudioContext)()
    }
    if (audioContextRef.current.state === "suspended") {
      audioContextRef.current.resume()
    }
    return audioContextRef.current
  }, [])

const playHeartbeatSound = useCallback(() => {
    try {
      const ctx = getAudioContext()
      // Thump sound (low)
      const osc1 = ctx.createOscillator()
      const gain1 = ctx.createGain()
      osc1.connect(gain1)
      gain1.connect(ctx.destination)
      osc1.frequency.value = 80
      osc1.type = "sine"
      gain1.gain.setValueAtTime(0.2, ctx.currentTime)
      gain1.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.15)
      osc1.start(ctx.currentTime)
      osc1.stop(ctx.currentTime + 0.15)

// Second thump
      const osc2 = ctx.createOscillator()
      const gain2 = ctx.createGain()
      osc2.connect(gain2)
      gain2.connect(ctx.destination)
      osc2.frequency.value = 60
      osc2.type = "sine"
      gain2.gain.setValueAtTime(0.15, ctx.currentTime + 0.12)
      gain2.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.25)
      osc2.start(ctx.currentTime + 0.12)
      osc2.stop(ctx.currentTime + 0.25)
    } catch {
      // silent
    }
  }, [getAudioContext])

const playSuccessSound = useCallback(() => {
    try {
      const ctx = getAudioContext()
      const notes = [523, 659, 784]
      notes.forEach((freq, i) => {
        const osc = ctx.createOscillator()
        const gain = ctx.createGain()
        osc.connect(gain)
        gain.connect(ctx.destination)
        osc.frequency.value = freq
        osc.type = "sine"
        gain.gain.setValueAtTime(0.15, ctx.currentTime + i * 0.12)
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + i * 0.12 + 0.2)
        osc.start(ctx.currentTime + i * 0.12)
        osc.stop(ctx.currentTime + i * 0.12 + 0.2)
      })
    } catch {
      // silent
    }
  }, [getAudioContext])

const startMeasurement = useCallback(() => {
    setIsMeasuring(true)
    setPhase("waiting")
    setFingerDown(false)
    setMeasureProgress(0)
    setCurrentBPM(null)
    setPulseCount(0)
    setCountdown(15)
    tapTimesRef.current = []
    setTipMessage("Coloque seu dedo na area abaixo e sinta seu pulso no pescoco com a outra mao")
  }, [])

const stopMeasurement = useCallback(() => {
    if (timerRef.current) {
      clearInterval(timerRef.current)
      timerRef.current = null
    }
    if (countdownRef.current) {
      clearInterval(countdownRef.current)
      countdownRef.current = null
    }
    setIsMeasuring(false)
    setFingerDown(false)
    setPhase("waiting")
    setMeasureProgress(0)
    setPulseCount(0)
  }, [])

// When finger touches the screen, start the actual measurement timer
  const handleFingerDown = useCallback(() => {
    if (phase === "done") return
    setFingerDown(true)

if (phase === "waiting") {
      setPhase("measuring")
      startTimeRef.current = Date.now()
      tapTimesRef.current = []
      setPulseCount(0)
      setCountdown(15)
      setTipMessage("Agora toque a tela com a outra mao a cada batida que voce sentir no pescoco")

// Progress timer
      timerRef.current = setInterval(() => {
        const elapsed = Date.now() - startTimeRef.current
        const progress = Math.min((elapsed / DURATION) * 100, 100)
        setMeasureProgress(progress)

if (elapsed >= DURATION) {
          finishMeasurement()
        }
      }, 100)

// Countdown
      countdownRef.current = setInterval(() => {
        setCountdown((prev) => {
          if (prev <= 1) {
            if (countdownRef.current) clearInterval(countdownRef.current)
            return 0
          }
          return prev - 1
        })
      }, 1000)
    }
  }, [phase])

const handleFingerUp = useCallback(() => {
    setFingerDown(false)
  }, [])

// Each tap on the pulse area registers a heartbeat
  const handlePulseTap = useCallback(() => {
    if (phase !== "measuring") return

const now = Date.now()
    tapTimesRef.current.push(now)
    setPulseCount((prev) => prev + 1)
    playHeartbeatSound()
    setHeartbeatFeedback(true)
    setTimeout(() => setHeartbeatFeedback(false), 200)
  }, [phase, playHeartbeatSound])

const finishMeasurement = useCallback(() => {
    if (timerRef.current) {
      clearInterval(timerRef.current)
      timerRef.current = null
    }
    if (countdownRef.current) {
      clearInterval(countdownRef.current)
      countdownRef.current = null
    }

const taps = tapTimesRef.current
    setPhase("done")
    setMeasureProgress(100)

if (taps.length < 3) {
      setTipMessage("Poucos batimentos detectados. Tente novamente tocando a tela a cada batida do pulso.")
      setCurrentBPM(null)
      return
    }

// Calculate BPM from tap intervals
    const intervals: number[] = []
    for (let i = 1; i < taps.length; i++) {
      intervals.push(taps[i] - taps[i - 1])
    }

// Remove outliers (too fast or too slow)
    const filtered = intervals.filter((i) => i > 300 && i < 2000)

if (filtered.length < 2) {
      setTipMessage("Nao foi possivel calcular. Tente tocar de forma mais regular.")
      setCurrentBPM(null)
      return
    }

const avgInterval = filtered.reduce((a, b) => a + b, 0) / filtered.length
    const calculatedBPM = Math.round(60000 / avgInterval)
    const finalBPM = Math.max(40, Math.min(200, calculatedBPM))

setCurrentBPM(finalBPM)
    setBpm(finalBPM.toString())
    playSuccessSound()
    setTipMessage(`Medicao completa! ${finalBPM} BPM detectados.`)
    ActivityTracker.trackActivity("heart", false)
  }, [playSuccessSound])

const addReading = () => {
    const v = Number.parseInt(bpm)
    if (v && v > 0 && v < 300) {
      setReadings([
        {
          id: Date.now().toString(),
          bpm: v,
          date: new Date().toISOString(),
          notes: notes.trim() || undefined,
        },
        ...readings,
      ])
      setBpm("")
      setNotes("")
      setCurrentBPM(null)
      ActivityTracker.trackActivity("heart", false)
    }
  }

const getHeartZone = (bpmVal: number) => {
    if (bpmVal < 60)
      return { label: "Repouso", style: "text-chart-3 bg-chart-3/15", description: "Seu coracao esta calmo" }
    if (bpmVal < 100)
      return { label: "Normal", style: "text-chart-1 bg-chart-1/15", description: "Batimento saudavel" }
    if (bpmVal < 120)
      return { label: "Leve Elevacao", style: "text-chart-4 bg-chart-4/15", description: "Atividade leve" }
    if (bpmVal < 160)
      return { label: "Moderado", style: "text-chart-4 bg-chart-4/15", description: "Exercicio moderado" }
    return { label: "Intenso", style: "text-chart-5 bg-chart-5/15", description: "Alta intensidade" }
  }

const averageBPM = readings.length
    ? Math.round(readings.reduce((a, r) => a + r.bpm, 0) / readings.length)
    : 0
  const todayReadings = readings.filter(
    (r) => new Date(r.date).toDateString() === new Date().toDateString()
  )
  const lastReading = readings[0]

if (!mounted) return null

return (
    <div className="space-y-5">
      {/* Measurement overlay */}
      {isMeasuring && (
        <div className="fixed inset-0 bg-background z-50 flex flex-col">
          {/* Header */}
          <div className="flex items-center justify-between p-4 border-b border-border">
            <h2 className="text-lg font-bold text-foreground">Medindo Batimentos</h2>
            <Button
              onClick={stopMeasurement}
              variant="ghost"
              size="sm"
              className="text-muted-foreground hover:text-foreground"
            >
              <X size={20} />
            </Button>
          </div>

<div className="flex-1 flex flex-col items-center justify-center p-6 gap-6">
            {/* Animated heart */}
            <div className={`transition-transform duration-200 ${heartbeatFeedback ? "scale-125" : "scale-100"}`}>
              <Heart
                className={`w-16 h-16 ${heartbeatFeedback ? "text-chart-5 fill-chart-5" : "text-chart-5/50"} transition-colors duration-200`}
                size={64}
              />
            </div>

{/* Instruction */}
            <p className="text-muted-foreground text-center text-sm max-w-xs leading-relaxed">
              {tipMessage}
            </p>

{/* Pulse counter */}
            {phase === "measuring" && (
              <div className="text-center">
                <div className="text-5xl font-bold text-foreground tabular-nums">{pulseCount}</div>
                <p className="text-muted-foreground text-sm mt-1">batimentos contados</p>
              </div>
            )}

{/* Result */}
            {phase === "done" && currentBPM && (
              <div className="text-center">
                <div className="text-6xl font-bold text-chart-5 tabular-nums">{currentBPM}</div>
                <p className="text-muted-foreground text-sm mt-1">BPM</p>
                <div className={`mt-3 px-4 py-1.5 rounded-full text-sm font-medium ${getHeartZone(currentBPM).style}`}>
                  {getHeartZone(currentBPM).label}
                </div>
              </div>
            )}

{/* Timer */}
            {phase === "measuring" && (
              <div className="text-center">
                <div className="text-2xl font-bold text-foreground tabular-nums">{countdown}s</div>
                <div className="w-64 bg-secondary rounded-full h-2 mt-3 overflow-hidden">
                  <div
                    className="bg-chart-5 h-full transition-all duration-300 ease-linear"
                    style={{ width: `${measureProgress}%` }}
                  />
                </div>
              </div>
            )}

{/* Tap area */}
            {phase !== "done" && (
              <div
                ref={touchAreaRef}
                onTouchStart={(e) => {
                  e.preventDefault()
                  if (phase === "waiting") {
                    handleFingerDown()
                  } else if (phase === "measuring") {
                    handlePulseTap()
                  }
                }}
                onMouseDown={() => {
                  if (phase === "waiting") {
                    handleFingerDown()
                  } else if (phase === "measuring") {
                    handlePulseTap()
                  }
                }}
                className={`w-52 h-52 rounded-full flex flex-col items-center justify-center select-none cursor-pointer transition-all duration-200 ${
                  phase === "waiting"
                    ? "bg-chart-5/10 border-2 border-dashed border-chart-5/30"
                    : heartbeatFeedback
                      ? "bg-chart-5/30 border-2 border-chart-5 scale-95"
                      : "bg-chart-5/10 border-2 border-chart-5/40"
                }`}
              >
                <Fingerprint
                  className={`mb-2 transition-all duration-200 ${
                    heartbeatFeedback ? "text-chart-5 scale-110" : "text-chart-5/60"
                  }`}
                  size={48}
                />
                <span className="text-foreground font-semibold text-sm">
                  {phase === "waiting" ? "Toque para iniciar" : "Toque a cada batida"}
                </span>
                <span className="text-muted-foreground text-xs mt-1">
                  {phase === "waiting"
                    ? "Coloque o dedo aqui"
                    : "Sinta o pulso e toque"}
                </span>
              </div>
            )}

{/* Done actions */}
            {phase === "done" && (
              <div className="flex flex-col gap-3 w-full max-w-xs">
                {currentBPM ? (
                  <Button onClick={() => { addReading(); stopMeasurement() }} className="w-full bg-chart-1 hover:bg-chart-1/90 text-primary-foreground">
                    <Heart className="mr-2" size={16} />
                    Salvar {currentBPM} BPM
                  </Button>
                ) : null}
                <Button onClick={() => { stopMeasurement(); startMeasurement() }} variant="outline" className="w-full border-border">
                  Medir novamente
                </Button>
                <Button onClick={stopMeasurement} variant="ghost" className="w-full text-muted-foreground">
                  Fechar
                </Button>
              </div>
            )}
          </div>

{/* Instructions footer */}
          {phase === "measuring" && (
            <div className="p-4 border-t border-border bg-secondary/30">
              <div className="flex items-start gap-3 max-w-sm mx-auto">
                <AlertCircle className="text-chart-4 shrink-0 mt-0.5" size={16} />
                <p className="text-xs text-muted-foreground leading-relaxed">
                  Com uma mao, sinta seu pulso no pescoco ou pulso.
                  Com a outra, toque o circulo a cada batida que sentir.
                </p>
              </div>
            </div>
          )}
        </div>
      )}

{/* Main content */}
      <Card className="bg-chart-5/5 border-chart-5/15">
        <CardContent className="py-5">
          <p className="text-muted-foreground text-center text-sm leading-relaxed">
            <span className="text-foreground font-semibold">Ouvir seu coracao e cuidar de voce.</span>
            <br />
            Cada batimento conta sua historia.
            <br />
            <span className="text-chart-5">Registre sem pressao, so para conhecer seu corpo.</span>
          </p>
        </CardContent>
      </Card>

{/* Stats */}
      <div className="grid grid-cols-3 gap-3">
        <Card className="bg-card border-border">
          <CardContent className="py-4 px-3 text-center">
            <Heart className="text-chart-5 mx-auto mb-1" size={16} />
            {lastReading ? (
              <>
                <div className="text-2xl font-bold text-foreground">{lastReading.bpm}</div>
                <p className="text-xs text-muted-foreground">Ultimo BPM</p>
              </>
            ) : (
              <div className="text-sm text-muted-foreground">--</div>
            )}
          </CardContent>
        </Card>
        <Card className="bg-card border-border">
          <CardContent className="py-4 px-3 text-center">
            <TrendingUp className="text-chart-3 mx-auto mb-1" size={16} />
            {averageBPM > 0 ? (
              <>
                <div className="text-2xl font-bold text-foreground">{averageBPM}</div>
                <p className="text-xs text-muted-foreground">Media</p>
              </>
            ) : (
              <div className="text-sm text-muted-foreground">--</div>
            )}
          </CardContent>
        </Card>
        <Card className="bg-card border-border">
          <CardContent className="py-4 px-3 text-center">
            <Activity className="text-accent mx-auto mb-1" size={16} />
            <div className="text-2xl font-bold text-foreground">{todayReadings.length}</div>
            <p className="text-xs text-muted-foreground">Hoje</p>
          </CardContent>
        </Card>
      </div>

{/* Measurement */}
      <Card className="bg-card border-border">
        <CardHeader>
          <CardTitle className="text-foreground flex items-center gap-2 text-base">
            <Fingerprint size={18} /> Medir Batimentos
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <Button
            onClick={startMeasurement}
            className="w-full bg-chart-5 hover:bg-chart-5/90 text-primary-foreground font-semibold py-6 text-base"
          >
            <Fingerprint className="mr-2" size={20} />
            Medir com o Dedo na Tela
          </Button>
          <p className="text-xs text-muted-foreground text-center leading-relaxed">
            Coloque o dedo na tela, sinta seu pulso no pescoco com a outra mao e toque a cada batida que sentir. Em 15 segundos o app calcula seus batimentos.
          </p>

<div className="relative">
            <div className="absolute inset-0 flex items-center">
              <span className="w-full border-t border-border" />
            </div>
            <div className="relative flex justify-center text-xs uppercase">
              <span className="bg-card px-2 text-muted-foreground">ou registre manualmente</span>
            </div>
          </div>

<div>
            <label className="text-sm text-muted-foreground mb-2 block">Batimentos por minuto (BPM)</label>
            <Input
              type="number"
              value={bpm}
              onChange={(e) => setBpm(e.target.value)}
              placeholder="Ex: 72"
              className="bg-secondary/30 border-border text-foreground"
              min="30"
              max="250"
            />
          </div>
          <div>
            <label className="text-sm text-muted-foreground mb-2 block">
              Como voce esta se sentindo? (opcional)
            </label>
            <Input
              type="text"
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
              placeholder="Ex: calmo, apos exercicio..."
              className="bg-secondary/30 border-border text-foreground"
            />
          </div>
          <Button
            onClick={addReading}
            className="w-full bg-chart-5 hover:bg-chart-5/90 text-primary-foreground"
            disabled={!bpm}
          >
            <Heart className="mr-2" size={16} />
            Salvar Medicao
          </Button>
          <p className="text-xs text-muted-foreground text-center">
            Nao existe numero certo ou errado. Cada corpo tem seu ritmo.
          </p>
        </CardContent>
      </Card>

{/* History */}
      {readings.length > 0 && (
        <Card className="bg-card border-border">
          <CardHeader>
            <CardTitle className="text-foreground flex items-center gap-2 text-base">
              <Activity size={18} /> Historico de Medicoes
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-2">
            {readings.slice(0, 10).map((reading) => {
              const zone = getHeartZone(reading.bpm)
              const date = new Date(reading.date)
              const isToday = date.toDateString() === new Date().toDateString()
              return (
                <div
                  key={reading.id}
                  className="flex items-center justify-between p-3 bg-secondary/30 rounded-xl"
                >
                  <div className="flex items-center gap-3 flex-1">
                    <div className={`p-2 rounded-lg ${zone.style}`}>
                      <Heart size={16} />
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-baseline gap-2">
                        <span className="text-lg font-bold text-foreground">{reading.bpm}</span>
                        <span className="text-xs text-muted-foreground">BPM</span>
                        <span className={`text-xs px-2 py-0.5 rounded-full ${zone.style}`}>
                          {zone.label}
                        </span>
                      </div>
                      {reading.notes && (
                        <p className="text-xs text-muted-foreground mt-0.5 italic truncate">
                          {reading.notes}
                        </p>
                      )}
                      <p className="text-xs text-muted-foreground mt-0.5">
                        {isToday ? "Hoje" : date.toLocaleDateString("pt-BR")} as{" "}
                        {date.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" })}
                      </p>
                    </div>
                  </div>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => setReadings(readings.filter((r) => r.id !== reading.id))}
                    className="text-muted-foreground hover:text-chart-5"
                  >
                    <Trash2 size={14} />
                  </Button>
                </div>
              )
            })}
          </CardContent>
        </Card>
      )}

{/* Disclaimer */}
      <Card className="bg-chart-3/5 border-chart-3/15">
        <CardContent className="py-4">
          <div className="flex items-start gap-3">
            <AlertCircle className="text-chart-3 mt-0.5 shrink-0" size={18} />
            <div className="text-xs text-muted-foreground">
              <p className="font-semibold text-foreground mb-1">Importante</p>
              <p>
                Este app nao substitui acompanhamento medico. Se sentir palpitacoes, dor no peito ou
                tontura, procure ajuda profissional.
              </p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}</article></body></html>