[V0_FILE]typescriptreact:file="app/page.tsx" import { Header } from "@/components/navigation/header" import { HeroSection } from "@/components/sections/hero-section" import { FeaturesGrid } from "@/components/sections/features-grid" import { WhySection } from "@/components/sections/why-section" import { TeamSection } from "@/components/sections/team-section" import { ContactSection } from "@/components/sections/contact-section" import { Footer } from "@/components/navigation/footer" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/sections/hero-section.tsx" "use client" import { useState, useEffect } from "react" import { ArrowRight, BookOpen, Users, Star, Calendar } from "lucide-react" import { NeumoButton } from "@/components/ui/neumo-button" import { AnimatedSection } from "@/components/ui/animated-section" import { useTheme } from "@/contexts/theme-context" import { useRouter } from "next/navigation" import Image from "next/image" const sliderImages = [ "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471&q=80", "https://images.unsplash.com/photo-1524178232363-1fb2b075b655?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80", "https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80", "https://images.unsplash.com/photo-1427504494785-3a9ca7044f45?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80", ] export const HeroSection = () => { const { theme } = useTheme() const router = useRouter() const [displayText, setDisplayText] = useState("") const fullText = "Connect with expert tutors in minutes" const [currentImageIndex, setCurrentImageIndex] = useState(0) useEffect(() => { let index = 0 const timer = setInterval(() => { if (index < fullText.length) { setDisplayText(fullText.substring(0, index + 1)) index++ } else { clearInterval(timer) } }, 50) return () => clearInterval(timer) }, []) useEffect(() => { const timer = setInterval(() => { setCurrentImageIndex((prevIndex) => (prevIndex === sliderImages.length - 1 ? 0 : prevIndex + 1)) }, 3000) // Change image every 3 seconds return () => clearInterval(timer) }, []) const handleNavigate = (path: string) => { router.push(path) } return (

{/* Background Elements */}

{/* Left Column - Text Content */}

{displayText}

StudentConnect matches you with the perfect tutor based on your needs, schedule, and learning style. Get personalized help and excel in your studies.

handleNavigate("/tutors")} > Find a Tutor handleNavigate("/tasks")} > Browse Tasks

5,000+ Tutors

12,000+ Students

4.8/5 Rating

Flexible Schedule

{/* Right Column - Visual */}

{sliderImages.map((image, index) => (

))} {/* Optional: Add navigation dots */}

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

Student Dashboard

Personalized learning

Tutor Dashboard

Teaching tools

AI Assistance

24/7 support

Task Marketplace

Earn while learning

) } [V0_FILE]typescriptreact:file="components/sections/features-grid.tsx" "use client" import type React from "react" import { BookOpen, Clock, MapPin, Users, MessageSquare, DollarSign } from "lucide-react" import { AnimatedSection } from "@/components/ui/animated-section" import { useTheme } from "@/contexts/theme-context" interface Feature { icon: React.ElementType title: string description: string } const features: Feature[] = [ { icon: BookOpen, title: "Expert Tutors", description: "Connect with qualified tutors specializing in various subjects and educational levels.", }, { icon: Clock, title: "Flexible Scheduling", description: "Book sessions that fit your timetable with 24/7 availability from tutors worldwide.", }, { icon: MapPin, title: "Location-Based", description: "Find tutors and events near you with our smart location-based matching system.", }, { icon: Users, title: "Community Learning", description: "Join subject-specific communities to collaborate with peers and exchange knowledge.", }, { icon: MessageSquare, title: "AI Assistance", description: "Get instant help with our AI-powered assistant for quick answers and guidance.", }, { icon: DollarSign, title: "Task Marketplace", description: "Earn while you learn by completing educational tasks and projects for rewards.", }, ] export const FeaturesGrid = () => { const { theme } = useTheme() return (

{/* Background Elements */}

Everything you need to excel in education

Our platform combines expert tutoring, community learning, and AI-powered assistance to create a comprehensive educational experience.

{features.map((feature, index) => (

{feature.title}

{feature.description}

))}

) } [V0_FILE]typescriptreact:file="components/sections/why-section.tsx" "use client" import { ArrowRight, CheckCircle, Clock, Globe, BookOpen } from "lucide-react" import { AnimatedSection } from "@/components/ui/animated-section" import { useTheme } from "@/contexts/theme-context" import { NeumoButton } from "@/components/ui/neumo-button" export const WhySection = () => { const { theme } = useTheme() const reasons = [ { icon: CheckCircle, title: "Expert Tutors", description: "Connect with verified tutors who specialize in your exact needs and learning style.", }, { icon: Clock, title: "Save Time", description: "Our AI matching system finds the perfect tutor for you in minutes, not days.", }, { icon: Globe, title: "Learn Anywhere", description: "Connect with tutors virtually or in-person based on your location and preference.", }, { icon: BookOpen, title: "Quality Resources", description: "Access a vast library of study materials curated by experts and enhanced by AI.", }, ] return (

{/* Left Side - Visual */}

Why StudentConnect?

Traditional tutoring platforms often fail to create the perfect match between students and tutors. We've built a solution that addresses all the pain points in educational support.

{reasons.map((reason, index) => (

{reason.title}

{reason.description}

))}

Learn More

{/* Right Side - Content */}

The Platform You Need

Solving real problems in education

StudentConnect was built to address the challenges faced by both students and tutors in the educational landscape.

For Students

Finding the right tutor who understands your learning style and needs can be challenging. StudentConnect uses AI to match you with tutors who can truly help you excel.

For Tutors

Tutors often struggle to find students who match their expertise and teaching style. Our platform helps tutors connect with students who truly need their specific skills.

) } [V0_FILE]typescriptreact:file="components/sections/team-section.tsx" "use client" import { GithubIcon, LinkedinIcon, TwitterIcon } from "lucide-react" import { AnimatedSection } from "@/components/ui/animated-section" import { useTheme } from "@/contexts/theme-context" import Image from "next/image" interface TeamMember { name: string role: string avatar: string bio: string social: { linkedin?: string github?: string twitter?: string } } export const TeamSection = () => { const { theme } = useTheme() const teamMembers: TeamMember[] = [ { name: "Alex Chen", role: "Founder & Lead Developer", avatar: "https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80", bio: "Alex has 10+ years of experience in edtech and is passionate about making education accessible to everyone.", social: { linkedin: "#", github: "#", twitter: "#", }, }, { name: "Mia Johnson", role: "UX/UI Designer", avatar: "https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1361&q=80", bio: "Mia creates intuitive user experiences that make learning engaging and effortless.", social: { linkedin: "#", github: "#", twitter: "#", }, }, { name: "David Park", role: "AI Engineer", avatar: "https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80", bio: "David specializes in AI algorithms that power our tutor matching and recommendation systems.", social: { linkedin: "#", github: "#", }, }, { name: "Sophia Lee", role: "Content Strategist", avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80", bio: "Sophia ensures that educational content on the platform is accurate, engaging, and valuable.", social: { linkedin: "#", twitter: "#", }, }, ] return (

Our Team

Meet the brilliant minds behind StudentConnect

We're a team of educators, developers, and designers passionate about transforming how students learn and tutors teach.

{teamMembers.map((member, index) => (

{member.social.linkedin && ( )} {member.social.github && ( )} {member.social.twitter && ( )}

{member.name}

{member.role}

{member.bio}

))}

) } [V0_FILE]typescriptreact:file="components/sections/contact-section.tsx" "use client" import type React from "react" import { useState } from "react" import { Send, Check } from "lucide-react" import { AnimatedSection } from "@/components/ui/animated-section" import { useTheme } from "@/contexts/theme-context" import { NeumoButton } from "@/components/ui/neumo-button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useRouter } from "next/navigation" import { toast } from "sonner" import { useAuth } from "@/contexts/auth-context" import type { Message } from "@/types/message" export const ContactSection = () => { const { theme } = useTheme() const [formState, setFormState] = useState({ name: "", email: "", message: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const [isSubmitted, setIsSubmitted] = useState(false) const router = useRouter() const { isAuthenticated, user } = useAuth() const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormState((prev) => ({ ...prev, [name]: value })) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (!isAuthenticated) { toast.error("Please login to send a message") router.push("/login") return } setIsSubmitting(true) // Create new message const newMessage: Message = { id: crypto.randomUUID(), name: formState.name, email: formState.email, message: formState.message, timestamp: new Date(), replied: false, } // Get existing messages from localStorage const existingMessages = JSON.parse(localStorage.getItem("adminMessages") || "[]") // Add new message localStorage.setItem("adminMessages", JSON.stringify([newMessage, ...existingMessages])) // Simulate sending delay setTimeout(() => { setIsSubmitting(false) setIsSubmitted(true) toast.success("Message sent successfully!") // Reset form after 3 seconds setTimeout(() => { setIsSubmitted(false) setFormState({ name: "", email: "", message: "" }) }, 3000) }, 1500) } return (

{/* Left Side - Content */}

Get in Touch

Have questions? Contact us

We'd love to hear from you! Whether you have questions about the platform, need support, or want to provide feedback, our team is here to help.

Technical Support

Need help with account issues or technical problems? Our support team is available 24/7.

Business Inquiries

Interested in partnering with us? Let's discuss how we can work together to improve education.

{/* Right Side - Form */}

Send us a message

Your Name

Email Address

Message

</div>

<NeumoButton
                  type="submit"
                  variant="primary"
                  size="lg"
                  className="w-full transition-transform duration-300 hover:scale-105"
                  disabled={isSubmitting || isSubmitted}
                >
                  {isSubmitting ? (
                    <>
                      Sending... <Send size={16} className="ml-2 animate-pulse" />
                    </>
                  ) : isSubmitted ? (
                    <>
                      Message Sent! <Check size={16} className="ml-2" />
                    </>
                  ) : (
                    <>
                      Send Message <Send size={16} className="ml-2" />
                    </>
                  )}
                </NeumoButton>
              </form>
            </div>
          </AnimatedSection>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/navigation/profile-dropdown.tsx"
"use client"

import { useState, useRef, useEffect } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { Settings, LogOut, Bell, BookOpen, MessageSquare } from "lucide-react"
import { useAuth } from "@/contexts/auth-context"
import { useTheme } from "@/contexts/theme-context"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

export const ProfileDropdown = () => {
  const [isOpen, setIsOpen] = useState(false)
  const dropdownRef = useRef<HTMLDivElement>(null)
  const { user, logout } = useAuth()
  const { theme } = useTheme()
  const router = useRouter()

useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setIsOpen(false)
      }
    }

document.addEventListener("mousedown", handleClickOutside)
    return () => {
      document.removeEventListener("mousedown", handleClickOutside)
    }
  }, [])

const handleLogout = () => {
    logout()
    setIsOpen(false)
    router.push("/")
  }

return (
    <div className="relative" ref={dropdownRef}>
      <button
        onClick={() => setIsOpen(!isOpen)}
        className={`flex items-center space-x-2 p-1.5 rounded-full transition-all duration-300 hover:scale-105 ${
          theme === "dark" ? "hover:bg-card/30" : "hover:bg-card/30"
        }`}
      >
        <Avatar className="h-8 w-8 border-2 border-sc-yellow/30">
          <AvatarImage src={user?.avatar || ""} alt={user?.name || "User"} />
          <AvatarFallback className="bg-sc-yellow/20 text-sc-brown">{user?.name?.charAt(0) || "U"}</AvatarFallback>
        </Avatar>
      </button>

{isOpen && (
        <div
          className={`absolute right-0 mt-2 w-64 rounded-xl overflow-hidden z-50 transition-all duration-300 ${
            theme === "dark" ? "bg-card shadow-neumo-dark" : "bg-card shadow-neumo"
          }`}
        >
          <div className="p-4 border-b border-border">
            <div className="flex items-center space-x-3">
              <Avatar className="h-10 w-10 border-2 border-sc-yellow/30">
                <AvatarImage src={user?.avatar || ""} alt={user?.name || "User"} />
                <AvatarFallback className="bg-sc-yellow/20 text-sc-brown">
                  {user?.name?.charAt(0) || "U"}
                </AvatarFallback>
              </Avatar>
              <div>
                <p className="font-medium">{user?.name || "User"}</p>
                <p className="text-xs text-muted-foreground">{user?.email || "user@example.com"}</p>
              </div>
            </div>
          </div>

<div className="p-2">
            <Link
              href="/dashboard"
              className="flex items-center space-x-3 p-2 rounded-lg hover:bg-muted transition-colors duration-200"
              onClick={() => setIsOpen(false)}
            >
              <BookOpen size={18} className="text-sc-brown" />
              <span>Dashboard</span>
            </Link>

<Link
              href="/messages"
              className="flex items-center space-x-3 p-2 rounded-lg hover:bg-muted transition-colors duration-200"
              onClick={() => setIsOpen(false)}
            >
              <MessageSquare size={18} className="text-sc-brown" />
              <span>Messages</span>
            </Link>

<Link
              href="/notifications"
              className="flex items-center space-x-3 p-2 rounded-lg hover:bg-muted transition-colors duration-200"
              onClick={() => setIsOpen(false)}
            >
              <Bell size={18} className="text-sc-brown" />
              <span>Notifications</span>
            </Link>

<Link
              href="/settings"
              className="flex items-center space-x-3 p-2 rounded-lg hover:bg-muted transition-colors duration-200"
              onClick={() => setIsOpen(false)}
            >
              <Settings size={18} className="text-sc-brown" />
              <span>Settings</span>
            </Link>

<button
              onClick={handleLogout}
              className="w-full flex items-center space-x-3 p-2 rounded-lg hover:bg-muted transition-colors duration-200 text-left"
            >
              <LogOut size={18} className="text-sc-brown" />
              <span>Logout</span>
            </button>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/animated-section.tsx" isQuickEdit="true"
"use client"

import type React from "react"
import { useEffect, useRef, useState } from "react"
import { cn } from "@/lib/utils"

interface AnimatedSectionProps {
  children: React.ReactNode
  className?: string
  animation?: "fade-in" | "fade-in-up" | "fade-in-down" | "fade-in-left" | "fade-in-right" | "zoom-in" | "none"
  delay?: number
}

export const AnimatedSection: React.FC<AnimatedSectionProps> = ({
  children,
  className,
  animation = "none",
  delay = 0,
}) => {
  const [isVisible, setIsVisible] = useState(false)
  const sectionRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true)
          observer.unobserve(entry.target)
        }
      },
      {
        root: null,
        rootMargin: "0px",
        threshold: 0.1,
      },
    )

if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current)
      }
    }
  }, [])

const getAnimationClass = () => {
    if (!isVisible) {
      return "opacity-0"
    }

switch (animation) {
      case "fade-in":
        return "animate-fade-in"
      case "fade-in-up":
        return "animate-fade-in-up"
      case "fade-in-down":
        return "animate-fade-in-down"
      case "fade-in-left":
        return "animate-fade-in-left"
      case "fade-in-right":
        return "animate-fade-in-right"
      case "zoom-in":
        return "animate-zoom-in"
      default:
        return "opacity-100"
    }
  }

return (
    <div
      ref={sectionRef}
      className={cn(getAnimationClass(), "transition-all duration-700", className)}
      style={{ transitionDelay: `${delay}ms` }}
      data-testid="animated-section"
    >
      {children}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/theme-toggle.tsx"
"use client"
import { Moon, Sun } from "lucide-react"
import { useTheme } from "@/contexts/theme-context"

export const ThemeToggle = () => {
  const { theme, toggleTheme } = useTheme()

return (
    <button
      onClick={toggleTheme}
      className="p-2 rounded-full transition-colors hover:bg-muted"
      aria-label="Toggle theme"
    >
      {theme === "dark" ? (
        <Moon size={20} className="text-foreground" />
      ) : (
        <Sun size={20} className="text-foreground" />
      )}
    </button>
  )
}
[V0_FILE]typescriptreact:file="contexts/theme-context.tsx"
"use client"

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

type Theme = "light" | "dark"

interface ThemeContextType {
  theme: Theme
  toggleTheme: () => void
}

const ThemeContext = createContext<ThemeContextType>({
  theme: "light",
  toggleTheme: () => {},
})

export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
  const [theme, setTheme] = useState<Theme>("light")

useEffect(() => {
    // Check for saved theme preference or use system preference
    const savedTheme = localStorage.getItem("theme") as Theme | null
    const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches

if (savedTheme) {
      setTheme(savedTheme)
      document.documentElement.classList.toggle("dark", savedTheme === "dark")
    } else if (systemPrefersDark) {
      setTheme("dark")
      document.documentElement.classList.add("dark")
    }
  }, [])

const toggleTheme = () => {
    const newTheme = theme === "light" ? "dark" : "light"
    setTheme(newTheme)
    localStorage.setItem("theme", newTheme)
    document.documentElement.classList.toggle("dark", newTheme === "dark")
  }

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

export const useTheme = () => useContext(ThemeContext)
[V0_FILE]typescriptreact:file="types/message.ts"
export interface Message {
  id: string
  name: string
  email: string
  message: string
  timestamp: Date
  replied: boolean
}
[V0_FILE]css:file="app/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 0.5rem;
    --sc-yellow: #f5b014;
    --sc-orange: #f57c14;
    --sc-brown: #8b4513;
  }

.dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@layer components {
  .text-gradient {
    @apply bg-gradient-to-r from-sc-yellow via-sc-orange to-sc-brown bg-clip-text text-transparent;
  }

.shadow-neumo {
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.05), -8px -8px 16px rgba(255, 255, 255, 0.8);
  }

.shadow-neumo-sm {
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.05), -4px -4px 8px rgba(255, 255, 255, 0.8);
  }

.shadow-neumo-dark {
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.3), -8px -8px 16px rgba(255, 255, 255, 0.05);
  }

.shadow-neumo-sm-dark {
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3), -4px -4px 8px rgba(255, 255, 255, 0.05);
  }

.typing-cursor::after {
    content: "|";
    animation: blink 1s step-end infinite;
  }

@keyframes blink {
    from,
    to {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
  }

@keyframes pulse-light {
    0%,
    100% {
      opacity: 0.5;
    }
    50% {
      opacity: 0.8;
    }
  }

.animate-pulse-light {
    animation: pulse-light 4s ease-in-out infinite;
  }

.animate-fade-in {
    animation: fade-in 0.6s ease-out forwards;
  }

.animate-fade-in-up {
    animation: fade-in-up 0.6s ease-out forwards;
  }

.animate-fade-in-down {
    animation: fade-in-down 0.6s ease-out forwards;
  }

.animate-fade-in-left {
    animation: fade-in-left 0.6s ease-out forwards;
  }

.animate-fade-in-right {
    animation: fade-in-right 0.6s ease-out forwards;
  }

.animate-zoom-in {
    animation: zoom-in 0.6s ease-out forwards;
  }

@keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

@keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

@keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

@keyframes fade-in-left {
    from {
      opacity: 0;
      transform: translateX(20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

@keyframes fade-in-right {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

@keyframes zoom-in {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
}
[V0_FILE]typescriptreact:file="tailwind.config.ts"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        "sc-yellow": "#f5b014",
        "sc-orange": "#f57c14",
        "sc-brown": "#8b4513",
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config
[V0_FILE]typescriptreact:file="components/ui/form.tsx"
"use client"

import * as React from "react"
import type * as LabelPrimitive from "@radix-ui/react-label"
import { Slot } from "@radix-ui/react-slot"
import {
  Controller,
  type ControllerProps,
  type FieldPath,
  type FieldValues,
  FormProvider,
  useFormContext,
} from "react-hook-form"

import { cn } from "@/lib/utils"
import { Label } from "@/components/ui/label"

const Form = FormProvider

type FormFieldContextValue<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
> = {
  name: TName
}

const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue)

const FormField = <
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
>({
  ...props
}: ControllerProps<TFieldValues, TName>) => {
  return (
    <FormFieldContext.Provider value={{ name: props.name }}>
      <Controller {...props} />
    </FormFieldContext.Provider>
  )
}

const useFormField = () => {
  const fieldContext = React.useContext(FormFieldContext)
  const itemContext = React.useContext(FormItemContext)
  const { getFieldState, formState } = useFormContext()

const fieldState = getFieldState(fieldContext.name, formState)

if (!fieldContext) {
    throw new Error("useFormField should be used within <FormField>")
  }

const { id } = itemContext

return {
    id,
    name: fieldContext.name,
    formItemId: `${id}-form-item`,
    formDescriptionId: `${id}-form-item-description`,
    formMessageId: `${id}-form-item-message`,
    ...fieldState,
  }
}

type FormItemContextValue = {
  id: string
}

const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue)

const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => {
    const id = React.useId()

return (
      <FormItemContext.Provider value={{ id }}>
        <div ref={ref} className={cn("space-y-2", className)} {...props} />
      </FormItemContext.Provider>
    )
  },
)
FormItem.displayName = "FormItem"

const FormLabel = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
>(({ className, ...props }, ref) => {
  const { error, formItemId } = useFormField()

return <Label ref={ref} className={cn(error && "text-destructive", className)} htmlFor={formItemId} {...props} />
})
FormLabel.displayName = "FormLabel"

const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(
  ({ ...props }, ref) => {
    const { error, formItemId, formDescriptionId, formMessageId } = useFormField()

return (
      <Slot
        ref={ref}
        id={formItemId}
        aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
        aria-invalid={!!error}
        {...props}
      />
    )
  },
)
FormControl.displayName = "FormControl"

const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className, ...props }, ref) => {
    const { formDescriptionId } = useFormField()

return <p ref={ref} id={formDescriptionId} className={cn("text-sm text-muted-foreground", className)} {...props} />
  },
)
FormDescription.displayName = "FormDescription"

const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className, children, ...props }, ref) => {
    const { error, formMessageId } = useFormField()
    const body = error ? String(error?.message) : children

if (!body) {
      return null
    }

return (
      <p ref={ref} id={formMessageId} className={cn("text-sm font-medium text-destructive", className)} {...props}>
        {body}
      </p>
    )
  },
)
FormMessage.displayName = "FormMessage"

export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField }
[V0_FILE]typescriptreact:file="components/ui/select.tsx"
"use client"

import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown, ChevronUp } from "lucide-react"

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

const Select = SelectPrimitive.Root

const SelectGroup = SelectPrimitive.Group

const SelectValue = SelectPrimitive.Value

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
      className,
    )}
    {...props}
  >
    {children}
    <SelectPrimitive.Icon asChild>
      <ChevronDown className="h-4 w-4 opacity-50" />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName

const SelectScrollUpButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollUpButton
    ref={ref}
    className={cn("flex cursor-default items-center justify-center py-1", className)}
    {...props}
  >
    <ChevronUp className="h-4 w-4" />
  </SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName

const SelectScrollDownButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollDownButton
    ref={ref}
    className={cn("flex cursor-default items-center justify-center py-1", className)}
    {...props}
  >
    <ChevronDown className="h-4 w-4" />
  </SelectPrimitive.ScrollDownButton>
))
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName

const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => (
  <SelectPrimitive.Portal>
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        position === "popper" &&
          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
        className,
      )}
      position={position}
      {...props}
    >
      <SelectScrollUpButton />
      <SelectPrimitive.Viewport
        className={cn(
          "p-1",
          position === "popper" &&
            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
        )}
      >
        {children}
      </SelectPrimitive.Viewport>
      <SelectScrollDownButton />
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName

const SelectLabel = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Label ref={ref} className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} {...props} />
))
SelectLabel.displayName = SelectPrimitive.Label.displayName

const SelectItem = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className,
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <SelectPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </SelectPrimitive.ItemIndicator>
    </span>

<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
  </SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName

const SelectSeparator = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName

export {
  Select,
  SelectGroup,
  SelectValue,
  SelectTrigger,
  SelectContent,
  SelectLabel,
  SelectItem,
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
}
[V0_FILE]typescriptreact:file="components/ui/label.tsx"
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"

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

const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70")

const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
))
Label.displayName = LabelPrimitive.Root.displayName

export { Label }
[V0_FILE]typescriptreact:file="contexts/auth-context.tsx" isQuickEdit="true"
"use client"

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

interface User {
  id: string
  name: string
  email: string
  avatar?: string
  role: "student" | "tutor" | "admin"
}

interface AuthContextType {
  isAuthenticated: boolean
  user: User | null
  login: (email: string, password: string) => Promise<boolean>
  signup: (name: string, email: string, password: string, role: "student" | "tutor") => Promise<boolean>
  logout: () => void
}

const AuthContext = createContext<AuthContextType>({
  isAuthenticated: false,
  user: null,
  login: async () => false,
  signup: async () => false,
  logout: () => {},
})

export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
  const [isAuthenticated, setIsAuthenticated] = useState(false)
  const [user, setUser] = useState<User | null>(null)

useEffect(() => {
    // Check if user is logged in
    const storedUser = localStorage.getItem("user")
    if (storedUser) {
      setUser(JSON.parse(storedUser))
      setIsAuthenticated(true)
    }
  }, [])

const login = async (email: string, password: string): Promise<boolean> => {
    // Simulate API call
    return new Promise((resolve) => {
      setTimeout(() => {
        // For demo purposes, accept any credentials
        const mockUser: User = {
          id: "user-1",
          name: "John Doe",
          email,
          role: "student",
          avatar:
            "https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-4.0.3&auto=format&fit=crop&w=687&q=80",
        }

setUser(mockUser)
        setIsAuthenticated(true)
        localStorage.setItem("user", JSON.stringify(mockUser))
        resolve(true)
      }, 1000)
    })
  }

