[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Space_Grotesk, DM_Sans } from "next/font/google" import "./globals.css" const spaceGrotesk = Space_Grotesk({ subsets: ["latin"], display: "swap", variable: "--font-heading", }) const dmSans = DM_Sans({ subsets: ["latin"], display: "swap", variable: "--font-body", }) export const metadata: Metadata = { title: "Math Buddy - AI Tutor for Kids", description: "Fun and interactive AI math tutor for grade 5 students", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/progress/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { ArrowLeft, Trophy, Target, Calendar, Brain, MessageCircle, Camera, Award } from "lucide-react" import Link from "next/link" import { activityTracker, type UserProgress, type ActivityEntry } from "@/lib/activity-tracker" export default function ProgressPage() { const [progress, setProgress] = useState(null) const [recentActivities, setRecentActivities] = useState([]) useEffect(() => { const loadData = async () => { const userProgress = await activityTracker.getProgress() const activities = await activityTracker.getActivities() setProgress(userProgress) setRecentActivities(activities.slice(0, 5)) } loadData() }, []) if (!progress) { return (

Loading your progress...

) } const getActivityIcon = (type: string) => { switch (type) { case "question": return case "quiz": return case "upload": return default: return } } const getActivityColor = (type: string) => { switch (type) { case "question": return "text-primary" case "quiz": return "text-accent" case "upload": return "text-secondary" default: return "text-muted-foreground" } } return (

{/* Header */}

Your Progress

See how awesome you're doing!

{/* Main Content */}

{/* Stats Overview */}

{progress.totalQuestions}

Questions Asked

{progress.totalQuizzes}

Quizzes Taken

{progress.totalUploads}

Photos Uploaded

{progress.streakDays}

Day Streak

{/* Quiz Performance */} Quiz Performance {progress.totalQuizzes > 0 ? ( <>

{Math.round(progress.averageQuizScore)}%

Average Score

{progress.averageQuizScore >= 80 ? "Excellent work!" : progress.averageQuizScore >= 60 ? "Good job! Keep practicing!" : "Keep learning, you're improving!"}

) : (

No quizzes taken yet!

)} {/* Achievements */} Achievements {progress.achievements.length > 0 ? (

{progress.achievements.map((achievement, index) => (

{achievement}

))}

) : (

Start learning to earn achievements!

)} {/* Recent Activity */} Recent Activity {recentActivities.length > 0 ? (

{recentActivities.map((activity) => (

{getActivityIcon(activity.type)}

{activity.type === "question" && "Asked a question"} {activity.type === "quiz" && `Completed quiz (${activity.data.score}/${activity.data.totalQuestions})`} {activity.type === "upload" && "Uploaded a math problem"}

{activity.timestamp.toLocaleDateString()} at{" "} {activity.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}

))}

) : (

No activity yet. Start learning!

)}

) } [V0_FILE]typescriptreact:file="app/quiz/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { ArrowLeft, Brain, CheckCircle, XCircle, Trophy, RotateCcw } from "lucide-react" import Link from "next/link" import { activityTracker } from "@/lib/activity-tracker" interface QuizQuestion { id: number question: string options: string[] correctAnswer: number explanation: string } interface QuizState { questions: QuizQuestion[] currentQuestion: number selectedAnswer: number | null score: number showResult: boolean isComplete: boolean userAnswers: (number | null)[] } export default function QuizPage() { const [quizState, setQuizState] = useState({ questions: [], currentQuestion: 0, selectedAnswer: null, score: 0, showResult: false, isComplete: false, userAnswers: [], }) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState(null) const generateQuiz = async () => { setIsLoading(true) setError(null) try { const response = await fetch("/api/generate-quiz", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ difficulty: "grade5" }), }) if (!response.ok) { throw new Error("Failed to generate quiz") } const data = await response.json() setQuizState({ questions: data.questions, currentQuestion: 0, selectedAnswer: null, score: 0, showResult: false, isComplete: false, userAnswers: new Array(data.questions.length).fill(null), }) } catch (err) { console.error("Error generating quiz:", err) setError("Oops! I had trouble creating your quiz. Let's try again!") } finally { setIsLoading(false) } } const handleAnswerSelect = (answerIndex: number) => { if (quizState.showResult) return setQuizState((prev) => ({ ...prev, selectedAnswer: answerIndex })) } const handleSubmitAnswer = () => { if (quizState.selectedAnswer === null) return const currentQ = quizState.questions[quizState.currentQuestion] const isCorrect = quizState.selectedAnswer === currentQ.correctAnswer const newUserAnswers = [...quizState.userAnswers] newUserAnswers[quizState.currentQuestion] = quizState.selectedAnswer setQuizState((prev) => ({ ...prev, score: isCorrect ? prev.score + 1 : prev.score, showResult: true, userAnswers: newUserAnswers, })) } const handleNextQuestion = async () => { const nextQuestion = quizState.currentQuestion + 1 const isLastQuestion = nextQuestion >= quizState.questions.length if (isLastQuestion) { await activityTracker.addActivity("quiz", { score: quizState.score, totalQuestions: quizState.questions.length, topic: "grade5-math", }) } setQuizState((prev) => ({ ...prev, currentQuestion: nextQuestion, selectedAnswer: null, showResult: false, isComplete: isLastQuestion, })) } const resetQuiz = () => { setQuizState({ questions: [], currentQuestion: 0, selectedAnswer: null, score: 0, showResult: false, isComplete: false, userAnswers: [], }) } const getEncouragingMessage = (score: number, total: number) => { const percentage = (score / total) * 100 if (percentage >= 90) return "Amazing work! You're a math superstar!" if (percentage >= 70) return "Great job! You're really getting the hang of this!" if (percentage >= 50) return "Good effort! Keep practicing and you'll get even better!" return "Nice try! Every mistake helps you learn something new!" } useEffect(() => { generateQuiz() }, []) // ... existing code for loading, error, and quiz interface remains the same ... if (isLoading) { return (

Creating your quiz...

This will just take a moment!

) } if (error) { return (

Oops!

{error}

) } return (

{/* Header */}

Math Quiz

Test your math skills!

{/* Main Content */}

{quizState.questions.length > 0 && !quizState.isComplete && (

Question {quizState.currentQuestion + 1} of {quizState.questions.length}

Score: {quizState.score}/{quizState.currentQuestion + (quizState.showResult ? 1 : 0)}

{quizState.questions[quizState.currentQuestion]?.question}

{quizState.questions[quizState.currentQuestion]?.options.map((option, index) => { const isSelected = quizState.selectedAnswer === index const isCorrect = index === quizState.questions[quizState.currentQuestion].correctAnswer const showCorrectness = quizState.showResult let buttonVariant: "default" | "outline" | "secondary" = "outline" let buttonClass = "" if (showCorrectness) { if (isCorrect) { buttonVariant = "default" buttonClass = "bg-green-500 hover:bg-green-600 text-white border-green-500" } else if (isSelected && !isCorrect) { buttonVariant = "secondary" buttonClass = "bg-red-500 hover:bg-red-600 text-white border-red-500" } } else if (isSelected) { buttonVariant = "default" } return ( ) })}

{quizState.showResult && (

Explanation:

{quizState.questions[quizState.currentQuestion]?.explanation}

)}

{!quizState.showResult ? ( ) : ( )}

)} {/* Quiz Complete */} {quizState.isComplete && (

Quiz Complete!

{quizState.score} / {quizState.questions.length}

{Math.round((quizState.score / quizState.questions.length) * 100)}% Correct

{getEncouragingMessage(quizState.score, quizState.questions.length)}

)}

) } [V0_FILE]typescriptreact:file="components/math-visualizations.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { Bar, BarChart, Line, LineChart, XAxis, YAxis, ResponsiveContainer } from "recharts" import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" import { useState } from "react" interface VisualData { type: string description: string data?: any } interface MathVisualizationProps { visualData: VisualData } function InteractiveFractionCircles({ numerator, denominator, description, }: { numerator: number; denominator: number; description: string }) { const [hoveredSlice, setHoveredSlice] = useState(null) const slices = Array.from({ length: denominator }, (_, i) => ({ id: i, filled: i < numerator, angle: 360 / denominator, startAngle: (360 / denominator) * i, })) return (

{numerator}/{denominator}

{description}

) } function InteractiveCoordinateGraph({ points, description, }: { points: Array<{ x: number; y: number; label?: string }>; description: string }) { const [hoveredPoint, setHoveredPoint] = useState(null) return (

{description}

) } function AlgebraSteps({ steps, description, }: { steps: Array<{ step: string; explanation: string; highlight?: string }>; description: string }) { return (

{description}

{steps.map((step, index) => (

{index + 1}

{step.explanation}

))}

) } function InteractiveNumberLine({ range, highlights, description, }: { range: [number, number]; highlights: number[]; description: string }) { const [hoveredNumber, setHoveredNumber] = useState(null) const [start, end] = range const numbers = Array.from({ length: end - start + 1 }, (_, i) => start + i) return (

{description}

) } export function MathVisualization({ visualData }: MathVisualizationProps) { const { type, description, data } = visualData // Generate placeholder image URL based on type and description const getImageUrl = (type: string, description: string) => { const query = encodeURIComponent(`${type} ${description} math education for kids`) return `/placeholder.svg?height=200&width=300&query=${query}` } // Render different types of visualizations switch (type) { case "fraction-circles": return ( ) case "coordinate-graph": return ( ) case "algebra-steps": return ( ) case "number-line": return ( ) case "fraction-bars": case "geometry-shape": case "counting-objects": case "real-world-scenario": return (

{description}

) case "bar-chart": const barData = data || [ { name: "A", value: 10 }, { name: "B", value: 20 }, { name: "C", value: 15 }, ] return ( } />

{description}

) case "line-chart": const lineData = data || [ { x: 1, y: 2 }, { x: 2, y: 4 }, { x: 3, y: 6 }, { x: 4, y: 8 }, ] return ( } />

{description}

) default: return null } } [V0_FILE]png:file="public/happy-student-math.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/happy-student-math-YA8T91knfDNqRCsg4RAx9QgHgY0Pf3.png" isMerged="true" [V0_FILE]png:file="public/colorful-math-notebook.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/colorful-math-notebook-ArveZA5X9aSkeiYREH65NrCXmLvsDn.png" isMerged="true" [V0_FILE]typescriptreact:file="app/chat/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { ScrollArea } from "@/components/ui/scroll-area" import { ArrowLeft, Send, Bot, User, Lightbulb, HelpCircle, CheckCircle } from "lucide-react" import Link from "next/link" import { activityTracker } from "@/lib/activity-tracker" import { MathVisualization } from "@/components/math-visualizations" interface StructuredResponse { text: string visualType: "image" | "chart" | "none" visualData: { type: string description: string data?: any } | null hasMoreSteps?: boolean currentStep?: number totalSteps?: number nextHintText?: string | null showSolution?: boolean } interface Message { id: string content: string | StructuredResponse sender: "user" | "ai" timestamp: Date type: "text" | "structured" originalQuestion?: string } export default function ChatPage() { const [messages, setMessages] = useState([ { id: "welcome", content: "Hi there! I'm Math Buddy, your friendly AI tutor! Ask me any math question and I'll guide you step-by-step to discover the answer. I won't just give you the solution - I'll help you learn by thinking through it together! What would you like to work on today?", sender: "ai", timestamp: new Date(), type: "text", }, ]) const [input, setInput] = useState("") const [isLoading, setIsLoading] = useState(false) const requestNextHint = async (originalQuestion: string, currentStep: number) => { setIsLoading(true) try { const response = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ message: originalQuestion, requestHint: true, currentStep: currentStep + 1, }), }) if (!response.ok) { throw new Error("Failed to get hint") } const data = await response.json() const hintMessage: Message = { id: Date.now().toString(), content: data.response, sender: "ai", timestamp: new Date(), type: data.type || "structured", originalQuestion: originalQuestion, } setMessages((prev) => [...prev, hintMessage]) } catch (error) { console.error("Error getting hint:", error) } finally { setIsLoading(false) } } const sendMessage = async () => { if (!input.trim()) return const userMessage: Message = { id: Date.now().toString(), content: input.trim(), sender: "user", timestamp: new Date(), type: "text", } setMessages((prev) => [...prev, userMessage]) await activityTracker.addActivity("chat", { question: input.trim(), subject: "math", // Default to math for chat page }) const currentQuestion = input.trim() setInput("") setIsLoading(true) try { const response = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ message: currentQuestion }), }) if (!response.ok) { throw new Error("Failed to get response") } const data = await response.json() const aiMessage: Message = { id: (Date.now() + 1).toString(), content: data.response, sender: "ai", timestamp: new Date(), type: data.type || "text", originalQuestion: currentQuestion, } setMessages((prev) => [...prev, aiMessage]) } catch (error) { console.error("Error sending message:", error) const errorMessage: Message = { id: (Date.now() + 1).toString(), content: "Oops! I had trouble understanding that. Can you try asking your question again?", sender: "ai", timestamp: new Date(), type: "text", } setMessages((prev) => [...prev, errorMessage]) } finally { setIsLoading(false) } } const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() sendMessage() } } return (

{/* Header */}

Ask Math Buddy

Step-by-step learning with hints & guidance!

{/* Chat Area */}

Step-by-Step Math Learning {/* Messages */}

