[V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import WellnessApp from "@/components/wellness-app" export default function Home() { return } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 339 90% 65%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 339 80% 90%; --input: 339 80% 90%; --ring: 339 90% 65%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 339 90% 65%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 339 90% 65%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; font-family: "Inter", sans-serif; } } @layer utilities { .scrollbar-hide { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .scrollbar-hide::-webkit-scrollbar { display: none; /* Chrome, Safari and Opera */ } } /* Stars animation */ .stars { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5) 1px, transparent 1px); background-size: 100px 100px; opacity: 0.3; } /* Cloud styles */ .clouds { position: absolute; width: 100%; height: 100%; overflow: hidden; pointer-events: none; } .cloud { position: absolute; border-radius: 50%; background-color: rgba(255, 255, 255, 0.8); filter: blur(4px); } /* Confetti container */ .confetti-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/diary/diary-section.tsx" isEdit="true" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" import { Card, CardContent } from "@/components/ui/card" import { Textarea } from "@/components/ui/textarea" import { Button } from "@/components/ui/button" import { useWellness } from "@/hooks/use-wellness" import { useLanguage } from "@/hooks/use-language" import { formatDate } from "@/lib/utils" import { motion, AnimatePresence } from "framer-motion" import { Calendar } from "@/components/ui/calendar" import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs" import { Search, CalendarIcon, PenLine, Clock, Tag, X, BookOpen, CalendarPlus2Icon as CalendarIcon2, Image, Smile, Send, } from "lucide-react" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { MOOD_OPTIONS } from "@/constants" import { cn } from "@/lib/utils" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" interface DiarySectionProps { expanded?: boolean } const DIARY_TAGS = [ { id: "thoughts", color: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300" }, { id: "gratitude", color: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300" }, { id: "goals", color: "bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300" }, { id: "memories", color: "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300" }, ] export default function DiarySection({ expanded = false }: DiarySectionProps) { const { diaryEntry, setDiaryEntry, saveDiaryEntry, diaryEntries } = useWellness() const { t, language } = useLanguage() const [isSaving, setIsSaving] = useState(false) const [selectedDate, setSelectedDate] = useState(new Date()) const [viewMode, setViewMode] = useState<"list" | "calendar">(expanded ? "list" : "calendar") const [searchQuery, setSearchQuery] = useState("") const [selectedTag, setSelectedTag] = useState(null) const [showTags, setShowTags] = useState(false) const [selectedMoodFilter, setSelectedMoodFilter] = useState(null) const [isEditorFocused, setIsEditorFocused] = useState(false) const textareaRef = useRef(null) const handleSave = async () => { if (diaryEntry.trim() === "") return setIsSaving(true) await saveDiaryEntry(selectedDate) setIsSaving(false) // Scroll to the top of the entries list after saving if (expanded) { setTimeout(() => { const entriesList = document.getElementById("diary-entries-list") if (entriesList) { entriesList.scrollTop = 0 } }, 100) } } // Filter diary entries based on search query, selected tag, and mood const filteredEntries = diaryEntries.filter((entry) => { const searchLower = searchQuery.toLowerCase() let matchesSearch = false if (typeof entry.content === "string") { matchesSearch = entry.content.toLowerCase().includes(searchLower) } else { // If content is an object with language keys, search in all language versions matchesSearch = Object.values(entry.content).some( (text) => typeof text === "string" && text.toLowerCase().includes(searchLower), ) } // Filter by tag if selected const matchesTag = selectedTag ? entry.tag === selectedTag : true // Filter by mood if selected const matchesMood = selectedMoodFilter ? entry.mood === selectedMoodFilter : true return matchesSearch && matchesTag && matchesMood }) // Get dates that have diary entries for the calendar const datesWithEntries = diaryEntries.map((entry) => new Date(entry.date)) // Handle keyboard shortcuts useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { // Ctrl/Cmd + Enter to save if ((e.ctrlKey || e.metaKey) && e.key === "Enter" && isEditorFocused) { handleSave() } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [isEditorFocused, diaryEntry]) // Get mood emoji const getMoodEmoji = (moodId: string) => { const mood = MOOD_OPTIONS.find((m) => m.id === moodId) return mood ? mood.emoji : "" } // Get mood name const getMoodName = (moodId: string) => { return t(moodId, "moods") || moodId } // Get tag name const getTagName = (tagId: string) => { return t(tagId, "diaryTags") || tagId } // Get tag color const getTagColor = (tagId: string) => { const tag = DIARY_TAGS.find((t) => t.id === tagId) return tag ? tag.color : "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300" } return ( {!expanded && (

{t("diaryTitle")}

{formatDate(selectedDate, language)}

)} {expanded && (

{t("diaryTitle")}

setViewMode(v as "list" | "calendar")}> {t("listView")} {t("calendarView")}

setSearchQuery(e.target.value)} /> {searchQuery && ( )}

{DIARY_TAGS.map((tag) => ( ))}

{MOOD_OPTIONS.map((mood) => ( ))}

)} {expanded ? (

{t("newEntry")}

date && setSelectedDate(date)} initialFocus modifiers={{ hasEntry: datesWithEntries, }} modifiersStyles={{ hasEntry: { backgroundColor: "rgba(236, 72, 153, 0.1)", borderRadius: "50%", }, }} />

setDiaryEntry(e.target.value)}
                        onFocus={() => setIsEditorFocused(true)}
                        onBlur={() => setIsEditorFocused(false)}
                      />
                      <div className="absolute bottom-4 right-3 flex flex-col space-y-2">
                        <button
                          className="text-gray-400 hover:text-pink-500 dark:hover:text-pink-400 transition-colors"
                          onClick={() => setShowTags(!showTags)}
                          title={t("addTag")}
                        >
                          <Tag className="h-4 w-4" />
                        </button>
                        <button
                          className="text-gray-400 hover:text-pink-500 dark:hover:text-pink-400 transition-colors"
                          title={t("addImage")}
                        >
                          <Image className="h-4 w-4" />
                        </button>
                      </div>
                    </div>

<AnimatePresence>
                      {showTags && (
                        <motion.div
                          initial={{ opacity: 0, height: 0 }}
                          animate={{ opacity: 1, height: "auto" }}
                          exit={{ opacity: 0, height: 0 }}
                          className="mb-2 overflow-hidden"
                        >
                          <div className="flex flex-wrap gap-1 mt-1">
                            {DIARY_TAGS.map((tag) => (
                              <Badge
                                key={tag.id}
                                className={cn("cursor-pointer", tag.color)}
                                onClick={() => {
                                  // In a real app, this would add the tag to the entry
                                  console.log(`Selected tag: ${tag.id}`)
                                }}
                              >
                                {getTagName(tag.id)}
                              </Badge>
                            ))}
                          </div>
                        </motion.div>
                      )}
                    </AnimatePresence>

<div className="flex justify-between items-center">
                      <div className="text-xs text-gray-500 dark:text-gray-400 flex items-center">
                        <Clock className="h-3 w-3 mr-1" />
                        <span>{formatDate(selectedDate, language)}</span>
                        {diaryEntry.length > 0 && (
                          <span className="ml-2">
                            {diaryEntry.length} {t("characters")}
                          </span>
                        )}
                      </div>

<motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
                        <Button
                          size="sm"
                          className="bg-pink-500 hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700 flex items-center"
                          onClick={handleSave}
                          disabled={isSaving || diaryEntry.trim() === ""}
                        >
                          {isSaving ? (
                            t("savingButton")
                          ) : (
                            <>
                              <Send className="h-3.5 w-3.5 mr-1.5" />
                              {t("saveButton")}
                            </>
                          )}
                        </Button>
                      </motion.div>
                    </div>
                  </div>

<div className="mt-6">
                    <h3 className="text-md font-medium mb-3 flex items-center">
                      <Clock className="h-4 w-4 mr-1.5 text-pink-500 dark:text-pink-400" />
                      {t("pastDiaries")}
                      {filteredEntries.length > 0 && (
                        <Badge className="ml-2 bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300">
                          {filteredEntries.length}
                        </Badge>
                      )}
                    </h3>

{filteredEntries.length === 0 ? (
                      <div className="text-center py-8 bg-gray-50 dark:bg-slate-900 rounded-lg">
                        <BookOpen className="h-12 w-12 mx-auto text-gray-300 dark:text-gray-600 mb-2" />
                        <p className="text-sm text-gray-500 dark:text-gray-400">
                          {searchQuery || selectedTag || selectedMoodFilter
                            ? t("noSearchResults")
                            : t("noDiaryEntries")}
                        </p>
                        {(searchQuery || selectedTag || selectedMoodFilter) && (
                          <Button
                            variant="link"
                            size="sm"
                            className="mt-2 text-pink-500 dark:text-pink-400"
                            onClick={() => {
                              setSearchQuery("")
                              setSelectedTag(null)
                              setSelectedMoodFilter(null)
                            }}
                          >
                            {t("clearFilters")}
                          </Button>
                        )}
                      </div>
                    ) : (
                      <div id="diary-entries-list" className="space-y-3 max-h-[400px] overflow-y-auto pr-1">
                        {filteredEntries.map((entry, index) => (
                          <motion.div
                            key={entry.id}
                            initial={{ opacity: 0, y: 10 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: index * 0.05 }}
                            className="p-4 bg-gray-50 dark:bg-slate-700 rounded-lg border border-gray-100 dark:border-gray-800 hover:shadow-sm transition-shadow"
                          >
                            <div className="flex justify-between items-start mb-2">
                              <div>
                                <span className="text-xs text-gray-400 dark:text-gray-500 flex items-center">
                                  <CalendarIcon className="h-3 w-3 mr-1" />
                                  {formatDate(new Date(entry.date), language)}
                                </span>
                                {entry.tag && (
                                  <Badge className={cn("mt-1", getTagColor(entry.tag))}>{getTagName(entry.tag)}</Badge>
                                )}
                              </div>
                              <div className="flex items-center">
                                {entry.mood && (
                                  <div className="flex flex-col items-center">
                                    <span className="text-lg">{getMoodEmoji(entry.mood)}</span>
                                    <span className="text-xs text-gray-500 dark:text-gray-400">
                                      {getMoodName(entry.mood)}
                                    </span>
                                  </div>
                                )}
                              </div>
                            </div>
                            <p className="text-sm whitespace-pre-wrap">
                              {typeof entry.content === "string"
                                ? entry.content
                                : entry.content[language] || Object.values(entry.content)[0]}
                            </p>
                          </motion.div>
                        ))}
                      </div>
                    )}
                  </div>
                </div>
              </TabsContent>

<TabsContent value="calendar" className="mt-0">
                <div className="p-4">
                  <div className="bg-white dark:bg-slate-900 rounded-lg p-4 border border-gray-100 dark:border-gray-800">
                    <Calendar
                      mode="single"
                      selected={selectedDate}
                      onSelect={(date) => date && setSelectedDate(date)}
                      className="mx-auto"
                      modifiers={{
                        hasEntry: datesWithEntries,
                      }}
                      modifiersStyles={{
                        hasEntry: {
                          backgroundColor: "rgba(236, 72, 153, 0.1)",
                          borderRadius: "50%",
                        },
                      }}
                    />
                  </div>

<div className="mt-4">
                    {diaryEntries.find(
                      (entry) => new Date(entry.date).toDateString() === selectedDate.toDateString(),
                    ) ? (
                      <motion.div
                        initial={{ opacity: 0, y: 10 }}
                        animate={{ opacity: 1, y: 0 }}
                        className="p-4 bg-gray-50 dark:bg-slate-700 rounded-lg border border-gray-100 dark:border-gray-800"
                      >
                        <div className="flex justify-between items-start mb-2">
                          <div>
                            <span className="text-xs text-gray-400 dark:text-gray-500 flex items-center">
                              <CalendarIcon className="h-3 w-3 mr-1" />
                              {formatDate(selectedDate, language)}
                            </span>
                            {diaryEntries.find(
                              (entry) => new Date(entry.date).toDateString() === selectedDate.toDateString(),
                            )?.tag && (
                              <Badge
                                className={cn(
                                  "mt-1",
                                  getTagColor(
                                    diaryEntries.find(
                                      (entry) => new Date(entry.date).toDateString() === selectedDate.toDateString(),
                                    )?.tag || "",
                                  ),
                                )}
                              >
                                {getTagName(
                                  diaryEntries.find(
                                    (entry) => new Date(entry.date).toDateString() === selectedDate.toDateString(),
                                  )?.tag || "",
                                )}
                              </Badge>
                            )}
                          </div>
                          <div className="flex items-center">
                            {diaryEntries.find(
                              (entry) => new Date(entry.date).toDateString() === selectedDate.toDateString(),
                            )?.mood && (
                              <div className="flex flex-col items-center">
                                <span className="text-lg">
                                  {getMoodEmoji(
                                    diaryEntries.find(
                                      (entry) => new Date(entry.date).toDateString() === selectedDate.toDateString(),
                                    )?.mood || "",
                                  )}
                                </span>
                                <span className="text-xs text-gray-500 dark:text-gray-400">
                                  {getMoodName(
                                    diaryEntries.find(
                                      (entry) => new Date(entry.date).toDateString() === selectedDate.toDateString(),
                                    )?.mood || "",
                                  )}
                                </span>
                              </div>
                            )}
                          </div>
                        </div>
                        <p className="text-sm whitespace-pre-wrap">
                          {(() => {
                            const entry = diaryEntries.find(
                              (entry) => new Date(entry.date).toDateString() === selectedDate.toDateString(),
                            )
                            if (!entry) return ""
                            return typeof entry.content === "string"
                              ? entry.content
                              : entry.content[language] || Object.values(entry.content)[0]
                          })()}
                        </p>
                      </motion.div>
                    ) : (
                      <div className="space-y-3">
                        <h3 className="text-md font-medium flex items-center">
                          <PenLine className="h-4 w-4 mr-1.5 text-pink-500 dark:text-pink-400" />
                          {t("newEntry")}
                        </h3>

<div className="relative">
                          <Textarea
                            placeholder={t("diaryPlaceholder")}
                            className="min-h-[120px] border-pink-200 dark:border-indigo-800 focus:border-pink-400 dark:focus:border-indigo-600 bg-white dark:bg-slate-900 mb-2 pr-10"
                            value={diaryEntry}
                            onChange={(e) => setDiaryEntry(e.target.value)}
                            onFocus={() => setIsEditorFocused(true)}
                            onBlur={() => setIsEditorFocused(false)}
                          />
                          <div className="absolute bottom-4 right-3 flex flex-col space-y-2">
                            <button
                              className="text-gray-400 hover:text-pink-500 dark:hover:text-pink-400 transition-colors"
                              onClick={() => setShowTags(!showTags)}
                              title={t("addTag")}
                            >
                              <Tag className="h-4 w-4" />
                            </button>
                            <button
                              className="text-gray-400 hover:text-pink-500 dark:hover:text-pink-400 transition-colors"
                              title={t("addImage")}
                            >
                              <Image className="h-4 w-4" />
                            </button>
                          </div>
                        </div>

<AnimatePresence>
                          {showTags && (
                            <motion.div
                              initial={{ opacity: 0, height: 0 }}
                              animate={{ opacity: 1, height: "auto" }}
                              exit={{ opacity: 0, height: 0 }}
                              className="mb-2 overflow-hidden"
                            >
                              <div className="flex flex-wrap gap-1 mt-1">
                                {DIARY_TAGS.map((tag) => (
                                  <Badge
                                    key={tag.id}
                                    className={cn("cursor-pointer", tag.color)}
                                    onClick={() => {
                                      // In a real app, this would add the tag to the entry
                                      console.log(`Selected tag: ${tag.id}`)
                                    }}
                                  >
                                    {getTagName(tag.id)}
                                  </Badge>
                                ))}
                              </div>
                            </motion.div>
                          )}
                        </AnimatePresence>

<div className="flex justify-end">
                          <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
                            <Button
                              size="sm"
                              className="bg-pink-500 hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700 flex items-center"
                              onClick={handleSave}
                              disabled={isSaving || diaryEntry.trim() === ""}
                            >
                              {isSaving ? (
                                t("savingButton")
                              ) : (
                                <>
                                  <Send className="h-3.5 w-3.5 mr-1.5" />
                                  {t("saveButton")}
                                </>
                              )}
                            </Button>
                          </motion.div>
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              </TabsContent>
            </Tabs>
          </div>
        ) : (
          <>
            <Textarea
              placeholder={t("diaryPlaceholder")}
              className="min-h-[100px] border-pink-200 dark:border-indigo-800 focus:border-pink-400 dark:focus:border-indigo-600 bg-white dark:bg-slate-900"
              value={diaryEntry}
              onChange={(e) => setDiaryEntry(e.target.value)}
              onFocus={() => setIsEditorFocused(true)}
              onBlur={() => setIsEditorFocused(false)}
            />

<div className="flex justify-between items-center mt-2">
              <div className="text-xs text-gray-500 dark:text-gray-400 flex items-center">
                {diaryEntry.length > 0 && (
                  <span>
                    {diaryEntry.length} {t("characters")}
                  </span>
                )}
              </div>

<motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
                <Button
                  size="sm"
                  className="bg-pink-500 hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700 flex items-center"
                  onClick={handleSave}
                  disabled={isSaving || diaryEntry.trim() === ""}
                >
                  {isSaving ? (
                    t("savingButton")
                  ) : (
                    <>
                      <Send className="h-3.5 w-3.5 mr-1.5" />
                      {t("saveButton")}
                    </>
                  )}
                </Button>
              </motion.div>
            </div>
          </>
        )}
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="context/wellness-context.tsx" isEdit="true" isMerged="true"
"use client"

import { createContext, useState, useEffect, type ReactNode } from "react"
import type { StressChecklistType, DiaryEntry } from "@/types"

interface WellnessContextType {
  selectedMood: string | null
  setSelectedMood: (mood: string | null) => void
  diaryEntry: string
  setDiaryEntry: (entry: string) => void
  saveDiaryEntry: (date?: Date) => Promise<void>
  diaryEntries: DiaryEntry[]
  stressChecklist: StressChecklistType
  setStressRating: (id: string, rating: number) => void
  saveStressChecklist: () => Promise<void>
}

export const WellnessContext = createContext<WellnessContextType | undefined>(undefined)

interface WellnessProviderProps {
  children: ReactNode
}