const signup = async (name: string, email: string, password: string, role: "student" | "tutor"): Promise<boolean> => {
    // Simulate API call
    return new Promise((resolve) => {
      setTimeout(() => {
        const mockUser: User = {
          id: `user-${Date.now()}`,
          name,
          email,
          role,
        }

setUser(mockUser)
        setIsAuthenticated(true)
        localStorage.setItem("user", JSON.stringify(mockUser))
        resolve(true)
      }, 1000)
    })
  }

const logout = () => {
    setUser(null)
    setIsAuthenticated(false)
    localStorage.removeItem("user")
  }

return (
    <AuthContext.Provider value={{ isAuthenticated, user, login, signup, logout }}>{children}</AuthContext.Provider>
  )
}

export const useAuth = () => useContext(AuthContext)
[V0_FILE]typescriptreact:file="app/dashboard/page.tsx"
"use client"

import { useEffect } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/auth-context"
import { Header } from "@/components/navigation/header"
import { Footer } from "@/components/navigation/footer"
import { NeumoButton } from "@/components/ui/neumo-button"

export default function DashboardPage() {
  const { isAuthenticated, user } = useAuth()
  const router = useRouter()

useEffect(() => {
    // Redirect to login if not authenticated
    if (typeof window !== "undefined" && !isAuthenticated) {
      router.push("/login")
    }
  }, [isAuthenticated, router])

// Render a loading state instead of null
  if (!isAuthenticated) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="animate-pulse text-center">
          <p className="text-lg">Loading...</p>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen flex flex-col">
      <Header />
      <main className="flex-grow container mx-auto px-4 py-16 mt-16">
        <div className="max-w-4xl mx-auto">
          <h1 className="text-3xl font-bold mb-6">Welcome, {user?.name || "User"}!</h1>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
            <div className="bg-card p-6 rounded-xl shadow-neumo">
              <h2 className="text-xl font-semibold mb-4">Quick Actions</h2>
              <div className="space-y-3">
                <NeumoButton variant="outline" className="w-full justify-start">
                  Find a Tutor
                </NeumoButton>
                <NeumoButton variant="outline" className="w-full justify-start">
                  Browse Tasks
                </NeumoButton>
                <NeumoButton variant="outline" className="w-full justify-start">
                  Join Community
                </NeumoButton>
              </div>
            </div>

<div className="bg-card p-6 rounded-xl shadow-neumo">
              <h2 className="text-xl font-semibold mb-4">Your Stats</h2>
              <div className="space-y-2">
                <p>Role: {user?.role || "Student"}</p>
                <p>Completed Sessions: 0</p>
                <p>Tasks Completed: 0</p>
                <p>Community Points: 0</p>
              </div>
            </div>
          </div>

<div className="bg-card p-6 rounded-xl shadow-neumo">
            <h2 className="text-xl font-semibold mb-4">Getting Started</h2>
            <p className="mb-4">Welcome to StudentConnect! Here are some steps to get started:</p>
            <ol className="list-decimal list-inside space-y-2 ml-4">
              <li>Complete your profile to help us match you with the right tutors</li>
              <li>Browse available tutors and schedule your first session</li>
              <li>Join subject-specific communities to connect with peers</li>
              <li>Explore the resources section for study materials</li>
            </ol>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/notifications/notification-bell.tsx"
"use client"

import { useState, useEffect } from "react"
import { Bell, BookOpen, WifiOff } from "lucide-react"
import { useTheme } from "@/contexts/theme-context"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { NeumoButton } from "@/components/ui/neumo-button"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/auth-context"
import { formatDistanceToNow } from "date-fns"
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert"
import { toast } from "sonner"

// Notification interface
interface Notification {
  id: string
  title: string
  message: string
  time: Date | string
  isRead: boolean
  type: "tutor" | "task" | "community" | "system"
}

// Mock functions for notification service
const getUserNotifications = async (userId: string): Promise<Notification[]> => {
  // In a real app, you'd fetch from your database
  return [
    {
      id: "1",
      title: "Task Application",
      message: "Your task application has been approved",
      time: new Date(Date.now() - 60 * 60 * 1000), // 1 hour ago
      isRead: false,
      type: "task",
    },
    {
      id: "2",
      title: "New Task",
      message: "New task available in your category",
      time: new Date(Date.now() - 3 * 60 * 60 * 1000), // 3 hours ago
      isRead: false,
      type: "task",
    },
    {
      id: "3",
      title: "Task Completed",
      message: "Your task has been completed",
      time: new Date(Date.now() - 24 * 60 * 60 * 1000), // 1 day ago
      isRead: true,
      type: "task",
    },
  ]
}

const markAllNotificationsAsRead = async (userId: string): Promise<boolean> => {
  // In a real app, you'd update your database
  return true
}

const markNotificationAsRead = async (id: string): Promise<boolean> => {
  // In a real app, you'd update your database
  return true
}

const deleteOldNotifications = async (userId: string, days: number): Promise<boolean> => {
  // In a real app, you'd delete from your database
  return true
}

export function NotificationBell() {
  const [notifications, setNotifications] = useState<Notification[]>([])
  const [isOpen, setIsOpen] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [isOffline, setIsOffline] = useState(false)
  const { theme } = useTheme()
  const router = useRouter()
  const { isAuthenticated, user } = useAuth()

const unreadCount = notifications.filter((n) => !n.isRead).length

// Check online status
  useEffect(() => {
    setIsOffline(!navigator.onLine)

const handleOnline = () => setIsOffline(false)
    const handleOffline = () => setIsOffline(true)

window.addEventListener("online", handleOnline)
    window.addEventListener("offline", handleOffline)

return () => {
      window.removeEventListener("online", handleOnline)
      window.removeEventListener("offline", handleOffline)
    }
  }, [])

// Fetch notifications
  const fetchNotifications = async () => {
    if (isAuthenticated && user) {
      setIsLoading(true)
      setError(null)
      try {
        const userNotifications = await getUserNotifications(user.id)
        setNotifications(userNotifications)

// Clean up old notifications
        await deleteOldNotifications(user.id, 30)
      } catch (error) {
        console.error("Error fetching notifications:", error)
        setError("Failed to load notifications. Please try again.")
      } finally {
        setIsLoading(false)
      }
    }
  }

useEffect(() => {
    fetchNotifications()
  }, [isAuthenticated, user])

// Also refresh notifications when the popover is opened
  useEffect(() => {
    if (isOpen && isAuthenticated && user) {
      fetchNotifications()
    }
  }, [isOpen, isAuthenticated, user])

const markAllAsRead = async () => {
    if (isAuthenticated && user) {
      try {
        const success = await markAllNotificationsAsRead(user.id)

if (success || !navigator.onLine) {
          // Update local state regardless of online status
          setNotifications((prevNotifications) => prevNotifications.map((n) => ({ ...n, isRead: true })))
          toast.success(
            navigator.onLine
              ? "All notifications marked as read"
              : "All notifications will be marked as read when online",
          )
        }
      } catch (error) {
        console.error("Error marking notifications as read:", error)
        toast.error("Failed to mark notifications as read")
      }
    }
  }

const markAsRead = async (id: string) => {
    try {
      await markNotificationAsRead(id)

// Update local state
      setNotifications((prevNotifications) => prevNotifications.map((n) => (n.id === id ? { ...n, isRead: true } : n)))
    } catch (error) {
      console.error("Error marking notification as read:", error)
      toast.error("Failed to mark notification as read")
    }
  }

const getNotificationColor = (type: Notification["type"]) => {
    switch (type) {
      case "tutor":
        return "bg-blue-500"
      case "task":
        return "bg-green-500"
      case "community":
        return "bg-purple-500"
      case "system":
        return "bg-gray-500"
      default:
        return "bg-gray-500"
    }
  }

const formatNotificationTime = (timestamp: any) => {
    if (!timestamp) return "Just now"

// Convert Firebase timestamp to JS Date if needed
    const date = timestamp.toDate ? timestamp.toDate() : new Date(timestamp)

try {
      return formatDistanceToNow(date, { addSuffix: true })
    } catch (error) {
      return "Recently"
    }
  }

const viewApplications = () => {
    router.push("/applications")
    setIsOpen(false)
  }

const handleRetry = () => {
    fetchNotifications()
  }

return (
    <Popover open={isOpen} onOpenChange={setIsOpen}>
      <PopoverTrigger asChild>
        <button
          className={`relative p-2 rounded-full transition-all duration-300 hover:scale-110 ${
            theme === "dark" ? "hover:bg-muted/30" : "hover:bg-muted/30"
          }`}
          aria-label="Notifications"
        >
          <Bell className="h-5 w-5" />
          {unreadCount > 0 && (
            <span className="absolute top-0 right-0 h-4 w-4 bg-sc-yellow text-black text-xs rounded-full flex items-center justify-center transform translate-x-1 -translate-y-1">
              {unreadCount}
            </span>
          )}
          {isOffline && (
            <span className="absolute bottom-0 right-0 h-3 w-3 bg-red-500 rounded-full transform translate-x-1 translate-y-1 border border-background"></span>
          )}
        </button>
      </PopoverTrigger>
      <PopoverContent
        className={`w-80 p-0 max-h-[400px] overflow-hidden flex flex-col ${
          theme === "dark"
            ? "bg-card/95 backdrop-blur-lg border border-border shadow-neumo-dark"
            : "bg-card/95 backdrop-blur-lg border border-border shadow-neumo"
        }`}
        align="end"
      >
        <div className="p-4 border-b border-border flex justify-between items-center">
          <h3 className="font-medium">Notifications</h3>
          <div className="flex items-center gap-2">
            {isOffline && (
              <div className="flex items-center text-xs text-red-500">
                <WifiOff className="h-3 w-3 mr-1" />
                Offline
              </div>
            )}
            {unreadCount > 0 && (
              <button onClick={markAllAsRead} className="text-xs text-sc-yellow hover:underline">
                Mark all as read
              </button>
            )}
          </div>
        </div>

<div className="overflow-y-auto max-h-[280px]">
          {isLoading ? (
            // Loading skeletons
            <div className="p-4 space-y-3">
              {[...Array(3)].map((_, i) => (
                <div key={i} className="p-3 rounded bg-muted/20 animate-pulse h-16"></div>
              ))}
            </div>
          ) : error ? (
            <div className="p-4">
              <Alert variant="destructive">
                <AlertTitle>Error</AlertTitle>
                <AlertDescription className="flex justify-between items-center">
                  <span>{error}</span>
                  <button onClick={handleRetry} className="text-xs underline hover:text-primary">
                    Retry
                  </button>
                </AlertDescription>
              </Alert>
            </div>
          ) : notifications.length > 0 ? (
            <div className="divide-y divide-border">
              {notifications.map((notification) => (
                <div
                  key={notification.id}
                  className={`p-4 hover:bg-muted/30 transition-colors duration-200 ${
                    notification.isRead ? "" : "bg-muted/10"
                  }`}
                  onClick={() => markAsRead(notification.id)}
                >
                  <div className="flex items-start gap-3">
                    <div
                      className={`${getNotificationColor(notification.type)} h-2 w-2 mt-2 rounded-full flex-shrink-0`}
                    />
                    <div className="flex-1">
                      <div className="flex justify-between items-start">
                        <h4 className="font-medium text-sm">{notification.title}</h4>
                        <span className="text-xs text-muted-foreground">
                          {formatNotificationTime(notification.time)}
                        </span>
                      </div>
                      <p className="text-xs text-muted-foreground mt-1">{notification.message}</p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="p-8 text-center">
              <p className="text-muted-foreground text-sm">No notifications yet</p>
            </div>
          )}
        </div>

<div className="p-4 border-t border-border mt-auto">
          <NeumoButton
            variant="outline"
            size="sm"
            className="w-full transition-all duration-300 hover:scale-105"
            onClick={viewApplications}
          >
            <BookOpen className="mr-2 h-4 w-4" />
            View All Applications
          </NeumoButton>
        </div>
      </PopoverContent>
    </Popover>
  )
}
[V0_FILE]typescriptreact:file="components/ui/neumo-button.tsx" isQuickEdit="true"
"use client"

import React from "react"
import { cn } from "@/lib/utils"
import { useTheme } from "@/contexts/theme-context"
import { useRouter } from "next/navigation"

interface NeumoButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "default" | "primary" | "outline" | "ghost" | "link"
  size?: "sm" | "md" | "lg" | "icon"
  children: React.ReactNode
  href?: string
}

export const NeumoButton = React.forwardRef<HTMLButtonElement, NeumoButtonProps>(
  ({ className, variant = "default", size = "md", children, href, ...props }, ref) => {
    const { theme } = useTheme()
    const router = useRouter()

const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
      if (props.onClick) {
        props.onClick(e)
      }

if (href) {
        router.push(href)
      }
    }

const baseStyles =
      "inline-flex items-center justify-center rounded-md font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none"

const variantStyles = {
      default: `${theme === "dark" ? "bg-card text-foreground shadow-neumo-sm-dark hover:shadow-neumo-dark" : "bg-card text-foreground shadow-neumo-sm hover:shadow-neumo"}`,
      primary: "bg-sc-yellow text-sc-brown hover:bg-sc-yellow/90",
      outline: `border border-input ${theme === "dark" ? "bg-background text-foreground shadow-neumo-sm-dark hover:shadow-neumo-dark" : "bg-background text-foreground shadow-neumo-sm hover:shadow-neumo"}`,
      ghost: "hover:bg-accent hover:text-accent-foreground",
      link: "text-primary underline-offset-4 hover:underline",
    }

const sizeStyles = {
      sm: "h-9 px-3 text-xs",
      md: "h-10 px-4 py-2",
      lg: "h-11 px-8 text-base",
      icon: "h-10 w-10",
    }

return (
      <button
        className={cn(baseStyles, variantStyles[variant], sizeStyles[size], className)}
        ref={ref}
        {...props}
        onClick={handleClick}
      >
        {children}
      </button>
    )
  },
)

NeumoButton.displayName = "NeumoButton"
[V0_FILE]typescriptreact:file="app/tutors/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="data/mock-tasks.ts"
export const mockTasks = [
  {
    id: "task1",
    title: "Develop a Responsive Landing Page",
    description:
      "Looking for a skilled web developer to create a responsive landing page for our new product. The page should be mobile-friendly and include animations.",
    category: "development",
    skills: ["HTML", "CSS", "JavaScript", "Responsive Design"],
    price: 1500,
    deadline: "2023-12-15",
    createdAt: "2023-11-01T10:30:00Z",
    status: "approved",
    applicants: 3,
    state: "Maharashtra",
    district: "Mumbai",
    maxApplicants: 5,
    currentApplicants: 3,
  },
  {
    id: "task2",
    title: "Logo Design for Tech Startup",
    description:
      "We need a modern, minimalist logo for our AI-powered tech startup. The logo should convey innovation and reliability.",
    category: "design",
    skills: ["Logo Design", "Adobe Illustrator", "Branding"],
    price: 2000,
    deadline: "2023-12-10",
    createdAt: "2023-11-02T14:15:00Z",
    status: "approved",
    applicants: 7,
    state: "Karnataka",
    district: "Bangalore",
    maxApplicants: 10,
    currentApplicants: 7,
  },
  {
    id: "task3",
    title: "Content Writing for Blog Posts",
    description:
      "Looking for a content writer to create 5 SEO-optimized blog posts about digital marketing trends. Each post should be 1000-1500 words.",
    category: "writing",
    skills: ["Content Writing", "SEO", "Digital Marketing"],
    price: 1000,
    deadline: "2023-12-20",
    createdAt: "2023-11-03T09:45:00Z",
    status: "approved",
    applicants: 4,
    state: "Delhi",
    district: "New Delhi",
    maxApplicants: 8,
    currentApplicants: 4,
  },
  {
    id: "task4",
    title: "Data Analysis for E-commerce Store",
    description:
      "Need a data analyst to analyze our e-commerce sales data and provide insights on customer behavior and product performance.",
    category: "data",
    skills: ["Data Analysis", "Excel", "SQL", "Visualization"],
    price: 2500,
    deadline: "2023-12-25",
    createdAt: "2023-11-04T16:20:00Z",
    status: "approved",
    applicants: 2,
    state: "Tamil Nadu",
    district: "Chennai",
    maxApplicants: 3,
    currentApplicants: 2,
  },
  {
    id: "task5",
    title: "Social Media Marketing Campaign",
    description:
      "Looking for a social media marketer to create and execute a campaign for our new product launch across Instagram, Facebook, and Twitter.",
    category: "marketing",
    skills: ["Social Media Marketing", "Content Creation", "Campaign Management"],
    price: 1800,
    deadline: "2023-12-18",
    createdAt: "2023-11-05T11:10:00Z",
    status: "approved",
    applicants: 5,
    state: "Gujarat",
    district: "Ahmedabad",
    maxApplicants: 6,
    currentApplicants: 5,
  },
  {
    id: "task6",
    title: "Market Research for Health Product",
    description:
      "Need someone to conduct market research for our new health supplement product. Research should include target audience analysis and competitor analysis.",
    category: "research",
    skills: ["Market Research", "Data Collection", "Analysis", "Report Writing"],
    price: 2200,
    deadline: "2023-12-30",
    createdAt: "2023-11-06T13:25:00Z",
    status: "approved",
    applicants: 1,
    state: "Telangana",
    district: "Hyderabad",
    maxApplicants: 4,
    currentApplicants: 1,
  },
]
[V0_FILE]typescriptreact:file="app/tasks/[id]/page.tsx"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useParams, useRouter } from "next/navigation"
import Link from "next/link"
import { NeumoButton } from "@/components/ui/neumo-button"
import { Button } from "@/components/ui/button"
import { useTheme } from "@/contexts/theme-context"
import { useAuth } from "@/contexts/auth-context"
import { Header } from "@/components/navigation/header"
import { Footer } from "@/components/navigation/footer"
import { mockTasks } from "@/data/mock-tasks"
import { toast } from "sonner"
import { ArrowLeft, DollarSign, Calendar, Clock, MapPin, Tag, Users, CheckCircle, XCircle } from "lucide-react"
import { Textarea } from "@/components/ui/textarea"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function TaskDetailPage() {
  const { id } = useParams()
  const router = useRouter()
  const { theme } = useTheme()
  const { isAuthenticated, user } = useAuth()
  const [task, setTask] = useState<any>(null)
  const [loading, setLoading] = useState(true)
  const [applying, setApplying] = useState(false)
  const [application, setApplication] = useState({
    coverLetter: "",
    proposedPrice: "",
    estimatedDays: "",
  })

useEffect(() => {
    const fetchTask = async () => {
      setLoading(true)
      try {
        // In a real app, you'd fetch from your database
        // For now, we'll use mock data
        const foundTask = mockTasks.find((t) => t.id === id)
        if (foundTask) {
          setTask(foundTask)
        } else {
          toast.error("Task not found")
          router.push("/tasks")
        }
      } catch (error) {
        console.error("Error fetching task:", error)
        toast.error("Failed to load task details")
      } finally {
        setLoading(false)
      }
    }

if (id) {
      fetchTask()
    }
  }, [id, router])

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { id, value } = e.target
    setApplication((prev) => ({
      ...prev,
      [id]: value,
    }))
  }

const handleApply = async (e: React.FormEvent) => {
    e.preventDefault()

if (!isAuthenticated) {
      toast.error("Please login to apply for this task")
      router.push("/login")
      return
    }

if (!application.coverLetter || !application.proposedPrice || !application.estimatedDays) {
      toast.error("Please fill out all fields")
      return
    }

setApplying(true)
    try {
      // In a real app, you'd save to your database
      // For now, we'll just simulate success
      setTimeout(() => {
        toast.success("Your application has been submitted successfully")
        setApplying(false)
        router.push("/tasks")
      }, 1000)
    } catch (error) {
      console.error("Error applying for task:", error)
      toast.error("Failed to submit application")
      setApplying(false)
    }
  }

if (loading) {
    return (
      <>
        <Header />
        <div className="container mx-auto px-4 py-16 mt-16">
          <div className="animate-pulse">
            <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-3/4 mb-4"></div>
            <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2 mb-6"></div>
            <div className="h-32 bg-gray-200 dark:bg-gray-700 rounded mb-6"></div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="h-24 bg-gray-200 dark:bg-gray-700 rounded"></div>
              <div className="h-24 bg-gray-200 dark:bg-gray-700 rounded"></div>
            </div>
          </div>
        </div>
        <Footer />
      </>
    )
  }

if (!task) {
    return (
      <>
        <Header />
        <div className="container mx-auto px-4 py-16 mt-16 text-center">
          <h1 className="text-2xl font-bold mb-4">Task Not Found</h1>
          <p className="text-muted-foreground mb-6">The task you're looking for doesn't exist or has been removed.</p>
          <Link href="/tasks">
            <Button>Back to Tasks</Button>
          </Link>
        </div>
        <Footer />
      </>
    )
  }

return (
    <>
      <Header />
      <div className="container mx-auto px-4 py-16 mt-16">
        {/* Back Button */}
        <div className="mb-6">
          <Link href="/tasks">
            <Button variant="ghost" className="pl-0 flex items-center text-muted-foreground hover:text-foreground">
              <ArrowLeft className="mr-2 h-4 w-4" />
              Back to Tasks
            </Button>
          </Link>
        </div>

{/* Task Header */}
        <div className="mb-8">
          <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-4">
            <h1 className="text-3xl font-bold">{task.title}</h1>
            <div className="flex items-center text-lg font-semibold text-green-600 dark:text-green-400">
              <DollarSign className="h-5 w-5 mr-1" />
              <span>₹{task.price}</span>
            </div>
          </div>
          <div className="flex flex-wrap gap-3 mb-4">
            <span className="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm flex items-center">
              <Tag className="h-3.5 w-3.5 mr-1.5" />
              {task.category.charAt(0).toUpperCase() + task.category.slice(1)}
            </span>
            <span className="px-3 py-1 bg-orange-100 text-orange-800 dark:bg-orange-900/20 dark:text-orange-400 rounded-full text-sm flex items-center">
              <Calendar className="h-3.5 w-3.5 mr-1.5" />
              Posted: {new Date(task.createdAt).toLocaleDateString()}
            </span>
            <span className="px-3 py-1 bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400 rounded-full text-sm flex items-center">
              <Clock className="h-3.5 w-3.5 mr-1.5" />
              Deadline: {new Date(task.deadline).toLocaleDateString()}
            </span>
            {(task.state || task.district) && (
              <span className="px-3 py-1 bg-purple-100 text-purple-800 dark:bg-purple-900/20 dark:text-purple-400 rounded-full text-sm flex items-center">
                <MapPin className="h-3.5 w-3.5 mr-1.5" />
                {task.district}
                {task.district && task.state ? ", " : ""}
                {task.state}
              </span>
            )}
            <span className="px-3 py-1 bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400 rounded-full text-sm flex items-center">
              <Users className="h-3.5 w-3.5 mr-1.5" />
              {task.currentApplicants}/{task.maxApplicants} Applicants
            </span>
          </div>
        </div>

{/* Task Content */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Left Column - Task Details */}
          <div className="lg:col-span-2">
            <div
              className={`p-6 rounded-xl mb-6 ${
                theme === "dark"
                  ? "bg-card border border-border shadow-neumo-sm-dark"
                  : "bg-card border border-border shadow-neumo-sm"
              }`}
            >
              <h2 className="text-xl font-semibold mb-4">Task Description</h2>
              <div className="prose dark:prose-invert max-w-none">
                <p className="text-muted-foreground whitespace-pre-line">{task.description}</p>
              </div>
            </div>

<div
              className={`p-6 rounded-xl ${
                theme === "dark"
                  ? "bg-card border border-border shadow-neumo-sm-dark"
                  : "bg-card border border-border shadow-neumo-sm"
              }`}
            >
              <h2 className="text-xl font-semibold mb-4">Required Skills</h2>
              <div className="flex flex-wrap gap-2">
                {task.skills.map((skill: string, index: number) => (
                  <span
                    key={index}
                    className="px-3 py-1.5 bg-muted/50 text-muted-foreground rounded-full text-sm flex items-center"
                  >
                    <CheckCircle className="h-3.5 w-3.5 mr-1.5 text-green-500" />
                    {skill}
                  </span>
                ))}
              </div>
            </div>
          </div>

{/* Right Column - Apply Form */}
          <div className="lg:col-span-1">
            <div
              className={`p-6 rounded-xl sticky top-24 ${
                theme === "dark"
                  ? "bg-card border border-border shadow-neumo-sm-dark"
                  : "bg-card border border-border shadow-neumo-sm"
              }`}
            >
              <h2 className="text-xl font-semibold mb-4">Apply for this Task</h2>

{task.currentApplicants >= task.maxApplicants ? (
                <div className="text-center py-6">
                  <XCircle className="h-12 w-12 mx-auto text-red-500 mb-3" />
                  <h3 className="text-lg font-medium mb-2">Applications Closed</h3>
                  <p className="text-muted-foreground">This task has reached its maximum number of applicants.</p>
                </div>
              ) : (
                <form onSubmit={handleApply} className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="coverLetter">Cover Letter</Label>
                    <Textarea
                      id="coverLetter"
                      placeholder="Explain why you're the best fit for this task..."
                      rows={5}
                      value={application.coverLetter}
                      onChange={handleInputChange}
                      required
                    />
                  </div>

<div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="proposedPrice">Your Price (₹)</Label>
                      <Input
                        id="proposedPrice"
                        type="number"
                        placeholder="Enter amount"
                        value={application.proposedPrice}
                        onChange={handleInputChange}
                        required
                        min="0"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="estimatedDays">Estimated Days</Label>
                      <Input
                        id="estimatedDays"
                        type="number"
                        placeholder="Days to complete"
                        value={application.estimatedDays}
                        onChange={handleInputChange}
                        required
                        min="1"
                      />
                    </div>
                  </div>

<NeumoButton
                    type="submit"
                    variant="primary"
                    className="w-full justify-center transition-all duration-300 hover:scale-105"
                    disabled={applying}
                  >
                    {applying ? "Submitting..." : "Submit Application"}
                  </NeumoButton>

{!isAuthenticated && (
                    <p className="text-sm text-muted-foreground text-center mt-4">
                      You need to{" "}
                      <Link href="/login" className="text-primary hover:underline">
                        log in
                      </Link>{" "}
                      to apply for this task.
                    </p>
                  )}
                </form>
              )}
            </div>
          </div>
        </div>
      </div>
      <Footer />
    </>
  )
}
[V0_FILE]typescriptreact:file="components/community/purpose-selection.tsx"
"use client"