{messages.map((message) => (

{message.sender === "ai" && (

)}

{message.type === "structured" && typeof message.content === "object" ? (

{(message.content as StructuredResponse).text}

{(message.content as StructuredResponse).visualType !== "none" && (message.content as StructuredResponse).visualData && ( )} {(message.content as StructuredResponse).hasMoreSteps && (

Step {(message.content as StructuredResponse).currentStep || 1} of{" "} {(message.content as StructuredResponse).totalSteps || 3}

{Array.from({ length: (message.content as StructuredResponse).totalSteps || 3, }).map((_, i) => (

))}

{(message.content as StructuredResponse).nextHintText && message.originalQuestion && ( )} {(message.content as StructuredResponse).showSolution && (

Solution complete! Great job working through it step by step!

)}

) : (

{typeof message.content === "string" ? message.content : ""}

)}

{message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", })}

{message.sender === "user" && (

)}

))} {isLoading && (

)}

{/* Input Area */}

setInput(e.target.value)} onKeyPress={handleKeyPress} placeholder="Ask me a math question." className="flex-1" disabled={isLoading} />

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.35", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67", "ai": "5.0.44", "@ai-sdk/groq": "2.0.19", "@supabase/ssr": "0.7.0", "@ai-sdk/anthropic": "2.0.44", "@supabase/supabase-js": "2.86.0" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="middleware.ts" isMerged="true" import { updateSession } from "@/lib/supabase/middleware" import type { NextRequest } from "next/server" export async function middleware(request: NextRequest) { return await updateSession(request) } export const config = { matcher: ["/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)"], } [V0_FILE]sql:file="scripts/001_create_profiles.sql" isMerged="true" -- Create profiles table to store user metadata CREATE TABLE IF NOT EXISTS public.profiles ( id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE, full_name TEXT, role TEXT DEFAULT 'student', created_at TIMESTAMP DEFAULT NOW(), updated_at TIMESTAMP DEFAULT NOW() ); -- Enable Row Level Security ALTER TABLE public.profiles ENABLE ROW LEVEL SECURITY; -- Create policies for CRUD operations CREATE POLICY "profiles_select_own" ON public.profiles FOR SELECT USING (auth.uid() = id); CREATE POLICY "profiles_insert_own" ON public.profiles FOR INSERT WITH CHECK (auth.uid() = id); CREATE POLICY "profiles_update_own" ON public.profiles FOR UPDATE USING (auth.uid() = id); CREATE POLICY "profiles_delete_own" ON public.profiles FOR DELETE USING (auth.uid() = id); -- Create trigger to auto-create profile on signup CREATE OR REPLACE FUNCTION public.handle_new_user() RETURNS TRIGGER AS $$ BEGIN INSERT INTO public.profiles (id, full_name, role) VALUES ( new.id, coalesce(new.raw_user_meta_data ->> 'full_name', ''), coalesce(new.raw_user_meta_data ->> 'role', 'student') ) ON CONFLICT (id) DO NOTHING; RETURN new; END; $$ LANGUAGE plpgsql SECURITY DEFINER SET search_path = public; DROP TRIGGER IF EXISTS on_auth_user_created ON auth.users; CREATE TRIGGER on_auth_user_created AFTER INSERT ON auth.users FOR EACH ROW EXECUTE FUNCTION public.handle_new_user(); [V0_FILE]typescriptreact:file="app/worksheet/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescript:file="app/api/ai-tutor/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { generateText } from "ai" import { logActivity } from "@/lib/activity-tracker" type Subject = "math" | "reading" | "essay" | "science" const systemPrompts: Record = { math: `You are Math Buddy, a friendly and engaging AI tutor for students. Your role is to help students learn mathematics through step-by-step guidance. TEACHING APPROACH: - Break down problems into manageable steps - Use simple, clear language appropriate for students - Encourage thinking and problem-solving - Ask guiding questions to help students discover answers - Provide encouraging feedback - Use real-world examples when helpful RESPONSE STYLE: - Be warm, patient, and enthusiastic - Use encouraging language - Explain the "why" behind concepts - Make math engaging and fun`, reading: `You are a Reading Comprehension Coach, helping students develop strong reading skills and understanding of texts. TEACHING APPROACH: - Guide students through reading comprehension strategies - Help analyze characters, plots, and themes - Teach context clues and inference skills - Encourage critical thinking about texts - Discuss vocabulary in context - Ask thought-provoking questions RESPONSE STYLE: - Be supportive and encouraging - Help students make connections - Guide them to their own conclusions - Validate interpretations with evidence from text`, essay: `You are an Essay and Story Writing Coach, helping students develop their creative and academic writing skills. TEACHING APPROACH: - Help with essay structure and organization - Provide guidance on storytelling techniques - Assist with brainstorming and outlining - Give feedback on writing clarity and flow - Teach writing conventions and grammar - Encourage creativity and voice RESPONSE STYLE: - Be constructive and supportive - Offer specific suggestions - Celebrate effort and improvement - Help students develop their unique voice`, science: `You are a Science Learning Guide, helping students understand scientific concepts and develop inquiry skills. TEACHING APPROACH: - Explain science concepts clearly and accurately - Use real-world examples and applications - Encourage observation and questioning - Guide scientific thinking and method - Connect concepts to students' experiences - Discuss why science matters RESPONSE STYLE: - Be enthusiastic about science - Make complex concepts understandable - Ask questions that encourage thinking - Relate science to daily life`, } export async function POST(req: Request) { try { const apiKey = process.env.ANTHROPIC_API_KEY if (!apiKey) { console.error("[v0] ANTHROPIC_API_KEY environment variable is not set") return Response.json( { response: "API configuration error. Please contact support.", error: "ANTHROPIC_API_KEY not configured", }, { status: 500 }, ) } const { message, subject = "math", conversationHistory = [] } = await req.json() console.log("[v0] AI Tutor - Message:", message, "Subject:", subject) await logActivity("chat", `Asked a ${subject} question`, { subject, messageLength: message.length, }) const systemPrompt = systemPrompts[subject as Subject] || systemPrompts.math const conversationContext = conversationHistory .filter((msg: any) => msg && msg.sender && msg.content) .map( (msg: { sender: string; content: string }) => `${msg.sender === "user" ? "Student" : "Tutor"}: ${msg.content}`, ) .join("\n") const result = await generateText({ model: "anthropic/claude-3-5-sonnet-20241022", system: systemPrompt, prompt: `${conversationContext ? conversationContext + "\n\n" : ""}Student: ${message}\n\nTutor:`, maxTokens: 800, }) console.log("[v0] AI Tutor - Response generated successfully") return Response.json({ response: result.text, subject, }) } catch (error) { console.error("[v0] Error in AI tutor:", error instanceof Error ? error.message : String(error)) if (error instanceof Error) { console.error("[v0] Error stack:", error.stack) } return Response.json( { response: "Sorry, I had trouble processing your question. Please try again!", error: error instanceof Error ? error.message : "Unknown error", subject: "unknown", }, { status: 200 }, ) } } [V0_FILE]typescript:file="app/api/chat/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { streamText } from "ai" export async function POST(req: Request) { try { const { message, requestHint, currentStep } = await req.json() const result = await streamText({ model: "anthropic/claude-3-5-sonnet-20241022", system: `You are Math Buddy, a friendly and enthusiastic AI tutor specifically designed for grade 5 students (ages 10-11). Your role is to help kids learn math through STEP-BY-STEP GUIDANCE, not by giving direct answers. TEACHING PHILOSOPHY: - NEVER give the final answer immediately - Guide students through progressive hints that help them discover the solution - Each hint should build on the previous one - Encourage thinking and problem-solving skills - Make learning interactive and engaging PERSONALITY: - Be warm, encouraging, and patient - Use simple, age-appropriate language - Be enthusiastic about math and learning - Always stay positive and supportive - Use encouraging phrases like "Great question!", "You're on the right track!", "Let's think about this step by step!" STEP-BY-STEP RESPONSE FORMAT: You MUST respond in JSON format with the following structure: { "text": "Your encouraging explanation or hint here", "visualType": "image" | "chart" | "none", "visualData": { "type": "specific type like 'fraction-circles', 'coordinate-graph', 'algebra-steps', 'number-line'", "description": "Description for the visual element", "data": "Specific data for interactive components" }, "hasMoreSteps": true/false, "currentStep": 1, "totalSteps": 3, "nextHintText": "Click for next hint" or null, "showSolution": false } HINT PROGRESSION STRATEGY: Step 1: Identify what we're solving and give the first hint Step 2: Provide a more specific hint or show the method Step 3: Guide them to the final calculation Final: Show the complete solution with explanation VISUAL GUIDELINES - USE WHEN HELPFUL: - For fractions: Use "fraction-circles" with data: {"numerator": X, "denominator": Y} - For coordinate geometry: Use "coordinate-graph" with data: {"points": [{"x": 1, "y": 2}]} - For algebra: Use "algebra-steps" with data: {"steps": [{"step": "2x + 4 = 10", "explanation": "Start here"}]} - For number operations: Use "number-line" with data: {"range": [0, 10], "highlights": [3, 7]} - For simple hints: Use "none" for visualType CONTENT GUIDELINES: - Focus on grade 5 math topics: basic arithmetic, fractions, decimals, geometry, measurement, basic algebra concepts - Always explain the "why" behind each step - Use analogies and metaphors that kids understand - Build confidence through progressive success Remember: Guide them to discover the answer, don't just give it to them!`, prompt: requestHint ? `The student is asking for the next hint for this problem: "${message}". They are currently on step ${currentStep}. Provide the next helpful hint without giving away the final answer.` : `New student question: ${message} Please provide the FIRST HINT to help them start solving this problem. Do not give the final answer. Start with step 1 of your guidance.`, maxTokens: 1000, }) const response = await result.text // Try to parse as JSON, fallback to structured format if needed try { const jsonResponse = JSON.parse(response) return Response.json({ response: jsonResponse, type: "structured" }) } catch { return Response.json({ response: { text: response, visualType: "none", visualData: null, hasMoreSteps: true, currentStep: 1, totalSteps: 3, nextHintText: "Click for next hint", showSolution: false, }, type: "structured", }) } } catch (error) { console.error("Error in chat API:", error) return Response.json( { response: { text: "Sorry, I had trouble processing your question. Please try again!", visualType: "none", visualData: null, hasMoreSteps: false, currentStep: 1, totalSteps: 1, nextHintText: null, showSolution: false, }, type: "structured", }, { status: 500 }, ) } } [V0_FILE]typescript:file="app/api/generate-quiz/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { generateText } from "ai" import { logActivity } from "@/lib/activity-tracker" export async function POST(req: Request) { try { const { difficulty } = await req.json() await logActivity("quiz", "Generated a math quiz", { difficulty, }) const result = await generateText({ model: "anthropic/claude-3-5-sonnet-20241022", system: `You are Math Buddy, creating fun and educational math quizzes for grade 5 students (ages 10-11). Create exactly 5 multiple choice questions covering grade 5 math topics like: - Basic arithmetic (addition, subtraction, multiplication, division) - Fractions and decimals - Basic geometry (area, perimeter, shapes) - Word problems with real-world scenarios - Basic measurement and data IMPORTANT FORMATTING RULES: - Return ONLY a valid JSON object - Each question must have exactly 4 options (A, B, C, D) - Include kid-friendly explanations - Use encouraging, positive language - Make questions age-appropriate and engaging JSON Format: { "questions": [ { "id": 1, "question": "What is 24 ÷ 6?", "options": ["3", "4", "5", "6"], "correctAnswer": 1, "explanation": "Great job! 24 ÷ 6 = 4. Think of it like sharing 24 cookies equally among 6 friends - each friend gets 4 cookies!" } ] }`, prompt: `Generate a fun math quiz with 5 questions for grade 5 students. Make the questions engaging with real-world examples like pizza slices, toys, sports, or animals. Include clear explanations that help kids understand the concepts.`, maxTokens: 1500, }) // Parse the AI response as JSON let quizData try { quizData = JSON.parse(result.text) } catch (parseError) { // If parsing fails, create a fallback quiz quizData = { questions: [ { id: 1, question: "What is 8 × 7?", options: ["54", "56", "58", "60"], correctAnswer: 1, explanation: "Awesome! 8 × 7 = 56. You can think of it as 8 groups of 7, or 7 groups of 8!", }, { id: 2, question: "If you have 3/4 of a pizza and eat 1/4 of it, how much pizza is left?", options: ["1/4", "2/4 (or 1/2)", "3/4", "4/4 (or 1 whole)"], correctAnswer: 1, explanation: "Perfect! 3/4 - 1/4 = 2/4, which is the same as 1/2. You started with 3 pieces and ate 1 piece, leaving 2 pieces!", }, { id: 3, question: "What is the area of a rectangle that is 6 cm long and 4 cm wide?", options: ["10 cm²", "20 cm²", "24 cm²", "28 cm²"], correctAnswer: 2, explanation: "Excellent! Area = length × width = 6 × 4 = 24 cm². Imagine covering the rectangle with 24 small squares!", }, { id: 4, question: "Sarah has 45 stickers. She gives 15 to her brother and 12 to her sister. How many stickers does she have left?", options: ["18", "20", "22", "28"], correctAnswer: 0, explanation: "Great thinking! Sarah gave away 15 + 12 = 27 stickers. So 45 - 27 = 18 stickers left!", }, { id: 5, question: "Which decimal is equal to 7/10?", options: ["0.07", "0.7", "7.0", "70"], correctAnswer: 1, explanation: "Perfect! 7/10 = 0.7. Think of it as 7 out of 10 parts, which is the same as 0.7!", }, ], } } return Response.json(quizData) } catch (error) { console.error("Error generating quiz:", error) return Response.json({ error: "Sorry, I had trouble creating your quiz. Please try again!" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/analyze-image/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { generateText } from "ai" import { logActivity } from "@/lib/activity-tracker" export async function POST(req: Request) { try { const formData = await req.formData() const image = formData.get("image") as File if (!image) { return Response.json({ error: "No image provided" }, { status: 400 }) } await logActivity("upload", "Uploaded an image for analysis", { fileSize: image.size, fileType: image.type, }) // Convert image to base64 const bytes = await image.arrayBuffer() const base64 = Buffer.from(bytes).toString("base64") const mimeType = image.type const result = await generateText({ model: "anthropic/claude-3-5-sonnet-20241022", messages: [ { role: "system", content: `You are Math Buddy, a friendly AI tutor for grade 5 students. When you see a math problem in an image: 1. Give a SHORT, simple answer (2-3 sentences max) 2. Use easy words that 10-year-olds understand 3. Be encouraging and fun 4. NO complex math symbols or formatting 5. Just explain the answer simply Example: "I can see this is a pattern! Each time we multiply the two numbers and add the first number. So 8 × 11 + 8 = 96!"`, }, { role: "user", content: [ { type: "text", text: "Look at this math problem and give me a short, simple answer that a 10-year-old can understand!", }, { type: "image", source: { type: "base64", media_type: mimeType as "image/jpeg" | "image/png" | "image/gif" | "image/webp", data: base64, }, }, ], }, ], maxTokens: 150, }) const response = result.text const lines = response.split("\n").filter((line) => line.trim()) // Try to identify the problem from the response let problem = "I can see your math problem! 🧮" let solution = "" const explanation = response // Look for patterns in the response to separate problem identification and solution if (response.includes("problem") || response.includes("equation") || response.includes("question")) { const problemMatch = response.match(/(?:problem|equation|question)[^.]*[.!?]/i) if (problemMatch) { problem = problemMatch[0] solution = response.replace(problemMatch[0], "").trim() } else { solution = response } } else { solution = response } return Response.json({ problem: problem, solution: solution, explanation: "I analyzed your image and provided a step-by-step solution above! 🎉", }) } catch (error) { console.error("Error analyzing image:", error) return Response.json( { problem: "I had trouble reading your image 😅", solution: "Could you try uploading the image again? Make sure it's clear and well-lit so I can see the math problem better!", explanation: "Sometimes images need to be a bit clearer for me to read them properly. Don't worry, we'll get it working!", }, { status: 500 }, ) } } [V0_FILE]typescript:file="app/api/test-claude/route.ts" isMerged="true" // Simple test endpoint to verify Claude API works import { generateText } from "ai" export async function POST(req: Request) { try { console.log("[v0] Testing Claude API connection...") const result = await generateText({ model: "anthropic/claude-3-5-sonnet-20241022", system: "You are a helpful assistant.", prompt: "Say hello and confirm you are Claude. Keep it to one sentence.", maxTokens: 100, }) console.log("[v0] Claude API Test Success:", result.text) return Response.json({ success: true, message: result.text, timestamp: new Date().toISOString(), }) } catch (error) { console.error("[v0] Claude API Test Failed:", error) return Response.json( { success: false, error: error instanceof Error ? error.message : String(error), timestamp: new Date().toISOString(), }, { status: 500 }, ) } } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated branding colors based on the logo */ /* Primary: Lime Green #8CC63F */ /* Secondary: Red #C1272D */ /* Accent: Dark Purple #2E1A47 */ --background: #ffffff; --foreground: #1f2937; /* Dark gray for better readability */ --card: #ffffff; --card-foreground: #1f2937; --popover: #ffffff; --popover-foreground: #1f2937; /* Primary - Lime Green from logo */ --primary: #8cc63f; --primary-foreground: #ffffff; /* Secondary - Red from logo */ --secondary: #c1272d; --secondary-foreground: #ffffff; /* Muted/Neutral tones */ --muted: #f3f4f6; --muted-foreground: #6b7280; /* Accent - Dark Purple from logo icon for depth/elegance */ --accent: #2e1a47; --accent-foreground: #ffffff; --destructive: #ef4444; --destructive-foreground: #ffffff; --border: #e5e7eb; --input: #f9fafb; --ring: rgba(140, 198, 63, 0.5); /* Ring color matches primary */ --chart-1: #8cc63f; --chart-2: #c1272d; --chart-3: #2e1a47; --chart-4: #f59e0b; --chart-5: #6b7280; --radius: 0.75rem; /* Slightly smaller radius for a more elegant look */ --sidebar: #f8fafc; --sidebar-foreground: #1f2937; --sidebar-primary: #8cc63f; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #e2e8f0; --sidebar-accent-foreground: #1f2937; --sidebar-border: #e2e8f0; --sidebar-ring: rgba(140, 198, 63, 0.5); /* Typography */ --font-heading: "Playfair Display", Georgia, serif; --font-body: "Inter", system-ui, sans-serif; } .dark { --background: #0f172a; --foreground: #f1f5f9; --card: #1e293b; --card-foreground: #f1f5f9; --popover: #1e293b; --popover-foreground: #f1f5f9; --primary: #8cc63f; --primary-foreground: #ffffff; --secondary: #c1272d; --secondary-foreground: #ffffff; --muted: #334155; --muted-foreground: #94a3b8; --accent: #2e1a47; --accent-foreground: #ffffff; --destructive: #ef4444; --destructive-foreground: #ffffff; --border: #334155; --input: #1e293b; --ring: rgba(140, 198, 63, 0.5); --chart-1: #8cc63f; --chart-2: #c1272d; --chart-3: #2e1a47; --chart-4: #f59e0b; --chart-5: #94a3b8; --sidebar: #1e293b; --sidebar-foreground: #f1f5f9; --sidebar-primary: #8cc63f; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #2e1a47; --sidebar-accent-foreground: #ffffff; --sidebar-border: #334155; --sidebar-ring: rgba(140, 198, 63, 0.5); } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --font-heading: var(--font-heading); --font-body: var(--font-body); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; font-family: var(--font-body); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); } } /* Custom animations */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } @keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } } .float-animation { animation: float 4s ease-in-out infinite; } .pulse-soft { animation: pulse-soft 3s ease-in-out infinite; } .gradient-text { background: linear-gradient(135deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .glass-card { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07); } [V0_FILE]png:file="public/logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/rite-click-learning-point%20logo-1JCzpLX3VyYYb7XryQJli1JYGxRQ5r.png" isMerged="true" [V0_FILE]typescriptreact:file="app/upload/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { ArrowLeft, Upload, Camera, ImageIcon, Loader2 } from "lucide-react" import Link from "next/link" import Image from "next/image" import { activityTracker } from "@/lib/activity-tracker" interface AnalysisResult { problem: string solution: string explanation: string } export default function UploadPage() { const [selectedFile, setSelectedFile] = useState(null) const [previewUrl, setPreviewUrl] = useState(null) const [isAnalyzing, setIsAnalyzing] = useState(false) const [analysisResult, setAnalysisResult] = useState(null) const [error, setError] = useState(null) const fileInputRef = useRef(null) const handleFileSelect = (event: React.ChangeEvent) => { const file = event.target.files?.[0] if (file) { if (file.type.startsWith("image/")) { setSelectedFile(file) const url = URL.createObjectURL(file) setPreviewUrl(url) setError(null) setAnalysisResult(null) } else { setError("Please select an image file (JPG, PNG, etc.)") } } } const handleUpload = async () => { if (!selectedFile) return setIsAnalyzing(true) setError(null) try { const formData = new FormData() formData.append("image", selectedFile) const response = await fetch("/api/analyze-image", { method: "POST", body: formData, }) if (!response.ok) { throw new Error("Failed to analyze image") } const result = await response.json() setAnalysisResult(result) await activityTracker.addActivity("upload", { topic: "image-analysis", }) } catch (err) { console.error("Error analyzing image:", err) setError("Oops! I had trouble reading your image. Make sure the math problem is clear and try again!") } finally { setIsAnalyzing(false) } } const resetUpload = () => { setSelectedFile(null) setPreviewUrl(null) setAnalysisResult(null) setError(null) if (fileInputRef.current) { fileInputRef.current.value = "" } } return (

{/* Header */}

Upload Math Problem

Take a photo and I'll help you solve it!

{/* ... existing code remains the same ... */} {/* Main Content */}

{/* Upload Section */} Upload Your Math Problem {!previewUrl ? (

Choose an image

Take a clear photo of your math problem or homework

) : (

)} {error && (

{error}

)} {/* Results Section */} Math Buddy's Help {!analysisResult && !isAnalyzing && (

Upload an image and I'll help you solve the math problem step by step!

)} {isAnalyzing && (

Looking at your problem...

This might take a few seconds

)} {analysisResult && (

Problem I Found:

{analysisResult.problem}

Solution:

{analysisResult.solution}

Step-by-Step Explanation:

{analysisResult.explanation}

)}

{/* Tips Section */}

Tips for better results:

• Make sure your math problem is clearly written
• Take the photo in good lighting
• Keep the image straight and focused
• Include the full problem in the photo

) } [V0_FILE]typescriptreact:file="app/worksheet/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card } from "@/components/ui/card" import { ArrowLeft, Printer, Loader } from "lucide-react" import Link from "next/link" import { useSearchParams } from "next/navigation" export default function WorksheetPage() { const searchParams = useSearchParams() const [subject, setSubject] = useState(searchParams.get("subject") || "math") const [grade, setGrade] = useState("3") // Added grade state const [topic, setTopic] = useState("") const [worksheet, setWorksheet] = useState(null) const [loading, setLoading] = useState(false) const generateWorksheet = async () => { if (!topic.trim()) return setLoading(true) try { const response = await fetch("/api/worksheet-generator", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ subject, topic, grade }), // Passing grade to API }) const data = await response.json() setWorksheet(data) } catch (error) { console.error("Error:", error) } finally { setLoading(false) } } return (