export function WellnessProvider({ children }: WellnessProviderProps) {
  const [selectedMood, setSelectedMood] = useState<string | null>(null)
  const [diaryEntry, setDiaryEntry] = useState("")
  const [stressChecklist, setStressChecklist] = useState<StressChecklistType>({})
  const [diaryEntries, setDiaryEntries] = useState<DiaryEntry[]>([
    {
      id: "1",
      date: new Date(2023, 2, 20).toISOString(),
      content: {
        ja: "今日は友達と公園に行きました。とても楽しかったです。",
        ko: "오늘은 친구와 공원에 갔어요. 정말 즐거웠습니다.",
      },
      mood: "happy",
      tag: "memories",
    },
    {
      id: "2",
      date: new Date(2023, 2, 19).toISOString(),
      content: {
        ja: "新しい本を読み始めました。興味深いストーリーです。",
        ko: "새로운 책을 읽기 시작했어요. 흥미로운 이야기입니다.",
      },
      mood: "neutral",
      tag: "thoughts",
    },
    {
      id: "3",
      date: new Date(2023, 2, 18).toISOString(),
      content: {
        ja: "今日は家族に感謝の気持ちを伝えました。大切な人たちに囲まれて幸せです。",
        ko: "오늘은 가족에게 감사의 마음을 전했어요. 소중한 사람들에게 둘러싸여 행복합니다.",
      },
      mood: "grateful",
      tag: "gratitude",
    },
    {
      id: "4",
      date: new Date(2023, 2, 17).toISOString(),
      content: {
        ja: "来月までに達成したい目標をリストアップしました。少しずつ前進していきたいです。",
        ko: "다음 달까지 달성하고 싶은 목표를 정리했어요. 조금씩 나아가고 싶습니다.",
      },
      mood: "excited",
      tag: "goals",
    },
  ])

// Load saved data from localStorage on component mount
  useEffect(() => {
    const savedMood = localStorage.getItem("wellness_mood")
    const savedDiary = localStorage.getItem("wellness_diary")
    const savedChecklist = localStorage.getItem("wellness_checklist")
    const savedEntries = localStorage.getItem("wellness_diary_entries")

if (savedMood) setSelectedMood(savedMood)
    if (savedDiary) setDiaryEntry(savedDiary)
    if (savedChecklist) setStressChecklist(JSON.parse(savedChecklist))
    if (savedEntries) setDiaryEntries(JSON.parse(savedEntries))
  }, [])

// Save mood to localStorage when it changes
  useEffect(() => {
    if (selectedMood) {
      localStorage.setItem("wellness_mood", selectedMood)
    }
  }, [selectedMood])

const saveDiaryEntry = async (date: Date = new Date()): Promise<void> => {
    return new Promise((resolve) => {
      // Simulate API call
      setTimeout(() => {
        localStorage.setItem("wellness_diary", diaryEntry)

// Add to diary entries
        const newEntry: DiaryEntry = {
          id: Date.now().toString(),
          date: date.toISOString(),
          content: diaryEntry,
          mood: selectedMood || undefined,
          tag: Math.random() > 0.5 ? DIARY_TAGS[Math.floor(Math.random() * DIARY_TAGS.length)] : undefined,
        }

const updatedEntries = [
          newEntry,
          ...diaryEntries.filter((entry) => new Date(entry.date).toDateString() !== date.toDateString()),
        ]

setDiaryEntries(updatedEntries)
        localStorage.setItem("wellness_diary_entries", JSON.stringify(updatedEntries))

// Clear the current entry
        setDiaryEntry("")

resolve()
      }, 500)
    })
  }

const setStressRating = (id: string, rating: number) => {
    setStressChecklist((prev) => ({
      ...prev,
      [id]: rating,
    }))
  }

const saveStressChecklist = async (): Promise<void> => {
    return new Promise((resolve) => {
      // Simulate API call
      setTimeout(() => {
        localStorage.setItem("wellness_checklist", JSON.stringify(stressChecklist))
        resolve()
      }, 500)
    })
  }

const value = {
    selectedMood,
    setSelectedMood,
    diaryEntry,
    setDiaryEntry,
    saveDiaryEntry,
    diaryEntries,
    stressChecklist,
    setStressRating,
    saveStressChecklist,
  }

return <WellnessContext.Provider value={value}>{children}</WellnessContext.Provider>
}

const DIARY_TAGS = ["thoughts", "gratitude", "goals", "memories"]

[V0_FILE]typescriptreact:file="hooks/use-wellness.tsx" isMerged="true"
"use client"

import { useContext } from "react"
import { WellnessContext } from "@/context/wellness-context"

export function useWellness() {
  const context = useContext(WellnessContext)

if (context === undefined) {
    throw new Error("useWellness must be used within a WellnessProvider")
  }

return context
}

[V0_FILE]typescriptreact:file="context/theme-context.tsx" isMerged="true"
"use client"

import { createContext, useState, useEffect, type ReactNode } from "react"
import type { ThemeType } from "@/types"

type ThemeMode = "light" | "dark" | "system"

interface ThemeContextType {
  theme: ThemeMode
  setTheme: (theme: ThemeMode) => void
  themeOptions: ThemeType[]
}

export const ThemeContext = createContext<ThemeContextType | undefined>(undefined)

interface ThemeProviderProps {
  children: ReactNode
}

export function ThemeProviderCustom({ children }: ThemeProviderProps) {
  const [theme, setThemeState] = useState<ThemeMode>("light")

const themeOptions: ThemeType[] = [
    { id: "light", name: "Light" },
    { id: "dark", name: "Dark" },
    { id: "system", name: "System" },
  ]

useEffect(() => {
    const savedTheme = localStorage.getItem("wellness_theme") as ThemeMode
    if (savedTheme && (savedTheme === "light" || savedTheme === "dark" || savedTheme === "system")) {
      setThemeState(savedTheme)
      applyTheme(savedTheme)
    }
  }, [])

const applyTheme = (mode: ThemeMode) => {
    const root = window.document.documentElement
    root.classList.remove("light", "dark")

if (mode === "system") {
      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
      root.classList.add(systemTheme)
    } else {
      root.classList.add(mode)
    }
  }

const setTheme = (mode: ThemeMode) => {
    setThemeState(mode)
    localStorage.setItem("wellness_theme", mode)
    applyTheme(mode)
  }

useEffect(() => {
    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")

const handleChange = () => {
      if (theme === "system") {
        applyTheme("system")
      }
    }

mediaQuery.addEventListener("change", handleChange)
    return () => mediaQuery.removeEventListener("change", handleChange)
  }, [theme])

const value = {
    theme,
    setTheme,
    themeOptions,
  }

return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
}

[V0_FILE]typescriptreact:file="hooks/use-language.tsx" isMerged="true"
"use client"

import { useContext } from "react"
import { LanguageContext } from "@/context/language-context"

export function useLanguage() {
  const context = useContext(LanguageContext)

if (context === undefined) {
    throw new Error("useLanguage must be used within a LanguageProvider")
  }

return context
}

[V0_FILE]typescriptreact:file="hooks/use-theme.tsx" isMerged="true"
"use client"

import { useContext } from "react"
import { ThemeContext } from "@/context/theme-context"

export function useTheme() {
  const context = useContext(ThemeContext)

if (context === undefined) {
    throw new Error("useTheme must be used within a ThemeProvider")
  }

return context
}

[V0_FILE]typescriptreact:file="components/settings/language-switcher.tsx" isMerged="true"
"use client"

import { useLanguage } from "@/hooks/use-language"
import { motion } from "framer-motion"

interface LanguageSwitcherProps {
  showLabels?: boolean
}

export default function LanguageSwitcher({ showLabels = false }: LanguageSwitcherProps) {
  const { language, setLanguage, languages } = useLanguage()

return (
    <div className="flex space-x-2">
      {languages.map((lang) => (
        <button
          key={lang.id}
          onClick={() => setLanguage(lang.id as "ja" | "ko")}
          className={`relative px-3 py-1.5 rounded-md transition-all ${
            language === lang.id
              ? "text-pink-600 dark:text-pink-400 font-medium"
              : "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
          }`}
          aria-label={`Switch to ${lang.name}`}
        >
          {language === lang.id && (
            <motion.div
              layoutId="activeLang"
              className="absolute inset-0 bg-pink-100 dark:bg-indigo-900 rounded-md -z-10"
              initial={false}
              transition={{ type: "spring", stiffness: 300, damping: 30 }}
            />
          )}
          {lang.name}
        </button>
      ))}
    </div>
  )
}

[V0_FILE]typescriptreact:file="package.json" isFixed="true" isQuickEdit="true" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
    "@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",
    "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",
    "framer-motion": "^10.16.4",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.16",
    "next-themes": "^0.4.4",
    "react": "^19",
    "react-day-picker": "8.10.1",
    "react-dom": "^19",
    "react-hook-form": "^7.54.1",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.0",
    "sonner": "^1.7.1",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.6",
    "zod": "^3.24.1"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8",
    "tailwindcss": "^3.4.17",
    "typescript": "^5"
  }
}

[V0_FILE]plaintext:file="public/mascot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/kawaii-mascot-NlsaKRBd9SVu3yecMmzepjtmy8OGJ.png" isMerged="true"

[V0_FILE]plaintext:file="public/decoration.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/sakura-branch-d9SVu3yecMmzepjtmy8OGJ.png" isMerged="true"

[V0_FILE]typescriptreact:file="components/meditation/meditation-player.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Slider } from "@/components/ui/slider"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import { Play, Pause, SkipBack, SkipForward, Volume2, VolumeX, Moon, CloudRain, Trees, Timer } from "lucide-react"
import { MEDITATION_TRACKS } from "@/constants"
import { formatTime } from "@/lib/utils"
import { useAudioPlayer } from "@/hooks/use-audio-player"
import { useLanguage } from "@/hooks/use-language"
import { motion, AnimatePresence } from "framer-motion"

interface MeditationPlayerProps {
  expanded?: boolean
}

const CATEGORIES = [
  { id: "all", icon: <Moon className="h-4 w-4" /> },
  { id: "nature", icon: <Trees className="h-4 w-4" /> },
  { id: "sleep", icon: <CloudRain className="h-4 w-4" /> },
  { id: "focus", icon: <Timer className="h-4 w-4" /> },
]

export default function MeditationPlayer({ expanded = false }: MeditationPlayerProps) {
  const [selectedTrackIndex, setSelectedTrackIndex] = useState(0)
  const [activeCategory, setActiveCategory] = useState("all")
  const [volume, setVolume] = useState(80)
  const [showVolume, setShowVolume] = useState(false)
  const selectedTrack = MEDITATION_TRACKS[selectedTrackIndex]
  const { t, language } = useLanguage()

const {
    isPlaying,
    currentTime,
    duration,
    togglePlayPause,
    setProgress,
    setVolume: setPlayerVolume,
  } = useAudioPlayer(selectedTrack.audioSrc)

// Update player volume when volume state changes
  useEffect(() => {
    setPlayerVolume(volume / 100)
  }, [volume, setPlayerVolume])

const handlePrevious = () => {
    setSelectedTrackIndex((prev) => (prev === 0 ? MEDITATION_TRACKS.length - 1 : prev - 1))
  }

const handleNext = () => {
    setSelectedTrackIndex((prev) => (prev === MEDITATION_TRACKS.length - 1 ? 0 : prev + 1))
  }

// Calculate progress percentage for visualization
  const progressPercentage = duration ? (currentTime / duration) * 100 : 0

return (
    <Card
      className={`mb-6 border-pink-200 dark:border-indigo-800 shadow-sm bg-white dark:bg-slate-800 ${expanded ? "overflow-hidden" : ""}`}
    >
      <CardContent className={`${expanded ? "p-0" : "pt-6"}`}>
        {!expanded && <h2 className="text-lg font-medium mb-3">{t("meditationTitle")}</h2>}

{expanded && (
          <div className="bg-gradient-to-b from-pink-100 to-blue-100 dark:from-indigo-950 dark:to-slate-900 p-4">
            <Tabs defaultValue="all" className="w-full">
              <TabsList className="grid grid-cols-4 mb-4">
                {CATEGORIES.map((category) => (
                  <TabsTrigger
                    key={category.id}
                    value={category.id}
                    onClick={() => setActiveCategory(category.id)}
                    className="flex items-center justify-center"
                  >
                    {category.icon}
                    <span className="ml-1.5">{t(category.id, "meditationCategories")}</span>
                  </TabsTrigger>
                ))}
              </TabsList>

<TabsContent value="nature" className="mt-0">
                <MeditationTrackList
                  tracks={MEDITATION_TRACKS.filter((track) => track.id.includes("morning"))}
                  selectedIndex={selectedTrackIndex}
                  onSelectTrack={setSelectedTrackIndex}
                  isPlaying={isPlaying}
                />
              </TabsContent>

<TabsContent value="sleep" className="mt-0">
                <MeditationTrackList
                  tracks={MEDITATION_TRACKS.filter((track) => track.id.includes("sleep"))}
                  selectedIndex={selectedTrackIndex}
                  onSelectTrack={setSelectedTrackIndex}
                  isPlaying={isPlaying}
                />
              </TabsContent>

<TabsContent value="focus" className="mt-0">
                <MeditationTrackList
                  tracks={MEDITATION_TRACKS.filter((track) => track.id.includes("focus"))}
                  selectedIndex={selectedTrackIndex}
                  onSelectTrack={setSelectedTrackIndex}
                  isPlaying={isPlaying}
                />
              </TabsContent>
            </Tabs>
          </div>
        )}

<div className={`${expanded ? "px-4 pt-4 pb-2" : ""}`}>
          <div className={`relative ${expanded ? "flex items-center" : ""}`}>
            {expanded && (
              <div className="relative w-16 h-16 mr-4 flex-shrink-0">
                <div
                  className={`w-16 h-16 rounded-full bg-gradient-to-br from-pink-300 to-purple-400 dark:from-pink-600 dark:to-purple-700 flex items-center justify-center ${isPlaying ? "animate-pulse" : ""}`}
                >
                  <div className="w-8 h-8 rounded-full bg-white dark:bg-slate-800 flex items-center justify-center">
                    {isPlaying ? (
                      <Pause className="h-4 w-4 text-pink-600 dark:text-pink-400" />
                    ) : (
                      <Play className="h-4 w-4 ml-0.5 text-pink-600 dark:text-pink-400" />
                    )}
                  </div>
                </div>

{isPlaying && (
                  <svg className="absolute top-0 left-0 w-16 h-16" viewBox="0 0 100 100">
                    <circle
                      cx="50"
                      cy="50"
                      r="48"
                      fill="none"
                      stroke="rgba(236, 72, 153, 0.3)"
                      strokeWidth="3"
                      strokeDasharray="301.59"
                      strokeDashoffset={301.59 - (301.59 * progressPercentage) / 100}
                      transform="rotate(-90 50 50)"
                    />
                  </svg>
                )}
              </div>
            )}

<div className={`${expanded ? "flex-1" : "bg-blue-50 dark:bg-indigo-950 rounded-lg p-4"}`}>
              <div className={`flex items-center ${expanded ? "mb-1" : "mb-3"}`}>
                {!expanded && (
                  <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
                    <Button
                      variant="outline"
                      size="icon"
                      className="h-12 w-12 rounded-full border-pink-300 dark:border-indigo-700 mr-4 bg-white dark:bg-slate-800"
                      onClick={togglePlayPause}
                    >
                      {isPlaying ? (
                        <Pause className="h-6 w-6 text-pink-600 dark:text-pink-400" />
                      ) : (
                        <Play className="h-6 w-6 text-pink-600 dark:text-pink-400" />
                      )}
                    </Button>
                  </motion.div>
                )}
                <div>
                  <h3 className={`font-medium ${expanded ? "text-base" : "text-sm"}`}>
                    {t("meditationTracks")[selectedTrackIndex].title}
                  </h3>
                  <p className="text-xs text-gray-500 dark:text-gray-400">
                    {t("meditationTracks")[selectedTrackIndex].duration}
                  </p>
                </div>
              </div>

{expanded && (
                <div className="mt-2">
                  <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400 mb-1">
                    <span>{formatTime(currentTime)}</span>
                    <span>{formatTime(duration)}</span>
                  </div>
                  <Slider
                    value={[currentTime]}
                    max={duration || 100}
                    step={1}
                    onValueChange={(value) => setProgress(value[0])}
                    className="my-2"
                  />
                </div>
              )}
            </div>
          </div>

{expanded && (
            <div className="flex justify-between items-center mt-4 px-2">
              <div className="relative">
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-8 w-8 rounded-full"
                  onClick={() => setShowVolume(!showVolume)}
                >
                  {volume === 0 ? <VolumeX className="h-4 w-4" /> : <Volume2 className="h-4 w-4" />}
                </Button>

<AnimatePresence>
                  {showVolume && (
                    <motion.div
                      initial={{ opacity: 0, width: 0 }}
                      animate={{ opacity: 1, width: 100 }}
                      exit={{ opacity: 0, width: 0 }}
                      className="absolute left-10 top-1 z-10 bg-white dark:bg-slate-800 rounded-full shadow-md p-2"
                    >
                      <Slider value={[volume]} max={100} step={1} onValueChange={(value) => setVolume(value[0])} />
                    </motion.div>
                  )}
                </AnimatePresence>
              </div>
              <div className="flex items-center space-x-2">
                <Button
                  variant="outline"
                  size="icon"
                  className="h-10 w-10 rounded-full dark:bg-slate-800"
                  onClick={handlePrevious}
                >
                  <SkipBack className="h-5 w-5" />
                </Button>
                <Button
                  variant="default"
                  size="icon"
                  className="h-12 w-12 rounded-full bg-pink-500 hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700"
                  onClick={togglePlayPause}
                >
                  {isPlaying ? <Pause className="h-6 w-6" /> : <Play className="h-6 w-6 ml-0.5" />}
                </Button>
                <Button
                  variant="outline"
                  size="icon"
                  className="h-10 w-10 rounded-full dark:bg-slate-800"
                  onClick={handleNext}
                >
                  <SkipForward className="h-5 w-5" />
                </Button>
              </div>
              <div className="w-8"></div> {/* Spacer for balance */}
            </div>
          )}
        </div>

{expanded && (
          <div className="mt-6 px-4 pb-4">
            <h3 className="font-medium mb-3">{t("currentlyPlaying")}</h3>
            <div className="bg-gradient-to-r from-pink-50 to-blue-50 dark:from-indigo-950 dark:to-slate-900 rounded-lg p-4 relative overflow-hidden">
              <div className="relative z-10">
                <h4 className="font-medium text-lg mb-1">{t("meditationTracks")[selectedTrackIndex].title}</h4>
                <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">{t("meditationDescription")}</p>
                <div className="flex items-center text-xs text-gray-500 dark:text-gray-400">
                  <span className="bg-pink-100 dark:bg-indigo-900 px-2 py-0.5 rounded-full">
                    {t("meditationTracks")[selectedTrackIndex].duration}
                  </span>
                  <span className="mx-2">•</span>
                  <span>{t("meditationBenefits")}</span>
                </div>
              </div>

{/* Decorative elements */}
              <div className="absolute top-0 right-0 w-24 h-24 opacity-10">
                <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="50" cy="50" r="40" fill="currentColor" className="text-pink-500 dark:text-pink-400" />
                </svg>
              </div>
            </div>

{isPlaying && (
              <div className="mt-6">
                <h3 className="font-medium mb-3">{t("meditationTips")}</h3>
                <div className="bg-blue-50 dark:bg-slate-900 rounded-lg p-4 text-sm">
                  <ul className="space-y-2">
                    <li className="flex items-start">
                      <span className="mr-2 text-pink-500 dark:text-pink-400">•</span>
                      {t("meditationTip1")}
                    </li>
                    <li className="flex items-start">
                      <span className="mr-2 text-pink-500 dark:text-pink-400">•</span>
                      {t("meditationTip2")}
                    </li>
                    <li className="flex items-start">
                      <span className="mr-2 text-pink-500 dark:text-pink-400">•</span>
                      {t("meditationTip3")}
                    </li>
                  </ul>
                </div>
              </div>
            )}
          </div>
        )}
      </CardContent>
    </Card>
  )
}