import type React from "react"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Form, FormControl, FormField, FormItem, FormLabel } from "@/components/ui/form"
import * as z from "zod"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { Card, CardContent } from "@/components/ui/card"
import { cn } from "@/lib/utils"
import { NeumoButton } from "@/components/ui/neumo-button"

export type PrepPurpose = "competitive" | "board" | "both"

const formSchema = z.object({
  purpose: z.enum(["competitive", "board", "both"], {
    required_error: "Please select what you are preparing for",
  }),
})

type FormData = z.infer<typeof formSchema>

interface PurposeSelectionProps {
  onPurposeSelected: (purpose: PrepPurpose) => void
}

export const PurposeSelection: React.FC<PurposeSelectionProps> = ({ onPurposeSelected }) => {
  const form = useForm<FormData>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      purpose: undefined,
    },
  })

const handleSubmit = (data: FormData) => {
    onPurposeSelected(data.purpose)
  }

const purposeOptions = [
    {
      value: "competitive",
      label: "Competitive Exams",
      description: "Prepare for JEE, NEET, and other competitive exams.",
    },
    { value: "board", label: "Board Exams", description: "Focus on your Class 10 and 12 board exams." },
    {
      value: "both",
      label: "Both",
      description: "Balance preparation for both competitive and board exams.",
    },
  ]

return (
    <div className="p-8 rounded-2xl bg-card/30 shadow-neumo-md">
      <h2 className="text-2xl font-semibold mb-6 text-center">Find Your Study Group</h2>
      <p className="text-muted-foreground mb-8 text-center">What are you preparing for?</p>

<Form {...form}>
        <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
          <FormField
            control={form.control}
            name="purpose"
            render={({ field }) => (
              <FormItem className="space-y-3">
                <FormControl>
                  <RadioGroup
                    onValueChange={field.onChange}
                    defaultValue={field.value}
                    className="grid grid-cols-1 md:grid-cols-3 gap-4"
                  >
                    {purposeOptions.map((option) => (
                      <FormItem key={option.value}>
                        <Card
                          className={cn(
                            "hover:shadow-lg transition-shadow duration-300 cursor-pointer",
                            field.value === option.value ? "border-2 border-primary" : "",
                          )}
                        >
                          <CardContent className="p-4 flex flex-col items-center justify-center">
                            <FormControl>
                              <RadioGroupItem value={option.value} id={option.value} />
                            </FormControl>
                            <FormLabel htmlFor={option.value} className="font-semibold text-lg">
                              {option.label}
                            </FormLabel>
                            <p className="text-sm text-muted-foreground text-center">{option.description}</p>
                          </CardContent>
                        </Card>
                      </FormItem>
                    ))}
                  </RadioGroup>
                </FormControl>
              </FormItem>
            )}
          />

<div className="pt-4 flex justify-center">
            <NeumoButton type="submit" variant="primary" className="px-8 py-3 text-base">
              Continue
            </NeumoButton>
          </div>
        </form>
      </Form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/community/group-selection-form.tsx"
"use client"

import { useState, useEffect } from "react"
import { useTheme } from "@/contexts/theme-context"
import { NeumoButton } from "@/components/ui/neumo-button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import * as z from "zod"
import { GraduationCap, BookOpen, Globe, ArrowRight } from "lucide-react"
import { Checkbox } from "@/components/ui/checkbox"
import type { PrepPurpose } from "./purpose-selection"
import type { GroupPreferences } from "@/app/community/page"

// Define all possible exams
const ALL_EXAMS = [
  { value: "JEE Main", label: "JEE Main" },
  { value: "NEET", label: "NEET" },
  { value: "NDA", label: "NDA" },
  { value: "CUET", label: "CUET" },
  { value: "CDS", label: "CDS" },
  { value: "WBJEE", label: "WBJEE" },
  { value: "NTSE", label: "NTSE" },
]

// Classes for competitive exams
const COMPETITIVE_CLASSES = [
  { value: "11", label: "Class 11" },
  { value: "12", label: "Class 12" },
]

// Classes for board exams
const BOARD_CLASSES = [
  { value: "9", label: "Class 9" },
  { value: "10", label: "Class 10" },
  { value: "11", label: "Class 11" },
  { value: "12", label: "Class 12" },
]

interface GroupSelectionFormProps {
  onSubmit: (data: GroupPreferences) => void
  purpose: PrepPurpose
  onBackClick: () => void
}

export const GroupSelectionForm = ({ onSubmit, purpose, onBackClick }: GroupSelectionFormProps) => {
  const { theme } = useTheme()
  const [formComplete, setFormComplete] = useState(false)
  const [selectedExams, setSelectedExams] = useState<string[]>([])
  const [showClassField, setShowClassField] = useState(true)

// Dynamically build the form schema based on the purpose
  const buildFormSchema = () => {
    const schema: any = {}

// Add exam fields if competitive or both
    if (purpose === "competitive" || purpose === "both") {
      schema.examType = z.array(z.string()).min(1, "Please select at least one exam")
    }

// Add class field conditionally
    if (showClassField) {
      schema.classLevel = z.string({ required_error: "Please select your class" })
    }

// Always have medium
    schema.medium = z.string({ required_error: "Please select your preferred language" })

return z.object(schema)
  }

const formSchema = buildFormSchema()
  type FormData = z.infer<typeof formSchema>

const form = useForm<FormData>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      examType: [],
      classLevel: "",
      medium: "",
    },
    mode: "onChange",
  })

// Check if CDS is selected to decide whether to show class input
  useEffect(() => {
    if (selectedExams.includes("CDS") && selectedExams.length === 1) {
      setShowClassField(false)
    } else {
      setShowClassField(true)
    }
  }, [selectedExams])

// Check if all fields are filled to enable submit button
  useEffect(() => {
    const values = form.getValues()
    let isComplete = true

if (purpose === "competitive" || purpose === "both") {
      isComplete = isComplete && values.examType && values.examType.length > 0
    }

if (showClassField) {
      isComplete = isComplete && !!values.classLevel
    }

isComplete = isComplete && !!values.medium

setFormComplete(isComplete)
  }, [form.watch(), purpose, showClassField])

// Handle form submission with type checking
  const handleSubmit = (data: FormData) => {
    // Convert the data to GroupPreferences format
    const preferences: GroupPreferences = {
      examType: data.examType?.join(",") || "",
      classLevel: data.classLevel || "",
      medium: data.medium,
    }

onSubmit(preferences)
  }

// Handle exam checkbox changes
  const handleExamChange = (checked: boolean, value: string) => {
    const currentExams = form.getValues("examType") || []
    let updatedExams: string[]

if (checked) {
      updatedExams = [...currentExams, value]
    } else {
      updatedExams = currentExams.filter((item) => item !== value)
    }

form.setValue("examType", updatedExams)
    setSelectedExams(updatedExams)
  }