{/* Header */}

Worksheet Generator

{!worksheet ? (

Create a Custom Worksheet

Subject

Grade Level

Topic * setTopic(e.target.value)} required />

) : (

{worksheet.title}

Subject: {subject.charAt(0).toUpperCase() + subject.slice(1)} • Grade: {grade}

{worksheet.problems && (

Problems

{worksheet.problems.map((problem: any, idx: number) => (

{problem.number}. {problem.question}

{problem.difficulty && (

Difficulty: {problem.difficulty}

)}

))}

)} {worksheet.passage && (

Passage

{worksheet.passage}

Questions

{worksheet.questions?.map((q: any, idx: number) => (

{q.number}. {q.question}

))}

)} {worksheet.prompts && (

Writing Prompts

{worksheet.prompts.map((p: any, idx: number) => (

Prompt {p.number} ({p.type})

{p.prompt}

))} {worksheet.essayChecklist && (

Essay Writing Checklist

{item}

)}

)} {worksheet.activity && (

Activity

{worksheet.activity}

)}

) } [V0_FILE]sql:file="scripts/01_create_activities_table.sql" isMerged="true" -- Create activities table CREATE TABLE IF NOT EXISTS activities ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE NOT NULL, type TEXT NOT NULL, -- 'chat', 'worksheet', 'upload', 'quiz' description TEXT NOT NULL, metadata JSONB DEFAULT '{}'::jsonb, created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL ); -- Enable RLS ALTER TABLE activities ENABLE ROW LEVEL SECURITY; -- Create policies CREATE POLICY "Users can view their own activities" ON activities FOR SELECT USING (auth.uid() = user_id); CREATE POLICY "Users can insert their own activities" ON activities FOR INSERT WITH CHECK (auth.uid() = user_id); -- Create index for faster queries CREATE INDEX IF NOT EXISTS idx_activities_user_id ON activities(user_id); CREATE INDEX IF NOT EXISTS idx_activities_created_at ON activities(created_at DESC); [V0_FILE]typescriptreact:file="app/activity/page.tsx" isMerged="true" import { createClient } from "@/lib/supabase/server" import { redirect } from "next/navigation" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { ScrollArea } from "@/components/ui/scroll-area" import { MessageSquare, FileText, Upload, BrainCircuit, Clock, ArrowLeft } from "lucide-react" import Link from "next/link" import { Button } from "@/components/ui/button" export default async function ActivityPage() { const supabase = await createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { redirect("/auth/login") } const { data: activities, error } = await supabase .from("activities") .select("*") .eq("user_id", user.id) .order("created_at", { ascending: false }) if (error) { console.error("Error fetching activities:", error) } const getActivityIcon = (type: string) => { switch (type) { case "chat": return case "worksheet": return case "upload": return case "quiz": return default: return } } const formatDate = (dateString: string) => { return new Date(dateString).toLocaleDateString("en-US", { month: "short", day: "numeric", hour: "numeric", minute: "numeric", }) } return (

My Activity

Recent Activity {activities && activities.length > 0 ? (

{activities.map((activity) => (

{getActivityIcon(activity.type)}

{activity.description}

{formatDate(activity.created_at)}

{activity.type} {activity.metadata?.subject && ( {activity.metadata.subject} )} {activity.metadata?.grade && Grade {activity.metadata.grade}}

))}

) : (

No activity recorded yet. Start learning to see your progress!

)}

) } [V0_FILE]typescript:file="lib/activity-tracker.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { createClient } from "@/lib/supabase/client" export type ActivityType = "chat" | "worksheet" | "upload" | "quiz" export interface ActivityEntry { id: string type: ActivityType description: string metadata: Record created_at: string } export interface UserProgress { totalQuestions: number totalQuizzes: number totalUploads: number averageQuizScore: number topicsExplored: string[] streakDays: number lastActivity: Date achievements: string[] } class ActivityTracker { async addActivity(type: ActivityType, metadata: Record = {}) { try { const supabase = createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) return let description = "" switch (type) { case "chat": description = `Asked a ${metadata.subject || "general"} question` break case "worksheet": description = `Generated ${metadata.subject} worksheet` break case "upload": description = "Uploaded an image for analysis" break case "quiz": description = `Completed quiz (Score: ${metadata.score}/${metadata.totalQuestions})` break } await supabase.from("activities").insert({ user_id: user.id, type, description, metadata, }) } catch (error) { console.error("Failed to log activity:", error) } } async getActivities(): Promise { try { const supabase = createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) return [] const { data } = await supabase .from("activities") .select("*") .eq("user_id", user.id) .order("created_at", { ascending: false }) return (data as ActivityEntry[]) || [] } catch (error) { console.error("Failed to fetch activities:", error) return [] } } async getProgress(): Promise { const activities = await this.getActivities() const questions = activities.filter((a) => a.type === "chat") const quizzes = activities.filter((a) => a.type === "quiz") const uploads = activities.filter((a) => a.type === "upload") const quizScores = quizzes .filter((q) => q.metadata?.score !== undefined && q.metadata?.totalQuestions !== undefined) .map((q) => (q.metadata.score / q.metadata.totalQuestions) * 100) const averageQuizScore = quizScores.length > 0 ? quizScores.reduce((sum, score) => sum + score, 0) / quizScores.length : 0 const topicsExplored = Array.from( new Set(activities.filter((a) => a.metadata?.subject).map((a) => a.metadata.subject)), ) // Calculate streak const today = new Date() const yesterday = new Date(today) yesterday.setDate(yesterday.getDate() - 1) const hasActivityToday = activities.some((a) => new Date(a.created_at).toDateString() === today.toDateString()) const hasActivityYesterday = activities.some( (a) => new Date(a.created_at).toDateString() === yesterday.toDateString(), ) let streakDays = 0 if (hasActivityToday) { streakDays = 1 if (hasActivityYesterday) { streakDays = 2 // Simplified streak calculation } } // Generate achievements const achievements: string[] = [] if (questions.length >= 5) achievements.push("Curious Learner") if (quizzes.length >= 3) achievements.push("Quiz Master") if (averageQuizScore >= 80) achievements.push("Math Star") if (uploads.length >= 2) achievements.push("Problem Solver") if (streakDays >= 2) achievements.push("Daily Learner") return { totalQuestions: questions.length, totalQuizzes: quizzes.length, totalUploads: uploads.length, averageQuizScore, topicsExplored, streakDays, lastActivity: activities.length > 0 ? new Date(activities[0].created_at) : new Date(), achievements, } } } export const activityTracker = new ActivityTracker() export async function logActivity(type: ActivityType, description: string, metadata: Record = {}) { return activityTracker.addActivity(type, metadata) } [V0_FILE]sql:file="scripts/002_create_parent_child_relationships.sql" isMerged="true" -- Create parent_children table to track which parents can view which children's activities CREATE TABLE IF NOT EXISTS public.parent_children ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, parent_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE, child_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE, created_at TIMESTAMP DEFAULT NOW(), UNIQUE(parent_id, child_id) ); -- Enable Row Level Security ALTER TABLE public.parent_children ENABLE ROW LEVEL SECURITY; -- Parents can view their own parent_children relationships CREATE POLICY "parents_view_own_children" ON public.parent_children FOR SELECT USING (auth.uid() = parent_id); -- Parents can add their own children CREATE POLICY "parents_insert_own_children" ON public.parent_children FOR INSERT WITH CHECK (auth.uid() = parent_id); -- Parents can remove their own children CREATE POLICY "parents_delete_own_children" ON public.parent_children FOR DELETE USING (auth.uid() = parent_id); -- Update activities RLS to allow parents to view their children's activities DROP POLICY IF EXISTS "Users can view their own activities" ON public.activities; CREATE POLICY "users_view_own_or_children_activities" ON public.activities FOR SELECT USING ( auth.uid() = user_id OR EXISTS ( SELECT 1 FROM public.parent_children WHERE parent_id = auth.uid() AND child_id = activities.user_id ) ); [V0_FILE]typescript:file="app/api/worksheet-generator/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { generateText } from "ai" import { logActivity } from "@/lib/activity-tracker" type Subject = "math" | "reading" | "essay" | "science" const worksheetPrompts: Record = { math: `Create a math worksheet with 5 problems appropriate for middle school students. Include: - 2 basic calculation problems - 2 word problems - 1 challenging problem Format as JSON with this structure: { "title": "Math Practice Worksheet", "subject": "math", "problems": [ { "number": 1, "question": "...", "difficulty": "easy|medium|hard", "answer": "..." } ] }`, reading: `Create a reading comprehension worksheet with: - A short passage (100-150 words) - 5 comprehension questions (mix of recall and inference) Format as JSON: { "title": "Reading Comprehension Worksheet", "subject": "reading", "passage": "...", "questions": [ { "number": 1, "question": "...", "type": "recall|inference|vocabulary" } ] }`, essay: `Create an essay writing worksheet with: - 3 writing prompts - Pre-writing organizer structure - Checklist for essay components Format as JSON: { "title": "Essay Writing Worksheet", "subject": "essay", "prompts": [ { "number": 1, "prompt": "...", "type": "narrative|expository|persuasive" } ], "essayChecklist": ["Title", "Introduction", "Body Paragraphs", "Conclusion"] }`, science: `Create a science worksheet with: - 5 questions covering key concepts - 1 simple experiment or observation activity - Mix of question types Format as JSON: { "title": "Science Practice Worksheet", "subject": "science", "questions": [ { "number": 1, "question": "...", "type": "multiple-choice|short-answer" } ], "activity": "..." }`, } export async function POST(req: Request) { try { const { subject = "math", topic = "", grade = "3", customInstructions = "" } = await req.json() // Extract grade from request await logActivity("worksheet", `Generated ${subject} worksheet`, { subject, topic, grade, }) const basePrompt = worksheetPrompts[subject as Subject] || worksheetPrompts.math const userPrompt = `${basePrompt} Target Grade Level: ${grade} Topic: ${topic} ${customInstructions ? `Additional Instructions: ${customInstructions}` : ""} Please ensure all content, vocabulary, and problem difficulty are appropriate for a student in Grade ${grade}. Focus specifically on the topic: "${topic}".` const result = await generateText({ model: "anthropic/claude-3-5-sonnet-20241022", system: `You are an educational worksheet creator. Create engaging, age-appropriate worksheets that help students learn and practice skills. Always return valid JSON.`, prompt: userPrompt, maxTokens: 2000, }) let worksheetData try { worksheetData = JSON.parse(result.text) } catch { worksheetData = { title: `${subject} Practice Worksheet`, subject, content: result.text, } } const formattedWorksheet = formatWorksheet(worksheetData) return Response.json({ worksheet: formattedWorksheet, data: worksheetData }) } catch (error) { console.error("Error generating worksheet:", error) return Response.json({ error: "Failed to generate worksheet. Please try again!" }, { status: 500 }) } } function formatWorksheet(data: any): string { let output = `${data.title || "Worksheet"}\n${"=".repeat(50)}\n\n` if (data.passage) { output += `PASSAGE:\n${data.passage}\n\n` } if (data.problems) { output += "PROBLEMS:\n" data.problems.forEach((problem: any) => { output += `\n${problem.number}. ${problem.question}\n` if (problem.difficulty) output += ` Difficulty: ${problem.difficulty}\n` }) } if (data.questions) { output += "QUESTIONS:\n" data.questions.forEach((q: any) => { output += `\n${q.number}. ${q.question}\n` if (q.type) output += ` Type: ${q.type}\n` }) } if (data.prompts) { output += "WRITING PROMPTS:\n" data.prompts.forEach((p: any) => { output += `\n${p.number}. ${p.prompt}\n` if (p.type) output += ` Type: ${p.type}\n` }) } if (data.activity) { output += `\nACTIVITY:\n${data.activity}\n` } if (data.essayChecklist) { output += "\nESSAY CHECKLIST:\n" data.essayChecklist.forEach((item: string) => { output += `- ${item}\n` }) } if (data.content) { output += `\n${data.content}\n` } return output } [V0_FILE]sql:file="scripts/003_allow_teachers_view_all_activities.sql" isMerged="true" -- Allow teachers to view all student activities -- Drop existing policies if they exist to avoid conflicts DROP POLICY IF EXISTS "Teachers can view all activities" ON activities; -- Create policy for teachers to view all activities CREATE POLICY "Teachers can view all activities" ON activities FOR SELECT USING ( EXISTS ( SELECT 1 FROM profiles WHERE profiles.id = auth.uid() AND profiles.role = 'teacher' ) ); -- Also allow parents to view all activities (they'll be filtered in the app logic) DROP POLICY IF EXISTS "Parents can view all activities" ON activities; CREATE POLICY "Parents can view all activities" ON activities FOR SELECT USING ( EXISTS ( SELECT 1 FROM profiles WHERE profiles.id = auth.uid() AND profiles.role = 'parent' ) ); [V0_FILE]typescriptreact:file="app/teacher/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { ArrowLeft, FileText, Download, Loader2 } from "lucide-react" import Link from "next/link" export default function TeacherDashboard() { const [subject, setSubject] = useState("") const [grade, setGrade] = useState("") const [topic, setTopic] = useState("") const [customInstructions, setCustomInstructions] = useState("") const [worksheet, setWorksheet] = useState("") const [generating, setGenerating] = useState(false) const generateWorksheet = async () => { if (!subject || !grade || !topic) return setGenerating(true) setWorksheet("") try { const response = await fetch("/api/worksheet-generator", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ subject, grade, topic, customInstructions, }), }) const data = await response.json() setWorksheet(data.worksheet || "Failed to generate worksheet") } catch (error) { console.error("Error:", error) setWorksheet("Error generating worksheet. Please try again.") } finally { setGenerating(false) } } const downloadAsPDF = () => { // Create a new window for printing const printWindow = window.open("", "_blank") if (!printWindow) return // Get grade display name const gradeNames: Record = { k: "Kindergarten", "1": "Grade 1", "2": "Grade 2", "3": "Grade 3", "4": "Grade 4", "5": "Grade 5", "6": "Grade 6", "7": "Grade 7", "8": "Grade 8", "9": "Grade 9", "10": "Grade 10", "11": "Grade 11", "12": "Grade 12", } const gradeName = gradeNames[grade] || grade const subjectCapitalized = subject.charAt(0).toUpperCase() + subject.slice(1) // Format the worksheet content with proper HTML const formattedContent = worksheet .split("\n") .map((line) => { // Check if line is a heading (starts with ##, #, or is all caps) if (line.startsWith("##")) { return `

${line.replace("##", "").trim()}

` } else if (line.startsWith("#")) { return `

${line.replace("#", "").trim()}

` } else if (line.match(/^[A-Z\s]{10,}$/)) { // All caps line (likely a section header) return `

${line.trim()}

` } else if (line.startsWith("- ") || line.match(/^\d+\./)) { // List item return `

${line}

` } else if (line.trim() === "") { return "
" } else { return `

${line}

` } }) .join("") // Create styled HTML document const htmlContent = ` ${subjectCapitalized} - ${topic} - ${gradeName}

${formattedContent}

` printWindow.document.write(htmlContent) printWindow.document.close() // Wait for content to load, then trigger print dialog setTimeout(() => { printWindow.print() }, 250) } return (

{/* Header */}

Teacher Dashboard

{/* Main Content */}

Worksheet Generator Create custom educational worksheets for your students

Subject *

Grade Level *

Topic * setTopic(e.target.value)} className="h-11 border-primary/20" />

Custom Instructions (Optional)

setCustomInstructions(e.target.value)}
                  rows={4}
                  className="border-primary/20 resize-none"
                />
              </div>

<Button
                onClick={generateWorksheet}
                disabled={!subject || !grade || !topic || generating}
                className="w-full h-12 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold text-base shadow-lg"
              >
                {generating ? (
                  <>
                    <Loader2 className="h-5 w-5 mr-2 animate-spin" />
                    Generating Worksheet...
                  </>
                ) : (
                  <>
                    <FileText className="h-5 w-5 mr-2" />
                    Generate Worksheet
                  </>
                )}
              </Button>

{worksheet && (
                <div className="mt-8 space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-500">
                  <div className="flex items-center justify-between">
                    <Label className="text-lg font-semibold">Generated Worksheet</Label>
                    <Button onClick={downloadAsPDF} variant="default" size="default" className="shadow-md">
                      <Download className="h-4 w-4 mr-2" />
                      Download as PDF
                    </Button>
                  </div>
                  <Card className="bg-white border-2 border-primary/20 shadow-lg">
                    <CardContent className="p-8">
                      <div className="space-y-4">
                        <div className="border-b-2 border-primary pb-4 mb-6">
                          <h2 className="text-2xl font-bold text-primary capitalize">
                            {subject}: {topic}
                          </h2>
                          <p className="text-muted-foreground mt-1">
                            Grade Level: {grade === "k" ? "Kindergarten" : `Grade ${grade}`}
                          </p>
                        </div>
                        <div className="prose prose-sm max-w-none">
                          <pre className="whitespace-pre-wrap font-sans text-sm leading-relaxed text-foreground">
                            {worksheet}
                          </pre>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              )}
            </CardContent>
          </Card>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]sql:file="scripts/004_update_profiles_add_email.sql" isMerged="true"
-- Add email column to profiles table if it doesn't exist
-- This allows parents to look up children by email without admin API

DO $$ 
BEGIN
  IF NOT EXISTS (
    SELECT 1 FROM information_schema.columns 
    WHERE table_name = 'profiles' AND column_name = 'email'
  ) THEN
    ALTER TABLE profiles ADD COLUMN email TEXT;
  END IF;
END $$;

-- Create a trigger to automatically sync email from auth.users to profiles
CREATE OR REPLACE FUNCTION sync_email_to_profile()
RETURNS TRIGGER AS $$
BEGIN
  UPDATE profiles 
  SET email = NEW.email 
  WHERE id = NEW.id;
  RETURN NEW;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

-- Drop trigger if exists and recreate
DROP TRIGGER IF EXISTS on_auth_user_email_updated ON auth.users;
CREATE TRIGGER on_auth_user_email_updated
  AFTER INSERT OR UPDATE OF email ON auth.users
  FOR EACH ROW
  EXECUTE FUNCTION sync_email_to_profile();

-- Sync existing emails
UPDATE profiles p
SET email = u.email
FROM auth.users u
WHERE p.id = u.id;
[V0_FILE]sql:file="scripts/005_allow_profile_lookup_for_parents.sql" isMerged="true"
-- Allow parents to look up student profiles by email for adding children
-- This is safe because we only allow looking up students, not other parents or teachers

CREATE POLICY "parents_can_lookup_students"
  ON public.profiles FOR SELECT
  USING (
    role = 'student' 
    OR 
    auth.uid() = id
  );

-- Drop the old restrictive policy
DROP POLICY IF EXISTS "profiles_select_own" ON public.profiles;

-- Recreate a policy that allows viewing own profile OR student profiles
CREATE POLICY "profiles_select_own_or_students"
  ON public.profiles FOR SELECT
  USING (
    auth.uid() = id 
    OR 
    role = 'student'
  );
[V0_FILE]sql:file="scripts/006_fix_profile_creation_trigger.sql" isMerged="true"
-- Update the handle_new_user function to include email field
CREATE OR REPLACE FUNCTION public.handle_new_user()
RETURNS TRIGGER AS $$
BEGIN
  INSERT INTO public.profiles (id, full_name, role, email)
  VALUES (
    new.id,
    coalesce(new.raw_user_meta_data ->> 'full_name', ''),
    coalesce(new.raw_user_meta_data ->> 'role', 'student'),
    new.email
  )
  ON CONFLICT (id) DO UPDATE SET
    full_name = EXCLUDED.full_name,
    role = EXCLUDED.role,
    email = EXCLUDED.email,
    updated_at = NOW();
  RETURN new;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER SET search_path = public;

-- Recreate the trigger to ensure it's active
DROP TRIGGER IF EXISTS on_auth_user_created ON auth.users;

CREATE TRIGGER on_auth_user_created
  AFTER INSERT ON auth.users
  FOR EACH ROW
  EXECUTE FUNCTION public.handle_new_user();
[V0_FILE]sql:file="scripts/007_create_profile_trigger_complete.sql" isMerged="true"
-- Drop existing trigger and function if they exist
DROP TRIGGER IF EXISTS on_auth_user_created ON auth.users;
DROP FUNCTION IF EXISTS handle_new_user() CASCADE;

-- Create the function to handle new user profile creation
CREATE OR REPLACE FUNCTION public.handle_new_user()
RETURNS TRIGGER
LANGUAGE plpgsql
SECURITY DEFINER
SET search_path = public
AS $$
BEGIN
  INSERT INTO public.profiles (id, email, full_name, role)
  VALUES (
    NEW.id,
    NEW.email,
    COALESCE(NEW.raw_user_meta_data->>'full_name', ''),
    COALESCE(NEW.raw_user_meta_data->>'role', 'student')
  );
  RETURN NEW;
END;
$$;

-- Create the trigger on auth.users
CREATE TRIGGER on_auth_user_created
  AFTER INSERT ON auth.users
  FOR EACH ROW
  EXECUTE FUNCTION public.handle_new_user();

-- Grant necessary permissions
GRANT USAGE ON SCHEMA public TO postgres, anon, authenticated, service_role;
GRANT ALL ON public.profiles TO postgres, anon, authenticated, service_role;
[V0_FILE]typescript:file="lib/supabase/client.ts" isMerged="true"
import { createBrowserClient } from "@supabase/ssr"

export function createClient() {
  return createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!)
}
[V0_FILE]typescript:file="lib/supabase/server.ts" isMerged="true"
import { createServerClient } from "@supabase/ssr"
import { cookies } from "next/headers"

export async function createClient() {
  const cookieStore = await cookies()

return createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, {
    cookies: {
      getAll() {
        return cookieStore.getAll()
      },
      setAll(cookiesToSet) {
        try {
          cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options))
        } catch {
          // The `setAll` method was called from a Server Component.
          // This can be ignored if you have middleware refreshing
          // user sessions.
        }
      },
    },
  })
}
[V0_FILE]typescript:file="lib/supabase/admin.ts" isMerged="true"
import { createClient } from "@supabase/supabase-js"

// Admin client with service role key - bypasses RLS
export function createAdminClient() {
  return createClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY!, {
    auth: {
      autoRefreshToken: false,
      persistSession: false,
    },
  })
}
[V0_FILE]typescriptreact:file="app/auth/register/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { signup } from "../actions"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { useRouter } from "next/navigation"
import Link from "next/link"

export default function RegisterPage() {
  const router = useRouter()
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState(false)

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setIsLoading(true)
    setError(null)

const formData = new FormData(e.currentTarget)
    const data = {
      email: formData.get("email") as string,
      password: formData.get("password") as string,
      fullName: formData.get("fullName") as string,
      role: formData.get("role") as "student" | "teacher" | "parent",
    }

console.log("[v0] Client: Form data being sent:", {
      ...data,
      password: "***hidden***",
    })

const result = await signup(data)

console.log("[v0] Client: Result from signup:", result)

if (result.error) {
      console.error("[v0] Client: Registration error:", result.error)
      setError(result.error)
      setIsLoading(false)
    } else if (result.success) {
      console.log("[v0] Client: Registration successful!")
      setSuccess(true)
      setIsLoading(false)
    }
  }

if (success) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 p-4">
        <Card className="w-full max-w-md">
          <CardHeader>
            <CardTitle>Check Your Email</CardTitle>
            <CardDescription>
              We've sent you a confirmation email. Please check your inbox and click the link to verify your account.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Button onClick={() => router.push("/auth/login")} className="w-full">
              Go to Login
            </Button>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 p-4">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle>Create Account</CardTitle>
          <CardDescription>Create a new account to access your personalized dashboard</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="fullName">Full Name</Label>
              <Input id="fullName" name="fullName" placeholder="John Doe" required disabled={isLoading} />
            </div>

<div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                name="email"
                type="email"
                placeholder="john@example.com"
                required
                disabled={isLoading}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="password">Password</Label>
              <Input
                id="password"
                name="password"
                type="password"
                placeholder="••••••••"
                required
                disabled={isLoading}
                minLength={6}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="role">I am a...</Label>
              <Select name="role" required disabled={isLoading}>
                <SelectTrigger>
                  <SelectValue placeholder="Select your role" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="student">Student</SelectItem>
                  <SelectItem value="teacher">Teacher</SelectItem>
                  <SelectItem value="parent">Parent</SelectItem>
                </SelectContent>
              </Select>
            </div>

{error && <div className="rounded-md bg-red-50 p-3 text-sm text-red-600">{error}</div>}

<Button type="submit" className="w-full" disabled={isLoading}>
              {isLoading ? "Creating Account..." : "Create Account"}
            </Button>

<p className="text-center text-sm text-gray-600">
              Already have an account?{" "}
              <Link href="/auth/login" className="text-indigo-600 hover:underline">
                Login here
              </Link>
            </p>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescript:file="app/auth/callback/route.ts" isEdit="true" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"

export async function GET(request: Request) {
  const requestUrl = new URL(request.url)
  const code = requestUrl.searchParams.get("code")
  const origin = requestUrl.origin

if (code) {
    const supabase = await createClient()
    const { data, error } = await supabase.auth.exchangeCodeForSession(code)

if (!error && data.user) {
      // Sometimes the profile might not be immediately available after email confirmation
      let profile = null
      let attempts = 0
      const maxAttempts = 3

while (!profile && attempts < maxAttempts) {
        const { data: profileData, error: profileError } = await supabase
          .from("profiles")
          .select("role")
          .eq("id", data.user.id)
          .single()

if (profileData) {
          profile = profileData
        } else {
          attempts++
          if (attempts < maxAttempts) {
            // Wait 500ms before retrying
            await new Promise((resolve) => setTimeout(resolve, 500))
          }
        }
      }

if (profile?.role === "student") {
        return NextResponse.redirect(`${origin}/khanmigo`)
      } else if (profile?.role === "teacher") {
        return NextResponse.redirect(`${origin}/teacher`)
      } else if (profile?.role === "parent") {
        return NextResponse.redirect(`${origin}/parent`)
      }

// If no profile found, redirect to login so user can sign in
      return NextResponse.redirect(`${origin}/auth/login?message=Email confirmed! Please sign in.`)
    }
  }

return NextResponse.redirect(`${origin}/auth/login`)
}
[V0_FILE]typescriptreact:file="app/for-schools/page.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import Link from "next/link"
import Image from "next/image"
import { BarChart3, Users, Zap, CheckCircle } from "lucide-react"

export default function ForSchoolsPage() {
  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="bg-white/80 backdrop-blur-md border-b border-border/40 sticky top-0 z-50 shadow-sm">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <Image
                src="/logo.png"
                alt="Rite Click Learning Point"
                width={180}
                height={50}
                className="object-contain"
              />
            </Link>
            <Link href="/">
              <Button variant="outline">Back to Home</Button>
            </Link>
          </div>
        </div>
      </header>

{/* Main Content */}
      <main className="container mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <div className="space-y-20">
          {/* Hero Section */}
          <section className="space-y-8">
            <div className="space-y-4">
              <h1 className="text-5xl lg:text-6xl font-bold text-accent">Transform Your School with AI</h1>
              <p className="text-xl text-muted-foreground max-w-2xl">
                Empower your teachers and engage your students with intelligent, personalized learning solutions.
              </p>
            </div>

{/* Features Grid */}
            <div className="grid md:grid-cols-3 gap-6 mt-12">
              <Card>
                <CardHeader>
                  <BarChart3 className="h-10 w-10 text-primary mb-2" />
                  <CardTitle>Data-Driven Insights</CardTitle>
                </CardHeader>
                <CardContent className="text-muted-foreground">
                  Track student progress with real-time analytics and gain actionable insights to improve outcomes.
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <Users className="h-10 w-10 text-secondary mb-2" />
                  <CardTitle>Scalable for Any Size</CardTitle>
                </CardHeader>
                <CardContent className="text-muted-foreground">
                  Whether you have 50 or 5,000 students, our platform scales seamlessly to meet your needs.
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <Zap className="h-10 w-10 text-accent mb-2" />
                  <CardTitle>Easy Integration</CardTitle>
                </CardHeader>
                <CardContent className="text-muted-foreground">
                  Integrate with your existing systems and start seeing results in days, not months.
                </CardContent>
              </Card>
            </div>
          </section>

{/* Benefits Section */}
          <section className="space-y-8">
            <h2 className="text-4xl font-bold text-accent">Why Schools Choose Us</h2>
            <div className="space-y-4">
              {[
                "Reduce teacher workload by 40% with automated grading and feedback",
                "Increase student engagement through personalized learning paths",
                "Improve test scores by an average of 15% in the first semester",
                "24/7 homework help reduces parent calls and support tickets",
                "Comprehensive reporting for administrators and stakeholders",
                "Full compliance with FERPA and data privacy regulations",
              ].map((benefit, index) => (
                <div key={index} className="flex gap-4">
                  <CheckCircle className="h-6 w-6 text-primary flex-shrink-0 mt-1" />
                  <p className="text-lg text-muted-foreground">{benefit}</p>
                </div>
              ))}
            </div>
          </section>

{/* CTA Section */}
          <section className="bg-gradient-to-r from-primary to-secondary text-white rounded-lg p-12 text-center space-y-6">
            <h2 className="text-3xl font-bold">Ready to Transform Your School?</h2>
            <p className="text-lg text-white/90 max-w-2xl mx-auto">
              Schedule a demo today and see how our AI tutor can benefit your students and teachers.
            </p>
            <Link href="/contact">
              <Button size="lg" className="bg-white text-primary hover:bg-white/90">
                Request a Demo
              </Button>
            </Link>
          </section>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/contact/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import Link from "next/link"
import Image from "next/image"
import { Mail, Phone, MapPin, Send } from "lucide-react"
import { useState } from "react"

export default function ContactPage() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subject: "",
    message: "",
  })

const [submitted, setSubmitted] = useState(false)

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    })
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    // Here you would send the form data to your backend
    console.log("Form submitted:", formData)
    setSubmitted(true)
    setFormData({ name: "", email: "", subject: "", message: "" })
    setTimeout(() => setSubmitted(false), 5000)
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="bg-white/80 backdrop-blur-md border-b border-border/40 sticky top-0 z-50 shadow-sm">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <Image
                src="/logo.png"
                alt="Rite Click Learning Point"
                width={180}
                height={50}
                className="object-contain"
              />
            </Link>
            <Link href="/">
              <Button variant="outline">Back to Home</Button>
            </Link>
          </div>
        </div>
      </header>

{/* Main Content */}
      <main className="container mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <div className="max-w-4xl mx-auto space-y-12">
          {/* Hero Section */}
          <section className="text-center space-y-4">
            <h1 className="text-5xl font-bold text-accent">Get in Touch</h1>
            <p className="text-xl text-muted-foreground">
              Have questions? We'd love to hear from you. Send us a message and we'll respond as soon as possible.
            </p>
          </section>

{/* Contact Info Cards */}
          <div className="grid md:grid-cols-3 gap-6">
            <Card className="text-center">
              <CardHeader>
                <Mail className="h-10 w-10 text-primary mx-auto mb-2" />
                <CardTitle>Email</CardTitle>
              </CardHeader>
              <CardContent className="text-muted-foreground">
                <p>support@riteclicklearning.com</p>
              </CardContent>
            </Card>

<Card className="text-center">
              <CardHeader>
                <Phone className="h-10 w-10 text-secondary mx-auto mb-2" />
                <CardTitle>Phone</CardTitle>
              </CardHeader>
              <CardContent className="text-muted-foreground">
                <p>+1 (555) 123-4567</p>
              </CardContent>
            </Card>

<Card className="text-center">
              <CardHeader>
                <MapPin className="h-10 w-10 text-accent mx-auto mb-2" />
                <CardTitle>Location</CardTitle>
              </CardHeader>
              <CardContent className="text-muted-foreground">
                <p>123 Learning Street, Education City, EC 12345</p>
              </CardContent>
            </Card>
          </div>

{/* Contact Form */}
          <Card className="p-8">
            <CardHeader className="mb-6">
              <CardTitle className="text-2xl">Send us a Message</CardTitle>
            </CardHeader>
            <CardContent>
              {submitted && (
                <div className="mb-6 p-4 bg-green-100 text-green-700 rounded-lg">
                  Thank you for your message! We'll get back to you soon.
                </div>
              )}
              <form onSubmit={handleSubmit} className="space-y-6">
                <div className="grid md:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-sm font-medium text-foreground mb-2">Name</label>
                    <input
                      type="text"
                      name="name"
                      value={formData.name}
                      onChange={handleChange}
                      required
                      className="w-full px-4 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                      placeholder="Your name"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-foreground mb-2">Email</label>
                    <input
                      type="email"
                      name="email"
                      value={formData.email}
                      onChange={handleChange}
                      required
                      className="w-full px-4 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                      placeholder="your@email.com"
                    />
                  </div>
                </div>
                <div>
                  <label className="block text-sm font-medium text-foreground mb-2">Subject</label>
                  <input
                    type="text"
                    name="subject"
                    value={formData.subject}
                    onChange={handleChange}
                    required
                    className="w-full px-4 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                    placeholder="What is this about?"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-foreground mb-2">Message</label>
                  <textarea
                    name="message"
                    value={formData.message}
                    onChange={handleChange}
                    required
                    rows={6}
                    className="w-full px-4 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                    placeholder="Tell us more..."
                  />
                </div>
                <Button type="submit" size="lg" className="w-full bg-primary hover:bg-primary/90">
                  <Send className="h-4 w-4 mr-2" />
                  Send Message
                </Button>
              </form>
            </CardContent>
          </Card>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/privacy/page.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import Link from "next/link"
import Image from "next/image"

export default function PrivacyPolicyPage() {
  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="bg-white/80 backdrop-blur-md border-b border-border/40 sticky top-0 z-50 shadow-sm">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <Image
                src="/logo.png"
                alt="Rite Click Learning Point"
                width={180}
                height={50}
                className="object-contain"
              />
            </Link>
            <Link href="/">
              <Button variant="outline">Back to Home</Button>
            </Link>
          </div>
        </div>
      </header>

{/* Main Content */}
      <main className="container mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <article className="max-w-3xl mx-auto prose prose-invert">
          <h1 className="text-5xl font-bold text-accent mb-8">Privacy Policy</h1>

<p className="text-lg text-muted-foreground mb-8">Last updated: January 2026</p>

<section className="space-y-8">
            <div>
              <h2 className="text-3xl font-bold text-accent mb-4">1. Introduction</h2>
              <p className="text-muted-foreground">
                Rite Click Learning Point ("we," "us," "our," or "Company") is committed to protecting your privacy.
                This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you
                visit our website and use our AI Tutor service.
              </p>
            </div>

<div>
              <h2 className="text-3xl font-bold text-accent mb-4">2. Information We Collect</h2>
              <p className="text-muted-foreground mb-4">We may collect information about you in a variety of ways:</p>
              <ul className="list-disc pl-6 text-muted-foreground space-y-2">
                <li>Information you voluntarily provide when registering for an account (name, email, password)</li>
                <li>Information about your educational background and learning preferences</li>
                <li>Usage data, including how you interact with our AI tutor and learning materials</li>
                <li>Device information such as IP address, browser type, and operating system</li>
                <li>Communications you send us, such as support emails or feedback</li>
              </ul>
            </div>

<div>
              <h2 className="text-3xl font-bold text-accent mb-4">3. How We Use Your Information</h2>
              <p className="text-muted-foreground mb-4">We use the information we collect to:</p>
              <ul className="list-disc pl-6 text-muted-foreground space-y-2">
                <li>Provide, maintain, and improve our services</li>
                <li>Personalize your learning experience with AI-driven recommendations</li>
                <li>Monitor and analyze trends, usage, and activities for security and improvement</li>
                <li>Send you updates, announcements, and educational content</li>
                <li>Respond to your inquiries and provide customer support</li>
                <li>Comply with legal obligations and enforce our terms of service</li>
              </ul>
            </div>

<div>
              <h2 className="text-3xl font-bold text-accent mb-4">4. Data Security</h2>
              <p className="text-muted-foreground">
                We implement appropriate technical and organizational measures to protect your personal information
                against unauthorized access, alteration, disclosure, or destruction. However, no method of transmission
                over the Internet or electronic storage is 100% secure, and we cannot guarantee absolute security.
              </p>
            </div>

<div>
              <h2 className="text-3xl font-bold text-accent mb-4">5. Children's Privacy</h2>
              <p className="text-muted-foreground">
                Our service is designed for students of all ages. For children under 13, we comply with the Children's
                Online Privacy Protection Act (COPPA). We do not knowingly collect personal information from children
                under 13 without verifiable parental consent. If we learn we have collected personal information from a
                child under 13 without parental consent, we will delete such information as quickly as possible.
              </p>
            </div>

<div>
              <h2 className="text-3xl font-bold text-accent mb-4">6. Your Rights</h2>
              <p className="text-muted-foreground mb-4">You have the right to:</p>
              <ul className="list-disc pl-6 text-muted-foreground space-y-2">
                <li>Access your personal information</li>
                <li>Correct inaccurate or incomplete data</li>
                <li>Request deletion of your information</li>
                <li>Opt out of marketing communications</li>
                <li>Data portability in a structured format</li>
              </ul>
            </div>

<div>
              <h2 className="text-3xl font-bold text-accent mb-4">7. Third-Party Services</h2>
              <p className="text-muted-foreground">
                We may use third-party service providers (such as hosting providers, payment processors, and analytics
                companies) to support our service. These providers are contractually bound to protect your information
                and use it only for the purposes we specify.
              </p>
            </div>

<div>
              <h2 className="text-3xl font-bold text-accent mb-4">8. Changes to This Privacy Policy</h2>
              <p className="text-muted-foreground">
                We may update this Privacy Policy from time to time to reflect changes in our practices, technology, or
                legal requirements. We will notify you of any significant changes via email or by posting the updated
                policy on our website.
              </p>
            </div>

<div>
              <h2 className="text-3xl font-bold text-accent mb-4">9. Contact Us</h2>
              <p className="text-muted-foreground">
                If you have questions about this Privacy Policy or our privacy practices, please contact us at:
              </p>
              <p className="text-muted-foreground mt-4">
                Rite Click Learning Point
                <br />
                Email: privacy@riteclicklearning.com
                <br />
                Address: 123 Learning Street, Education City, EC 12345
              </p>
            </div>
          </section>
        </article>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/blog/page.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import Link from "next/link"
import Image from "next/image"
import { Clock, User } from "lucide-react"

export default function BlogPage() {
  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="bg-white/80 backdrop-blur-md border-b border-border/40 sticky top-0 z-50 shadow-sm">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <Image
                src="/logo.png"
                alt="Rite Click Learning Point"
                width={180}
                height={50}
                className="object-contain"
              />
            </Link>
            <Link href="/">
              <Button variant="outline">Back to Home</Button>
            </Link>
          </div>
        </div>
      </header>

{/* Main Content */}
      <main className="container mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <div className="space-y-16">
          {/* Blog Header */}
          <section className="space-y-4 text-center">
            <h1 className="text-5xl font-bold text-accent">AI Tutor Blog</h1>
            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
              Learn tips, tricks, and best practices for using our AI Tutor to excel in your studies.
            </p>
          </section>

{/* Featured Article */}
          <section className="space-y-6">
            <h2 className="text-3xl font-bold text-accent">Featured Article</h2>
            <Card className="overflow-hidden border-primary/30 hover:border-primary/60 transition-colors">
              <CardHeader>
                <div className="space-y-2">
                  <CardTitle className="text-2xl">How to Use the AI Tutor: A Complete Guide</CardTitle>
                  <CardDescription className="flex items-center gap-4 text-sm">
                    <span className="flex items-center gap-1">
                      <User className="h-4 w-4" />
                      Rite Click Learning Team
                    </span>
                    <span className="flex items-center gap-1">
                      <Clock className="h-4 w-4" />5 min read
                    </span>
                  </CardDescription>
                </div>
              </CardHeader>
              <CardContent className="space-y-4">
                <p className="text-muted-foreground">
                  Getting started with our AI Tutor is simple and intuitive. Whether you're a student seeking homework
                  help, a teacher creating engaging lessons, or a parent monitoring your child's progress, our platform
                  is designed to meet your needs. In this comprehensive guide, we'll walk you through every feature and
                  show you how to get the most out of your learning experience.
                </p>

<div className="space-y-4">
                  <h3 className="text-xl font-bold text-accent">Getting Started</h3>
                  <p className="text-muted-foreground">
                    First, create your account based on your role: Student, Teacher, or Parent. Each role comes with
                    tailored features designed specifically for your needs. Students get access to the AI chat tutor,
                    practice problems, and progress tracking. Teachers can create worksheets, quizzes, and monitor
                    student progress. Parents can track their child's learning journey and receive insights about their
                    academic growth.
                  </p>

<h3 className="text-xl font-bold text-accent">Using the AI Chat Tutor</h3>
                  <p className="text-muted-foreground">
                    The heart of our platform is the AI Chat Tutor. Simply describe the subject you need help with or
                    the problem you're struggling on. Our AI will guide you through the solution step-by-step, teaching
                    you the underlying concepts rather than just giving you answers. You can ask follow-up questions,
                    request explanations in different ways, and explore related topics.
                  </p>

<h3 className="text-xl font-bold text-accent">Key Features to Explore</h3>
                  <ul className="list-disc pl-6 text-muted-foreground space-y-2">
                    <li>
                      <strong>Subject Selection:</strong> Choose from Math, English, Science, and Coding to get
                      subject-specific help
                    </li>
                    <li>
                      <strong>Practice Problems:</strong> Solve AI-generated problems tailored to your learning level
                    </li>
                    <li>
                      <strong>Progress Dashboard:</strong> Track your learning journey with detailed analytics
                    </li>
                    <li>
                      <strong>Parent Insights:</strong> Parents can link their children and monitor their activity and
                      progress
                    </li>
                    <li>
                      <strong>Teacher Tools:</strong> Create custom worksheets and assessments for your students
                    </li>
                  </ul>

<h3 className="text-xl font-bold text-accent">Tips for Maximum Learning</h3>
                  <p className="text-muted-foreground">
                    For the best results, we recommend asking the AI to explain concepts in multiple ways if something
                    isn't clear. Use the practice problems after learning new topics to reinforce your understanding.
                    Review your progress dashboard regularly to identify areas where you need more help. And remember -
                    the AI is here to help you learn, not just to complete assignments. Take time to understand the
                    concepts, and your academic performance will improve dramatically.
                  </p>

<h3 className="text-xl font-bold text-accent">Parent Involvement</h3>
                  <p className="text-muted-foreground">
                    Parents play a crucial role in student success. By monitoring your child's AI tutor activity on the
                    parent dashboard, you can see which subjects they're studying, how many questions they've asked, and
                    their overall engagement. This gives you insights into their academic interests and areas where they
                    might need additional support. You can use this information to have meaningful conversations about
                    their learning and provide encouragement.
                  </p>

<h3 className="text-xl font-bold text-accent">Getting Help</h3>
                  <p className="text-muted-foreground">
                    If you ever get stuck or have questions about using the platform, our Help Center is available 24/7.
                    You can also reach out to our support team directly through the Contact Us page. We're here to help
                    you succeed!
                  </p>
                </div>

<div className="pt-6">
                  <p className="text-sm text-muted-foreground italic">
                    Start your learning journey today and experience the power of personalized AI-driven education. With
                    Rite Click Learning Point's AI Tutor, homework becomes easier, learning becomes fun, and success is
                    within reach.
                  </p>
                </div>
              </CardContent>
            </Card>
          </section>

{/* Related Articles */}
          <section className="space-y-6">
            <h2 className="text-3xl font-bold text-accent">More Articles Coming Soon</h2>
            <p className="text-muted-foreground">
              We're constantly adding new articles about study strategies, subject-specific tips, parental guidance, and
              teacher resources. Check back soon for more content!
            </p>
          </section>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/auth/forgot-password/page.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { resetPasswordEmail } from "../actions"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import Link from "next/link"

export default function ForgotPasswordPage() {
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState(false)
  const [email, setEmail] = useState("")

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setIsLoading(true)
    setError(null)

if (!email) {
      setError("Please enter your email address")
      setIsLoading(false)
      return
    }

const result = await resetPasswordEmail(email)

if (result?.error) {
      setError(result.error)
      setIsLoading(false)
    } else if (result?.success) {
      setSuccess(true)
      setEmail("")
      setIsLoading(false)
    }
  }

if (success) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 p-4">
        <Card className="w-full max-w-md">
          <CardHeader>
            <CardTitle>Check Your Email</CardTitle>
            <CardDescription>We've sent you a password reset link</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="rounded-md bg-green-50 p-4">
              <p className="text-sm text-green-800">
                If an account exists with that email address, you'll receive a password reset link shortly. Please check your email and follow the instructions to reset your password.
              </p>
            </div>

<div className="space-y-2">
              <p className="text-sm text-gray-600">Didn't receive an email?</p>
              <ul className="list-inside list-disc space-y-1 text-sm text-gray-600">
                <li>Check your spam folder</li>
                <li>Wait a few minutes and try again</li>
              </ul>
            </div>

<Button onClick={() => setSuccess(false)} variant="outline" className="w-full">
              Try Another Email
            </Button>

return (
    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 p-4">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle>Forgot Password?</CardTitle>
          <CardDescription>
            Enter your email address and we'll send you a link to reset your password
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="email">Email Address</Label>
              <Input
                id="email"
                type="email"
                placeholder="john@example.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
                disabled={isLoading}
              />
            </div>

{error && <div className="rounded-md bg-red-50 p-3 text-sm text-red-600">{error}</div>}

<Button type="submit" className="w-full" disabled={isLoading}>
              {isLoading ? "Sending..." : "Send Reset Link"}
            </Button>

<p className="text-center text-sm text-gray-600">
              Remember your password?{" "}
              <Link href="/auth/login" className="text-indigo-600 hover:underline">
                Sign in here
              </Link>
            </p>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/auth/reset-password/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/auth/login/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { login } from "../actions"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import Link from "next/link"

export default function LoginPage() {
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const router = useRouter()

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setIsLoading(true)
    setError(null)

const formData = new FormData(e.currentTarget)
    const data = {
      email: formData.get("email") as string,
      password: formData.get("password") as string,
    }

console.log("[v0] Login: Attempting login for", data.email)

const result = await login(data)

console.log("[v0] Login: Result received", result)

if (result?.error) {
      console.log("[v0] Login: Error", result.error)
      setError(result.error)
      setIsLoading(false)
    } else if (result?.success && result?.redirectTo) {
      console.log("[v0] Login: Redirecting to", result.redirectTo)
      // Force refresh to update auth state, then redirect
      router.refresh()
      // Use window.location for a hard redirect to ensure session is recognized
      window.location.href = result.redirectTo
    } else {
      console.log("[v0] Login: No redirect URL, going to homepage")
      setIsLoading(false)
    }
  }

return (
    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 p-4">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle>Welcome Back</CardTitle>
          <CardDescription>Sign in to your account to continue</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                name="email"
                type="email"
                placeholder="john@example.com"
                required
                disabled={isLoading}
              />
            </div>

<div className="space-y-2">
              <div className="flex items-center justify-between">
                <Label htmlFor="password">Password</Label>
                <Link href="/auth/forgot-password" className="text-sm text-indigo-600 hover:underline">
                  Forgot password?
                </Link>
              </div>
              <Input
                id="password"
                name="password"
                type="password"
                placeholder="••••••••"
                required
                disabled={isLoading}
              />
            </div>

{error && <div className="rounded-md bg-red-50 p-3 text-sm text-red-600">{error}</div>}

<Button type="submit" className="w-full" disabled={isLoading}>
              {isLoading ? "Signing In..." : "Sign In"}
            </Button>

<div className="space-y-3 text-center text-sm">
              <p className="text-gray-600">
                Don't have an account?{" "}
                <Link href="/auth/register" className="text-indigo-600 hover:underline">
                  Create one here
                </Link>
              </p>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/khanmigo/page.tsx" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { ScrollArea } from "@/components/ui/scroll-area"
import { ArrowLeft, Send, User, BookOpen, Camera, LogOut, FileText } from "lucide-react"
import Link from "next/link"
import { createClient } from "@/lib/supabase/client"
import { useRouter } from "next/navigation"
import { logActivity } from "@/lib/activity-tracker"

interface Message {
  id: string
  content: string
  sender: "user" | "ai"
  timestamp: Date
}

export default function RiteClickHelpPage() {
  const [messages, setMessages] = useState<Message[]>([
    {
      id: "welcome",
      content: "Hi! I'm your learning companion. Choose a subject below to get started with homework help!",
      sender: "ai",
      timestamp: new Date(),
    },
  ])
  const [input, setInput] = useState("")
  const [selectedSubject, setSelectedSubject] = useState<Subject>(null)
  const [isLoading, setIsLoading] = useState(false)
  const scrollRef = useRef<HTMLDivElement>(null)
  const router = useRouter()
  const supabase = createClient()

const handleSignOut = async () => {
    await supabase.auth.signOut()
    router.push("/auth/login")
  }

const subjects = [
    { id: "math", label: "Math", icon: "🔢" },
    { id: "reading", label: "Reading Comprehension", icon: "📖" },
    { id: "essay", label: "Essay & Story Building", icon: "✍️" },
    { id: "science", label: "Science", icon: "🔬" },
    { id: "coding", label: "Coding", icon: "💻" },
  ]

const features = [
    { id: "homework", label: "Homework Help", icon: BookOpen },
    { id: "worksheet", label: "Worksheet Generator", icon: FileText },
    { id: "upload", label: "Upload Photo", icon: Camera },
  ]

useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollIntoView({ behavior: "smooth" })
    }
  }, [messages])

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

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

setMessages((prev) => [...prev, userMessage])
    const currentInput = input.trim()
    setInput("")
    setIsLoading(true)

try {
      const response = await fetch("/api/ai-tutor", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          message: currentInput,
          subject: selectedSubject,
          conversationHistory: messages,
        }),
      })

const data = await response.json()
      const aiMessage: Message = {
        id: (Date.now() + 1).toString(),
        content: data.response || "Let me help you with this...",
        sender: "ai",
        timestamp: new Date(),
      }
      setMessages((prev) => [...prev, aiMessage])

await logActivity("chat", `Asked a ${selectedSubject} question`, {
        subject: selectedSubject,
        question: currentInput,
        responseLength: data.response?.length || 0,
      })
    } catch (error) {
      console.error("Error:", error)
      const errorMessage: Message = {
        id: (Date.now() + 1).toString(),
        content: "Sorry, I had trouble processing your question. Please try again!",
        sender: "ai",
        timestamp: new Date(),
      }
      setMessages((prev) => [...prev, errorMessage])
    } finally {
      setIsLoading(false)
    }
  }

const handleSelectSubject = async (subject: Subject, label: string) => {
    setSelectedSubject(subject)
    setMessages([
      {
        id: "new",
        content: `Great! I'm ready to help you with ${label}. What would you like help with?`,
        sender: "ai",
        timestamp: new Date(),
      },
    ])