interface MeditationTrackListProps {
  tracks: typeof MEDITATION_TRACKS
  selectedIndex: number
  onSelectTrack: (index: number) => void
  isPlaying: boolean
}

function MeditationTrackList({ tracks, selectedIndex, onSelectTrack, isPlaying }: MeditationTrackListProps) {
  const { t } = useLanguage()

return (
    <div className="space-y-2 max-h-[300px] overflow-y-auto pr-1">
      {tracks.length === 0 ? (
        <p className="text-center py-8 text-gray-500 dark:text-gray-400">{t("noTracksInCategory")}</p>
      ) : (
        tracks.map((track, index) => {
          const trackIndex = MEDITATION_TRACKS.findIndex((t) => t.id === track.id)
          const isSelected = trackIndex === selectedIndex

return (
            <motion.div
              key={track.id}
              className={`p-3 rounded-lg flex items-center cursor-pointer transition-colors ${
                isSelected
                  ? "bg-pink-100 dark:bg-indigo-900"
                  : "bg-white dark:bg-slate-800 hover:bg-gray-50 dark:hover:bg-slate-700"
              }`}
              onClick={() => onSelectTrack(trackIndex)}
              whileHover={{ scale: 1.01 }}
              whileTap={{ scale: 0.99 }}
            >
              <div className="w-10 h-10 rounded-full bg-gradient-to-br from-pink-200 to-blue-200 dark:from-pink-800 dark:to-blue-800 flex items-center justify-center mr-3">
                {isSelected && isPlaying ? (
                  <div className="flex space-x-0.5">
                    <motion.div
                      animate={{ height: [3, 10, 3] }}
                      transition={{ repeat: Number.POSITIVE_INFINITY, duration: 1, ease: "easeInOut" }}
                      className="w-0.5 bg-pink-600 dark:bg-pink-400 rounded-full"
                    />
                    <motion.div
                      animate={{ height: [10, 3, 10] }}
                      transition={{ repeat: Number.POSITIVE_INFINITY, duration: 1, ease: "easeInOut" }}
                      className="w-0.5 bg-pink-600 dark:bg-pink-400 rounded-full"
                    />
                    <motion.div
                      animate={{ height: [6, 12, 6] }}
                      transition={{ repeat: Number.POSITIVE_INFINITY, duration: 1, ease: "easeInOut" }}
                      className="w-0.5 bg-pink-600 dark:bg-pink-400 rounded-full"
                    />
                  </div>
                ) : (
                  <Play className="h-4 w-4 ml-0.5 text-pink-600 dark:text-pink-400" />
                )}
              </div>
              <div>
                <h4 className="text-sm font-medium">{t("meditationTracks")[trackIndex].title}</h4>
                <p className="text-xs text-gray-500 dark:text-gray-400">{t("meditationTracks")[trackIndex].duration}</p>
              </div>
            </motion.div>
          )
        })
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="hooks/use-audio-player.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"

export function useAudioPlayer(audioSrc: string) {
  const [isPlaying, setIsPlaying] = useState(false)
  const [currentTime, setCurrentTime] = useState(0)
  const [duration, setDuration] = useState(60) // Default duration of 60 seconds
  const audioRef = useRef<HTMLAudioElement | null>(null)

// Mock audio playback since we don't have actual audio files
  useEffect(() => {
    let interval: NodeJS.Timeout | null = null

if (isPlaying) {
      interval = setInterval(() => {
        setCurrentTime((prev) => {
          const newTime = prev + 1
          if (newTime >= duration) {
            setIsPlaying(false)
            return 0
          }
          return newTime
        })
      }, 1000)
    }

return () => {
      if (interval) clearInterval(interval)
    }
  }, [isPlaying, duration])

// Reset when audio source changes
  useEffect(() => {
    setIsPlaying(false)
    setCurrentTime(0)

// Set mock duration based on track
    if (audioSrc.includes("meditation-1")) {
      setDuration(180) // 3 minutes
    } else if (audioSrc.includes("meditation-2")) {
      setDuration(300) // 5 minutes
    } else if (audioSrc.includes("meditation-3")) {
      setDuration(240) // 4 minutes
    } else if (audioSrc.includes("meditation-4")) {
      setDuration(120) // 2 minutes
    } else {
      setDuration(60) // Default 1 minute
    }
  }, [audioSrc])

const togglePlayPause = () => {
    setIsPlaying(!isPlaying)
  }

const setProgress = (value: number) => {
    setCurrentTime(value)
  }

const setVolume = (value: number) => {
    // In a real implementation, this would set the volume of the audio element
    // For our mock implementation, we'll just log it
    console.log(`Setting volume to ${value}`)
  }

return {
    isPlaying,
    currentTime,
    duration,
    togglePlayPause,
    setProgress,
    setVolume,
    audioRef,
  }
}

[V0_FILE]typescriptreact:file="components/mood/mood-selector.tsx" isEdit="true" isMerged="true"
"use client"
import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { useWellness } from "@/hooks/use-wellness"
import { useLanguage } from "@/hooks/use-language"
import { MOOD_OPTIONS } from "@/constants"
import { cn } from "@/lib/utils"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { ChevronDown, ChevronUp } from "lucide-react"

export default function MoodSelector() {
  const { selectedMood, setSelectedMood } = useWellness()
  const { t } = useLanguage()
  const [showAllMoods, setShowAllMoods] = useState(false)

// Display 5 moods initially, show all when expanded
  const visibleMoods = showAllMoods ? MOOD_OPTIONS : MOOD_OPTIONS.slice(0, 5)

return (
    <Card className="mb-6 border-pink-200 dark:border-indigo-800 shadow-sm bg-white dark:bg-slate-800 overflow-hidden">
      <CardContent className="pt-6">
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-lg font-medium">{t("moodTitle")}</h2>
          <motion.div
            initial={{ scale: 1 }}
            animate={{ scale: [1, 1.1, 1] }}
            transition={{ repeat: 3, duration: 1 }}
            className="bg-pink-100 dark:bg-pink-900/30 text-pink-600 dark:text-pink-400 text-xs px-2 py-1 rounded-full"
          >
            {t("todayProgress")}
          </motion.div>
        </div>

<div className="grid grid-cols-5 gap-2 mb-2">
          {visibleMoods.map((mood) => (
            <motion.button
              key={mood.id}
              onClick={() => setSelectedMood(mood.id)}
              className={cn(
                "flex flex-col items-center p-2 rounded-lg transition-all duration-200",
                selectedMood === mood.id
                  ? "bg-pink-100 dark:bg-indigo-900 scale-110 shadow-sm"
                  : "hover:bg-pink-50 dark:hover:bg-indigo-950",
              )}
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              aria-label={`Select mood: ${t(mood.id, "moods")}`}
            >
              <span className="text-3xl mb-1">{mood.emoji}</span>
              <span className="text-xs whitespace-nowrap">{t(mood.id, "moods")}</span>
            </motion.button>
          ))}
        </div>

<div className="flex justify-center mt-3">
          <Button
            variant="ghost"
            size="sm"
            onClick={() => setShowAllMoods(!showAllMoods)}
            className="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 flex items-center"
          >
            {showAllMoods ? (
              <>
                <ChevronUp className="h-3 w-3 mr-1" />
                {t("showLess")}
              </>
            ) : (
              <>
                <ChevronDown className="h-3 w-3 mr-1" />
                {t("showMore")}
              </>
            )}
          </Button>
        </div>

[V0_FILE]typescriptreact:file="components/stress/stress-checklist.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { useWellness } from "@/hooks/use-wellness"
import { useLanguage } from "@/hooks/use-language"
import { STRESS_QUESTIONS } from "@/constants"
import { motion } from "framer-motion"
import { Heart, CloudRain, Coffee, Brain, Battery } from "lucide-react"

export default function StressChecklist() {
  const { stressChecklist, setStressRating, saveStressChecklist } = useWellness()
  const { t } = useLanguage()

// Icons for each stress question
  const questionIcons = [
    <Heart key="sleep" className="h-5 w-5 text-pink-500 dark:text-pink-400" />,
    <Coffee key="breaks" className="h-5 w-5 text-amber-500 dark:text-amber-400" />,
    <CloudRain key="water" className="h-5 w-5 text-blue-500 dark:text-blue-400" />,
    <Brain key="anxiety" className="h-5 w-5 text-purple-500 dark:text-purple-400" />,
    <Battery key="overwhelmed" className="h-5 w-5 text-green-500 dark:text-green-400" />,
  ]

return (
    <Card className="mb-6 border-pink-200 dark:border-indigo-800 shadow-sm bg-white dark:bg-slate-800">
      <CardContent className="pt-6">
        <h2 className="text-lg font-medium mb-3">{t("stressTitle")}</h2>
        <div className="space-y-4">
          {STRESS_QUESTIONS.map((question, index) => (
            <motion.div
              key={question.id}
              className="bg-pink-50 dark:bg-indigo-950 rounded-lg p-3"
              initial={{ opacity: 0, y: 5 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.1 }}
            >
              <div className="flex items-center mb-2">
                <div className="mr-2">{questionIcons[index]}</div>
                <p className="text-sm font-medium">{t(index.toString(), "stressQuestions")}</p>
              </div>

<StressRating
                value={stressChecklist[question.id] || 0}
                onChange={(value) => setStressRating(question.id, value)}
              />
            </motion.div>
          ))}
        </div>

<div className="mt-4 flex justify-end">
          <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
            <Button
              size="sm"
              className="bg-pink-500 hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700"
              onClick={saveStressChecklist}
            >
              {t("saveButton")}
            </Button>
          </motion.div>
        </div>
      </CardContent>
    </Card>
  )
}

interface StressRatingProps {
  value: number
  onChange: (value: number) => void
}

function StressRating({ value, onChange }: StressRatingProps) {
  const { t } = useLanguage()
  const ratings = [
    { value: 1, emoji: "😊", label: "great" },
    { value: 2, emoji: "🙂", label: "good" },
    { value: 3, emoji: "😐", label: "neutral" },
    { value: 4, emoji: "😟", label: "bad" },
    { value: 5, emoji: "😣", label: "terrible" },
  ]

return (
    <div className="flex justify-between">
      {ratings.map((rating) => (
        <button
          key={rating.value}
          onClick={() => onChange(rating.value)}
          className={`flex flex-col items-center transition-all duration-200 p-1 rounded-full ${
            value === rating.value
              ? "transform scale-125 bg-white dark:bg-slate-800 shadow-sm"
              : "opacity-70 hover:opacity-100"
          }`}
          title={t(rating.label, "stressRatings")}
        >
          <span className="text-xl">{rating.emoji}</span>
        </button>
      ))}
    </div>
  )
}

[V0_FILE]typescriptreact:file="context/language-context.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { createContext, useState, useEffect, type ReactNode } from "react"
import type { LanguageCode, Language } from "@/types"
import { LANGUAGES, TRANSLATIONS } from "@/constants"

interface LanguageContextType {
  language: LanguageCode
  setLanguage: (lang: LanguageCode) => void
  t: (key: string, section?: string) => string
  languages: Language[]
}

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

interface LanguageProviderProps {
  children: ReactNode
}

export function LanguageProvider({ children }: LanguageProviderProps) {
  const [language, setLanguageState] = useState<LanguageCode>("ja")

useEffect(() => {
    const savedLanguage = localStorage.getItem("wellness_language") as LanguageCode
    if (savedLanguage && (savedLanguage === "ja" || savedLanguage === "ko")) {
      setLanguageState(savedLanguage)
    }
  }, [])

const setLanguage = (lang: LanguageCode) => {
    setLanguageState(lang)
    localStorage.setItem("wellness_language", lang)
  }

const t = (key: string, section?: string): string => {
    const translations = TRANSLATIONS[language]

if (!translations) return key

if (section) {
      return translations[section]?.[key] || key
    }

return translations[key] || key
  }

const value = {
    language,
    setLanguage,
    t,
    languages: LANGUAGES,
  }

return <LanguageContext.Provider value={value}>{children}</LanguageContext.Provider>
}

[V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true"
import type * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

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

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
}

export { Badge, badgeVariants }

[V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true"
import * as React from "react"

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

export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}

const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
  return (
    <input
      type={type}
      className={cn(
        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      ref={ref}
      {...props}
    />
  )
})
Input.displayName = "Input"

export { Input }

[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true"
import type React from "react"
import "./globals.css"
import type { Metadata } from "next"
import { ThemeProvider } from "@/components/theme-provider"

export const metadata: Metadata = {
  title: "Wellness App",
  description: "A simple wellness mobile web app",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="components/stress/quick-stress-check.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { useWellness } from "@/hooks/use-wellness"
import { useLanguage } from "@/hooks/use-language"
import { motion } from "framer-motion"
import { Brain, ArrowRight } from "lucide-react"

interface QuickStressCheckProps {
  onComplete?: () => void
  onViewFull?: () => void
}

export default function QuickStressCheck({ onComplete, onViewFull }: QuickStressCheckProps) {
  const { setStressRating, saveStressChecklist } = useWellness()
  const { t } = useLanguage()
  const [selectedRating, setSelectedRating] = useState<number | null>(null)
  const [isSubmitting, setIsSubmitting] = useState(false)

const ratings = [
    { value: 1, emoji: "😊", label: "great" },
    { value: 2, emoji: "🙂", label: "good" },
    { value: 3, emoji: "😐", label: "neutral" },
    { value: 4, emoji: "😟", label: "bad" },
    { value: 5, emoji: "😣", label: "terrible" },
  ]

const handleSubmit = async () => {
    if (selectedRating === null) return

setIsSubmitting(true)
    // 빠른 스트레스 체크에서는 첫 번째 질문에만 답변
    setStressRating("quickCheck", selectedRating)
    await saveStressChecklist()
    setIsSubmitting(false)

if (onComplete) onComplete()
  }

return (
    <Card className="mb-6 border-pink-200 dark:border-indigo-800 shadow-sm bg-white dark:bg-slate-800">
      <CardContent className="pt-6">
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-lg font-medium flex items-center">
            <Brain className="h-5 w-5 mr-2 text-purple-500" />
            {t("quickStressCheck")}
          </h2>
          <Button
            variant="ghost"
            size="sm"
            className="text-pink-500 dark:text-pink-400 flex items-center"
            onClick={onViewFull}
          >
            {t("viewFull")}
            <ArrowRight className="h-4 w-4 ml-1" />
          </Button>
        </div>

<p className="text-sm text-gray-600 dark:text-gray-300 mb-4">{t("howAreYouFeeling")}</p>

<div className="flex justify-between mb-4">
          {ratings.map((rating) => (
            <motion.button
              key={rating.value}
              onClick={() => setSelectedRating(rating.value)}
              className={`flex flex-col items-center transition-all duration-200 p-2 rounded-full ${
                selectedRating === rating.value
                  ? "transform scale-125 bg-pink-100 dark:bg-indigo-900 shadow-sm"
                  : "opacity-70 hover:opacity-100"
              }`}
              whileHover={{ scale: 1.1 }}
              whileTap={{ scale: 0.95 }}
              title={t(rating.label, "stressRatings")}
            >
              <span className="text-2xl">{rating.emoji}</span>
              <span className="text-xs mt-1">{t(rating.label, "stressRatings")}</span>
            </motion.button>
          ))}
        </div>

<div className="flex justify-end">
          <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
            <Button
              size="sm"
              className="bg-purple-500 hover:bg-purple-600 dark:bg-purple-600 dark:hover:bg-purple-700"
              onClick={handleSubmit}
              disabled={isSubmitting || selectedRating === null}
            >
              {isSubmitting ? t("saving") : t("saveButton")}
            </Button>
          </motion.div>
        </div>
      </CardContent>
    </Card>
  )
}

[V0_FILE]plaintext:file="public/mascot-icon.png" isMerged="true"

[V0_FILE]typescriptreact:file="components/home/notification-banner.tsx" isMerged="true"
"use client"

import { motion, AnimatePresence } from "framer-motion"
import { useLanguage } from "@/hooks/use-language"
import { Info } from "lucide-react"

interface NotificationBannerProps {
  show: boolean
  onClose: () => void
}

export default function NotificationBanner({ show, onClose }: NotificationBannerProps) {
  const { language } = useLanguage()

return (
    <AnimatePresence>
      {show && (
        <motion.div
          initial={{ height: 0, opacity: 0 }}
          animate={{ height: "auto", opacity: 1 }}
          exit={{ height: 0, opacity: 0 }}
          className="overflow-hidden"
        >
          <div className="bg-pink-50 dark:bg-pink-900/30 border border-pink-200 dark:border-pink-800 rounded-lg p-3 flex items-start">
            <div className="mr-3 mt-0.5">
              <Info className="h-5 w-5 text-pink-500" />
            </div>
            <div className="flex-1">
              <p className="text-sm font-medium text-pink-800 dark:text-pink-300">
                {language === "ja" ? "お知らせ" : "공지사항"}
              </p>
              <p className="text-xs text-pink-700 dark:text-pink-400 mt-1">
                {language === "ja"
                  ? "新しい瞑想コンテンツが追加されました！今すぐチェックしてみましょう。"
                  : "새로운 명상 콘텐츠가 추가되었습니다! 지금 바로 확인해보세요."}
              </p>
            </div>
            <button
              className="text-pink-500 hover:text-pink-700 dark:text-pink-400 dark:hover:text-pink-300"
              onClick={onClose}
            >
              <span className="sr-only">Close</span>
              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                <path
                  fillRule="evenodd"
                  d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                  clipRule="evenodd"
                />
              </svg>
            </button>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  )
}

[V0_FILE]typescriptreact:file="components/home/hero-section.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { useLanguage } from "@/hooks/use-language"
import { useWellness } from "@/hooks/use-wellness"
import { formatDate } from "@/lib/utils"
import { Calendar, CheckCircle2, Award, TrendingUp, Sparkles, Sun, Moon } from "lucide-react"
import { ConfettiEffect } from "@/components/effects/animations"

interface HeroSectionProps {
  timeOfDay: "morning" | "afternoon" | "evening" | "night"
  streakCount: number
  completionPercentage: number
  showCompletionAnimation: boolean
}

export default function HeroSection({
  timeOfDay,
  streakCount,
  completionPercentage,
  showCompletionAnimation,
}: HeroSectionProps) {
  const { t, language } = useLanguage()
  const { selectedMood, diaryEntry } = useWellness()

// Get greeting based on time of day
  const getGreeting = () => {
    if (language === "ja") {
      switch (timeOfDay) {
        case "morning":
          return "おはようございます！"
        case "afternoon":
          return "こんにちは！"
        case "evening":
          return "こんばんは！"
        case "night":
          return "おやすみなさい！"
      }
    } else {
      switch (timeOfDay) {
        case "morning":
          return "좋은 아침이에요!"
        case "afternoon":
          return "안녕하세요!"
        case "evening":
          return "좋은 저녁이에요!"
        case "night":
          return "안녕히 주무세요!"
      }
    }
  }

// Get time of day icon
  const getTimeIcon = () => {
    switch (timeOfDay) {
      case "morning":
        return <Sun className="h-5 w-5 text-amber-500" />
      case "afternoon":
        return <Sun className="h-5 w-5 text-orange-500" />
      case "evening":
        return <Moon className="h-5 w-5 text-indigo-400" />
      case "night":
        return <Moon className="h-5 w-5 text-indigo-600" />
    }
  }

return (
    <motion.div
      className="relative overflow-hidden bg-gradient-to-r from-pink-100 to-indigo-100 dark:from-pink-950/40 dark:to-indigo-950/40 rounded-xl p-5 shadow-sm border border-pink-200/50 dark:border-indigo-800/50"
      initial={{ y: 20, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      <div className="flex items-start">
        <div className="relative mr-3 flex-shrink-0">
          <motion.div
            initial={{ scale: 0.9, rotate: -5 }}
            animate={{ scale: 1, rotate: 0 }}
            transition={{ duration: 0.5 }}
          >
            <img
              src="/mascot.png"
              alt="Cute mascot"
              className="w-24 h-24 object-contain"
              onError={(e) => {
                // Fallback if image doesn't load
                e.currentTarget.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 24 24' fill='none' stroke='%23ec4899' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5'%3E%3C/path%3E%3Cpath d='M8.5 8.5v.01'%3E%3C/path%3E%3Cpath d='M16 15.5v.01'%3E%3C/path%3E%3Cpath d='M12 12v.01'%3E%3C/path%3E%3Cpath d='M11 17v.01'%3E%3C/path%3E%3Cpath d='M7 14v.01'%3E%3C/path%3E%3C/svg%3E`
              }}
            />
          </motion.div>
          <motion.div
            animate={{ rotate: [0, 10, 0, -10, 0] }}
            transition={{ repeat: Number.POSITIVE_INFINITY, duration: 5 }}
            className="absolute -top-1 -right-1 bg-pink-200 dark:bg-indigo-800 rounded-full p-1.5 shadow-sm"
          >
            <Sparkles className="h-3.5 w-3.5 text-pink-600 dark:text-pink-400" />
          </motion.div>
        </div>
        <div className="flex-1">
          <div className="flex items-center">
            {getTimeIcon()}
            <h2 className="font-medium text-xl ml-1.5">{getGreeting()}</h2>
          </div>
          <p className="text-sm text-gray-600 dark:text-gray-300 mt-1 flex items-center">
            <Calendar className="h-3.5 w-3.5 mr-1.5 text-gray-500 dark:text-gray-400" />
            {formatDate(new Date(), language)}
          </p>

<div className="flex items-center mt-2 bg-white/60 dark:bg-slate-800/60 rounded-lg p-2 backdrop-blur-sm">
            <div className="flex items-center mr-3">
              <TrendingUp className="h-4 w-4 text-green-500 mr-1" />
              <span className="text-xs font-medium">
                {streakCount} {t("dayStreak")}
              </span>
            </div>
            <div className="flex items-center">
              <Award className="h-4 w-4 text-amber-500 mr-1" />
              <span className="text-xs font-medium">{t("level")} 2</span>
            </div>
          </div>
        </div>
      </div>

{/* Progress tracker */}
      <div className="mt-4">
        <div className="flex justify-between text-sm mb-1.5">
          <span className="font-medium flex items-center">
            <CheckCircle2 className="h-4 w-4 mr-1.5 text-pink-500 dark:text-pink-400" />
            {t("todayProgress")}
          </span>
          <span className="font-medium">{completionPercentage}%</span>
        </div>
        <div className="w-full bg-white/50 dark:bg-slate-800/50 rounded-full h-3 overflow-hidden backdrop-blur-sm">
          <motion.div
            className="bg-gradient-to-r from-pink-500 to-purple-500 h-3 rounded-full"
            initial={{ width: 0 }}
            animate={{ width: `${completionPercentage}%` }}
            transition={{ duration: 0.8, ease: "easeOut" }}
          />
        </div>

<div className="flex justify-between mt-2">
          <div className="flex items-center">
            <div
              className={`w-3 h-3 rounded-full mr-1.5 ${selectedMood ? "bg-green-500" : "bg-gray-300 dark:bg-gray-600"}`}
            />
            <span className="text-xs">{t("moodTitle")}</span>
          </div>
          <div className="flex items-center">
            <div
              className={`w-3 h-3 rounded-full mr-1.5 ${diaryEntry.trim().length > 0 ? "bg-green-500" : "bg-gray-300 dark:bg-gray-600"}`}
            />
            <span className="text-xs">{t("diaryTitle")}</span>
          </div>
        </div>
      </div>

{completionPercentage === 100 && (
        <motion.div
          initial={{ opacity: 0, scale: 0.8, y: 10 }}
          animate={{ opacity: 1, scale: 1, y: 0 }}
          className="mt-3 text-center text-sm bg-white/70 dark:bg-indigo-900/70 p-2.5 rounded-lg text-pink-600 dark:text-pink-400 backdrop-blur-sm border border-pink-200/50 dark:border-indigo-800/50"
        >
          <div className="flex items-center justify-center">
            <Award className="h-5 w-5 mr-2 text-amber-500" />
            <span className="font-medium">{t("completionMessage")} ✨</span>
          </div>
          {showCompletionAnimation && <ConfettiEffect />}
        </motion.div>
      )}

{/* Decorative elements */}
      <div className="absolute -bottom-6 -right-6 w-24 h-24 rounded-full bg-gradient-to-br from-pink-200/30 to-indigo-200/30 dark:from-pink-800/10 dark:to-indigo-800/10 blur-xl" />
      <div className="absolute -top-6 -left-6 w-24 h-24 rounded-full bg-gradient-to-br from-indigo-200/30 to-pink-200/30 dark:from-indigo-800/10 dark:to-pink-800/10 blur-xl" />
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="components/home/daily-rewards.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { useLanguage } from "@/hooks/use-language"
import { Gift, Star } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"

export default function DailyRewards() {
  const { language } = useLanguage()

return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: 0.2, duration: 0.5 }}
    >
      <div className="flex justify-between items-center mb-3">
        <h3 className="text-md font-medium flex items-center">
          <Gift className="h-4 w-4 mr-1.5 text-pink-500 dark:text-pink-400" />
          {language === "ja" ? "デイリーボーナス" : "데일리 보너스"}
        </h3>
        <Badge
          variant="outline"
          className="text-xs bg-pink-50 text-pink-600 dark:bg-pink-900/30 dark:text-pink-400 border-pink-200 dark:border-pink-800"
        >
          {language === "ja" ? "NEW" : "신규"}
        </Badge>
      </div>
      <Card className="bg-gradient-to-r from-pink-50 to-purple-50 dark:from-pink-900/20 dark:to-purple-900/20 border-pink-100 dark:border-pink-800/50 overflow-hidden">
        <CardContent className="p-0">
          <div className="flex items-center p-4">
            <div className="relative mr-4">
              <motion.div
                animate={{
                  scale: [1, 1.05, 1],
                  rotate: [0, 5, 0, -5, 0],
                }}
                transition={{
                  repeat: Number.POSITIVE_INFINITY,
                  duration: 3,
                }}
                className="w-16 h-16 rounded-full bg-gradient-to-br from-amber-200 to-amber-400 dark:from-amber-400 dark:to-amber-600 flex items-center justify-center"
              >
                <Star className="h-8 w-8 text-white" />
              </motion.div>
              <motion.div
                animate={{
                  opacity: [0, 1, 0],
                  scale: [0.8, 1.2, 0.8],
                }}
                transition={{
                  repeat: Number.POSITIVE_INFINITY,
                  duration: 2,
                }}
                className="absolute -top-1 -right-1 w-6 h-6 rounded-full bg-pink-500 flex items-center justify-center text-white text-xs font-bold"
              >
                !
              </motion.div>
            </div>
            <div className="flex-1">
              <h4 className="font-medium text-lg mb-1">
                {language === "ja" ? "今日のご褒美を受け取ろう！" : "오늘의 보상을 받으세요!"}
              </h4>
              <p className="text-sm text-gray-600 dark:text-gray-300">
                {language === "ja" ? "ログインして特別なアイテムをゲット" : "로그인하고 특별한 아이템을 획득하세요"}
              </p>
              <Button
                className="mt-2 bg-gradient-to-r from-pink-500 to-purple-500 hover:from-pink-600 hover:to-purple-600"
                size="sm"
              >
                {language === "ja" ? "受け取る" : "받기"}
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="components/home/recommended-activities.tsx" isMerged="true"
"use client"

import type React from "react"

import { motion } from "framer-motion"
import { useLanguage } from "@/hooks/use-language"
import { Sparkles, Heart, Droplets } from "lucide-react"
import { ActivityIconComponent } from "@/components/icons/custom-icons"

export default function RecommendedActivities() {
  const { t } = useLanguage()

return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: 0.4, duration: 0.5 }}
    >
      <h3 className="text-md font-medium mb-3 flex items-center">
        <Sparkles className="h-4 w-4 mr-1.5 text-pink-500 dark:text-pink-400" />
        {t("recommendedActivities")}
      </h3>
      <div className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm rounded-lg border border-gray-100 dark:border-gray-800 p-4">
        <div className="grid grid-cols-1 gap-3">
          <RecommendedActivityComponent
            title={t("deepBreathing")}
            description={t("deepBreathingDesc")}
            icon={<Droplets className="h-5 w-5 text-blue-500" />}
            time="2 min"
          />
          <RecommendedActivityComponent
            title={t("gratitudeJournal")}
            description={t("gratitudeJournalDesc")}
            icon={<Heart className="h-5 w-5 text-pink-500" />}
            time="5 min"
          />
          <RecommendedActivityComponent
            title={t("quickStretch")}
            description={t("quickStretchDesc")}
            icon={<ActivityIconComponent className="h-5 w-5 text-green-500" />}
            time="3 min"
          />
        </div>
      </div>
    </motion.div>
  )
}

// Recommended activity component
function RecommendedActivityComponent({
  title,
  description,
  icon,
  time,
}: {
  title: string
  description: string
  icon: React.ReactNode
  time: string
}) {
  return (
    <div className="flex items-start p-3 bg-gradient-to-r from-gray-50 to-white dark:from-slate-800 dark:to-slate-700 rounded-lg border border-gray-100 dark:border-gray-700">
      <div className="mr-3 p-2 bg-white dark:bg-slate-900 rounded-full shadow-sm">{icon}</div>
      <div className="flex-1">
        <div className="flex justify-between items-start">
          <h4 className="text-sm font-medium">{title}</h4>
          <span className="text-xs bg-gray-100 dark:bg-slate-700 px-2 py-0.5 rounded-full">{time}</span>
        </div>
        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{description}</p>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/home/wellness-tips.tsx" isMerged="true"
"use client"

import { motion, AnimatePresence } from "framer-motion"
import { useLanguage } from "@/hooks/use-language"
import { MessageCircle } from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

interface WellnessTipsProps {
  show: boolean
  onClose: () => void
}

export default function WellnessTips({ show, onClose }: WellnessTipsProps) {
  const { language } = useLanguage()

return (
    <AnimatePresence>
      {show && (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, height: 0 }}
          transition={{ delay: 0.3, duration: 0.5 }}
        >
          <div className="flex justify-between items-center mb-3">
            <h3 className="text-md font-medium flex items-center">
              <MessageCircle className="h-4 w-4 mr-1.5 text-pink-500 dark:text-pink-400" />
              {language === "ja" ? "今日のヒント" : "오늘의 팁"}
            </h3>
            <button className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200" onClick={onClose}>
              <span className="sr-only">Close</span>
              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                <path
                  fillRule="evenodd"
                  d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                  clipRule="evenodd"
                />
              </svg>
            </button>
          </div>
          <Card className="bg-blue-50 dark:bg-blue-900/20 border-blue-100 dark:border-blue-800/50">
            <CardContent className="p-4">
              <div className="flex">
                <div className="mr-3 mt-1">
                  <img
                    src="/mascot-icon.png"
                    alt="Mascot"
                    className="w-8 h-8"
                    onError={(e) => {
                      e.currentTarget.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5'%3E%3C/path%3E%3C/svg%3E`
                    }}
                  />
                </div>
                <div>
                  <p className="text-sm text-blue-800 dark:text-blue-200">
                    {language === "ja"
                      ? "深呼吸をすると、ストレスを軽減し、集中力を高めることができます。1日に数回、深呼吸の時間を取りましょう。"
                      : "깊은 호흡은 스트레스를 줄이고 집중력을 높이는 데 도움이 됩니다. 하루에 몇 번씩 깊은 호흡을 위한 시간을 가져보세요."}
                  </p>
                  <div className="flex justify-end mt-2">
                    <Badge className="bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100 hover:bg-blue-200 dark:hover:bg-blue-700">
                      {language === "ja" ? "もっと見る" : "더 보기"}
                    </Badge>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </motion.div>
      )}
    </AnimatePresence>
  )
}

[V0_FILE]typescriptreact:file="components/home/recent-activities.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { useLanguage } from "@/hooks/use-language"
import { useWellness } from "@/hooks/use-wellness"
import { TrendingUp } from "lucide-react"
import { formatTimeAgo } from "@/lib/utils"
import { PenIcon, HeartIcon, MeditationIcon } from "@/components/icons/custom-icons"

export default function RecentActivities() {
  const { t, language } = useLanguage()
  const { selectedMood, diaryEntries } = useWellness()

// Get recent activities
  const getRecentActivities = () => {
    const activities = []

// Add recent diary entries
    if (diaryEntries.length > 0) {
      activities.push({
        type: "diary",
        date: new Date(diaryEntries[0].date),
        icon: <PenIcon className="h-4 w-4 text-pink-500" />,
        title: t("recentDiary"),
        description: t("diaryUpdated"),
      })
    }

// Add mood tracking
    if (selectedMood) {
      activities.push({
        type: "mood",
        date: new Date(),
        icon: <HeartIcon className="h-4 w-4 text-red-500" />,
        title: t("moodTracked"),
        description: t(selectedMood, "moods"),
      })
    }

// Add meditation
    activities.push({
      type: "meditation",
      date: new Date(Date.now() - 24 * 60 * 60 * 1000), // Yesterday
      icon: <MeditationIcon className="h-4 w-4 text-blue-500" />,
      title: t("meditationCompleted"),
      description: t("meditationTracks")[0].title,
    })

return activities.sort((a, b) => b.date.getTime() - a.date.getTime()).slice(0, 3)
  }

const recentActivities = getRecentActivities()

return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: 0.2, duration: 0.5 }}
    >
      <h3 className="text-md font-medium mb-3 flex items-center">
        <TrendingUp className="h-4 w-4 mr-1.5 text-pink-500 dark:text-pink-400" />
        {t("recentActivities")}
      </h3>
      <div className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm rounded-lg border border-gray-100 dark:border-gray-800 overflow-hidden">
        {recentActivities.map((activity, index) => (
          <div
            key={`${activity.type}-${index}`}
            className={`flex items-center p-3 ${index !== recentActivities.length - 1 ? "border-b border-gray-100 dark:border-gray-800" : ""}`}
          >
            <div className="mr-3 p-2 bg-gray-100 dark:bg-gray-700 rounded-full">{activity.icon}</div>
            <div className="flex-1">
              <h4 className="text-sm font-medium">{activity.title}</h4>
              <p className="text-xs text-gray-500 dark:text-gray-400">{activity.description}</p>
            </div>
            <div className="text-xs text-gray-400 dark:text-gray-500">{formatTimeAgo(activity.date, language)}</div>
          </div>
        ))}
      </div>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="components/home/wellness-insights.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { useLanguage } from "@/hooks/use-language"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import { InsightIcon } from "@/components/icons/custom-icons"

export default function WellnessInsights() {
  const { t } = useLanguage()

return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: 0.3, duration: 0.5 }}
    >
      <h3 className="text-md font-medium mb-3 flex items-center">
        <InsightIcon className="h-4 w-4 mr-1.5 text-pink-500 dark:text-pink-400" />
        {t("wellnessInsights")}
      </h3>
      <div className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm rounded-lg border border-gray-100 dark:border-gray-800 p-4">
        <Tabs defaultValue="mood" className="w-full">
          <TabsList className="grid w-full grid-cols-3 mb-4">
            <TabsTrigger value="mood">{t("moodTab")}</TabsTrigger>
            <TabsTrigger value="sleep">{t("sleepTab")}</TabsTrigger>
            <TabsTrigger value="stress">{t("stressTab")}</TabsTrigger>
          </TabsList>
          <TabsContent value="mood" className="space-y-2">
            <div className="flex justify-center">
              <div className="w-32 h-32 relative">
                <MoodChart />
                <div className="absolute inset-0 flex items-center justify-center">
                  <div className="text-center">
                    <div className="text-3xl">😊</div>
                    <div className="text-xs font-medium mt-1">{t("mostFrequent")}</div>
                  </div>
                </div>
              </div>
            </div>
            <p className="text-xs text-center text-gray-500 dark:text-gray-400 mt-2">{t("moodInsight")}</p>
          </TabsContent>
          <TabsContent value="sleep" className="space-y-2">
            <div className="flex justify-center">
              <div className="w-32 h-32 relative">
                <SleepChart />
                <div className="absolute inset-0 flex items-center justify-center">
                  <div className="text-center">
                    <div className="text-xl font-bold">7.5h</div>
                    <div className="text-xs font-medium">{t("avgSleep")}</div>
                  </div>
                </div>
              </div>
            </div>
            <p className="text-xs text-center text-gray-500 dark:text-gray-400 mt-2">{t("sleepInsight")}</p>
          </TabsContent>
          <TabsContent value="stress" className="space-y-2">
            <div className="flex justify-center">
              <div className="w-32 h-32 relative">
                <StressChart />
                <div className="absolute inset-0 flex items-center justify-center">
                  <div className="text-center">
                    <div className="text-xl font-bold">-12%</div>
                    <div className="text-xs font-medium">{t("stressReduction")}</div>
                  </div>
                </div>
              </div>
            </div>
            <p className="text-xs text-center text-gray-500 dark:text-gray-400 mt-2">{t("stressInsight")}</p>
          </TabsContent>
        </Tabs>
      </div>
    </motion.div>
  )
}

// Chart components (simplified visualizations)
function MoodChart() {
  return (
    <svg viewBox="0 0 100 100" className="w-full h-full">
      <circle cx="50" cy="50" r="45" fill="none" stroke="#f3f4f6" strokeWidth="10" />
      <circle
        cx="50"
        cy="50"
        r="45"
        fill="none"
        stroke="#ec4899"
        strokeWidth="10"
        strokeDasharray="283"
        strokeDashoffset="70"
      />
    </svg>
  )
}

function SleepChart() {
  return (
    <svg viewBox="0 0 100 100" className="w-full h-full">
      <circle cx="50" cy="50" r="45" fill="none" stroke="#f3f4f6" strokeWidth="10" />
      <circle
        cx="50"
        cy="50"
        r="45"
        fill="none"
        stroke="#8b5cf6"
        strokeWidth="10"
        strokeDasharray="283"
        strokeDashoffset="100"
      />
    </svg>
  )
}

function StressChart() {
  return (
    <svg viewBox="0 0 100 100" className="w-full h-full">
      <circle cx="50" cy="50" r="45" fill="none" stroke="#f3f4f6" strokeWidth="10" />
      <circle
        cx="50"
        cy="50"
        r="45"
        fill="none"
        stroke="#10b981"
        strokeWidth="10"
        strokeDasharray="283"
        strokeDashoffset="120"
      />
    </svg>
  )
}

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

import { motion } from "framer-motion"

export function CloudEffect() {
  return (
    <div className="clouds">
      {Array.from({ length: 6 }).map((_, i) => (
        <motion.div
          key={i}
          className="cloud"
          initial={{ x: "-100%", opacity: 0.7 }}
          animate={{
            x: "100vw",
            opacity: [0.7, 0.9, 0.7],
            y: [0, i % 2 === 0 ? 10 : -10, 0],
          }}
          transition={{
            duration: 20 + i * 5,
            repeat: Number.POSITIVE_INFINITY,
            delay: i * 3,
            ease: "linear",
            y: {
              duration: 10,
              repeat: Number.POSITIVE_INFINITY,
              ease: "easeInOut",
            },
          }}
          style={{
            top: `${10 + i * 15}%`,
            opacity: 0.7,
            filter: "blur(4px)",
            width: `${50 + i * 10}px`,
            height: `${30 + i * 5}px`,
            backgroundColor: "rgba(255, 255, 255, 0.8)",
            borderRadius: "50%",
            position: "absolute",
            zIndex: 0,
          }}
        />
      ))}
    </div>
  )
}

export function ConfettiEffect() {
  return (
    <div className="confetti-container">
      {Array.from({ length: 50 }).map((_, i) => {
        const size = Math.random() * 8 + 4
        const color = ["#ff6b6b", "#48dbfb", "#feca57", "#1dd1a1", "#ff9ff3"][Math.floor(Math.random() * 5)]

return (
          <motion.div
            key={i}
            className="confetti-piece"
            initial={{
              x: 0,
              y: 0,
              opacity: 1,
              rotate: 0,
              scale: 0,
            }}
            animate={{
              x: (Math.random() - 0.5) * 200,
              y: Math.random() * 200 + 100,
              opacity: [1, 1, 0],
              rotate: Math.random() * 360,
              scale: 1,
            }}
            transition={{
              duration: 2 + Math.random() * 2,
              ease: "easeOut",
            }}
            style={{
              position: "absolute",
              width: `${size}px`,
              height: `${size}px`,
              backgroundColor: color,
              borderRadius: Math.random() > 0.5 ? "50%" : "0%",
              zIndex: 10,
            }}
          />
        )
      })}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/icons/custom-icons.tsx" isMerged="true"
"use client"

export function PenIcon(props: any) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path d="M12 19l7-7 3 3-7 7-3-3z"></path>
      <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path>
      <path d="M2 2l7.586 7.586"></path>
      <path d="M11 11l5 5"></path>
    </svg>
  )
}

export function HeartIcon(props: any) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path>
    </svg>
  )
}

export function MeditationIcon(props: any) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path d="M12 2a5 5 0 0 0-5 5v14a5 5 0 0 0 10 0V7a5 5 0 0 0-5-5Z"></path>
      <path d="M12 6m-3 0a3 3 0 1 0 6 0a3 3 0 1 0-6 0"></path>
      <path d="M12 18a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path>
    </svg>
  )
}

export function InsightIcon(props: any) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path d="M2 12h5"></path>
      <path d="M17 12h5"></path>
      <path d="M12 2v5"></path>
      <path d="M12 17v5"></path>
      <path d="M12 12m-7 0a7 7 0 1 0 14 0a7 7 0 1 0-14 0"></path>
      <path d="M12 9m-1 0a1 1 0 1 0 2 0a1 1 0-2 0"></path>
      <path d="M9 12m-1 0a1 1 0 1 0 2 0a1 1 0-2 0"></path>
      <path d="M12 15m-1 0a1 1 0 1 0 2 0a1 1 0-2 0"></path>
      <path d="M15 12m-1 0a1 1 0 1 0 2 0a1 1 0-2 0"></path>
    </svg>
  )
}