return (
    <div
      className={`p-8 rounded-2xl transition-all ${
        theme === "dark" ? "bg-card/30 shadow-neumo-md-dark" : "bg-card/30 shadow-neumo-md"
      }`}
    >
      <h2 className="text-2xl font-semibold mb-6 text-center">Find Your Study Group</h2>
      <p className="text-muted-foreground mb-8 text-center">
        Select your preferences to join groups with like-minded students
      </p>

<Form {...form}>
        <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
          {/* Show Exam Selection for competitive or both */}
          {(purpose === "competitive" || purpose === "both") && (
            <FormField
              control={form.control}
              name="examType"
              render={() => (
                <FormItem>
                  <FormLabel className="flex items-center gap-2">
                    <GraduationCap size={18} />
                    Exam Type
                  </FormLabel>
                  <div className="grid grid-cols-2 gap-2 mt-2">
                    {ALL_EXAMS.map((exam) => (
                      <FormField
                        key={exam.value}
                        control={form.control}
                        name="examType"
                        render={({ field }) => {
                          return (
                            <FormItem key={exam.value} className="flex flex-row items-start space-x-3 space-y-0">
                              <FormControl>
                                <Checkbox
                                  checked={field.value?.includes(exam.value)}
                                  onCheckedChange={(checked) => {
                                    handleExamChange(!!checked, exam.value)
                                  }}
                                />
                              </FormControl>
                              <FormLabel className="font-normal cursor-pointer">{exam.label}</FormLabel>
                            </FormItem>
                          )
                        }}
                      />
                    ))}
                  </div>
                  <FormMessage />
                </FormItem>
              )}
            />
          )}

{/* Conditional Class Selection */}
          {showClassField && (
            <FormField
              control={form.control}
              name="classLevel"
              render={({ field }) => (
                <FormItem>
                  <FormLabel className="flex items-center gap-2">
                    <BookOpen size={18} />
                    Class
                  </FormLabel>
                  <FormControl>
                    <Select onValueChange={field.onChange} defaultValue={field.value}>
                      <SelectTrigger className="w-full">
                        <SelectValue placeholder="Select class" />
                      </SelectTrigger>
                      <SelectContent>
                        {(purpose === "board" ? BOARD_CLASSES : COMPETITIVE_CLASSES).map((cls) => (
                          <SelectItem key={cls.value} value={cls.value}>
                            {cls.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
          )}

<FormField
            control={form.control}
            name="medium"
            render={({ field }) => (
              <FormItem>
                <FormLabel className="flex items-center gap-2">
                  <Globe size={18} />
                  Medium
                </FormLabel>
                <FormControl>
                  <Select onValueChange={field.onChange} defaultValue={field.value}>
                    <SelectTrigger className="w-full">
                      <SelectValue placeholder="Select medium" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="English">English</SelectItem>
                      <SelectItem value="Hindi">Hindi</SelectItem>
                      <SelectItem value="Both">Both</SelectItem>
                    </SelectContent>
                  </Select>
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

<NeumoButton type="submit" variant="primary" className="px-8 py-3 text-base" disabled={!formComplete}>
              Find Groups <ArrowRight size={18} />
            </NeumoButton>
          </div>
        </form>
      </Form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/community/group-card-list.tsx"
"use client"
import { useTheme } from "@/contexts/theme-context"
import type { GroupInfo } from "@/app/community/page"
import { GroupCard } from "./group-card"

interface GroupCardListProps {
  groups: GroupInfo[]
  selectedGroupId: string | null
  onJoinGroup: (groupId: string) => void
  isLoggedIn: boolean
}

export const GroupCardList = ({ groups, selectedGroupId, onJoinGroup, isLoggedIn }: GroupCardListProps) => {
  const { theme } = useTheme()

return (
    <div
      className={`rounded-2xl p-5 max-h-[700px] overflow-y-auto transition-all ${
        theme === "dark" ? "bg-card/30 shadow-neumo-sm-dark" : "bg-card/30 shadow-neumo-sm"
      }`}
    >
      <h2 className="font-semibold mb-4 px-2">Available Groups ({groups.length})</h2>

<div className="space-y-4">
        {groups.map((group) => (
          <GroupCard
            key={group.id}
            group={group}
            isSelected={group.id === selectedGroupId}
            onJoin={() => onJoinGroup(group.id)}
            isLoggedIn={isLoggedIn}
          />
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/community/group-card.tsx"
"use client"

import type React from "react"
import { useRef, useEffect } from "react"
import { useTheme } from "@/contexts/theme-context"
import type { GroupInfo } from "@/app/community/page"
import { Users } from "lucide-react"
import { NeumoButton } from "@/components/ui/neumo-button"
import { useToast } from "@/hooks/use-toast"

interface GroupCardProps {
  group: GroupInfo
  isSelected: boolean
  onJoin: () => void
  isLoggedIn: boolean
}

export const GroupCard = ({ group, isSelected, onJoin, isLoggedIn }: GroupCardProps) => {
  const { theme } = useTheme()
  const cardRef = useRef<HTMLDivElement>(null)
  const { toast } = useToast()

// Function to handle the 3D tilt effect
  useEffect(() => {
    const card = cardRef.current
    if (!card) return

let bounds: DOMRect
    let mouseX = 0
    let mouseY = 0

const handleMouseMove = (e: MouseEvent) => {
      bounds = card.getBoundingClientRect()
      mouseX = e.clientX - bounds.left
      mouseY = e.clientY - bounds.top

const rotateY = (mouseX / bounds.width - 0.5) * 10
      const rotateX = (0.5 - mouseY / bounds.height) * 10

card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`

// Add dynamic shadow
      const shadowX = rotateY / 2
      const shadowY = rotateX / -2
      card.style.boxShadow = `
        ${shadowX}px ${shadowY}px 20px rgba(0, 0, 0, 0.1), 
        ${shadowX * 2}px ${shadowY * 2}px 40px rgba(0, 0, 0, 0.05)
      `

// Add gradient highlight effect
      const gradientX = (mouseX / bounds.width) * 100
      const gradientY = (mouseY / bounds.height) * 100
      card.style.background = `
        radial-gradient(
          circle at ${gradientX}% ${gradientY}%, 
          rgba(255, 255, 255, 0.1), 
          rgba(255, 255, 255, 0) 40%
        ) ${theme === "dark" ? "#1e1e2e" : "#ffffff"}
      `
    }

const handleMouseLeave = () => {
      card.style.transform = "perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)"
      card.style.boxShadow = ""
      card.style.background = ""
    }

// Add mouse events only if not selected to prevent conflicts with selection styles
    if (!isSelected) {
      card.addEventListener("mousemove", handleMouseMove)
      card.addEventListener("mouseleave", handleMouseLeave)
    }

return () => {
      card.removeEventListener("mousemove", handleMouseMove)
      card.removeEventListener("mouseleave", handleMouseLeave)
    }
  }, [isSelected, theme])

// Generate a unique gradient based on the group type
  const getBackgroundGradient = () => {
    // Extract the first exam from the examType string
    const mainExam = group.examType?.split(",")[0] || ""

switch (mainExam) {
      case "NEET":
        return "linear-gradient(135deg, rgba(14,165,50,0.2) 0%, rgba(51,195,80,0.2) 100%)"
      case "JEE Main":
        return "linear-gradient(135deg, rgba(247,146,86,0.2) 0%, rgba(255,182,85,0.2) 100%)"
      case "CDS":
        return "linear-gradient(135deg, rgba(14,165,233,0.2) 0%, rgba(51,195,240,0.2) 100%)"
      case "NDA":
        return "linear-gradient(135deg, rgba(155,135,245,0.2) 0%, rgba(126,105,171,0.2) 100%)"
      case "CUET":
        return "linear-gradient(135deg, rgba(239,68,68,0.2) 0%, rgba(248,113,113,0.2) 100%)"
      case "WBJEE":
        return "linear-gradient(135deg, rgba(168,85,247,0.2) 0%, rgba(192,132,252,0.2) 100%)"
      case "NTSE":
        return "linear-gradient(135deg, rgba(59,130,246,0.2) 0%, rgba(96,165,250,0.2) 100%)"
      default:
        return "linear-gradient(135deg, rgba(229,217,255,0.2) 0%, rgba(139,92,246,0.1) 100%)"
    }
  }

const handleJoinClick = (e: React.MouseEvent) => {
    e.stopPropagation()

if (!isLoggedIn) {
      toast({
        title: "Login Required",
        description: "⚠️ Please log in or sign up to join a group and access the chat.",
        variant: "destructive",
      })
      return
    }

onJoin()
  }

return (
    <div
      ref={cardRef}
      onClick={() =>
        !isSelected && !isLoggedIn ? handleJoinClick(new MouseEvent("click") as unknown as React.MouseEvent) : null
      }
      className={`p-5 rounded-xl transition-all duration-300 cursor-pointer ${
        isSelected
          ? theme === "dark"
            ? "bg-sc-yellow/20 shadow-neumo-inset"
            : "bg-sc-yellow/20 shadow-neumo-inset"
          : "hover:scale-105"
      }`}
      style={{
        background: getBackgroundGradient(),
        transformStyle: "preserve-3d",
        transition: "transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease",
      }}
    >
      <div className="flex justify-between items-center">
        <h3 className="font-semibold text-base">{group.name}</h3>
        {group.newMessages > 0 && isLoggedIn && (
          <span className="bg-sc-yellow text-sc-black text-xs rounded-full px-2 py-0.5">{group.newMessages}</span>
        )}
      </div>

{/* Tags */}
      {group.tags && (
        <div className="flex flex-wrap gap-1 mt-2 mb-2">
          {group.tags.map((tag, idx) => (
            <span key={idx} className="text-xs bg-background/50 rounded-full px-2 py-0.5">
              {tag}
            </span>
          ))}
        </div>
      )}

{/* Description */}
      {group.description && <p className="text-sm text-muted-foreground mt-2 mb-3 line-clamp-2">{group.description}</p>}

<div className="flex justify-between items-center mt-2">
        <p className="text-sm text-muted-foreground flex items-center">
          <Users size={14} className="mr-1" /> {group.members} members
        </p>

<NeumoButton size="sm" variant={isSelected ? "secondary" : "primary"} onClick={handleJoinClick}>
          {isSelected ? "Joined" : "Join"}
        </NeumoButton>
      </div>

{/* 3D decoration elements */}
      <div className="absolute top-2 right-2 w-10 h-10 rounded-full bg-gradient-to-br from-purple-200 to-purple-400 opacity-10"></div>
      <div className="absolute bottom-2 left-2 w-6 h-6 rounded-full bg-gradient-to-br from-yellow-200 to-yellow-400 opacity-10"></div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/community/group-chat.tsx"
"use client"

import type React from "react"
import { useState, useRef, useEffect } from "react"
import { useTheme } from "@/contexts/theme-context"
import { Textarea } from "@/components/ui/textarea"
import { NeumoButton } from "@/components/ui/neumo-button"
import { Send, Mic, MicOff, Trash2, LogOut, Users, User } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

interface Message {
  id: number
  sender: string
  content: string
  time: string
  isCurrentUser: boolean
  isVoice?: boolean
  audioUrl?: string
}

interface GroupChatProps {
  groupId: string
  groupName: string
  initialMessages: Message[]
  onExitGroup: () => void
}

export const GroupChat = ({ groupId, groupName, initialMessages, onExitGroup }: GroupChatProps) => {
  const { theme } = useTheme()
  const { toast } = useToast()
  const [messages, setMessages] = useState<Message[]>(initialMessages)
  const [newMessage, setNewMessage] = useState("")
  const [isRecording, setIsRecording] = useState(false)
  const [recordingTime, setRecordingTime] = useState(0)
  const [audioBlob, setAudioBlob] = useState<Blob | null>(null)
  const messageContainerRef = useRef<HTMLDivElement>(null)
  const mediaRecorderRef = useRef<MediaRecorder | null>(null)
  const audioChunksRef = useRef<Blob[]>([])
  const intervalRef = useRef<number | null>(null)

// Scroll to bottom of messages when they change
  useEffect(() => {
    if (messageContainerRef.current) {
      messageContainerRef.current.scrollTop = messageContainerRef.current.scrollHeight
    }
  }, [messages])

// Handle text message sending
  const handleSendMessage = (e: React.FormEvent) => {
    e.preventDefault()
    if (newMessage.trim()) {
      const newMessageObj: Message = {
        id: Date.now(),
        sender: "You",
        content: newMessage,
        time: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
        isCurrentUser: true,
      }

setMessages([...messages, newMessageObj])
      setNewMessage("")
    }
  }

// Handle voice recording
  const startRecording = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
      const mediaRecorder = new MediaRecorder(stream)
      mediaRecorderRef.current = mediaRecorder
      audioChunksRef.current = []

mediaRecorder.ondataavailable = (e) => {
        if (e.data.size > 0) {
          audioChunksRef.current.push(e.data)
        }
      }

mediaRecorder.onstop = () => {
        const audioBlob = new Blob(audioChunksRef.current, { type: "audio/webm" })
        setAudioBlob(audioBlob)
        const audioUrl = URL.createObjectURL(audioBlob)

// Create and send voice message
        const newVoiceMessage: Message = {
          id: Date.now(),
          sender: "You",
          content: `Voice message (${recordingTime}s)`,
          time: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
          isCurrentUser: true,
          isVoice: true,
          audioUrl: audioUrl,
        }

setMessages([...messages, newVoiceMessage])
        setRecordingTime(0)

// Stop all tracks from the stream
        stream.getTracks().forEach((track) => track.stop())
      }

// Start the recording
      mediaRecorder.start()
      setIsRecording(true)

// Start the timer
      const startTime = Date.now()
      intervalRef.current = window.setInterval(() => {
        const seconds = Math.floor((Date.now() - startTime) / 1000)
        setRecordingTime(seconds)
      }, 1000)
    } catch (error) {
      console.error("Error accessing microphone:", error)
      toast({
        title: "Microphone Access Error",
        description: "Could not access your microphone. Please check permissions.",
        variant: "destructive",
      })
    }
  }

const stopRecording = () => {
    if (mediaRecorderRef.current && isRecording) {
      mediaRecorderRef.current.stop()
      setIsRecording(false)

// Clear timer
      if (intervalRef.current) {
        clearInterval(intervalRef.current)
        intervalRef.current = null
      }
    }
  }

// Delete a message
  const handleDeleteMessage = (messageId: number) => {
    setMessages(messages.filter((message) => message.id !== messageId))
    toast({
      title: "Message Deleted",
      description: "Your message has been removed",
      variant: "default",
    })
  }

return (
    <div
      className={`rounded-2xl h-full flex flex-col ${
        theme === "dark" ? "bg-card/30 shadow-neumo-sm-dark" : "bg-card/30 shadow-neumo-sm"
      }`}
    >
      {/* Chat Header */}
      <div className="p-4 border-b border-border flex justify-between items-center">
        <div>
          <h2 className="text-xl font-semibold flex items-center gap-2">
            <Users size={20} className="text-sc-yellow" />
            {groupName}
          </h2>
          <p className="text-sm text-muted-foreground">
            {messages.filter((m) => !m.isCurrentUser).length + 1} participants
          </p>
        </div>
        <AlertDialog>
          <AlertDialogTrigger asChild>
            <NeumoButton variant="outline" size="sm">
              <LogOut size={16} /> Exit
            </NeumoButton>
          </AlertDialogTrigger>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>Exit Group</AlertDialogTitle>
              <AlertDialogDescription>
                Are you sure you want to leave this group? You can always join back later.
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>Cancel</AlertDialogCancel>
              <AlertDialogAction onClick={onExitGroup}>Exit Group</AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      </div>

{/* Chat Messages */}
      <div ref={messageContainerRef} className="flex-grow p-4 overflow-y-auto max-h-[50vh] space-y-4">
        {messages.map((message) => (
          <div key={message.id} className={`flex ${message.isCurrentUser ? "justify-end" : "justify-start"}`}>
            <div
              className={`max-w-[80%] p-3 rounded-xl ${
                message.isCurrentUser
                  ? theme === "dark"
                    ? "bg-sc-yellow/20 text-foreground"
                    : "bg-sc-yellow/20 text-foreground"
                  : theme === "dark"
                    ? "bg-muted/50 text-foreground"
                    : "bg-muted/50 text-foreground"
              } relative group`}
            >
              {!message.isCurrentUser && (
                <p className="text-xs font-medium mb-1 flex items-center gap-1">
                  <User size={12} /> {message.sender}
                </p>
              )}

{message.isVoice && message.audioUrl ? (
                <div className="my-1">
                  <audio src={message.audioUrl} controls className="w-full max-w-[200px]" />
                </div>
              ) : (
                <p className="text-sm break-words">{message.content}</p>
              )}

<p className="text-xs text-muted-foreground mt-1 text-right">{message.time}</p>

{/* Delete message button (only for user's messages) */}
              {message.isCurrentUser && (
                <button
                  onClick={() => handleDeleteMessage(message.id)}
                  className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity"
                >
                  <Trash2 size={16} className="text-muted-foreground hover:text-destructive" />
                </button>
              )}
            </div>
          </div>
        ))}

{/* Recording indicator */}
        {isRecording && (
          <div className="flex justify-center">
            <div className="bg-destructive/20 text-destructive px-4 py-1 rounded-full text-sm flex items-center animate-pulse">
              <span className="mr-2 w-2 h-2 bg-destructive rounded-full"></span>
              Recording... {recordingTime}s
            </div>
          </div>
        )}
      </div>

{/* Message Input */}
      <div className="p-4 border-t border-border">
        <form onSubmit={handleSendMessage} className="flex space-x-2">
          <Textarea
            placeholder="Type your message..."
            value={newMessage}
            onChange={(e) => setNewMessage(e.target.value)}
            className="min-h-[60px] resize-none flex-grow"
            disabled={isRecording}
          />
          <div className="flex flex-col gap-2 justify-end">
            {isRecording ? (
              <NeumoButton type="button" variant="destructive" onClick={stopRecording} className="animate-pulse">
                <MicOff size={18} />
              </NeumoButton>
            ) : (
              <NeumoButton type="button" variant="secondary" onClick={startRecording}>
                <Mic size={18} />
              </NeumoButton>
            )}
            <NeumoButton type="submit" variant="primary" disabled={isRecording || !newMessage.trim()}>
              <Send size={18} />
            </NeumoButton>
          </div>
        </form>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/community/no-groups-found.tsx"
"use client"
import { useTheme } from "@/contexts/theme-context"
import { NeumoButton } from "@/components/ui/neumo-button"
import { Search } from "lucide-react"

interface NoGroupsFoundProps {
  onChangeFilters: () => void
}

export const NoGroupsFound = ({ onChangeFilters }: NoGroupsFoundProps) => {
  const { theme } = useTheme()

return (
    <div
      className={`p-8 rounded-2xl h-full flex flex-col items-center justify-center transition-all ${
        theme === "dark" ? "bg-card/30 shadow-neumo-sm-dark" : "bg-card/30 shadow-neumo-sm"
      }`}
    >
      <Search size={64} className="text-muted-foreground opacity-30 mb-6" />
      <h3 className="text-2xl font-semibold mb-4">No Groups Found</h3>
      <p className="text-muted-foreground text-center max-w-md mb-8">
        No groups match your current preferences. Try different filters to find active study groups.
      </p>
      <NeumoButton onClick={onChangeFilters} variant="primary">
        Change Filters
      </NeumoButton>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/community/test.tsx" isMoved="true"
// Create a fresh page.tsx with minimal code
"use client";

export default function CommunityPage() {
  return <div>Community Page</div>;
}
[V0_FILE]typescriptreact:file="components/navigation/footer.tsx" isQuickEdit="true"
"use client"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { Mail, Phone, MapPin } from "lucide-react"

interface FooterLink {
  label: string
  path: string
}

interface FooterSection {
  title: string
  links: FooterLink[]
}

const footerSections: FooterSection[] = [
  {
    title: "Platform",
    links: [
      { label: "Home", path: "/" },
      { label: "Tutors", path: "/tutors" },
      { label: "Tasks", path: "/tasks" },
      { label: "Community", path: "/community" },
      { label: "Resources", path: "/resources" },
    ],
  },
  {
    title: "Resources",
    links: [
      { label: "Study Materials", path: "/resources" },
      { label: "Blog", path: "/blog" },
      { label: "Shorts", path: "/shorts" },
      { label: "Applications", path: "/applications" },
      { label: "FAQ", path: "/faq" },
    ],
  },
  {
    title: "Legal",
    links: [
      { label: "Terms", path: "/terms" },
      { label: "Privacy", path: "/privacy" },
      { label: "Cookies", path: "/cookies" },
      { label: "Licenses", path: "/licenses" },
      { label: "Contact", path: "/contact" },
    ],
  },
]

export const Footer = () => {
  const router = useRouter()

const handleNavigation = (path: string) => {
    // Use router for client-side routing
    router.push(path)

// Scroll to top when navigating
    window.scrollTo(0, 0)
  }

return (
    <footer className="bg-background border-t border-border mt-20">
      <div className="container mx-auto px-4 py-12">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {/* Brand Column */}
          <div className="space-y-4">
            <Link href="/" className="inline-block">
              <span className="text-2xl font-bold text-gradient">StudentConnect</span>
            </Link>
            <p className="text-muted-foreground">
              Connecting students with tutors and resources for a brighter future.
            </p>
            <div className="flex flex-col space-y-2 text-sm text-muted-foreground">
              <a
                href="mailto:contact@studentconnect.com"
                className="flex items-center hover:text-foreground transition-colors"
              >
                <Mail size={16} className="mr-2 text-sc-yellow" /> contact@studentconnect.com
              </a>
              <a href="tel:+123456789" className="flex items-center hover:text-foreground transition-colors">
                <Phone size={16} className="mr-2 text-sc-yellow" /> +1 (234) 567-89
              </a>
              <span className="flex items-center">
                <MapPin size={16} className="mr-2 text-sc-yellow" /> Learning Avenue, Edu City
              </span>
            </div>
          </div>

{/* Link Columns */}
          {footerSections.map((section) => (
            <div key={section.title} className="space-y-4">
              <h3 className="text-lg font-semibold">{section.title}</h3>
              <ul className="space-y-2">
                {section.links.map((link) => (
                  <li key={link.label}>
                    <Link
                      href={link.path}
                      className="text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
                      onClick={() => window.scrollTo(0, 0)}
                    >
                      {link.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

{/* Bottom Section */}
        <div className="border-t border-border mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
          <p className="text-sm text-muted-foreground">
            © {new Date().getFullYear()} StudentConnect. All rights reserved.
          </p>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="app/tasks/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/tutors/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { Header } from "@/components/navigation/header"
import { Footer } from "@/components/navigation/footer"
import { NeumoButton } from "@/components/ui/neumo-button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Search, Plus, Book, Star, MapPin, DollarSign, Trash2, Clock } from "lucide-react"
import { toast } from "sonner"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/auth-context"
import { useTheme } from "@/contexts/theme-context"
import { NotificationBell } from "@/components/notifications/notification-bell"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogClose,
} from "@/components/ui/dialog"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"

// Mock tutors data
const mockTutors = [
  {
    id: "1",
    name: "Dr. Sarah Johnson",
    profileImage: "/placeholder.svg?height=200&width=300",
    mode: "Online",
    rating: "4.9",
    experience: "8 years",
    subjects: ["Mathematics", "Physics", "Computer Science"],
    location: "Mumbai, Maharashtra",
    feeRange: "₹500-1000/hr",
    state: "Maharashtra",
    district: "Mumbai",
    pincode: "400001",
  },
  {
    id: "2",
    name: "Prof. Rajesh Kumar",
    profileImage: "/placeholder.svg?height=200&width=300",
    mode: "Offline",
    rating: "4.7",
    experience: "12 years",
    subjects: ["Chemistry", "Biology", "Environmental Science"],
    location: "Delhi, New Delhi",
    feeRange: "₹600-1200/hr",
    state: "Delhi",
    district: "New Delhi",
    pincode: "110001",
  },
  {
    id: "3",
    name: "Ms. Priya Sharma",
    profileImage: "/placeholder.svg?height=200&width=300",
    mode: "Both",
    rating: "4.8",
    experience: "5 years",
    subjects: ["English", "History", "Political Science"],
    location: "Bangalore, Karnataka",
    feeRange: "₹450-900/hr",
    state: "Karnataka",
    district: "Bangalore",
    pincode: "560001",
  },
  {
    id: "4",
    name: "Mr. Anand Patel",
    profileImage: "/placeholder.svg?height=200&width=300",
    mode: "Online",
    rating: "4.6",
    experience: "7 years",
    subjects: ["Economics", "Business Studies", "Accountancy"],
    location: "Chennai, Tamil Nadu",
    feeRange: "₹550-1100/hr",
    state: "Tamil Nadu",
    district: "Chennai",
    pincode: "600001",
  },
  {
    id: "5",
    name: "Dr. Meera Gupta",
    profileImage: "/placeholder.svg?height=200&width=300",
    mode: "Offline",
    rating: "4.9",
    experience: "10 years",
    subjects: ["Mathematics", "Statistics", "Data Science"],
    location: "Hyderabad, Telangana",
    feeRange: "₹700-1400/hr",
    state: "Telangana",
    district: "Hyderabad",
    pincode: "500001",
  },
  {
    id: "6",
    name: "Prof. Vikram Singh",
    profileImage: "/placeholder.svg?height=200&width=300",
    mode: "Both",
    rating: "4.8",
    experience: "15 years",
    subjects: ["Physics", "Engineering", "Computer Science"],
    location: "Pune, Maharashtra",
    feeRange: "₹800-1600/hr",
    state: "Maharashtra",
    district: "Pune",
    pincode: "411001",
  },
]

// Interface for tutor applications
interface TutorApplication {
  id: string
  tutorId: string
  tutorName: string
  appliedDate: Date
  status: "pending" | "approved" | "rejected"
  message: string
}

export default function TutorsPage() {
  const { theme } = useTheme()
  const { isAuthenticated, user } = useAuth()
  const router = useRouter()

// State for tutors
  const [tutors, setTutors] = useState(mockTutors)
  const [filteredTutors, setFilteredTutors] = useState(mockTutors)
  const [isLoadingTutors, setIsLoadingTutors] = useState(false)

// Filter state
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedSubject, setSelectedSubject] = useState<string | null>(null)
  const [selectedMode, setSelectedMode] = useState<string | null>(null)
  const [selectedState, setSelectedState] = useState("")
  const [selectedDistrict, setSelectedDistrict] = useState("")
  const [selectedPincode, setSelectedPincode] = useState("")

// Application state
  const [applications, setApplications] = useState<TutorApplication[]>([])
  const [isApplying, setIsApplying] = useState(false)
  const [applicationMessage, setApplicationMessage] = useState("")
  const [currentTutor, setCurrentTutor] = useState<any>(null)
  const [isApplicationDialogOpen, setIsApplicationDialogOpen] = useState(false)
  const [isMyApplicationsOpen, setIsMyApplicationsOpen] = useState(false)
  const [isWithdrawingApplication, setIsWithdrawingApplication] = useState(false)

// Apply filters when they change
  useEffect(() => {
    applyFilters()
  }, [searchQuery, selectedSubject, selectedMode, selectedState, selectedDistrict, selectedPincode])

// Apply all filters to tutors
  const applyFilters = () => {
    let result = [...tutors]

// Apply search query filter
    if (searchQuery) {
      const query = searchQuery.toLowerCase()
      result = result.filter(
        (tutor) =>
          tutor.name.toLowerCase().includes(query) || tutor.subjects.some((exp) => exp.toLowerCase().includes(query)),
      )
    }

// Apply subject filter
    if (selectedSubject) {
      result = result.filter((tutor) => tutor.subjects.includes(selectedSubject))
    }

// Apply mode filter
    if (selectedMode) {
      result = result.filter(
        (tutor) => tutor.mode.toLowerCase() === selectedMode.toLowerCase() || tutor.mode.toLowerCase() === "both",
      )
    }

// Apply location filters
    if (selectedState) {
      result = result.filter((tutor) => tutor.state.toLowerCase() === selectedState.toLowerCase())
    }

if (selectedDistrict) {
      result = result.filter((tutor) => tutor.district.toLowerCase() === selectedDistrict.toLowerCase())
    }

if (selectedPincode) {
      result = result.filter((tutor) => tutor.pincode === selectedPincode)
    }

setFilteredTutors(result)
  }

// Handle searching
  const handleSearch = () => {
    applyFilters()
    toast.success(`Found ${filteredTutors.length} tutors matching your criteria`)
  }

// Handle viewing tutor profile
  const handleViewProfile = (tutorId: string) => {
    // In a real app, you'd navigate to the tutor's profile page
    router.push(`/tutors/${tutorId}`)
  }

// Handle applying for a tutor
  const handleApplyNow = (tutor: any) => {
    if (!isAuthenticated) {
      toast.error("Please login to apply for this tutor")
      router.push("/login")
      return
    }

setCurrentTutor(tutor)
    setApplicationMessage("")
    setIsApplicationDialogOpen(true)
  }

// Submit application
  const submitApplication = () => {
    if (!currentTutor) return

// Check if already applied
    const alreadyApplied = applications.some((app) => app.tutorId === currentTutor.id)
    if (alreadyApplied) {
      toast.error("You have already applied for this tutor")
      setIsApplicationDialogOpen(false)
      return
    }

setIsApplying(true)

// Simulate API call
    setTimeout(() => {
      const newApplication: TutorApplication = {
        id: `app-${Date.now()}`,
        tutorId: currentTutor.id,
        tutorName: currentTutor.name,
        appliedDate: new Date(),
        status: "pending",
        message: applicationMessage,
      }

setApplications((prev) => [...prev, newApplication])
      setIsApplying(false)
      setIsApplicationDialogOpen(false)
      toast.success("Application submitted successfully!")
    }, 1000)
  }

// Handle withdrawing application
  const handleWithdrawApplication = (applicationId: string) => {
    setIsWithdrawingApplication(true)

// Simulate API call
    setTimeout(() => {
      setApplications((prev) => prev.filter((app) => app.id !== applicationId))
      setIsWithdrawingApplication(false)
      toast.success("Application withdrawn successfully")
    }, 1000)
  }

// Handle requesting a tutor
  const handleGenericRequestClick = () => {
    if (!isAuthenticated) {
      toast.error("Please login to request a tutor")
      router.push("/login")
      return
    }

toast.success("Opening tutor request form...")
    // In a real app, you'd open a modal or navigate to a form
  }

// Handle viewing applications
  const handleViewApplications = () => {
    if (!isAuthenticated) {
      toast.error("Please login to view your applications")
      router.push("/login")
      return
    }

setIsMyApplicationsOpen(true)
  }

// Format date
  const formatDate = (date: Date) => {
    return new Intl.DateTimeFormat("en-US", {
      year: "numeric",
      month: "short",
      day: "numeric",
    }).format(date)
  }

return (
    <div className="min-h-screen flex flex-col">
      <Header />
      <main className="flex-grow container mx-auto px-4 py-16 mt-16">
        <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-10">
          <div>
            <h1 className="text-3xl font-bold text-gradient mb-2">Find Your Perfect Tutor</h1>
            <p className="text-muted-foreground max-w-xl">
              Connect with qualified tutors who can help you excel in your studies
            </p>
          </div>
          <div className="flex items-center space-x-4 mt-4 md:mt-0">
            <div className="relative">
              <NotificationBell />
            </div>
            <NeumoButton
              variant="outline"
              size="sm"
              className="transition-all duration-300 hover:scale-105"
              onClick={handleViewApplications}
            >
              <Book className="mr-2 h-4 w-4" />
              My Applications
            </NeumoButton>
            <NeumoButton
              variant="primary"
              className="transition-all duration-300 hover:scale-105"
              onClick={handleGenericRequestClick}
            >
              <Plus className="mr-2 h-4 w-4" />
              Request Tutor
            </NeumoButton>
          </div>
        </div>

{/* Search & Filter */}
        <div
          className={`p-6 rounded-xl mb-8 ${
            theme === "dark"
              ? "bg-card/80 backdrop-blur-sm border border-border shadow-neumo-sm-dark"
              : "bg-card/80 backdrop-blur-sm border border-border shadow-neumo-sm"
          }`}
        >
          <div className="grid grid-cols-1 gap-4">
            {/* First row */}
            <div className="flex flex-col md:flex-row gap-4">
              <div className="relative flex-1">
                <Input
                  type="text"
                  placeholder="Search by subject, name, or keyword"
                  className="pl-10"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
              </div>

<div className="flex flex-col md:flex-row gap-2 md:w-1/2">
                <div className="flex-1">
                  <Select onValueChange={(value) => setSelectedSubject(value)}>
                    <SelectTrigger className="w-full">
                      <SelectValue placeholder="Filter by subject" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="Mathematics">Mathematics</SelectItem>
                      <SelectItem value="Physics">Physics</SelectItem>
                      <SelectItem value="Chemistry">Chemistry</SelectItem>
                      <SelectItem value="Biology">Biology</SelectItem>
                      <SelectItem value="English">English</SelectItem>
                      <SelectItem value="Computer Science">Computer Science</SelectItem>
                      <SelectItem value="Economics">Economics</SelectItem>
                      <SelectItem value="History">History</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="flex-1">
                  <Select onValueChange={(value) => setSelectedMode(value)}>
                    <SelectTrigger className="w-full">
                      <SelectValue placeholder="Teaching mode" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="online">Online</SelectItem>
                      <SelectItem value="offline">Offline</SelectItem>
                      <SelectItem value="both">Both</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </div>

{/* Second row - Location Fields */}
            <div className="flex flex-col md:flex-row gap-4">
              <div className="flex-1">
                <Input
                  type="text"
                  placeholder="State"
                  value={selectedState}
                  onChange={(e) => setSelectedState(e.target.value)}
                />
              </div>
              <div className="flex-1">
                <Input
                  type="text"
                  placeholder="District"
                  value={selectedDistrict}
                  onChange={(e) => setSelectedDistrict(e.target.value)}
                />
              </div>
              <div className="flex-1">
                <Input
                  type="text"
                  placeholder="Pincode"
                  value={selectedPincode}
                  onChange={(e) => setSelectedPincode(e.target.value)}
                />
              </div>
              <div className="md:w-40">
                <NeumoButton
                  variant="primary"
                  className="w-full justify-center transition-all duration-300 hover:scale-105"
                  onClick={handleSearch}
                >
                  <Search className="mr-2 h-4 w-4" />
                  Search Now
                </NeumoButton>
              </div>
            </div>
          </div>
        </div>

{/* Tutors Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {isLoadingTutors ? (
            // Loading skeletons
            [...Array(6)].map((_, index) => (
              <div
                key={index}
                className={`p-6 rounded-xl h-48 animate-pulse ${
                  theme === "dark" ? "bg-card/50 border border-border" : "bg-card/50 border border-border"
                }`}
              ></div>
            ))
          ) : filteredTutors.length > 0 ? (
            // Display tutors
            filteredTutors.map((tutor) => (
              <div
                key={tutor.id}
                className={`rounded-xl overflow-hidden transition-all duration-300 hover:scale-[1.02] hover:shadow-lg ${
                  theme === "dark"
                    ? "bg-card/80 backdrop-blur-sm border border-border shadow-neumo-sm-dark"
                    : "bg-card/80 backdrop-blur-sm border border-border shadow-neumo-sm"
                }`}
              >
                <div className="aspect-w-16 aspect-h-9 relative">
                  <img
                    src={tutor.profileImage || "/placeholder.svg"}
                    alt={tutor.name}
                    className="w-full h-48 object-cover"
                  />
                  <div className="absolute top-2 right-2 bg-primary/90 text-white px-2 py-1 rounded-full text-xs">
                    {tutor.mode}
                  </div>
                </div>

<div className="p-4">
                  <div className="flex justify-between items-start mb-2">
                    <h3 className="font-medium text-lg">{tutor.name}</h3>
                    <div className="flex items-center bg-primary/10 px-2 py-1 rounded-full">
                      <Star className="h-3 w-3 text-yellow-500 mr-1" />
                      <span className="text-xs">{tutor.rating}</span>
                    </div>
                  </div>

<div className="text-sm text-muted-foreground mb-2">Experience: {tutor.experience}</div>

<div className="flex flex-wrap gap-1 mb-3">
                    {tutor.subjects.slice(0, 3).map((subject, idx) => (
                      <span key={idx} className="text-xs px-2 py-1 rounded-full bg-primary/10">
                        {subject}
                      </span>
                    ))}
                  </div>

<div className="flex items-center justify-between text-sm text-muted-foreground mb-4">
                    <div className="flex items-center">
                      <MapPin className="h-3 w-3 mr-1" />
                      {tutor.location}
                    </div>
                    <div className="flex items-center">
                      <DollarSign className="h-3 w-3 mr-1" />
                      {tutor.feeRange}
                    </div>
                  </div>

<div className="mt-4 grid grid-cols-2 gap-2">
                    <NeumoButton
                      variant="outline"
                      size="sm"
                      className="justify-center transition-all duration-300 hover:scale-105"
                      onClick={() => handleViewProfile(tutor.id)}
                    >
                      View Profile
                    </NeumoButton>
                    <NeumoButton
                      variant="primary"
                      size="sm"
                      className="justify-center transition-all duration-300 hover:scale-105"
                      onClick={() => handleApplyNow(tutor)}
                      disabled={applications.some((app) => app.tutorId === tutor.id)}
                    >
                      {applications.some((app) => app.tutorId === tutor.id) ? "Applied" : "Apply Now"}
                    </NeumoButton>
                  </div>
                </div>
              </div>
            ))
          ) : (
            // No results
            <div className="col-span-full text-center py-12">
              <p className="text-muted-foreground">No tutors found matching your criteria</p>
              <button
                className="text-sc-yellow hover:underline mt-2"
                onClick={() => {
                  setSearchQuery("")
                  setSelectedSubject(null)
                  setSelectedMode(null)
                  setSelectedState("")
                  setSelectedDistrict("")
                  setSelectedPincode("")
                }}
              >
                Clear filters
              </button>
            </div>
          )}
        </div>
      </main>
      <Footer />

{/* Application Dialog */}
      <Dialog open={isApplicationDialogOpen} onOpenChange={setIsApplicationDialogOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Apply for Tutor</DialogTitle>
            <DialogDescription>
              Send a message to {currentTutor?.name} explaining why you want to connect with them.
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Textarea
                placeholder="Introduce yourself and explain what you're looking to learn..."
                value={applicationMessage}
                onChange={(e) => setApplicationMessage(e.target.value)}
                rows={5}
                className="resize-none"
              />
            </div>
          </div>
          <div className="flex justify-end gap-2">
            <DialogClose asChild>
              <NeumoButton variant="outline" size="sm">
                Cancel
              </NeumoButton>
            </DialogClose>
            <NeumoButton
              variant="primary"
              size="sm"
              onClick={submitApplication}
              disabled={isApplying || !applicationMessage.trim()}
            >
              {isApplying ? "Submitting..." : "Submit Application"}
            </NeumoButton>
          </div>
        </DialogContent>
      </Dialog>

{/* My Applications Dialog */}
      <Dialog open={isMyApplicationsOpen} onOpenChange={setIsMyApplicationsOpen}>
        <DialogContent className="sm:max-w-[600px] max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>My Tutor Applications</DialogTitle>
            <DialogDescription>View and manage your tutor applications</DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-4">
            {applications.length === 0 ? (
              <div className="text-center py-8">
                <p className="text-muted-foreground">You haven't applied to any tutors yet.</p>
              </div>
            ) : (
              applications.map((application) => (
                <div
                  key={application.id}
                  className={`p-4 rounded-lg border ${
                    theme === "dark" ? "bg-card/50 border-border" : "bg-card/50 border-border"
                  }`}
                >
                  <div className="flex justify-between items-start">
                    <div>
                      <h3 className="font-medium">{application.tutorName}</h3>
                      <p className="text-sm text-muted-foreground flex items-center">
                        <Clock className="h-3 w-3 mr-1" />
                        Applied on {formatDate(application.appliedDate)}
                      </p>
                    </div>
                    <Badge
                      className={`${
                        application.status === "pending"
                          ? "bg-yellow-500/20 text-yellow-500 hover:bg-yellow-500/20"
                          : application.status === "approved"
                            ? "bg-green-500/20 text-green-500 hover:bg-green-500/20"
                            : "bg-red-500/20 text-red-500 hover:bg-red-500/20"
                      }`}
                    >
                      {application.status.charAt(0).toUpperCase() + application.status.slice(1)}
                    </Badge>
                  </div>
                  {application.message && (
                    <div className="mt-2 text-sm">
                      <p className="line-clamp-2">{application.message}</p>
                    </div>
                  )}
                  <div className="mt-4 flex justify-end">
                    <AlertDialog>
                      <AlertDialogTrigger asChild>
                        <NeumoButton variant="destructive" size="sm">
                          <Trash2 className="h-4 w-4 mr-1" />
                          Withdraw
                        </NeumoButton>
                      </AlertDialogTrigger>
                      <AlertDialogContent>
                        <AlertDialogHeader>
                          <AlertDialogTitle>Withdraw Application</AlertDialogTitle>
                          <AlertDialogDescription>
                            Are you sure you want to withdraw your application to {application.tutorName}? This action
                            cannot be undone.
                          </AlertDialogDescription>
                        </AlertDialogHeader>
                        <AlertDialogFooter>
                          <AlertDialogCancel>Cancel</AlertDialogCancel>
                          <AlertDialogAction
                            onClick={() => handleWithdrawApplication(application.id)}
                            disabled={isWithdrawingApplication}
                            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                          >
                            {isWithdrawingApplication ? "Withdrawing..." : "Withdraw Application"}
                          </AlertDialogAction>
                        </AlertDialogFooter>
                      </AlertDialogContent>
                    </AlertDialog>
                  </div>
                </div>
              ))
            )}
          </div>
          <div className="flex justify-end">
            <DialogClose asChild>
              <NeumoButton variant="outline" size="sm">
                Close
              </NeumoButton>
            </DialogClose>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tasks/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { Header } from "@/components/navigation/header"
import { Footer } from "@/components/navigation/footer"
import { NeumoButton } from "@/components/ui/neumo-button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Search, Plus, Book, Clock, MapPin, DollarSign, Trash2 } from "lucide-react"
import { toast } from "sonner"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/auth-context"
import { useTheme } from "@/contexts/theme-context"
import { NotificationBell } from "@/components/notifications/notification-bell"
import { mockTasks } from "@/data/mock-tasks"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogClose,
} from "@/components/ui/dialog"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"

// Interface for task applications
interface TaskApplication {
  id: string
  taskId: string
  taskTitle: string
  appliedDate: Date
  status: "pending" | "approved" | "rejected"
  coverLetter: string
}

// Auth notice component for non-authenticated users
const AuthNotice = () => {
  const router = useRouter()

return (
    <div className="bg-primary/5 border border-primary/20 rounded-lg p-6 text-center my-8">
      <h3 className="text-xl font-semibold mb-2">Sign in to apply for tasks</h3>
      <p className="text-muted-foreground mb-4">
        Create an account or sign in to apply for tasks and connect with students.
      </p>
      <div className="flex justify-center gap-4">
        <NeumoButton variant="outline" onClick={() => router.push("/login")}>
          Log in
        </NeumoButton>
        <NeumoButton variant="primary" onClick={() => router.push("/signup")}>
          Sign up
        </NeumoButton>
      </div>
    </div>
  )
}

export default function TasksPage() {
  const { theme } = useTheme()
  const { isAuthenticated, user } = useAuth()
  const router = useRouter()

// State for tasks
  const [tasks, setTasks] = useState(mockTasks)
  const [filteredTasks, setFilteredTasks] = useState(mockTasks)
  const [isLoadingTasks, setIsLoadingTasks] = useState(false)

// Filter state
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedSubject, setSelectedSubject] = useState<string | null>(null)
  const [selectedBudget, setSelectedBudget] = useState<string | null>(null)
  const [selectedLocation, setSelectedLocation] = useState<string | null>(null)

// Application state
  const [applications, setApplications] = useState<TaskApplication[]>([])
  const [isApplying, setIsApplying] = useState(false)
  const [coverLetter, setCoverLetter] = useState("")
  const [currentTask, setCurrentTask] = useState<any>(null)
  const [isApplicationDialogOpen, setIsApplicationDialogOpen] = useState(false)
  const [isMyApplicationsOpen, setIsMyApplicationsOpen] = useState(false)
  const [isWithdrawingApplication, setIsWithdrawingApplication] = useState(false)

// Apply filters when they change
  useEffect(() => {
    applyFilters()
  }, [searchQuery, selectedSubject, selectedBudget, selectedLocation])

// Apply all filters to tasks
  const applyFilters = () => {
    let result = [...tasks]

// Apply search query filter
    if (searchQuery) {
      const query = searchQuery.toLowerCase()
      result = result.filter(
        (task) =>
          task.title.toLowerCase().includes(query) ||
          task.description.toLowerCase().includes(query) ||
          task.subject.toLowerCase().includes(query),
      )
    }

// Apply subject filter
    if (selectedSubject) {
      result = result.filter((task) => task.subject === selectedSubject)
    }

// Apply budget filter
    if (selectedBudget) {
      const [min, max] = selectedBudget.split("-").map(Number)
      result = result.filter((task) => {
        const budget = Number.parseInt(task.budget.replace(/[^\d]/g, ""))
        return budget >= min && budget <= max
      })
    }

// Apply location filter
    if (selectedLocation) {
      result = result.filter((task) => task.location === selectedLocation)
    }

setFilteredTasks(result)
  }

// Handle searching
  const handleSearch = () => {
    applyFilters()
    toast.success(`Found ${filteredTasks.length} tasks matching your criteria`)
  }

// Handle viewing task details
  const handleViewTask = (taskId: string) => {
    router.push(`/tasks/${taskId}`)
  }

// Handle applying for a task
  const handleApplyNow = (task: any) => {
    if (!isAuthenticated) {
      toast.error("Please login to apply for this task")
      router.push("/login")
      return
    }

setCurrentTask(task)
    setCoverLetter("")
    setIsApplicationDialogOpen(true)
  }

// Submit application
  const submitApplication = () => {
    if (!currentTask) return

// Check if already applied
    const alreadyApplied = applications.some((app) => app.taskId === currentTask.id)
    if (alreadyApplied) {
      toast.error("You have already applied for this task")
      setIsApplicationDialogOpen(false)
      return
    }

setIsApplying(true)

// Simulate API call
    setTimeout(() => {
      const newApplication: TaskApplication = {
        id: `app-${Date.now()}`,
        taskId: currentTask.id,
        taskTitle: currentTask.title,
        appliedDate: new Date(),
        status: "pending",
        coverLetter: coverLetter,
      }

setApplications((prev) => [...prev, newApplication])
      setIsApplying(false)
      setIsApplicationDialogOpen(false)
      toast.success("Application submitted successfully!")
    }, 1000)
  }

// Handle withdrawing application
  const handleWithdrawApplication = (applicationId: string) => {
    setIsWithdrawingApplication(true)

// Handle posting a new task
  const handlePostTask = () => {
    if (!isAuthenticated) {
      toast.error("Please login to post a task")
      router.push("/login")
      return
    }

router.push("/tasks/create")
  }

setIsMyApplicationsOpen(true)
  }

// Format date
  const formatDate = (date: Date) => {
    return new Intl.DateTimeFormat("en-US", {
      year: "numeric",
      month: "short",
      day: "numeric",
    }).format(date)
  }

return (
    <div className="min-h-screen flex flex-col">
      <Header />
      <main className="flex-grow container mx-auto px-4 py-16 mt-16">
        <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-10">
          <div>
            <h1 className="text-3xl font-bold text-gradient mb-2">Task Marketplace</h1>
            <p className="text-muted-foreground max-w-xl">
              Find tasks posted by students or post your own task to get help
            </p>
          </div>
          <div className="flex items-center space-x-4 mt-4 md:mt-0">
            <div className="relative">
              <NotificationBell />
            </div>
            <NeumoButton
              variant="outline"
              size="sm"
              className="transition-all duration-300 hover:scale-105"
              onClick={handleViewApplications}
            >
              <Book className="mr-2 h-4 w-4" />
              My Applications
            </NeumoButton>
            <NeumoButton
              variant="primary"
              className="transition-all duration-300 hover:scale-105"
              onClick={handlePostTask}
            >
              <Plus className="mr-2 h-4 w-4" />
              Post Task
            </NeumoButton>
          </div>
        </div>

{/* Search & Filter */}
        <div
          className={`p-6 rounded-xl mb-8 ${
            theme === "dark"
              ? "bg-card/80 backdrop-blur-sm border border-border shadow-neumo-sm-dark"
              : "bg-card/80 backdrop-blur-sm border border-border shadow-neumo-sm"
          }`}
        >
          <div className="grid grid-cols-1 gap-4">
            {/* First row */}
            <div className="flex flex-col md:flex-row gap-4">
              <div className="relative flex-1">
                <Input
                  type="text"
                  placeholder="Search by title, description, or keyword"
                  className="pl-10"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
              </div>

<div className="flex flex-col md:flex-row gap-2 md:w-1/2">
                <div className="flex-1">
                  <Select onValueChange={(value) => setSelectedSubject(value)}>
                    <SelectTrigger className="w-full">
                      <SelectValue placeholder="Filter by subject" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="Mathematics">Mathematics</SelectItem>
                      <SelectItem value="Physics">Physics</SelectItem>
                      <SelectItem value="Chemistry">Chemistry</SelectItem>
                      <SelectItem value="Biology">Biology</SelectItem>
                      <SelectItem value="English">English</SelectItem>
                      <SelectItem value="Computer Science">Computer Science</SelectItem>
                      <SelectItem value="Economics">Economics</SelectItem>
                      <SelectItem value="History">History</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="flex-1">
                  <Select onValueChange={(value) => setSelectedBudget(value)}>
                    <SelectTrigger className="w-full">
                      <SelectValue placeholder="Budget range" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="0-500">₹0 - ₹500</SelectItem>
                      <SelectItem value="500-1000">₹500 - ₹1000</SelectItem>
                      <SelectItem value="1000-2000">₹1000 - ₹2000</SelectItem>
                      <SelectItem value="2000-5000">₹2000 - ₹5000</SelectItem>
                      <SelectItem value="5000-10000">₹5000+</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </div>

{/* Second row */}
            <div className="flex flex-col md:flex-row gap-4">
              <div className="flex-1">
                <Select onValueChange={(value) => setSelectedLocation(value)}>
                  <SelectTrigger className="w-full">
                    <SelectValue placeholder="Location" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Mumbai">Mumbai</SelectItem>
                    <SelectItem value="Delhi">Delhi</SelectItem>
                    <SelectItem value="Bangalore">Bangalore</SelectItem>
                    <SelectItem value="Chennai">Chennai</SelectItem>
                    <SelectItem value="Hyderabad">Hyderabad</SelectItem>
                    <SelectItem value="Pune">Pune</SelectItem>
                    <SelectItem value="Remote">Remote</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="md:w-40">
                <NeumoButton
                  variant="primary"
                  className="w-full justify-center transition-all duration-300 hover:scale-105"
                  onClick={handleSearch}
                >
                  <Search className="mr-2 h-4 w-4" />
                  Search Now
                </NeumoButton>
              </div>
            </div>
          </div>
        </div>

{/* Auth Notice for non-authenticated users */}
        {!isAuthenticated && <AuthNotice />}

{/* Tasks Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {isLoadingTasks ? (
            // Loading skeletons
            [...Array(6)].map((_, index) => (
              <div
                key={index}
                className={`p-6 rounded-xl h-48 animate-pulse ${
                  theme === "dark" ? "bg-card/50 border border-border" : "bg-card/50 border border-border"
                }`}
              ></div>
            ))
          ) : filteredTasks.length > 0 ? (
            // Display tasks
            filteredTasks.map((task) => (
              <div
                key={task.id}
                className={`rounded-xl overflow-hidden transition-all duration-300 hover:scale-[1.02] hover:shadow-lg ${
                  theme === "dark"
                    ? "bg-card/80 backdrop-blur-sm border border-border shadow-neumo-sm-dark"
                    : "bg-card/80 backdrop-blur-sm border border-border shadow-neumo-sm"
                }`}
              >
                <div className="p-6">
                  <div className="flex justify-between items-start mb-2">
                    <h3 className="font-medium text-lg line-clamp-1">{task.title}</h3>
                    <div className="flex items-center bg-primary/10 px-2 py-1 rounded-full">
                      <span className="text-xs">{task.subject}</span>
                    </div>
                  </div>

<div className="text-sm text-muted-foreground mb-4 line-clamp-3">{task.description}</div>

<div className="flex items-center justify-between text-sm text-muted-foreground mb-4">
                    <div className="flex items-center">
                      <MapPin className="h-3 w-3 mr-1" />
                      {task.location}
                    </div>
                    <div className="flex items-center">
                      <DollarSign className="h-3 w-3 mr-1" />
                      {task.budget}
                    </div>
                  </div>

<div className="flex items-center text-xs text-muted-foreground mb-4">
                    <Clock className="h-3 w-3 mr-1" />
                    <span>
                      Posted {task.postedDate} • Due {task.dueDate}
                    </span>
                  </div>

<div className="mt-4 grid grid-cols-2 gap-2">
                    <NeumoButton
                      variant="outline"
                      size="sm"
                      className="justify-center transition-all duration-300 hover:scale-105"
                      onClick={() => handleViewTask(task.id)}
                    >
                      View Details
                    </NeumoButton>
                    <NeumoButton
                      variant="primary"
                      size="sm"
                      className="justify-center transition-all duration-300 hover:scale-105"
                      onClick={() => handleApplyNow(task)}
                      disabled={!isAuthenticated || applications.some((app) => app.taskId === task.id)}
                    >
                      {applications.some((app) => app.taskId === task.id) ? "Applied" : "Apply Now"}
                    </NeumoButton>
                  </div>
                </div>
              </div>
            ))
          ) : (
            // No results
            <div className="col-span-full text-center py-12">
              <p className="text-muted-foreground">No tasks found matching your criteria</p>
              <button
                className="text-sc-yellow hover:underline mt-2"
                onClick={() => {
                  setSearchQuery("")
                  setSelectedSubject(null)
                  setSelectedBudget(null)
                  setSelectedLocation(null)
                }}
              >
                Clear filters
              </button>
            </div>
          )}
        </div>
      </main>
      <Footer />

{/* Application Dialog */}
      <Dialog open={isApplicationDialogOpen} onOpenChange={setIsApplicationDialogOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Apply for Task</DialogTitle>
            <DialogDescription>
              Send a cover letter explaining why you're the best fit for "{currentTask?.title}".
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Textarea
                placeholder="Describe your qualifications and why you're interested in this task..."
                value={coverLetter}
                onChange={(e) => setCoverLetter(e.target.value)}
                rows={5}
                className="resize-none"
              />
            </div>
          </div>
          <div className="flex justify-end gap-2">
            <DialogClose asChild>
              <NeumoButton variant="outline" size="sm">
                Cancel
              </NeumoButton>
            </DialogClose>
            <NeumoButton
              variant="primary"
              size="sm"
              onClick={submitApplication}
              disabled={isApplying || !coverLetter.trim()}
            >
              {isApplying ? "Submitting..." : "Submit Application"}
            </NeumoButton>
          </div>
        </DialogContent>
      </Dialog>

{/* My Applications Dialog */}
      <Dialog open={isMyApplicationsOpen} onOpenChange={setIsMyApplicationsOpen}>
        <DialogContent className="sm:max-w-[600px] max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>My Task Applications</DialogTitle>
            <DialogDescription>View and manage your task applications</DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-4">
            {applications.length === 0 ? (
              <div className="text-center py-8">
                <p className="text-muted-foreground">You haven't applied to any tasks yet.</p>
              </div>
            ) : (
              applications.map((application) => (
                <div
                  key={application.id}
                  className={`p-4 rounded-lg border ${
                    theme === "dark" ? "bg-card/50 border-border" : "bg-card/50 border-border"
                  }`}
                >
                  <div className="flex justify-between items-start">
                    <div>
                      <h3 className="font-medium">{application.taskTitle}</h3>
                      <p className="text-sm text-muted-foreground flex items-center">
                        <Clock className="h-3 w-3 mr-1" />
                        Applied on {formatDate(application.appliedDate)}
                      </p>
                    </div>
                    <Badge
                      className={`${
                        application.status === "pending"
                          ? "bg-yellow-500/20 text-yellow-500 hover:bg-yellow-500/20"
                          : application.status === "approved"
                            ? "bg-green-500/20 text-green-500 hover:bg-green-500/20"
                            : "bg-red-500/20 text-red-500 hover:bg-red-500/20"
                      }`}
                    >
                      {application.status.charAt(0).toUpperCase() + application.status.slice(1)}
                    </Badge>
                  </div>
                  {application.coverLetter && (
                    <div className="mt-2 text-sm">
                      <p className="line-clamp-2">{application.coverLetter}</p>
                    </div>
                  )}
                  <div className="mt-4 flex justify-end">
                    <AlertDialog>
                      <AlertDialogTrigger asChild>
                        <NeumoButton variant="destructive" size="sm">
                          <Trash2 className="h-4 w-4 mr-1" />
                          Withdraw
                        </NeumoButton>
                      </AlertDialogTrigger>
                      <AlertDialogContent>
                        <AlertDialogHeader>
                          <AlertDialogTitle>Withdraw Application</AlertDialogTitle>
                          <AlertDialogDescription>
                            Are you sure you want to withdraw your application for "{application.taskTitle}"? This
                            action cannot be undone.
                          </AlertDialogDescription>
                        </AlertDialogHeader>
                        <AlertDialogFooter>
                          <AlertDialogCancel>Cancel</AlertDialogCancel>
                          <AlertDialogAction
                            onClick={() => handleWithdrawApplication(application.id)}
                            disabled={isWithdrawingApplication}
                            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                          >
                            {isWithdrawingApplication ? "Withdrawing..." : "Withdraw Application"}
                          </AlertDialogAction>
                        </AlertDialogFooter>
                      </AlertDialogContent>
                    </AlertDialog>
                  </div>
                </div>
              ))
            )}
          </div>
          <div className="flex justify-end">
            <DialogClose asChild>
              <NeumoButton variant="outline" size="sm">
                Close
              </NeumoButton>
            </DialogClose>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/community/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { AnimatedSection } from "@/components/ui/animated-section"
import { useTheme } from "@/contexts/theme-context"
import { useToast } from "@/hooks/use-toast"
import { PurposeSelection, type PrepPurpose } from "@/components/community/purpose-selection"
import { GroupSelectionForm } from "@/components/community/group-selection-form"
import { GroupCardList } from "@/components/community/group-card-list"
import { GroupChat } from "@/components/community/group-chat"
import { NoGroupsFound } from "@/components/community/no-groups-found"
import { Header } from "@/components/navigation/header"
import { Footer } from "@/components/navigation/footer"
import { useAuth } from "@/contexts/auth-context"

// Types for community groups
export type GroupPreferences = {
  examType: string
  classLevel: string
  medium: string
}

export type GroupInfo = {
  id: string
  name: string
  members: number
  type: string
  newMessages: number
  description?: string
  tags?: string[]
  examType?: string
  classLevel?: string
  medium?: string
}

// Mock chat messages for initial state
const mockChatMessages = [
  {
    id: 1,
    sender: "Rahul",
    content: "Does anyone have the PDF for chapter 5?",
    time: "10:30 AM",
    isCurrentUser: false,
  },
  { id: 2, sender: "Priya", content: "I can share it, check your DM", time: "10:32 AM", isCurrentUser: false },
  {
    id: 3,
    sender: "You",
    content: "Thank you Priya! Could you also share the practice questions?",
    time: "10:35 AM",
    isCurrentUser: true,
  },
  {
    id: 4,
    sender: "Tutor Amit",
    content: "I've uploaded all practice questions in the resources section",
    time: "10:40 AM",
    isCurrentUser: false,
  },
  { id: 5, sender: "Neha", content: "When is the next live session?", time: "10:45 AM", isCurrentUser: false },
  {
    id: 6,
    sender: "Tutor Amit",
    content: "The next session is tomorrow at 6 PM, topic will be 'Advanced Integration'",
    time: "10:47 AM",
    isCurrentUser: false,
  },
  {
    id: 7,
    sender: "You",
    content: "Can we also cover some JEE problems in the session?",
    time: "10:50 AM",
    isCurrentUser: true,
  },
  {
    id: 8,
    sender: "Tutor Amit",
    content: "I'll include some JEE previous year questions too.",
    time: "10:55 AM",
    isCurrentUser: false,
  },
]

export default function Community() {
  const { theme } = useTheme()
  const { toast } = useToast()
  const { isAuthenticated } = useAuth()
  const [selectedPurpose, setSelectedPurpose] = useState<PrepPurpose | null>(null)
  const [hasSelectedPreferences, setHasSelectedPreferences] = useState(false)
  const [preferences, setPreferences] = useState<GroupPreferences | null>(null)
  const [availableGroups, setAvailableGroups] = useState<GroupInfo[]>([])
  const [selectedGroup, setSelectedGroup] = useState<string | null>(null)
  const [chatMessages, setChatMessages] = useState(mockChatMessages)
  const [newMessage, setNewMessage] = useState("")
  const [noGroupsFound, setNoGroupsFound] = useState(false)

// When preferences are set, filter/generate groups
  useEffect(() => {
    if (preferences) {
      // In a real app, this would be a Firebase or API call
      const filteredGroups = generateGroupsBasedOnPreferences(preferences)

if (filteredGroups.length === 0) {
        setNoGroupsFound(true)
      } else {
        setNoGroupsFound(false)
        setAvailableGroups(filteredGroups)
      }

setHasSelectedPreferences(true)
    }
  }, [preferences])

// Function to generate groups based on user preferences
  const generateGroupsBasedOnPreferences = (prefs: GroupPreferences): GroupInfo[] => {
    // This would be replaced by an API call in a real implementation
    const { examType, classLevel, medium } = prefs
    const exams = examType.split(",")

// Check if we should return an empty list to simulate "no matching groups"
    // This is a simplified logic - in a real app we would actually search a database

// Occasionally return no groups (20% chance) to demonstrate the no groups found feature
    const shouldShowNoGroups = Math.random() < 0.2
    if (shouldShowNoGroups) return []

const groups: GroupInfo[] = []

// Generate a group for each selected exam
    exams.forEach((exam) => {
      // Skip creating a group with CDS and class level, since CDS doesn't require class selection
      if (exam === "CDS" && classLevel) return

// Create a main group for the exam and medium
      const groupName = classLevel ? `${exam} | Class ${classLevel} | ${medium}` : `${exam} | ${medium}`

groups.push({
        id: `${exam}-${classLevel}-${medium}-main`.replace(/\s+/g, "-"),
        name: groupName,
        members: Math.floor(Math.random() * 500) + 50, // Random member count
        type: "exam",
        newMessages: Math.floor(Math.random() * 20),
        description: `Main group for ${exam} preparation ${classLevel ? `for Class ${classLevel} students` : ""} in ${medium} medium.`,
        tags: ["Official", "Active"],
        examType: exam,
        classLevel,
        medium,
      })

// 50% chance to add a secondary group for the same criteria
      if (Math.random() > 0.5) {
        groups.push({
          id: `${exam}-${classLevel}-${medium}-doubts`.replace(/\s+/g, "-"),
          name: `${exam} Doubts ${classLevel ? `| Class ${classLevel}` : ""}`,
          members: Math.floor(Math.random() * 300) + 30,
          type: "doubts",
          newMessages: Math.floor(Math.random() * 15),
          description: `Clear your doubts for ${exam} preparation in this group.`,
          tags: ["Doubts", "Q&A"],
          examType: exam,
          classLevel,
          medium,
        })
      }
    })

return groups
  }

const handlePurposeSelected = (purpose: PrepPurpose) => {
    setSelectedPurpose(purpose)
  }

const handleFormSubmit = (formData: GroupPreferences) => {
    setPreferences(formData)
  }

const handleJoinGroup = (groupId: string) => {
    if (!isAuthenticated) {
      toast({
        title: "Login Required",
        description: "⚠️ Please log in or sign up to join a group and access the chat.",
        variant: "destructive",
      })
      return
    }

setSelectedGroup(groupId)
    const groupName = availableGroups.find((g) => g.id === groupId)?.name || "Group"
    toast({
      title: "Group Joined",
      description: `You have successfully joined ${groupName}`,
      variant: "success",
    })
  }

const handleExitGroup = () => {
    toast({
      title: "Left Group",
      description: "You have left the group successfully",
      variant: "default",
    })
    setSelectedGroup(null)
  }

const handleBackToPurpose = () => {
    setSelectedPurpose(null)
    setPreferences(null)
    setHasSelectedPreferences(false)
    setAvailableGroups([])
    setSelectedGroup(null)
  }

const handleBackToForm = () => {
    setHasSelectedPreferences(false)
    setPreferences(null)
    setAvailableGroups([])
    setSelectedGroup(null)
    setNoGroupsFound(false)
  }

return (
    <>
      <Header />
      <section className="py-12 min-h-screen relative overflow-hidden">
        {/* Background Elements */}
        <div className="absolute top-20 right-0 w-72 h-72 bg-sc-yellow/10 rounded-full blur-3xl"></div>
        <div className="absolute bottom-20 left-0 w-80 h-80 bg-sc-orange/10 rounded-full blur-3xl"></div>

<div className="container mx-auto px-4 relative z-10 mt-20">
          <AnimatedSection className="text-center max-w-4xl mx-auto mb-8">
            <h1 className="text-4xl lg:text-5xl font-bold mb-6">
              Join Our <span className="text-gradient">Community</span>
            </h1>
            <p className="text-lg text-muted-foreground">
              Connect with students and educators in your area. Participate in discussions, attend local events, and
              grow your network.
            </p>
          </AnimatedSection>

{!selectedPurpose ? (
            <AnimatedSection animation="fade-in" className="max-w-2xl mx-auto">
              <PurposeSelection onPurposeSelected={handlePurposeSelected} />
            </AnimatedSection>
          ) : !hasSelectedPreferences ? (
            <AnimatedSection animation="fade-in" className="max-w-2xl mx-auto">
              <GroupSelectionForm
                onSubmit={handleFormSubmit}
                purpose={selectedPurpose}
                onBackClick={handleBackToPurpose}
              />
            </AnimatedSection>
          ) : (
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
              {/* Group Cards */}
              <AnimatedSection className="lg:col-span-1">
                {noGroupsFound ? (
                  <NoGroupsFound onChangeFilters={handleBackToForm} />
                ) : (
                  <GroupCardList
                    groups={availableGroups}
                    selectedGroupId={selectedGroup}
                    onJoinGroup={handleJoinGroup}
                    isLoggedIn={isAuthenticated}
                  />
                )}
              </AnimatedSection>

{/* Chat Section */}
              <AnimatedSection className="lg:col-span-2">
                {selectedGroup ? (
                  <GroupChat
                    groupId={selectedGroup}
                    groupName={availableGroups.find((g) => g.id === selectedGroup)?.name || "Group Chat"}
                    initialMessages={chatMessages}
                    onExitGroup={handleExitGroup}
                  />
                ) : (
                  <div
                    className={`rounded-2xl h-full flex flex-col items-center justify-center p-8 ${
                      theme === "dark" ? "bg-card/30 shadow-neumo-sm-dark" : "bg-card/30 shadow-neumo-sm"
                    }`}
                  >
                    <div className="text-center p-6">
                      <h3 className="text-2xl font-semibold mb-4">Select a Group to Join</h3>
                      <p className="text-muted-foreground mb-6">
                        Choose a group card from the list to connect with students and tutors with similar interests.
                      </p>
                      <div className="flex justify-center space-x-4">
                        <div className="animate-pulse bg-primary/20 rounded-xl p-4 w-16 h-16 flex items-center justify-center">
                          <span className="text-2xl">👥</span>
                        </div>
                        <div className="animate-pulse bg-primary/20 rounded-xl p-4 w-16 h-16 flex items-center justify-center">
                          <span className="text-2xl">📚</span>
                        </div>
                        <div className="animate-pulse bg-primary/20 rounded-xl p-4 w-16 h-16 flex items-center justify-center">
                          <span className="text-2xl">🎯</span>
                        </div>
                      </div>
                    </div>
                  </div>
                )}
              </AnimatedSection>
            </div>
          )}
        </div>
      </section>
      <Footer />
    </>
  )
}
[V0_FILE]typescriptreact:file="hooks/use-toast.ts" isFixed="true" isQuickEdit="true"
"use client"

// Inspired by react-hot-toast library
import type * as React from "react"
import { useToast as useToastOriginal } from "@/components/ui/use-toast"

import type { ToastActionElement, ToastProps } from "@/components/ui/toast"

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: "ADD_TOAST",
  UPDATE_TOAST: "UPDATE_TOAST",
  DISMISS_TOAST: "DISMISS_TOAST",
  REMOVE_TOAST: "REMOVE_TOAST",
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType["ADD_TOAST"]
      toast: ToasterToast
    }
  | {
      type: ActionType["UPDATE_TOAST"]
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType["DISMISS_TOAST"]
      toastId?: ToasterToast["id"]
    }
  | {
      type: ActionType["REMOVE_TOAST"]
      toastId?: ToasterToast["id"]
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: "REMOVE_TOAST",
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case "ADD_TOAST":
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

case "UPDATE_TOAST":
      return {
        ...state,
        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
      }

case "DISMISS_TOAST": {
      const { toastId } = action

// ! Side effects ! - This could be extracted into a dismissToast() action,
      // but I'll keep it here for simplicity
      if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t,
        ),
      }
    }
    case "REMOVE_TOAST":
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      }
  }
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, "id">

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: "UPDATE_TOAST",
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })

dispatch({
    type: "ADD_TOAST",
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

const useToast = useToastOriginal

export { useToast, toast }
[V0_FILE]typescriptreact:file="lib/utils.ts"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]typescriptreact:file="components/ui/use-toast.ts" isFixed="true" isQuickEdit="true"
"use client"

// Inspired by react-hot-toast library
import type * as React from "react"
import { useToast as useToastShadcn } from "@/components/ui/toast"

import type { ToastActionElement, ToastProps } from "@/components/ui/toast"

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: "ADD_TOAST",
  UPDATE_TOAST: "UPDATE_TOAST",
  DISMISS_TOAST: "DISMISS_TOAST",
  REMOVE_TOAST: "REMOVE_TOAST",
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: "REMOVE_TOAST",
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

case "UPDATE_TOAST":
      return {
        ...state,
        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
      }

case "DISMISS_TOAST": {
      const { toastId } = action

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, "id">

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: "UPDATE_TOAST",
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })

dispatch({
    type: "ADD_TOAST",
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

export { useToastShadcn, toast }
[V0_FILE]typescriptreact:file="components/ui/toast.tsx"
"use client"

import * as React from "react"
import * as ToastPrimitives from "@radix-ui/react-toast"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

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

const ToastProvider = ToastPrimitives.Provider

const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
      className,
    )}
    {...props}
  />
))
ToastViewport.displayName = ToastPrimitives.Viewport.displayName

const toastVariants = cva(
  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
  {
    variants: {
      variant: {
        default: "border bg-background text-foreground",
        destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
        success: "border-green-500 bg-green-500/10 text-green-500",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

const Toast = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
  return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />
})
Toast.displayName = ToastPrimitives.Root.displayName

const ToastAction = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Action>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Action
    ref={ref}
    className={cn(
      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
      className,
    )}
    {...props}
  />
))
ToastAction.displayName = ToastPrimitives.Action.displayName

const ToastClose = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Close>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Close
    ref={ref}
    className={cn(
      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
      className,
    )}
    toast-close=""
    {...props}
  >
    <X className="h-4 w-4" />
  </ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName

const ToastTitle = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Title>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} />
))
ToastTitle.displayName = ToastPrimitives.Title.displayName

const ToastDescription = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Description>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
))
ToastDescription.displayName = ToastPrimitives.Description.displayName

type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>

type ToastActionElement = React.ReactElement<typeof ToastAction>

export {
  type ToastProps,
  type ToastActionElement,
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  ToastAction,
}

export function useToast() {
  const [toasts, setToasts] = React.useState<
    {
      id: string
      title?: React.ReactNode
      description?: React.ReactNode
      action?: ToastActionElement
      variant?: "default" | "destructive" | "success"
    }[]
  >([])

const toast = React.useCallback(
    ({
      title,
      description,
      action,
      variant,
    }: {
      title?: React.ReactNode
      description?: React.ReactNode
      action?: ToastActionElement
      variant?: "default" | "destructive" | "success"
    }) => {
      const id = Math.random().toString(36).substring(2, 9)
      setToasts((prevToasts) => [...prevToasts, { id, title, description, action, variant }])

setTimeout(() => {
        setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id))
      }, 5000)

return {
        id,
        dismiss: () => setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id)),
        update: (props: { title?: React.ReactNode; description?: React.ReactNode; action?: ToastActionElement }) => {
          setToasts((prevToasts) => prevToasts.map((toast) => (toast.id === id ? { ...toast, ...props } : toast)))
        },
      }
    },
    [],
  )

return { toast, toasts, setToasts }
}
[V0_FILE]typescriptreact:file="components/ui/toaster.tsx"
"use client"

import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast"
import { useToast } from "@/components/ui/use-toast"

export function Toaster() {
  const { toasts } = useToast()

return (
    <ToastProvider>
      {toasts.map(({ id, title, description, action, ...props }) => (
        <Toast key={id} {...props}>
          <div className="grid gap-1">
            {title && <ToastTitle>{title}</ToastTitle>}
            {description && <ToastDescription>{description}</ToastDescription>}
          </div>
          {action}
          <ToastClose />
        </Toast>
      ))}
      <ToastViewport />
    </ToastProvider>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx"
import type React from "react"
import "@/app/globals.css"
import type { Metadata } from "next"
import { ThemeProvider } from "@/contexts/theme-context"
import { AuthProvider } from "@/contexts/auth-context"
import { Toaster } from "sonner"

export const metadata: Metadata = {
  title: "StudentConnect - Connect with Expert Tutors",
  description: "Find the perfect tutor for your educational needs with our AI-powered matching system.",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider>
          <AuthProvider>
            {children}
            <Toaster position="top-right" />
          </AuthProvider>
        </ThemeProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/resources/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx"
"use client"

import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"

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

const Tabs = TabsPrimitive.Root

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
      className,
    )}
    {...props}
  />
))
TabsList.displayName = TabsPrimitive.List.displayName

const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
      className,
    )}
    {...props}
  />
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    className={cn(
      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      className,
    )}
    {...props}
  />
))
TabsContent.displayName = TabsPrimitive.Content.displayName

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

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

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

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

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

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="app/resources/page.tsx"
"use client"

import { useRouter } from "next/navigation"
import { Header } from "@/components/navigation/header"
import { Footer } from "@/components/navigation/footer"
import { AnimatedSection } from "@/components/ui/animated-section"
import {
  Brain,
  Bookmark,
  Book,
  BookOpen,
  Calendar,
  Award,
  FileText,
  BookMarked,
  PenTool,
  GraduationCap,
} from "lucide-react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"

// Resource categories definition
const resourceCategories = [
  {
    id: "board-notes",
    path: "/resources/board-notes",
    title: "Board Notes",
    description: "Access high-quality notes for different boards: CBSE, ICSE, State Boards",
    icon: <Book className="h-6 w-6 text-blue-500" />,
    color: "from-blue-50 to-blue-100 border-blue-200",
    textColor: "text-blue-700",
    hoverColor: "hover:bg-blue-50",
  },
  {
    id: "competitive-exams",
    path: "/resources/competitive",
    title: "Competitive Exam Materials",
    description: "Preparation materials for JEE, NEET, UPSC, CAT and more",
    icon: <BookOpen className="h-6 w-6 text-purple-500" />,
    color: "from-purple-50 to-purple-100 border-purple-200",
    textColor: "text-purple-700",
    hoverColor: "hover:bg-purple-50",
  },
  {
    id: "soft-skills",
    path: "/resources/soft-skills",
    title: "Soft Skills Training",
    description: "Enhance communication, leadership, time management, and more",
    icon: <PenTool className="h-6 w-6 text-green-500" />,
    color: "from-green-50 to-green-100 border-green-200",
    textColor: "text-green-700",
    hoverColor: "hover:bg-green-50",
  },
  {
    id: "study-planner",
    path: "/resources/planner",
    title: "Study Planner",
    description: "Create customized study schedules for effective learning",
    icon: <Calendar className="h-6 w-6 text-amber-500" />,
    color: "from-amber-50 to-amber-100 border-amber-200",
    textColor: "text-amber-700",
    hoverColor: "hover:bg-amber-50",
  },
]

const secondaryResources = [
  {
    id: "past-papers",
    title: "Past Papers",
    description: "Practice with previous years' question papers",
    icon: <FileText className="h-5 w-5 text-indigo-500" />,
  },
  {
    id: "subject-guides",
    title: "Subject Guides",
    description: "In-depth guides for different subjects",
    icon: <BookMarked className="h-5 w-5 text-pink-500" />,
  },
  {
    id: "career-guidance",
    title: "Career Guidance",
    description: "Get insights on various career paths",
    icon: <GraduationCap className="h-5 w-5 text-cyan-500" />,
  },
  {
    id: "test-series",
    title: "Test Series",
    description: "Regular assessments to track progress",
    icon: <Award className="h-5 w-5 text-orange-500" />,
  },
]

const ResourceCard = ({ resource }: { resource: (typeof resourceCategories)[0] }) => {
  const router = useRouter()

return (
    <Card
      className={`relative overflow-hidden transition-all duration-300 hover:shadow-lg hover:scale-[1.02] group border bg-gradient-to-br ${resource.color}`}
    >
      <div className="absolute inset-0 bg-white/50 backdrop-blur-[2px] opacity-60 z-0"></div>
      <CardHeader className="relative z-10">
        <div className="flex items-center justify-between">
          <div className="p-2 rounded-full bg-white/80 backdrop-blur-sm shadow-sm">{resource.icon}</div>
          <Button variant="ghost" size="sm" className={`${resource.textColor} ${resource.hoverColor}`}>
            <Bookmark className="h-4 w-4" />
          </Button>
        </div>
        <CardTitle className={`mt-4 ${resource.textColor}`}>{resource.title}</CardTitle>
        <CardDescription className="text-gray-600">{resource.description}</CardDescription>
      </CardHeader>
      <CardContent className="relative z-10">
        <div className="space-y-2 mt-2">
          <div className="text-sm text-gray-600">
            {resource.id === "board-notes" && <p>Available for Class 6-12 across all subjects</p>}
            {resource.id === "competitive-exams" && <p>Updated material with mock tests & practice sets</p>}
            {resource.id === "soft-skills" && <p>Video lectures, worksheets, and interactive exercises</p>}
            {resource.id === "study-planner" && <p>Customizable templates for daily/weekly planning</p>}
          </div>
        </div>
      </CardContent>
      <CardFooter className="relative z-10">
        <Button
          className={`w-full group-hover:bg-white ${resource.textColor} border border-current hover:bg-opacity-90 transition-all`}
          variant="outline"
          onClick={() => router.push(resource.path)}
        >
          Explore {resource.title}
        </Button>
      </CardFooter>
    </Card>
  )
}

const SecondaryResourceCard = ({ resource }: { resource: (typeof secondaryResources)[0] }) => {
  return (
    <Card
      className="transition-all hover:shadow-md hover:scale-[1.01] flex items-center p-4 space-x-4 
      bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm border dark:border-gray-700"
    >
      <div className="rounded-full bg-gray-50 dark:bg-gray-700 p-2 shadow-sm">{resource.icon}</div>
      <div className="flex-1">
        <h3 className="font-medium dark:text-gray-100">{resource.title}</h3>
        <p className="text-sm text-gray-500 dark:text-gray-400">{resource.description}</p>
      </div>
    </Card>
  )
}

export default function ResourcesPage() {
  return (
    <div className="min-h-screen flex flex-col">
      <Header />
      <main className="flex-grow">
        <div className="container mx-auto py-8 px-4 max-w-7xl">
          <AnimatedSection className="mb-8 text-center">
            <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-50 mb-2">Educational Resources</h1>
            <p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
              Access high-quality study materials, notes, and planners for your academic journey
            </p>
          </AnimatedSection>

{/* Featured Resources Section */}
          <AnimatedSection animation="fade-in" className="mb-12">
            <h2 className="text-2xl font-semibold mb-6 flex items-center">
              <Brain className="mr-2 h-5 w-5 text-blue-600" />
              Featured Resources
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              {resourceCategories.map((resource) => (
                <ResourceCard key={resource.id} resource={resource} />
              ))}
            </div>
          </AnimatedSection>

{/* Additional Resources Section */}
          <AnimatedSection animation="fade-in" delay={200} className="mb-12">
            <h2 className="text-2xl font-semibold mb-6 flex items-center text-gray-900 dark:text-gray-100">
              <Bookmark className="mr-2 h-5 w-5 text-blue-600 dark:text-blue-400" />
              Additional Resources
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {secondaryResources.map((resource) => (
                <SecondaryResourceCard key={resource.id} resource={resource} />
              ))}
            </div>
          </AnimatedSection>
        </div>
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/resources/board-notes/page.tsx"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Header } from "@/components/navigation/header"
import { Footer } from "@/components/navigation/footer"
import { ArrowLeft } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Skeleton } from "@/components/ui/skeleton"

const ResourceCardSkeleton = () => (
  <div className="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
    <Skeleton className="aspect-video w-full" />
    <div className="p-4 space-y-4">
      <Skeleton className="h-4 w-3/4" />
      <Skeleton className="h-3 w-1/2" />
      <div className="flex gap-3 pt-2">
        <Skeleton className="h-3 w-16" />
        <Skeleton className="h-3 w-16" />
      </div>
      <Skeleton className="h-10 w-full" />
    </div>
  </div>
)

export default function BoardNotesPage() {
  const router = useRouter()
  const [selectedBoard, setSelectedBoard] = useState("")
  const [selectedClass, setSelectedClass] = useState("")
  const [selectedType, setSelectedType] = useState("notes")
  const [selectedSubject, setSelectedSubject] = useState("")
  const [selectedLanguage, setSelectedLanguage] = useState("")
  const [showResults, setShowResults] = useState(false)
  const [isLoading, setIsLoading] = useState(false)

const boards = ["CBSE", "ICSE", "State Board"]
  const classes = ["9", "10", "11", "12"]

const subjects = {
    "9": ["Mathematics", "Science", "Social Science"],
    "10": ["Mathematics", "Science", "Social Science"],
    "11": ["Physics", "Chemistry", "Mathematics", "Biology", "Arts", "Commerce"],
    "12": ["Physics", "Chemistry", "Mathematics", "Biology", "Arts", "Commerce"],
  }

const languages = ["Hindi", "English"]

const resourceTypes = [
    { id: "notes", label: "Notes" },
    { id: "videos", label: "Video Lectures" },
    { id: "questions", label: "Previous Year Questions" },
    { id: "papers", label: "Model Papers" },
    { id: "mcq", label: "MCQ Practice" },
  ]

const handleShowResults = async () => {
    if (selectedBoard && selectedClass && selectedType && selectedSubject && selectedLanguage) {
      setIsLoading(true)
      // Simulate loading
      await new Promise((resolve) => setTimeout(resolve, 1500))
      setShowResults(true)
      setIsLoading(false)
    }
  }

const handleSelectionChange = (type: string, value: string) => {
    setShowResults(false)
    switch (type) {
      case "board":
        setSelectedBoard(value)
        setSelectedSubject("")
        break
      case "class":
        setSelectedClass(value)
        setSelectedSubject("")
        break
      case "subject":
        setSelectedSubject(value)
        break
      case "language":
        setSelectedLanguage(value)
        break
      case "type":
        setSelectedType(value)
        break
    }
  }

return (
    <div className="min-h-screen flex flex-col">
      <Header />
      <main className="flex-grow">
        <div className="min-h-screen bg-white dark:bg-gray-900">
          <div className="container mx-auto px-4 py-4">
            <Button
              variant="ghost"
              onClick={() => router.push("/resources")}
              className="mb-4 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800"
            >
              <ArrowLeft className="h-4 w-4 mr-2" />
              Back to Resources
            </Button>

<div className="max-w-2xl mx-auto space-y-8">
              <div className="text-center">
                <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">Board Study Materials</h1>
                <p className="text-gray-600 dark:text-gray-300">
                  Select your board and class to access study materials
                </p>
              </div>

{/* Selection Form */}
              <Card className="p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
                <div className="space-y-6">
                  {/* Board Selection */}
                  <div className="space-y-2">
                    <Label className="text-gray-700 dark:text-gray-200">Select Board</Label>
                    <select
                      value={selectedBoard}
                      onChange={(e) => handleSelectionChange("board", e.target.value)}
                      className="w-full rounded-lg border border-gray-300 dark:border-gray-600 
                        bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100
                        focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
                    >
                      <option value="">Choose a board</option>
                      {boards.map((board) => (
                        <option key={board} value={board}>
                          {board}
                        </option>
                      ))}
                    </select>
                  </div>

{/* Class Selection */}
                  <div className="space-y-2">
                    <Label className="text-gray-700 dark:text-gray-200">Select Class</Label>
                    <select
                      value={selectedClass}
                      onChange={(e) => handleSelectionChange("class", e.target.value)}
                      className="w-full rounded-lg border border-gray-300 dark:border-gray-600 
                        bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100
                        focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
                    >
                      <option value="">Choose a class</option>
                      {classes.map((cls) => (
                        <option key={cls} value={cls}>
                          Class {cls}
                        </option>
                      ))}
                    </select>
                  </div>

{/* Subject Selection - Only show when class is selected */}
                  {selectedClass && (
                    <div className="space-y-2">
                      <Label className="text-gray-700 dark:text-gray-200">Select Subject</Label>
                      <select
                        value={selectedSubject}
                        onChange={(e) => handleSelectionChange("subject", e.target.value)}
                        className="w-full rounded-lg border border-gray-300 dark:border-gray-600 
                          bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100
                          focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
                      >
                        <option value="">Choose a subject</option>
                        {subjects[selectedClass as keyof typeof subjects].map((subject) => (
                          <option key={subject} value={subject}>
                            {subject}
                          </option>
                        ))}
                      </select>
                    </div>
                  )}

{/* Language Selection */}
                  <div className="space-y-2">
                    <Label className="text-gray-700 dark:text-gray-200">Select Language</Label>
                    <select
                      value={selectedLanguage}
                      onChange={(e) => handleSelectionChange("language", e.target.value)}
                      className="w-full rounded-lg border border-gray-300 dark:border-gray-600 
                        bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100
                        focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
                    >
                      <option value="">Choose a language</option>
                      {languages.map((language) => (
                        <option key={language} value={language}>
                          {language}
                        </option>
                      ))}
                    </select>
                  </div>

{/* Resource Type Selection */}
                  <div className="space-y-2">
                    <Label className="text-gray-700 dark:text-gray-200">Select Resource Type</Label>
                    <div className="flex flex-wrap gap-2">
                      {resourceTypes.map((type) => (
                        <Button
                          key={type.id}
                          variant={selectedType === type.id ? "default" : "outline"}
                          onClick={() => handleSelectionChange("type", type.id)}
                          className={`${
                            selectedType === type.id
                              ? "bg-blue-600 text-white dark:bg-blue-500"
                              : "text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600"
                          }`}
                        >
                          {type.label}
                        </Button>
                      ))}
                    </div>
                  </div>

{/* Show Results Button */}
                  <Button
                    onClick={handleShowResults}
                    disabled={
                      !selectedBoard || !selectedClass || !selectedType || !selectedSubject || !selectedLanguage
                    }
                    className="w-full mt-4 bg-blue-600 hover:bg-blue-700 text-white 
                      disabled:bg-gray-300 disabled:text-gray-500 dark:disabled:bg-gray-700"
                  >
                    Show Results
                  </Button>
                </div>
              </Card>

{/* Results Section */}
              {isLoading && (
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
                  {[1, 2, 3].map((_, index) => (
                    <ResourceCardSkeleton key={index} />
                  ))}
                </div>
              )}

{showResults && (
                <div className="bg-gray-50 dark:bg-gray-800/50 rounded-xl p-6 mt-8 w-screen ml-[calc(-50vw+50%)] mr-[calc(-50vw+50%)]">
                  <div className="max-w-[90vw] mx-auto">
                    {/* Results Header */}
                    <div className="flex flex-col items-center mb-8 text-center">
                      <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Available Resources</h2>
                      <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
                        <span className="px-3 py-1 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300">
                          {selectedBoard}
                        </span>
                        <span className="px-3 py-1 rounded-full bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300">
                          Class {selectedClass}
                        </span>
                        <span className="px-3 py-1 rounded-full bg-green-100 dark:bg-green-900/50 text-green-700 dark:text-green-300">
                          {selectedSubject}
                        </span>
                        <span className="px-3 py-1 rounded-full bg-amber-100 dark:bg-amber-900/50 text-amber-700 dark:text-amber-300">
                          {resourceTypes.find((t) => t.id === selectedType)?.label}
                        </span>
                      </div>
                    </div>

{/* Empty State Message */}
                    <div className="text-center py-12">
                      <p className="text-gray-600 dark:text-gray-400 text-lg">
                        No resources available for the selected criteria.
                      </p>
                      <p className="text-gray-500 dark:text-gray-500 mt-2">
                        Please try different selections or check back later.
                      </p>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/resources/competitive/page.tsx"
"use client"

export default function CompetitiveExamsPage() {
  const router = useRouter()
  const [selectedExam, setSelectedExam] = useState("")
  const [selectedSubject, setSelectedSubject] = useState("")
  const [selectedType, setSelectedType] = useState("notes")
  const [selectedLanguage, setSelectedLanguage] = useState("")
  const [showResults, setShowResults] = useState(false)
  const [isLoading, setIsLoading] = useState(false)

const exams = ["JEE", "NEET", "UPSC", "CAT", "GATE"]
  const subjects = {
    JEE: ["Physics", "Chemistry", "Mathematics"],
    NEET: ["Physics", "Chemistry", "Biology"],
    NDA: ["General Science", "Mathematics", "G.K", "English"],
    CUET: ["Physics", "Chemistry", "Mathematics", "Biology"],
    CDS: ["General Science", "Mathematics", "G.K", "English"],
  }
  const languages = ["Hindi", "English"]
  const resourceTypes = [
    { id: "notes", label: "Study Material" },
    { id: "videos", label: " Guided Video Lectures" },
    { id: "tests", label: "Mock Tests links" },
    { id: "pyq", label: "Previous year Papers" },
    { id: "Det", label: "Complete Details" },
  ]

const handleShowResults = async () => {
    if (selectedExam && selectedSubject && selectedType && selectedLanguage) {
      setIsLoading(true)
      await new Promise((resolve) => setTimeout(resolve, 1500))
      setShowResults(true)
      setIsLoading(false)
    }
  }

const handleSelectionChange = (type: string, value: string) => {
    setShowResults(false)
    switch (type) {
      case "exam":
        setSelectedExam(value)
        setSelectedSubject("")
        break
      case "subject":
        setSelectedSubject(value)
        break
      case "language":
        setSelectedLanguage(value)
        break
      case "type":
        setSelectedType(value)
        break
    }
  }

<div className="max-w-2xl mx-auto space-y-8">
              <div className="text-center">
                <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">Competitive Exam Materials</h1>
                <p className="text-gray-600 dark:text-gray-300">
                  Select your exam and subject to access study materials
                </p>
              </div>

<Card className="p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
                <div className="space-y-6">
                  {/* Exam Selection */}
                  <div className="space-y-2">
                    <Label className="text-gray-700 dark:text-gray-200">Select Exam</Label>
                    <select
                      value={selectedExam}
                      onChange={(e) => handleSelectionChange("exam", e.target.value)}
                      className="w-full rounded-lg border border-gray-300 dark:border-gray-600 
                        bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100
                        focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
                    >
                      <option value="">Choose an exam</option>
                      {exams.map((exam) => (
                        <option key={exam} value={exam}>
                          {exam}
                        </option>
                      ))}
                    </select>
                  </div>

{/* Subject Selection */}
                  {selectedExam && (
                    <div className="space-y-2">
                      <Label className="text-gray-700 dark:text-gray-200">Select Subject</Label>
                      <select
                        value={selectedSubject}
                        onChange={(e) => handleSelectionChange("subject", e.target.value)}
                        className="w-full rounded-lg border border-gray-300 dark:border-gray-600 
                          bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100
                          focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
                      >
                        <option value="">Choose a subject</option>
                        {subjects[selectedExam as keyof typeof subjects]?.map((subject) => (
                          <option key={subject} value={subject}>
                            {subject}
                          </option>
                        ))}
                      </select>
                    </div>
                  )}

<Button
                    onClick={handleShowResults}
                    disabled={!selectedExam || !selectedSubject || !selectedType || !selectedLanguage}
                    className="w-full mt-4 bg-blue-600 hover:bg-blue-700 text-white 
                      disabled:bg-gray-300 disabled:text-gray-500 dark:disabled:bg-gray-700"
                  >
                    Show Results
                  </Button>
                </div>
              </Card>

{/* Loading State */}
              {isLoading && (
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
                  {[1, 2, 3].map((_, index) => (
                    <ResourceCardSkeleton key={index} />
                  ))}
                </div>
              )}

{/* Results Section */}
              {showResults && (
                <div className="bg-gray-50 dark:bg-gray-800/50 rounded-xl p-6 mt-8 w-screen ml-[calc(-50vw+50%)] mr-[calc(-50vw+50%)]">
                  <div className="max-w-[90vw] mx-auto">
                    <div className="flex flex-col items-center mb-8 text-center">
                      <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Available Resources</h2>
                      <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
                        <span className="px-3 py-1 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300">
                          {selectedExam}
                        </span>
                        <span className="px-3 py-1 rounded-full bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300">
                          {selectedSubject}
                        </span>
                        <span className="px-3 py-1 rounded-full bg-amber-100 dark:bg-amber-900/50 text-amber-700 dark:text-amber-300">
                          {resourceTypes.find((t) => t.id === selectedType)?.label}
                        </span>
                      </div>
                    </div>

export default function SoftSkillsPage() {
  const router = useRouter()
  const [selectedCategory, setSelectedCategory] = useState("")
  const [selectedLevel, setSelectedLevel] = useState("")
  const [selectedLanguage, setSelectedLanguage] = useState("")
  const [showResults, setShowResults] = useState(false)
  const [isLoading, setIsLoading] = useState(false)

const categories = [
    "Communication",
    "Leadership",
    "Time Management",
    "Problem Solving",
    "Team Work",
    "Public Speaking",
    "Emotional Intelligence",
  ]

const levels = ["Beginner", "Intermediate", "Advanced"]
  const languages = ["Hindi", "English"]

const handleShowResults = async () => {
    if (selectedCategory && selectedLevel && selectedLanguage) {
      setIsLoading(true)
      await new Promise((resolve) => setTimeout(resolve, 1500))
      setShowResults(true)
      setIsLoading(false)
    }
  }

const handleSelectionChange = (type: string, value: string) => {
    setShowResults(false)
    switch (type) {
      case "category":
        setSelectedCategory(value)
        break
      case "level":
        setSelectedLevel(value)
        break
      case "language":
        setSelectedLanguage(value)
        break
    }
  }

<div className="max-w-2xl mx-auto space-y-8">
              <div className="text-center">
                <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">Soft Skills Training</h1>
                <p className="text-gray-600 dark:text-gray-300">
                  Enhance your professional skills with our comprehensive training materials
                </p>
              </div>

<Card className="p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
                <div className="space-y-6">
                  {/* Category Selection */}
                  <div className="space-y-2">
                    <Label className="text-gray-700 dark:text-gray-200">Select Skill Category</Label>
                    <select
                      value={selectedCategory}
                      onChange={(e) => handleSelectionChange("category", e.target.value)}
                      className="w-full rounded-lg border border-gray-300 dark:border-gray-600 
                        bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100
                        focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
                    >
                      <option value="">Choose a category</option>
                      {categories.map((category) => (
                        <option key={category} value={category}>
                          {category}
                        </option>
                      ))}
                    </select>
                  </div>

{/* Level Selection */}
                  <div className="space-y-2">
                    <Label className="text-gray-700 dark:text-gray-200">Select Level</Label>
                    <select
                      value={selectedLevel}
                      onChange={(e) => handleSelectionChange("level", e.target.value)}
                      className="w-full rounded-lg border border-gray-300 dark:border-gray-600 
                        bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100
                        focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
                    >
                      <option value="">Choose a level</option>
                      {levels.map((level) => (
                        <option key={level} value={level}>
                          {level}
                        </option>
                      ))}
                    </select>
                  </div>

<Button
                    onClick={handleShowResults}
                    disabled={!selectedCategory || !selectedLevel || !selectedLanguage}
                    className="w-full mt-4 bg-blue-600 hover:bg-blue-700 text-white 
                      disabled:bg-gray-300 disabled:text-gray-500 dark:disabled:bg-gray-700"
                  >
                    Show Results
                  </Button>
                </div>
              </Card>

{/* Results Section */}
              {showResults && (
                <div className="bg-gray-50 dark:bg-gray-800/50 rounded-xl p-6 mt-8 w-screen ml-[calc(-50vw+50%)] mr-[calc(-50vw+50%)]">
                  <div className="max-w-[90vw] mx-auto">
                    <div className="flex flex-col items-center mb-8 text-center">
                      <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Available Resources</h2>
                      <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
                        <span className="px-3 py-1 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300">
                          {selectedCategory}
                        </span>
                        <span className="px-3 py-1 rounded-full bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300">
                          {selectedLevel}
                        </span>
                      </div>
                    </div>

import { useState, useEffect } from "react"
import Link from "next/link"
import { usePathname, useRouter } from "next/navigation"
import { Menu, X, User } from "lucide-react"
import { ThemeToggle } from "@/components/ui/theme-toggle"
import { NeumoButton } from "@/components/ui/neumo-button"
import { useTheme } from "@/contexts/theme-context"
import { useAuth } from "@/contexts/auth-context"
import { ProfileDropdown } from "@/components/navigation/profile-dropdown"

interface NavLink {
  label: string
  href: string
}

const navLinks: NavLink[] = [
  { label: "Home", href: "/" },
  { label: "Tutors", href: "/tutors" },
  { label: "Tasks", href: "/tasks" }, // Make sure this is "/tasks"
  { label: "Community", href: "/community" },
  { label: "Resources", href: "/resources" },
  { label: "BuyAndSell", href: "/buy-sell" },
  { label: "Shorts", href: "/shorts" },
]

export const Header = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const [isScrolled, setIsScrolled] = useState(false)
  const { theme } = useTheme()
  const pathname = usePathname()
  const { isAuthenticated, user } = useAuth()
  const router = useRouter()

// Handle scroll effect
  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 10) {
        setIsScrolled(true)
      } else {
        setIsScrolled(false)
      }
    }

window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

const isActive = (path: string) => {
    if (path === "/" && pathname === "/") return true
    if (path !== "/" && pathname && pathname.startsWith(path)) return true
    return false
  }

// Don't show the header for admin dashboard
  if (user?.role === "admin" && pathname === "/admin") {
    return null
  }

return (
    <header
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
        isScrolled
          ? `backdrop-blur-lg ${theme === "dark" ? "bg-background/80 shadow-md" : "bg-background/80 shadow-md"}`
          : "bg-transparent"
      }`}
    >
      <div className="container mx-auto px-4 py-3 flex items-center justify-between">
        {/* Logo */}
        <Link href="/" className="flex items-center space-x-2 group transition-transform duration-300 hover:scale-105">
          <span className="text-2xl font-bold text-gradient group-hover:opacity-90">StudentConnect</span>
        </Link>

{/* Desktop Navigation */}
        <nav className="hidden md:flex items-center space-x-1">
          {navLinks.map((link) => (
            <div
              key={link.label}
              className={`px-3 py-2 relative transition-all duration-300 hover:scale-105 hover:text-foreground group cursor-pointer ${
                isActive(link.href) ? "text-foreground font-medium" : "text-foreground/70"
              }`}
              onClick={(e) => {
                if (link.href === "/tasks") {
                  router.push("/tasks")
                }
                if (link.href === "/resources") {
                  window.location.href = "/resources"
                } else {
                  router.push(link.href)
                }
              }}
            >
              {link.label}
              {isActive(link.href) && (
                <span className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1/2 h-0.5 bg-sc-yellow rounded-full" />
              )}
              <span className="absolute inset-0 bg-sc-yellow/5 scale-0 rounded-md transition-transform duration-300 group-hover:scale-100" />
            </div>
          ))}
        </nav>

{/* Actions */}
        <div className="hidden md:flex items-center space-x-4">
          <ThemeToggle />

{isAuthenticated ? (
            <ProfileDropdown />
          ) : (
            <>
              <Link href="/login">
                <NeumoButton variant="outline" size="sm" className="transition-transform duration-300 hover:scale-105">
                  <User size={16} className="mr-2" />
                  <span>Log In</span>
                </NeumoButton>
              </Link>
              <Link href="/signup">
                <NeumoButton variant="primary" size="sm" className="transition-transform duration-300 hover:scale-105">
                  Sign Up
                </NeumoButton>
              </Link>
            </>
          )}
        </div>

{/* Mobile Menu Button */}
        <div className="flex items-center space-x-3 md:hidden">
          <ThemeToggle />

{isAuthenticated ? (
            <ProfileDropdown />
          ) : (
            <button
              onClick={() => setIsMenuOpen(!isMenuOpen)}
              className="text-foreground p-2 transition-transform duration-300 hover:scale-110"
              aria-label="Toggle menu"
            >
              {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          )}
        </div>
      </div>

{/* Mobile Menu */}
      {isMenuOpen && !isAuthenticated && (
        <div className={`md:hidden ${theme === "dark" ? "bg-background/95" : "bg-background/95"} backdrop-blur-lg`}>
          <div className="container mx-auto px-4 py-4 flex flex-col space-y-3">
            {navLinks.map((link) => (
              <Link
                key={link.label}
                href={link.href}
                className={`px-3 py-3 text-foreground/70 relative transition-all duration-300 hover:translate-x-1 hover:text-foreground border-b border-foreground/10 ${
                  isActive(link.href) ? "text-foreground font-medium bg-sc-yellow/5" : ""
                }`}
                onClick={(e) => {
                  setIsMenuOpen(false)
                  if (link.href === "/tasks") {
                    e.preventDefault()
                    router.push("/tasks")
                  }
                  if (link.href === "/resources") {
                    e.preventDefault()
                    // Handle Resources page navigation
                    window.location.href = "/resources"
                  }
                }}
              >
                {link.label}
                {isActive(link.href) && (
                  <span className="absolute left-0 top-1/2 transform -translate-y-1/2 w-1 h-1/2 bg-sc-yellow rounded-full" />
                )}
              </Link>
            ))}
            <div className="pt-4 flex flex-col space-y-3">
              <Link href="/login" onClick={() => setIsMenuOpen(false)}>
                <NeumoButton
                  variant="outline"
                  size="sm"
                  className="w-full transition-transform duration-300 hover:scale-105"
                >
                  <User size={16} className="mr-2" />
                  <span>Log In</span>
                </NeumoButton>
              </Link>
              <Link href="/signup" onClick={() => setIsMenuOpen(false)}>
                <NeumoButton
                  variant="primary"
                  size="sm"
                  className="w-full transition-transform duration-300 hover:scale-105"
                >
                  Sign Up
                </NeumoButton>
              </Link>
            </div>
          </div>
        </div>
      )}
    </header>
  )
}
[V0_FILE]plaintext:file=".env.local"
NEXT_PUBLIC_GEMINI_API_KEY=AIzaSyCGKNzj0ys9XX9O6pouAvD8HXGv4pJgyaA
[V0_FILE]typescriptreact:file="app/api/generate-study-plan/route.ts"
import { NextResponse } from "next/server"

// Function to format the study plan response
function formatStudyPlan(rawText: string, formData: any): string {
  // Process the raw text to handle formatting
  let formattedText = rawText

// Replace double asterisks with bold text
  formattedText = formattedText.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")

// Convert lines starting with single asterisks to bullet points
  formattedText = formattedText.replace(/^\* (.*?)$/gm, '<li class="ml-5 list-disc my-1">$1</li>')

// Replace remaining single asterisks with italic text
  formattedText = formattedText.replace(/\*(.*?)\*/g, "<em>$1</em>")

// Convert headings (lines with all caps followed by colon)
  formattedText = formattedText.replace(
    /^([A-Z][A-Z\s]+):/gm,
    '<h3 class="text-xl font-bold text-purple-700 mt-6 mb-3">$1</h3>',
  )

// Convert subheadings (capitalized words followed by colon)
  formattedText = formattedText.replace(
    /^([A-Z][a-z].*?):/gm,
    '<h4 class="text-lg font-semibold text-purple-600 mt-4 mb-2">$1</h4>',
  )

// Identify and format timetables
  // Look for sections that might contain timetables (e.g., DAILY SCHEDULE, WEEKLY PLAN)
  const timetableSections = formattedText.match(
    /<h3[^>]*>(?:DAILY SCHEDULE|WEEKLY PLAN|TIMETABLE|ROUTINE|WEEK \d+)[^<]*<\/h3>[\s\S]*?(?=<h3|$)/gi,
  )

if (timetableSections) {
    timetableSections.forEach((section) => {
      // Check if this section contains time patterns like "9:00 AM - 10:00 AM"
      const hasTimePatterns = /\d{1,2}(?::\d{2})?\s*(?:AM|PM)\s*-\s*\d{1,2}(?::\d{2})?\s*(?:AM|PM)/i.test(section)
      const hasWeekPattern = /Week \d+|Week: \d+/i.test(section)

if (hasTimePatterns || hasWeekPattern) {
        // This looks like a timetable section, let's convert it to an HTML table
        const tableRows = section.match(
          /(?:^\s*\d{1,2}(?::\d{2})?\s*(?:AM|PM)\s*-\s*\d{1,2}(?::\d{2})?\s*(?:AM|PM).*$)/gm,
        )

if (tableRows && tableRows.length > 0) {
          // Create a table header based on whether it contains days of the week
          let tableHeader = `<div class="overflow-x-auto my-6">
            <table class="w-full border-collapse bg-white shadow-md rounded-lg overflow-hidden">
              <thead>
                <tr class="bg-gradient-to-r from-blue-600 to-purple-600 text-white">
                  <th class="border border-blue-700 px-4 py-3 text-left font-semibold">Time</th>`

// Check if the section mentions days of the week
          const hasDays =
            /monday|tuesday|wednesday|thursday|friday|saturday|sunday/i.test(section) ||
            /mon|tue|wed|thu|fri|sat|sun/i.test(section)

if (hasDays) {
            tableHeader +=
              '<th class="border border-blue-700 px-4 py-3 text-left font-semibold">Monday</th>' +
              '<th class="border border-blue-700 px-4 py-3 text-left font-semibold">Tuesday</th>' +
              '<th class="border border-blue-700 px-4 py-3 text-left font-semibold">Wednesday</th>' +
              '<th class="border border-blue-700 px-4 py-3 text-left font-semibold">Thursday</th>' +
              '<th class="border border-blue-700 px-4 py-3 text-left font-semibold">Friday</th>' +
              '<th class="border border-blue-700 px-4 py-3 text-left font-semibold">Saturday</th>' +
              '<th class="border border-blue-700 px-4 py-3 text-left font-semibold">Sunday</th>'
          } else {
            tableHeader += '<th class="border border-blue-700 px-4 py-3 text-left font-semibold">Activity</th>'
          }

tableHeader += "</tr></thead><tbody>"

// Process each row
          let tableBody = ""
          tableRows.forEach((row, index) => {
            const rowClass = index % 2 === 0 ? "bg-blue-50" : "bg-white"

// Extract time and activities
            const timeMatch = row.match(/(\d{1,2}(?::\d{2})?\s*(?:AM|PM)\s*-\s*\d{1,2}(?::\d{2})?\s*(?:AM|PM))/i)

if (timeMatch) {
              const time = timeMatch[1]
              const activities = row.replace(time, "").trim()

// If we have days of the week in the section but not in this specific row,
              // we'll create a generic row with the same activity for all days
              if (hasDays) {
                // Check if this row specifies days
                const daySpecific =
                  /monday|tuesday|wednesday|thursday|friday|saturday|sunday|mon|tue|wed|thu|fri|sat|sun/i.test(
                    activities,
                  )

if (daySpecific) {
                  // This is a complex case - we'd need more sophisticated parsing
                  // For now, just put the whole activity description in the first day column
                  tableBody += `<tr class="${rowClass}">
                    <td class="border border-gray-300 px-4 py-3 font-medium">${time}</td>
                    <td class="border border-gray-300 px-4 py-3" colspan="7">${activities}</td>
                  </tr>`
                } else {
                  // Generic activity for all days
                  tableBody += `<tr class="${rowClass}">
                    <td class="border border-gray-300 px-4 py-3 font-medium">${time}</td>
                    <td class="border border-gray-300 px-4 py-3">${activities}</td>
                    <td class="border border-gray-300 px-4 py-3">${activities}</td>
                    <td class="border border-gray-300 px-4 py-3">${activities}</td>
                    <td class="border border-gray-300 px-4 py-3">${activities}</td>
                    <td class="border border-gray-300 px-4 py-3">${activities}</td>
                    <td class="border border-gray-300 px-4 py-3">${activities}</td>
                    <td class="border border-gray-300 px-4 py-3">${activities}</td>
                  </tr>`
                }
              } else {
                // Simple time-activity format
                tableBody += `<tr class="${rowClass}">
                  <td class="border border-gray-300 px-4 py-3 font-medium">${time}</td>
                  <td class="border border-gray-300 px-4 py-3">${activities}</td>
                </tr>`
              }
            }
          })

const tableFooter = "</tbody></table></div>"
          const fullTable = tableHeader + tableBody + tableFooter

// Replace the original section with our formatted table
          // We need to escape special characters in the section for the replace to work
          const escapedSection = section.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
          const sectionRegex = new RegExp(escapedSection, "g")

// Extract the heading
          const headingMatch = section.match(/<h3[^>]*>[^<]*<\/h3>/)
          const heading = headingMatch ? headingMatch[0] : ""

formattedText = formattedText.replace(sectionRegex, heading + fullTable)
        }
      }
    })
  }

// Look for week patterns that might be timetables but weren't caught above
  const weekPatterns = formattedText.match(/Week \d+[^\n]*\n(?:(?!\n\n)[\s\S])*(?:\n\n|$)/g)

if (weekPatterns) {
    weekPatterns.forEach((weekSection) => {
      // Check if this looks like a timetable with days of the week
      if (/monday|tuesday|wednesday|thursday|friday|saturday|sunday|mon|tue|wed|thu|fri|sat|sun/i.test(weekSection)) {
        // Create a beautiful table for this week
        const weekTitle = weekSection.match(/Week \d+[^\n]*/)?.[0] || "Weekly Schedule"

// Create table header
        let tableHtml = `<div class="my-6">
          <h3 class="text-xl font-bold text-purple-700 mb-3">${weekTitle}</h3>
          <div class="overflow-x-auto">
            <table class="w-full border-collapse bg-white shadow-md rounded-lg overflow-hidden">
              <thead>
                <tr class="bg-gradient-to-r from-blue-600 to-purple-600 text-white">
                  <th class="border border-blue-700 px-4 py-3 text-left font-semibold">Time Slot</th>
                  <th class="border border-blue-700 px-4 py-3 text-left font-semibold">Monday</th>
                  <th class="border border-blue-700 px-4 py-3 text-left font-semibold">Tuesday</th>
                  <th class="border border-blue-700 px-4 py-3 text-left font-semibold">Wednesday</th>
                  <th class="border border-blue-700 px-4 py-3 text-left font-semibold">Thursday</th>
                  <th class="border border-blue-700 px-4 py-3 text-left font-semibold">Friday</th>
                  <th class="border border-blue-700 px-4 py-3 text-left font-semibold">Saturday</th>
                  <th class="border border-blue-700 px-4 py-3 text-left font-semibold">Sunday</th>
                </tr>
              </thead>
              <tbody>`

// Extract time slots - look for patterns like "9:00 AM - 11:00 AM"
        const timeSlots = weekSection.match(/\d{1,2}(?::\d{2})?\s*(?:AM|PM)\s*-\s*\d{1,2}(?::\d{2})?\s*(?:AM|PM)/gi)

if (timeSlots) {
          timeSlots.forEach((timeSlot, index) => {
            const rowClass = index % 2 === 0 ? "bg-blue-50" : "bg-white"

// Try to extract activities for each day
            // This is a simplified approach - in a real implementation, you'd need more sophisticated parsing
            const timeSlotLine = weekSection.split("\n").find((line) => line.includes(timeSlot))

if (timeSlotLine) {
              // Extract activities - this is a simplified approach
              const activities = timeSlotLine
                .replace(timeSlot, "")
                .split("|")
                .map((item) => item.trim())

// Create table row
              tableHtml += `<tr class="${rowClass}">
                <td class="border border-gray-300 px-4 py-3 font-medium">${timeSlot}</td>`

// Add cells for each day
              for (let i = 0; i < 7; i++) {
                const activity = activities[i + 1] || "-"
                tableHtml += `<td class="border border-gray-300 px-4 py-3">${activity}</td>`
              }

tableHtml += `</tr>`
            }
          })
        }

tableHtml += `</tbody>
            </table>
          </div>
        </div>`

// Replace the original week section with our formatted table
        const escapedSection = weekSection.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
        formattedText = formattedText.replace(new RegExp(escapedSection, "g"), tableHtml)
      }
    })
  }

// Wrap consecutive bullet points in ul tags
  formattedText = formattedText.replace(
    /(<li class="ml-5 list-disc my-1">.*?<\/li>)\s*(<li class="ml-5 list-disc my-1">)/g,
    "$1$2",
  )
  formattedText = formattedText.replace(
    /(<li class="ml-5 list-disc my-1">.*?<\/li>)(?!\s*<li)/g,
    '<ul class="my-3">$1</ul>',
  )

// Format paragraphs (lines that don't start with HTML tags)
  formattedText = formattedText.replace(/^(?!<h|<ul|<li|<table|<div|<\/|$)(.*?)$/gm, '<p class="my-2">$1</p>')

// Add a container div
  formattedText = `<div class="study-plan-container">
    <h2 class="text-2xl font-bold text-purple-700 mb-6">Your Personalized Study Plan for ${formData.examName}</h2>
    
    <div class="overview-section bg-purple-50 p-4 rounded-lg mb-6">
      <h3 class="text-xl font-semibold text-purple-700 mb-2">Study Plan Overview</h3>
      <p class="mb-2">This personalized study schedule is designed to help you prepare for your ${
        formData.examName
      } exam on ${new Date(formData.examDate).toLocaleDateString("en-US", {
        year: "numeric",
        month: "long",
        day: "numeric",
      })}. Follow this plan to complete your syllabus by day ${formData.syllabusCompletionDays} and use the last ${
        formData.revisionDays
      } days for revision.</p>
    </div>
    
    ${formattedText}
    
    <div class="text-center mt-8 mb-3">
      <p class="inline-block bg-purple-600 text-white px-6 py-3 rounded-full font-bold text-lg">Stay consistent, stay focused, and success will follow!</p>
    </div>
  </div>`

return formattedText
}

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

console.log("API route called with prompt:", prompt.substring(0, 100) + "...")

if (!prompt) {
      return NextResponse.json({ error: "Prompt is required" }, { status: 400 })
    }

// Get API key from environment variables
    const apiKey = process.env.NEXT_PUBLIC_GEMINI_API_KEY

if (!apiKey) {
      console.error("Gemini API key is not defined in environment variables")
      return NextResponse.json(
        {
          error: "API configuration error: API key is missing. Please check environment variables.",
        },
        { status: 500 },
      )
    }

console.log("API key available:", apiKey ? "Yes (length: " + apiKey.length + ")" : "No")

// Extract form data from the prompt to use in our formatting
    const formData = {
      examName: prompt.match(/Exam: ([^-\n]*)/i)?.[1]?.trim() || "Your Exam",
      examDate: new Date().toISOString().split("T")[0], // Default to today
      studyHours: prompt.match(/Daily study time: (\d+)/i)?.[1] || "8",
      timeSlots: prompt.match(/Preferred time slots: ([^-\n]*)/i)?.[1] || "9 AM - 1 PM, 4 PM - 8 PM",
      weakTopics: prompt.match(/Areas needing focus: ([^-\n]*)/i)?.[1] || "Core subjects",
      syllabusCompletionDays: prompt.match(/Completion target: Main syllabus by Day (\d+)/i)?.[1] || "60",
      revisionDays: prompt.match(/Revision period: Last (\d+) days/i)?.[1] || "30",
    }

// Enhance the prompt to request well-formatted output
    const enhancedPrompt = `
    ${prompt}
    
    IMPORTANT FORMATTING INSTRUCTIONS:
    1. For each week, create a clear timetable with time slots and days of the week
    2. For each time slot, specify the subject and topic to study
    3. Include breaks, meals, and rest periods in the schedule
    4. Make sure to include all 7 days of the week in the timetable
    5. Format time slots consistently (e.g., "9:00 AM - 11:00 AM")
    6. For each subject, specify the exact topic to be studied
    7. DO NOT include any color coding legend or explanation in your response
    
    Please provide a comprehensive, practical, and well-structured study plan that is easy to follow and implement.
    `

// Call Gemini API
    try {
      const response = await fetch(
        `https://generativelanguage.googleapis.com/v1/models/gemini-2.0-flash:generateContent?key=${apiKey}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            contents: [
              {
                parts: [
                  {
                    text: enhancedPrompt,
                  },
                ],
              },
            ],
            generationConfig: {
              temperature: 0.7,
              topK: 40,
              topP: 0.95,
              maxOutputTokens: 2048,
            },
            safetySettings: [
              {
                category: "HARM_CATEGORY_HARASSMENT",
                threshold: "BLOCK_MEDIUM_AND_ABOVE",
              },
              {
                category: "HARM_CATEGORY_HATE_SPEECH",
                threshold: "BLOCK_MEDIUM_AND_ABOVE",
              },
            ],
          }),
        },
      )

if (!response.ok) {
        const errorText = await response.text()
        console.error("Gemini API error response:", errorText)
        return NextResponse.json(
          { error: `API request failed: ${response.status} ${response.statusText}` },
          { status: response.status },
        )
      }

const data = await response.json()
      console.log("API response received successfully")

// Extract the generated text from the API response
      if (
        !data.candidates ||
        !data.candidates[0] ||
        !data.candidates[0].content ||
        !data.candidates[0].content.parts ||
        !data.candidates[0].content.parts[0]
      ) {
        console.error("Unexpected API response structure:", JSON.stringify(data))
        return NextResponse.json({ error: "Invalid API response format" }, { status: 500 })
      }

const generatedText = data.candidates[0].content.parts[0].text

// Format the study plan
      const formattedStudyPlan = formatStudyPlan(generatedText, formData)

return NextResponse.json({ studyPlan: formattedStudyPlan })
    } catch (fetchError) {
      console.error("Fetch error details:", fetchError)
      return NextResponse.json(
        { error: `Network error when calling Gemini API: ${fetchError.message}` },
        { status: 500 },
      )
    }
  } catch (error) {
    console.error("Error in generate-study-plan API route:", error)
    return NextResponse.json(
      { error: error instanceof Error ? error.message : "Unknown error occurred" },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="app/resources/planner/page.tsx"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Header } from "@/components/navigation/header"
import { Footer } from "@/components/navigation/footer"
import { ArrowLeft, Loader2, Calendar, Clock, BookOpen, Target, RotateCcw, Brain, Download } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { cn } from "@/lib/utils"
import { useAuth } from "@/contexts/auth-context"
import { toast } from "sonner"

interface StudyPlanForm {
  examName: string
  examDate: string
  studyHours: string
  timeSlots: string
  weakTopics: string
  syllabusCompletionDays: string
  revisionDays: string
}

export default function StudyPlannerPage() {
  const router = useRouter()
  const { isAuthenticated, user } = useAuth()
  const [loading, setLoading] = useState(false)
  const [formData, setFormData] = useState<StudyPlanForm>({
    examName: "",
    examDate: "",
    studyHours: "",
    timeSlots: "",
    weakTopics: "",
    syllabusCompletionDays: "",
    revisionDays: "",
  })
  const [studyPlan, setStudyPlan] = useState<string | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [savingPlan, setSavingPlan] = useState(false)

// Check if there's a saved plan in localStorage when component mounts
  useEffect(() => {
    const savedPlan = localStorage.getItem("tempStudyPlan")
    if (savedPlan) {
      setStudyPlan(savedPlan)
    }
  }, [])

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

const validateForm = () => {
    return (
      formData.examName &&
      formData.examDate &&
      formData.studyHours &&
      formData.timeSlots &&
      formData.weakTopics &&
      formData.syllabusCompletionDays &&
      formData.revisionDays
    )
  }

const generatePrompt = () => {
    const startDate = new Date().toLocaleDateString()
    const totalDays = calculateDays()

return `As an expert educational planner, create a detailed study schedule for:

EXAM DETAILS:
- Exam: ${formData.examName}
- Duration: ${totalDays} days (from ${startDate})
- Daily study time: ${formData.studyHours} hours
- Preferred time slots: ${formData.timeSlots}
- Completion target: Main syllabus by Day ${formData.syllabusCompletionDays}
- Revision period: Last ${formData.revisionDays} days
- Areas needing focus: ${formData.weakTopics}

REQUIREMENTS:
1. Weekly schedule format with day-wise breakdown
2. Include all major subjects (Physics, Chemistry, Mathematics)
3. Allocate more time for weak topics
4. Include:
   - Daily breaks and refresh times
   - Weekly mock tests and assessments
   - Progress tracking milestones
   - Revision strategies
   - Weekend review sessions

FORMAT:
- Present as a structured timetable
- Include clear daily routines
- Specify subjects for each time slot
- Mark important milestones and tests
- Highlight revision periods

Please provide a comprehensive, practical, and well-structured study plan that is easy to follow and implement.`
  }

const calculateDays = () => {
    if (!formData.examDate) return 0
    const today = new Date()
    const examDate = new Date(formData.examDate)
    const diffTime = Math.abs(examDate.getTime() - today.getTime())
    return Math.ceil(diffTime / (1000 * 60 * 60 * 24))
  }

const formatDate = (dateString: string) => {
    if (!dateString) return ""
    const date = new Date(dateString)
    return date.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })
  }

const generatePlan = async (e: React.FormEvent) => {
    e.preventDefault()
    setError(null)

if (!validateForm()) {
      setError("Please fill in all required fields")
      return
    }

setLoading(true)
    try {
      const prompt = generatePrompt()

// Use the Next.js API route instead of calling Gemini directly
      // This solves the CORS issue by proxying the request through our server
      const response = await fetch("/api/generate-study-plan", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ prompt }),
      })

if (!response.ok) {
        const errorData = await response.json().catch(() => ({ error: "Unknown error" }))
        throw new Error(errorData.error || `Server error: ${response.status}`)
      }

const data = await response.json()
      setStudyPlan(data.studyPlan)

// Save the study plan to localStorage for temporary storage
      localStorage.setItem("tempStudyPlan", data.studyPlan)
    } catch (error) {
      console.error("Error generating plan:", error)
      setError(error instanceof Error ? error.message : "Failed to generate study plan. Please try again.")
    } finally {
      setLoading(false)
    }
  }

const handleExportPDF = () => {
    if (!isAuthenticated) {
      // Save current plan to localStorage before redirecting
      if (studyPlan) {
        localStorage.setItem("tempStudyPlan", studyPlan)
      }

// Redirect to login page
      toast.info("Please log in to download your study plan")
      router.push("/login?returnUrl=/resources/planner")
      return
    }

// If authenticated, proceed with download
    handleDownload()
  }

const handleDownload = () => {
    // Implementation for PDF download would go here
    toast.success("Your study plan is being downloaded")
    // In a real implementation, you would generate and download a PDF here
  }

const handleSavePlan = async () => {
    if (!isAuthenticated) {
      // Save current plan to localStorage before redirecting
      if (studyPlan) {
        localStorage.setItem("tempStudyPlan", studyPlan)
      }

// Redirect to login page
      toast.info("Please log in to save your study plan")
      router.push("/login?returnUrl=/resources/planner")
      return
    }

// If authenticated, proceed with saving
    setSavingPlan(true)
    try {
      // Here you would implement the API call to save the plan to the database
      // For now, we'll just simulate a delay
      await new Promise((resolve) => setTimeout(resolve, 1000))
      toast.success("Study plan saved successfully!")
    } catch (error) {
      console.error("Error saving plan:", error)
      toast.error("Failed to save study plan. Please try again.")
    } finally {
      setSavingPlan(false)
    }
  }

return (
    <div className="min-h-screen flex flex-col bg-gradient-to-br from-purple-900 via-purple-800 to-indigo-900">
      <Header />
      <main className="flex-grow py-8 px-4 md:px-8">
        <div className="container mx-auto">
          <Button
            variant="ghost"
            onClick={() => router.push("/resources")}
            className="mb-6 text-white hover:text-white hover:bg-white/10"
          >
            <ArrowLeft className="h-4 w-4 mr-2" />
            Back to Resources
          </Button>

<h1 className="text-4xl font-bold text-center mb-8 text-white">Personalized Study Planner</h1>

{studyPlan ? (
            <div className="max-w-5xl mx-auto">
              <Card className="p-6 shadow-2xl">
                <div className="flex justify-between items-center mb-4">
                  <h2 className="text-2xl font-bold">Your Study Plan</h2>
                  {isAuthenticated && (
                    <div className="flex items-center">
                      <p className="text-sm text-gray-500 mr-2">
                        Logged in as <span className="font-medium">{user?.name}</span>
                      </p>
                    </div>
                  )}
                </div>
                <div
                  className="bg-white dark:bg-gray-800 p-4 rounded-lg max-h-[70vh] overflow-y-auto"
                  dangerouslySetInnerHTML={{ __html: studyPlan }}
                />
                <div className="flex flex-wrap gap-4 mt-6">
                  <Button onClick={handleExportPDF} className="flex items-center">
                    <Download className="h-4 w-4 mr-2" />
                    Export as PDF
                  </Button>
                  <Button variant="outline" onClick={() => setStudyPlan(null)} className="flex-1 sm:flex-none">
                    Create New Plan
                  </Button>
                  <Button
                    variant="secondary"
                    onClick={handleSavePlan}
                    disabled={savingPlan}
                    className="flex-1 sm:flex-none"
                  >
                    {savingPlan ? (
                      <>
                        <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                        Saving...
                      </>
                    ) : (
                      "Save Plan"
                    )}
                  </Button>
                </div>
                {!isAuthenticated && (
                  <div className="mt-4 p-3 bg-blue-50 border border-blue-200 text-blue-700 rounded-md">
                    <p className="text-sm">
                      <span className="font-medium">Note:</span> Log in or sign up to save and download your study plan.
                    </p>
                  </div>
                )}
              </Card>
            </div>
          ) : (
            <div className="max-w-6xl mx-auto overflow-hidden rounded-xl shadow-2xl bg-white">
              <div className="flex flex-col lg:flex-row">
                {/* Left side - Form */}
                <div className="w-full lg:w-1/2 p-8">
                  <h2 className="text-3xl font-bold text-blue-600 mb-6">Create Your Study Plan</h2>

{error && (
                    <div className="mb-6 p-3 bg-red-50 border border-red-200 text-red-700 rounded-md">
                      <p className="flex items-center">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          className="h-5 w-5 mr-2"
                          viewBox="0 0 20 20"
                          fill="currentColor"
                        >
                          <path
                            fillRule="evenodd"
                            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
                            clipRule="evenodd"
                          />
                        </svg>
                        {error}
                      </p>
                    </div>
                  )}

<div className="space-y-2">
                        <label className="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300">
                          <Clock className="h-4 w-4 mr-2 text-green-500" />
                          Daily Study Hours <span className="text-rose-500 ml-1">*</span>
                        </label>
                        <input
                          type="number"
                          name="studyHours"
                          value={formData.studyHours}
                          onChange={handleInputChange}
                          required
                          min="1"
                          max="24"
                          className="w-full rounded-lg p-3 border border-gray-300 focus:ring-2 focus:ring-green-500 focus:border-transparent dark:bg-gray-800 dark:border-gray-700 dark:text-white"
                          placeholder="e.g., 8"
                        />
                      </div>

<div className="space-y-2">
                        <label className="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300">
                          <Clock className="h-4 w-4 mr-2 text-amber-500" />
                          Time Slots <span className="text-rose-500 ml-1">*</span>
                        </label>
                        <input
                          type="text"
                          name="timeSlots"
                          value={formData.timeSlots}
                          onChange={handleInputChange}
                          required
                          className="w-full rounded-lg p-3 border border-gray-300 focus:ring-2 focus:ring-amber-500 focus:border-transparent dark:bg-gray-800 dark:border-gray-700 dark:text-white"
                          placeholder="9 AM - 1 PM, 4 PM - 8 PM"
                        />
                      </div>

<div className="space-y-2">
                        <label className="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300">
                          <Target className="h-4 w-4 mr-2 text-red-500" />
                          Syllabus Completion (Days) <span className="text-rose-500 ml-1">*</span>
                        </label>
                        <input
                          type="number"
                          name="syllabusCompletionDays"
                          value={formData.syllabusCompletionDays}
                          onChange={handleInputChange}
                          required
                          min="1"
                          className="w-full rounded-lg p-3 border border-gray-300 focus:ring-2 focus:ring-red-500 focus:border-transparent dark:bg-gray-800 dark:border-gray-700 dark:text-white"
                          placeholder="e.g., 60"
                        />
                      </div>

<div className="space-y-2">
                        <label className="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300">
                          <RotateCcw className="h-4 w-4 mr-2 text-indigo-500" />
                          Revision Days <span className="text-rose-500 ml-1">*</span>
                        </label>
                        <input
                          type="number"
                          name="revisionDays"
                          value={formData.revisionDays}
                          onChange={handleInputChange}
                          required
                          min="1"
                          className="w-full rounded-lg p-3 border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-transparent dark:bg-gray-800 dark:border-gray-700 dark:text-white"
                          placeholder="e.g., 30"
                        />
                      </div>

<div className="space-y-2">
                        <label className="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300">
                          <Brain className="h-4 w-4 mr-2 text-pink-500" />
                          Difficult Topics <span className="text-rose-500 ml-1">*</span>
                        </label>
                        <textarea
                          name="weakTopics"
                          value={formData.weakTopics}
                          onChange={handleInputChange}
                          required
                          className="w-full rounded-lg p-3 resize-none border border-gray-300 focus:ring-2 focus:ring-pink-500 focus:border-transparent dark:bg-gray-800 dark:border-gray-700 dark:text-white"
                          placeholder="Organic Chemistry, Calculus, etc."
                          rows={3}
                        />
                      </div>
                    </div>

<Button
                      type="submit"
                      className={cn(
                        "w-full py-4 text-lg font-medium",
                        "bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700",
                        "text-white border-0 shadow-lg hover:shadow-xl",
                        "disabled:opacity-70 disabled:cursor-not-allowed",
                        loading ? "animate-pulse" : "",
                      )}
                      disabled={loading || !validateForm()}
                    >
                      {loading ? (
                        <div className="flex items-center justify-center">
                          <Loader2 className="mr-2 h-5 w-5 animate-spin" />
                          <span>Creating Your Study Plan...</span>
                        </div>
                      ) : (
                        <div className="flex items-center justify-center">
                          <span>Generate My Study Plan</span>
                        </div>
                      )}
                    </Button>
                  </form>
                </div>

{/* Right side - Preview */}
                <div className="w-full lg:w-1/2 bg-gradient-to-br from-purple-600 via-pink-500 to-blue-500 p-8 text-white">
                  <div className="h-full flex flex-col">
                    <h2 className="text-3xl font-bold mb-6">Your Plan Preview</h2>

<div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 flex-grow">
                      <div className="space-y-6">
                        <div>
                          <h3 className="text-xl font-semibold mb-2">Exam Details</h3>
                          <div className="space-y-2">
                            <p className="flex items-center">
                              <BookOpen className="h-5 w-5 mr-2" />
                              <span className="font-medium">Exam:</span>
                              <span className="ml-2">{formData.examName || "Not specified"}</span>
                            </p>
                            <p className="flex items-center">
                              <Calendar className="h-5 w-5 mr-2" />
                              <span className="font-medium">Date:</span>
                              <span className="ml-2">{formatDate(formData.examDate) || "Not specified"}</span>
                            </p>
                            <p className="flex items-center">
                              <Clock className="h-5 w-5 mr-2" />
                              <span className="font-medium">Days until exam:</span>
                              <span className="ml-2">{formData.examDate ? calculateDays() : "Not specified"}</span>
                            </p>
                          </div>
                        </div>

<div>
                          <h3 className="text-xl font-semibold mb-2">Study Schedule</h3>
                          <div className="space-y-2">
                            <p className="flex items-center">
                              <Clock className="h-5 w-5 mr-2" />
                              <span className="font-medium">Daily hours:</span>
                              <span className="ml-2">{formData.studyHours || "Not specified"}</span>
                            </p>
                            <p className="flex items-center">
                              <Clock className="h-5 w-5 mr-2" />
                              <span className="font-medium">Time slots:</span>
                              <span className="ml-2">{formData.timeSlots || "Not specified"}</span>
                            </p>
                          </div>
                        </div>

<div>
                          <h3 className="text-xl font-semibold mb-2">Timeline</h3>
                          <div className="space-y-2">
                            <p className="flex items-center">
                              <Target className="h-5 w-5 mr-2" />
                              <span className="font-medium">Syllabus completion:</span>
                              <span className="ml-2">{formData.syllabusCompletionDays || "Not specified"} days</span>
                            </p>
                            <p className="flex items-center">
                              <RotateCcw className="h-5 w-5 mr-2" />
                              <span className="font-medium">Revision period:</span>
                              <span className="ml-2">{formData.revisionDays || "Not specified"} days</span>
                            </p>
                          </div>
                        </div>

<div>
                          <h3 className="text-xl font-semibold mb-2">Focus Areas</h3>
                          <div className="bg-white/10 rounded-lg p-3">
                            <p className="flex items-start">
                              <Brain className="h-5 w-5 mr-2 mt-0.5" />
                              <span>{formData.weakTopics || "No difficult topics specified"}</span>
                            </p>
                          </div>
                        </div>
                      </div>

<div className="mt-8 text-center">
                        <div className="inline-block rounded-full bg-white/20 px-4 py-2">
                          <p className="text-sm">
                            Fill all fields and click "Generate" to create your personalized study plan
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/login/page.tsx"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { Input } from "@/components/ui/input"
import { NeumoButton } from "@/components/ui/neumo-button"
import { Eye, EyeOff, Mail, Key, ArrowRight } from "lucide-react"
import { useRouter, useSearchParams } from "next/navigation"
import Link from "next/link"
import { useTheme } from "@/contexts/theme-context"
import { toast } from "sonner"
import { useAuth } from "@/contexts/auth-context"

export default function LoginPage() {
  const [showPassword, setShowPassword] = useState(false)
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const { theme } = useTheme()
  const router = useRouter()
  const searchParams = useSearchParams()
  const returnUrl = searchParams.get("returnUrl") || "/dashboard"
  const { login, isAuthenticated } = useAuth()

// Use useEffect for redirection instead of conditional rendering
  useEffect(() => {
    if (isAuthenticated) {
      router.push(returnUrl)
    }
  }, [isAuthenticated, router, returnUrl])

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (!email || !password) {
      toast.error("Please fill in all fields")
      return
    }

setIsLoading(true)

try {
      const success = await login(email, password)

if (success) {
        toast.success("You have successfully logged in!")
        router.push(returnUrl)
      }
    } catch (error) {
      console.error("Login error:", error)
      toast.error("Failed to login. Please check your credentials.")
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="container mx-auto px-4 py-16 flex justify-center items-center min-h-[80vh]">
      <div
        className={`w-full max-w-md p-8 rounded-xl transition-all duration-300 hover:scale-[1.02] ${
          theme === "dark"
            ? "bg-card border border-border shadow-neumo-dark"
            : "bg-card border border-border shadow-neumo"
        }`}
      >
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold text-gradient mb-2">Welcome Back</h1>
          <p className="text-muted-foreground">Login to continue your learning journey</p>
          {returnUrl && returnUrl !== "/dashboard" && (
            <div className="mt-2 text-sm text-blue-600 dark:text-blue-400">Login to access your study plan</div>
          )}
        </div>

<form onSubmit={handleSubmit} className="space-y-6">
          <div className="space-y-2">
            <label htmlFor="email" className="text-sm font-medium">
              Email or Username
            </label>
            <div className="relative">
              <Input
                id="email"
                type="text"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="Enter your email or username"
                className="pl-10"
              />
              <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
            </div>
          </div>

<div className="space-y-2">
            <div className="flex justify-between items-center">
              <label htmlFor="password" className="text-sm font-medium">
                Password
              </label>
              <Link href="/forgot-password" className="text-xs text-sc-yellow hover:underline">
                Forgot Password?
              </Link>
            </div>
            <div className="relative">
              <Input
                id="password"
                type={showPassword ? "text" : "password"}
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="Enter your password"
                className="pl-10"
              />
              <Key className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
              <button
                type="button"
                onClick={() => setShowPassword(!showPassword)}
                className="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground"
              >
                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
              </button>
            </div>
          </div>

<NeumoButton
            type="submit"
            variant="primary"
            className="w-full transition-all duration-300 hover:scale-105"
            disabled={isLoading}
          >
            {isLoading ? (
              <span className="flex items-center justify-center">
                <svg
                  className="animate-spin -ml-1 mr-3 h-5 w-5"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                >
                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                  <path
                    className="opacity-75"
                    fill="currentColor"
                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                  ></path>
                </svg>
                Logging in...
              </span>
            ) : (
              <span className="flex items-center justify-center">
                Login
                <ArrowRight className="ml-2 h-4 w-4" />
              </span>
            )}
          </NeumoButton>
        </form>

<div className="mt-6 text-center">
          <p className="text-sm text-muted-foreground">
            Don't have an account?{" "}
            <Link
              href={`/signup${returnUrl !== "/dashboard" ? `?returnUrl=${returnUrl}` : ""}`}
              className="text-sc-yellow hover:underline"
            >
              Sign up
            </Link>
          </p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/login/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/signup/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { Input } from "@/components/ui/input"
import { NeumoButton } from "@/components/ui/neumo-button"
import { Eye, EyeOff, User, Mail, Key, Bookmark, ArrowRight } from "lucide-react"
import Link from "next/link"
import { useRouter, useSearchParams } from "next/navigation"
import { useTheme } from "@/contexts/theme-context"
import { toast } from "sonner"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { z } from "zod"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { useAuth } from "@/contexts/auth-context"

const signupSchema = z
  .object({
    name: z.string().min(2, "Name must be at least 2 characters"),
    class: z.string().min(1, "Class is required"),
    role: z.enum(["student", "tutor"], {
      required_error: "Please select a role",
    }),
    nickname: z.string().min(2, "Nickname must be at least 2 characters"),
    email: z.string().email("Please enter a valid email"),
    password: z.string().min(6, "Password must be at least 6 characters"),
    confirmPassword: z.string().min(6, "Password must be at least 6 characters"),
  })
  .refine((data) => data.password === data.confirmPassword, {
    message: "Passwords do not match",
    path: ["confirmPassword"],
  })

type SignupFormValues = z.infer<typeof signupSchema>

export default function SignupPage() {
  const [showPassword, setShowPassword] = useState(false)
  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const { theme } = useTheme()
  const { signup, isAuthenticated } = useAuth()
  const router = useRouter()
  const searchParams = useSearchParams()
  const returnUrl = searchParams.get("returnUrl") || "/dashboard"

// Use useEffect for redirection instead of conditional rendering
  useEffect(() => {
    if (isAuthenticated) {
      router.push(returnUrl)
    }
  }, [isAuthenticated, router, returnUrl])

const form = useForm<SignupFormValues>({
    resolver: zodResolver(signupSchema),
    defaultValues: {
      name: "",
      class: "",
      role: "student",
      nickname: "",
      email: "",
      password: "",
      confirmPassword: "",
    },
  })

const onSubmit = async (values: SignupFormValues) => {
    setIsLoading(true)

try {
      const success = await signup(values.name, values.email, values.password, values.role as "student" | "tutor")

if (success) {
        toast.success("Account created successfully!")
        router.push(returnUrl)
      }
    } catch (error) {
      console.error("Signup error:", error)
      toast.error("Failed to create account. Please try again.")
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="container mx-auto px-4 py-16 flex justify-center items-center min-h-[80vh]">
      <div
        className={`w-full max-w-md p-8 rounded-xl transition-all duration-300 hover:scale-[1.02] ${
          theme === "dark"
            ? "bg-card border border-border shadow-neumo-dark"
            : "bg-card border border-border shadow-neumo"
        }`}
      >
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold text-gradient mb-2">Join StudentConnect</h1>
          <p className="text-muted-foreground">Create an account to start your learning journey</p>
          {returnUrl && returnUrl !== "/dashboard" && (
            <div className="mt-2 text-sm text-blue-600 dark:text-blue-400">Sign up to access your study plan</div>
          )}
        </div>

<FormField
              control={form.control}
              name="class"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Class</FormLabel>
                  <FormControl>
                    <Input placeholder="e.g., 10th, 12th, College" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

<FormField
              control={form.control}
              name="role"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Role</FormLabel>
                  <Select onValueChange={field.onChange} defaultValue={field.value}>
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue placeholder="Select your role" />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      <SelectItem value="student">Student</SelectItem>
                      <SelectItem value="tutor">Tutor</SelectItem>
                    </SelectContent>
                  </Select>
                  <FormMessage />
                </FormItem>
              )}
            />

<FormField
              control={form.control}
              name="nickname"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Nickname (for password recovery)</FormLabel>
                  <FormControl>
                    <div className="relative">
                      <Input placeholder="Enter a nickname" {...field} className="pl-10" />
                      <Bookmark className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
                    </div>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

<FormField
              control={form.control}
              name="email"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Email</FormLabel>
                  <FormControl>
                    <div className="relative">
                      <Input type="email" placeholder="Enter your email" {...field} className="pl-10" />
                      <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
                    </div>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

<FormField
              control={form.control}
              name="password"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Password</FormLabel>
                  <FormControl>
                    <div className="relative">
                      <Input
                        type={showPassword ? "text" : "password"}
                        placeholder="Create a password"
                        {...field}
                        className="pl-10"
                      />
                      <Key className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
                      <button
                        type="button"
                        onClick={() => setShowPassword(!showPassword)}
                        className="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground"
                      >
                        {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                      </button>
                    </div>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

<FormField
              control={form.control}
              name="confirmPassword"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Confirm Password</FormLabel>
                  <FormControl>
                    <div className="relative">
                      <Input
                        type={showConfirmPassword ? "text" : "password"}
                        placeholder="Confirm your password"
                        {...field}
                        className="pl-10"
                      />
                      <Key className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
                      <button
                        type="button"
                        onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                        className="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground"
                      >
                        {showConfirmPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                      </button>
                    </div>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

<NeumoButton
              type="submit"
              variant="primary"
              className="w-full mt-6 transition-all duration-300 hover:scale-105"
              disabled={isLoading}
            >
              {isLoading ? (
                <span className="flex items-center justify-center">
                  <svg
                    className="animate-spin -ml-1 mr-3 h-5 w-5"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                  >
                    <circle
                      className="opacity-25"
                      cx="12"
                      cy="12"
                      r="10"
                      stroke="currentColor"
                      strokeWidth="4"
                    ></circle>
                    <path
                      className="opacity-75"
                      fill="currentColor"
                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                    ></path>
                  </svg>
                  Creating Account...
                </span>
              ) : (
                <span className="flex items-center justify-center">
                  Create Account
                  <ArrowRight className="ml-2 h-4 w-4" />
                </span>
              )}
            </NeumoButton>
          </form>
        </Form>

<div className="mt-6 text-center">
          <p className="text-sm text-muted-foreground">
            Already have an account?{" "}
            <Link
              href={`/login${returnUrl !== "/dashboard" ? `?returnUrl=${returnUrl}` : ""}`}
              className="text-sc-yellow hover:underline"
            >
              Log in
            </Link>
          </p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/signup/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}</article></body></html>