// Log subject selection as activity
    await logActivity("chat", `Started ${label} session`, {
      subject: subject,
      action: "subject_selected",
    })
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="bg-gradient-to-r from-purple-600 to-purple-700 text-white sticky top-0 z-10">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <h1 className="text-2xl font-bold">Rite Click Help</h1>
            {/* Direct Activity Log and Sign Out buttons */}
            <div className="flex items-center gap-2">
              <Button variant="ghost" size="sm" className="text-white hover:bg-white/20" onClick={handleSignOut}>
                <LogOut className="h-4 w-4 mr-2" />
                Sign Out
              </Button>
            </div>
          </div>
        </div>
      </header>

<div className="flex h-[calc(100vh-70px)]">
        {/* Sidebar */}
        <div className="w-64 bg-card border-r border-border overflow-y-auto">
          <div className="p-4 space-y-6">
            {/* Homework Help Section */}
            <div>
              <h3 className="font-semibold text-foreground mb-3 flex items-center gap-2">
                <BookOpen className="h-4 w-4 text-primary" />
                Homework Help
              </h3>
              <div className="space-y-2">
                {subjects.map((subject) => (
                  <button
                    key={subject.id}
                    onClick={() => handleSelectSubject(subject.id as Subject, subject.label)}
                    className={`w-full text-left px-3 py-2 rounded-md text-sm transition ${
                      selectedSubject === subject.id
                        ? "bg-primary text-primary-foreground"
                        : "hover:bg-muted text-foreground"
                    }`}
                  >
                    <span className="mr-2">{subject.icon}</span>
                    {subject.label}
                  </button>
                ))}
              </div>
            </div>

