[V0_FILE]typescriptreact:file="lib/app-state.tsx" isQuickEdit="true" isMerged="true" "use client" import { createContext, useContext, useState, type ReactNode } from "react" type AppState = { isLocked: boolean currentApp: string | null controlCenterOpen: boolean openApp: (appId: string) => void closeApp: () => void lockDevice: () => void unlockDevice: () => void openControlCenter: () => void closeControlCenter: () => void } const AppStateContext = createContext(undefined) export function AppStateProvider({ children }: { children: ReactNode }) { const [isLocked, setIsLocked] = useState(false) const [currentApp, setCurrentApp] = useState(null) const [controlCenterOpen, setControlCenterOpen] = useState(false) const openApp = (appId: string) => { setCurrentApp(appId) } const closeApp = () => { setCurrentApp(null) } const lockDevice = () => { setIsLocked(true) setCurrentApp(null) } const unlockDevice = () => { setIsLocked(false) } const openControlCenter = () => { setControlCenterOpen(true) } const closeControlCenter = () => { setControlCenterOpen(false) } return ( {children} ) } export function useAppState() { const context = useContext(AppStateContext) if (context === undefined) { throw new Error("useAppState must be used within an AppStateProvider") } return context } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { AppStateProvider } from "@/lib/app-state" import { Providers } from "./providers" import { WallpaperProvider } from "@/lib/wallpaper-state" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "iPhone Interface", description: "Interactive iPhone interface built with shadcn/ui and Tailwind CSS", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [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: 222.2 47.4% 11.2%; --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: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --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: 210 40% 98%; --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: 212.7 26.8% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* iPhone app icons */ .app-icon { @apply rounded-2xl overflow-hidden flex items-center justify-center text-white text-xs font-medium; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } /* iPhone gradient background */ .iphone-bg { background: linear-gradient(to bottom, #f64f59, #c471ed, #12c2e9); } .iphone-home-bg { background: linear-gradient(to bottom, rgba(246, 79, 89, 0.6), rgba(0, 0, 50, 0.9)); } /* App animations */ .app-open { animation: app-open 0.3s ease-out forwards; } @keyframes app-open { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } .app-close { animation: app-close 0.2s ease-in forwards; } @keyframes app-close { from { transform: scale(1); opacity: 1; } to { transform: scale(0.8); opacity: 0; } } /* Status bar padding for Dynamic Island */ .status-bar-padding { padding-top: calc(34px + 0.5rem); } /* Custom range input styling */ input[type="range"] { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px; outline: none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: white; cursor: pointer; } input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: white; cursor: pointer; border: none; } /* Custom background gradients */ .bg-gradient-light { background: linear-gradient(135deg, #e0f2fe, #ede9fe, #faf5ff); } .bg-gradient-dark { background: linear-gradient(135deg, #172554, #1e1b4b, #3b0764); } /* Add a subtle animation to the background in dark mode */ @media (prefers-color-scheme: dark) { .animate-gradient { background-size: 400% 400%; animation: gradient 15s ease infinite; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } } [V0_FILE]typescriptreact:file="components/lock-screen.tsx" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { StatusBar } from "@/components/status-bar" import { formatDate, formatTime } from "@/lib/utils" import { useAppState } from "@/lib/app-state" interface LockScreenProps { time: Date } export function LockScreen({ time }: LockScreenProps) { const { unlockDevice } = useAppState() const [swipeProgress, setSwipeProgress] = useState(0) const handleDragEnd = () => { if (swipeProgress > 0.5) { unlockDevice() } setSwipeProgress(0) } return (

{formatTime(time)}

{formatDate(time)}

{ const progress = Math.min(Math.max(-info.offset.y / 100, 0), 1) setSwipeProgress(progress) }} onDragEnd={handleDragEnd} >

Swipe up to unlock

{/* Overlay that fades out as you swipe */}

) } [V0_FILE]typescriptreact:file="components/clock.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { formatTime } from "@/lib/utils" export function Clock() { const [time, setTime] = useState(new Date()) useEffect(() => { const timer = setInterval(() => { setTime(new Date()) }, 1000) return () => clearInterval(timer) }, []) return (

{formatTime(time)}

) } [V0_FILE]typescriptreact:file="components/settings.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import { Button } from "@/components/ui/button" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" import { Wifi, Bluetooth, Moon, BatteryMedium, Bell } from "lucide-react" export function Settings() { return (

Wi-Fi

Bluetooth

Focus

Battery

80%

Notifications

) } [V0_FILE]typescriptreact:file="components/weather.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { Widget } from "./widget" import { useState, useEffect } from "react" export function Weather() { const [weatherData, setWeatherData] = useState(null) useEffect(() => { const fetchWeatherData = async () => { try { const response = await fetch( "https://api.openweathermap.org/data/2.5/weather?q=Cupertino&appid=YOUR_API_KEY&units=imperial", ) if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`) } const data = await response.json() setWeatherData(data) } catch (error) { console.error("Error fetching weather data:", error) } } fetchWeatherData() }, []) const content = (

{weatherData ? ( <>

{weatherData.name}

{Math.round(weatherData.main.temp)}°

{" "} {weatherData.weather[0].description}

H:{Math.round(weatherData.main.temp_max)}° L: {Math.round(weatherData.main.temp_min)}°

HOURLY FORECAST

{["Now", "11AM", "12PM", "1PM", "2PM"].map((time, i) => (

{time}

☀️

{Math.round(weatherData.main.temp + i)}°

))}

10-DAY FORECAST

{["Today", "Tue", "Wed", "Thu", "Fri"].map((day, i) => (

{day}

☀️

{Math.round(weatherData.main.temp_min + i)}° {Math.round(weatherData.main.temp_max + i)}°

))}

) : (

)}

) return } [V0_FILE]typescriptreact:file="components/calendar.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { Widget } from "./widget" export function Calendar() { const today = new Date() const dayNames = ["SUNDAY", "MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY", "FRIDAY", "SATURDAY"] const content = (

{dayNames[today.getDay()]}

{today.getDate()}

🔒 2 birthdays

Portfolio work session

10 - 10:30AM

) return } [V0_FILE]typescript:file="lib/utils.ts" isQuickEdit="true" isMerged="true" export function formatTime(date: Date, includeSeconds = false): string { const hours = date.getHours() const minutes = date.getMinutes() const seconds = date.getSeconds() const formattedHours = hours % 12 || 12 const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes const formattedSeconds = seconds < 10 ? `0${seconds}` : seconds const ampm = hours >= 12 ? "PM" : "AM" return includeSeconds ? `${formattedHours}:${formattedMinutes}:${formattedSeconds} ${ampm}` : `${formattedHours}:${formattedMinutes} ${ampm}` } export function formatDate(date: Date, options: Intl.DateTimeFormatOptions = {}): string { const defaultOptions: Intl.DateTimeFormatOptions = { weekday: "long", month: "long", day: "numeric", ...options, } return new Intl.DateTimeFormat("en-US", defaultOptions).format(date) } export const cn = (...inputs: (string | undefined)[]) => { return inputs.filter(Boolean).join(" ") } export function formatRelativeTime(timestamp: number): string { const now = Date.now() const diff = now - timestamp const seconds = Math.floor(diff / 1000) const minutes = Math.floor(seconds / 60) const hours = Math.floor(minutes / 60) const days = Math.floor(hours / 24) if (days > 0) { return `${days} day${days > 1 ? "s" : ""} ago` } else if (hours > 0) { return `${hours} hour${hours > 1 ? "s" : ""} ago` } else if (minutes > 0) { return `${minutes} minute${minutes > 1 ? "s" : ""} ago` } else { return `${seconds} second${seconds > 1 ? "s" : ""} ago` } } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { 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")], } [V0_FILE]typescriptreact:file="app/providers.tsx" isMerged="true" "use client" import { ThemeProvider } from "next-themes" import type { ReactNode } from "react" export function Providers({ children }: { children: ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="package.json" isMerged="true" { "name": "iphone-interface", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-switch": "^1.0.3", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "framer-motion": "^11.0.8", "lucide-react": "^0.344.0", "next": "14.1.0", "next-themes": "^0.2.1", "react": "^18", "react-dom": "^18", "tailwind-merge": "^2.2.1", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.1.0", "postcss": "^8", "tailwindcss": "^3.3.0", "typescript": "^5" } } [V0_FILE]typescriptreact:file="public/icons/facetime.svg" isMerged="true" ]> [V0_FILE]typescriptreact:file="public/icons/appstore.svg" isMerged="true" [V0_FILE]typescriptreact:file="components/svg-icon.tsx" isMerged="true" import Image from "next/image" import type { HTMLAttributes } from "react" interface SVGIconProps extends HTMLAttributes { name: string size?: number } export function SVGIcon({ name, size = 40, className, ...props }: SVGIconProps) { return (

) } [V0_FILE]typescriptreact:file="components/icons/appstore.tsx" isMoved="true" isMerged="true" export function AppStore() { return ( ) } [V0_FILE]typescriptreact:file="public/icons/safari.svg" isMerged="true" [V0_FILE]typescriptreact:file="public/icons/camera.svg" isMerged="true" [V0_FILE]typescriptreact:file="public/icons/reminders.svg" isMerged="true" [V0_FILE]typescriptreact:file="public/icons/phone.svg" isMerged="true" [V0_FILE]typescriptreact:file="public/icons/health.svg" isMerged="true" [V0_FILE]typescriptreact:file="public/icons/calendar.svg" isMerged="true" [V0_FILE]typescriptreact:file="public/icons/mail.svg" isMerged="true" [V0_FILE]xml:file="public/icons/messages.svg" isFixed="true" isQuickEdit="true" isMerged="true" [V0_FILE]xml:file="public/icons/wallet.svg" isMerged="true" [V0_FILE]xml:file="public/icons/music.svg" isMerged="true" [V0_FILE]xml:file="public/icons/clock.svg" isMerged="true" [V0_FILE]xml:file="public/icons/photos.svg" isMerged="true" [V0_FILE]xml:file="public/icons/settings.svg" isMerged="true" [V0_FILE]xml:file="public/icons/maps.svg" isMerged="true" [V0_FILE]xml:file="public/icons/podcasts.svg" isMoved="true" isMerged="true" [V0_FILE]xml:file="public/icons/news.svg" isMerged="true" [V0_FILE]xml:file="public/icons/tv.svg" isMerged="true" [V0_FILE]xml:file="public/icons/notes.svg" isMerged="true" [V0_FILE]typescriptreact:file="lib/wallpaper-state.tsx" isMerged="true" "use client" import { createContext, useContext, useState, type ReactNode } from "react" import { useTheme } from "next-themes" type WallpaperTheme = "yellow" | "purple" | "azure" | "pink" type WallpaperState = { wallpaper: WallpaperTheme setWallpaper: (theme: WallpaperTheme) => void getWallpaperUrl: () => string } const WallpaperContext = createContext(undefined) const wallpapers = { yellow: { light: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/iOS18-Yellow-7P0ALlOC3U3E8oWPQGnTjI1T3hjHeK.webp", dark: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/iOS18-Yellow-Dark-kcXZWygM44kkgPTfePqDuUFKg3tJve.webp", }, purple: { light: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/iOS18-Purple-kB13dHiBzPqiVTERkEPRH2DKitsdgd.webp", dark: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/iOS18-Purple-Dark-dwaQjVqVXHSynFy9VfdyNkc2BlT6xI.webp", }, azure: { light: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/iOS18-Azure-9Ax4tYYD2NK3Y9BWyohSWE63jMX9eo.webp", dark: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/iOS18-Azure-Dark-0LT7qgEXqo3Hvm5Z2ZVyl8hkoCBcnd.webp", }, pink: { light: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/iOS18-Pink-ZRgZ6xgYCAg8FVNWyzmwWH1CKRInFs.webp", dark: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/iOS18-Pink-Dark-cV3JSRD3LsJA86KNdXSBDO3GivqzNJ.webp", }, } export function WallpaperProvider({ children }: { children: ReactNode }) { const [wallpaper, setWallpaper] = useState("azure") const { theme } = useTheme() const getWallpaperUrl = () => { const isDark = theme === "dark" return wallpapers[wallpaper][isDark ? "dark" : "light"] } return ( {children} ) } export function useWallpaper() { const context = useContext(WallpaperContext) if (context === undefined) { throw new Error("useWallpaper must be used within a WallpaperProvider") } return context } [V0_FILE]typescriptreact:file="components/wallpaper-switcher.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { ImageIcon } from "lucide-react" import { useWallpaper } from "@/lib/wallpaper-state" export function WallpaperSwitcher() { const { wallpaper, setWallpaper } = useWallpaper() return ( setWallpaper("yellow")} className="cursor-pointer"> Yellow setWallpaper("purple")} className="cursor-pointer"> Purple setWallpaper("azure")} className="cursor-pointer"> Azure setWallpaper("pink")} className="cursor-pointer"> Pink ) } [V0_FILE]typescriptreact:file="components/Widget.tsx" isQuickEdit="true" isMerged="true" import type { ReactNode } from "react" interface WidgetProps { title: string content: ReactNode className?: string } export function Widget({ title, content, className = "" }: WidgetProps) { return (

{content}

{title}

) } [V0_FILE]typescriptreact:file="components/iphone-frame.tsx" isMerged="true" import type React from "react" interface IPhoneFrameProps { children?: React.ReactNode className?: string } export function IPhoneFrame({ children, className = "" }: IPhoneFrameProps) { return (

{/* iPhone outer frame */}

{/* Inner frame with border */}

{/* Screen bezel */}

{/* Dynamic Island (pill) */}

{/* Content area */}

{children}

{/* Side buttons */} {/* Volume up */}

{/* Volume down */}

{/* Power button */}

) } [V0_FILE]typescriptreact:file="lib/use-local-storage.ts" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" export function useLocalStorage(key: string, initialValue: T): [T, (value: T) => void] { // Get from local storage then // parse stored json or return initialValue const readValue = () => { // Prevent build error "window is undefined" but keep working if (typeof window === "undefined") { return initialValue } try { const item = window.localStorage.getItem(key) return item ? JSON.parse(item) : initialValue } catch (error) { console.warn(`Error reading localStorage key "${key}":`, error) return initialValue } } // State to store our value // Pass initial state function to useState so logic is only executed once const [storedValue, setStoredValue] = useState(readValue) // Return a wrapped version of useState's setter function that ... // ... persists the new value to localStorage. const setValue = (value: T) => { try { // Allow value to be a function so we have same API as useState const valueToStore = value instanceof Function ? value(storedValue) : value // Save state setStoredValue(valueToStore) // Save to local storage if (typeof window !== "undefined") { window.localStorage.setItem(key, JSON.stringify(valueToStore)) } } catch (error) { console.warn(`Error setting localStorage key "${key}":`, error) } } useEffect(() => { setStoredValue(readValue()) }, []) // Removed readValue from dependencies return [storedValue, setValue] } [V0_FILE]typescriptreact:file="components/notes/note-editor.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { ArrowLeft, Check, Trash2 } from "lucide-react" import type { Note } from "./notes-app" interface NoteEditorProps { note: Note onSave: (note: Note) => void onBack: () => void onDelete: (noteId: string) => void } export function NoteEditor({ note, onSave, onBack, onDelete }: NoteEditorProps) { const [title, setTitle] = useState(note.title) const [content, setContent] = useState(note.content) const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false) // Auto-save when navigating away useEffect(() => { return () => { if (title !== note.title || content !== note.content) { onSave({ ...note, title, content, }) } } }, [title, content, note, onSave]) const handleSave = () => { onSave({ ...note, title, content, }) onBack() } return (

{/* Header */}

{/* Editor */}

setTitle(e.target.value)} placeholder="Title" className="w-full text-2xl font-bold mb-4 outline-none" />

setContent(e.target.value)}
          placeholder="Note"
          className="w-full h-[calc(100%-4rem)] outline-none resize-none"
        />
      </div>