export function ActivityIconComponent(props: any) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
    </svg>
  )
}

[V0_FILE]typescriptreact:file="lib/utils.ts" isEdit="true" isMerged="true"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
import type { LanguageCode } from "@/types"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

export function formatDate(date: Date, language: LanguageCode = "ja"): string {
  const options: Intl.DateTimeFormatOptions = {
    year: "numeric",
    month: "long",
    day: "numeric",
  }

return new Intl.DateTimeFormat(language === "ja" ? "ja-JP" : "ko-KR", options).format(date)
}

export function formatTime(seconds: number): string {
  if (!seconds || isNaN(seconds)) return "0:00"

const minutes = Math.floor(seconds / 60)
  const remainingSeconds = Math.floor(seconds % 60)

return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`
}

export function formatTimeAgo(date: Date, language: string) {
  const now = new Date()
  const diffMs = now.getTime() - date.getTime()
  const diffSec = Math.round(diffMs / 1000)
  const diffMin = Math.round(diffSec / 60)
  const diffHour = Math.round(diffMin / 60)
  const diffDay = Math.round(diffHour / 24)

if (language === "ja") {
    if (diffSec < 60) return `${diffSec}秒前`
    if (diffMin < 60) return `${diffMin}分前`
    if (diffHour < 24) return `${diffHour}時間前`
    if (diffDay === 1) return "昨日"
    return `${diffDay}日前`
  } else {
    if (diffSec < 60) return `${diffSec}초 전`
    if (diffMin < 60) return `${diffMin}분 전`
    if (diffHour < 24) return `${diffHour}시간 전`
    if (diffDay === 1) return "어제"
    return `${diffDay}일 전`
  }
}

[V0_FILE]typescriptreact:file="components/meditation/meditation-page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { useLanguage } from "@/hooks/use-language"
import MeditationPlayer from "@/components/meditation/meditation-player"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Sparkles, Star, Calendar, Clock } from "lucide-react"

export default function MeditationPage() {
  const { t, language } = useLanguage()
  const [showTip, setShowTip] = useState(true)

return (
    <motion.div
      key="meditation"
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -10 }}
      transition={{ duration: 0.3 }}
      className="space-y-6"
    >
      {/* Header with mascot */}
      <div className="flex items-center mb-4">
        <motion.div
          initial={{ rotate: -5 }}
          animate={{ rotate: 5 }}
          transition={{
            repeat: Number.POSITIVE_INFINITY,
            repeatType: "reverse",
            duration: 1.5,
          }}
          className="mr-3"
        >
          <img
            src="/mascot-icon.png"
            alt="Mascot"
            className="w-8 h-8"
            onError={(e) => {
              e.currentTarget.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23ec4899' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5'%3E%3C/path%3E%3C/svg%3E`
            }}
          />
        </motion.div>
        <h2 className="text-xl font-medium">{t("meditationCollection")}</h2>
      </div>