{/* Features */}
            <div className="border-t border-border pt-4">
              <h3 className="font-semibold text-foreground mb-3">Tools</h3>
              <div className="space-y-2">
                <Link href="/upload">
                  <Button variant="outline" className="w-full justify-start text-left bg-transparent" size="sm">
                    <Camera className="h-4 w-4 mr-2" />
                    Upload Photo
                  </Button>
                </Link>
              </div>
            </div>
          </div>
        </div>

{/* Main Chat Area */}
        <div className="flex-1 flex flex-col">
          {/* Chat Messages */}
          <ScrollArea className="flex-1 p-6">
            <div className="space-y-4 max-w-4xl">
              {messages.map((message) => (
                <div
                  key={message.id}
                  className={`flex gap-3 ${message.sender === "user" ? "justify-end" : "justify-start"}`}
                >
                  {message.sender === "ai" && (
                    <div className="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0">
                      <span className="text-lg">🤖</span>
                    </div>
                  )}

<div
                    className={`max-w-md rounded-lg p-4 ${
                      message.sender === "user"
                        ? "bg-primary text-primary-foreground"
                        : "bg-muted text-muted-foreground border border-border"
                    }`}
                  >
                    <p className="text-sm leading-relaxed whitespace-pre-wrap">{message.content}</p>
                    <p className="text-xs opacity-70 mt-1">
                      {message.timestamp.toLocaleTimeString([], {
                        hour: "2-digit",
                        minute: "2-digit",
                      })}
                    </p>
                  </div>

{message.sender === "user" && (
                    <div className="w-8 h-8 rounded-full bg-secondary flex items-center justify-center flex-shrink-0">
                      <User className="h-4 w-4 text-secondary-foreground" />
                    </div>
                  )}
                </div>
              ))}