{/* Delete Confirmation Dialog */}
      {isDeleteDialogOpen && (
        <div className="absolute inset-0 bg-black/50 flex items-center justify-center z-50">
          <div className="bg-white rounded-xl w-[80%] overflow-hidden">
            <div className="p-4 border-b">
              <h3 className="text-lg font-semibold text-center">Delete Note</h3>
            </div>
            <div className="p-4">
              <p className="text-center mb-4">Are you sure you want to delete this note?</p>
              <div className="flex justify-end gap-2">
                <button className="px-4 py-2 text-[#FF9500]" onClick={() => setIsDeleteDialogOpen(false)}>
                  Cancel
                </button>
                <button
                  className="px-4 py-2 bg-red-500 text-white rounded-lg"
                  onClick={() => {
                    onDelete(note.id)
                    setIsDeleteDialogOpen(false)
                  }}
                >
                  Delete
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/notes/notes-app.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { FolderIcon, ChevronDown, ChevronRight, PenSquare, Settings2, Trash2 } from "lucide-react"
import { useLocalStorage } from "@/lib/use-local-storage"
import { NoteEditor } from "./note-editor"
import { FolderView } from "./folder-view"

export interface Folder {
  id: string
  name: string
  notes: Note[]
  icon: "folder" | "settings"
}

export interface Note {
  id: string
  title: string
  content: string
  tags: string[]
  createdAt: string
  updatedAt: string
}

export function NotesApp() {
  const [folders, setFolders] = useLocalStorage<Folder[]>("notes-folders", [
    {
      id: "all-icloud",
      name: "All iCloud",
      notes: [],
      icon: "folder",
    },
    {
      id: "notes",
      name: "Notes",
      notes: [
        {
          id: "note-1",
          title: "Welcome to Notes",
          content: "This is your first note. Tap to edit.",
          tags: [],
          createdAt: new Date().toISOString(),
          updatedAt: new Date().toISOString(),
        },
      ],
      icon: "folder",
    },
    {
      id: "family",
      name: "Family Birthdays & Anniversaries",
      notes: [
        {
          id: "note-2",
          title: "Mom's Birthday",
          content: "May 15",
          tags: ["family"],
          createdAt: new Date().toISOString(),
          updatedAt: new Date().toISOString(),
        },
      ],
      icon: "settings",
    },
    {
      id: "grocery",
      name: "Grocery List",
      notes: [
        {
          id: "note-3",
          title: "Weekly Groceries",
          content: "- Milk\n- Eggs\n- Bread",
          tags: ["shopping"],
          createdAt: new Date().toISOString(),
          updatedAt: new Date().toISOString(),
        },
      ],
      icon: "folder",
    },
  ])

const [isICloudExpanded, setIsICloudExpanded] = useState(true)
  const [isTagsExpanded, setIsTagsExpanded] = useState(true)
  const [isNewFolderDialogOpen, setIsNewFolderDialogOpen] = useState(false)
  const [newFolderName, setNewFolderName] = useState("")
  const [isEditing, setIsEditing] = useState(false)
  const [currentView, setCurrentView] = useState<"folders" | "folder" | "note">("folders")
  const [selectedFolderId, setSelectedFolderId] = useState<string | null>(null)
  const [selectedNoteId, setSelectedNoteId] = useState<string | null>(null)
  const [editingNote, setEditingNote] = useState<Note | null>(null)

const handleCreateFolder = () => {
    if (newFolderName.trim()) {
      const newFolder: Folder = {
        id: `folder-${Date.now()}`,
        name: newFolderName,
        notes: [],
        icon: "folder",
      }
      setFolders([...folders, newFolder])
      setNewFolderName("")
      setIsNewFolderDialogOpen(false)
    }
  }

const handleDeleteFolder = (folderId: string) => {
    setFolders(folders.filter((folder) => folder.id !== folderId))
  }

const handleFolderClick = (folderId: string) => {
    setSelectedFolderId(folderId)
    setCurrentView("folder")
  }

const handleCreateNote = () => {
    const newNote: Note = {
      id: `note-${Date.now()}`,
      title: "New Note",
      content: "",
      tags: [],
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
    }

// If we're in a folder view, add to that folder
    if (currentView === "folder" && selectedFolderId) {
      const updatedFolders = folders.map((folder) => {
        if (folder.id === selectedFolderId) {
          return {
            ...folder,
            notes: [newNote, ...folder.notes],
          }
        }
        return folder
      })
      setFolders(updatedFolders)
    } else {
      // Otherwise add to the default Notes folder
      const updatedFolders = folders.map((folder) => {
        if (folder.id === "notes") {
          return {
            ...folder,
            notes: [newNote, ...folder.notes],
          }
        }
        return folder
      })
      setFolders(updatedFolders)
    }

setEditingNote(newNote)
    setCurrentView("note")
  }

const handleNoteClick = (note: Note) => {
    setEditingNote(note)
    setCurrentView("note")
  }

const handleSaveNote = (updatedNote: Note) => {
    const updatedFolders = folders.map((folder) => {
      const noteIndex = folder.notes.findIndex((note) => note.id === updatedNote.id)
      if (noteIndex !== -1) {
        const updatedNotes = [...folder.notes]
        updatedNotes[noteIndex] = {
          ...updatedNote,
          updatedAt: new Date().toISOString(),
        }
        return {
          ...folder,
          notes: updatedNotes,
        }
      }
      return folder
    })

setFolders(updatedFolders)
  }

const handleDeleteNote = (noteId: string) => {
    const updatedFolders = folders.map((folder) => {
      return {
        ...folder,
        notes: folder.notes.filter((note) => note.id !== noteId),
      }
    })

setFolders(updatedFolders)
    setCurrentView("folder")
  }

const handleBackToFolders = () => {
    setCurrentView("folders")
    setSelectedFolderId(null)
  }

const handleBackToFolder = () => {
    setCurrentView("folder")
    setEditingNote(null)
  }

// Render the appropriate view
  if (currentView === "note" && editingNote) {
    return (
      <NoteEditor note={editingNote} onSave={handleSaveNote} onBack={handleBackToFolder} onDelete={handleDeleteNote} />
    )
  }

if (currentView === "folder" && selectedFolderId) {
    const selectedFolder = folders.find((folder) => folder.id === selectedFolderId)
    if (!selectedFolder) return null

return (
      <FolderView
        folder={selectedFolder}
        onBack={handleBackToFolders}
        onNoteClick={handleNoteClick}
        onCreateNote={handleCreateNote}
      />
    )
  }

return (
    <div className="h-full w-full bg-[#F2F2F7] flex flex-col">
      {/* Header */}
      <div className="flex items-center justify-between px-4 pt-14 pb-2">
        <h1 className="text-3xl font-bold">Folders</h1>
        <button className="text-[#FF9500] font-medium" onClick={() => setIsEditing(!isEditing)}>
          {isEditing ? "Done" : "Edit"}
        </button>
      </div>

{/* Content */}
      <div className="flex-1 overflow-auto px-4 pb-4">
        {/* iCloud Section */}
        <div className="bg-white rounded-xl mb-4 overflow-hidden">
          <div
            className="flex items-center justify-between p-3 border-b"
            onClick={() => setIsICloudExpanded(!isICloudExpanded)}
          >
            <span className="font-semibold">iCloud</span>
            {isICloudExpanded ? (
              <ChevronDown className="h-5 w-5 text-[#FF9500]" />
            ) : (
              <ChevronRight className="h-5 w-5 text-[#FF9500]" />
            )}
          </div>

<AnimatePresence>
            {isICloudExpanded && (
              <motion.div
                initial={{ height: 0 }}
                animate={{ height: "auto" }}
                exit={{ height: 0 }}
                transition={{ duration: 0.2 }}
                className="overflow-hidden"
              >
                {folders.map((folder) => (
                  <div
                    key={folder.id}
                    className="flex items-center justify-between p-3 border-b last:border-b-0 cursor-pointer"
                    onClick={() => !isEditing && handleFolderClick(folder.id)}
                  >
                    <div className="flex items-center gap-3">
                      {isEditing && (
                        <button
                          className="text-red-500 hover:text-red-700"
                          onClick={(e) => {
                            e.stopPropagation()
                            handleDeleteFolder(folder.id)
                          }}
                        >
                          <Trash2 className="h-5 w-5" />
                        </button>
                      )}
                      {folder.icon === "folder" ? (
                        <FolderIcon className="h-5 w-5 text-[#FF9500]" />
                      ) : (
                        <Settings2 className="h-5 w-5 text-[#FF9500]" />
                      )}
                      <span>{folder.name}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <span className="text-gray-500">{folder.notes.length}</span>
                      <ChevronRight className="h-5 w-5 text-gray-300" />
                    </div>
                  </div>
                ))}
              </motion.div>
            )}
          </AnimatePresence>
        </div>

{/* Tags Section */}
        <div className="bg-white rounded-xl overflow-hidden">
          <div
            className="flex items-center justify-between p-3 border-b"
            onClick={() => setIsTagsExpanded(!isTagsExpanded)}
          >
            <span className="font-semibold">Tags</span>
            {isTagsExpanded ? (
              <ChevronDown className="h-5 w-5 text-[#FF9500]" />
            ) : (
              <ChevronRight className="h-5 w-5 text-[#FF9500]" />
            )}
          </div>

<AnimatePresence>
            {isTagsExpanded && (
              <motion.div
                initial={{ height: 0 }}
                animate={{ height: "auto" }}
                exit={{ height: 0 }}
                transition={{ duration: 0.2 }}
                className="p-3"
              >
                <div className="flex gap-2 flex-wrap">
                  <span className="px-3 py-1 bg-gray-100 rounded-full text-sm">All Tags</span>
                  <span className="px-3 py-1 bg-gray-100 rounded-full text-sm">#home</span>
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </div>
      </div>

{/* New Folder Dialog */}
      {isNewFolderDialogOpen && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
          <div className="bg-white rounded-xl w-[300px] max-w-[80%] overflow-hidden">
            <div className="p-4 border-b">
              <h3 className="text-lg font-semibold text-center">New Folder</h3>
            </div>
            <div className="p-4">
              <input
                type="text"
                className="w-full border rounded-lg p-2 mb-4 focus:outline-none focus:ring-2 focus:ring-[#FF9500]"
                placeholder="Folder Name"
                value={newFolderName}
                onChange={(e) => setNewFolderName(e.target.value)}
              />
              <div className="flex justify-end gap-2">
                <button
                  className="px-4 py-2 text-[#FF9500] hover:bg-[#FF9500]/20"
                  onClick={() => setIsNewFolderDialogOpen(false)}
                >
                  Cancel
                </button>
                <button
                  className="px-4 py-2 bg-[#FF9500] text-white rounded-lg hover:bg-[#FF9500]/90"
                  onClick={handleCreateFolder}
                >
                  Create
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

{/* Bottom Toolbar */}
      <div className="flex items-center justify-between p-4 border-t bg-[#F2F2F7]">
        <button className="text-[#FF9500] hover:text-[#FF9500]/80" onClick={() => setIsNewFolderDialogOpen(true)}>
          <FolderIcon className="h-6 w-6" />
        </button>

<button className="text-[#FF9500] hover:text-[#FF9500]/80" onClick={handleCreateNote}>
          <PenSquare className="h-6 w-6" />
        </button>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/notes/folder-view.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { ArrowLeft, PenSquare, Search, Trash2 } from "lucide-react"
import type { Folder, Note } from "./notes-app"

interface FolderViewProps {
  folder: Folder
  onBack: () => void
  onNoteClick: (note: Note) => void
  onCreateNote: () => void
  onDeleteNote: (note: Note) => void
}

export function FolderView({ folder, onBack, onNoteClick, onCreateNote, onDeleteNote }: FolderViewProps) {
  const [isEditing, setIsEditing] = useState(false)
  const [searchTerm, setSearchTerm] = useState("")

const filteredNotes = folder.notes.filter(
    (note) =>
      note.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      note.content.toLowerCase().includes(searchTerm.toLowerCase()),
  )

return (
    <div className="h-full w-full bg-[#F2F2F7] flex flex-col">
      {/* Header */}
      <div className="flex items-center justify-between px-4 pt-14 pb-2">
        <div className="flex items-center gap-2">
          <button onClick={onBack}>
            <ArrowLeft className="h-5 w-5 text-[#FF9500]" />
          </button>
          <h1 className="text-2xl font-bold">{folder.name}</h1>
        </div>
        <button className="text-[#FF9500] font-medium" onClick={() => setIsEditing(!isEditing)}>
          {isEditing ? "Done" : "Edit"}
        </button>
      </div>

{/* Search */}
      <div className="px-4 py-2">
        <div className="bg-[#E5E5EA] rounded-lg flex items-center px-3 py-2">
          <Search className="h-4 w-4 text-gray-500 mr-2" />
          <input
            type="text"
            placeholder="Search"
            className="bg-transparent w-full outline-none text-sm"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>
      </div>

{/* Notes List */}
      <div className="flex-1 overflow-auto px-4 pb-4">
        {filteredNotes.length === 0 ? (
          <div className="flex flex-col items-center justify-center h-full text-gray-500">
            <p>No Notes</p>
          </div>
        ) : (
          <div className="bg-white rounded-xl overflow-hidden">
            {filteredNotes.map((note, index) => (
              <div
                key={note.id}
                className={`p-3 ${index !== filteredNotes.length - 1 ? "border-b" : ""}`}
                onClick={() => !isEditing && onNoteClick(note)}
              >
                <div className="flex items-center gap-2">
                  {isEditing && (
                    <button className="text-red-500" onClick={() => onDeleteNote(note)}>
                      <Trash2 className="h-5 w-5" />
                    </button>
                  )}
                  <div>
                    <h3 className="font-semibold">{note.title}</h3>
                    <p className="text-sm text-gray-500 line-clamp-1">
                      {new Date(note.updatedAt).toLocaleDateString()} • {note.content.substring(0, 30)}
                      {note.content.length > 30 ? "..." : ""}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

{/* Bottom Toolbar */}
      <div className="flex items-center justify-end p-4 border-t bg-[#F2F2F7]">
        <button className="text-[#FF9500]" onClick={onCreateNote}>
          <PenSquare className="h-6 w-6" />
        </button>
      </div>
    </div>
  )
}

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

import type React from "react"

import { useEffect, useRef } from "react"
import { useAppState } from "@/lib/app-state"

interface HomeIndicatorProps {
  children: React.ReactNode
}

export function HomeIndicator({ children }: HomeIndicatorProps) {
  const { closeApp } = useAppState()
  const containerRef = useRef<HTMLDivElement>(null)

// Handle swipe up gesture
  useEffect(() => {
    let touchStartY = 0

const handleTouchStart = (e: TouchEvent) => {
      touchStartY = e.touches[0].clientY
    }

const handleTouchMove = (e: TouchEvent) => {
      const touchY = e.touches[0].clientY
      const diff = touchStartY - touchY

// If swiped up more than 100px, go home
      if (diff > 100) {
        closeApp()
      }
    }

const element = containerRef.current
    if (element) {
      element.addEventListener("touchstart", handleTouchStart)
      element.addEventListener("touchmove", handleTouchMove)
    }

return () => {
      if (element) {
        element.removeEventListener("touchstart", handleTouchStart)
        element.removeEventListener("touchmove", handleTouchMove)
      }
    }
  }, [closeApp])

return (
    <div ref={containerRef} className="relative h-full w-full overflow-hidden">
      {children}

{/* Home Indicator */}
      <div
        className="absolute bottom-2 left-1/2 transform -translate-x-1/2 w-[134px] h-[5px] bg-black rounded-full z-50 opacity-30 cursor-pointer"
        onClick={closeApp}
      />
    </div>
  )
}

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

import { useCallback, useEffect, useRef, useState, memo } from "react"
import { FlipVertical2Icon as FlipCamera2, RotateCcw, ArrowLeft } from "lucide-react"
import { cn } from "@/lib/utils"
import { useAppState } from "@/lib/app-state"

// Custom hook for camera management
function useCameraStream(isFrontCamera: boolean) {
  const [stream, setStream] = useState<MediaStream | null>(null)
  const [error, setError] = useState<Error | null>(null)
  const streamRef = useRef<MediaStream | null>(null)

// Function to get camera stream
  const getStream = useCallback(async () => {
    try {
      // Stop any existing stream
      if (streamRef.current) {
        streamRef.current.getTracks().forEach((track) => track.stop())
      }

// Request new stream
      const newStream = await navigator.mediaDevices.getUserMedia({
        video: {
          facingMode: isFrontCamera ? "user" : "environment",
        },
        audio: false,
      })

// Store stream in ref and state
      streamRef.current = newStream
      setStream(newStream)
      setError(null)
    } catch (err) {
      console.error("Camera error:", err)
      setError(err instanceof Error ? err : new Error(String(err)))
      setStream(null)
    }
  }, [isFrontCamera])

// Initialize camera on mount and when camera direction changes
  useEffect(() => {
    getStream()

// Cleanup on unmount
    return () => {
      if (streamRef.current) {
        streamRef.current.getTracks().forEach((track) => track.stop())
        streamRef.current = null
      }
    }
  }, [getStream])

return { stream, error }
}

// Memoized camera controls component
const CameraControls = memo(
  ({
    onCapture,
    onFlip,
    lastPhoto,
    onPhotoClick,
  }: {
    onCapture: () => void
    onFlip: () => void
    lastPhoto: string | null
    onPhotoClick: () => void
  }) => {
    const modes = ["CINEMATIC", "VIDEO", "PHOTO", "PORTRAIT", "PANO"] as const
    const [mode, setMode] = useState<(typeof modes)[number]>("PHOTO")

return (
      <div className="absolute bottom-0 left-0 right-0 pb-8 bg-gradient-to-t from-black/80 to-transparent">
        {/* Mode Selection */}
        <div className="flex justify-center gap-6 mb-8">
          {modes.map((m) => (
            <button
              key={m}
              onClick={() => setMode(m)}
              className={cn("text-sm font-medium", mode === m ? "text-yellow-500" : "text-white/80")}
            >
              {m}
            </button>
          ))}
        </div>

{/* Camera Controls */}
        <div className="flex items-center justify-between px-8">
          {/* Last Photo Thumbnail */}
          <div className="w-12 h-12 rounded-lg overflow-hidden bg-black/40 cursor-pointer" onClick={onPhotoClick}>
            {lastPhoto ? (
              <img
                src={lastPhoto || "/placeholder.svg"}
                alt="Last captured photo"
                className="w-full h-full object-cover"
              />
            ) : null}
          </div>

{/* Shutter Button */}
          <button onClick={onCapture} className="w-20 h-20 rounded-full border-4 border-white p-1">
            <div className="w-full h-full rounded-full bg-white" />
          </button>

{/* Camera Flip */}
          <button onClick={onFlip} className="w-12 h-12 rounded-full bg-black/40 flex items-center justify-center">
            <RotateCcw className="h-6 w-6 text-white" />
          </button>
        </div>
      </div>
    )
  },
)

CameraControls.displayName = "CameraControls"

// Memoized zoom controls component
const ZoomControls = memo(
  ({
    zoom,
    setZoom,
  }: {
    zoom: string
    setZoom: (zoom: string) => void
  }) => {
    const zoomLevels = [".5", "1", "2"]

return (
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 flex gap-2 bg-black/40 rounded-full px-2 py-1">
        {zoomLevels.map((level) => (
          <button
            key={level}
            onClick={() => setZoom(level)}
            className={cn(
              "px-3 py-1 rounded-full text-sm font-medium",
              zoom === level ? "bg-yellow-500/20 text-yellow-500" : "text-white",
            )}
          >
            {level}x
          </button>
        ))}
      </div>
    )
  },
)

ZoomControls.displayName = "ZoomControls"

// Main Camera component
export function Camera() {
  const videoRef = useRef<HTMLVideoElement>(null)
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const [isFrontCamera, setIsFrontCamera] = useState(false)
  const [zoom, setZoom] = useState("1")
  const [lastPhoto, setLastPhoto] = useState<string | null>(null)
  const [isCapturing, setIsCapturing] = useState(false)
  const { closeApp, openApp } = useAppState()

// Use custom hook for camera stream
  const { stream, error } = useCameraStream(isFrontCamera)

// Set video source when stream changes
  useEffect(() => {
    if (videoRef.current && stream) {
      videoRef.current.srcObject = stream
    }
  }, [stream])

// Load the last photo from localStorage on mount
  useEffect(() => {
    const storedPhotos = localStorage.getItem("photos")
    if (storedPhotos) {
      const photos = JSON.parse(storedPhotos)
      if (photos.length > 0) {
        setLastPhoto(photos[0].url)
      }
    }
  }, [])

// Memoized handlers
  const handleFlipCamera = useCallback(() => {
    setIsFrontCamera((prev) => !prev)
  }, [])

const capturePhoto = useCallback(async () => {
    setIsCapturing(true)
    if (videoRef.current && canvasRef.current) {
      const video = videoRef.current
      const canvas = canvasRef.current

// Set canvas dimensions to match video
      canvas.width = video.videoWidth
      canvas.height = video.videoHeight

// Draw video frame to canvas
      const context = canvas.getContext("2d")
      if (context) {
        context.drawImage(video, 0, 0, canvas.width, canvas.height)
        const photoUrl = canvas.toDataURL("image/jpeg")
        setLastPhoto(photoUrl)

// Save to localStorage
        const storedPhotos = localStorage.getItem("photos")
        const photos = storedPhotos ? JSON.parse(storedPhotos) : []
        const newPhoto = {
          id: Date.now().toString(),
          url: photoUrl,
          timestamp: Date.now(),
        }
        photos.unshift(newPhoto)
        localStorage.setItem("photos", JSON.stringify(photos))
      }
    }
    setIsCapturing(false)
  }, [])

const handleOpenPhotos = useCallback(() => {
    // Close camera and open photos app
    closeApp()
    openApp("photos")
  }, [closeApp, openApp])

return (
    <div className="relative h-full w-full bg-black overflow-hidden">
      {/* Camera Preview */}
      <video ref={videoRef} autoPlay playsInline muted className="h-full w-full object-cover" />

{/* Hidden canvas for capturing photos */}
      <canvas ref={canvasRef} className="hidden" />

{/* Error message */}
      {error && (
        <div className="absolute inset-0 flex items-center justify-center bg-black/80">
          <div className="text-white text-center p-4">
            <p className="text-red-500 mb-2">Camera error</p>
            <p>{error.message}</p>
          </div>
        </div>
      )}

{/* Top Controls */}
      <div className="absolute top-2 left-0 right-0 flex justify-between px-4 z-10">
        <button onClick={closeApp} className="rounded-full bg-black/40 p-2">
          <ArrowLeft className="h-6 w-6 text-white" />
        </button>

{/* Zoom Controls */}
      <ZoomControls zoom={zoom} setZoom={setZoom} />

{/* Camera Controls */}
      <CameraControls
        onCapture={capturePhoto}
        onFlip={handleFlipCamera}
        lastPhoto={lastPhoto}
        onPhotoClick={handleOpenPhotos}
      />

{/* Added loading indicator */}
      {isCapturing && (
        <div className="absolute inset-0 flex items-center justify-center bg-black/50">
          <div className="text-white text-center p-4">
            <p>Capturing...</p>
          </div>
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/photos/photo-detail.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { ArrowLeft, Share2, Heart, Trash2, MoreHorizontal } from "lucide-react"

interface PhotoDetailProps {
  photo: {
    id: string
    url: string
    timestamp: number
  }
  onBack: () => void
  onDelete: (id: string) => void
}

export function PhotoDetail({ photo, onBack, onDelete }: PhotoDetailProps) {
  const [showControls, setShowControls] = useState(true)
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)

const formatDate = (timestamp: number) => {
    return new Date(timestamp).toLocaleDateString("en-US", {
      month: "long",
      day: "numeric",
      year: "numeric",
      hour: "numeric",
      minute: "numeric",
    })
  }

const handleImageClick = () => {
    setShowControls(!showControls)
  }

return (
    <div className="h-full w-full bg-black flex flex-col">
      {/* Header */}
      {showControls && (
        <div className="absolute top-0 left-0 right-0 z-10 flex items-center justify-between px-4 py-3 bg-gradient-to-b from-black/80 to-transparent">
          <button onClick={onBack}>
            <ArrowLeft className="h-6 w-6 text-white" />
          </button>
          <div className="flex gap-4">
            <button>
              <Share2 className="h-6 w-6 text-white" />
            </button>
            <button>
              <Heart className="h-6 w-6 text-white" />
            </button>
            <button onClick={() => setIsDeleteDialogOpen(true)}>
              <Trash2 className="h-6 w-6 text-white" />
            </button>
            <button>
              <MoreHorizontal className="h-6 w-6 text-white" />
            </button>
          </div>
        </div>
      )}

{/* Photo */}
      <div className="flex-1 flex items-center justify-center" onClick={handleImageClick}>
        <img
          src={photo.url || "/placeholder.svg"}
          alt={`Photo from ${formatDate(photo.timestamp)}`}
          className="max-h-full max-w-full object-contain"
        />
      </div>

{/* Footer */}
      {showControls && (
        <div className="absolute bottom-0 left-0 right-0 z-10 p-4 bg-gradient-to-t from-black/80 to-transparent">
          <p className="text-white text-sm text-center">{formatDate(photo.timestamp)}</p>
        </div>
      )}

{/* Delete Confirmation Dialog */}
      {isDeleteDialogOpen && (
        <div className="absolute inset-0 bg-black/80 flex items-center justify-center z-50">
          <div className="bg-gray-800 rounded-xl w-[80%] overflow-hidden">
            <div className="p-4 border-b border-gray-700">
              <h3 className="text-lg font-semibold text-center text-white">Delete Photo</h3>
            </div>
            <div className="p-4">
              <p className="text-center mb-4 text-white">Are you sure you want to delete this photo?</p>
              <div className="flex justify-end gap-2">
                <button className="px-4 py-2 text-blue-400" onClick={() => setIsDeleteDialogOpen(false)}>
                  Cancel
                </button>
                <button
                  className="px-4 py-2 bg-red-500 text-white rounded-lg"
                  onClick={() => {
                    onDelete(photo.id)
                    setIsDeleteDialogOpen(false)
                  }}
                >
                  Delete
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

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

import { useEffect, useState } from "react"
import { MoreHorizontal, ImageIcon, Heart, FolderIcon, Search } from "lucide-react"
import { motion } from "framer-motion"
import { cn } from "@/lib/utils"
import { PhotoDetail } from "./photos/photo-detail"

interface Photo {
  id: string
  url: string
  timestamp: number
}

export function Photos() {
  const [photos, setPhotos] = useState<Photo[]>([])
  const [selectedFilter, setSelectedFilter] = useState<"All Photos" | "Days" | "Months" | "Years">("All Photos")
  const [selectedTab, setSelectedTab] = useState<"Library" | "For You" | "Albums" | "Search">("Library")
  const [isSelecting, setIsSelecting] = useState(false)
  const [selectedPhotos, setSelectedPhotos] = useState<Set<string>>(new Set())
  const [selectedPhoto, setSelectedPhoto] = useState<Photo | null>(null)

// Load photos from localStorage on mount
  useEffect(() => {
    const storedPhotos = localStorage.getItem("photos")
    if (storedPhotos) {
      setPhotos(JSON.parse(storedPhotos))
    }
  }, [])

// Save photos to localStorage when they change
  useEffect(() => {
    localStorage.setItem("photos", JSON.stringify(photos))
  }, [photos])

const deleteSelectedPhotos = () => {
    const newPhotos = photos.filter((photo) => !selectedPhotos.has(photo.id))
    setPhotos(newPhotos)
    setSelectedPhotos(new Set())
    setIsSelecting(false)
  }

const deletePhoto = (id: string) => {
    const newPhotos = photos.filter((photo) => photo.id !== id)
    setPhotos(newPhotos)
    setSelectedPhoto(null)
  }

const togglePhotoSelection = (id: string) => {
    const newSelected = new Set(selectedPhotos)
    if (newSelected.has(id)) {
      newSelected.delete(id)
    } else {
      newSelected.add(id)
    }
    setSelectedPhotos(newSelected)
  }

const handlePhotoClick = (photo: Photo) => {
    if (isSelecting) {
      togglePhotoSelection(photo.id)
    } else {
      setSelectedPhoto(photo)
    }
  }

const formatDate = (timestamp: number) => {
    const date = new Date(timestamp)
    return date.toLocaleDateString("en-US", {
      month: "short",
      day: "numeric",
      year: "numeric",
    })
  }

const filters = ["Years", "Months", "Days", "All Photos"] as const
  const tabs = [
    { id: "Library", icon: ImageIcon },
    { id: "For You", icon: Heart },
    { id: "Albums", icon: FolderIcon },
    { id: "Search", icon: Search },
  ] as const

// If a photo is selected, show the photo detail view
  if (selectedPhoto) {
    return <PhotoDetail photo={selectedPhoto} onBack={() => setSelectedPhoto(null)} onDelete={deletePhoto} />
  }

return (
    <div className="h-full w-full bg-white flex flex-col">
      {/* Header */}
      <div className="flex items-center justify-between px-4 py-3 mt-12">
        <h1 className="text-xl font-semibold">
          {isSelecting ? `${selectedPhotos.size} Selected` : formatDate(Date.now())}
        </h1>
        <div className="flex gap-4">
          <button onClick={() => setIsSelecting(!isSelecting)} className="text-blue-500 font-medium">
            {isSelecting ? "Cancel" : "Select"}
          </button>
          {!isSelecting && (
            <button className="text-blue-500">
              <MoreHorizontal className="h-6 w-6" />
            </button>
          )}
        </div>
      </div>

{/* Photo Grid */}
      <div className="flex-1 overflow-auto px-1 pt-2">
        <div className="grid grid-cols-3 gap-1">
          {photos.map((photo) => (
            <motion.div
              key={photo.id}
              className={cn("aspect-square relative overflow-hidden", "cursor-pointer")}
              onClick={() => handlePhotoClick(photo)}
              whileTap={{ scale: 0.95 }}
            >
              <img
                src={photo.url || "/placeholder.svg"}
                alt={`Photo from ${formatDate(photo.timestamp)}`}
                className="w-full h-full object-cover"
              />
              {isSelecting && (
                <div className={cn("absolute inset-0 bg-black/20", selectedPhotos.has(photo.id) && "bg-blue-500/20")}>
                  <div
                    className={cn(
                      "absolute top-2 right-2 w-5 h-5 rounded-full border-2",
                      selectedPhotos.has(photo.id) ? "bg-blue-500 border-blue-500" : "border-white",
                    )}
                  />
                </div>
              )}
            </motion.div>
          ))}
        </div>
      </div>

{/* Filters */}
      <div className="px-4 py-2 flex justify-between border-t">
        {filters.map((filter) => (
          <button
            key={filter}
            onClick={() => setSelectedFilter(filter)}
            className={cn(
              "px-4 py-1 rounded-full text-sm",
              selectedFilter === filter ? "bg-gray-200 font-medium" : "text-gray-500",
            )}
          >
            {filter}
          </button>
        ))}
      </div>

{/* Bottom Navigation */}
      <div className="flex justify-around items-center py-2 border-t bg-white">
        {tabs.map(({ id, icon: Icon }) => (
          <button key={id} onClick={() => setSelectedTab(id)} className="flex flex-col items-center gap-1">
            <Icon className={cn("h-6 w-6", selectedTab === id ? "text-blue-500" : "text-gray-400")} />
            <span className={cn("text-xs", selectedTab === id ? "text-blue-500" : "text-gray-400")}>{id}</span>
          </button>
        ))}
      </div>

{/* Delete Button */}
      {isSelecting && selectedPhotos.size > 0 && (
        <div className="absolute bottom-20 left-0 right-0 flex justify-center">
          <button onClick={deleteSelectedPhotos} className="bg-red-500 text-white px-6 py-2 rounded-full">
            Delete {selectedPhotos.size} Photo{selectedPhotos.size !== 1 ? "s" : ""}
          </button>
        </div>
      )}
    </div>
  )
}

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

import { useState } from "react"
import { motion, AnimatePresence, useMotionValue, useTransform } from "framer-motion"
import { Search } from "lucide-react"
import { cn } from "@/lib/utils"
import { AppIcon } from "./app-icon"

interface AppCategory {
  id: string
  name: string
  apps: Array<{
    id: string
    name: string
    color: string
    icon: string
  }>
}

// App categories based on functionality
const appCategories: AppCategory[] = [
  {
    id: "lifestyle",
    name: "Lifestyle",
    apps: [
      { id: "health", name: "Health", color: "bg-gradient-to-br from-pink-400 to-red-500", icon: "health" },
      { id: "reminders", name: "Reminders", color: "bg-white", icon: "reminders" },
      { id: "clock", name: "Clock", color: "bg-black", icon: "clock" },
    ],
  },
  {
    id: "utilities",
    name: "Utilities",
    apps: [
      { id: "settings", name: "Settings", color: "bg-gray-200", icon: "settings" },
      { id: "wallet", name: "Wallet", color: "bg-gradient-to-b from-yellow-400 to-red-500", icon: "wallet" },
      { id: "maps", name: "Maps", color: "", icon: "maps" },
    ],
  },
  {
    id: "information",
    name: "Information",
    apps: [
      { id: "calendar", name: "Calendar", color: "", icon: "calendar" },
      { id: "news", name: "News", color: "bg-gradient-to-br from-red-500 to-pink-500", icon: "news" },
      { id: "notes", name: "Notes", color: "bg-yellow-100", icon: "notes" },
    ],
  },
  {
    id: "media",
    name: "Media",
    apps: [
      { id: "podcasts", name: "Podcasts", color: "", icon: "podcasts" },
      { id: "tv", name: "TV", color: "", icon: "tv" },
      { id: "music", name: "Music", color: "", icon: "music" },
    ],
  },
  {
    id: "creativity",
    name: "Creativity",
    apps: [
      { id: "camera", name: "Camera", color: "bg-gray-800", icon: "camera" },
      {
        id: "photos",
        name: "Photos",
        color: "bg-gradient-to-br from-pink-400 via-purple-400 to-blue-400",
        icon: "photos",
      },
    ],
  },
  {
    id: "connectivity",
    name: "Connectivity",
    apps: [
      { id: "phone", name: "Phone", color: "bg-green-500", icon: "phone" },
      { id: "messages", name: "Messages", color: "", icon: "messages" },
      { id: "facetime", name: "FaceTime", color: "", icon: "facetime" },
      { id: "mail", name: "Mail", color: "", icon: "mail" },
    ],
  },
]

interface AppLibraryProps {
  isVisible: boolean
  onClose: () => void
}

export function AppLibrary({ isVisible, onClose }: AppLibraryProps) {
  const [searchQuery, setSearchQuery] = useState("")
  const dragX = useMotionValue(0)

// Transform values for animation effects
  const opacity = useTransform(dragX, [0, 100], [1, 0.8], {
    clamp: true,
  })
  const scale = useTransform(dragX, [0, 100], [1, 0.98], {
    clamp: true,
  })

// Filter apps based on search query
  const filteredCategories = searchQuery
    ? appCategories
        .map((category) => ({
          ...category,
          apps: category.apps.filter((app) => app.name.toLowerCase().includes(searchQuery.toLowerCase())),
        }))
        .filter((category) => category.apps.length > 0)
    : appCategories

return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          initial={{ x: "100%" }}
          animate={{ x: 0 }}
          exit={{ x: "100%" }}
          transition={{
            type: "spring",
            damping: 30,
            stiffness: 300,
            mass: 1,
          }}
          className="absolute inset-0 bg-black/10 backdrop-blur-xl z-50 select-none"
          drag="x"
          dragConstraints={{ left: 0, right: 0 }}
          dragElastic={0.1}
          dragTransition={{
            bounceStiffness: 600,
            bounceDamping: 30,
          }}
          style={{
            x: dragX,
            opacity: isNaN(opacity.get()) ? 1 : opacity.get(),
            scale: scale.get(),
          }}
          onDragEnd={(event, info) => {
            // Close the app library if swiped right (positive x offset)
            if (info.offset.x > 50 || info.velocity.x > 500) {
              onClose()
            }
            // Reset drag position
            dragX.set(0)
          }}
        >
          {/* Search Bar */}
          <div className="px-4 pt-14 pb-4">
            <div className="relative">
              <input
                type="text"
                placeholder="App Library"
                className="w-full h-9 bg-white/10 backdrop-blur-xl rounded-lg pl-9 pr-4 text-white placeholder-white/70 outline-none select-none"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
              <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-5 w-5 text-white/70" />
            </div>
          </div>

{/* App Categories Grid */}
          <div className="px-4 pb-4 overflow-auto h-[calc(100%-6rem)]">
            <div className="grid grid-cols-2 gap-4">
              {filteredCategories.map((category) => (
                <div key={category.id} className="space-y-1">
                  <div className="relative aspect-square bg-white/10 backdrop-blur-xl rounded-2xl p-2 overflow-hidden">
                    <div className="grid grid-cols-2 gap-2 h-full">
                      {category.apps.map((app, index) => (
                        <div
                          key={app.id}
                          className={cn(
                            "relative",
                            index === 3 && category.apps.length > 4 && "grid grid-cols-3 gap-0.5",
                          )}
                        >
                          <AppIcon id={app.id} name={app.name} color={app.color} icon={app.icon} size="small" />
                          {index === 3 &&
                            category.apps.slice(4).map((extraApp) => (
                              <div
                                key={extraApp.id}
                                className="aspect-square rounded-lg bg-gray-200 text-[8px] flex items-center justify-center"
                              >
                                {extraApp.name[0]}
                              </div>
                            ))}
                        </div>
                      ))}
                    </div>
                  </div>
                  <p className="text-[11px] text-white/90 text-center font-medium select-none">{category.name}</p>
                </div>
              ))}
            </div>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  )
}

[V0_FILE]typescriptreact:file="components/status-bar.tsx" isQuickEdit="true" isMerged="true"
import { Battery, Signal, Wifi } from "lucide-react"
import { formatTime } from "@/lib/utils"

interface StatusBarProps {
  time: Date
  dark?: boolean
}

export function StatusBar({ time, dark = false }: StatusBarProps) {
  return (
    <div
      className={`flex justify-between items-center px-6 pt-3 pb-1 text-sm font-medium select-none ${dark ? "text-white" : "text-black"}`}
    >
      <div>{formatTime(time, false)}</div>
      <div className="flex items-center gap-1.5">
        <Signal className="h-3.5 w-3.5" />
        <Wifi className="h-3.5 w-3.5" />
        <Battery className="h-4 w-4" />
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/widget.tsx" isQuickEdit="true" isMerged="true"
import type { ReactNode } from "react"

interface WidgetProps {
  title: string
  content: ReactNode
  className?: string
}

export function Widget({ title, content, className = "" }: WidgetProps) {
  return (
    <div className="flex flex-col select-none">
      <div className={`rounded-2xl p-4 backdrop-blur-xl bg-black/10 ${className}`}>{content}</div>
      <div className="text-[13px] text-white/80 mt-1 text-center">{title}</div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="lib/messages-state.ts" isQuickEdit="true" isMerged="true"
"use client"

import { create } from "zustand"
import type { Message, Conversation } from "./types"

interface MessagesState {
  conversations: Conversation[]
  activeConversationId: string | null
  addMessage: (conversationId: string, message: Message) => void
  setActiveConversation: (id: string | null) => void
  markAsRead: (conversationId: string) => void
  addReaction: (conversationId: string, messageId: string, reaction: string) => void
}

// Initial conversation with Guillermo
const guillermoConversation: Conversation = {
  id: "guillermo",
  contact: {
    id: "guillermo",
    name: "Guillermo Rauch",
    avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-2ZG4j9TPtBOJ8H70dv7KGCcBrQsIoj.png",
    isOnline: true,
  },
  messages: [
    {
      id: "1",
      content: "Hey! I'd love to learn more about Vercel and v0. Can you tell me about them?",
      sender: "user",
      timestamp: Date.now() - 1000 * 60 * 10,
      status: "read",
    },
    {
      id: "2",
      content:
        "Hey there! 👋 Vercel is all about making deployment and development seamless. We're the platform for frontend developers, putting the developer experience first. And v0 is our new AI-powered coding assistant that helps you build faster with context-aware suggestions. What specific aspects are you curious about? 🚀",
      sender: "assistant",
      timestamp: Date.now() - 1000 * 60 * 8,
      status: "delivered",
    },
  ],
  lastMessageAt: Date.now() - 1000 * 60 * 8,
  unreadCount: 0,
}

export const useMessagesStore = create<MessagesState>((set) => ({
  conversations: [guillermoConversation],
  activeConversationId: null,
  addMessage: (conversationId, message) =>
    set((state) => ({
      conversations: state.conversations.map((conv) =>
        conv.id === conversationId
          ? {
              ...conv,
              messages: [...conv.messages, message],
              lastMessageAt: message.timestamp,
              unreadCount: conv.unreadCount + (message.sender === "assistant" ? 1 : 0),
            }
          : conv,
      ),
    })),
  setActiveConversation: (id) => set({ activeConversationId: id }),
  markAsRead: (conversationId) =>
    set((state) => ({
      conversations: state.conversations.map((conv) =>
        conv.id === conversationId
          ? {
              ...conv,
              unreadCount: 0,
              messages: conv.messages.map((msg) => ({
                ...msg,
                status: msg.sender === "user" ? "read" : msg.status,
              })),
            }
          : conv,
      ),
    })),
  addReaction: (conversationId, messageId, reaction) =>
    set((state) => ({
      conversations: state.conversations.map((conv) =>
        conv.id === conversationId
          ? {
              ...conv,
              messages: conv.messages.map((msg) =>
                msg.id === messageId
                  ? {
                      ...msg,
                      reactions: [...(msg.reactions || []), reaction],
                    }
                  : msg,
              ),
            }
          : conv,
      ),
    })),
}))

[V0_FILE]typescriptreact:file="lib/ai-chat.ts" isQuickEdit="true" isMerged="true"
// Predefined responses about Vercel, Next.js and v0
const responses = [
  "Vercel is all about making deployment and development seamless! 🚀 We're focused on providing the best developer experience possible.",
  "v0 is our new AI-powered coding assistant. It's designed to help developers write better code faster, with a deep understanding of best practices and modern frameworks. 🤖",
  "Next.js 14 brings some amazing performance improvements and new features! The App Router is getting better every day. What specific features are you interested in? 💫",
  "One of the things I'm most excited about is how v0 understands your entire codebase context. It's like having a senior developer who knows every line of your code! 🎯",
  "We're seeing incredible adoption of Next.js in enterprises. The stability and performance improvements in recent versions have been game-changing. 🌟",
  "The AI SDK we released makes it super easy to add AI capabilities to your apps. Have you tried it out? 🤔",
  "Edge Functions and Edge Config have been game-changers for many of our users. The ability to run code closer to your users is powerful! ⚡️",
]

export async function generateChatResponse(message: string) {
  // Simulate API delay
  await new Promise((resolve) => setTimeout(resolve, 1000))

// Return a random response
  return responses[Math.floor(Math.random() * responses.length)]
}

[V0_FILE]typescriptreact:file="components/messages/conversation-list.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { Search, Edit } from "lucide-react"
import { useMessagesStore } from "@/lib/messages-state"
import { formatRelativeTime } from "@/lib/utils"

export function ConversationList() {
  const { conversations, setActiveConversation } = useMessagesStore()

return (
    <div className="h-full flex flex-col bg-gray-50">
      {/* Header */}
      <div className="px-4 py-3 flex items-center justify-between border-b mt-12">
        <button className="text-blue-500 font-medium">Edit</button>
        <h1 className="text-xl font-bold">Messages</h1>
        <button className="text-blue-500">
          <Edit className="h-5 w-5" />
        </button>
      </div>

{/* Search */}
      <div className="p-4">
        <div className="flex items-center gap-2 bg-gray-200 rounded-full px-4 py-2">
          <Search className="h-4 w-4 text-gray-500" />
          <input type="text" placeholder="Search" className="bg-transparent w-full outline-none text-sm" />
        </div>
      </div>

{/* Conversations */}
      <div className="flex-1 overflow-auto">
        {conversations.map((conversation) => (
          <motion.div
            key={conversation.id}
            className="flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-gray-100"
            onClick={() => setActiveConversation(conversation.id)}
            whileTap={{ scale: 0.98 }}
          >
            {/* Avatar */}
            <div className="relative">
              <img
                src={conversation.contact.avatar || "/placeholder.svg"}
                alt={conversation.contact.name}
                className="w-12 h-12 rounded-full object-cover"
              />
              {conversation.contact.isOnline && (
                <div className="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white" />
              )}
            </div>

{/* Content */}
            <div className="flex-1 min-w-0">
              <div className="flex items-center justify-between">
                <h3 className="font-semibold truncate">{conversation.contact.name}</h3>
                <span className="text-xs text-gray-500">{formatRelativeTime(conversation.lastMessageAt)}</span>
              </div>
              <p className="text-sm text-gray-500 truncate">
                {conversation.messages[conversation.messages.length - 1]?.content}
              </p>
            </div>

{/* Unread count */}
            {conversation.unreadCount > 0 && (
              <div className="w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center">
                <span className="text-xs text-white">{conversation.unreadCount}</span>
              </div>
            )}
          </motion.div>
        ))}
      </div>
    </div>
  )
}

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

import { AnimatePresence, motion } from "framer-motion"
import { useMessagesStore } from "@/lib/messages-state"
import { ConversationList } from "./conversation-list"
import { ConversationView } from "./conversation-view"

export function MessagesApp() {
  const { activeConversationId } = useMessagesStore()

return (
    <div className="h-full w-full bg-white overflow-hidden">
      <AnimatePresence mode="wait">
        {activeConversationId ? (
          <motion.div
            key="conversation"
            initial={{ x: "100%" }}
            animate={{ x: 0 }}
            exit={{ x: "100%" }}
            transition={{ type: "spring", damping: 25, stiffness: 300 }}
            className="absolute inset-0"
          >
            <ConversationView />
          </motion.div>
        ) : (
          <motion.div
            key="list"
            initial={{ x: "-100%" }}
            animate={{ x: 0 }}
            exit={{ x: "-100%" }}
            transition={{ type: "spring", damping: 25, stiffness: 300 }}
            className="absolute inset-0"
          >
            <ConversationList />
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/messages/conversation-view.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { ArrowLeft, Video, ImageIcon, Mic, ChevronRight } from "lucide-react"
import { useMessagesStore } from "@/lib/messages-state"
import { generateChatResponse } from "@/lib/ai-chat"
import { formatTime } from "@/lib/utils"
import type { Message } from "@/lib/types"

export function ConversationView() {
  const { conversations, activeConversationId, setActiveConversation, addMessage, markAsRead } = useMessagesStore()
  const [inputValue, setInputValue] = useState("")
  const [isTyping, setIsTyping] = useState(false)
  const messagesEndRef = useRef<HTMLDivElement>(null)

// Get the active conversation
  const activeConversation = conversations.find((c) => c.id === activeConversationId)

// Scroll to bottom function
  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }

// Mark messages as read and scroll to bottom when conversation changes
  useEffect(() => {
    if (activeConversation) {
      scrollToBottom()
      // Only mark as read when the conversation ID changes
      if (activeConversation.unreadCount > 0) {
        markAsRead(activeConversation.id)
      }
    }
  }, [activeConversationId, activeConversation, activeConversation?.unreadCount, scrollToBottom, markAsRead]) // Only depend on the ID changing

// Handle sending a message
  const handleSend = async () => {
    if (!inputValue.trim() || !activeConversation) return

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

addMessage(activeConversation.id, userMessage)
    setInputValue("")
    setIsTyping(true)

try {
      const response = await generateChatResponse(inputValue)
      const assistantMessage: Message = {
        id: (Date.now() + 1).toString(),
        content: response,
        sender: "assistant",
        timestamp: Date.now(),
        status: "delivered",
      }
      addMessage(activeConversation.id, assistantMessage)
    } catch (error) {
      console.error("Failed to generate response:", error)
    } finally {
      setIsTyping(false)
    }
  }

// If no active conversation, render nothing but ensure hooks are still called
  if (!activeConversation) {
    return null
  }

return (
    <div className="h-full flex flex-col bg-gray-100">
      {/* Header */}
      <div className="px-4 py-3 flex items-center justify-between bg-gray-50 border-b mt-12">
        <button onClick={() => setActiveConversation(null)} className="text-blue-500">
          <ArrowLeft className="h-5 w-5" />
        </button>
        <div className="flex items-center gap-2">
          <img
            src={activeConversation.contact.avatar || "/placeholder.svg"}
            alt={activeConversation.contact.name}
            className="w-8 h-8 rounded-full object-cover"
          />
          <span className="font-semibold">{activeConversation.contact.name}</span>
        </div>
        <button className="text-blue-500">
          <Video className="h-5 w-5" />
        </button>
      </div>

{/* Messages */}
      <div className="flex-1 overflow-auto p-4 space-y-4">
        <AnimatePresence initial={false}>
          {activeConversation.messages.map((message) => (
            <motion.div
              key={message.id}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.8 }}
              className={`flex ${message.sender === "user" ? "justify-end" : "justify-start"}`}
            >
              <div
                className={`max-w-[70%] rounded-2xl px-4 py-2 ${
                  message.sender === "user" ? "bg-blue-500 text-white" : "bg-white"
                }`}
              >
                <p>{message.content}</p>
                <div className={`text-xs mt-1 ${message.sender === "user" ? "text-blue-100" : "text-gray-500"}`}>
                  {formatTime(new Date(message.timestamp))}
                  {message.sender === "user" && (
                    <span className="ml-1">
                      {message.status === "sent" && "✓"}
                      {message.status === "delivered" && "✓✓"}
                      {message.status === "read" && "✓✓✓"}
                    </span>
                  )}
                </div>
              </div>
            </motion.div>
          ))}
        </AnimatePresence>
        {isTyping && (
          <div className="flex justify-start">
            <div className="bg-gray-200 rounded-full px-4 py-2">
              <motion.div
                initial={{ scale: 1 }}
                animate={{ scale: [1, 1.2, 1] }}
                transition={{ duration: 1, repeat: Number.POSITIVE_INFINITY }}
                className="w-6 h-3 flex items-center gap-1"
              >
                <div className="w-1 h-1 bg-gray-500 rounded-full" />
                <div className="w-1 h-1 bg-gray-500 rounded-full" />
                <div className="w-1 h-1 bg-gray-500 rounded-full" />
              </motion.div>
            </div>
          </div>
        )}
        <div ref={messagesEndRef} />
      </div>

{/* Input */}
      <div className="p-4 bg-gray-50 border-t">
        <div className="flex items-center gap-2">
          <button className="text-gray-500">
            <ImageIcon className="h-6 w-6" />
          </button>
          <div className="flex-1 flex items-center bg-white rounded-full border px-4 py-2">
            <input
              type="text"
              value={inputValue}
              onChange={(e) => setInputValue(e.target.value)}
              onKeyPress={(e) => e.key === "Enter" && handleSend()}
              placeholder="iMessage"
              className="flex-1 outline-none text-sm"
            />
            {inputValue ? (
              <button onClick={handleSend} className="text-blue-500 ml-2">
                <ChevronRight className="h-5 w-5" />
              </button>
            ) : (
              <button className="text-gray-500 ml-2">
                <Mic className="h-5 w-5" />
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/safari/share-menu.tsx" isMerged="true"
"use client"

import { motion, AnimatePresence } from "framer-motion"
import { Copy, BookmarkPlus, Send, MessageCircle, Mail, Printer, QrCode } from "lucide-react"

interface ShareMenuProps {
  isVisible: boolean
  url: string
  onDismiss: () => void
}

export function ShareMenu({ isVisible, url, onDismiss }: ShareMenuProps) {
  const shareOptions = [
    { icon: MessageCircle, label: "Messages" },
    { icon: Mail, label: "Mail" },
    { icon: Copy, label: "Copy" },
    { icon: BookmarkPlus, label: "Add Bookmark" },
    { icon: Send, label: "AirDrop" },
    { icon: Printer, label: "Print" },
    { icon: QrCode, label: "QR Code" },
  ]

return (
    <AnimatePresence>
      {isVisible && (
        <>
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 bg-black/20 z-50"
            onClick={onDismiss}
          />
          <motion.div
            initial={{ y: "100%" }}
            animate={{ y: 0 }}
            exit={{ y: "100%" }}
            transition={{ type: "spring", damping: 25, stiffness: 200 }}
            className="absolute inset-x-0 bottom-0 bg-gray-100/80 backdrop-blur-xl rounded-t-xl p-4 z-50"
          >
            <div className="flex flex-col items-center">
              <div className="w-10 h-1 bg-gray-300 rounded-full mb-4" />
              <h2 className="text-lg font-semibold mb-4">Share</h2>
              <div className="grid grid-cols-4 gap-4 w-full mb-4">
                {shareOptions.map((option) => (
                  <button key={option.label} className="flex flex-col items-center gap-1" onClick={onDismiss}>
                    <div className="w-12 h-12 rounded-full bg-white flex items-center justify-center">
                      <option.icon className="h-6 w-6 text-blue-500" />
                    </div>
                    <span className="text-xs">{option.label}</span>
                  </button>
                ))}
              </div>
              <div className="w-full rounded-xl bg-white p-4 mb-4">
                <p className="text-sm truncate">{url}</p>
              </div>
              <button className="w-full py-3 text-red-500 font-medium" onClick={onDismiss}>
                Cancel
              </button>
            </div>
          </motion.div>
        </>
      )}
    </AnimatePresence>
  )
}

[V0_FILE]typescriptreact:file="components/safari/bookmarks-view.tsx" isMerged="true"
"use client"

import { motion, AnimatePresence } from "framer-motion"
import { BookOpen, Star, Clock, Square, FolderOpen } from "lucide-react"
import { useLocalStorage } from "@/lib/use-local-storage"

interface Bookmark {
  id: string
  title: string
  url: string
  favicon?: string
}

interface BookmarksViewProps {
  isVisible: boolean
  onSelect: (url: string) => void
  onDismiss: () => void
}

export function BookmarksView({ isVisible, onSelect, onDismiss }: BookmarksViewProps) {
  const [bookmarks] = useLocalStorage<Bookmark[]>("safari-bookmarks", [
    {
      id: "1",
      title: "Vercel",
      url: "https://vercel.com",
      favicon: "https://assets.vercel.com/image/upload/front/favicon/vercel/favicon.ico",
    },
    {
      id: "2",
      title: "Next.js",
      url: "https://nextjs.org",
      favicon: "https://nextjs.org/favicon.ico",
    },
  ])

const tabs = [
    { icon: BookOpen, label: "Bookmarks" },
    { icon: Star, label: "Favorites" },
    { icon: Clock, label: "History" },
    { icon: Square, label: "Shared" },
    { icon: FolderOpen, label: "Downloads" },
  ]

<div className="flex gap-4 mb-4 overflow-x-auto pb-2">
                {tabs.map((tab) => (
                  <button key={tab.label} className="flex flex-col items-center gap-1 min-w-[64px]">
                    <div className="w-12 h-12 rounded-full bg-white flex items-center justify-center">
                      <tab.icon className="h-6 w-6 text-blue-500" />
                    </div>
                    <span className="text-xs">{tab.label}</span>
                  </button>
                ))}
              </div>

<div className="flex-1 overflow-auto">
                {bookmarks.map((bookmark) => (
                  <button
                    key={bookmark.id}
                    className="flex items-center gap-3 w-full p-3 hover:bg-gray-200/50 rounded-lg"
                    onClick={() => onSelect(bookmark.url)}
                  >
                    {bookmark.favicon ? (
                      <img src={bookmark.favicon || "/placeholder.svg"} alt="" className="w-5 h-5" />
                    ) : (
                      <div className="w-5 h-5 bg-gray-200 rounded" />
                    )}
                    <div className="flex-1 text-left">
                      <div className="font-medium">{bookmark.title}</div>
                      <div className="text-sm text-gray-500 truncate">{bookmark.url}</div>
                    </div>
                  </button>
                ))}
              </div>
            </div>
          </motion.div>
        </>
      )}
    </AnimatePresence>
  )
}

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

import { RefreshCw } from "lucide-react"

interface SafariErrorProps {
  url: string
  onRetry: () => void
}

export function SafariError({ url, onRetry }: SafariErrorProps) {
  return (
    <div className="h-full w-full flex flex-col items-center justify-center p-6 bg-white">
      <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
        <RefreshCw className="h-8 w-8 text-gray-400" />
      </div>
      <h2 className="text-xl font-semibold mb-2">Cannot Open Page</h2>
      <p className="text-gray-500 text-center mb-4">Safari cannot open the page because the server cannot be found.</p>
      <p className="text-sm text-gray-400 text-center mb-6 max-w-xs">{url}</p>
      <button onClick={onRetry} className="px-4 py-2 bg-blue-500 text-white rounded-lg">
        Try Again
      </button>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/safari/mock-websites/vercel-website.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { Menu, X, ArrowRight } from "lucide-react"
import { useState } from "react"

export function VercelWebsite() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)

return (
    <div className="h-full w-full overflow-auto bg-white">
      {/* Navigation */}
      <header className="sticky top-0 bg-white border-b z-10 px-4 py-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center">
            <svg height="22" viewBox="0 0 74 64" fill="black">
              <path d="M37.5896 0L75.1792 65H0L37.5896 0Z"></path>
            </svg>
            <span className="ml-2 font-semibold">Vercel</span>
          </div>

{/* Mobile menu button */}
          <button className="md:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
            {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
          </button>

{/* Desktop navigation */}
          <nav className="hidden md:flex items-center space-x-4 text-sm">
            <span className="cursor-pointer">Products</span>
            <span className="cursor-pointer">Solutions</span>
            <span className="cursor-pointer">Resources</span>
            <span className="cursor-pointer">Enterprise</span>
            <span className="cursor-pointer">Docs</span>
            <span className="cursor-pointer">Pricing</span>
          </nav>
        </div>

{/* Mobile menu */}
        {isMenuOpen && (
          <nav className="md:hidden pt-4 pb-2">
            <div className="flex flex-col space-y-3">
              <span className="cursor-pointer">Products</span>
              <span className="cursor-pointer">Solutions</span>
              <span className="cursor-pointer">Resources</span>
              <span className="cursor-pointer">Enterprise</span>
              <span className="cursor-pointer">Docs</span>
              <span className="cursor-pointer">Pricing</span>
            </div>
          </nav>
        )}
      </header>

{/* Hero Section */}
      <section className="px-4 py-8 md:py-12 border-b">
        <div className="max-w-4xl mx-auto text-center">
          <h1 className="text-2xl md:text-5xl font-bold mb-4">Introducing Fluid compute</h1>
          <p className="text-gray-600 mb-6">The power of servers in serverless form.</p>
          <button className="bg-black text-white px-6 py-2 rounded-full font-medium">Learn more</button>
        </div>
      </section>

{/* Main Content */}
      <section className="px-4 py-8 md:py-16 relative overflow-hidden">
        <div className="max-w-4xl mx-auto text-center relative z-10">
          <h2 className="text-2xl md:text-4xl font-bold mb-6">Your complete platform for the web.</h2>
          <p className="text-gray-600 mb-4 max-w-2xl mx-auto text-sm md:text-base">
            Vercel provides the developer tools and cloud infrastructure to build, scale, and secure a faster, more
            personalized web.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center mt-8">
            <button className="bg-black text-white px-6 py-3 rounded-full font-medium flex items-center justify-center">
              <svg className="mr-2" width="16" height="16" viewBox="0 0 24 24" fill="white">
                <path d="M12 2L2 19.7778H22L12 2Z"></path>
              </svg>
              Start Deploying
            </button>
            <button className="bg-white text-black px-6 py-3 rounded-full font-medium border">Get a Demo</button>
          </div>
        </div>

{/* Background gradient */}
        <div className="absolute inset-0 opacity-20 pointer-events-none">
          <div className="absolute inset-0 bg-gradient-to-r from-yellow-300 via-red-500 to-teal-500"></div>
        </div>
      </section>

{/* Features Grid */}
      <section className="px-4 py-8 md:py-16 bg-gray-50">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-xl md:text-3xl font-bold mb-8 text-center">Trusted by the world's leading companies</h2>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="bg-white p-6 rounded-lg shadow-sm">
              <h3 className="font-bold text-lg mb-2">Frontend Infrastructure</h3>
              <p className="text-gray-600 mb-4 text-sm">
                Deploy frontend projects with a single command and preview changes instantly.
              </p>
              <a href="#" className="text-blue-600 font-medium flex items-center text-sm">
                Learn more <ArrowRight className="ml-1 h-4 w-4" />
              </a>
            </div>

<div className="bg-white p-6 rounded-lg shadow-sm">
              <h3 className="font-bold text-lg mb-2">Edge Network</h3>
              <p className="text-gray-600 mb-4 text-sm">
                Deliver content and run code at the edge, closer to your users for better performance.
              </p>
              <a href="#" className="text-blue-600 font-medium flex items-center text-sm">
                Learn more <ArrowRight className="ml-1 h-4 w-4" />
              </a>
            </div>

<div className="bg-white p-6 rounded-lg shadow-sm">
              <h3 className="font-bold text-lg mb-2">Next.js Platform</h3>
              <p className="text-gray-600 mb-4 text-sm">
                The best place to deploy Next.js applications with zero configuration.
              </p>
              <a href="#" className="text-blue-600 font-medium flex items-center text-sm">
                Learn more <ArrowRight className="ml-1 h-4 w-4" />
              </a>
            </div>
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="px-4 py-6 md:py-8 bg-black text-white">
        <div className="max-w-4xl mx-auto">
          <div className="flex justify-between items-center">
            <div>
              <svg height="20" viewBox="0 0 74 64" fill="white">
                <path d="M37.5896 0L75.1792 65H0L37.5896 0Z"></path>
              </svg>
            </div>
            <div className="text-sm">© {new Date().getFullYear()} Vercel Inc.</div>
          </div>
        </div>
      </footer>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/safari/mock-websites/google-website.tsx" isMerged="true"
"use client"

import { Search, Mic, Grid } from "lucide-react"
import { useState } from "react"

export function GoogleWebsite() {
  const [searchQuery, setSearchQuery] = useState("")

return (
    <div className="h-full w-full overflow-auto bg-white flex flex-col">
      <header className="p-4 flex justify-end items-center text-sm">
        <nav className="flex items-center space-x-4">
          <span className="cursor-pointer">Gmail</span>
          <span className="cursor-pointer">Images</span>
          <button className="p-2 hover:bg-gray-100 rounded-full">
            <Grid className="h-5 w-5 text-gray-600" />
          </button>
          <button className="bg-blue-500 text-white px-4 py-2 rounded-md">Sign in</button>
        </nav>
      </header>

<div className="relative mb-6">
            <div className="flex items-center border rounded-full px-4 py-2 hover:shadow-md focus-within:shadow-md">
              <Search className="h-5 w-5 text-gray-400 mr-2" />
              <input
                type="text"
                className="flex-1 outline-none"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
              <Mic className="h-5 w-5 text-blue-500 ml-2" />
            </div>
          </div>

<div className="flex justify-center space-x-2">
            <button className="bg-gray-100 px-4 py-2 text-sm rounded hover:shadow">Google Search</button>
            <button className="bg-gray-100 px-4 py-2 text-sm rounded hover:shadow">I'm Feeling Lucky</button>
          </div>

<div className="mt-6 text-center text-sm">
            <p>
              Google offered in: <span className="text-blue-600 cursor-pointer">Español</span>
            </p>
          </div>
        </div>
      </main>

<footer className="bg-gray-100 text-sm text-gray-600 p-4">
        <div className="border-b pb-4 mb-4">
          <p>United States</p>
        </div>
        <div className="flex flex-col md:flex-row justify-between">
          <div className="flex space-x-4 mb-2 md:mb-0">
            <span className="cursor-pointer">About</span>
            <span className="cursor-pointer">Advertising</span>
            <span className="cursor-pointer">Business</span>
            <span className="cursor-pointer">How Search works</span>
          </div>
          <div className="flex space-x-4">
            <span className="cursor-pointer">Privacy</span>
            <span className="cursor-pointer">Terms</span>
            <span className="cursor-pointer">Settings</span>
          </div>
        </div>
      </footer>
    </div>
  )
}

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

import { useState, useRef, useEffect } from "react"
import { motion } from "framer-motion"
import { ArrowLeft, ArrowRight, Share, BookOpen, Square, Lock, RotateCcw } from "lucide-react"
import { useLocalStorage } from "@/lib/use-local-storage"
import { TabSwitcher } from "./tab-switcher"
import { ShareMenu } from "./share-menu"
import { BookmarksView } from "./bookmarks-view"
import { SafariError } from "./safari-error"
import { HomeIndicator } from "@/components/home-indicator"
import { VercelWebsite } from "./mock-websites/vercel-website"
import { GoogleWebsite } from "./mock-websites/google-website"

const MOCK_WEBSITES = {
  "vercel.com": "vercel",
  "www.vercel.com": "vercel",
  "google.com": "google",
  "www.google.com": "google",
}

interface Tab {
  id: string
  url: string
  title: string
  isLoading: boolean
}

export function SafariApp() {
  const [tabs, setTabs] = useLocalStorage<Tab[]>("safari-tabs", [
    {
      id: "1",
      url: "https://vercel.com",
      title: "Vercel: Cloud Application Platform",
      isLoading: false,
    },
  ])
  const [activeTabId, setActiveTabId] = useLocalStorage<string>("safari-active-tab", "1")
  const [showTabs, setShowTabs] = useState(false)
  const [showShare, setShowShare] = useState(false)
  const [showBookmarks, setShowBookmarks] = useState(false)
  const [urlInput, setUrlInput] = useState("")
  const [isEditing, setIsEditing] = useState(false)
  const [loadError, setLoadError] = useState(false)
  const webviewRef = useRef<HTMLIFrameElement>(null)

const activeTab = tabs.find((tab) => tab.id === activeTabId)

useEffect(() => {
    if (activeTab) {
      setUrlInput(activeTab.url)
    }
  }, [activeTab])

const handleNewTab = () => {
    const newTab: Tab = {
      id: Date.now().toString(),
      url: "https://vercel.com",
      title: "New Tab",
      isLoading: true,
    }
    setTabs([...tabs, newTab])
    setActiveTabId(newTab.id)
    setShowTabs(false)
  }

const handleCloseTab = (tabId: string) => {
    const newTabs = tabs.filter((tab) => tab.id !== tabId)
    if (newTabs.length === 0) {
      handleNewTab()
    } else if (activeTabId === tabId) {
      setActiveTabId(newTabs[newTabs.length - 1].id)
    }
    setTabs(newTabs)
  }

const handleNavigate = (url: string) => {
    // Check if input is a URL or a search query
    const isUrl = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/.test(url)

if (isUrl) {
      // Add https:// if not present
      if (!url.startsWith("http://") && !url.startsWith("https://")) {
        url = "https://" + url
      }
    } else {
      // Treat as a search query
      url = `https://www.google.com/search?q=${encodeURIComponent(url)}`
    }

const updatedTabs = tabs.map((tab) =>
      tab.id === activeTabId
        ? {
            ...tab,
            url,
            isLoading: true,
          }
        : tab,
    )
    setTabs(updatedTabs)
    setIsEditing(false)
    setLoadError(false)

// Simulate loading
    setTimeout(() => {
      const updatedTabs = tabs.map((tab) =>
        tab.id === activeTabId
          ? {
              ...tab,
              isLoading: false,
              title: getMockTitle(url),
            }
          : tab,
      )
      setTabs(updatedTabs)
    }, 500)
  }

const getMockTitle = (url: string) => {
    const hostname = new URL(url).hostname

if (hostname === "vercel.com" || hostname === "www.vercel.com") {
      return "Vercel: Cloud Application Platform"
    }

if (hostname === "google.com" || hostname === "www.google.com") {
      return "Google"
    }

if (url.includes("google.com/search")) {
      const params = new URLSearchParams(new URL(url).search)
      const query = params.get("q")
      return query ? `${query} - Google Search` : "Google Search"
    }

return hostname
  }

const getMockWebsite = () => {
    if (!activeTab) return null

const url = new URL(activeTab.url)
    const hostname = url.hostname.toLowerCase()

// Check if we have a mock for this website
    const mockType = Object.entries(MOCK_WEBSITES).find(
      ([domain]) => hostname === domain || hostname.endsWith(`.${domain}`),
    )?.[1]

switch (mockType) {
      case "vercel":
        return <VercelWebsite />
      case "google":
        return <GoogleWebsite />
      default:
        // For URLs we don't have mocks for, show the error page
        return <SafariError url={activeTab.url} onRetry={() => handleNavigate(activeTab.url)} />
    }
  }

const handleRefresh = () => {
    if (activeTab) {
      const updatedTabs = tabs.map((tab) =>
        tab.id === activeTabId
          ? {
              ...tab,
              isLoading: true,
            }
          : tab,
      )
      setTabs(updatedTabs)

// Simulate loading
      setTimeout(() => {
        const updatedTabs = tabs.map((tab) =>
          tab.id === activeTabId
            ? {
                ...tab,
                isLoading: false,
              }
            : tab,
        )
        setTabs(updatedTabs)
      }, 500)
    }
  }

return (
    <HomeIndicator>
      <div className="h-full w-full bg-white flex flex-col">
        {/* Web View */}
        <div className="flex-1 overflow-hidden pt-12">{getMockWebsite()}</div>

{/* Bottom Bar */}
        <motion.div
          initial={false}
          animate={{ y: showTabs || showShare || showBookmarks ? 300 : 0 }}
          className="bg-white/80 backdrop-blur-xl border-t"
        >
          {/* URL/Search Bar */}
          <div className="flex items-center gap-2 mx-4 my-2 bg-gray-100 rounded-lg px-3 py-1">
            {activeTab?.isLoading ? (
              <motion.div
                animate={{ rotate: 360 }}
                transition={{ duration: 1, repeat: Number.POSITIVE_INFINITY, ease: "linear" }}
              >
                <RotateCcw className="h-4 w-4 text-gray-400" />
              </motion.div>
            ) : (
              <button onClick={handleRefresh}>
                <Lock className="h-4 w-4 text-gray-400" />
              </button>
            )}
            <input
              type="text"
              value={isEditing ? urlInput : activeTab?.url || ""}
              onChange={(e) => setUrlInput(e.target.value)}
              onFocus={() => setIsEditing(true)}
              onBlur={() => setIsEditing(false)}
              onKeyDown={(e) => e.key === "Enter" && handleNavigate(urlInput)}
              className="flex-1 bg-transparent text-sm outline-none"
              placeholder="Search or enter website name"
            />
          </div>

{/* Toolbar */}
          <div className="flex items-center justify-between px-6 py-2">
            <div className="flex gap-8">
              <button
                onClick={() => {
                  // Simulate back navigation
                  if (activeTab) {
                    handleNavigate(activeTab.url)
                  }
                }}
              >
                <ArrowLeft className="h-5 w-5 text-blue-500" />
              </button>
              <button
                onClick={() => {
                  // Simulate forward navigation
                  if (activeTab) {
                    handleNavigate(activeTab.url)
                  }
                }}
              >
                <ArrowRight className="h-5 w-5 text-blue-500" />
              </button>
            </div>
            <div className="flex gap-8">
              <button onClick={() => setShowShare(true)}>
                <Share className="h-5 w-5 text-blue-500" />
              </button>
              <button onClick={() => setShowBookmarks(true)}>
                <BookOpen className="h-5 w-5 text-blue-500" />
              </button>
              <button onClick={() => setShowTabs(true)}>
                <Square className="h-5 w-5 text-blue-500" />
              </button>
            </div>
          </div>
        </motion.div>

{/* Tab Switcher */}
        <TabSwitcher
          isVisible={showTabs}
          tabs={tabs}
          activeTabId={activeTabId}
          onClose={handleCloseTab}
          onSelect={(id) => {
            setActiveTabId(id)
            setShowTabs(false)
          }}
          onNew={handleNewTab}
          onDismiss={() => setShowTabs(false)}
        />

{/* Share Menu */}
        <ShareMenu isVisible={showShare} url={activeTab?.url || ""} onDismiss={() => setShowShare(false)} />

{/* Bookmarks View */}
        <BookmarksView
          isVisible={showBookmarks}
          onSelect={(url) => {
            handleNavigate(url)
            setShowBookmarks(false)
          }}
          onDismiss={() => setShowBookmarks(false)}
        />
      </div>
    </HomeIndicator>
  )
}

[V0_FILE]typescriptreact:file="components/safari/tab-switcher.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { motion, AnimatePresence } from "framer-motion"
import { X, Plus } from "lucide-react"
import { VercelWebsite } from "./mock-websites/vercel-website"
import { GoogleWebsite } from "./mock-websites/google-website"

interface Tab {
  id: string
  url: string
  title: string
  isLoading: boolean
}

interface TabSwitcherProps {
  isVisible: boolean
  tabs: Tab[]
  activeTabId: string
  onClose: (id: string) => void
  onSelect: (id: string) => void
  onNew: () => void
  onDismiss: () => void
}

export function TabSwitcher({ isVisible, tabs, activeTabId, onClose, onSelect, onNew, onDismiss }: TabSwitcherProps) {
  const getTabPreview = (url: string) => {
    const hostname = new URL(url).hostname.toLowerCase()

if (hostname === "vercel.com" || hostname === "www.vercel.com") {
      return (
        <div className="w-full h-full overflow-hidden scale-[0.5] origin-top-left">
          <div className="w-[200%] h-[200%]">
            <VercelWebsite />
          </div>
        </div>
      )
    }

if (hostname === "google.com" || hostname === "www.google.com") {
      return (
        <div className="w-full h-full overflow-hidden scale-[0.5] origin-top-left">
          <div className="w-[200%] h-[200%]">
            <GoogleWebsite />
          </div>
        </div>
      )
    }

return (
      <div className="w-full h-full flex items-center justify-center bg-gray-100">
        <div className="text-2xl font-bold text-gray-400">{hostname}</div>
      </div>
    )
  }

return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          initial={{ y: "100%" }}
          animate={{ y: 0 }}
          exit={{ y: "100%" }}
          transition={{ type: "spring", damping: 25, stiffness: 200 }}
          className="absolute inset-x-0 bottom-0 bg-gray-100/80 backdrop-blur-xl rounded-t-xl p-4 pb-8"
          style={{ maxHeight: "80vh" }}
        >
          <div className="flex items-center justify-between mb-4">
            <button onClick={onDismiss} className="text-gray-500">
              Done
            </button>
            <button onClick={onNew} className="text-blue-500">
              <Plus className="h-5 w-5" />
            </button>
          </div>

<div className="grid grid-cols-2 gap-4 overflow-auto">
            {tabs.map((tab) => (
              <motion.div
                key={tab.id}
                layoutId={tab.id}
                className={`relative aspect-[3/2] rounded-xl overflow-hidden border ${
                  tab.id === activeTabId ? "border-blue-500" : "border-gray-200"
                }`}
                onClick={() => onSelect(tab.id)}
              >
                {getTabPreview(tab.url)}
                <div className="absolute inset-x-0 bottom-0 bg-white/80 backdrop-blur-sm p-2">
                  <div className="flex items-center justify-between">
                    <div className="truncate text-xs">{tab.title}</div>
                    {tabs.length > 1 && (
                      <button
                        onClick={(e) => {
                          e.stopPropagation()
                          onClose(tab.id)
                        }}
                        className="text-gray-500 hover:text-gray-700"
                      >
                        <X className="h-4 w-4" />
                      </button>
                    )}
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  )
}

[V0_FILE]typescriptreact:file="components/music/chat-view.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { Send } from "lucide-react"
import { useMusicStore } from "@/lib/music-state"
import type { ChatMessage } from "@/lib/types"

export function ChatView() {
  const [messages, setMessages] = useState<ChatMessage[]>([
    {
      id: "1",
      sender: "MusicBot",
      content: "Hello 👋 I'm your music assistant. What would you like to listen to today?",
      timestamp: Date.now() - 1000 * 60 * 5,
    },
  ])
  const [input, setInput] = useState("")
  const { currentSong, setCurrentSong, setIsPlaying } = useMusicStore()
  const messagesEndRef = useRef<HTMLDivElement>(null)

// Auto-scroll to bottom when messages change
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }, [messages]) //Corrected dependency

const sendMessage = () => {
    if (!input.trim()) return

const userMessage: ChatMessage = {
      id: Date.now().toString(),
      sender: "you",
      content: input,
      timestamp: Date.now(),
      currentSong,
    }

setMessages([...messages, userMessage])
    setInput("")

// Simulate bot response
    setTimeout(() => {
      const botMessage: ChatMessage = {
        id: (Date.now() + 1).toString(),
        sender: "MusicBot",
        content: getBotResponse(input),
        timestamp: Date.now(),
        currentSong,
      }
      setMessages((prev) => [...prev, botMessage])
    }, 1000)
  }

const getBotResponse = (message: string): string => {
    const lowerMessage = message.toLowerCase()

if (lowerMessage.includes("play") || lowerMessage.includes("listen")) {
      return "I've found some great music for you! Check out the featured albums on the Home tab."
    }

if (lowerMessage.includes("recommend") || lowerMessage.includes("suggest")) {
      return "Based on your listening history, I think you might enjoy 'Summer Walk' by Olexy. Would you like me to play it?"
    }

if (lowerMessage.includes("hello") || lowerMessage.includes("hi")) {
      return "Hi there! How can I help with your music needs today?"
    }

return "I'm here to help you discover and enjoy music. You can ask me to play songs, recommend music, or help you find new artists!"
  }

const formatTime = (timestamp: number) => {
    const date = new Date(timestamp)
    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
  }

return (
    <div className="h-full flex flex-col">
      <div className="px-4 pt-14 pb-4 border-b">
        <h1 className="text-lg font-semibold">Music Assistant</h1>
      </div>

<div className="flex-1 overflow-auto p-4 space-y-4">
        {messages.map((message) => (
          <div key={message.id} className={`flex ${message.sender === "you" ? "justify-end" : "justify-start"}`}>
            <div
              className={`max-w-[75%] rounded-2xl px-4 py-2 ${
                message.sender === "you" ? "bg-red-500 text-white" : "bg-gray-100"
              }`}
            >
              {message.sender !== "you" && <div className="text-sm text-gray-500 mb-1">{message.sender}</div>}
              <p className="text-sm">{message.content}</p>
              {message.currentSong && (
                <div className="mt-2 text-xs bg-black/10 p-2 rounded-lg">
                  🎵 {message.currentSong.title} - {message.currentSong.artist}
                </div>
              )}
              <div
                className={`text-xs mt-1 text-right ${message.sender === "you" ? "text-white/70" : "text-gray-500"}`}
              >
                {formatTime(message.timestamp)}
              </div>
            </div>
          </div>
        ))}
        <div ref={messagesEndRef} />
      </div>

<div className="p-4 border-t">
        <div className="flex items-center gap-2">
          <input
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder="Ask about music..."
            className="flex-1 bg-gray-100 rounded-full px-4 py-2 text-sm outline-none"
            onKeyPress={(e) => e.key === "Enter" && sendMessage()}
          />
          <button
            onClick={sendMessage}
            className="w-8 h-8 flex items-center justify-center bg-red-500 text-white rounded-full"
            disabled={!input.trim()}
          >
            <Send className="h-4 w-4" />
          </button>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescript:file="lib/music-state.ts" isMerged="true"
"use client"

import { create } from "zustand"
import type { Song } from "./types"

interface MusicState {
  currentSong: Song | null
  isPlaying: boolean
  queue: Song[]
  setCurrentSong: (song: Song | null) => void
  setIsPlaying: (isPlaying: boolean) => void
  addToQueue: (song: Song) => void
  removeFromQueue: (songId: string) => void
  clearQueue: () => void
}

export const useMusicStore = create<MusicState>((set) => ({
  currentSong: null,
  isPlaying: false,
  queue: [],
  setCurrentSong: (song) => set({ currentSong: song }),
  setIsPlaying: (isPlaying) => set({ isPlaying }),
  addToQueue: (song) => set((state) => ({ queue: [...state.queue, song] })),
  removeFromQueue: (songId) =>
    set((state) => ({
      queue: state.queue.filter((song) => song.id !== songId),
    })),
  clearQueue: () => set({ queue: [] }),
}))

[V0_FILE]typescript:file="components/music/music-app.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { HomeView } from "./home-view"
import { SearchView } from "./search-view"
import { RadioView } from "./radio-view"
import { LibraryView } from "./library-view"
import { MusicPlayer } from "./music-player"
import { Home, Radio, Library, Search } from "lucide-react"

export function MusicApp() {
  const [activeTab, setActiveTab] = useState<"home" | "radio" | "library" | "search">("home")

return (
    <div className="flex flex-col h-full bg-white">
      <div className="flex-1 overflow-hidden">
        {activeTab === "home" && <HomeView />}
        {activeTab === "radio" && <RadioView />}
        {activeTab === "library" && <LibraryView />}
        {activeTab === "search" && <SearchView />}
      </div>

{/* Bottom Tab Bar */}
      <div className="flex justify-around items-center py-2 border-t">
        <button
          className={`flex flex-col items-center p-2 ${activeTab === "home" ? "text-red-500" : "text-gray-500"}`}
          onClick={() => setActiveTab("home")}
        >
          <Home className="h-6 w-6" />
          <span className="text-xs mt-1">Home</span>
        </button>
        <button
          className={`flex flex-col items-center p-2 ${activeTab === "radio" ? "text-red-500" : "text-gray-500"}`}
          onClick={() => setActiveTab("radio")}
        >
          <Radio className="h-6 w-6" />
          <span className="text-xs mt-1">Radio</span>
        </button>
        <button
          className={`flex flex-col items-center p-2 ${activeTab === "library" ? "text-red-500" : "text-gray-500"}`}
          onClick={() => setActiveTab("library")}
        >
          <Library className="h-6 w-6" />
          <span className="text-xs mt-1">Library</span>
        </button>
        <button
          className={`flex flex-col items-center p-2 ${activeTab === "search" ? "text-red-500" : "text-gray-500"}`}
          onClick={() => setActiveTab("search")}
        >
          <Search className="h-6 w-6" />
          <span className="text-xs mt-1">Search</span>
        </button>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="lib/music-data.ts" isQuickEdit="true" isMerged="true"
import type { Album, Song } from "./types"

// Replace the audioUrl values with the provided Vercel Blob URLs
export const SAMPLE_SONGS: Song[] = [
  {
    id: "1",
    title: "TECH HOUSE VIBES",
    artist: "OLEXY",
    albumArt: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=300&h=300&fit=crop",
    audioUrl:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/mixkit-tech-house-vibes-130-b16na4CaJn5VkEPTAChL1MQDWXUrOT.mp3",
  },
  {
    id: "2",
    title: "SPORTS HIGHLIGHTS",
    artist: "MUSICTOWN",
    albumArt: "https://images.unsplash.com/photo-1459749411175-04bf5292ceea?w=300&h=300&fit=crop",
    audioUrl:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/mixkit-sports-highlights-51-4faiPJv1YQqwMUm6XXk8Tq5ec5ITfh.mp3",
  },
  {
    id: "3",
    title: "HIP HOP BEATS",
    artist: "FASSounds",
    albumArt: "https://images.unsplash.com/photo-1456513080510-7bf3a84b82f8?w=300&h=300&fit=crop",
    audioUrl:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/mixkit-hip-hop-02-738-PJu3dDvNmS1yrpV1dyCz6R49yIhQqa.mp3",
  },
  {
    id: "4",
    title: "SUN AND HIS DAUGHTER",
    artist: "Alex_MakeMusic",
    albumArt: "https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=300&h=300&fit=crop",
    audioUrl:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/mixkit-sun-and-his-daughter-580-YgPzYiN5rptOgpvCCvcgDio0Cn7HQh.mp3",
  },
  {
    id: "5",
    title: "DEEP URBAN",
    artist: "Urban Beats",
    albumArt: "https://images.unsplash.com/photo-1501386761578-eac5c94b800a?w=300&h=300&fit=crop",
    audioUrl:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/mixkit-deep-urban-623-wyxr1zey3yGOSKYtp83WLn6cf7Huik.mp3",
  },
]

export const FEATURED_ALBUMS: Album[] = [
  {
    id: "1",
    title: "SUMMER VIBES",
    artist: "OLEXY",
    artwork: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=300&h=300&fit=crop",
    songs: SAMPLE_SONGS.slice(0, 2),
  },
  {
    id: "2",
    title: "STUDY BEATS",
    artist: "FASSounds",
    artwork: "https://images.unsplash.com/photo-1456513080510-7bf3a84b82f8?w=300&h=300&fit=crop",
    songs: SAMPLE_SONGS.slice(2, 4),
  },
  {
    id: "3",
    title: "ELECTRONIC MIX",
    artist: "Alex_MakeMusic",
    artwork: "https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=300&h=300&fit=crop",
    songs: [SAMPLE_SONGS[3], SAMPLE_SONGS[4]],
  },
  {
    id: "4",
    title: "CHILL COLLECTION",
    artist: "Various Artists",
    artwork: "https://images.unsplash.com/photo-1459749411175-04bf5292ceea?w=300&h=300&fit=crop",
    songs: SAMPLE_SONGS,
  },
]

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

import type React from "react"

import { useEffect, useRef, useState } from "react"
import { Play, Pause, SkipBack, SkipForward, List } from "lucide-react"
import { useMusicStore } from "@/lib/music-state"
import { QueueView } from "./queue-view"

export function MusicPlayer() {
  const audioRef = useRef<HTMLAudioElement>(null)
  const [progress, setProgress] = useState(0)
  const [showQueue, setShowQueue] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const [audioError, setAudioError] = useState(false)
  const { currentSong, isPlaying, setIsPlaying, queue } = useMusicStore()

// Handle play/pause
  const togglePlayback = async () => {
    if (!audioRef.current || audioError) return

try {
      if (isPlaying) {
        audioRef.current.pause()
        setIsPlaying(false)
      } else {
        setIsLoading(true)
        try {
          await audioRef.current.play()
          setIsPlaying(true)
        } catch (error) {
          console.error("Play error:", error)
          if (error instanceof DOMException) {
            if (error.name === "NotSupportedError") {
              console.error("Format not supported")
            } else if (error.name === "NotAllowedError") {
              console.error("User interaction required")
            }
          }
          setIsPlaying(false)
          setAudioError(true)
        }
      }
    } catch (error) {
      console.error("Playback error:", error)
      setIsPlaying(false)
    } finally {
      setIsLoading(false)
    }
  }

// Handle song changes
  useEffect(() => {
    if (!currentSong) return

const setupAudio = async () => {
      if (!audioRef.current) return

// Reset state
      setProgress(0)
      setAudioError(false)
      setIsLoading(true)

try {
        // Pause any current playback
        audioRef.current.pause()

// Update audio source
        audioRef.current.src = currentSong.audioUrl

// Add event listeners before loading
        const loadPromise = new Promise((resolve, reject) => {
          const loadedHandler = () => {
            audioRef.current?.removeEventListener("canplaythrough", loadedHandler)
            resolve(true)
          }

const errorHandler = (e: Event) => {
            audioRef.current?.removeEventListener("error", errorHandler)
            console.error("Audio loading error:", e)
            reject(new Error("Failed to load audio"))
          }

audioRef.current?.addEventListener("canplaythrough", loadedHandler, { once: true })
          audioRef.current?.addEventListener("error", errorHandler, { once: true })
        })

audioRef.current.load()

// Wait for loading or error
        await loadPromise

// If isPlaying is true, attempt to play the new song
        if (isPlaying) {
          await audioRef.current.play()
        }
      } catch (error) {
        console.error("Audio setup error:", error)
        setAudioError(true)
        setIsPlaying(false)
      } finally {
        setIsLoading(false)
      }
    }

setupAudio()

// Cleanup function
    return () => {
      if (audioRef.current) {
        audioRef.current.pause()
        audioRef.current.src = ""
      }
    }
  }, [currentSong, isPlaying, setIsPlaying])

const handleTimeUpdate = () => {
    if (audioRef.current) {
      const currentProgress = (audioRef.current.currentTime / audioRef.current.duration) * 100
      setProgress(isNaN(currentProgress) ? 0 : currentProgress)
    }
  }

const handleProgressClick = (e: React.MouseEvent<HTMLDivElement>) => {
    if (audioRef.current && !audioError) {
      const progressBar = e.currentTarget
      const clickPosition = e.clientX - progressBar.getBoundingClientRect().left
      const progressBarWidth = progressBar.clientWidth
      const percentage = clickPosition / progressBarWidth

audioRef.current.currentTime = percentage * audioRef.current.duration
    }
  }

const handleAudioError = (e: React.SyntheticEvent<HTMLAudioElement>) => {
    console.error("Audio error event triggered")
    const audioElement = e.currentTarget
    if (audioElement.error) {
      console.error("Audio playback error:", audioElement.error.message)
    }
    setAudioError(true)
    setIsPlaying(false)
    setIsLoading(false)
  }

if (!currentSong) return null

return (
    <>
      <div className="border-t bg-white p-4">
        <audio
          ref={audioRef}
          onTimeUpdate={handleTimeUpdate}
          onEnded={() => setIsPlaying(false)}
          onError={handleAudioError}
        />

<div className="flex items-center gap-4">
          <img
            src={currentSong.albumArt || "/placeholder.svg?height=48&width=48"}
            alt={currentSong.title}
            className="w-12 h-12 rounded-lg object-cover"
            onError={(e) => {
              e.currentTarget.src = "/placeholder.svg?height=48&width=48"
            }}
          />

<div className="flex-1 min-w-0">
            <div className="text-sm font-medium truncate">{currentSong.title}</div>
            <div className="text-xs text-gray-500 truncate">{currentSong.artist}</div>
            {audioError && <div className="text-xs text-red-500">Unable to play this track</div>}
          </div>

<div className="flex items-center gap-4">
            <button className="text-gray-400" onClick={() => setShowQueue(true)}>
              <List className="h-5 w-5" />
            </button>
            <button className="text-gray-400">
              <SkipBack className="h-6 w-6" />
            </button>
            <button
              onClick={togglePlayback}
              className={`w-10 h-10 rounded-full ${audioError ? "bg-gray-400" : "bg-red-500"} text-white flex items-center justify-center`}
              disabled={isLoading || audioError}
            >
              {isLoading ? (
                <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
              ) : isPlaying ? (
                <Pause className="h-5 w-5" />
              ) : (
                <Play className="h-5 w-5" />
              )}
            </button>
            <button className="text-gray-400">
              <SkipForward className="h-6 w-6" />
            </button>
          </div>
        </div>

{/* Progress bar */}
        <div className="mt-2 h-1 bg-gray-200 rounded-full overflow-hidden cursor-pointer" onClick={handleProgressClick}>
          <div className="h-full bg-red-500 transition-all duration-100" style={{ width: `${progress}%` }} />
        </div>
      </div>

{/* Queue View */}
      <QueueView isOpen={showQueue} onClose={() => setShowQueue(false)} />
    </>
  )
}

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

import type React from "react"

import { useState } from "react"
import { MoreVertical, Plus, Play } from "lucide-react"
import { FEATURED_ALBUMS, SAMPLE_SONGS } from "@/lib/music-data"
import { useMusicStore } from "@/lib/music-state"

export function HomeView() {
  const { setCurrentSong, setIsPlaying, addToQueue } = useMusicStore()
  const [showOptions, setShowOptions] = useState<string | null>(null)

const handleAlbumClick = (albumId: string) => {
    const album = FEATURED_ALBUMS.find((album) => album.id === albumId)
    if (album && album.songs.length > 0) {
      setCurrentSong(album.songs[0])
      setIsPlaying(true)
    }
  }

const handleAddToQueue = (songId: string, e: React.MouseEvent) => {
    e.stopPropagation()
    const song = SAMPLE_SONGS.find((song) => song.id === songId)
    if (song) {
      addToQueue(song)
      setShowOptions(null)
    }
  }

return (
    <div className="h-full overflow-auto">
      <div className="px-4 pt-14 pb-4">
        <h1 className="text-2xl font-bold">TonesChat</h1>
      </div>

{/* Featured Section */}
      <div className="px-4 mb-6">
        <div className="bg-gradient-to-r from-red-500 to-red-600 rounded-xl p-4 text-white">
          <h2 className="text-sm font-medium mb-2">FEATURED PLAYLIST</h2>
          <div className="flex items-center">
            <img
              src={FEATURED_ALBUMS[0].artwork || "/placeholder.svg?height=80&width=80"}
              alt={FEATURED_ALBUMS[0].title}
              className="w-20 h-20 rounded-lg mr-4 object-cover"
              onError={(e) => {
                e.currentTarget.src = "/placeholder.svg?height=80&width=80"
              }}
            />
            <div className="flex-1">
              <h3 className="font-bold text-lg">{FEATURED_ALBUMS[0].title}</h3>
              <p className="text-sm text-white/80">{FEATURED_ALBUMS[0].artist}</p>
              <button
                className="mt-2 bg-white text-red-500 px-4 py-1 rounded-full text-sm font-medium flex items-center gap-1"
                onClick={() => handleAlbumClick(FEATURED_ALBUMS[0].id)}
              >
                <Play className="h-3 w-3" /> Play
              </button>
            </div>
          </div>
        </div>
      </div>

{/* Albums */}
      <div className="px-4 pb-4">
        <h2 className="text-lg font-semibold mb-3">Featured Albums</h2>
        <div className="grid grid-cols-2 gap-4">
          {FEATURED_ALBUMS.map((album) => (
            <div key={album.id} className="flex flex-col cursor-pointer" onClick={() => handleAlbumClick(album.id)}>
              <div className="aspect-square rounded-lg overflow-hidden bg-gray-100">
                <img
                  src={album.artwork || "/placeholder.svg?height=200&width=200"}
                  alt={album.title}
                  className="w-full h-full object-cover"
                  onError={(e) => {
                    e.currentTarget.src = "/placeholder.svg?height=200&width=200"
                  }}
                />
              </div>
              <div className="mt-2">
                <h3 className="font-medium text-sm truncate">{album.title}</h3>
                <p className="text-xs text-gray-500 truncate">{album.artist}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

{/* Recently Added */}
      <div className="px-4 pb-4">
        <h2 className="text-lg font-semibold mb-3">Recently Added</h2>
        <div className="space-y-2">
          {SAMPLE_SONGS.map((song) => (
            <div key={song.id} className="flex items-center p-2 hover:bg-gray-100 rounded-lg cursor-pointer relative">
              <img
                src={song.albumArt || "/placeholder.svg?height=48&width=48"}
                alt={song.title}
                className="w-12 h-12 rounded-lg mr-3 object-cover"
                onError={(e) => {
                  e.currentTarget.src = "/placeholder.svg?height=48&width=48"
                }}
              />
              <div
                className="flex-1"
                onClick={() => {
                  setCurrentSong(song)
                  setIsPlaying(true)
                }}
              >
                <h3 className="font-medium text-sm">{song.title}</h3>
                <p className="text-xs text-gray-500">{song.artist}</p>
              </div>
              <button
                className="p-2"
                onClick={(e) => {
                  e.stopPropagation()
                  setShowOptions(showOptions === song.id ? null : song.id)
                }}
              >
                <MoreVertical className="h-5 w-5 text-gray-400" />
              </button>

{/* Options Menu */}
              {showOptions === song.id && (
                <div className="absolute right-0 top-full mt-1 bg-white shadow-lg rounded-lg z-10 w-48">
                  <div
                    className="p-3 flex items-center gap-2 hover:bg-gray-100 cursor-pointer"
                    onClick={(e) => handleAddToQueue(song.id, e)}
                  >
                    <Plus className="h-4 w-4" />
                    <span className="text-sm">Add to Queue</span>
                  </div>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescript:file="components/music/search-view.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Search, MoreVertical, Plus } from "lucide-react"
import { SAMPLE_SONGS } from "@/lib/music-data"
import { useMusicStore } from "@/lib/music-state"
import type { Song } from "@/lib/types"

export function SearchView() {
  const [query, setQuery] = useState("")
  const [results, setResults] = useState<Song[]>([])
  const { setCurrentSong, setIsPlaying, addToQueue } = useMusicStore()
  const [showOptions, setShowOptions] = useState<string | null>(null)

const handleSearch = (value: string) => {
    setQuery(value)
    if (value.trim()) {
      // Simulate search results
      setResults(
        SAMPLE_SONGS.filter(
          (song) =>
            song.title.toLowerCase().includes(value.toLowerCase()) ||
            song.artist.toLowerCase().includes(value.toLowerCase()),
        ),
      )
    } else {
      setResults([])
    }
  }

const handleSongClick = (song: Song) => {
    setCurrentSong(song)
    setIsPlaying(true)
  }

const handleAddToQueue = (song: Song, e: React.MouseEvent) => {
    e.stopPropagation()
    addToQueue(song)
    setShowOptions(null)
  }

return (
    <div className="h-full overflow-auto">
      <div className="px-4 pt-14 pb-4">
        <div className="relative">
          <input
            type="text"
            value={query}
            onChange={(e) => handleSearch(e.target.value)}
            placeholder="Search"
            className="w-full h-9 bg-gray-100 rounded-lg pl-9 pr-4 text-sm outline-none"
          />
          <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
          {query && (
            <button
              onClick={() => handleSearch("")}
              className="absolute right-2 top-1/2 -translate-y-1/2 text-red-500 text-sm"
            >
              Cancel
            </button>
          )}
        </div>
      </div>

{query && results.length === 0 && (
        <div className="px-4 py-8 text-center text-gray-500">No results found for "{query}"</div>
      )}

{results.length > 0 && (
        <div className="px-4">
          <h2 className="text-lg font-semibold mb-3">Songs</h2>
          <div className="space-y-2">
            {results.map((song) => (
              <div key={song.id} className="flex items-center p-2 hover:bg-gray-100 rounded-lg cursor-pointer relative">
                <img
                  src={song.albumArt || "/placeholder.svg?height=48&width=48"}
                  alt={song.title}
                  className="w-12 h-12 rounded-lg mr-3 object-cover"
                  onError={(e) => {
                    e.currentTarget.src = "/placeholder.svg?height=48&width=48"
                  }}
                />
                <div className="flex-1" onClick={() => handleSongClick(song)}>
                  <h3 className="font-medium text-sm">{song.title}</h3>
                  <p className="text-xs text-gray-500">{song.artist}</p>
                </div>
                <button
                  className="p-2"
                  onClick={(e) => {
                    e.stopPropagation()
                    setShowOptions(showOptions === song.id ? null : song.id)
                  }}
                >
                  <MoreVertical className="h-5 w-5 text-gray-400" />
                </button>

{/* Options Menu */}
                {showOptions === song.id && (
                  <div className="absolute right-0 top-full mt-1 bg-white shadow-lg rounded-lg z-10 w-48">
                    <div
                      className="p-3 flex items-center gap-2 hover:bg-gray-100 cursor-pointer"
                      onClick={(e) => handleAddToQueue(song, e)}
                    >
                      <Plus className="h-4 w-4" />
                      <span className="text-sm">Add to Queue</span>
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      )}

{!query && (
        <div className="px-4">
          <h2 className="text-lg font-semibold mb-3">Browse Categories</h2>
          <div className="grid grid-cols-2 gap-3">
            {["Hip-Hop", "Pop", "Rock", "Electronic", "Jazz", "Classical", "R&B", "Country"].map((category) => (
              <div
                key={category}
                className="aspect-video bg-gradient-to-br from-red-400 to-red-600 rounded-lg flex items-center justify-center text-white font-bold"
              >
                {category}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescript:file="components/music/queue-view.tsx" isMerged="true"
"use client"
import { X, List } from "lucide-react"
import { useMusicStore } from "@/lib/music-state"
import type { Song } from "@/lib/types"

interface QueueViewProps {
  isOpen: boolean
  onClose: () => void
}

export function QueueView({ isOpen, onClose }: QueueViewProps) {
  const { currentSong, queue, setCurrentSong, setIsPlaying, removeFromQueue } = useMusicStore()

if (!isOpen) return null

const handleSongClick = (song: Song) => {
    setCurrentSong(song)
    setIsPlaying(true)
  }

return (
    <div className="fixed inset-0 bg-white z-50 flex flex-col">
      <div className="flex items-center justify-between px-4 py-3 border-b">
        <button onClick={onClose}>
          <X className="h-6 w-6 text-gray-500" />
        </button>
        <h1 className="text-lg font-semibold">Up Next</h1>
        <div className="w-6"></div> {/* Empty div for alignment */}
      </div>

<div className="flex-1 overflow-auto p-4">
        {/* Currently Playing */}
        {currentSong && (
          <div className="mb-6">
            <h2 className="text-sm text-gray-500 mb-2">Now Playing</h2>
            <div className="flex items-center p-2 bg-gray-50 rounded-lg">
              <img
                src={currentSong.albumArt || "/placeholder.svg?height=48&width=48"}
                alt={currentSong.title}
                className="w-12 h-12 rounded-lg mr-3 object-cover"
                onError={(e) => {
                  e.currentTarget.src = "/placeholder.svg?height=48&width=48"
                }}
              />
              <div className="flex-1">
                <h3 className="font-medium text-sm">{currentSong.title}</h3>
                <p className="text-xs text-gray-500">{currentSong.artist}</p>
              </div>
              <List className="h-5 w-5 text-gray-400" />
            </div>
          </div>
        )}

{/* Queue */}
        <div>
          <h2 className="text-sm text-gray-500 mb-2">Up Next</h2>
          {queue.length === 0 ? (
            <div className="text-center py-8 text-gray-400">Your queue is empty</div>
          ) : (
            <div className="space-y-2">
              {queue.map((song) => (
                <div key={song.id} className="flex items-center p-2 hover:bg-gray-50 rounded-lg">
                  <img
                    src={song.albumArt || "/placeholder.svg?height=48&width=48"}
                    alt={song.title}
                    className="w-12 h-12 rounded-lg mr-3 object-cover"
                    onError={(e) => {
                      e.currentTarget.src = "/placeholder.svg?height=48&width=48"
                    }}
                  />
                  <div className="flex-1 cursor-pointer" onClick={() => handleSongClick(song)}>
                    <h3 className="font-medium text-sm">{song.title}</h3>
                    <p className="text-xs text-gray-500">{song.artist}</p>
                  </div>
                  <button className="p-2" onClick={() => removeFromQueue(song.id)}>
                    <X className="h-5 w-5 text-gray-400" />
                  </button>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescript:file="components/music/radio-view.tsx" isMerged="true"
"use client"

import { Radio, Play } from "lucide-react"

export function RadioView() {
  return (
    <div className="h-full overflow-auto">
      <div className="px-4 pt-14 pb-4">
        <h1 className="text-2xl font-bold">Radio</h1>
      </div>

{/* Featured Radio */}
      <div className="px-4 mb-6">
        <div className="bg-gradient-to-r from-purple-500 to-purple-600 rounded-xl p-4 text-white">
          <h2 className="text-sm font-medium mb-2">FEATURED STATION</h2>
          <div className="flex items-center">
            <div className="w-20 h-20 rounded-lg mr-4 bg-purple-400 flex items-center justify-center">
              <Radio className="h-10 w-10 text-white" />
            </div>
            <div className="flex-1">
              <h3 className="font-bold text-lg">Today's Hits</h3>
              <p className="text-sm text-white/80">The biggest hits right now</p>
              <button className="mt-2 bg-white text-purple-500 px-4 py-1 rounded-full text-sm font-medium flex items-center gap-1">
                <Play className="h-3 w-3" /> Listen Now
              </button>
            </div>
          </div>
        </div>
      </div>

{/* Radio Stations */}
      <div className="px-4 pb-4">
        <h2 className="text-lg font-semibold mb-3">Popular Stations</h2>
        <div className="space-y-3">
          {[
            { name: "Hip-Hop Beats", description: "Latest hip-hop tracks", color: "bg-red-500" },
            { name: "Chill Lounge", description: "Relaxing ambient music", color: "bg-blue-500" },
            { name: "Workout Mix", description: "High energy for your workout", color: "bg-green-500" },
            { name: "Classic Rock", description: "Timeless rock hits", color: "bg-yellow-500" },
            { name: "Jazz Cafe", description: "Smooth jazz selections", color: "bg-indigo-500" },
          ].map((station, index) => (
            <div key={index} className="flex items-center p-3 hover:bg-gray-50 rounded-lg cursor-pointer">
              <div className={`w-12 h-12 rounded-lg mr-3 ${station.color} flex items-center justify-center`}>
                <Radio className="h-6 w-6 text-white" />
              </div>
              <div className="flex-1">
                <h3 className="font-medium text-sm">{station.name}</h3>
                <p className="text-xs text-gray-500">{station.description}</p>
              </div>
              <Play className="h-5 w-5 text-gray-400" />
            </div>
          ))}
        </div>
      </div>

{/* Categories */}
      <div className="px-4 pb-20">
        <h2 className="text-lg font-semibold mb-3">Categories</h2>
        <div className="grid grid-cols-2 gap-3">
          {["Pop", "Rock", "Electronic", "Hip-Hop", "R&B", "Country", "Jazz", "Classical"].map((category) => (
            <div
              key={category}
              className="aspect-video bg-gradient-to-br from-gray-700 to-gray-900 rounded-lg flex items-center justify-center text-white font-bold"
            >
              {category}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescript:file="components/music/library-view.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Music, Mic, Clock, Download, Heart, Plus, MoreVertical } from "lucide-react"
import { FEATURED_ALBUMS, SAMPLE_SONGS } from "@/lib/music-data"
import { useMusicStore } from "@/lib/music-state"

export function LibraryView() {
  const { setCurrentSong, setIsPlaying } = useMusicStore()
  const [activeCategory, setActiveCategory] = useState<"playlists" | "artists" | "albums">("playlists")

const handleSongClick = (songId: string) => {
    const song = SAMPLE_SONGS.find((s) => s.id === songId)
    if (song) {
      setCurrentSong(song)
      setIsPlaying(true)
    }
  }

return (
    <div className="h-full overflow-auto">
      <div className="px-4 pt-14 pb-4">
        <h1 className="text-2xl font-bold">Library</h1>
      </div>

{/* Category Tabs */}
      <div className="px-4 mb-4">
        <div className="flex space-x-4 border-b">
          <button
            className={`pb-2 px-1 text-sm font-medium ${
              activeCategory === "playlists" ? "text-red-500 border-b-2 border-red-500" : "text-gray-500"
            }`}
            onClick={() => setActiveCategory("playlists")}
          >
            Playlists
          </button>
          <button
            className={`pb-2 px-1 text-sm font-medium ${
              activeCategory === "artists" ? "text-red-500 border-b-2 border-red-500" : "text-gray-500"
            }`}
            onClick={() => setActiveCategory("artists")}
          >
            Artists
          </button>
          <button
            className={`pb-2 px-1 text-sm font-medium ${
              activeCategory === "albums" ? "text-red-500 border-b-2 border-red-500" : "text-gray-500"
            }`}
            onClick={() => setActiveCategory("albums")}
          >
            Albums
          </button>
        </div>
      </div>

{/* Library Categories */}
      <div className="px-4 mb-6">
        <div className="space-y-3">
          <div className="flex items-center p-3 hover:bg-gray-50 rounded-lg cursor-pointer">
            <div className="w-10 h-10 rounded-lg bg-red-100 flex items-center justify-center mr-3">
              <Music className="h-5 w-5 text-red-500" />
            </div>
            <div className="flex-1">
              <h3 className="font-medium text-sm">All Songs</h3>
              <p className="text-xs text-gray-500">{SAMPLE_SONGS.length} songs</p>
            </div>
          </div>
          <div className="flex items-center p-3 hover:bg-gray-50 rounded-lg cursor-pointer">
            <div className="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center mr-3">
              <Heart className="h-5 w-5 text-purple-500" />
            </div>
            <div className="flex-1">
              <h3 className="font-medium text-sm">Favorites</h3>
              <p className="text-xs text-gray-500">3 songs</p>
            </div>
          </div>
          <div className="flex items-center p-3 hover:bg-gray-50 rounded-lg cursor-pointer">
            <div className="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center mr-3">
              <Download className="h-5 w-5 text-blue-500" />
            </div>
            <div className="flex-1">
              <h3 className="font-medium text-sm">Downloaded</h3>
              <p className="text-xs text-gray-500">2 songs</p>
            </div>
          </div>
          <div className="flex items-center p-3 hover:bg-gray-50 rounded-lg cursor-pointer">
            <div className="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center mr-3">
              <Clock className="h-5 w-5 text-green-500" />
            </div>
            <div className="flex-1">
              <h3 className="font-medium text-sm">Recently Played</h3>
              <p className="text-xs text-gray-500">4 songs</p>
            </div>
          </div>
        </div>
      </div>

{/* Playlists */}
      {activeCategory === "playlists" && (
        <div className="px-4 pb-4">
          <div className="flex justify-between items-center mb-3">
            <h2 className="text-lg font-semibold">My Playlists</h2>
            <button className="text-red-500">
              <Plus className="h-5 w-5" />
            </button>
          </div>
          <div className="space-y-3">
            {FEATURED_ALBUMS.map((album) => (
              <div key={album.id} className="flex items-center p-3 hover:bg-gray-50 rounded-lg cursor-pointer">
                <img
                  src={album.artwork || "/placeholder.svg?height=48&width=48"}
                  alt={album.title}
                  className="w-12 h-12 rounded-lg mr-3 object-cover"
                  onError={(e) => {
                    e.currentTarget.src = "/placeholder.svg?height=48&width=48"
                  }}
                />
                <div className="flex-1">
                  <h3 className="font-medium text-sm">{album.title}</h3>
                  <p className="text-xs text-gray-500">{album.songs.length} songs</p>
                </div>
                <MoreVertical className="h-5 w-5 text-gray-400" />
              </div>
            ))}
          </div>
        </div>
      )}

{/* Albums */}
      {activeCategory === "albums" && (
        <div className="px-4 pb-20">
          <h2 className="text-lg font-semibold mb-3">Albums</h2>
          <div className="grid grid-cols-2 gap-4">
            {FEATURED_ALBUMS.map((album) => (
              <div key={album.id} className="flex flex-col cursor-pointer">
                <div className="aspect-square rounded-lg overflow-hidden bg-gray-100">
                  <img
                    src={album.artwork || "/placeholder.svg?height=200&width=200"}
                    alt={album.title}
                    className="w-full h-full object-cover"
                    onError={(e) => {
                      e.currentTarget.src = "/placeholder.svg?height=200&width=200"
                    }}
                  />
                </div>
                <div className="mt-2">
                  <h3 className="font-medium text-sm truncate">{album.title}</h3>
                  <p className="text-xs text-gray-500 truncate">{album.artist}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

{/* Artists */}
      {activeCategory === "artists" && (
        <div className="px-4 pb-20">
          <h2 className="text-lg font-semibold mb-3">Artists</h2>
          <div className="space-y-3">
            {["OLEXY", "MUSICTOWN", "FASSounds", "Alex_MakeMusic", "Urban Beats"].map((artist, index) => (
              <div key={index} className="flex items-center p-3 hover:bg-gray-50 rounded-lg cursor-pointer">
                <div className="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center mr-3">
                  <Mic className="h-6 w-6 text-gray-500" />
                </div>
                <div className="flex-1">
                  <h3 className="font-medium text-sm">{artist}</h3>
                  <p className="text-xs text-gray-500">Artist</p>
                </div>
                <MoreVertical className="h-5 w-5 text-gray-400" />
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescript:file="components/dynamic-island/music-island.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Play, Pause, SkipBack, SkipForward, Speaker } from "lucide-react"
import { useMusicStore } from "@/lib/music-state"

export function MusicIsland() {
  const { currentSong, isPlaying, setIsPlaying, playNextSong, playPreviousSong, showMusicIsland } = useMusicStore()
  const [timeRemaining, setTimeRemaining] = useState("0:00")
  const [progress, setProgress] = useState(0)

// Update progress and time remaining
  useEffect(() => {
    if (!currentSong) return

const updateProgress = () => {
      const audio = document.querySelector("audio")
      if (audio) {
        // Update progress
        const currentProgress = (audio.currentTime / audio.duration) * 100
        setProgress(isNaN(currentProgress) ? 0 : currentProgress)

// Update time remaining
        const remaining = audio.duration - audio.currentTime
        if (!isNaN(remaining)) {
          const minutes = Math.floor(remaining / 60)
          const seconds = Math.floor(remaining % 60)
          setTimeRemaining(`-${minutes}:${seconds.toString().padStart(2, "0")}`)
        }
      }
    }

const interval = setInterval(updateProgress, 1000)

// Also listen for timeupdate events
    const audio = document.querySelector("audio")
    if (audio) {
      audio.addEventListener("timeupdate", updateProgress)
    }

return () => {
      clearInterval(interval)
      if (audio) {
        audio.removeEventListener("timeupdate", updateProgress)
      }
    }
  }, [currentSong])

if (!currentSong || !showMusicIsland) return null

return (
    <div
      className="absolute top-2 left-1/2 -translate-x-1/2 w-[95%] max-w-[350px] bg-black rounded-[32px] overflow-hidden z-[9999]"
      style={{
        boxShadow: "0 0 0 1px rgba(255, 0, 128, 0.2), 0 0 20px 0 rgba(255, 0, 128, 0.3)",
        background: "linear-gradient(to bottom, rgba(30, 30, 30, 0.95), rgba(10, 10, 10, 0.98))",
      }}
    >
      <div className="p-3 flex items-center gap-3">
        <img
          src={currentSong.albumArt || "/placeholder.svg?height=48&width=48"}
          alt={currentSong.title}
          className="w-12 h-12 rounded-lg object-cover"
          onError={(e) => {
            e.currentTarget.src = "/placeholder.svg?height=48&width=48"
          }}
        />
        <div className="flex-1 min-w-0">
          <div className="text-sm font-medium text-white truncate">{currentSong.title}</div>
          <div className="text-xs text-white/70 truncate">{currentSong.artist}</div>
          <div className="flex items-center mt-1 gap-2">
            <div className="text-xs text-white/50">{timeRemaining}</div>
            {/* Progress bar */}
            <div className="flex-1 h-1 bg-white/20 rounded-full overflow-hidden">
              <div className="h-full bg-white transition-all duration-100" style={{ width: `${progress}%` }} />
            </div>
          </div>
        </div>
        <div className="flex items-center gap-4 ml-2">
          <button className="text-white" onClick={playPreviousSong}>
            <SkipBack className="h-5 w-5" />
          </button>
          <button className="text-white" onClick={() => setIsPlaying(!isPlaying)}>
            {isPlaying ? <Pause className="h-6 w-6" /> : <Play className="h-6 w-6" />}
          </button>
          <button className="text-white" onClick={playNextSong}>
            <SkipForward className="h-5 w-5" />
          </button>
          <button className="text-white">
            <Speaker className="h-5 w-5" />
          </button>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescript:file="components/iphone.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { HomeScreen } from "./home-screen"
import { AppScreen } from "./app-screen"
import { MusicIsland } from "./dynamic-island/music-island"
import { PersistentAudioPlayer } from "./persistent-audio-player"
import type { AppName } from "@/lib/types"

export function IPhone() {
  const [activeApp, setActiveApp] = useState<AppName | null>(null)

return (
    <div className="relative w-[375px] h-[812px] bg-black rounded-[55px] overflow-hidden">
      {/* Persistent Audio Player - this must be included for audio to work */}
      <PersistentAudioPlayer />

{/* iPhone Frame */}
      <div className="absolute inset-0 pointer-events-none">
        {/* Notch */}
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[40%] h-[34px] bg-black rounded-b-[20px] z-[9998]" />
      </div>

{/* Dynamic Island - positioned with highest z-index */}
      <div className="absolute inset-0 z-[9999] pointer-events-auto">
        <MusicIsland />
      </div>

{/* Screen Content */}
      <div className="relative w-full h-full bg-[#f6f6f6] overflow-hidden">
        {activeApp ? (
          <AppScreen app={activeApp} onClose={() => setActiveApp(null)} />
        ) : (
          <HomeScreen onAppClick={setActiveApp} />
        )}
      </div>
    </div>
  )
}

[V0_FILE]typescript:file="components/persistent-audio-player.tsx" isMerged="true"
"use client"

import { useEffect, useRef } from "react"
import { useMusicStore } from "@/lib/music-state"

export function PersistentAudioPlayer() {
  const audioRef = useRef<HTMLAudioElement>(null)
  const { currentSong, isPlaying, setIsPlaying, toggleMusicIsland } = useMusicStore()

// Set up audio element when component mounts
  useEffect(() => {
    const audio = audioRef.current
    if (!audio) return

// Set up event listeners
    const handleEnded = () => {
      console.log("Audio ended")
      setIsPlaying(false)
    }

const handleError = (e: ErrorEvent) => {
      console.error("Audio error:", e)
      setIsPlaying(false)
    }

const handleCanPlay = () => {
      console.log("Audio can play")
      if (isPlaying) {
        audio.play().catch((err) => {
          console.error("Play error:", err)
          setIsPlaying(false)
        })
      }
    }

audio.addEventListener("ended", handleEnded)
    audio.addEventListener("error", handleError as EventListener)
    audio.addEventListener("canplay", handleCanPlay)

return () => {
      audio.removeEventListener("ended", handleEnded)
      audio.removeEventListener("error", handleError as EventListener)
      audio.removeEventListener("canplay", handleCanPlay)
    }
  }, [setIsPlaying, isPlaying])

// Handle song changes
  useEffect(() => {
    const audio = audioRef.current
    if (!audio || !currentSong) return

console.log("Loading song:", currentSong.title, currentSong.audioUrl)

// Update audio source
    audio.src = currentSong.audioUrl
    audio.load()

// Show music island when we have a current song
    toggleMusicIsland(!!currentSong)
  }, [currentSong, toggleMusicIsland])

// Handle play/pause state changes
  useEffect(() => {
    const audio = audioRef.current
    if (!audio || !currentSong) return

console.log("Play state changed:", isPlaying)

if (isPlaying) {
      audio.play().catch((err) => {
        console.error("Play error:", err)
        setIsPlaying(false)
      })
    } else {
      audio.pause()
    }

// Update music island visibility based on playback state
    toggleMusicIsland(isPlaying && !!currentSong)
  }, [isPlaying, currentSong, setIsPlaying, toggleMusicIsland])

return <audio ref={audioRef} preload="auto" style={{ display: "none" }} />
}

[V0_FILE]typescript:file="components/phone/phone-app.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Star, Clock, User2, Hash, Voicemail, Phone, X } from "lucide-react"
import { KeyPad } from "./keypad"
import { motion } from "framer-motion"
import { cn } from "@/lib/utils"

export function PhoneApp() {
  const [activeTab, setActiveTab] = useState<"favorites" | "recents" | "contacts" | "keypad" | "voicemail">("keypad")
  const [number, setNumber] = useState("")
  const [contactName, setContactName] = useState<string | null>(null)

// Easter egg: If someone types Jenny's number
  const handleNumberChange = (newNumber: string) => {
    setNumber(newNumber)
    if (newNumber === "8675309") {
      setContactName("Jenny")
    } else {
      setContactName(null)
    }
  }

const handleKeyPress = (key: string) => {
    if (number.length < 10) {
      handleNumberChange(number + key)
    }
  }

const handleDelete = () => {
    handleNumberChange(number.slice(0, -1))
  }

const formatPhoneNumber = (num: string) => {
    if (num.length === 0) return ""
    if (num.length <= 3) return num
    if (num.length <= 6) return `${num.slice(0, 3)}-${num.slice(3)}`
    return `${num.slice(0, 3)}-${num.slice(3, 6)}-${num.slice(6)}`
  }

const tabs = [
    { id: "favorites", icon: Star, label: "Favorites" },
    { id: "recents", icon: Clock, label: "Recents" },
    { id: "contacts", icon: User2, label: "Contacts" },
    { id: "keypad", icon: Hash, label: "Keypad" },
    { id: "voicemail", icon: Voicemail, label: "Voicemail" },
  ] as const

return (
    <div className="h-full w-full bg-white flex flex-col">
      {/* Display */}
      <div className="flex-1 flex flex-col items-center justify-center p-4">
        <div className="text-4xl font-light mb-2">{number}</div>
        {contactName && (
          <div className="text-sm text-gray-500 flex items-center gap-1">
            <span>{contactName}</span>
            <span>{formatPhoneNumber(number)}</span>
          </div>
        )}
        {number && !contactName && <div className="text-sm text-gray-500">{formatPhoneNumber(number)}</div>}
      </div>

{/* Keypad */}
      <KeyPad onKeyPress={handleKeyPress} />

{/* Call/Delete Buttons */}
      <div className="flex justify-center items-center gap-4 py-4">
        {number && (
          <motion.button
            initial={{ scale: 0 }}
            animate={{ scale: 1 }}
            exit={{ scale: 0 }}
            className="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center"
            onClick={handleDelete}
          >
            <X className="h-6 w-6 text-gray-600" />
          </motion.button>
        )}
        <button
          className={cn(
            "w-16 h-16 rounded-full flex items-center justify-center",
            number ? "bg-green-500" : "bg-gray-200",
          )}
        >
          <Phone className={cn("h-6 w-6", number ? "text-white" : "text-gray-600")} />
        </button>
      </div>

{/* Bottom Navigation */}
      <div className="flex justify-around items-center py-2 border-t">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            onClick={() => setActiveTab(tab.id)}
            className={`flex flex-col items-center p-2 ${activeTab === tab.id ? "text-green-500" : "text-gray-400"}`}
          >
            <tab.icon className="h-6 w-6" />
            <span className="text-xs mt-1">{tab.label}</span>
          </button>
        ))}
      </div>
    </div>
  )
}

[V0_FILE]typescript:file="components/phone/keypad.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"

interface KeyPadProps {
  onKeyPress: (key: string) => void
}

export function KeyPad({ onKeyPress }: KeyPadProps) {
  const keys = [
    { number: "1", letters: "" },
    { number: "2", letters: "ABC" },
    { number: "3", letters: "DEF" },
    { number: "4", letters: "GHI" },
    { number: "5", letters: "JKL" },
    { number: "6", letters: "MNO" },
    { number: "7", letters: "PQRS" },
    { number: "8", letters: "TUV" },
    { number: "9", letters: "WXYZ" },
    { number: "*", letters: "" },
    { number: "0", letters: "+" },
    { number: "#", letters: "" },
  ]

return (
    <div className="grid grid-cols-3 gap-4 px-4">
      {keys.map((key) => (
        <motion.button
          key={key.number}
          whileTap={{ scale: 0.95 }}
          onClick={() => onKeyPress(key.number)}
          className="aspect-square rounded-full bg-gray-100 flex flex-col items-center justify-center"
        >
          <span className="text-2xl font-light">{key.number}</span>
          {key.letters && <span className="text-[10px] text-gray-500 mt-1">{key.letters}</span>}
        </motion.button>
      ))}
    </div>
  )
}

[V0_FILE]typescript:file="components/app-view.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { motion } from "framer-motion"
import { ArrowLeft } from "lucide-react"
import { Clock } from "@/components/clock"
import { Settings } from "@/components/settings"
import { Weather } from "@/components/weather"
import { Calendar } from "@/components/calendar"
import { Camera } from "@/components/camera"
import { Photos } from "@/components/photos"
import { NotesApp } from "@/components/notes/notes-app"
import { useAppState } from "@/lib/app-state"
import { HomeIndicator } from "@/components/home-indicator"
import { MessagesApp } from "@/components/messages/messages-app"
import { SafariApp } from "@/components/safari/safari-app"
import { MusicApp } from "@/components/music/music-app"
import { PhoneApp } from "@/components/phone/phone-app"

interface AppViewProps {
  appId: string
}

export function AppView({ appId }: AppViewProps) {
  const { closeApp } = useAppState()

const handleBackClick = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    closeApp()
  }

const renderApp = () => {
    switch (appId) {
      case "clock":
        return <Clock />
      case "settings":
        return <Settings />
      case "weather":
        return <Weather />
      case "calendar":
        return <Calendar />
      case "camera":
        return <Camera />
      case "photos":
        return <Photos />
      case "notes":
        return <NotesApp />
      case "messages":
        return <MessagesApp />
      case "safari":
        return <SafariApp />
      case "music":
        return <MusicApp />
      case "phone":
        return <PhoneApp />
      default:
        return (
          <div className="flex flex-col items-center justify-center h-full bg-white text-black p-6">
            <div className="text-2xl font-bold mb-4">{appId.charAt(0).toUpperCase() + appId.slice(1)} App</div>
            <div className="text-sm text-gray-500">This is a placeholder for the {appId} app</div>
          </div>
        )
    }
  }

const showHeader = !["camera", "messages", "photos", "notes", "safari", "phone"].includes(appId)

return (
    <HomeIndicator>
      <div className="h-full w-full bg-white flex flex-col">
        {showHeader && (
          <div className="flex items-center px-4 py-3 border-b mt-12">
            <motion.button whileTap={{ scale: 0.9 }} onClick={handleBackClick} className="text-blue-500 z-40">
              <ArrowLeft className="h-5 w-5" />
            </motion.button>
            <div className="text-center flex-1 font-semibold -ml-5">
              {appId.charAt(0).toUpperCase() + appId.slice(1)}
            </div>
          </div>
        )}

<div className={`flex-1 overflow-auto ${!showHeader ? "pt-0" : ""}`}>{renderApp()}</div>
      </div>
    </HomeIndicator>
  )
}

[V0_FILE]typescript:file="lib/types.ts" isQuickEdit="true" isMerged="true"
export interface Song {
  id: string
  title: string
  artist: string
  albumArt: string
  audioUrl: string
}

export interface Album {
  id: string
  title: string
  artist: string
  artwork: string
  songs: Song[]
}

export interface Message {
  id: string
  content: string
  sender: string
  timestamp: number
  status?: "sending" | "sent" | "delivered" | "read"
  reactions?: string[]
}

export interface Conversation {
  id: string
  contact: {
    id: string
    name: string
    avatar: string
    isOnline: boolean
  }
  messages: Message[]
  lastMessageAt: number
  unreadCount: number
}

export interface ChatMessage {
  id: string
  sender: string
  content: string
  timestamp: number
  currentSong?: Song
}

[V0_FILE]typescriptreact:file="components/control-center/modules/music-module.tsx" isMerged="true"
"use client"

import { useMusicStore } from "@/lib/music-state"
import { SkipBack, Play, Pause, SkipForward } from "lucide-react"

export function MusicModule() {
  const { currentSong, isPlaying, setIsPlaying } = useMusicStore()

if (!currentSong) return null

return (
    <div className="bg-white/10 backdrop-blur-md rounded-2xl p-3 aspect-square">
      <div className="flex flex-col h-full">
        <div className="flex items-center mb-2">
          <div className="w-12 h-12 rounded-lg overflow-hidden mr-3">
            <img
              src={currentSong.albumArt || "/placeholder.svg?height=48&width=48"}
              alt={currentSong.title}
              className="w-full h-full object-cover"
            />
          </div>
          <div className="flex-1 overflow-hidden">
            <h3 className="text-white text-sm font-medium truncate">{currentSong.title}</h3>
            <p className="text-white/70 text-xs truncate">{currentSong.artist}</p>
          </div>
        </div>

<button className="text-white" onClick={() => setIsPlaying(!isPlaying)}>
            {isPlaying ? <Pause className="h-8 w-8" /> : <Play className="h-8 w-8" />}
          </button>

<button className="text-white">
            <SkipForward className="h-6 w-6" />
          </button>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/control-center/modules/slider-module.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Sun, Volume2 } from "lucide-react"

interface SliderModuleProps {
  type: "brightness" | "volume"
}

export function SliderModule({ type }: SliderModuleProps) {
  const [value, setValue] = useState(50)

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(Number.parseInt(e.target.value))
  }

return (
    <div className="bg-white/10 backdrop-blur-md rounded-2xl p-3 flex items-center">
      <div className="mr-3">
        {type === "brightness" ? <Sun className="h-5 w-5 text-white" /> : <Volume2 className="h-5 w-5 text-white" />}
      </div>

<div className="flex-1">
        <input
          type="range"
          min="0"
          max="100"
          value={value}
          onChange={handleChange}
          className="w-full h-1 bg-white/20 rounded-full appearance-none cursor-pointer"
          style={{
            background: `linear-gradient(to right, white ${value}%, rgba(255,255,255,0.2) ${value}%)`,
          }}
        />
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/control-center/modules/focus-module.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Moon, MessageCircle, BellRing } from "lucide-react"
import { cn } from "@/lib/utils"

export function FocusModule() {
  const [isFocusActive, setIsFocusActive] = useState(false)

return (
    <button
      className={cn(
        "bg-white/10 backdrop-blur-md rounded-2xl p-3 flex items-center",
        isFocusActive ? "bg-purple-500/30" : "bg-white/10",
      )}
      onClick={() => setIsFocusActive(!isFocusActive)}
    >
      <div className="flex space-x-2">
        <div className="w-8 h-8 rounded-full bg-purple-500/50 flex items-center justify-center">
          <Moon className="h-4 w-4 text-white" />
        </div>
        <div className="w-8 h-8 rounded-full bg-green-500/50 flex items-center justify-center">
          <MessageCircle className="h-4 w-4 text-white" />
        </div>
        <div className="w-8 h-8 rounded-full bg-blue-500/50 flex items-center justify-center">
          <BellRing className="h-4 w-4 text-white" />
        </div>
      </div>

<div className="ml-3 text-white font-medium">Focus</div>
    </button>
  )
}

[V0_FILE]typescriptreact:file="components/control-center/control-center.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { motion, AnimatePresence } from "framer-motion"
import { useAppState } from "@/lib/app-state"
import { useEffect, useState } from "react"
import { useMusicStore } from "@/lib/music-state"
import { ConnectivityModule } from "./modules/connectivity-module"
import { MusicModule } from "./modules/music-module"
import { ScreenModule } from "./modules/screen-module"
import { SliderModule } from "./modules/slider-module"
import { FocusModule } from "./modules/focus-module"
import { UtilityModule } from "./modules/utility-module"
import { StatusBar } from "../status-bar"

export function ControlCenter() {
  const { controlCenterOpen, closeControlCenter } = useAppState()
  const { currentSong } = useMusicStore()
  const [time, setTime] = useState(new Date())

useEffect(() => {
    const timer = setInterval(() => {
      setTime(new Date())
    }, 1000)

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

return (
    <AnimatePresence>
      {controlCenterOpen && (
        <>
          {/* Backdrop */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.2 }}
            className="fixed inset-0 z-50 bg-black/20"
            onClick={closeControlCenter}
          />

{/* Control Center Panel */}
          <motion.div
            initial={{ y: "-100%" }}
            animate={{ y: 0 }}
            exit={{ y: "-100%" }}
            transition={{ type: "spring", damping: 25, stiffness: 300 }}
            className="fixed inset-0 z-50 overflow-auto"
            style={{
              background: "rgba(0, 0, 0, 0.4)",
              backdropFilter: "blur(20px)",
            }}
          >
            <div className="min-h-full w-full p-4 pt-0">
              <StatusBar time={time} dark />

<div className="grid grid-cols-2 gap-3 mt-2">
                {/* Connectivity Module */}
                <ConnectivityModule />

{/* Music Module */}
                {currentSong ? (
                  <MusicModule />
                ) : (
                  <div className="bg-white/10 backdrop-blur-md rounded-2xl p-3 aspect-square"></div>
                )}

{/* Screen Mirroring & Rotation Lock */}
                <div className="grid grid-cols-2 gap-3">
                  <ScreenModule icon="lock" label="Rotation" />
                  <ScreenModule icon="screen" label="Screen Mirror" />
                </div>

{/* Brightness & Volume Sliders */}
                <div className="grid grid-cols-1 gap-3">
                  <SliderModule type="brightness" />
                  <SliderModule type="volume" />
                </div>

{/* Focus Mode */}
                <FocusModule />

{/* Utilities */}
                <div className="grid grid-cols-2 gap-3">
                  <UtilityModule icon="flashlight" />
                  <UtilityModule icon="timer" />
                </div>

{/* QR Code Scanner */}
                <div className="col-span-1">
                  <UtilityModule icon="qrcode" />
                </div>
              </div>
            </div>
          </motion.div>
        </>
      )}
    </AnimatePresence>
  )
}

[V0_FILE]typescriptreact:file="components/control-center/modules/connectivity-module.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Wifi, Bluetooth, Plane, Signal } from "lucide-react"
import { cn } from "@/lib/utils"

export function ConnectivityModule() {
  const [airplaneMode, setAirplaneMode] = useState(false)
  const [wifiEnabled, setWifiEnabled] = useState(true)
  const [bluetoothEnabled, setBluetoothEnabled] = useState(true)
  const [cellularEnabled, setCellularEnabled] = useState(true)

return (
    <div className="bg-white/5 backdrop-blur-md rounded-2xl p-3 aspect-square">
      <div className="grid grid-cols-2 gap-2 h-full">
        <button
          className={cn(
            "rounded-full flex items-center justify-center transition-colors",
            airplaneMode ? "bg-blue-500" : "bg-white/20",
          )}
          onClick={() => setAirplaneMode(!airplaneMode)}
        >
          <Plane className={cn("h-5 w-5", airplaneMode ? "text-white" : "text-white/80")} />
        </button>

<button
          className={cn(
            "rounded-full flex items-center justify-center transition-colors",
            wifiEnabled ? "bg-blue-500" : "bg-white/20",
          )}
          onClick={() => setWifiEnabled(!wifiEnabled)}
        >
          <Wifi className={cn("h-5 w-5", wifiEnabled ? "text-white" : "text-white/80")} />
        </button>

<button
          className={cn(
            "rounded-full flex items-center justify-center transition-colors",
            cellularEnabled ? "bg-green-500" : "bg-white/20",
          )}
          onClick={() => setCellularEnabled(!cellularEnabled)}
        >
          <Signal className={cn("h-5 w-5", cellularEnabled ? "text-white" : "text-white/80")} />
        </button>

<button
          className={cn(
            "rounded-full flex items-center justify-center transition-colors",
            bluetoothEnabled ? "bg-blue-500" : "bg-white/20",
          )}
          onClick={() => setBluetoothEnabled(!bluetoothEnabled)}
        >
          <Bluetooth className={cn("h-5 w-5", bluetoothEnabled ? "text-white" : "text-white/80")} />
        </button>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/swipe-detector.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useEffect, useRef, useState } from "react"
import { useAppState } from "@/lib/app-state"

interface SwipeDetectorProps {
  children: React.ReactNode
}

export function SwipeDetector({ children }: SwipeDetectorProps) {
  const { openControlCenter, closeControlCenter, controlCenterOpen } = useAppState()
  const containerRef = useRef<HTMLDivElement>(null)
  const [touchStartY, setTouchStartY] = useState(0)
  const [touchStartX, setTouchStartX] = useState(0)

useEffect(() => {
    const container = containerRef.current
    if (!container) return

const handleTouchStart = (e: TouchEvent) => {
      setTouchStartY(e.touches[0].clientY)
      setTouchStartX(e.touches[0].clientX)
    }

const handleTouchMove = (e: TouchEvent) => {
      if (!touchStartY) return

const touchY = e.touches[0].clientY
      const touchX = e.touches[0].clientX
      const deltaY = touchY - touchStartY
      const deltaX = touchX - touchStartX

// Only consider vertical swipes (ignore diagonal)
      if (Math.abs(deltaX) > Math.abs(deltaY) * 0.8) return

// Swipe down anywhere to open control center
      if (!controlCenterOpen && deltaY > 50) {
        e.preventDefault()
        openControlCenter()
      }

// Swipe up anywhere to close control center
      if (controlCenterOpen && deltaY < -50) {
        e.preventDefault()
        closeControlCenter()
      }
    }

// Remove the direct click handler for testing as per the update request.

container.addEventListener("touchstart", handleTouchStart, { passive: false })
    container.addEventListener("touchmove", handleTouchMove, { passive: false })

return () => {
      container.removeEventListener("touchstart", handleTouchStart)
      container.removeEventListener("touchmove", handleTouchMove)
    }
  }, [touchStartY, touchStartX, openControlCenter, closeControlCenter, controlCenterOpen])

return (
    <div ref={containerRef} className="h-full w-full">
      {children}
    </div>
  )
}

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

import { useState, useEffect } from "react"
import { AnimatePresence, motion } from "framer-motion"
import { LockScreen } from "@/components/lock-screen"
import { HomeScreen } from "@/components/home-screen"
import { AppView } from "@/components/app-view"
import { useAppState } from "@/lib/app-state"
import { MoonIcon, SunIcon } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useTheme } from "next-themes"
import { WallpaperSwitcher } from "@/components/wallpaper-switcher"
import { useWallpaper } from "@/lib/wallpaper-state"
import { IPhoneFrame } from "@/components/iphone-frame"
import { ControlCenter } from "@/components/control-center/control-center"
import { SwipeDetector } from "@/components/swipe-detector"

export default function IPhoneInterface() {
  const { currentApp, isLocked, openControlCenter } = useAppState()
  const [time, setTime] = useState(new Date())
  const { theme, setTheme } = useTheme()
  const [mounted, setMounted] = useState(false)
  const { getWallpaperUrl } = useWallpaper()

useEffect(() => {
    setMounted(true)
    const timer = setInterval(() => {
      setTime(new Date())
    }, 1000)

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

if (!mounted) return null

return (
    <div className="flex flex-col items-center justify-center min-h-screen p-4 transition-all duration-500 select-none bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 dark:from-blue-900 dark:via-indigo-950 dark:to-purple-900">
      {/* Theme and wallpaper toggles */}
      <div className="absolute top-4 right-4 flex gap-2">
        <WallpaperSwitcher />
        <Button
          variant="outline"
          size="icon"
          onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
          className="rounded-full"
        >
          {theme === "dark" ? <SunIcon className="h-5 w-5" /> : <MoonIcon className="h-5 w-5" />}
          <span className="sr-only">Toggle theme</span>
        </Button>
      </div>

{/* iPhone frame */}
      <IPhoneFrame>
        <SwipeDetector>
          <div className="relative h-full pt-12 overflow-hidden">
            <AnimatePresence mode="wait">
              {isLocked ? (
                <motion.div
                  key="lock-screen"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
                  transition={{ duration: 0.3 }}
                  className="absolute inset-0 rounded-[26px]"
                  style={{
                    backgroundImage: `url(${getWallpaperUrl()})`,
                    backgroundSize: "cover",
                    backgroundPosition: "center",
                  }}
                >
                  <LockScreen time={time} />
                </motion.div>
              ) : currentApp ? (
                <motion.div
                  key={`app-${currentApp}`}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, scale: 0.9 }}
                  transition={{ duration: 0.2 }}
                  className="absolute inset-0 rounded-[26px]"
                >
                  <AppView appId={currentApp} />
                </motion.div>
              ) : (
                <motion.div
                  key="home-screen"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
                  transition={{ duration: 0.3 }}
                  className="absolute inset-0 rounded-[26px]"
                  style={{
                    backgroundImage: `url(${getWallpaperUrl()})`,
                    backgroundSize: "cover",
                    backgroundPosition: "center",
                  }}
                >
                  <HomeScreen time={time} />
                </motion.div>
              )}
            </AnimatePresence>

{/* Control Center */}
            <ControlCenter />
          </div>
        </SwipeDetector>
      </IPhoneFrame>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/control-center/modules/screen-module.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { LockIcon as LockRotate, Tv2 } from "lucide-react"
import { cn } from "@/lib/utils"

interface ScreenModuleProps {
  icon: "lock" | "screen"
  label: string
}

export function ScreenModule({ icon, label }: ScreenModuleProps) {
  const [isActive, setIsActive] = useState(false)

return (
    <button
      className={cn(
        "rounded-full flex flex-col items-center justify-center aspect-square transition-colors",
        isActive ? "bg-white/20" : "bg-white/5",
      )}
      onClick={() => setIsActive(!isActive)}
    >
      {icon === "lock" ? <LockRotate className="h-5 w-5 text-white" /> : <Tv2 className="h-5 w-5 text-white" />}
    </button>
  )
}

[V0_FILE]typescriptreact:file="components/control-center/modules/utility-module.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Flashlight, Timer, Calculator, Camera, QrCode } from "lucide-react"
import { cn } from "@/lib/utils"
import { useAppState } from "@/lib/app-state"

interface UtilityModuleProps {
  icon: "flashlight" | "timer" | "calculator" | "camera" | "qrcode"
}

export function UtilityModule({ icon }: UtilityModuleProps) {
  const [isActive, setIsActive] = useState(false)
  const { openApp, closeControlCenter } = useAppState()

const handleClick = () => {
    if (icon === "flashlight" || icon === "qrcode") {
      setIsActive(!isActive)
    } else {
      closeControlCenter()

// Open corresponding app
      if (icon === "camera") {
        openApp("camera")
      } else if (icon === "calculator") {
        openApp("calculator")
      } else if (icon === "timer") {
        openApp("clock")
      }
    }
  }

const getIcon = () => {
    switch (icon) {
      case "flashlight":
        return <Flashlight className="h-6 w-6 text-white" />
      case "timer":
        return <Timer className="h-6 w-6 text-white" />
      case "calculator":
        return <Calculator className="h-6 w-6 text-white" />
      case "camera":
        return <Camera className="h-6 w-6 text-white" />
      case "qrcode":
        return <QrCode className="h-6 w-6 text-white" />
    }
  }

const getBackgroundColor = () => {
    if (!isActive) return "bg-white/5"

switch (icon) {
      case "flashlight":
        return "bg-yellow-500/50"
      case "qrcode":
        return "bg-white/20"
      default:
        return "bg-white/5"
    }
  }

return (
    <button
      className={cn(
        "rounded-full flex items-center justify-center aspect-square transition-colors",
        getBackgroundColor(),
      )}
      onClick={handleClick}
    >
      {getIcon()}
    </button>
  )
}

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

import { motion } from "framer-motion"
import { useAppState } from "@/lib/app-state"
import Image from "next/image"
import type { ReactNode } from "react"

interface AppIconProps {
  id: string
  name: string
  color: string
  icon?: string | ReactNode
  customIcon?: ReactNode
  size?: "normal" | "small"
}

export function AppIcon({ id, name, color, icon, customIcon, size = "normal" }: AppIconProps) {
  const { openApp } = useAppState()

const renderIcon = () => {
    const svgIcons = [
      "facetime",
      "appstore",
      "music",
      "calendar",
      "messages",
      "podcasts",
      "safari",
      "maps",
      "health",
      "camera",
      "reminders",
      "phone",
      "mail",
      "clock",
      "settings",
      "wallet",
      "photos",
      "news",
      "tv",
      "notes",
    ]

if (svgIcons.includes(id)) {
      return (
        <Image
          src={`/icons/${id}.svg`}
          alt={`${name}`}
          width={size === "small" ? 28 : 56}
          height={size === "small" ? 28 : 56}
          className="w-full h-full"
          priority={true}
          onError={(e) => {
            console.error(`Failed to load icon: ${id}`)
            // Fallback to a colored div with text initial
            const target = e.target as HTMLImageElement
            target.style.display = "none"
            const parent = target.parentElement
            if (parent) {
              const fallback = document.createElement("div")
              fallback.className = "w-full h-full flex items-center justify-center"
              fallback.textContent = name[0].toUpperCase()
              parent.appendChild(fallback)
            }
          }}
        />
      )
    }

if (customIcon) return customIcon
    if (icon) return <div className="text-2xl">{icon}</div>
    return <div className="flex items-center justify-center w-full h-full">{name[0].toUpperCase()}</div>
  }

return (
    <div className="flex flex-col items-center select-none">
      <motion.div
        className={`app-icon ${color}`}
        whileTap={{ scale: 0.9 }}
        onClick={() => openApp(id)}
        onTouchStart={(e) => e.stopPropagation()}
        style={{
          width: size === "small" ? "100%" : "60px",
          height: size === "small" ? "100%" : "60px",
        }}
      >
        {renderIcon()}
      </motion.div>
      {size === "normal" && <div className="text-[10px] text-white mt-1">{name}</div>}
    </div>
  )
}

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

module.exports = nextConfig

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

import { useState, useEffect } from "react"
import { StatusBar } from "@/components/status-bar"
import { AppIcon } from "@/components/app-icon"
import { Widget } from "@/components/widget"
import { AppLibrary } from "@/components/app-library"
import { motion, AnimatePresence } from "framer-motion"
import { useAppState } from "@/lib/app-state"

interface HomeScreenProps {
  time: Date
}

export function HomeScreen({ time }: HomeScreenProps) {
  const [showAppLibrary, setShowAppLibrary] = useState(false)
  const [currentPage, setCurrentPage] = useState(0)
  const dayOfMonth = time.getDate()
  const { openControlCenter } = useAppState()

// Preload critical SVG icons
  useEffect(() => {
    const preloadIcons = [
      "facetime",
      "calendar",
      "photos",
      "camera",
      "mail",
      "notes",
      "reminders",
      "clock",
      "phone",
      "safari",
      "messages",
      "music",
    ]

preloadIcons.forEach((icon) => {
      const img = new Image()
      img.src = `/icons/${icon}.svg`
    })
  }, [])

const handleDragEnd = (event: any, info: any) => {
    if (info.offset.x < -50 && currentPage < 1) {
      // Swipe left
      setCurrentPage(currentPage + 1)
    } else if (info.offset.x > 50 && currentPage > 0) {
      // Swipe right
      setCurrentPage(currentPage - 1)
    } else if (info.offset.x < -50 && currentPage === 1) {
      // Open App Library from last page
      setShowAppLibrary(true)
    }
  }

// Add touch handler for swipe down from top
  useEffect(() => {
    const handleTouchStart = (e: TouchEvent) => {
      const touchY = e.touches[0].clientY
      if (touchY < 30) {
        // Touch started near the top of the screen
        const handleTouchMove = (moveEvent: TouchEvent) => {
          const currentY = moveEvent.touches[0].clientY
          if (currentY - touchY > 30) {
            // Swiped down at least 30px
            openControlCenter()
            document.removeEventListener("touchmove", handleTouchMove)
          }
        }

document.addEventListener("touchmove", handleTouchMove, { once: true })
      }
    }

document.addEventListener("touchstart", handleTouchStart)

return () => {
      document.removeEventListener("touchstart", handleTouchStart)
    }
  }, [openControlCenter])

return (
    <div
      className="h-full w-full flex flex-col relative select-none overflow-hidden"
      style={{
        backgroundImage: `url(/wallpaper.jpg)`,
        backgroundSize: "cover",
        backgroundPosition: "center",
      }}
    >
      <StatusBar time={time} dark />

{/* Pages Container */}
      <motion.div
        className="flex-1 relative"
        drag="x"
        dragConstraints={{ left: 0, right: 0 }}
        dragElastic={0.1}
        onDragEnd={handleDragEnd}
      >
        <AnimatePresence initial={false} mode="popLayout">
          {currentPage === 0 && (
            <motion.div
              key="page-0"
              className="absolute inset-0 px-6 pt-4 pb-6 flex flex-col"
              initial={{ x: "-100%" }}
              animate={{ x: 0 }}
              exit={{ x: "-100%" }}
              transition={{ type: "spring", damping: 20, stiffness: 300 }}
            >
              {/* Widgets */}
              <div className="grid grid-cols-2 gap-4 mb-6">
                <Widget
                  className="bg-blue-500/80 backdrop-blur-md"
                  title="Weather"
                  content={
                    <div className="text-white">
                      <div className="text-sm">Cupertino</div>
                      <div className="text-5xl font-light">56°</div>
                      <div className="flex items-center gap-1 mt-1">
                        <span className="text-yellow-300 text-lg">☀️</span>
                        <span>Sunny</span>
                      </div>
                      <div className="text-xs mt-1">H:77° L:55°</div>
                    </div>
                  }
                />
                <Widget
                  className="bg-black/80 backdrop-blur-md"
                  title="Calendar"
                  content={
                    <div className="text-white">
                      <div className="text-xs text-red-500">MONDAY</div>
                      <div className="text-5xl font-light">{dayOfMonth}</div>
                      <div className="flex items-center gap-1 mt-1 text-xs">
                        <span className="text-gray-400">🔒</span>
                        <span>2 birthdays</span>
                      </div>
                      <div className="text-xs mt-1 text-red-500">
                        Portfolio work s...
                        <br />
                        10 - 10:30AM
                      </div>
                    </div>
                  }
                />
              </div>

{/* First page app icons */}
              <div className="grid grid-cols-4 gap-4 mb-6">
                <AppIcon id="facetime" name="FaceTime" color="" />
                <AppIcon id="calendar" name="Calendar" color="" />
                <AppIcon id="photos" name="Photos" color="bg-gradient-to-br from-pink-400 via-purple-400 to-blue-400" />
                <AppIcon id="camera" name="Camera" color="bg-gray-800" />
              </div>

<div className="grid grid-cols-4 gap-4 mb-6">
                <AppIcon id="mail" name="Mail" color="bg-blue-500" />
                <AppIcon id="notes" name="Notes" color="bg-yellow-100" />
                <AppIcon id="reminders" name="Reminders" color="bg-white" />
                <AppIcon id="clock" name="Clock" color="bg-black" />
              </div>
            </motion.div>
          )}

{currentPage === 1 && (
            <motion.div
              key="page-1"
              className="absolute inset-0 px-6 pt-4 pb-6 flex flex-col"
              initial={{ x: "100%" }}
              animate={{ x: 0 }}
              exit={{ x: "100%" }}
              transition={{ type: "spring", damping: 20, stiffness: 300 }}
            >
              {/* Second page app icons */}
              <div className="grid grid-cols-4 gap-4 mb-6">
                <AppIcon id="maps" name="Maps" color="" />
                <AppIcon id="health" name="Health" color="" />
                <AppIcon id="wallet" name="Wallet" color="bg-gradient-to-b from-yellow-400 to-red-500" />
                <AppIcon id="settings" name="Settings" color="bg-gray-200" />
              </div>

{/* Page Indicators */}
      <div className="flex justify-center mb-2">
        <div className="flex gap-1.5">
          <button
            className={`w-1.5 h-1.5 rounded-full ${currentPage === 0 ? "bg-white" : "bg-white/30"}`}
            onClick={() => setCurrentPage(0)}
          />
          <button
            className={`w-1.5 h-1.5 rounded-full ${currentPage === 1 ? "bg-white" : "bg-white/30"}`}
            onClick={() => setCurrentPage(1)}
          />
          <button className={`w-1.5 h-1.5 rounded-full ${showAppLibrary ? "bg-white" : "bg-white/30"}`} />
        </div>
      </div>

{/* Dock */}
      <div className="grid grid-cols-4 gap-4 px-6 mb-6">
        <AppIcon id="phone" name="Phone" color="bg-green-500" />
        <AppIcon id="safari" name="Safari" color="" />
        <AppIcon id="messages" name="Messages" color="" />
        <AppIcon id="music" name="Music" color="" />
      </div>

{/* App Library */}
      <AppLibrary isVisible={showAppLibrary} onClose={() => setShowAppLibrary(false)} />
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/icons/facetime.tsx" isEdit="true" isQuickEdit="true"
// Create inline SVG components for critical icons

export function FaceTime() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" className="w-full h-full">
      <linearGradient
        id="facetime-gradient"
        x1="-137.5424"
        x2="-133.9618"
        y1="785.878"
        y2="197.7213"
        gradientTransform="matrix(1 0 0 -1 435.7924 798.4074)"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stopColor="#5df777" />
        <stop offset="1" stopColor="#0abc28" />
      </linearGradient>
      <path
        fill="url(#facetime-gradient)"
        d="M137.7 0h324.6C538.6 0 600 61.4 600 137.7v324.6c0 76.3-61.4 137.7-137.7 137.7H137.7C61.4 600 0 538.6 0 462.3V137.7C0 61.4 61.4 0 137.7 0z"
      />
      <path
        fill="#fff"
        d="M91.5 227.3v146.1c0 31.9 25.9 57.7 57.7 57.7H325c31.9 0 57.7-25.9 57.7-57.7V227.3c0-31.9-25.9-57.7-57.7-57.7H149.3c-31.9-.1-57.8 25.8-57.8 57.7zm379.3-39.1-66.2 54.6c-5.9 4.9-9.3 12.1-9.3 19.7v75.6c0 7.6 3.3 14.7 9.1 19.6l66.2 55.6c15.1 12.6 38 1.9 38-17.7V206c.1-19.5-22.7-30.3-37.8-17.8z"
      />
    </svg>
  )
}

[V0_FILE]typescriptreact:file="components/app-screen.tsx" isQuickEdit="true"
"use client"

import type React from "react"

interface AppViewProps {
  appId: string
}

export function AppView({ appId }: AppViewProps) {
  const { closeApp } = useAppState()

// Preload app icon when app is opened
  useEffect(() => {
    const img = new Image()
    img.src = `/icons/${appId}.svg`
  }, [appId])

const handleBackClick = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    closeApp()
  }

const appComponents = {
    clock: <Clock />,
    settings: <Settings />,
    weather: <Weather />,
    calendar: <Calendar />,
    camera: <Camera />,
    photos: <Photos />,
    notes: <NotesApp />,
    messages: <MessagesApp />,
    safari: <SafariApp />,
    music: <MusicApp />,
    phone: <PhoneApp />,
  }

return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="flex h-full w-full flex-col bg-black"
    >
      <div className="flex h-[44px] w-full items-center justify-between px-4 bg-gray-800">
        <button onClick={handleBackClick} className="rounded-full p-2">
          <ArrowLeft className="h-6 w-6 text-white" />
        </button>
        <div className="flex gap-2">
          <HomeIndicator />
        </div>
      </div>
      <div className="flex h-[calc(100%-44px)] w-full flex-col overflow-y-auto p-4">
        {appComponents[appId as keyof typeof appComponents]}
      </div>
    </motion.div>
  )
}
</article></body></html>