{/* Meditation tip */}
      {showTip && (
        <Card className="bg-indigo-50 dark:bg-indigo-900/20 border-indigo-100 dark:border-indigo-800/50 mb-4">
          <CardContent className="p-4">
            <div className="flex justify-between items-start">
              <div className="flex-1">
                <div className="flex items-center mb-2">
                  <Sparkles className="h-4 w-4 mr-2 text-indigo-500" />
                  <p className="font-medium text-indigo-700 dark:text-indigo-300">
                    {language === "ja" ? "瞑想のコツ" : "명상 팁"}
                  </p>
                </div>
                <p className="text-sm text-indigo-600 dark:text-indigo-200">
                  {language === "ja"
                    ? "瞑想を始める前に、静かな場所を見つけて、リラックスした姿勢で座りましょう。呼吸に集中し、心を落ち着かせてください。"
                    : "명상을 시작하기 전에 조용한 장소를 찾아 편안한 자세로 앉으세요. 호흡에 집중하고 마음을 진정시키세요."}
                </p>
              </div>
              <button
                className="text-indigo-400 hover:text-indigo-600 dark:hover:text-indigo-200 ml-2"
                onClick={() => setShowTip(false)}
              >
                <span className="sr-only">Close</span>
                <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                  <path
                    fillRule="evenodd"
                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                    clipRule="evenodd"
                  />
                </svg>
              </button>
            </div>
          </CardContent>
        </Card>
      )}

{/* Featured meditation */}
      <Card className="bg-gradient-to-r from-purple-50 to-indigo-50 dark:from-purple-900/20 dark:to-indigo-900/20 border-purple-100 dark:border-purple-800/50 overflow-hidden">
        <CardContent className="p-0">
          <div className="flex items-center p-4">
            <div className="relative mr-4">
              <motion.div
                animate={{
                  scale: [1, 1.05, 1],
                  rotate: [0, 5, 0, -5, 0],
                }}
                transition={{
                  repeat: Number.POSITIVE_INFINITY,
                  duration: 3,
                }}
                className="w-16 h-16 rounded-full bg-gradient-to-br from-purple-300 to-indigo-400 dark:from-purple-600 dark:to-indigo-700 flex items-center justify-center"
              >
                <Star className="h-8 w-8 text-white" />
              </motion.div>
              <Badge className="absolute -top-1 -right-1 bg-pink-500 text-white border-0">
                {language === "ja" ? "新着" : "신규"}
              </Badge>
            </div>
            <div className="flex-1">
              <h4 className="font-medium text-lg mb-1">
                {language === "ja" ? "今日のおすすめ瞑想" : "오늘의 추천 명상"}
              </h4>
              <p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
                {language === "ja" ? "心を落ち着かせる5分間の瞑想" : "마음을 진정시키는 5분 명상"}
              </p>
              <div className="flex items-center text-xs text-gray-500 dark:text-gray-400 space-x-3">
                <span className="flex items-center">
                  <Clock className="h-3 w-3 mr-1" />5 min
                </span>
                <span className="flex items-center">
                  <Calendar className="h-3 w-3 mr-1" />
                  {language === "ja" ? "今日追加" : "오늘 추가됨"}
                </span>
              </div>
              <Button
                className="mt-3 bg-gradient-to-r from-purple-500 to-indigo-500 hover:from-purple-600 hover:to-indigo-600"
                size="sm"
              >
                {language === "ja" ? "今すぐ始める" : "지금 시작하기"}
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Main meditation player */}
      <MeditationPlayer expanded />

{/* Decorative elements */}
      <div className="fixed bottom-20 right-0 pointer-events-none opacity-20 z-0">
        <motion.div
          animate={{
            y: [0, -10, 0],
            rotate: [0, 5, 0, -5, 0],
          }}
          transition={{
            repeat: Number.POSITIVE_INFINITY,
            duration: 10,
            ease: "easeInOut",
          }}
        >
          <img
            src="/decoration.png"
            alt=""
            className="w-32 h-32 object-contain"
            onError={(e) => {
              e.currentTarget.style.display = "none"
            }}
          />
        </motion.div>
      </div>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="components/diary/diary-page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { useLanguage } from "@/hooks/use-language"
import DiarySection from "@/components/diary/diary-section"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { BookOpen, Sparkles } from "lucide-react"

export default function DiaryPage() {
  const { t, language } = useLanguage()
  const [showTip, setShowTip] = useState(true)

return (
    <motion.div
      key="diary"
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -10 }}
      transition={{ duration: 0.3 }}
      className="space-y-6"
    >
      {/* Header with mascot */}
      <div className="flex items-center mb-4">
        <motion.div
          initial={{ rotate: -5 }}
          animate={{ rotate: 5 }}
          transition={{
            repeat: Number.POSITIVE_INFINITY,
            repeatType: "reverse",
            duration: 1.5,
          }}
          className="mr-3"
        >
          <img
            src="/mascot-icon.png"
            alt="Mascot"
            className="w-8 h-8"
            onError={(e) => {
              e.currentTarget.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23ec4899' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5'%3E%3C/path%3E%3C/svg%3E`
            }}
          />
        </motion.div>
        <h2 className="text-xl font-medium">{t("diaryPageTitle")}</h2>
      </div>

{/* Diary tip */}
      {showTip && (
        <Card className="bg-pink-50 dark:bg-pink-900/20 border-pink-100 dark:border-pink-800/50 mb-4">
          <CardContent className="p-4">
            <div className="flex justify-between items-start">
              <div className="flex-1">
                <div className="flex items-center mb-2">
                  <Sparkles className="h-4 w-4 mr-2 text-pink-500" />
                  <p className="font-medium text-pink-700 dark:text-pink-300">
                    {language === "ja" ? "日記のコツ" : "일기 팁"}
                  </p>
                </div>
                <p className="text-sm text-pink-600 dark:text-pink-200">
                  {language === "ja"
                    ? "日記を書くことで、感情を整理し、ストレスを軽減することができます。今日の気持ちや出来事を自由に書いてみましょう。"
                    : "일기를 쓰면 감정을 정리하고 스트레스를 줄일 수 있습니다. 오늘의 기분이나 일어난 일을 자유롭게 적어보세요."}
                </p>
              </div>
              <button
                className="text-pink-400 hover:text-pink-600 dark:hover:text-pink-200 ml-2"
                onClick={() => setShowTip(false)}
              >
                <span className="sr-only">Close</span>
                <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                  <path
                    fillRule="evenodd"
                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                    clipRule="evenodd"
                  />
                </svg>
              </button>
            </div>
          </CardContent>
        </Card>
      )}

{/* Featured diary template */}
      <Card className="bg-gradient-to-r from-pink-50 to-orange-50 dark:from-pink-900/20 dark:to-orange-900/20 border-pink-100 dark:border-pink-800/50 overflow-hidden">
        <CardContent className="p-0">
          <div className="flex items-center p-4">
            <div className="relative mr-4">
              <motion.div
                animate={{
                  scale: [1, 1.05, 1],
                  rotate: [0, 5, 0, -5, 0],
                }}
                transition={{
                  repeat: Number.POSITIVE_INFINITY,
                  duration: 3,
                }}
                className="w-16 h-16 rounded-full bg-gradient-to-br from-pink-300 to-orange-300 dark:from-pink-600 dark:to-orange-600 flex items-center justify-center"
              >
                <BookOpen className="h-8 w-8 text-white" />
              </motion.div>
              <Badge className="absolute -top-1 -right-1 bg-green-500 text-white border-0">
                {language === "ja" ? "おすすめ" : "추천"}
              </Badge>
            </div>
            <div className="flex-1">
              <h4 className="font-medium text-lg mb-1">
                {language === "ja" ? "感謝日記テンプレート" : "감사 일기 템플릿"}
              </h4>
              <p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
                {language === "ja" ? "今日感謝したことを3つ書き出してみましょう" : "오늘 감사한 일 3가지를 적어보세요"}
              </p>
              <Button
                className="mt-1 bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600"
                size="sm"
              >
                {language === "ja" ? "テンプレートを使う" : "템플릿 사용하기"}
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Main diary section */}
      <DiarySection expanded />

{/* Decorative elements */}
      <div className="fixed bottom-20 left-0 pointer-events-none opacity-20 z-0">
        <motion.div
          animate={{
            y: [0, -10, 0],
            rotate: [0, -5, 0, 5, 0],
          }}
          transition={{
            repeat: Number.POSITIVE_INFINITY,
            duration: 10,
            ease: "easeInOut",
          }}
        >
          <img
            src="/decoration.png"
            alt=""
            className="w-32 h-32 object-contain"
            onError={(e) => {
              e.currentTarget.style.display = "none"
            }}
          />
        </motion.div>
      </div>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="components/wellness-app.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useCallback } from "react"
import { WellnessProvider } from "@/context/wellness-context"
import { LanguageProvider } from "@/context/language-context"
import { ThemeProviderCustom } from "@/context/theme-context"
import { AnimatePresence } from "framer-motion"

import AppLayout from "@/components/layout/app-layout"
import HomePage from "@/components/home/home-page"
import MeditationPage from "@/components/meditation/meditation-page"
import DiaryPage from "@/components/diary/diary-page"
import SettingsPage from "@/components/settings/settings-page"

function WellnessAppContent() {
  const [activeTab, setActiveTab] = useState("home")

// Memoize tab change handler to prevent unnecessary re-renders
  const handleTabChange = useCallback((tab: string) => {
    setActiveTab(tab)
  }, [])

return (
    <AppLayout activeTab={activeTab} onTabChange={handleTabChange}>
      <AnimatePresence mode="wait">
        {activeTab === "home" && <HomePage />}
        {activeTab === "diary" && <DiaryPage />}
        {activeTab === "meditation" && <MeditationPage />}
        {activeTab === "settings" && <SettingsPage />}
      </AnimatePresence>
    </AppLayout>
  )
}

export default function WellnessApp() {
  return (
    <ThemeProviderCustom>
      <LanguageProvider>
        <WellnessProvider>
          <WellnessAppContent />
        </WellnessProvider>
      </LanguageProvider>
    </ThemeProviderCustom>
  )
}

[V0_FILE]typescriptreact:file="components/layout/app-layout.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect, type ReactNode } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { useLanguage } from "@/hooks/use-language"
import { Bell } from "lucide-react"
import Navigation from "@/components/navigation/navigation"
import LanguageSwitcher from "@/components/settings/language-switcher"

interface AppLayoutProps {
  children: ReactNode
  activeTab: string
  onTabChange: (tab: string) => void
}

export default function AppLayout({ children, activeTab, onTabChange }: AppLayoutProps) {
  const { t } = useLanguage()
  const [timeOfDay, setTimeOfDay] = useState<"morning" | "afternoon" | "evening" | "night">("morning")
  const [showNotification, setShowNotification] = useState(true)

// Determine time of day
  useEffect(() => {
    const hour = new Date().getHours()
    if (hour >= 5 && hour < 12) {
      setTimeOfDay("morning")
    } else if (hour >= 12 && hour < 17) {
      setTimeOfDay("afternoon")
    } else if (hour >= 17 && hour < 21) {
      setTimeOfDay("evening")
    } else {
      setTimeOfDay("night")
    }
  }, [])

// Get background gradient based on time of day
  const getBackgroundGradient = () => {
    switch (timeOfDay) {
      case "morning":
        return "from-blue-50 via-pink-50 to-amber-50 dark:from-slate-900 dark:via-indigo-950 dark:to-slate-900"
      case "afternoon":
        return "from-blue-50 via-white to-blue-50 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900"
      case "evening":
        return "from-indigo-50 via-purple-50 to-pink-50 dark:from-slate-900 dark:via-indigo-950 dark:to-slate-900"
      case "night":
        return "from-slate-800 via-indigo-950 to-slate-900 dark:from-slate-900 dark:via-indigo-950 dark:to-slate-900"
    }
  }

return (
    <div
      className={`flex flex-col min-h-screen bg-gradient-to-b ${getBackgroundGradient()} transition-colors duration-1000`}
    >
      <header className="sticky top-0 z-10 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md border-b border-pink-100 dark:border-indigo-900 py-3">
        <div className="container max-w-md mx-auto px-4 flex justify-between items-center">
          <div className="flex items-center">
            <motion.div
              initial={{ rotate: -5 }}
              animate={{ rotate: 5 }}
              transition={{
                repeat: Number.POSITIVE_INFINITY,
                repeatType: "reverse",
                duration: 1.5,
              }}
              className="mr-2"
            >
              <img
                src="/mascot-icon.png"
                alt="Mascot"
                className="w-8 h-8"
                onError={(e) => {
                  e.currentTarget.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23ec4899' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5'%3E%3C/path%3E%3C/svg%3E`
                }}
              />
            </motion.div>
            <h1 className="text-2xl font-bold text-pink-600 dark:text-pink-400">{t("appTitle")}</h1>
          </div>
          <div className="flex items-center">
            <motion.button
              whileHover={{ scale: 1.1 }}
              whileTap={{ scale: 0.9 }}
              className="relative mr-3"
              onClick={() => setShowNotification(!showNotification)}
              aria-label={t("notifications")}
            >
              <Bell className="h-5 w-5 text-gray-600 dark:text-gray-300" />
              <span className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full"></span>
            </motion.button>
            <LanguageSwitcher />
          </div>
        </div>
      </header>