{isLoading && (
                <div className="flex gap-3">
                  <div className="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0">
                    <span className="text-lg">🤖</span>
                  </div>
                  <div className="bg-muted rounded-lg p-3">
                    <div className="flex gap-1">
                      <div className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce"></div>
                      <div
                        className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce"
                        style={{ animationDelay: "0.1s" }}
                      ></div>
                      <div
                        className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce"
                        style={{ animationDelay: "0.2s" }}
                      ></div>
                    </div>
                  </div>
                </div>
              )}
              <div ref={scrollRef} />
            </div>
          </ScrollArea>

{/* Input Area */}
          <div className="border-t border-border p-4 bg-card">
            <div className="max-w-4xl mx-auto flex gap-2">
              <Input
                value={input}
                onChange={(e) => setInput(e.target.value)}
                onKeyPress={(e) => {
                  if (e.key === "Enter" && !e.shiftKey) {
                    e.preventDefault()
                    sendMessage()
                  }
                }}
                placeholder={selectedSubject ? `Ask about ${selectedSubject}...` : "Choose a subject to start..."}
                className="flex-1"
                disabled={!selectedSubject || isLoading}
              />
              <Button onClick={sendMessage} disabled={!input.trim() || !selectedSubject || isLoading} size="icon">
                <Send className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/parent/page.tsx" isMerged="true"
"use client"

import React from "react"
import { createClient } from "@/lib/supabase/client"
import { signout } from "@/app/auth/actions"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { AlertCircle, CheckCircle, Loader2, LogOut, User, BookOpen, Trophy, Brain } from "lucide-react"
import { useState, useEffect } from "react"
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"

interface Child {
  id: string
  email: string
  full_name: string
  created_at: string
}

interface Activity {
  id: string
  type: string
  description: string
  metadata?: Record<string, unknown>
  created_at: string
}

interface ChildStats {
  totalQuestions: number
  subjectsUsed: number
  weeklyData: { day: string; count: number }[]
  recentActivities: Activity[]
}

const ParentPage = () => {
  const [session, setSession] = useState<any>(null)
  const [children, setChildren] = useState<Child[]>([])
  const [selectedChildId, setSelectedChildId] = useState<string | null>(null)
  const [childEmail, setChildEmail] = useState("")
  const [loading, setLoading] = useState(true)
  const [addingChild, setAddingChild] = useState(false)
  const [error, setError] = useState("")
  const [success, setSuccess] = useState("")
  const [stats, setStats] = useState<ChildStats>({
    totalQuestions: 0,
    subjectsUsed: 0,
    weeklyData: [],
    recentActivities: [],
  })

// Check authentication
  useEffect(() => {
    const checkAuth = async () => {
      const supabase = await createClient()
      const { data } = await supabase.auth.getSession()
      if (data.session?.user.email) {
        setSession(data.session.user)
        await loadChildren(data.session.user.id)
      }
      setLoading(false)
    }
    checkAuth()
  }, [])

// Load children
  const loadChildren = async (parentId: string) => {
    const supabase = await createClient()
    const { data } = await supabase
      .from("parent_children")
      .select("child_id")
      .eq("parent_id", parentId)

if (data && data.length > 0) {
      // Get the child profile details for each linked child
      const childIds = data.map((item: any) => item.child_id)
      const { data: childProfiles } = await supabase
        .from("profiles")
        .select("id, email, full_name")
        .in("id", childIds)

if (childProfiles) {
        setChildren(childProfiles)
        if (childProfiles.length > 0) {
          setSelectedChildId(childProfiles[0].id)
        }
      }
    } else {
      setChildren([])
      setSelectedChildId(null)
    }
  }

// Load child statistics
  useEffect(() => {
    if (selectedChildId) {
      loadChildStats(selectedChildId)
    }
  }, [selectedChildId])

const loadChildStats = async (childId: string) => {
    const supabase = await createClient()
    // Get parent-child relationship creation date
    const { data: relationshipData } = await supabase
      .from("parent_children")
      .select("created_at")
      .eq("child_id", childId)
      .single()

const linkDate = relationshipData?.created_at ? new Date(relationshipData.created_at) : new Date()

// Get activities from link date onwards
    const { data: activities } = await supabase
      .from("activities")
      .select("*")
      .eq("user_id", childId)
      .gte("created_at", linkDate.toISOString())
      .order("created_at", { ascending: false })

if (!activities) {
      setStats({
        totalQuestions: 0,
        subjectsUsed: 0,
        weeklyData: [],
        recentActivities: [],
      })
      return
    }

// Calculate stats
    const totalQuestions = activities.filter((a) => a.type === "chat" || a.type === "quiz").length
    const subjects = new Set(activities.map((a) => a.metadata?.subject).filter(Boolean))

// Calculate weekly data (last 7 days)
    const weeklyData: { [key: string]: number } = {}
    const today = new Date()
    for (let i = 6; i >= 0; i--) {
      const date = new Date(today)
      date.setDate(date.getDate() - i)
      const dateStr = date.toLocaleDateString("en-US", { weekday: "short" })
      weeklyData[dateStr] = 0
    }

activities.forEach((activity) => {
      const actDate = new Date(activity.created_at)
      const dateStr = actDate.toLocaleDateString("en-US", { weekday: "short" })
      if (dateStr in weeklyData) {
        weeklyData[dateStr]++
      }
    })

setStats({
      totalQuestions,
      subjectsUsed: subjects.size,
      weeklyData: Object.entries(weeklyData).map(([day, count]) => ({ day, count })),
      recentActivities: activities.slice(0, 20),
    })
  }

// Add child
  const handleAddChild = async (e: React.FormEvent) => {
    e.preventDefault()
    setError("")
    setSuccess("")
    setAddingChild(true)

if (!session?.id) {
      setError("Parent ID not found")
      setAddingChild(false)
      return
    }

const supabase = await createClient()
    // Fetch the child profile
    const { data: childProfile } = await supabase
      .from("profiles")
      .select("id, email")
      .eq("email", childEmail.trim())
      .single()

if (!childProfile) {
      setError("Student not found. Please check the email address.")
      setAddingChild(false)
      return
    }

// Create parent-child relationship
    const { error: linkError } = await supabase.from("parent_children").insert({
      parent_id: session.id,
      child_id: childProfile.id,
    })

if (linkError) {
      if (linkError.message.includes("duplicate")) {
        setError("This child is already linked to your account.")
        // Still reload children to show the existing links
        await loadChildren(session.id)
      } else {
        setError("Failed to link child. Please try again.")
      }
    } else {
      setSuccess("Child added successfully!")
      setChildEmail("")
      await loadChildren(session.id)
    }

setAddingChild(false)
  }

const handleLogout = async () => {
    await signout()
  }

if (loading) {
    return (
      <div className="flex h-screen items-center justify-center">
        <Loader2 className="h-8 w-8 animate-spin" />
      </div>
    )
  }

if (!session) {
    return (
      <div className="flex h-screen items-center justify-center">
        <div className="text-center">
          <h2 className="mb-4 text-2xl font-bold">Access Denied</h2>
          <p className="text-gray-600">Please log in as a parent to access this page.</p>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
      {/* Header */}
      <header className="border-b bg-white shadow-sm">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <h1 className="text-2xl font-bold text-gray-800">Parent Dashboard</h1>
            <div className="flex items-center gap-4">
              <span className="text-sm text-gray-600">{session.email}</span>
              <Button onClick={handleLogout} variant="outline" size="sm">
                <LogOut className="h-4 w-4 mr-2" />
                Logout
              </Button>
            </div>
          </div>
        </div>
      </header>

<main className="container mx-auto px-4 py-8">
        {/* Add Child Section */}
        <Card className="mb-8">
          <CardHeader>
            <CardTitle>Link a Child</CardTitle>
            <CardDescription>Enter your child's email address to monitor their progress</CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleAddChild} className="max-w-md">
              <div className="space-y-4">
                <div>
                  <Label htmlFor="childEmail">Child's Email</Label>
                  <Input
                    id="childEmail"
                    type="email"
                    placeholder="student@example.com"
                    value={childEmail}
                    onChange={(e) => setChildEmail(e.target.value)}
                    disabled={addingChild}
                    required
                  />
                </div>
                {error && (
                  <div className="flex items-center gap-2 rounded-lg bg-red-50 p-3 text-sm text-red-700">
                    <AlertCircle className="h-4 w-4" />
                    {error}
                  </div>
                )}
                {success && (
                  <div className="flex items-center gap-2 rounded-lg bg-green-50 p-3 text-sm text-green-700">
                    <CheckCircle className="h-4 w-4" />
                    {success}
                  </div>
                )}
                <Button type="submit" disabled={addingChild} className="w-full">
                  {addingChild ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      Adding...
                    </>
                  ) : (
                    "Add Child"
                  )}
                </Button>
              </div>
            </form>
          </CardContent>
        </Card>

{/* Children Selection */}
        {children.length > 0 && (
          <div className="mb-8 flex gap-2 overflow-x-auto pb-2">
            {children.map((child) => (
              <Button
                key={child.id}
                variant={selectedChildId === child.id ? "default" : "outline"}
                onClick={() => setSelectedChildId(child.id)}
                className="whitespace-nowrap"
              >
                <User className="mr-2 h-4 w-4" />
                {child.full_name}
              </Button>
            ))}
          </div>
        )}

{/* Child Dashboard */}
        {selectedChildId && (
          <div className="space-y-6">
            {/* Stats Cards */}
            <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
              <Card>
                <CardHeader className="pb-2">
                  <CardTitle className="text-sm font-medium text-gray-600">Total Questions</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center gap-2">
                    <Brain className="h-5 w-5 text-blue-600" />
                    <span className="text-2xl font-bold">{stats.totalQuestions}</span>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader className="pb-2">
                  <CardTitle className="text-sm font-medium text-gray-600">Subjects Explored</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center gap-2">
                    <BookOpen className="h-5 w-5 text-green-600" />
                    <span className="text-2xl font-bold">{stats.subjectsUsed}</span>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader className="pb-2">
                  <CardTitle className="text-sm font-medium text-gray-600">This Week</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center gap-2">
                    <Trophy className="h-5 w-5 text-purple-600" />
                    <span className="text-2xl font-bold">{stats.recentActivities.length}</span>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader className="pb-2">
                  <CardTitle className="text-sm font-medium text-gray-600">Linked Since</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="text-sm font-semibold">
                    {children.find((c) => c.id === selectedChildId)?.created_at
                      ? new Date(children.find((c) => c.id === selectedChildId)!.created_at).toLocaleDateString()
                      : "Today"}
                  </div>
                </CardContent>
              </Card>
            </div>

{/* Weekly Activity Chart */}
            <Card>
              <CardHeader>
                <CardTitle>Weekly Activity</CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={300}>
                  <BarChart data={stats.weeklyData}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="day" />
                    <YAxis />
                    <Tooltip />
                    <Bar dataKey="count" fill="#4f46e5" />
                  </BarChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>

{/* Recent Activities */}
            <Card>
              <CardHeader>
                <CardTitle>Recent Activity</CardTitle>
                <CardDescription>Latest learning activities from your child</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-3 max-h-96 overflow-y-auto">
                  {stats.recentActivities.length === 0 ? (
                    <p className="text-sm text-gray-500">No activities yet since linking</p>
                  ) : (
                    stats.recentActivities.map((activity) => (
                      <div key={activity.id} className="flex items-start gap-3 border-l-2 border-indigo-200 pl-4 py-2">
                        <div className="mt-1">
                          {activity.type === "chat" && <Brain className="h-4 w-4 text-blue-600" />}
                          {activity.type === "quiz" && <Trophy className="h-4 w-4 text-purple-600" />}
                          {activity.type === "worksheet" && <BookOpen className="h-4 w-4 text-green-600" />}
                        </div>
                        <div className="flex-1">
                          <p className="text-sm font-medium">{activity.description}</p>
                          <p className="text-xs text-gray-500">
                            {activity.metadata?.subject && `Subject: ${activity.metadata.subject} • `}
                            {new Date(activity.created_at).toLocaleDateString()} at{" "}
                            {new Date(activity.created_at).toLocaleTimeString()}
                          </p>
                        </div>
                      </div>
                    ))
                  )}
                </div>
              </CardContent>
            </Card>
          </div>
        )}

{/* No Children Message */}
        {children.length === 0 && (
          <Card className="text-center">
            <CardHeader>
              <CardTitle>No Children Linked Yet</CardTitle>
              <CardDescription>Add a child above to start monitoring their learning progress</CardDescription>
            </CardHeader>
          </Card>
        )}
      </main>
    </div>
  )
}

export default ParentPage
[V0_FILE]typescript:file="app/auth/actions.ts" isMerged="true"
"use server"

import { createAdminClient } from "@/lib/supabase/admin"
import { createClient } from "@/lib/supabase/server"
import { revalidatePath } from "next/cache"
import { redirect } from "next/navigation"

export async function signup(formData: {
  email: string
  password: string
  fullName: string
  role: "student" | "teacher" | "parent"
}) {
  const adminClient = createAdminClient()

if (!formData.email || !formData.password || !formData.fullName || !formData.role) {
    return { error: "All fields are required" }
  }

// Check if email already exists in profiles table
  const { data: existingProfile } = await adminClient
    .from("profiles")
    .select("id")
    .eq("email", formData.email)
    .single()

if (existingProfile) {
    return { error: "An account with this email already exists. Please log in instead." }
  }

const supabase = await createClient()

// Always use production domain for email verification to ensure domain consistency
  const redirectUrl = `${process.env.NEXT_PUBLIC_SITE_URL || "https://kiddohelper.rclpoint.com"}/auth/callback`

const { data: authData, error: authError } = await supabase.auth.signUp({
    email: formData.email,
    password: formData.password,
    options: {
      emailRedirectTo: redirectUrl,
    },
  })

if (authError) {
    // Check for common auth errors and provide user-friendly messages
    console.log("[v0] Auth Error:", { message: authError.message, code: authError.code, status: authError.status })
    
    if (
      authError.message.includes("already registered") || 
      authError.message.includes("user already exists") ||
      authError.message.includes("duplicate")
    ) {
      return { error: "An account with this email already exists. Please log in instead." }
    }
    if (authError.message.includes("invalid email")) {
      return { error: "Please enter a valid email address." }
    }
    return { error: `Authentication error: ${authError.message}` }
  }

if (!authData.user) {
    return { error: "Failed to create user" }
  }

// Create profile using admin client (bypasses RLS)
  const profileData = {
    id: authData.user.id,
    full_name: formData.fullName,
    email: formData.email,
    role: formData.role,
  }

const { error: profileError } = await adminClient.from("profiles").insert(profileData)

if (profileError) {
    // If profile creation fails, delete the auth user
    await adminClient.auth.admin.deleteUser(authData.user.id)
    
    // Check for specific profile creation errors
    console.log("[v0] Profile Error:", { message: profileError.message, code: profileError.code })
    
    if (
      profileError.message.includes("duplicate") || 
      profileError.message.includes("unique") ||
      profileError.code === "23505"
    ) {
      return { error: "An account with this email already exists. Please log in instead." }
    }
    return { error: "Failed to save user profile. Please try again." }
  }

return { success: true }
}

export async function login(formData: { email: string; password: string }) {
  console.log("[v0] Server Login: Starting login for", formData.email)

const supabase = await createClient()

const { data, error } = await supabase.auth.signInWithPassword({
    email: formData.email,
    password: formData.password,
  })

if (error) {
    console.log("[v0] Server Login: Auth error", error.message)
    return { error: error.message }
  }

if (!data.user) {
    console.log("[v0] Server Login: No user returned")
    return { error: "Login failed" }
  }

console.log("[v0] Server Login: Auth successful, user id:", data.user.id)

const adminClient = createAdminClient()
  const { data: profile } = await adminClient.from("profiles").select("role").eq("id", data.user.id).single()

console.log("[v0] Server Login: Profile fetched", { profile })

revalidatePath("/", "layout")

// Determine redirect based on role
  let redirectTo = "/"
  if (profile?.role === "student") {
    redirectTo = "/khanmigo"
  } else if (profile?.role === "teacher") {
    redirectTo = "/teacher"
  } else if (profile?.role === "parent") {
    redirectTo = "/parent"
  }

console.log("[v0] Server Login: Returning redirect to", redirectTo)
  return { success: true, redirectTo }
}

export async function signout() {
  const supabase = await createClient()
  await supabase.auth.signOut()
  revalidatePath("/", "layout")
  redirect("/auth/login")
}

export async function resetPasswordEmail(email: string) {
  const supabase = await createClient()

// Always use production domain for password reset to ensure token validity
  const redirectUrl = `${process.env.NEXT_PUBLIC_SITE_URL || "https://kiddohelper.rclpoint.com"}/auth/reset-password`

const { error } = await supabase.auth.resetPasswordForEmail(email, {
    redirectTo: redirectUrl,
  })

if (error) {
    console.log("[v0] Password Reset Error:", error.message)
    return { error: error.message }
  }

return { success: true }
}

export async function updatePassword(password: string, token: string) {
  const supabase = await createClient()

// First, verify the token and get the user
  const { error: verifyError } = await supabase.auth.verifyOtp({
    token_hash: token,
    type: "recovery",
  })

if (verifyError) {
    console.log("[v0] Token Verify Error:", verifyError.message)
    return { error: "Invalid or expired reset link. Please request a new one." }
  }

// Update the password
  const { error: updateError } = await supabase.auth.updateUser({
    password: password,
  })

if (updateError) {
    console.log("[v0] Password Update Error:", updateError.message)
    return { error: "Failed to update password. Please try again." }
  }

revalidatePath("/", "layout")
  return { success: true }
}
[V0_FILE]typescript:file="lib/supabase/middleware.ts" isMerged="true"
import { createServerClient } from "@supabase/ssr"
import { NextResponse, type NextRequest } from "next/server"

export async function updateSession(request: NextRequest) {
  // Create a timeout promise that rejects after 5 seconds
  const timeoutPromise = new Promise((_, reject) => setTimeout(() => reject(new Error("Middleware timeout")), 5000))

try {
    return await Promise.race([executeMiddleware(request), timeoutPromise])
  } catch (error) {
    // If middleware times out or errors, allow the request to proceed
    // The page-level auth will handle protection if needed
    console.error("[v0] Middleware error:", error)
    return NextResponse.next({ request })
  }
}

async function executeMiddleware(request: NextRequest) {
  let supabaseResponse = NextResponse.next({
    request,
  })

const pathname = request.nextUrl.pathname
  if (pathname.startsWith("/_next") || pathname.match(/\.(svg|png|jpg|jpeg|gif|webp|ico)$/)) {
    return supabaseResponse
  }

if (!process.env.NEXT_PUBLIC_SUPABASE_URL || !process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY) {
    return supabaseResponse
  }

const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll()
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value))
          supabaseResponse = NextResponse.next({
            request,
          })
          cookiesToSet.forEach(({ name, value, options }) => supabaseResponse.cookies.set(name, value, options))
        },
      },
    },
  )

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

if (
    pathname !== "/" &&
    !user &&
    !pathname.startsWith("/login") &&
    !pathname.startsWith("/auth") &&
    !pathname.startsWith("/register")
  ) {
    const url = request.nextUrl.clone()
    url.pathname = "/auth/login"
    return NextResponse.redirect(url)
  }

return supabaseResponse
}
[V0_FILE]typescriptreact:file="app/auth/reset-password/page.tsx" isMerged="true"
'use client'

import type React from 'react'
import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { createClient } from '@/lib/supabase/client'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import Link from 'next/link'

export default function ResetPasswordPage() {
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState(false)
  const [password, setPassword] = useState('')
  const [confirmPassword, setConfirmPassword] = useState('')
  const router = useRouter()

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setError(null)

if (!password || !confirmPassword) {
      setError('Please fill in all fields')
      return
    }

if (password.length < 6) {
      setError('Password must be at least 6 characters long')
      return
    }

if (password !== confirmPassword) {
      setError('Passwords do not match')
      return
    }

setIsLoading(true)

try {
      const supabase = await createClient()

const { error: updateError } = await supabase.auth.updateUser({
        password: password,
      })

if (updateError) {
        setError('Failed to update password. Please request a new reset link.')
      } else {
        setSuccess(true)
        setTimeout(() => {
          router.push('/auth/login')
        }, 2000)
      }
    } catch (err) {
      setError('An error occurred. Please try again.')
    } finally {
      setIsLoading(false)
    }
  }

if (success) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 p-4">
        <Card className="w-full max-w-md">
          <CardHeader>
            <CardTitle>Password Reset Successful</CardTitle>
            <CardDescription>Your password has been reset</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="rounded-md bg-green-50 p-4">
              <p className="text-sm text-green-800">
                Your password has been successfully reset. You can now log in with your new password.
              </p>
            </div>
            <p className="text-sm text-gray-600">Redirecting to login page...</p>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 p-4">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle>Reset Your Password</CardTitle>
          <CardDescription>Enter your new password below</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="password">New Password</Label>
              <Input
                id="password"
                type="password"
                placeholder="••••••••"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
                disabled={isLoading}
              />
              <p className="text-xs text-gray-500">Must be at least 6 characters</p>
            </div>

<div className="space-y-2">
              <Label htmlFor="confirmPassword">Confirm Password</Label>
              <Input
                id="confirmPassword"
                type="password"
                placeholder="••••••••"
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
                required
                disabled={isLoading}
              />
            </div>

{error && <div className="rounded-md bg-red-50 p-3 text-sm text-red-600">{error}</div>}

<Button type="submit" className="w-full" disabled={isLoading}>
              {isLoading ? 'Resetting...' : 'Reset Password'}
            </Button>

<p className="text-center text-sm text-gray-600">
              Remember your password?{' '}
              <Link href="/auth/login" className="text-indigo-600 hover:underline">
                Sign in here
              </Link>
            </p>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import {
  Camera,
  Brain,
  Calculator,
  Trophy,
  User,
  Mail,
  Sparkles,
  Star,
  BookOpen,
  Target,
  CheckCircle,
  Gamepad2,
  BarChart3,
  ShieldCheck,
  Zap,
  GraduationCap,
  PenTool,
  Microscope,
  Code,
  MessageSquare,
} from "lucide-react"
import Link from "next/link"
import Image from "next/image"