<main className="flex-1 container max-w-md mx-auto p-4 pb-20">
        <AnimatePresence mode="wait">{children}</AnimatePresence>
      </main>

<Navigation activeTab={activeTab} onTabChange={onTabChange} />
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/home/optimized-components.tsx" isMerged="true"
"use client"

import { memo } from "react"
import { motion } from "framer-motion"
import { useLanguage } from "@/hooks/use-language"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { MessageCircle } from "lucide-react"

interface WellnessTipProps {
  show: boolean
  onClose: () => void
}

// Memoized wellness tip component to prevent unnecessary re-renders
export const MemoizedWellnessTip = memo(function WellnessTip({ show, onClose }: WellnessTipProps) {
  const { language } = useLanguage()

if (!show) return null

return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, height: 0 }}
      transition={{ delay: 0.3, duration: 0.5 }}
    >
      <div className="flex justify-between items-center mb-3">
        <h3 className="text-md font-medium flex items-center">
          <MessageCircle className="h-4 w-4 mr-1.5 text-pink-500 dark:text-pink-400" />
          {language === "ja" ? "今日のヒント" : "오늘의 팁"}
        </h3>
        <button
          className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
          onClick={onClose}
          aria-label={language === "ja" ? "閉じる" : "닫기"}
        >
          <span className="sr-only">{language === "ja" ? "閉じる" : "닫기"}</span>
          <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
            <path
              fillRule="evenodd"
              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
              clipRule="evenodd"
            />
          </svg>
        </button>
      </div>
      <Card className="bg-blue-50 dark:bg-blue-900/20 border-blue-100 dark:border-blue-800/50">
        <CardContent className="p-4">
          <div className="flex">
            <div className="mr-3 mt-1">
              <img
                src="/mascot-icon.png"
                alt="Mascot"
                className="w-8 h-8"
                onError={(e) => {
                  e.currentTarget.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5'%3E%3C/path%3E%3C/svg%3E`
                }}
              />
            </div>
            <div>
              <p className="text-sm text-blue-800 dark:text-blue-200">
                {language === "ja"
                  ? "深呼吸をすると、ストレスを軽減し、集中力を高めることができます。1日に数回、深呼吸の時間を取りましょう。"
                  : "깊은 호흡은 스트레스를 줄이고 집중력을 높이는 데 도움이 됩니다. 하루에 몇 번씩 깊은 호흡을 위한 시간을 가져보세요."}
              </p>
              <div className="flex justify-end mt-2">
                <Badge className="bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100 hover:bg-blue-200 dark:hover:bg-blue-700">
                  {language === "ja" ? "もっと見る" : "더 보기"}
                </Badge>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </motion.div>
  )
})

[V0_FILE]typescriptreact:file="components/accessibility/screen-reader-announcer.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useLanguage } from "@/hooks/use-language"

interface ScreenReaderAnnouncerProps {
  message?: string
  assertive?: boolean
}

export default function ScreenReaderAnnouncer({ message, assertive = false }: ScreenReaderAnnouncerProps) {
  const [announcement, setAnnouncement] = useState("")
  const { language } = useLanguage()

useEffect(() => {
    if (message) {
      // Clear the announcer before setting a new message
      setAnnouncement("")

// Use a small timeout to ensure the DOM update cycle
      const timeoutId = setTimeout(() => {
        setAnnouncement(message)
      }, 50)

return () => clearTimeout(timeoutId)
    }
  }, [message])

if (!message) return null

return (
    <div
      aria-live={assertive ? "assertive" : "polite"}
      className="sr-only"
      role={assertive ? "alert" : "status"}
      lang={language === "ja" ? "ja" : "ko"}
    >
      {announcement}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/accessibility/accessible-button.tsx" isMerged="true"
"use client"

import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react"
import { motion } from "framer-motion"
import { cn } from "@/lib/utils"

interface AccessibleButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  children: ReactNode
  variant?: "primary" | "secondary" | "outline" | "ghost"
  size?: "sm" | "md" | "lg"
  icon?: ReactNode
  iconPosition?: "left" | "right"
  loading?: boolean
  fullWidth?: boolean
}

const AccessibleButton = forwardRef<HTMLButtonElement, AccessibleButtonProps>(
  (
    {
      children,
      className,
      variant = "primary",
      size = "md",
      icon,
      iconPosition = "left",
      loading = false,
      fullWidth = false,
      disabled,
      ...props
    },
    ref,
  ) => {
    // Determine base styles based on variant
    const variantStyles = {
      primary: "bg-pink-500 hover:bg-pink-600 text-white dark:bg-pink-600 dark:hover:bg-pink-700",
      secondary: "bg-indigo-500 hover:bg-indigo-600 text-white dark:bg-indigo-600 dark:hover:bg-indigo-700",
      outline:
        "bg-transparent border border-pink-500 text-pink-500 hover:bg-pink-50 dark:border-pink-400 dark:text-pink-400 dark:hover:bg-pink-900/20",
      ghost: "bg-transparent text-pink-500 hover:bg-pink-50 dark:text-pink-400 dark:hover:bg-pink-900/20",
    }

// Determine size styles
    const sizeStyles = {
      sm: "text-xs py-1.5 px-3",
      md: "text-sm py-2 px-4",
      lg: "text-base py-2.5 px-5",
    }

// Combine all styles
    const buttonStyles = cn(
      "rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 dark:focus:ring-pink-400 dark:focus:ring-offset-slate-900",
      variantStyles[variant],
      sizeStyles[size],
      fullWidth ? "w-full" : "",
      disabled || loading ? "opacity-50 cursor-not-allowed" : "",
      className,
    )

return (
      <motion.button
        ref={ref}
        className={buttonStyles}
        whileHover={!disabled && !loading ? { scale: 1.02 } : {}}
        whileTap={!disabled && !loading ? { scale: 0.98 } : {}}
        disabled={disabled || loading}
        {...props}
      >
        <span className="flex items-center justify-center">
          {loading ? (
            <LoadingSpinner className="mr-2" />
          ) : (
            icon && iconPosition === "left" && <span className="mr-2">{icon}</span>
          )}
          {children}
          {icon && iconPosition === "right" && !loading && <span className="ml-2">{icon}</span>}
        </span>
      </motion.button>
    )
  },
)

AccessibleButton.displayName = "AccessibleButton"

function LoadingSpinner({ className }: { className?: string }) {
  return (
    <svg
      className={cn("animate-spin h-4 w-4 text-current", className)}
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      aria-hidden="true"
    >
      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
      <path
        className="opacity-75"
        fill="currentColor"
        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
      />
    </svg>
  )
}

export default AccessibleButton

[V0_FILE]typescriptreact:file="components/effects/enhanced-animations.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"

// Sakura (cherry blossom) animation for Japanese theme
export function SakuraEffect() {
  const [petals, setPetals] = useState<Array<{ id: number; x: number; delay: number; size: number }>>([])

useEffect(() => {
    // Create 20 petals with random positions
    const newPetals = Array.from({ length: 20 }, (_, i) => ({
      id: i,
      x: Math.random() * 100, // Random horizontal position (0-100%)
      delay: Math.random() * 5, // Random delay (0-5s)
      size: Math.random() * 10 + 10, // Random size (10-20px)
    }))

setPetals(newPetals)
  }, [])

return (
    <div className="fixed inset-0 pointer-events-none overflow-hidden z-0">
      {petals.map((petal) => (
        <motion.div
          key={petal.id}
          className="absolute"
          style={{
            left: `${petal.x}%`,
            top: "-50px",
            width: `${petal.size}px`,
            height: `${petal.size}px`,
          }}
          initial={{ y: -50, rotate: 0, opacity: 0.8 }}
          animate={{
            y: "110vh",
            rotate: [0, 90, 180, 270, 360],
            x: [0, 20, -20, 10, -10, 0],
            opacity: [0.8, 0.9, 0.8, 0.7, 0.6, 0],
          }}
          transition={{
            duration: 10 + Math.random() * 5,
            delay: petal.delay,
            repeat: Number.POSITIVE_INFINITY,
            ease: "linear",
            x: {
              duration: 5,
              repeat: Number.POSITIVE_INFINITY,
              repeatType: "reverse",
              ease: "easeInOut",
            },
          }}
        >
          <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M50 0C50 27.6142 27.6142 50 0 50C27.6142 50 50 72.3858 50 100C50 72.3858 72.3858 50 100 50C72.3858 50 50 27.6142 50 0Z"
              fill="#FBCFE8"
              className="dark:fill-pink-800"
              fillOpacity="0.7"
            />
          </svg>
        </motion.div>
      ))}
    </div>
  )
}

// Sparkle effect for achievements and special moments
export function SparkleEffect({ duration = 2000 }: { duration?: number }) {
  const [sparkles, setSparkles] = useState<Array<{ id: number; x: number; y: number; size: number }>>([])

useEffect(() => {
    // Create 15 sparkles with random positions
    const newSparkles = Array.from({ length: 15 }, (_, i) => ({
      id: i,
      x: 30 + Math.random() * 40, // Random x position (30-70%)
      y: 30 + Math.random() * 40, // Random y position (30-70%)
      size: Math.random() * 10 + 5, // Random size (5-15px)
    }))

setSparkles(newSparkles)

// Remove sparkles after duration
    const timer = setTimeout(() => {
      setSparkles([])
    }, duration)

return () => clearTimeout(timer)
  }, [duration])

return (
    <div className="absolute inset-0 pointer-events-none overflow-hidden">
      <AnimatePresence>
        {sparkles.map((sparkle) => (
          <motion.div
            key={sparkle.id}
            className="absolute"
            style={{
              left: `${sparkle.x}%`,
              top: `${sparkle.y}%`,
              width: `${sparkle.size}px`,
              height: `${sparkle.size}px`,
            }}
            initial={{ scale: 0, opacity: 0 }}
            animate={{
              scale: [0, 1, 0.8, 1.2, 0],
              opacity: [0, 1, 0.8, 1, 0],
              rotate: [0, 90, 180, 270, 360],
            }}
            exit={{ scale: 0, opacity: 0 }}
            transition={{
              duration: 1.5,
              times: [0, 0.2, 0.5, 0.8, 1],
              ease: "easeInOut",
            }}
          >
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M12 0L14.59 9.41L24 12L14.59 14.59L12 24L9.41 14.59L0 12L9.41 9.41L12 0Z"
                fill="#FFD700"
                className="dark:fill-amber-400"
              />
            </svg>
          </motion.div>
        ))}
      </AnimatePresence>
    </div>
  )
}

// Pulse effect for notifications and alerts
export function PulseEffect({ color = "pink" }: { color?: "pink" | "blue" | "purple" | "amber" }) {
  const colorMap = {
    pink: "bg-pink-500 dark:bg-pink-600",
    blue: "bg-blue-500 dark:bg-blue-600",
    purple: "bg-purple-500 dark:bg-purple-600",
    amber: "bg-amber-500 dark:bg-amber-600",
  }

return (
    <div className="relative inline-flex">
      <span className={`absolute inline-flex h-full w-full rounded-full ${colorMap[color]} opacity-75`}>
        <motion.span
          className={`absolute inline-flex h-full w-full rounded-full ${colorMap[color]} opacity-75`}
          animate={{ scale: [1, 1.5, 1] }}
          transition={{
            duration: 2,
            repeat: Number.POSITIVE_INFINITY,
            ease: "easeInOut",
          }}
        />
      </span>
      <span className={`relative inline-flex rounded-full h-3 w-3 ${colorMap[color]}`} />
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/japanese-ui/mascot-speech-bubble.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { useLanguage } from "@/hooks/use-language"
import { Card } from "@/components/ui/card"
import { X } from "lucide-react"

interface MascotSpeechBubbleProps {
  message: string
  duration?: number
  position?: "top" | "bottom" | "left" | "right"
  onClose?: () => void
  autoClose?: boolean
}

export default function MascotSpeechBubble({
  message,
  duration = 5000,
  position = "bottom",
  onClose,
  autoClose = true,
}: MascotSpeechBubbleProps) {
  const { language } = useLanguage()
  const [isVisible, setIsVisible] = useState(true)

useEffect(() => {
    if (autoClose && isVisible) {
      const timer = setTimeout(() => {
        setIsVisible(false)
        if (onClose) onClose()
      }, duration)

return () => clearTimeout(timer)
    }
  }, [autoClose, duration, isVisible, onClose])

const handleClose = () => {
    setIsVisible(false)
    if (onClose) onClose()
  }

// Position styles
  const positionStyles = {
    top: "bottom-full mb-2",
    bottom: "top-full mt-2",
    left: "right-full mr-2",
    right: "left-full ml-2",
  }

// Triangle styles for speech bubble
  const triangleStyles = {
    top: "bottom-[-8px] left-1/2 transform -translate-x-1/2 border-l-8 border-r-8 border-t-8 border-l-transparent border-r-transparent border-t-pink-100 dark:border-t-pink-900",
    bottom:
      "top-[-8px] left-1/2 transform -translate-x-1/2 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent border-b-pink-100 dark:border-b-pink-900",
    left: "right-[-8px] top-1/2 transform -translate-y-1/2 border-t-8 border-b-8 border-l-8 border-t-transparent border-b-transparent border-l-pink-100 dark:border-l-pink-900",
    right:
      "left-[-8px] top-1/2 transform -translate-y-1/2 border-t-8 border-b-8 border-r-8 border-t-transparent border-b-transparent border-r-pink-100 dark:border-r-pink-900",
  }

return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          className={`absolute z-10 ${positionStyles[position]} max-w-xs`}
          initial={{
            opacity: 0,
            scale: 0.8,
            y: position === "top" ? 10 : position === "bottom" ? -10 : 0,
            x: position === "left" ? 10 : position === "right" ? -10 : 0,
          }}
          animate={{ opacity: 1, scale: 1, y: 0, x: 0 }}
          exit={{ opacity: 0, scale: 0.8 }}
          transition={{ duration: 0.3 }}
        >
          <Card className="bg-pink-100 dark:bg-pink-900/50 border-pink-200 dark:border-pink-800 p-3 rounded-lg shadow-md relative">
            <button
              onClick={handleClose}
              className="absolute top-1 right-1 text-pink-500 hover:text-pink-700 dark:text-pink-400 dark:hover:text-pink-300"
              aria-label={language === "ja" ? "閉じる" : "닫기"}
            >
              <X className="h-4 w-4" />
            </button>
            <p className="text-sm text-pink-800 dark:text-pink-200 pr-5">{message}</p>
            <div className={`absolute w-0 h-0 ${triangleStyles[position]}`} />
          </Card>
        </motion.div>
      )}
    </AnimatePresence>
  )
}

[V0_FILE]typescriptreact:file="components/japanese-ui/achievement-notification.tsx" isMerged="true"
"use client"

import type React from "react"

interface AchievementNotificationProps {
  title: string
  description?: string
  icon?: "award" | "star" | "custom"
  customIcon?: React.ReactNode
  duration?: number
  onClose?: () => void
}

export default function AchievementNotification({
  title,
  description,
  icon = "award",
  customIcon,
  duration = 5000,
  onClose,
}: AchievementNotificationProps) {
  const { language } = useLanguage()
  const [isVisible, setIsVisible] = useState(true)

useEffect(() => {
    if (isVisible) {
      const timer = setTimeout(() => {
        setIsVisible(false)
        if (onClose) onClose()
      }, duration)

return () => clearTimeout(timer)
    }
  }, [duration, isVisible, onClose])

// Get icon component
  const getIcon = () => {
    switch (icon) {
      case "award":
        return <Award className="h-8 w-8 text-amber-500" />
      case "star":
        return <Star className="h-8 w-8 text-amber-500" />
      case "custom":
        return customIcon
      default:
        return <Award className="h-8 w-8 text-amber-500" />
    }
  }

return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          className="fixed top-20 left-1/2 transform -translate-x-1/2 z-50 max-w-xs w-full"
          initial={{ opacity: 0, y: -50 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -20 }}
          transition={{ duration: 0.5, type: "spring" }}
        >
          <Card className="bg-gradient-to-r from-amber-50 to-yellow-50 dark:from-amber-900/30 dark:to-yellow-900/30 border-amber-200 dark:border-amber-800 p-4 rounded-lg shadow-lg relative overflow-hidden">
            <div className="relative z-10">
              <div className="flex items-center mb-2">
                <div className="mr-3 p-2 bg-white dark:bg-slate-800 rounded-full shadow-sm">{getIcon()}</div>
                <div>
                  <h3 className="font-bold text-amber-800 dark:text-amber-300">
                    {language === "ja" ? "達成！" : "달성!"}
                  </h3>
                  <p className="font-medium text-amber-700 dark:text-amber-200">{title}</p>
                </div>
              </div>
              {description && <p className="text-sm text-amber-600 dark:text-amber-300 mt-1">{description}</p>}
            </div>

{/* Background effects */}
            <div className="absolute inset-0 z-0 opacity-30">
              <SparkleEffect duration={duration} />
            </div>
          </Card>
        </motion.div>
      )}
    </AnimatePresence>
  )
}

[V0_FILE]typescriptreact:file="components/japanese-ui/kawaii-loading.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { useLanguage } from "@/hooks/use-language"

interface KawaiiLoadingProps {
  size?: "sm" | "md" | "lg"
  text?: string
  color?: "pink" | "blue" | "purple" | "amber"
}

export default function KawaiiLoading({ size = "md", text, color = "pink" }: KawaiiLoadingProps) {
  const { language } = useLanguage()

// Size styles
  const sizeStyles = {
    sm: "w-6 h-6",
    md: "w-10 h-10",
    lg: "w-16 h-16",
  }

// Color styles
  const colorMap = {
    pink: "text-pink-500 dark:text-pink-400",
    blue: "text-blue-500 dark:text-blue-400",
    purple: "text-purple-500 dark:text-purple-400",
    amber: "text-amber-500 dark:text-amber-400",
  }

// Default loading text
  const defaultText = language === "ja" ? "読み込み中..." : "로딩 중..."
  const loadingText = text || defaultText

return (
    <div className="flex flex-col items-center justify-center">
      <div className="relative">
        <motion.div
          className={`${sizeStyles[size]} ${colorMap[color]}`}
          animate={{ rotate: 360 }}
          transition={{
            duration: 2,
            repeat: Number.POSITIVE_INFINITY,
            ease: "linear",
          }}
        >
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
              fill="currentColor"
              opacity="0.3"
            />
            <path
              d="M12 4c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"
              fill="currentColor"
            />
            <path
              d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
              fill="currentColor"
            />
          </svg>
        </motion.div>

{/* Kawaii face */}
        <motion.div
          className="absolute inset-0 flex items-center justify-center"
          animate={{ rotate: [0, 10, 0, -10, 0] }}
          transition={{
            duration: 2,
            repeat: Number.POSITIVE_INFINITY,
            ease: "easeInOut",
          }}
        >
          <svg viewBox="0 0 24 24" width="60%" height="60%" fill="none" xmlns="http://www.w3.org/2000/svg">
            {/* Eyes */}
            <circle cx="9" cy="12" r="1.5" fill="currentColor" />
            <circle cx="15" cy="12" r="1.5" fill="currentColor" />
            {/* Smile */}
            <path d="M9 16c1.5 1 4.5 1 6 0" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
          </svg>
        </motion.div>
      </div>

{loadingText && (
        <motion.p
          className={`mt-2 text-sm ${colorMap[color]}`}
          animate={{ opacity: [0.5, 1, 0.5] }}
          transition={{
            duration: 1.5,
            repeat: Number.POSITIVE_INFINITY,
            ease: "easeInOut",
          }}
        >
          {loadingText}
        </motion.p>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/settings/settings-page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { useLanguage } from "@/hooks/use-language"
import SettingsPanel from "@/components/settings/settings-panel"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Sparkles, Gift } from "lucide-react"
import RecentActivities from "@/components/home/recent-activities" // 이 줄 추가

export default function SettingsPage() {
  const { t, language } = useLanguage()
  const [showTip, setShowTip] = useState(true)

return (
    <motion.div
      key="settings"
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -10 }}
      transition={{ duration: 0.3 }}
      className="space-y-6"
    >
      {/* Header with mascot */}
      <div className="flex items-center mb-4">
        <motion.div
          initial={{ rotate: -5 }}
          animate={{ rotate: 5 }}
          transition={{
            repeat: Number.POSITIVE_INFINITY,
            repeatType: "reverse",
            duration: 1.5,
          }}
          className="mr-3"
        >
          <img
            src="/mascot-icon.png"
            alt="Mascot"
            className="w-8 h-8"
            onError={(e) => {
              e.currentTarget.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23ec4899' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5'%3E%3C/path%3E%3C/svg%3E`
            }}
          />
        </motion.div>
        <h2 className="text-xl font-medium">{t("settingsTitle")}</h2>
      </div>

{/* Settings tip */}
      {showTip && (
        <Card className="bg-blue-50 dark:bg-blue-900/20 border-blue-100 dark:border-blue-800/50 mb-4">
          <CardContent className="p-4">
            <div className="flex justify-between items-start">
              <div className="flex-1">
                <div className="flex items-center mb-2">
                  <Sparkles className="h-4 w-4 mr-2 text-blue-500" />
                  <p className="font-medium text-blue-700 dark:text-blue-300">
                    {language === "ja" ? "設定のヒント" : "설정 팁"}
                  </p>
                </div>
                <p className="text-sm text-blue-600 dark:text-blue-200">
                  {language === "ja"
                    ? "通知を設定すると、瞑想や日記の時間を忘れずに続けることができます。あなたに合った設定をカスタマイズしましょう。"
                    : "알림을 설정하면 명상이나 일기 시간을 잊지 않고 계속할 수 있습니다. 자신에게 맞는 설정을 커스터마이즈하세요."}
                </p>
              </div>
              <button
                className="text-blue-400 hover:text-blue-600 dark:hover:text-blue-200 ml-2"
                onClick={() => setShowTip(false)}
              >
                <span className="sr-only">Close</span>
                <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                  <path
                    fillRule="evenodd"
                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                    clipRule="evenodd"
                  />
                </svg>
              </button>
            </div>
          </CardContent>
        </Card>
      )}

{/* 최근 활동 추가 */}
      <RecentActivities />

{/* Premium feature */}
      <Card className="bg-gradient-to-r from-amber-50 to-yellow-50 dark:from-amber-900/20 dark:to-yellow-900/20 border-amber-100 dark:border-amber-800/50 overflow-hidden">
        <CardContent className="p-0">
          <div className="flex items-center p-4">
            <div className="relative mr-4">
              <motion.div
                animate={{
                  scale: [1, 1.05, 1],
                  rotate: [0, 5, 0, -5, 0],
                }}
                transition={{
                  repeat: Number.POSITIVE_INFINITY,
                  duration: 3,
                }}
                className="w-16 h-16 rounded-full bg-gradient-to-br from-amber-300 to-yellow-300 dark:from-amber-600 dark:to-yellow-600 flex items-center justify-center"
              >
                <Gift className="h-8 w-8 text-white" />
              </motion.div>
              <Badge className="absolute -top-1 -right-1 bg-purple-500 text-white border-0">
                {language === "ja" ? "プレミアム" : "프리미엄"}
              </Badge>
            </div>
            <div className="flex-1">
              <h4 className="font-medium text-lg mb-1">
                {language === "ja" ? "プレミアム機能を解除" : "프리미엄 기능 잠금 해제"}
              </h4>
              <p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
                {language === "ja"
                  ? "すべての機能にアクセスして、より充実したウェルネス体験を"
                  : "모든 기능에 액세스하여 더 풍부한 웰니스 경험을"}
              </p>
              <Button
                className="mt-1 bg-gradient-to-r from-amber-500 to-yellow-500 hover:from-amber-600 hover:to-yellow-600"
                size="sm"
              >
                {language === "ja" ? "詳細を見る" : "자세히 보기"}
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Main settings panel */}
      <SettingsPanel />

[V0_FILE]typescriptreact:file="components/settings/settings-panel.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useLanguage } from "@/hooks/use-language"
import { useTheme } from "@/hooks/use-theme"
import LanguageSwitcher from "@/components/settings/language-switcher"
import { motion } from "framer-motion"
import { Bell, Moon, Sun, Monitor, Globe, User, Heart, Vibrate, Volume2, VolumeX } from "lucide-react"
import { Switch } from "@/components/ui/switch"
import { Slider } from "@/components/ui/slider"
import { Button } from "@/components/ui/button"

export default function SettingsPanel() {
  const { t } = useLanguage()
  const { theme, setTheme, themeOptions } = useTheme()
  const [notificationsEnabled, setNotificationsEnabled] = useState(true)
  const [soundEnabled, setSoundEnabled] = useState(true)
  const [vibrationEnabled, setVibrationEnabled] = useState(true)
  const [volumeLevel, setVolumeLevel] = useState(80)

return (
    <div className="space-y-4">
      {/* Account - 최상단으로 이동 */}
      <SettingsSection icon={<User className="h-5 w-5 text-orange-500" />} title={t("accountSettings")}>
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <div className="h-10 w-10 rounded-full bg-gradient-to-br from-pink-400 to-purple-500 flex items-center justify-center text-white font-medium">
              {t("userInitials")}
            </div>
            <div>
              <p className="font-medium">{t("userName")}</p>
              <p className="text-xs text-gray-500 dark:text-gray-400">{t("userEmail")}</p>
            </div>
          </div>
          <Button variant="outline" size="sm">
            {t("editProfile")}
          </Button>
        </div>
      </SettingsSection>

{/* Appearance Section */}
      <SettingsSection icon={<Sun className="h-5 w-5 text-amber-500" />} title={t("appearanceSettings")}>
        <div className="space-y-4">
          <div className="flex justify-between items-center">
            <div className="flex items-center space-x-2">
              <Globe className="h-4 w-4 text-gray-500 dark:text-gray-400" />
              <span>{t("languageSettings")}</span>
            </div>
            <LanguageSwitcher />
          </div>

<div>
            <p className="mb-2 text-sm flex items-center">
              <Moon className="h-4 w-4 text-indigo-500 mr-2" />
              {t("themeSettings")}
            </p>
            <div className="flex space-x-2">
              {themeOptions.map((option) => (
                <button
                  key={option.id}
                  onClick={() => setTheme(option.id as "light" | "dark" | "system")}
                  className={`flex items-center px-3 py-2 rounded-md transition-all ${
                    theme === option.id
                      ? "bg-pink-100 dark:bg-indigo-900 text-pink-600 dark:text-pink-400 font-medium"
                      : "bg-gray-100 dark:bg-slate-700 hover:bg-gray-200 dark:hover:bg-slate-600"
                  }`}
                >
                  {option.id === "light" && <Sun className="h-4 w-4 mr-1.5" />}
                  {option.id === "dark" && <Moon className="h-4 w-4 mr-1.5" />}
                  {option.id === "system" && <Monitor className="h-4 w-4 mr-1.5" />}
                  {t(option.id + "Theme")}
                </button>
              ))}
            </div>
          </div>
        </div>
      </SettingsSection>

{/* Notifications Section */}
      <SettingsSection icon={<Bell className="h-5 w-5 text-blue-500" />} title={t("notificationSettings")}>
        <div className="space-y-4">
          <div className="flex justify-between items-center">
            <span>{t("enableNotifications")}</span>
            <Switch checked={notificationsEnabled} onCheckedChange={setNotificationsEnabled} />
          </div>

<div className="space-y-2 mt-2">
            <div className="flex justify-between items-center">
              <span className="text-sm">{t("morningReminder")}</span>
              <Switch checked={true} />
            </div>
            <div className="flex justify-between items-center">
              <span className="text-sm">{t("eveningReminder")}</span>
              <Switch checked={true} />
            </div>
          </div>
        </div>
      </SettingsSection>

{/* Sound & Haptics */}
      <SettingsSection icon={<Volume2 className="h-5 w-5 text-green-500" />} title={t("soundSettings")}>
        <div className="space-y-4">
          <div className="flex justify-between items-center">
            <div className="flex items-center">
              {soundEnabled ? (
                <Volume2 className="h-4 w-4 text-gray-500 dark:text-gray-400 mr-2" />
              ) : (
                <VolumeX className="h-4 w-4 text-gray-500 dark:text-gray-400 mr-2" />
              )}
              <span>{t("appSounds")}</span>
            </div>
            <Switch checked={soundEnabled} onCheckedChange={setSoundEnabled} />
          </div>

{soundEnabled && (
            <div className="space-y-1">
              <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400">
                <span>{t("volume")}</span>
                <span>{volumeLevel}%</span>
              </div>
              <Slider value={[volumeLevel]} max={100} step={1} onValueChange={(value) => setVolumeLevel(value[0])} />
            </div>
          )}

<div className="flex justify-between items-center">
            <div className="flex items-center">
              <Vibrate className="h-4 w-4 text-gray-500 dark:text-gray-400 mr-2" />
              <span>{t("vibration")}</span>
            </div>
            <Switch checked={vibrationEnabled} onCheckedChange={setVibrationEnabled} />
          </div>
        </div>
      </SettingsSection>

{/* About */}
      <SettingsSection icon={<Heart className="h-5 w-5 text-pink-500" />} title={t("aboutApp")}>
        <div className="space-y-2">
          <div className="flex justify-between">
            <span className="text-sm text-gray-500 dark:text-gray-400">{t("version")}</span>
            <span className="text-sm">1.0.0</span>
          </div>
          <div className="flex justify-between">
            <span className="text-sm text-gray-500 dark:text-gray-400">{t("lastUpdated")}</span>
            <span className="text-sm">2023.03.21</span>
          </div>
          <Button variant="link" className="p-0 h-auto text-pink-500 dark:text-pink-400">
            {t("termsAndPrivacy")}
          </Button>
        </div>
      </SettingsSection>
    </div>
  )
}

interface SettingsSectionProps {
  icon: React.ReactNode
  title: string
  children: React.ReactNode
}

function SettingsSection({ icon, title, children }: SettingsSectionProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      className="bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-pink-100 dark:border-indigo-900 overflow-hidden"
    >
      <div className="px-4 py-3 bg-pink-50 dark:bg-indigo-950 flex items-center">
        <div className="mr-2">{icon}</div>
        <h3 className="font-medium">{title}</h3>
      </div>
      <div className="p-4">{children}</div>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="components/home/quick-actions.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { motion } from "framer-motion"
import { useLanguage } from "@/hooks/use-language"
import { Heart, Settings, PenLine, Headphones } from "lucide-react"

interface QuickActionsProps {
  onTabChange?: (tab: string) => void
}

export default function QuickActions({ onTabChange }: QuickActionsProps) {
  const { t } = useLanguage()

const handleMoodClick = () => {
    document.getElementById("mood-selector")?.scrollIntoView({ behavior: "smooth" })
  }

const handleDiaryClick = () => {
    if (onTabChange) onTabChange("diary")
  }

const handleMeditationClick = () => {
    if (onTabChange) onTabChange("meditation")
  }

const handleSettingsClick = () => {
    if (onTabChange) onTabChange("settings")
  }

// 빠른 작업 항목 정의
  const quickActions = [
    {
      id: "mood",
      icon: <Heart className="h-5 w-5 text-pink-500" />,
      label: t("trackMood"),
      onClick: handleMoodClick,
      ariaLabel: t("trackMood"),
    },
    {
      id: "diary",
      icon: <PenLine className="h-5 w-5 text-blue-500" />,
      label: t("writeDiary"),
      onClick: handleDiaryClick,
      ariaLabel: t("writeDiary"),
    },
    {
      id: "meditation",
      icon: <Headphones className="h-5 w-5 text-purple-500" />,
      label: t("meditate"),
      onClick: handleMeditationClick,
      ariaLabel: t("meditate"),
    },
    {
      id: "settings",
      icon: <Settings className="h-5 w-5 text-gray-500" />,
      label: t("settings", "nav"),
      onClick: handleSettingsClick,
      ariaLabel: t("settings", "nav"),
    },
  ]

return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: 0.1, duration: 0.5 }}
      className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm rounded-lg border border-gray-100 dark:border-gray-800 p-3"
    >
      <div className="flex justify-between items-center">
        {quickActions.map((action) => (
          <QuickActionButton
            key={action.id}
            icon={action.icon}
            label={action.label}
            onClick={action.onClick}
            ariaLabel={action.ariaLabel}
          />
        ))}
      </div>
    </motion.div>
  )
}

// Quick action button component
function QuickActionButton({
  icon,
  label,
  onClick,
  ariaLabel,
}: {
  icon: React.ReactNode
  label: string
  onClick: () => void
  ariaLabel: string
}) {
  return (
    <motion.button
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      className="flex flex-col items-center justify-center p-2 rounded-lg transition-colors hover:bg-gray-50 dark:hover:bg-slate-700"
      onClick={onClick}
      aria-label={ariaLabel}
    >
      <div className="mb-1">{icon}</div>
      <span className="text-xs font-medium">{label}</span>
    </motion.button>
  )
}

[V0_FILE]typescriptreact:file="components/home/home-page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import { useLanguage } from "@/hooks/use-language"
import { useWellness } from "@/hooks/use-wellness"

import MoodSelector from "@/components/mood/mood-selector"
import NotificationBanner from "@/components/home/notification-banner"
import HeroSection from "@/components/home/hero-section"
import DailyRewards from "@/components/home/daily-rewards"
import RecommendedActivities from "@/components/home/recommended-activities"
import WellnessTips from "@/components/home/wellness-tips"
import WellnessInsights from "@/components/home/wellness-insights"
import { CloudEffect } from "@/components/effects/animations"

export default function HomePage() {
  const { t, language } = useLanguage()
  const { selectedMood, diaryEntry } = useWellness()
  const [timeOfDay, setTimeOfDay] = useState<"morning" | "afternoon" | "evening" | "night">("morning")
  const [showWeatherEffect, setShowWeatherEffect] = useState(false)
  const [streakCount, setStreakCount] = useState(3) // Mock streak count
  const [showCompletionAnimation, setShowCompletionAnimation] = useState(false)
  const [showNotification, setShowNotification] = useState(true)
  const [showTips, setShowTips] = useState(true)

// Calculate completion percentage for today's tasks
  const calculateCompletion = () => {
    let completed = 0
    const total = 2 // Mood, diary

if (selectedMood) completed++
    if (diaryEntry.trim().length > 0) completed++

return Math.round((completed / total) * 100)
  }

const completionPercentage = calculateCompletion()

// Randomly show weather effect
    setShowWeatherEffect(Math.random() > 0.5)
  }, [])

// Show completion animation when all tasks are completed
  useEffect(() => {
    if (completionPercentage === 100) {
      setShowCompletionAnimation(true)
    }
  }, [completionPercentage])

return (
    <>
      {/* Weather effects */}
      {showWeatherEffect && (
        <div className="fixed inset-0 pointer-events-none overflow-hidden z-0">
          {timeOfDay === "morning" && (
            <div className="absolute top-0 left-0 right-0 h-40 bg-gradient-to-b from-amber-100 to-transparent opacity-30 dark:opacity-10" />
          )}
          {timeOfDay === "night" && (
            <div className="absolute inset-0">
              <div className="stars"></div>
            </div>
          )}
          {(timeOfDay === "evening" || timeOfDay === "afternoon") && Math.random() > 0.7 && (
            <div className="absolute top-0 left-0 right-0 h-screen">
              <CloudEffect />
            </div>
          )}
        </div>
      )}

<motion.div
        key="home"
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: -10 }}
        transition={{ duration: 0.3 }}
        className="space-y-6"
      >
        {/* Notification banner */}
        <NotificationBanner show={showNotification} onClose={() => setShowNotification(false)} />

{/* Hero section with mascot and welcome message */}
        <HeroSection
          timeOfDay={timeOfDay}
          streakCount={streakCount}
          completionPercentage={completionPercentage}
          showCompletionAnimation={showCompletionAnimation}
        />

{/* Daily rewards */}
        <DailyRewards />

{/* Main content sections - Mood Selector */}
        <div id="mood-selector">
          <MoodSelector />
        </div>

{/* Recommended activities */}
        <RecommendedActivities />

{/* Wellness tips */}
        <WellnessTips show={showTips} onClose={() => setShowTips(false)} />

{/* Wellness insights */}
        <WellnessInsights />

{/* Seasonal decoration */}
        <div className="fixed bottom-20 right-0 pointer-events-none opacity-30 z-0">
          <motion.div
            animate={{
              y: [0, -10, 0],
              rotate: [0, 5, 0, -5, 0],
            }}
            transition={{
              repeat: Number.POSITIVE_INFINITY,
              duration: 10,
              ease: "easeInOut",
            }}
          >
            <img
              src="/decoration.png"
              alt=""
              className="w-32 h-32 object-contain"
              onError={(e) => {
                // Fallback if image doesn't load
                e.currentTarget.style.display = "none"
              }}
            />
          </motion.div>
        </div>
      </motion.div>
    </>
  )
}

[V0_FILE]typescriptreact:file="constants/index.ts" isEdit="true"
import type { MoodOption, MeditationTrack, StressQuestion, Language } from "@/types"

export const LANGUAGES: Language[] = [
  { id: "ko", name: "한국어" },
  { id: "ja", name: "日本語" },
]

// 네비게이션 아이템 - 아이콘 이름만 저장하고 label 제거
export const NAVIGATION_ITEMS = [
  {
    id: "home",
    iconName: "heart",
  },
  {
    id: "diary",
    iconName: "pen-line",
  },
  {
    id: "meditation",
    iconName: "headphones",
  },
  {
    id: "settings",
    iconName: "settings",
  },
]

export const TRANSLATIONS = {
  ja: {
    appTitle: "こころケア",
    moodTitle: "今日の気分は?",
    diaryTitle: "今日の日記",
    diaryPlaceholder: "今日の気持ちを書いてみましょう...",
    saveButton: "保存",
    savingButton: "保存中...",
    meditationTitle: "瞑想",
    stressTitle: "ストレスチェック",
    pastDiaries: "過去の日記",
    meditationCollection: "瞑想コレクション",
    diaryPageTitle: "日記",
    settingsTitle: "設定",
    settingsInDev: "設定ページは開発中です。",
    languageSettings: "言語設定",
    themeSettings: "テーマ設定",
    lightTheme: "ライト",
    darkTheme: "ダーク",
    systemTheme: "システム",
    todayProgress: "今日の進捗",
    completionMessage: "おめでとう！今日のケアが完了しました",
    newEntry: "新しい日記",
    searchDiary: "日記を検索",
    listView: "リスト",
    calendarView: "カレンダー",
    noSearchResults: "検索結果がありません",
    noDiaryEntries: "日記がありません",
    showMore: "もっと見る",
    showLess: "閉じる",
    appearanceSettings: "外観",
    notificationSettings: "通知",
    soundSettings: "サウンドと振動",
    privacySettings: "プライバシーとデータ",
    accountSettings: "アカウント",
    aboutApp: "アプリについて",
    enableNotifications: "通知を有効にする",
    notificationSchedule: "通知スケジュール",
    morningReminder: "朝のリマインダー (8:00)",
    eveningReminder: "夜のリマインダー (21:00)",
    weeklyReport: "週間レポート (日曜日)",
    appSounds: "アプリのサウンド",
    volume: "音量",
    vibration: "振動",
    privacyMode: "プライバシーモード",
    exportData: "データをエクスポート",
    importData: "データをインポート",
    deleteAllData: "すべてのデータを削除",
    deleteConfirmTitle: "データを削除しますか？",
    deleteConfirmDescription:
      "この操作は元に戻せません。すべての日記、気分記録、ストレスチェックデータが削除されます。",
    cancel: "キャンセル",
    confirmDelete: "削除する",
    userInitials: "YT",
    userName: "山田 太郎",
    userEmail: "yamada@example.com",
    editProfile: "プロフィール編集",
    version: "バージョン",
    lastUpdated: "最終更新日",
    termsAndPrivacy: "利用規約とプライバシーポリシー",
    currentlyPlaying: "再生中",
    meditationDescription:
      "深呼吸をして、心を落ち着かせましょう。この瞑想は、ストレスを軽減し、集中力を高めるのに役立ちます。",
    meditationBenefits: "ストレス軽減・集中力向上",
    meditationTips: "瞑想のヒント",
    meditationTip1: "背筋を伸ばして座り、目を閉じて深呼吸をしましょう。",
    meditationTip2: "思考が浮かんでも、それを認識して手放しましょう。",
    meditationTip3: "瞑想後は、ゆっくりと目を開け、体を動かしましょう。",
    noTracksInCategory: "このカテゴリには瞑想がありません",
    characters: "文字",
    addTag: "タグを追加",
    addImage: "画像を追加",
    filterByTag: "タグで絞り込み",
    filterByMood: "気分で絞り込み",
    clearFilters: "絞り込みをクリア",
    quickActions: "クイックアクション",
    trackMood: "気分を記録",
    writeDiary: "日記を書く",
    meditate: "瞑想する",
    recentActivities: "最近のアクティビティ",
    recentDiary: "日記を更新しました",
    diaryUpdated: "日記を書きました",
    moodTracked: "気分を記録しました",
    meditationCompleted: "瞑想を完了しました",
    wellnessInsights: "ウェルネスの分析",
    moodTab: "気分",
    sleepTab: "睡眠",
    stressTab: "ストレス",
    mostFrequent: "最も多い",
    avgSleep: "平均睡眠時間",
    stressReduction: "ストレス減少",
    moodInsight: "先週は「嬉しい」気分が最も多く記録されました。",
    sleepInsight: "先週の平均睡眠時間は7.5時間でした。",
    stressInsight: "先週のストレスレベルは前週より12%減少しました。",
    dayStreak: "日連続",
    level: "レベル",
    diaryTags: {
      thoughts: "考え",
      gratitude: "感謝",
      goals: "目標",
      memories: "思い出",
    },
    meditationCategories: {
      all: "すべて",
      nature: "自然",
      sleep: "睡眠",
      focus: "集中",
    },
    nav: {
      home: "ホーム",
      meditation: "瞑想",
      diary: "日記",
      settings: "設定",
    },
    moods: {
      happy: "嬉しい",
      neutral: "普通",
      sad: "悲しい",
      tired: "疲れた",
      excited: "ワクワク",
      calm: "穏やか",
      anxious: "不安",
      angry: "イライラ",
      grateful: "感謝",
    },
    stressQuestions: [
      "昨夜はよく眠れましたか？",
      "今日は休憩を取りましたか？",
      "十分な水分を摂取していますか？",
      "今日は不安を感じましたか？",
      "今日は圧倒されていると感じましたか？",
    ],
    meditationTracks: [
      {
        title: "森の中の朝瞑想",
        duration: "3分",
      },
      {
        title: "波の音でリラックス",
        duration: "5分",
      },
      {
        title: "星空の下での瞑想",
        duration: "4分",
      },
      {
        title: "雨音と共に集中",
        duration: "2分",
      },
    ],
    stressRatings: {
      great: "素晴らしい",
      good: "良い",
      neutral: "普通",
      bad: "悪い",
      terrible: "最悪",
    },
    recommendedActivities: "おすすめのアクティビティ",
    deepBreathing: "深呼吸エクササイズ",
    deepBreathingDesc: "ストレスを軽減し、リラックスするための簡単な呼吸法",
    gratitudeJournal: "感謝日記",
    gratitudeJournalDesc: "今日感謝していることを3つ書き出してみましょう",
    quickStretch: "クイックストレッチ",
    quickStretchDesc: "デスクでできる簡単なストレッチで体をリフレッシュ",
    quickStressCheck: "クイックストレスチェック",
    viewFull: "詳細を見る",
    howAreYouFeeling: "今日の気分はどうですか？",
    saving: "保存中...",
  },
  ko: {
    appTitle: "마음 케어",
    moodTitle: "오늘의 기분은?",
    diaryTitle: "오늘의 일기",
    diaryPlaceholder: "오늘의 감정을 기록해보세요...",
    saveButton: "저장",
    savingButton: "저장 중...",
    meditationTitle: "명상",
    stressTitle: "스트레스 체크",
    pastDiaries: "지난 일기",
    meditationCollection: "명상 컬렉션",
    diaryPageTitle: "일기",
    settingsTitle: "설정",
    settingsInDev: "설정 페이지는 개발 중입니다.",
    languageSettings: "언어 설정",
    themeSettings: "테마 설정",
    lightTheme: "라이트",
    darkTheme: "다크",
    systemTheme: "시스템",
    todayProgress: "오늘의 진행 상황",
    completionMessage: "축하합니다! 오늘의 케어를 완료했어요",
    newEntry: "새 일기",
    searchDiary: "일기 검색",
    listView: "목록",
    calendarView: "달력",
    noSearchResults: "검색 결과가 없습니다",
    noDiaryEntries: "일기가 없습니다",
    showMore: "더 보기",
    showLess: "접기",
    appearanceSettings: "외관",
    notificationSettings: "알림",
    soundSettings: "소리 및 진동",
    privacySettings: "개인정보 및 데이터",
    accountSettings: "계정",
    aboutApp: "앱 정보",
    enableNotifications: "알림 활성화",
    notificationSchedule: "알림 일정",
    morningReminder: "아침 알림 (8:00)",
    eveningReminder: "저녁 알림 (21:00)",
    weeklyReport: "주간 리포트 (일요일)",
    appSounds: "앱 소리",
    volume: "볼륨",
    vibration: "진동",
    privacyMode: "개인정보 보호 모드",
    exportData: "데이터 내보내기",
    importData: "데이터 가져오기",
    deleteAllData: "모든 데이터 삭제",
    deleteConfirmTitle: "데이터를 삭제하시겠습니까?",
    deleteConfirmDescription: "이 작업은 되돌릴 수 없습니다. 모든 일기, 기분 기록, 스트레스 체크 데이터가 삭제됩니다.",
    cancel: "취소",
    confirmDelete: "삭제",
    userInitials: "김민",
    userName: "김민준",
    userEmail: "minjun@example.com",
    editProfile: "프로필 편집",
    version: "버전",
    lastUpdated: "최종 업데이트",
    termsAndPrivacy: "이용약관 및 개인정보 처리방침",
    currentlyPlaying: "재생 중",
    meditationDescription:
      "깊게 호흡하고 마음을 진정시키세요. 이 명상은 스트레스를 줄이고 집중력을 높이는 데 도움이 됩니다.",
    meditationBenefits: "스트레스 감소 · 집중력 향상",
    meditationTips: "명상 팁",
    meditationTip1: "등을 곧게 펴고 앉아 눈을 감고 깊게 호흡하세요.",
    meditationTip2: "생각이 떠오르면 그것을 인식하고 놓아주세요.",
    meditationTip3: "명상 후에는 천천히 눈을 뜨고 몸을 움직이세요.",
    noTracksInCategory: "이 카테고리에 명상이 없습니다",
    characters: "글자",
    addTag: "태그 추가",
    addImage: "이미지 추가",
    filterByTag: "태그로 필터링",
    filterByMood: "기분으로 필터링",
    clearFilters: "필터 초기화",
    quickActions: "빠른 작업",
    trackMood: "기분 기록",
    writeDiary: "일기 쓰기",
    meditate: "명상하기",
    recentActivities: "최근 활동",
    recentDiary: "일기를 업데이트했습니다",
    diaryUpdated: "일기를 작성했습니다",
    moodTracked: "기분을 기록했습니다",
    meditationCompleted: "명상을 완료했습니다",
    wellnessInsights: "웰니스 인사이트",
    moodTab: "기분",
    sleepTab: "수면",
    stressTab: "스트레스",
    mostFrequent: "가장 많음",
    avgSleep: "평균 수면시간",
    stressReduction: "스트레스 감소",
    moodInsight: "지난 주에는 '행복함' 기분이 가장 많이 기록되었습니다.",
    sleepInsight: "지난 주 평균 수면 시간은 7.5시간이었습니다.",
    stressInsight: "지난 주 스트레스 수준이 전주보다 12% 감소했습니다.",
    dayStreak: "일 연속",
    level: "레벨",
    diaryTags: {
      thoughts: "생각",
      gratitude: "감사",
      goals: "목표",
      memories: "추억",
    },
    meditationCategories: {
      all: "전체",
      nature: "자연",
      sleep: "수면",
      focus: "집중",
    },
    nav: {
      home: "홈",
      meditation: "명상",
      diary: "일기",
      settings: "설정",
    },
    moods: {
      happy: "행복함",
      neutral: "보통",
      sad: "슬픔",
      tired: "피곤함",
      excited: "신남",
      calm: "평온함",
      anxious: "불안함",
      angry: "화남",
      grateful: "감사함",
    },
    stressQuestions: [
      "어젯밤에 잘 주무셨나요?",
      "오늘 휴식을 취했나요?",
      "충분한 물을 마셨나요?",
      "오늘 불안감을 느꼈나요?",
      "오늘 부담감을 느꼈나요?",
    ],
    meditationTracks: [
      {
        title: "숲속 아침 명상",
        duration: "3분",
      },
      {
        title: "파도 소리 릴렉싱",
        duration: "5분",
      },
      {
        title: "별빛 아래 명상",
        duration: "4분",
      },
      {
        title: "빗소리와 함께 집중",
        duration: "2분",
      },
    ],
    stressRatings: {
      great: "매우 좋음",
      good: "좋음",
      neutral: "보통",
      bad: "나쁨",
      terrible: "매우 나쁨",
    },
    recommendedActivities: "추천 활동",
    deepBreathing: "심호흡 운동",
    deepBreathingDesc: "스트레스를 줄이고 긴장을 풀기 위한 간단한 호흡법",
    gratitudeJournal: "감사 일기",
    gratitudeJournalDesc: "오늘 감사한 일 3가지를 적어보세요",
    quickStretch: "간단한 스트레칭",
    quickStretchDesc: "책상에서 할 수 있는 간단한 스트레칭으로 몸을 리프레시",
    quickStressCheck: "빠른 스트레스 체크",
    viewFull: "전체 보기",
    howAreYouFeeling: "오늘 기분이 어떠신가요?",
    saving: "저장 중...",
  },
}

export const MOOD_OPTIONS: MoodOption[] = [
  { id: "happy", emoji: "😊" },
  { id: "excited", emoji: "🤩" },
  { id: "grateful", emoji: "🙏" },
  { id: "calm", emoji: "😌" },
  { id: "neutral", emoji: "😐" },
  { id: "tired", emoji: "😴" },
  { id: "anxious", emoji: "😰" },
  { id: "sad", emoji: "😔" },
  { id: "angry", emoji: "😠" },
]

export const MEDITATION_TRACKS: MeditationTrack[] = [
  {
    id: "morning-calm",
    audioSrc: "/meditation-1.mp3",
  },
  {
    id: "stress-relief",
    audioSrc: "/meditation-2.mp3",
  },
  {
    id: "sleep-well",
    audioSrc: "/meditation-3.mp3",
  },
  {
    id: "focus",
    audioSrc: "/meditation-4.mp3",
  },
]

export const STRESS_QUESTIONS: StressQuestion[] = [
  { id: "sleep" },
  { id: "breaks" },
  { id: "water" },
  { id: "anxiety" },
  { id: "overwhelmed" },
]

[V0_FILE]typescriptreact:file="components/navigation/navigation.tsx" isEdit="true"
"use client"
import { cn } from "@/lib/utils"
import { motion } from "framer-motion"
import { Heart, PenLine, Headphones, Settings } from "lucide-react"
import { NAVIGATION_ITEMS } from "@/constants"
import { useLanguage } from "@/hooks/use-language"

interface NavigationProps {
  activeTab: string
  onTabChange: (tab: string) => void
}

export default function Navigation({ activeTab, onTabChange }: NavigationProps) {
  const { t } = useLanguage()

// 아이콘 매핑 함수
  const getIcon = (iconName: string) => {
    switch (iconName) {
      case "heart":
        return <Heart className="h-5 w-5" />
      case "pen-line":
        return <PenLine className="h-5 w-5" />
      case "headphones":
        return <Headphones className="h-5 w-5" />
      case "settings":
        return <Settings className="h-5 w-5" />
      default:
        return <Heart className="h-5 w-5" />
    }
  }

return (
    <div className="fixed bottom-0 left-0 right-0 bg-white dark:bg-slate-900 border-t border-gray-200 dark:border-gray-800 p-2 z-10 backdrop-blur-md bg-opacity-90 dark:bg-opacity-90">
      <div className="flex justify-around max-w-md mx-auto">
        {NAVIGATION_ITEMS.map((item) => (
          <button
            key={item.id}
            className="flex flex-col items-center p-2 relative"
            onClick={() => onTabChange(item.id)}
          >
            {activeTab === item.id && (
              <motion.div
                layoutId="activeTab"
                className="absolute inset-0 bg-gray-100 dark:bg-gray-800 rounded-lg -z-10"
                initial={false}
                transition={{ type: "spring", stiffness: 300, damping: 30 }}
              />
            )}
            <div
              className={cn(
                activeTab === item.id ? "text-pink-500 dark:text-pink-400" : "text-gray-500 dark:text-gray-400",
              )}
            >
              {getIcon(item.iconName)}
            </div>
            <span
              className={cn(
                "text-xs mt-1",
                activeTab === item.id
                  ? "text-pink-500 dark:text-pink-400 font-medium"
                  : "text-gray-500 dark:text-gray-400",
              )}
            >
              {t(item.id, "nav")}
            </span>
          </button>
        ))}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="types/index.ts" isEdit="true"
export interface NavigationItem {
  id: string
  iconName: string
}

export interface MoodOption {
  id: string
  emoji: string
}

export interface MeditationTrack {
  id: string
  audioSrc: string
}

export interface StressQuestion {
  id: string
}

export interface StressChecklistType {
  [key: string]: number
}

export interface Language {
  id: string
  name: string
}

export type LanguageCode = "ja" | "ko"

export interface ThemeType {
  id: string
  name: string
}

export interface DiaryEntry {
  id: string
  date: string
  content: string | { [key: string]: string }
  mood?: string
  tag?: string
}
</article></body></html>

About

Tags

Share

About

Tags

Share

More from bokeumeom

More Templates Like This

About

Tags

Share

About

Tags

Share

More from bokeumeom

More Templates Like This