export default function HomePage() {
  const scrollToFeatures = () => {
    const featuresSection = document.getElementById("how-it-works")
    if (featuresSection) {
      featuresSection.scrollIntoView({ behavior: "smooth" })
    }
  }

return (
    <div className="min-h-screen bg-background font-body">
      {/* Header */}
      <header className="bg-white/80 backdrop-blur-md border-b border-border/40 sticky top-0 z-50 shadow-sm">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-3">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="relative w-48 h-12">
                <Image src="/logo.png" alt="Rite Click Learning Point" fill className="object-contain" priority />
              </div>
            </div>
            <div className="hidden md:flex items-center gap-6">
              <nav className="flex gap-6 text-sm font-medium text-muted-foreground">
                <button onClick={scrollToFeatures} className="hover:text-primary transition-colors">
                  How it Works
                </button>
                <Link href="#pricing" className="hover:text-primary transition-colors">
                  Pricing
                </Link>
              </nav>
              <div className="flex items-center gap-3">
                <Link href="/auth/register?role=student">
                  <Button size="sm" className="bg-primary hover:bg-primary/90 text-white shadow-lg shadow-primary/20">
                    Student
                  </Button>
                </Link>
                <Link href="/auth/register?role=teacher">
                  <Button
                    size="sm"
                    className="bg-secondary hover:bg-secondary/90 text-white shadow-lg shadow-secondary/20"
                  >
                    Teacher
                  </Button>
                </Link>
                <Link href="/auth/register?role=parent">
                  <Button size="sm" className="bg-accent hover:bg-accent/90 text-white shadow-lg shadow-accent/20">
                    Parent
                  </Button>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </header>

{/* Hero Section */}
      <section className="relative overflow-hidden pt-20 pb-32 lg:pt-32 lg:pb-40">
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-primary/10 via-background to-background -z-10"></div>
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            <div className="space-y-8 animate-in fade-in slide-in-from-bottom-8 duration-1000">
              <div className="inline-flex items-center gap-2 bg-white border border-primary/20 text-primary px-4 py-2 rounded-full text-sm font-medium shadow-sm">
                <Sparkles className="h-4 w-4" />
                <span className="tracking-wide uppercase text-xs font-bold">New Launch</span>
              </div>
              <h1 className="text-5xl lg:text-7xl font-bold text-accent leading-[1.1] tracking-tight font-heading">
                Homework Made <br />
                <span className="text-primary">Simple</span>, <span className="text-secondary">Fun</span>, & <br />
                Stress-Free!
              </h1>
              <p className="text-xl text-muted-foreground leading-relaxed max-w-lg">
                An AI-powered homework helper designed for kids, trusted by parents, and created by Rite Click Learning
                Point.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 pt-4">
                <Link href="/auth/register?role=student">
                  <Button
                    size="lg"
                    className="bg-primary hover:bg-primary/90 text-white text-lg px-8 py-6 rounded-xl shadow-xl shadow-primary/20 transition-transform hover:scale-105"
                  >
                    Student
                  </Button>
                </Link>
                <Link href="/auth/register?role=teacher">
                  <Button
                    size="lg"
                    className="bg-secondary hover:bg-secondary/90 text-white text-lg px-8 py-6 rounded-xl shadow-xl shadow-secondary/20 transition-transform hover:scale-105"
                  >
                    Teacher
                  </Button>
                </Link>
                <Link href="/auth/register?role=parent">
                  <Button
                    size="lg"
                    className="bg-accent hover:bg-accent/90 text-white text-lg px-8 py-6 rounded-xl shadow-xl shadow-accent/20 transition-transform hover:scale-105"
                  >
                    Parent
                  </Button>
                </Link>
              </div>
              <div className="flex items-center gap-4 text-sm text-muted-foreground pt-4">
                <div className="flex -space-x-2">
                  {[1, 2, 3, 4].map((i) => (
                    <div
                      key={i}
                      className="w-8 h-8 rounded-full bg-muted border-2 border-background flex items-center justify-center text-xs font-bold"
                    >
                      <User className="w-4 h-4" />
                    </div>
                  ))}
                </div>
                <p>Trusted by 1000+ parents</p>
              </div>
            </div>
            <div className="relative lg:h-[600px] flex items-center justify-center animate-in fade-in slide-in-from-right-8 duration-1000 delay-200">
              <div className="relative w-full max-w-lg aspect-square">
                <div className="absolute inset-0 bg-gradient-to-tr from-primary/20 to-secondary/20 rounded-full blur-3xl opacity-50 animate-pulse"></div>
                <div className="relative z-10 float-animation">
                  <img
                    src="/happy-student-math.png"
                    alt="RiteBot helping a student"
                    className="w-full h-auto rounded-3xl shadow-2xl border-4 border-white"
                  />
                  {/* Floating Elements */}
                  <div
                    className="absolute -top-6 -right-6 bg-white p-4 rounded-2xl shadow-xl border border-border/50 float-animation"
                    style={{ animationDelay: "1s" }}
                  >
                    <div className="flex items-center gap-3">
                      <div className="bg-green-100 p-2 rounded-lg">
                        <CheckCircle className="w-6 h-6 text-green-600" />
                      </div>
                      <div>
                        <p className="text-xs text-muted-foreground font-bold uppercase">Accuracy</p>
                        <p className="text-lg font-bold text-accent">98%</p>
                      </div>
                    </div>
                  </div>
                  <div
                    className="absolute -bottom-8 -left-4 bg-white p-4 rounded-2xl shadow-xl border border-border/50 float-animation"
                    style={{ animationDelay: "2s" }}
                  >
                    <div className="flex items-center gap-3">
                      <div className="bg-yellow-100 p-2 rounded-lg">
                        <Star className="w-6 h-6 text-yellow-600" />
                      </div>
                      <div>
                        <p className="text-xs text-muted-foreground font-bold uppercase">Streak</p>
                        <p className="text-lg font-bold text-accent">7 Days!</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* How It Works Section */}
      <section id="how-it-works" className="py-24 bg-muted/30">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-4xl font-bold text-accent mb-4 font-heading">How Your Child Gets Homework Help</h2>
            <p className="text-lg text-muted-foreground">
              Three simple steps to turn homework struggles into success stories.
            </p>
          </div>

<div className="grid md:grid-cols-3 gap-8 relative">
            {/* Connecting Line (Desktop) */}
            <div className="hidden md:block absolute top-12 left-[16%] right-[16%] h-0.5 bg-gradient-to-r from-primary/20 via-secondary/20 to-primary/20 border-t-2 border-dashed border-muted-foreground/30 -z-10"></div>

{[
              {
                icon: Camera,
                title: "Ask or Upload",
                desc: "Type, say, or snap a picture of a homework question.",
                color: "text-primary",
                bg: "bg-primary/10",
              },
              {
                icon: Brain,
                title: "Step-by-Step Guidance",
                desc: "AI explains with hints, steps, and answers.",
                color: "text-secondary",
                bg: "bg-secondary/10",
              },
              {
                icon: Trophy,
                title: "Learn & Earn Rewards",
                desc: "Kids collect points and badges for solving problems.",
                color: "text-accent",
                bg: "bg-accent/10",
              },
            ].map((step, index) => (
              <div key={index} className="relative group">
                <div className="bg-white rounded-3xl p-8 shadow-sm border border-border/50 hover:shadow-xl transition-all duration-300 h-full text-center">
                  <div
                    className={`w-20 h-20 mx-auto rounded-2xl ${step.bg} flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}
                  >
                    <step.icon className={`w-10 h-10 ${step.color}`} />
                  </div>
                  <h3 className="text-2xl font-bold text-accent mb-3">{step.title}</h3>
                  <p className="text-muted-foreground leading-relaxed">{step.desc}</p>
                </div>
                <div className="absolute -top-4 -right-4 w-8 h-8 rounded-full bg-accent text-white flex items-center justify-center font-bold shadow-lg">
                  {index + 1}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* For Kids & Parents Split Section */}
      <section className="py-24 overflow-hidden">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          {/* For Kids */}
          <div className="flex flex-col lg:flex-row items-center gap-16 mb-32">
            <div className="lg:w-1/2 order-2 lg:order-1">
              <div className="relative">
                <div className="absolute inset-0 bg-primary/5 rounded-full blur-3xl transform -rotate-6"></div>
                <img
                  src="/colorful-math-notebook.png"
                  alt="Fun learning interface"
                  className="relative rounded-3xl shadow-2xl border-4 border-white transform rotate-2 hover:rotate-0 transition-transform duration-500"
                />
              </div>
            </div>
            <div className="lg:w-1/2 order-1 lg:order-2 space-y-6">
              <div className="inline-flex items-center gap-2 bg-primary/10 text-primary px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider">
                <Gamepad2 className="w-4 h-4" /> For Kids
              </div>
              <h2 className="text-4xl lg:text-5xl font-bold text-accent font-heading">Your Smart Homework Helper</h2>
              <p className="text-lg text-muted-foreground">
                Get instant help with homework questions from your personal AI tutor, available 24/7 for all your
                subjects.
              </p>

<ul className="space-y-4">
                {[
                  { text: "Ask questions across Math, Science, Reading & Writing", icon: BookOpen },
                  { text: "Upload photos of homework problems for instant help", icon: Camera },
                  { text: "Get step-by-step explanations that make sense", icon: MessageSquare },
                  { text: "Learn at your own pace with patient AI guidance", icon: Sparkles },
                ].map((item, i) => (
                  <li key={i} className="flex items-center gap-4 p-3 rounded-xl hover:bg-muted/50 transition-colors">
                    <div className="bg-primary/10 p-2 rounded-lg text-primary">
                      <item.icon className="w-5 h-5" />
                    </div>
                    <span className="font-medium text-foreground">{item.text}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>

{/* For Parents */}
          <div className="flex flex-col lg:flex-row items-center gap-16">
            <div className="lg:w-1/2 space-y-6">
              <div className="inline-flex items-center gap-2 bg-secondary/10 text-secondary px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider">
                <BarChart3 className="w-4 h-4" /> For Parents
              </div>
              <h2 className="text-4xl lg:text-5xl font-bold text-accent font-heading">
                See How Your Child Is Improving
              </h2>
              <p className="text-lg text-muted-foreground">
                Stay in the loop with detailed insights into your child's learning journey.
              </p>

<ul className="space-y-4">
                {[
                  { text: "Weekly progress reports", icon: Mail },
                  { text: "Track accuracy and time spent", icon: Target },
                  { text: "Curriculum-aligned explanations", icon: BookOpen },
                  { text: "Safe, kid-friendly environment", icon: ShieldCheck },
                ].map((item, i) => (
                  <li key={i} className="flex items-center gap-4 p-3 rounded-xl hover:bg-muted/50 transition-colors">
                    <div className="bg-secondary/10 p-2 rounded-lg text-secondary">
                      <item.icon className="w-5 h-5" />
                    </div>
                    <span className="font-medium text-foreground">{item.text}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="lg:w-1/2">
              <div className="relative">
                <div className="absolute inset-0 bg-secondary/5 rounded-full blur-3xl transform rotate-6"></div>
                <div className="bg-white p-6 rounded-3xl shadow-2xl border border-border/50 relative">
                  {/* Mock Dashboard UI */}
                  <div className="space-y-6">
                    <div className="flex items-center justify-between border-b pb-4">
                      <div>
                        <h4 className="font-bold text-lg">Weekly Report</h4>
                        <p className="text-sm text-muted-foreground">Oct 12 - Oct 19</p>
                      </div>
                      <div className="bg-green-100 text-green-700 px-3 py-1 rounded-full text-sm font-bold">
                        Excellent
                      </div>
                    </div>
                    <div className="space-y-4">
                      <div>
                        <div className="flex justify-between text-sm mb-1">
                          <span className="font-medium">Math</span>
                          <span className="font-bold text-primary">92%</span>
                        </div>
                        <div className="h-2 bg-muted rounded-full overflow-hidden">
                          <div className="h-full bg-primary w-[92%] rounded-full"></div>
                        </div>
                      </div>
                      <div>
                        <div className="flex justify-between text-sm mb-1">
                          <span className="font-medium">Science</span>
                          <span className="font-bold text-secondary">85%</span>
                        </div>
                        <div className="h-2 bg-muted rounded-full overflow-hidden">
                          <div className="h-full bg-secondary w-[85%] rounded-full"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Subjects Covered */}
      <section className="py-24 bg-accent text-white relative overflow-hidden">
        <div className="absolute inset-0 bg-[url('/grid-pattern.svg')] opacity-10"></div>
        <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold mb-4 font-heading">One Platform, All Subjects</h2>
            <p className="text-white/80 text-lg max-w-2xl mx-auto">
              Comprehensive support for your child's entire curriculum.
            </p>
          </div>

<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {[
              { name: "Math", icon: Calculator, desc: "Fractions, Algebra" },
              { name: "English", icon: PenTool, desc: "Grammar, Essays" },
              { name: "Science", icon: Microscope, desc: "Visual Explanations" },
              { name: "Coding", icon: Code, desc: "Logic & Basics" },
            ].map((subject, i) => (
              <div
                key={i}
                className="bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl p-6 text-center hover:bg-white/20 transition-colors cursor-default group"
              >
                <div className="bg-white/20 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
                  <subject.icon className="w-8 h-8 text-white" />
                </div>
                <h3 className="text-xl font-bold mb-1">{subject.name}</h3>
                <p className="text-sm text-white/70">{subject.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* Why Choose Us */}
      <section className="py-24">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-accent mb-4 font-heading">Why Parents Love Our Homework Helper</h2>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {[
              {
                title: "Created by Educators",
                desc: "Developed by real teachers at Rite Click Learning Point.",
                icon: GraduationCap,
              },
              {
                title: "Kid-Safe Environment",
                desc: "100% ad-free and distraction-free learning space.",
                icon: ShieldCheck,
              },
              { title: "Affordable", desc: "A fraction of the cost of private tutoring.", icon: Zap },
              { title: "Works Everywhere", desc: "Accessible on computer, tablet, or smartphone.", icon: CheckCircle },
            ].map((item, i) => (
              <div
                key={i}
                className="bg-card p-6 rounded-2xl border border-border/50 shadow-sm hover:shadow-md transition-shadow"
              >
                <div className="bg-primary/5 w-12 h-12 rounded-xl flex items-center justify-center mb-4 text-primary">
                  <item.icon className="w-6 h-6" />
                </div>
                <h3 className="font-bold text-lg mb-2">{item.title}</h3>
                <p className="text-muted-foreground text-sm">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* Pricing Section */}
      <section id="pricing" className="py-24 bg-muted/30">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-accent mb-4 font-heading">Simple Plans for Every Family</h2>
            <p className="text-lg text-muted-foreground">Choose the plan that fits your needs.</p>
          </div>
          <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
            {/* Starter Plan */}
            <Card className="border-2 border-transparent hover:border-primary/20 transition-colors">
              <CardHeader>
                <CardTitle className="text-xl font-bold text-muted-foreground">Starter</CardTitle>
                <div className="mt-4">
                  <span className="text-4xl font-bold text-accent">Free</span>
                  <span className="text-muted-foreground"> / 7 days</span>
                </div>
                <CardDescription>Perfect for trying out</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-3 mb-8">
                  <li className="flex items-center gap-2 text-sm">
                    <CheckCircle className="w-4 h-4 text-primary" /> All core features
                  </li>
                  <li className="flex items-center gap-2 text-sm">
                    <CheckCircle className="w-4 h-4 text-primary" /> Up to 10 questions/day
                  </li>
                  <li className="flex items-center gap-2 text-sm">
                    <CheckCircle className="w-4 h-4 text-primary" /> Basic progress tracking
                  </li>
                </ul>
                <Button className="w-full bg-transparent" variant="outline">
                  Start Free Trial
                </Button>
              </CardContent>
            </Card>

{/* Monthly Plan */}
            <Card className="border-2 border-primary relative shadow-xl scale-105 z-10">
              <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-primary text-white px-4 py-1 rounded-full text-xs font-bold uppercase tracking-wide">
                Most Popular
              </div>
              <CardHeader>
                <CardTitle className="text-xl font-bold text-primary">Monthly Plan</CardTitle>
                <div className="mt-4">
                  <span className="text-4xl font-bold text-accent">$19</span>
                  <span className="text-muted-foreground"> / month</span>
                </div>
                <CardDescription>For regular homework help</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-3 mb-8">
                  <li className="flex items-center gap-2 text-sm">
                    <CheckCircle className="w-4 h-4 text-primary" /> Unlimited questions
                  </li>
                  <li className="flex items-center gap-2 text-sm">
                    <CheckCircle className="w-4 h-4 text-primary" /> Advanced progress reports
                  </li>
                  <li className="flex items-center gap-2 text-sm">
                    <CheckCircle className="w-4 h-4 text-primary" /> Priority support
                  </li>
                  <li className="flex items-center gap-2 text-sm">
                    <CheckCircle className="w-4 h-4 text-primary" /> All subjects included
                  </li>
                </ul>
                <Button className="w-full bg-primary hover:bg-primary/90">Get Started</Button>
              </CardContent>
            </Card>

{/* Bundle Plan */}
            <Card className="border-2 border-transparent hover:border-secondary/20 transition-colors">
              <CardHeader>
                <CardTitle className="text-xl font-bold text-secondary">Bundle Plan</CardTitle>
                <div className="mt-4">
                  <span className="text-4xl font-bold text-accent">Free</span>
                  <span className="text-muted-foreground"> / with enrollment</span>
                </div>
                <CardDescription>Best value for families</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-3 mb-8">
                  <li className="flex items-center gap-2 text-sm">
                    <CheckCircle className="w-4 h-4 text-secondary" /> Everything in Monthly
                  </li>
                  <li className="flex items-center gap-2 text-sm">
                    <CheckCircle className="w-4 h-4 text-secondary" /> 1-on-1 tutoring sessions
                  </li>
                  <li className="flex items-center gap-2 text-sm">
                    <CheckCircle className="w-4 h-4 text-secondary" /> Custom learning plans
                  </li>
                </ul>
                <Button className="w-full bg-secondary hover:bg-secondary/90">Learn More</Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Testimonials */}
      <section className="py-24">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-accent mb-4 font-heading">Real Families, Real Results</h2>
            <div className="flex items-center justify-center gap-1 text-yellow-400 mb-2">
              {[1, 2, 3, 4, 5].map((i) => (
                <Star key={i} className="w-5 h-5 fill-current" />
              ))}
            </div>
            <p className="text-lg text-muted-foreground">
              Hear from parents who have already transformed their child's homework experience.
            </p>
          </div>
          <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            <div className="bg-card p-8 rounded-3xl border border-border/50 shadow-sm">
              <div className="flex gap-1 text-yellow-400 mb-4">
                {[1, 2, 3, 4, 5].map((i) => (
                  <Star key={i} className="w-5 h-5 fill-current" />
                ))}
              </div>
              <p className="text-lg text-muted-foreground mb-6 italic">
                "My son actually enjoys doing math now! The gamification really works. It's been a game changer for our
                evening routine."
              </p>
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center text-primary font-bold">
                  SM
                </div>
                <div>
                  <p className="font-bold text-foreground">Sarah M.</p>
                  <p className="text-sm text-muted-foreground">Parent of 4th grader</p>
                </div>
              </div>
            </div>
            <div className="bg-card p-8 rounded-3xl border border-border/50 shadow-sm">
              <div className="flex gap-1 text-yellow-400 mb-4">
                {[1, 2, 3, 4, 5].map((i) => (
                  <Star key={i} className="w-5 h-5 fill-current" />
                ))}
              </div>
              <p className="text-lg text-muted-foreground mb-6 italic">
                "I love getting weekly progress reports. I can see exactly where she's improving and where she needs a
                little extra help."
              </p>
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 bg-secondary/20 rounded-full flex items-center justify-center text-secondary font-bold">
                  ML
                </div>
                <div>
                  <p className="font-bold text-foreground">Maria L.</p>
                  <p className="text-sm text-muted-foreground">Parent of 2nd grader</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* FAQ Section */}
      <section className="py-24 bg-muted/30">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-accent mb-4 font-heading">Frequently Asked Questions</h2>
            <p className="text-lg text-muted-foreground">Common questions about our Homework Helper</p>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-5xl mx-auto">
            {/* FAQ Item 1 */}
            <div className="bg-card p-8 rounded-3xl border border-border/50 shadow-sm hover:shadow-md transition-shadow">
              <h3 className="font-bold text-lg mb-2">Is it safe for my child to use?</h3>
              <p className="text-muted-foreground text-sm">
                Yes, our platform is designed with your child's safety in mind. It is completely ad-free and offers a
                distraction-free environment.
              </p>
            </div>
            {/* FAQ Item 2 */}
            <div className="bg-card p-8 rounded-3xl border border-border/50 shadow-sm hover:shadow-md transition-shadow">
              <h3 className="font-bold text-lg mb-2">How does the AI work?</h3>
              <p className="text-muted-foreground text-sm">
                Our AI uses advanced algorithms to understand and explain homework questions step-by-step.
              </p>
            </div>
            {/* FAQ Item 3 */}
            <div className="bg-card p-8 rounded-3xl border border-border/50 shadow-sm hover:shadow-md transition-shadow">
              <h3 className="font-bold text-lg mb-2">Can I see my child's progress?</h3>
              <p className="text-muted-foreground text-sm">
                Yes, you will receive detailed weekly progress reports and insights into your child's learning journey.
              </p>
            </div>
            {/* FAQ Item 4 */}
            <div className="bg-card p-8 rounded-3xl border border-border/50 shadow-sm hover:shadow-md transition-shadow">
              <h3 className="font-bold text-lg mb-2">Is it available on all devices?</h3>
              <p className="text-muted-foreground text-sm">
                Yes, our Homework Helper is accessible on computers, tablets, and smartphones.
              </p>
            </div>
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="py-24 bg-primary relative overflow-hidden">
        <div className="absolute inset-0 bg-[url('/pattern.png')] opacity-10"></div>
        <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
          <h2 className="text-4xl lg:text-6xl font-bold text-white mb-8 font-heading">
            Join Thousands of Families Making Homework Fun
          </h2>
          <p className="text-xl text-white/80 mb-10 max-w-3xl mx-auto">
            Sign up now for a free trial and see the difference for yourself.
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <Button size="lg" className="bg-white text-accent hover:bg-white/90 text-lg px-8 py-6 rounded-xl">
              Start Free Trial Today
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="border-white text-white hover:bg-white/10 text-lg px-8 py-6 rounded-xl bg-transparent"
            >
              Book a Demo
            </Button>
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="bg-accent text-white py-16 border-t border-white/10">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
            <div>
              <div className="flex items-center gap-2 mb-6">
                <Image
                  src="/logo.png"
                  alt="Rite Click Learning Point"
                  width={192}
                  height={64}
                  className="object-contain"
                />
                <span className="font-bold text-lg">Rite Click Learning Point</span>
              </div>
              <p className="text-white/80 max-w-xs">
                Achieving Excellence Together. The smartest way to help your child succeed in school.
              </p>
            </div>
            <div>
              <h4 className="font-bold mb-4 text-white">Product</h4>
              <ul className="space-y-2 text-sm text-white/80">
                <li>
                  <button onClick={scrollToFeatures} className="hover:text-primary transition-colors">
                    Features
                  </button>
                </li>
                <li>
                  <Link href="#pricing" className="hover:text-primary transition-colors">
                    Pricing
                  </Link>
                </li>
                <li>
                  <Link href="/for-schools" className="hover:text-primary transition-colors">
                    For Schools
                  </Link>
                </li>
              </ul>
            </div>
            <div>
              <h4 className="font-bold mb-4 text-white">Support</h4>
              <ul className="space-y-2 text-sm text-white/80">
                <li>
                  <Link href="/contact" className="hover:text-primary transition-colors">
                    Help Center
                  </Link>
                </li>
                <li>
                  <Link href="/contact" className="hover:text-primary transition-colors">
                    Contact Us
                  </Link>
                </li>
                <li>
                  <Link href="/privacy" className="hover:text-primary transition-colors">
                    Privacy Policy
                  </Link>
                </li>
              </ul>
            </div>
            <div>
              <h4 className="font-bold mb-4 text-white">Connect</h4>
              <ul className="space-y-2 text-sm text-white/80">
                <li>
                  <Link href="/blog" className="hover:text-primary transition-colors">
                    Blog
                  </Link>
                </li>
                <li className="flex gap-4 mt-4">
                  <a
                    href="https://facebook.com"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="hover:text-primary transition-colors"
                  >
                    <svg className="h-5 w-5 fill-current" viewBox="0 0 24 24">
                      <path d="M23 12.07C23 6.4 18.76 1.72 13.46 1.72c-5.29 0-9.53 4.68-9.53 10.35 0 5.13 3.94 9.42 9.1 9.42 2.5 0 4.9-.98 6.64-2.73l1.37 1.37c.42.42 1.1.42 1.52 0 .42-.42.42-1.1 0-1.52l-1.36-1.36A9.37 9.37 0 0 0 23 12.07zm-9.53 8.66c-4.67 0-8.44-3.9-8.44-8.66 0-4.77 3.77-8.66 8.44-8.66 4.66 0 8.44 3.89 8.44 8.66 0 4.76-3.78 8.66-8.44 8.66z" />
                    </svg>
                  </a>
                  <a
                    href="https://instagram.com"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="hover:text-primary transition-colors"
                  >
                    <svg className="h-5 w-5 fill-current" viewBox="0 0 24 24">
                      <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.057-1.645.069-4.849.069-3.204 0-3.584-.012-4.849-.069-3.259-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.948c.208 4.449 2.474 6.736 6.98 6.935 1.278.058 1.703.07 4.948.07 3.245 0 3.668-.012 4.948-.07 4.507-.199 6.798-2.474 6.987-6.935C15.669.012 15.245 0 12 0z" />
                    </svg>
                  </a>
                  <a
                    href="https://twitter.com"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="hover:text-primary transition-colors"
                  >
                    <svg className="h-5 w-5 fill-current" viewBox="0 0 24 24">
                      <path d="M23.953 4.57a10 10 0 002.856-3.515 10 10 0 01-2.836.856 4.958 4.958 0 002.165-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
                    </svg>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div className="border-t border-white/10 pt-8 text-center text-sm text-white/80">
            <p>© {new Date().getFullYear()} Rite Click Learning Point. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}</article></body></html>

Creating your quiz...

Oops!

{quizState.questions[quizState.currentQuestion]?.question}

Explanation:

{description}

Choose an image

Problem I Found:

Solution:

Step-by-Step Explanation:

Tips for better results:

Create a Custom Worksheet

{worksheet.title}

Problems

Passage

Questions

Writing Prompts

Essay Writing Checklist

Activity

My Activity

${line.replace("##", "").trim()}

${line.replace("#", "").trim()}

${line.trim()}

${subjectCapitalized}: ${topic}