[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # Mr Om Prakash Paudel website *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/gaurabs-projects-1fe937cd/v0-gaurav-paudel-new-website) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/rHeonzh1kLj) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/gaurabs-projects-1fe937cd/v0-gaurav-paudel-new-website](https://vercel.com/gaurabs-projects-1fe937cd/v0-gaurav-paudel-new-website)** ## Build your app Continue building your app on: **[https://v0.app/chat/rHeonzh1kLj](https://v0.app/chat/rHeonzh1kLj)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/admin/dashboard/page.tsx" "use client" import { useEffect, useState } from "react" import { AdminDashboard } from "@/components/admin/admin-dashboard" export default function AdminPage() { const [isAuth, setIsAuth] = useState(false) const [checking, setChecking] = useState(true) useEffect(() => { const loggedIn = localStorage.getItem("admin_logged_in") if (loggedIn === "true") { setIsAuth(true) } else { window.location.href = "/admin/login" return } setChecking(false) }, []) if (checking || !isAuth) { return (

Loading dashboard...

) } return } [V0_FILE]typescriptreact:file="app/admin/login/page.tsx" "use client" import type React from "react" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Mountain, Lock, User, AlertCircle } from "lucide-react" import { Alert, AlertDescription } from "@/components/ui/alert" export default function AdminLoginPage() { const [username, setUsername] = useState("") const [password, setPassword] = useState("") const [error, setError] = useState("") const [isLoading, setIsLoading] = useState(false) useEffect(() => { if (typeof window !== "undefined" && localStorage.getItem("admin_logged_in") === "true") { window.location.href = "/admin/dashboard" } }, []) const handleLogin = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError("") try { const res = await fetch("/api/admin/login", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ username, password }), }) const data = await res.json() if (data.success) { localStorage.setItem("admin_logged_in", "true") localStorage.setItem("admin_user", username) window.location.href = "/admin/dashboard" } else { setError(data.error || "Invalid credentials") } } catch { setError("Connection error. Please try again.") } finally { setIsLoading(false) } } return (

Admin Login Portfolio Management Dashboard

Secure Access Only

) } [V0_FILE]typescriptreact:file="app/admin/messages/page.tsx" import { AdminLayout } from "@/components/admin/admin-layout" import { Card } from "@/components/ui/card" import { MessageSquare, Calendar, Mail, User, Trash2 } from "lucide-react" import { Button } from "@/components/ui/button" import { sql } from "@/lib/db" async function getMessages() { try { return await sql`SELECT * FROM messages ORDER BY created_at DESC` } catch (e) { return [] } } export default async function AdminMessagesPage() { const messages = await getMessages() return (

Inbox

Communication from your website visitors.

{messages.length > 0 ? ( messages.map((msg) => (

{msg.name}

{msg.email}

{new Date(msg.created_at).toLocaleDateString()}

{msg.subject || "No Subject"}

{msg.message}

)) ) : (

Your inbox is empty

New contact form submissions will appear here.

)}

) } [V0_FILE]typescriptreact:file="app/admin/sections/page.tsx" import { AdminLayout } from "@/components/admin/admin-layout" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Layout, User, Award, Home } from "lucide-react" export default function AdminSectionsPage() { const sections = [ { id: "hero", name: "Hero Section", icon: Home, description: "Headline, subheadline, and profile image" }, { id: "about", name: "About Section", icon: User, description: "Education, travel identity, and bio" }, { id: "experience", name: "Experience", icon: Layout, description: "Leadership and professional roles" }, { id: "achievements", name: "Achievements", icon: Award, description: "Major milestones and highlights" }, ] return (

Website Content

Manage the dynamic sections of your landing page.

{sections.map((section) => (

{section.name} {section.description}

))}

) } [V0_FILE]typescriptreact:file="app/admin/treks/page.tsx" import { AdminLayout } from "@/components/admin/admin-layout" import { Button } from "@/components/ui/button" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Mountain, Plus, Edit, Trash2, Eye } from "lucide-react" import { sql } from "@/lib/db" import Image from "next/image" async function getTreks() { try { return await sql`SELECT * FROM treks ORDER BY order_index ASC` } catch (e) { // Fallback if table doesn't exist yet return [] } } export default async function AdminTreksPage() { const treks = await getTreks() return (

Manage Treks

Add, edit, or remove trekking experiences.

Preview Trek Name Elevation Difficulty Actions {treks.length > 0 ? ( treks.map((trek) => (

{trek.name} {trek.elevation} {trek.difficulty}

)) ) : (

No treks found in the database.

Run the setup scripts to initialize data.

)}

) } [V0_FILE]typescript:file="app/api/admin/about/route.ts" import { NextRequest, NextResponse } from 'next/server' import { getAdminSession } from '@/lib/admin-server-actions' export async function GET(request: NextRequest) { try { const admin = await getAdminSession() if (!admin) { return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }) } // TODO: Fetch from Neon DB return NextResponse.json({}) } catch (error) { console.error('Error:', error) return NextResponse.json({ error: 'Failed to fetch' }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const admin = await getAdminSession() if (!admin) { return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }) } const body = await request.json() // TODO: Save to Neon DB return NextResponse.json({ success: true, data: body }) } catch (error) { console.error('Error:', error) return NextResponse.json({ error: 'Failed to create' }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/admin/achievements/route.ts" import { NextRequest, NextResponse } from 'next/server' import { getAdminSession } from '@/lib/admin-server-actions' export async function GET(request: NextRequest) { try { const admin = await getAdminSession() if (!admin) { return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }) } // TODO: Fetch from Neon DB return NextResponse.json([]) } catch (error) { console.error('Error:', error) return NextResponse.json({ error: 'Failed to fetch' }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const admin = await getAdminSession() if (!admin) { return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }) } const body = await request.json() // TODO: Save to Neon DB return NextResponse.json({ success: true, data: body }) } catch (error) { console.error('Error:', error) return NextResponse.json({ error: 'Failed to create' }, { status: 500 }) } } export async function DELETE(request: NextRequest) { try { const admin = await getAdminSession() if (!admin) { return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }) } const { searchParams } = new URL(request.url) const id = searchParams.get('id') // TODO: Delete from Neon DB return NextResponse.json({ success: true, deletedId: id }) } catch (error) { console.error('Error:', error) return NextResponse.json({ error: 'Failed to delete' }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/admin/content/route.ts" import { type NextRequest, NextResponse } from "next/server" import { neon } from "@neondatabase/serverless" const sql = neon(process.env.DATABASE_URL!) // GET all content for a table export async function GET(request: NextRequest) { const table = request.nextUrl.searchParams.get("table") const allowed = ["about", "skills", "experience", "education", "projects", "achievements", "treks"] if (!table || !allowed.includes(table)) { return NextResponse.json({ error: "Invalid table" }, { status: 400 }) } try { let data switch (table) { case "about": data = await sql`SELECT * FROM portfolio_about ORDER BY id`; break case "skills": data = await sql`SELECT * FROM portfolio_skills ORDER BY sort_order, id`; break case "experience": data = await sql`SELECT * FROM portfolio_experience ORDER BY sort_order, id`; break case "education": data = await sql`SELECT * FROM portfolio_education ORDER BY sort_order, id`; break case "projects": data = await sql`SELECT * FROM portfolio_projects ORDER BY sort_order, id`; break case "achievements": data = await sql`SELECT * FROM portfolio_achievements ORDER BY sort_order, id`; break case "treks": data = await sql`SELECT * FROM portfolio_treks ORDER BY sort_order, id`; break } return NextResponse.json({ data }) } catch (error) { console.error("Fetch error:", error) return NextResponse.json({ error: "Failed to fetch" }, { status: 500 }) } } // POST create new item export async function POST(request: NextRequest) { const body = await request.json() const { table, ...f } = body try { let result switch (table) { case "about": result = await sql`INSERT INTO portfolio_about (title, subtitle, description, image_url) VALUES (${f.title}, ${f.subtitle}, ${f.description}, ${f.image_url || null}) RETURNING *` break case "skills": result = await sql`INSERT INTO portfolio_skills (name, category, proficiency, sort_order) VALUES (${f.name}, ${f.category}, ${f.proficiency || 80}, ${f.sort_order || 0}) RETURNING *` break case "experience": result = await sql`INSERT INTO portfolio_experience (title, company, location, start_date, end_date, description, is_current, sort_order) VALUES (${f.title}, ${f.company}, ${f.location || null}, ${f.start_date}, ${f.end_date || null}, ${f.description}, ${f.is_current || false}, ${f.sort_order || 0}) RETURNING *` break case "education": result = await sql`INSERT INTO portfolio_education (degree, institution, location, start_date, end_date, description, sort_order) VALUES (${f.degree}, ${f.institution}, ${f.location || null}, ${f.start_date}, ${f.end_date || null}, ${f.description || null}, ${f.sort_order || 0}) RETURNING *` break case "projects": result = await sql`INSERT INTO portfolio_projects (title, description, category, tech_stack, image_url, live_url, github_url, status, sort_order) VALUES (${f.title}, ${f.description}, ${f.category || null}, ${f.tech_stack || null}, ${f.image_url || null}, ${f.live_url || null}, ${f.github_url || null}, ${f.status || "completed"}, ${f.sort_order || 0}) RETURNING *` break case "achievements": result = await sql`INSERT INTO portfolio_achievements (title, description, date_achieved, icon, sort_order) VALUES (${f.title}, ${f.description || null}, ${f.date_achieved || null}, ${f.icon || null}, ${f.sort_order || 0}) RETURNING *` break case "treks": result = await sql`INSERT INTO portfolio_treks (name, location, altitude, duration, difficulty, description, image_url, date_completed, sort_order) VALUES (${f.name}, ${f.location || null}, ${f.altitude || null}, ${f.duration || null}, ${f.difficulty || null}, ${f.description || null}, ${f.image_url || null}, ${f.date_completed || null}, ${f.sort_order || 0}) RETURNING *` break default: return NextResponse.json({ error: "Invalid table" }, { status: 400 }) } return NextResponse.json({ data: result[0] }) } catch (error) { console.error("Create error:", error) return NextResponse.json({ error: "Failed to create" }, { status: 500 }) } } // PUT update item export async function PUT(request: NextRequest) { const body = await request.json() const { table, id, ...f } = body try { let result switch (table) { case "about": result = await sql`UPDATE portfolio_about SET title=${f.title}, subtitle=${f.subtitle}, description=${f.description}, image_url=${f.image_url || null}, updated_at=NOW() WHERE id=${id} RETURNING *` break case "skills": result = await sql`UPDATE portfolio_skills SET name=${f.name}, category=${f.category}, proficiency=${f.proficiency || 80}, sort_order=${f.sort_order || 0} WHERE id=${id} RETURNING *` break case "experience": result = await sql`UPDATE portfolio_experience SET title=${f.title}, company=${f.company}, location=${f.location || null}, start_date=${f.start_date}, end_date=${f.end_date || null}, description=${f.description}, is_current=${f.is_current || false}, sort_order=${f.sort_order || 0} WHERE id=${id} RETURNING *` break case "education": result = await sql`UPDATE portfolio_education SET degree=${f.degree}, institution=${f.institution}, location=${f.location || null}, start_date=${f.start_date}, end_date=${f.end_date || null}, description=${f.description || null}, sort_order=${f.sort_order || 0} WHERE id=${id} RETURNING *` break case "projects": result = await sql`UPDATE portfolio_projects SET title=${f.title}, description=${f.description}, category=${f.category || null}, tech_stack=${f.tech_stack || null}, image_url=${f.image_url || null}, live_url=${f.live_url || null}, github_url=${f.github_url || null}, status=${f.status || "completed"}, sort_order=${f.sort_order || 0} WHERE id=${id} RETURNING *` break case "achievements": result = await sql`UPDATE portfolio_achievements SET title=${f.title}, description=${f.description || null}, date_achieved=${f.date_achieved || null}, icon=${f.icon || null}, sort_order=${f.sort_order || 0} WHERE id=${id} RETURNING *` break case "treks": result = await sql`UPDATE portfolio_treks SET name=${f.name}, location=${f.location || null}, altitude=${f.altitude || null}, duration=${f.duration || null}, difficulty=${f.difficulty || null}, description=${f.description || null}, image_url=${f.image_url || null}, date_completed=${f.date_completed || null}, sort_order=${f.sort_order || 0} WHERE id=${id} RETURNING *` break default: return NextResponse.json({ error: "Invalid table" }, { status: 400 }) } return NextResponse.json({ data: result[0] }) } catch (error) { console.error("Update error:", error) return NextResponse.json({ error: "Failed to update" }, { status: 500 }) } } // DELETE item export async function DELETE(request: NextRequest) { const table = request.nextUrl.searchParams.get("table") const id = request.nextUrl.searchParams.get("id") if (!table || !id) { return NextResponse.json({ error: "Table and ID required" }, { status: 400 }) } const allowed = ["skills", "experience", "education", "projects", "achievements", "treks"] if (!allowed.includes(table)) { return NextResponse.json({ error: "Invalid table" }, { status: 400 }) } try { const numId = Number(id) switch (table) { case "skills": await sql`DELETE FROM portfolio_skills WHERE id = ${numId}`; break case "experience": await sql`DELETE FROM portfolio_experience WHERE id = ${numId}`; break case "education": await sql`DELETE FROM portfolio_education WHERE id = ${numId}`; break case "projects": await sql`DELETE FROM portfolio_projects WHERE id = ${numId}`; break case "achievements": await sql`DELETE FROM portfolio_achievements WHERE id = ${numId}`; break case "treks": await sql`DELETE FROM portfolio_treks WHERE id = ${numId}`; break } return NextResponse.json({ success: true }) } catch (error) { console.error("Delete error:", error) return NextResponse.json({ error: "Failed to delete" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/admin/education/route.ts" import { NextRequest, NextResponse } from 'next/server' import { getAdminSession } from '@/lib/admin-server-actions' export async function GET(request: NextRequest) { try { const admin = await getAdminSession() if (!admin) { return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }) } // TODO: Fetch from Neon DB return NextResponse.json([]) } catch (error) { console.error('Error:', error) return NextResponse.json({ error: 'Failed to fetch' }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const admin = await getAdminSession() if (!admin) { return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }) } const body = await request.json() // TODO: Save to Neon DB return NextResponse.json({ success: true, data: body }) } catch (error) { console.error('Error:', error) return NextResponse.json({ error: 'Failed to create' }, { status: 500 }) } } export async function DELETE(request: NextRequest) { try { const admin = await getAdminSession() if (!admin) { return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }) } const { searchParams } = new URL(request.url) const id = searchParams.get('id') // TODO: Delete from Neon DB return NextResponse.json({ success: true, deletedId: id }) } catch (error) { console.error('Error:', error) return NextResponse.json({ error: 'Failed to delete' }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/admin/experience/route.ts" import { NextRequest, NextResponse } from 'next/server' import { getAdminSession } from '@/lib/admin-server-actions' export async function GET(request: NextRequest) { try { const admin = await getAdminSession() if (!admin) { return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }) } // TODO: Fetch from Neon DB return NextResponse.json([]) } catch (error) { console.error('Error:', error) return NextResponse.json({ error: 'Failed to fetch' }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const admin = await getAdminSession() if (!admin) { return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }) } const body = await request.json() // TODO: Save to Neon DB return NextResponse.json({ success: true, data: body }) } catch (error) { console.error('Error:', error) return NextResponse.json({ error: 'Failed to create' }, { status: 500 }) } } export async function DELETE(request: NextRequest) { try { const admin = await getAdminSession() if (!admin) { return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }) } const { searchParams } = new URL(request.url) const id = searchParams.get('id') // TODO: Delete from Neon DB return NextResponse.json({ success: true, deletedId: id }) } catch (error) { console.error('Error:', error) return NextResponse.json({ error: 'Failed to delete' }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/admin/login/route.ts" import { type NextRequest, NextResponse } from "next/server" import { neon } from "@neondatabase/serverless" const sql = neon(process.env.DATABASE_URL!) export async function POST(request: NextRequest) { try { const { username, password } = await request.json() if (!username || !password) { return NextResponse.json({ error: "Username and password required" }, { status: 400 }) } const users = await sql`SELECT id, username FROM admin_users WHERE username = ${username} AND password = ${password}` if (users.length === 0) { return NextResponse.json({ error: "Invalid credentials" }, { status: 401 }) } return NextResponse.json({ success: true, user: users[0].username }) } catch (error) { console.error("Login error:", error) return NextResponse.json({ error: "Server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/admin/logout/route.ts" import { NextResponse } from "next/server" export async function POST() { const response = NextResponse.json({ success: true }) response.cookies.delete("admin_session") return response } [V0_FILE]typescript:file="app/api/admin/projects/route.ts" import { NextRequest, NextResponse } from 'next/server' import { getAdminSession } from '@/lib/admin-server-actions' export async function GET(request: NextRequest) { try { const admin = await getAdminSession() if (!admin) { return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }) } // TODO: Fetch from Neon DB return NextResponse.json([]) } catch (error) { console.error('Error:', error) return NextResponse.json({ error: 'Failed to fetch' }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const admin = await getAdminSession() if (!admin) { return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }) } const body = await request.json() // TODO: Save to Neon DB return NextResponse.json({ success: true, data: body }) } catch (error) { console.error('Error:', error) return NextResponse.json({ error: 'Failed to create' }, { status: 500 }) } } export async function DELETE(request: NextRequest) { try { const admin = await getAdminSession() if (!admin) { return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }) } const { searchParams } = new URL(request.url) const id = searchParams.get('id') // TODO: Delete from Neon DB return NextResponse.json({ success: true, deletedId: id }) } catch (error) { console.error('Error:', error) return NextResponse.json({ error: 'Failed to delete' }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/admin/skills/route.ts" import { NextRequest, NextResponse } from 'next/server' import { getAdminSession } from '@/lib/admin-server-actions' // GET all skills export async function GET(request: NextRequest) { try { const admin = await getAdminSession() if (!admin) { return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }) } // For now, return mock data. In production, fetch from Neon DB const skills = [ { id: '1', name: 'Next.js', category: 'Frontend', proficiency_level: 'Expert' }, { id: '2', name: 'React', category: 'Frontend', proficiency_level: 'Expert' }, { id: '3', name: 'TypeScript', category: 'Language', proficiency_level: 'Advanced' }, { id: '4', name: 'PostgreSQL', category: 'Database', proficiency_level: 'Advanced' }, ] return NextResponse.json(skills) } catch (error) { console.error('Error fetching skills:', error) return NextResponse.json({ error: 'Failed to fetch skills' }, { status: 500 }) } } // POST create skill export async function POST(request: NextRequest) { try { const admin = await getAdminSession() if (!admin) { return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }) } const body = await request.json() // TODO: Save to Neon DB return NextResponse.json({ success: true, data: body }) } catch (error) { console.error('Error creating skill:', error) return NextResponse.json({ error: 'Failed to create skill' }, { status: 500 }) } } // PUT update skill export async function PUT(request: NextRequest) { try { const admin = await getAdminSession() if (!admin) { return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }) } const body = await request.json() // TODO: Update in Neon DB return NextResponse.json({ success: true, data: body }) } catch (error) { console.error('Error updating skill:', error) return NextResponse.json({ error: 'Failed to update skill' }, { status: 500 }) } } // DELETE skill export async function DELETE(request: NextRequest) { try { const admin = await getAdminSession() if (!admin) { return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }) } const { searchParams } = new URL(request.url) const id = searchParams.get('id') // TODO: Delete from Neon DB return NextResponse.json({ success: true, deletedId: id }) } catch (error) { console.error('Error deleting skill:', error) return NextResponse.json({ error: 'Failed to delete skill' }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/chat/route.ts" import { streamText } from "ai" import { createOpenAI } from "@ai-sdk/openai" const deepseek = createOpenAI({ apiKey: process.env.DEEPSEEK_API_KEY, baseURL: "https://api.deepseek.com", }) export async function POST(req: Request) { const { messages, personalityType, big5Scores, testType } = await req.json() let systemPrompt = `You are a helpful and friendly assistant. Provide concise and useful information.` if (testType === "MBTI" && personalityType) { systemPrompt = `You are a professional MBTI personality counseling assistant. The user has been identified as ${personalityType} personality type. Your role is to: - Provide personalized advice based on their MBTI type - Help them understand their strengths and growth areas - Offer practical strategies for personal and professional development - Answer questions about relationships, career, and life decisions through the lens of their personality type - Be supportive, insightful, and encouraging Key traits of ${personalityType}: - Strategic thinker with natural drive for implementing ideas - Independent and determined - Values competence and efficiency - Prefers working alone or in small groups - Future-focused and goal-oriented - Can be perfectionistic and critical Always tailor your responses to their specific personality type and provide actionable insights.` } else if (testType === "BIG5" && big5Scores) { const { O, C, E, A, N } = big5Scores systemPrompt = `You are a professional Big 5 personality analysis assistant. The user has completed a Big 5 personality test with the following scores (each trait is scored out of a maximum of 60, where a higher score indicates more of that trait): - Openness to Experience (O): ${O}/60 - Conscientiousness (C): ${C}/60 - Extraversion (E): ${E}/60 - Agreeableness (A): ${A}/60 - Neuroticism (N): ${N}/60 Based on these scores, provide a comprehensive summary of their personality. Explain what each score generally indicates and how these traits might combine to describe their overall personality. Offer insights into potential strengths, challenges, and general tendencies. Keep the language professional and insightful.` } const result = await streamText({ model: deepseek("deepseek-reasoner"), messages: [{ role: "system", content: systemPrompt }, ...messages], temperature: 0.7, maxTokens: 1000, }) return result.toDataStreamResponse() } [V0_FILE]typescript:file="app/api/portfolio/route.ts" import { NextResponse } from "next/server" import { neon } from "@neondatabase/serverless" const sql = neon(process.env.DATABASE_URL!) export async function GET() { try { const [about, skills, experience, education, projects, achievements, treks] = await Promise.all([ sql`SELECT * FROM portfolio_about ORDER BY id LIMIT 1`, sql`SELECT * FROM portfolio_skills ORDER BY sort_order, id`, sql`SELECT * FROM portfolio_experience ORDER BY sort_order, id`, sql`SELECT * FROM portfolio_education ORDER BY sort_order, id`, sql`SELECT * FROM portfolio_projects ORDER BY sort_order, id`, sql`SELECT * FROM portfolio_achievements ORDER BY sort_order, id`, sql`SELECT * FROM portfolio_treks ORDER BY sort_order, id`, ]) return NextResponse.json({ about: about[0] || null, skills, experience, education, projects, achievements, treks, }) } catch (error) { console.error("Portfolio fetch error:", error) return NextResponse.json({ error: "Failed to fetch portfolio data" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/contact/page.tsx" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Mail, MapPin, Phone } from "lucide-react" import Image from "next/image" import { AnimateOnScroll, AnimateStagger } from "@/components/scroll-animation" export default function Contact() { return (

{/* Hero Image Card - Full width on mobile */} Mountain view

Let's Connect

{/* Contact Information Card */} Contact Information {[

Phone

+977 9845952270

paudelg97@gmail.com

Location

Madi 05, Chitwan

, ]} {/* Contact Form Card */} Get in Touch

Name

Subject

Message

</div>
                  </AnimateOnScroll>
                  {/* Hidden fields to ensure emails go to your address */}
                  <input type="hidden" name="_replyto" value="paudelg97@gmail.com" />
                  <input type="hidden" name="_subject" value="New message from portfolio website" />
                  <AnimateOnScroll animation="bounce" delay={0.9}>
                    <Button type="submit" className="w-full h-11 text-base">
                      Send Message
                    </Button>
                  </AnimateOnScroll>
                </form>
              </CardContent>
            </Card>
          </AnimateOnScroll>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/games/page.tsx"
"use client"

import type React from "react"

import { useState, useEffect, useCallback, Suspense } from "react"
import { EnhancedButton } from "@/components/enhanced-button"
import { EnhancedCard, EnhancedCardContent, EnhancedCardHeader, EnhancedCardTitle } from "@/components/enhanced-card"
import { Badge } from "@/components/ui/badge"
import { AnimateOnScroll } from "@/components/scroll-animation"
import { GamesSkeleton } from "@/components/loading-states"
import { Gamepad2, Play, Pause, RotateCcw, Zap, Target, Puzzle } from "lucide-react"

// Snake Game Component (keeping existing logic but with enhanced UI)
const SnakeGame = () => {
  const [snake, setSnake] = useState([[10, 10]])
  const [food, setFood] = useState([15, 15])
  const [direction, setDirection] = useState([0, 1])
  const [gameRunning, setGameRunning] = useState(false)
  const [score, setScore] = useState(0)
  const [gameOver, setGameOver] = useState(false)
  const [loading, setLoading] = useState(false)

const BOARD_SIZE = 20

const moveSnake = useCallback(() => {
    if (!gameRunning || gameOver) return

setSnake((currentSnake) => {
      const newSnake = [...currentSnake]
      const head = [newSnake[0][0] + direction[0], newSnake[0][1] + direction[1]]

// Check wall collision
      if (head[0] < 0 || head[0] >= BOARD_SIZE || head[1] < 0 || head[1] >= BOARD_SIZE) {
        setGameOver(true)
        setGameRunning(false)
        return currentSnake
      }

// Check self collision
      if (newSnake.some((segment) => segment[0] === head[0] && segment[1] === head[1])) {
        setGameOver(true)
        setGameRunning(false)
        return currentSnake
      }

newSnake.unshift(head)

// Check food collision
      if (head[0] === food[0] && head[1] === food[1]) {
        setScore((prev) => prev + 10)
        setFood([Math.floor(Math.random() * BOARD_SIZE), Math.floor(Math.random() * BOARD_SIZE)])
      } else {
        newSnake.pop()
      }

return newSnake
    })
  }, [direction, food, gameRunning, gameOver])

useEffect(() => {
    const handleKeyPress = (e: KeyboardEvent) => {
      if (!gameRunning) return

switch (e.key) {
        case "ArrowUp":
          if (direction[0] !== 1) setDirection([-1, 0])
          break
        case "ArrowDown":
          if (direction[0] !== -1) setDirection([1, 0])
          break
        case "ArrowLeft":
          if (direction[1] !== 1) setDirection([0, -1])
          break
        case "ArrowRight":
          if (direction[1] !== -1) setDirection([0, 1])
          break
      }
    }

window.addEventListener("keydown", handleKeyPress)
    return () => window.removeEventListener("keydown", handleKeyPress)
  }, [direction, gameRunning])

useEffect(() => {
    const gameInterval = setInterval(moveSnake, 150)
    return () => clearInterval(gameInterval)
  }, [moveSnake])

const startGame = async () => {
    setLoading(true)
    await new Promise((resolve) => setTimeout(resolve, 500)) // Simulate loading
    setSnake([[10, 10]])
    setFood([15, 15])
    setDirection([0, 1])
    setScore(0)
    setGameOver(false)
    setGameRunning(true)
    setLoading(false)
  }

const pauseGame = () => {
    setGameRunning(!gameRunning)
  }

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <EnhancedButton onClick={startGame} size="sm" loading={loading}>
            <RotateCcw className="h-4 w-4 mr-2" />
            New Game
          </EnhancedButton>
          <EnhancedButton onClick={pauseGame} variant="outline" size="sm" disabled={gameOver}>
            {gameRunning ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
          </EnhancedButton>
        </div>
        <div className="flex items-center gap-4">
          <Badge variant="secondary">Score: {score}</Badge>
          {gameOver && <Badge variant="destructive">Game Over!</Badge>}
        </div>
      </div>

<div className="relative">
        <div
          className="grid border-2 border-primary/20 bg-background mx-auto rounded-lg overflow-hidden"
          style={{
            gridTemplateColumns: `repeat(${BOARD_SIZE}, 1fr)`,
            width: "400px",
            height: "400px",
          }}
        >
          {Array.from({ length: BOARD_SIZE * BOARD_SIZE }).map((_, index) => {
            const row = Math.floor(index / BOARD_SIZE)
            const col = index % BOARD_SIZE
            const isSnake = snake.some((segment) => segment[0] === row && segment[1] === col)
            const isFood = food[0] === row && food[1] === col
            const isHead = snake[0] && snake[0][0] === row && snake[0][1] === col

return (
              <div
                key={index}
                className={`border border-muted/20 transition-colors duration-150 ${
                  isSnake
                    ? isHead
                      ? "bg-primary animate-pulse"
                      : "bg-primary/70"
                    : isFood
                      ? "bg-red-500 animate-pulse"
                      : "bg-muted/5"
                }`}
              />
            )
          })}
        </div>

<div className="mt-4 text-center text-sm text-muted-foreground">Use arrow keys to control the snake</div>
      </div>
    </div>
  )
}

// Memory Game Component (enhanced with loading states)
const MemoryGame = () => {
  const [cards, setCards] = useState<number[]>([])
  const [flipped, setFlipped] = useState<number[]>([])
  const [matched, setMatched] = useState<number[]>([])
  const [moves, setMoves] = useState(0)
  const [gameWon, setGameWon] = useState(false)
  const [loading, setLoading] = useState(false)

const initializeGame = async () => {
    setLoading(true)
    await new Promise((resolve) => setTimeout(resolve, 300)) // Simulate loading
    const numbers = Array.from({ length: 8 }, (_, i) => i + 1)
    const gameCards = [...numbers, ...numbers].sort(() => Math.random() - 0.5)
    setCards(gameCards)
    setFlipped([])
    setMatched([])
    setMoves(0)
    setGameWon(false)
    setLoading(false)
  }

useEffect(() => {
    initializeGame()
  }, [])

const handleCardClick = (index: number) => {
    if (flipped.length === 2 || flipped.includes(index) || matched.includes(index)) {
      return
    }

const newFlipped = [...flipped, index]
    setFlipped(newFlipped)

if (newFlipped.length === 2) {
      setMoves((prev) => prev + 1)

if (cards[newFlipped[0]] === cards[newFlipped[1]]) {
        setMatched((prev) => [...prev, ...newFlipped])
        setFlipped([])

if (matched.length + 2 === cards.length) {
          setGameWon(true)
        }
      } else {
        setTimeout(() => setFlipped([]), 1000)
      }
    }
  }

if (loading) {
    return (
      <div className="space-y-4">
        <div className="flex items-center justify-center h-64">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
        </div>
      </div>
    )
  }

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <EnhancedButton onClick={initializeGame} size="sm" loading={loading}>
          <RotateCcw className="h-4 w-4 mr-2" />
          New Game
        </EnhancedButton>
        <div className="flex items-center gap-4">
          <Badge variant="secondary">Moves: {moves}</Badge>
          {gameWon && <Badge variant="default">You Won! 🎉</Badge>}
        </div>
      </div>

<div className="grid grid-cols-4 gap-2 max-w-md mx-auto">
        {cards.map((card, index) => (
          <button
            key={index}
            onClick={() => handleCardClick(index)}
            className={`aspect-square rounded-lg border-2 text-2xl font-bold transition-all duration-200 hover:scale-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${
              flipped.includes(index) || matched.includes(index)
                ? "bg-primary text-primary-foreground border-primary transform scale-105"
                : "bg-muted hover:bg-muted/80 border-muted-foreground/20"
            }`}
            disabled={flipped.length === 2 && !flipped.includes(index)}
            aria-label={`Card ${index + 1}, ${flipped.includes(index) || matched.includes(index) ? `showing ${card}` : "hidden"}`}
          >
            {flipped.includes(index) || matched.includes(index) ? card : "?"}
          </button>
        ))}
      </div>
    </div>
  )
}

// Number Guessing Game Component (enhanced)
const NumberGuessingGame = () => {
  const [targetNumber, setTargetNumber] = useState(0)
  const [guess, setGuess] = useState("")
  const [attempts, setAttempts] = useState(0)
  const [feedback, setFeedback] = useState("")
  const [gameWon, setGameWon] = useState(false)
  const [gameStarted, setGameStarted] = useState(false)
  const [loading, setLoading] = useState(false)

const startNewGame = async () => {
    setLoading(true)
    await new Promise((resolve) => setTimeout(resolve, 300)) // Simulate loading
    setTargetNumber(Math.floor(Math.random() * 100) + 1)
    setGuess("")
    setAttempts(0)
    setFeedback("")
    setGameWon(false)
    setGameStarted(true)
    setLoading(false)
  }

const makeGuess = () => {
    const guessNumber = Number.parseInt(guess)
    if (isNaN(guessNumber) || guessNumber < 1 || guessNumber > 100) {
      setFeedback("Please enter a number between 1 and 100")
      return
    }

setAttempts((prev) => prev + 1)

if (guessNumber === targetNumber) {
      setFeedback(`🎉 Congratulations! You guessed it in ${attempts + 1} attempts!`)
      setGameWon(true)
    } else if (guessNumber < targetNumber) {
      setFeedback("📈 Too low! Try a higher number.")
    } else {
      setFeedback("📉 Too high! Try a lower number.")
    }

setGuess("")
  }

const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !gameWon && guess) {
      makeGuess()
    }
  }

return (
    <div className="space-y-4">
      <div className="text-center">
        {!gameStarted ? (
          <div>
            <p className="mb-4">I'm thinking of a number between 1 and 100!</p>
            <EnhancedButton onClick={startNewGame} loading={loading}>
              <Play className="h-4 w-4 mr-2" />
              Start Game
            </EnhancedButton>
          </div>
        ) : (
          <div className="space-y-4">
            <div className="flex items-center gap-2 max-w-xs mx-auto">
              <input
                type="number"
                min="1"
                max="100"
                value={guess}
                onChange={(e) => setGuess(e.target.value)}
                onKeyPress={handleKeyPress}
                placeholder="Enter your guess"
                className="flex-1 px-3 py-2 border rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                disabled={gameWon}
                aria-label="Enter your guess between 1 and 100"
              />
              <EnhancedButton onClick={makeGuess} disabled={gameWon || !guess}>
                Guess
              </EnhancedButton>
            </div>

<div className="space-y-2">
              <Badge variant="secondary">Attempts: {attempts}</Badge>
              {feedback && (
                <div
                  className={`p-3 rounded-lg transition-all duration-200 ${
                    gameWon
                      ? "bg-green-100 text-green-800 dark:bg-green-950 dark:text-green-200"
                      : "bg-blue-100 text-blue-800 dark:bg-blue-950 dark:text-blue-200"
                  }`}
                  role="status"
                  aria-live="polite"
                >
                  {feedback}
                </div>
              )}
            </div>

<EnhancedButton onClick={startNewGame} variant="outline" size="sm" loading={loading}>
              <RotateCcw className="h-4 w-4 mr-2" />
              New Game
            </EnhancedButton>
          </div>
        )}
      </div>
    </div>
  )
}

export default function Games() {
  const [selectedGame, setSelectedGame] = useState<string | null>(null)
  const [loading, setLoading] = useState(true)

useEffect(() => {
    // Simulate initial loading
    const timer = setTimeout(() => {
      setLoading(false)
    }, 1000)

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

const games = [
    {
      id: "snake",
      title: "Snake Game",
      description: "Classic snake game - eat food and grow longer!",
      icon: Zap,
      difficulty: "Medium",
      category: "Arcade",
    },
    {
      id: "memory",
      title: "Memory Match",
      description: "Flip cards and match pairs to win",
      icon: Puzzle,
      difficulty: "Easy",
      category: "Puzzle",
    },
    {
      id: "number-guess",
      title: "Number Guessing",
      description: "Guess the number I'm thinking of!",
      icon: Target,
      difficulty: "Easy",
      category: "Logic",
    },
  ]

const renderGame = () => {
    switch (selectedGame) {
      case "snake":
        return <SnakeGame />
      case "memory":
        return <MemoryGame />
      case "number-guess":
        return <NumberGuessingGame />
      default:
        return null
    }
  }

if (loading) {
    return (
      <div className="container mx-auto px-4 py-8">
        <div className="text-center mb-12">
          <div className="h-8 w-48 bg-muted animate-pulse rounded mx-auto mb-4"></div>
          <div className="h-4 w-96 bg-muted animate-pulse rounded mx-auto"></div>
        </div>
        <GamesSkeleton />
      </div>
    )
  }

return (
    <div className="container mx-auto px-4 py-8">
      <AnimateOnScroll animation="fadeIn">
        <div className="text-center mb-12">
          <h1 className="text-3xl md:text-4xl font-bold mb-4">Fun Games</h1>
          <p className="text-muted-foreground max-w-2xl mx-auto">
            Take a break and enjoy these interactive games that work great on both mobile and desktop
          </p>
        </div>
      </AnimateOnScroll>

<div className="grid gap-8 lg:grid-cols-3">
        {/* Games List */}
        <div className="lg:col-span-1">
          <AnimateOnScroll animation="slideRight" delay={0.2}>
            <h2 className="text-2xl font-bold mb-6">Choose a Game</h2>
            <div className="space-y-4">
              {games.map((game, index) => (
                <AnimateOnScroll key={game.id} animation="slideUp" delay={0.1 + index * 0.1}>
                  <EnhancedCard
                    interactive
                    hover
                    className={`cursor-pointer transition-all ${
                      selectedGame === game.id ? "border-primary bg-primary/5" : ""
                    }`}
                    onClick={() => setSelectedGame(game.id)}
                    onKeyDown={(e) => {
                      if (e.key === "Enter" || e.key === " ") {
                        e.preventDefault()
                        setSelectedGame(game.id)
                      }
                    }}
                    role="button"
                    tabIndex={0}
                    aria-label={`Select ${game.title} game`}
                  >
                    <EnhancedCardContent className="p-4">
                      <div className="flex items-start gap-3">
                        <div className="p-2 bg-primary/10 rounded-lg">
                          <game.icon className="h-5 w-5 text-primary" />
                        </div>
                        <div className="flex-1">
                          <div className="flex items-center gap-2 mb-1">
                            <h3 className="font-semibold">{game.title}</h3>
                          </div>
                          <p className="text-sm text-muted-foreground mb-2">{game.description}</p>
                          <div className="flex gap-2">
                            <Badge variant="secondary" className="text-xs">
                              {game.category}
                            </Badge>
                            <Badge
                              variant="outline"
                              className={`text-xs ${
                                game.difficulty === "Easy"
                                  ? "border-green-500 text-green-700 dark:text-green-400"
                                  : game.difficulty === "Medium"
                                    ? "border-yellow-500 text-yellow-700 dark:text-yellow-400"
                                    : "border-red-500 text-red-700 dark:text-red-400"
                              }`}
                            >
                              {game.difficulty}
                            </Badge>
                          </div>
                        </div>
                      </div>
                    </EnhancedCardContent>
                  </EnhancedCard>
                </AnimateOnScroll>
              ))}
            </div>
          </AnimateOnScroll>
        </div>

{/* Game Area */}
        <div className="lg:col-span-2">
          <AnimateOnScroll animation="slideLeft" delay={0.2}>
            {selectedGame ? (
              <EnhancedCard hover>
                <EnhancedCardHeader>
                  <EnhancedCardTitle className="flex items-center gap-2">
                    <Gamepad2 className="h-5 w-5" />
                    {games.find((g) => g.id === selectedGame)?.title}
                  </EnhancedCardTitle>
                </EnhancedCardHeader>
                <EnhancedCardContent>
                  <Suspense
                    fallback={
                      <div className="flex items-center justify-center h-64">
                        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
                      </div>
                    }
                  >
                    {renderGame()}
                  </Suspense>
                </EnhancedCardContent>
              </EnhancedCard>
            ) : (
              <EnhancedCard className="h-full flex items-center justify-center">
                <EnhancedCardContent className="text-center p-8">
                  <Gamepad2 className="h-16 w-16 text-muted-foreground mx-auto mb-4" />
                  <h3 className="text-xl font-semibold mb-2">Select a Game</h3>
                  <p className="text-muted-foreground">Choose a game from the left to start playing</p>
                </EnhancedCardContent>
              </EnhancedCard>
            )}
          </AnimateOnScroll>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/glabs/page.tsx"
"use client"

import { ProjectsShowcase } from "@/components/projects-showcase"
import { AnimateOnScroll } from "@/components/scroll-animation"
import { Badge } from "@/components/ui/badge"
import { Code2, Sparkles } from "lucide-react"

export default function GlabsPage() {
  return (
    <div className="min-h-screen bg-background pt-32 pb-24">
      {/* Hero Section */}
      <section className="relative py-12 md:py-20">
        <div className="container mx-auto px-4">
          <AnimateOnScroll animation="fadeIn" className="text-center mb-12 md:mb-20">
            <div className="flex items-center justify-center gap-2 mb-4">
              <Code2 className="h-6 w-6 text-primary" />
              <Badge variant="outline" className="bg-primary/10 text-primary border-primary/30">
                Glabs & Projects
              </Badge>
              <Sparkles className="h-6 w-6 text-primary" />
            </div>

<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-4">
              My Projects & Experiments
            </h1>

<p className="text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
              Explore my latest projects, full-stack applications, and innovative solutions. From educational platforms
              to restaurant management systems, each project showcases my approach to building scalable and user-centric
              products.
            </p>
          </AnimateOnScroll>

{/* Projects Grid */}
          <AnimateOnScroll animation="slideUp" delay={0.3} className="mt-16">
            <ProjectsShowcase />
          </AnimateOnScroll>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]css:file="app/globals.css"
@import "tailwindcss";
@import "tw-animate-css";

/* Moved theme definitions outside @layer base for Tailwind v4 */
:root {
  /* Light mode - warm cream/sepia tones for eye-friendly reading */
  --background: hsl(40 30% 96%);
  --foreground: hsl(30 20% 20%);
  --card: hsl(40 25% 98%);
  --card-foreground: hsl(30 20% 20%);
  --popover: hsl(40 25% 98%);
  --popover-foreground: hsl(30 20% 20%);
  --primary: hsl(38 90% 50%);
  --primary-foreground: hsl(30 20% 15%);
  --secondary: hsl(193 60% 45%);
  --secondary-foreground: hsl(0 0% 100%);
  --muted: hsl(40 20% 92%);
  --muted-foreground: hsl(30 15% 40%);
  --accent: hsl(193 60% 45%);
  --accent-foreground: hsl(0 0% 100%);
  --destructive: hsl(0 84.2% 60.2%);
  --destructive-foreground: hsl(0 0% 100%);
  --border: hsl(40 20% 85%);
  --input: hsl(40 20% 88%);
  --ring: hsl(38 90% 50%);
  --radius: 1rem;
  --chart-1: hsl(38 90% 50%);
  --chart-2: hsl(193 60% 45%);
  --chart-3: hsl(30 20% 25%);
  --chart-4: hsl(38 70% 60%);
  --chart-5: hsl(193 50% 55%);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  /* Dark mode Himalayan adventure theme */
  --background: hsl(213 58% 11%);
  --foreground: hsl(210 60% 96%);
  --card: hsl(210 45% 15%);
  --card-foreground: hsl(210 60% 96%);
  --popover: hsl(210 45% 15%);
  --popover-foreground: hsl(210 60% 96%);
  --primary: hsl(38 90% 60%);
  --primary-foreground: hsl(213 50% 12%);
  --secondary: hsl(193 76% 60%);
  --secondary-foreground: hsl(213 50% 12%);
  --muted: hsl(210 35% 20%);
  --muted-foreground: hsl(210 25% 70%);
  --accent: hsl(193 76% 60%);
  --accent-foreground: hsl(213 50% 12%);
  --destructive: hsl(0 62.8% 30.6%);
  --destructive-foreground: hsl(210 40% 98%);
  --border: hsl(210 35% 22%);
  --input: hsl(210 35% 22%);
  --ring: hsl(38 90% 60%);
  --chart-1: hsl(38 90% 60%);
  --chart-2: hsl(193 76% 60%);
  --chart-3: hsl(210 60% 96%);
  --chart-4: hsl(38 70% 70%);
  --chart-5: hsl(193 60% 70%);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

/* Added @theme for Tailwind v4 custom design system */
@theme {
  --font-family-sans: var(--font-inter), system-ui, sans-serif;
  --font-family-heading: var(--font-poppins), system-ui, sans-serif;

/* Defining colors directly to ensure Tailwind v4 can resolve them correctly for opacity modifiers */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

--color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);

--color-himalayan-bg: #0a1a2f;
  --color-himalayan-card: #11263b;
  --color-sunrise-gold: #f5b348;
  --color-glacier-cyan: #4ac6e9;
  --color-himalayan-primary: #eaf4ff;
  --color-himalayan-secondary: #9eb3c7;
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

--radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

/* Removing shorthand animation definitions from @theme as they might cause parsing issues in some environments */
}

@layer base {
  * {
    /* Simplified base styles to avoid potential parsing errors with custom property calculations */
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

* {
  border-color: var(--color-border);
}

body {
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-feature-settings: "rlig" 1, "calt" 1;
  /* Removed cursor: none to show default cursor */
}

@media (hover: none) {
  body {
    cursor: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  body {
    cursor: auto;
  }

*,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-pulse-slow {
  animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-bounce-slow {
  animation: bounce 3s infinite;
}

/* Contour line pattern background */
.contour-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50 Q25 30 50 50 T100 50' fill='none' stroke='%23F5B348' stroke-width='0.5' opacity='0.04'/%3E%3Cpath d='M0 70 Q25 50 50 70 T100 70' fill='none' stroke='%23F5B348' stroke-width='0.5' opacity='0.04'/%3E%3Cpath d='M0 30 Q25 10 50 30 T100 30' fill='none' stroke='%23F5B348' stroke-width='0.5' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Button hover lift with cyan glow */
.btn-adventure {
  transition: all 0.3s ease-out;
}

.btn-adventure:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(74, 198, 233, 0.4), 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Card parallax hover effect */
.card-adventure {
  transition: all 0.3s ease-out;
  border-radius: 1rem;
}

.card-adventure:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 30px rgba(245, 179, 72, 0.1);
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

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

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}

@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}

/* Scroll reveal animation */
@keyframes scrollReveal {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-scroll-reveal {
  animation: scrollReveal 0.6s ease-out forwards;
}

.animate-fadeIn {
  animation: fadeIn 0.5s ease-out forwards;
}

.animate-slideInLeft {
  animation: slideInLeft 0.5s ease-out forwards;
}

.animate-slideInRight {
  animation: slideInRight 0.5s ease-out forwards;
}

.animate-scaleIn {
  animation: scaleIn 0.3s ease-out forwards;
}

.animate-shimmer {
  animation: shimmer 2s infinite linear;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  background-size: 200px 100%;
}

*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Enhanced button hover with cyan glow border */
.btn-hover-lift {
  transition: all 0.3s ease-out;
}

.btn-hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 15px rgba(74, 198, 233, 0.4), 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-hover-lift:active {
  transform: translateY(0);
}

/* Enhanced card hover with parallax and shadow */
.card-hover {
  transition: all 0.3s ease-out;
}

.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12), 0 0 20px rgba(245, 179, 72, 0.08);
}

.interactive-element {
  transition: all 0.2s ease;
  cursor: pointer;
}

.interactive-element:hover {
  transform: scale(1.02);
}

.interactive-element:active {
  transform: scale(0.98);
}

.loading-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-muted) 25%,
    color-mix(in srgb, var(--color-muted-foreground) 10%, transparent) 50%,
    var(--color-muted) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

.cursor-pointer-element {
  position: relative;
}

.cursor-pointer-element::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(245, 179, 72, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: -1;
}

.cursor-pointer-element:hover::before {
  width: 120%;
  height: 120%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only:focus,
.sr-only:active {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Enhanced scrollbar with adventure theme */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-muted);
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-primary) 50%, transparent);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--color-primary) 70%, transparent);
}

@media print {
  nav,
  .navigation,
  [data-navigation] {
    display: none !important;
  }

.social-links,
  [data-social-links] {
    display: none !important;
  }

.floating-chat,
  [data-floating-chat] {
    display: none !important;
  }

.fixed {
    display: none !important;
  }

.hamburger-menu,
  .theme-toggle,
  [data-hamburger],
  [data-theme-toggle] {
    display: none !important;
  }

.custom-cursor {
    display: none !important;
  }

.progress-indicator {
    display: none !important;
  }

body {
    margin: 0 !important;
    padding: 0 !important;
    background: white !important;
    color: black !important;
    cursor: auto !important;
  }

main {
    margin: 0 !important;
    padding: 0 !important;
  }

button:not(.print-keep),
  .no-print {
    display: none !important;
  }

.print-report {
    display: block !important;
    visibility: visible !important;
  }

* {
    color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

@media (prefers-contrast: high) {
  :root {
    --border: hsl(0 0% 20%);
    --input: hsl(0 0% 20%);
  }

.dark {
    --border: hsl(0 0% 80%);
    --input: hsl(0 0% 80%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .animate-pulse,
  .animate-spin,
  .animate-bounce,
  .animate-cursor-ripple,
  .animate-cursor-pulse {
    animation: none;
  }

.transition-all,
  .transition-colors,
  .transition-transform {
    transition: none;
  }
}

/* Removed cursor: none !important rule that was hiding cursor on hover */
@media (hover: hover) and (pointer: fine) {
  /* Default cursor now visible */
}

@media (hover: none) or (pointer: coarse) {
  * {
    cursor: auto !important;
  }
}

/* Custom colors for Dashain theme */
.bg-peach-50 {
  background-color: #fef7f0;
}

.bg-peach-100 {
  background-color: #fed7aa;
}

.bg-peach-300 {
  background-color: #fdba74;
}

.text-brown-600 {
  color: #92400e;
}

.text-brown-800 {
  color: #451a03;
}

.bg-brown-600 {
  background-color: #92400e;
}

.bg-brown-800 {
  background-color: #451a03;
}

/* Skill badge glow effect */
.skill-badge {
  transition: all 0.3s ease-out;
}

.skill-badge:hover {
  box-shadow: 0 0 15px rgba(74, 198, 233, 0.4);
  transform: translateY(-2px);
}

/* Image parallax effect */
.parallax-image {
  transition: transform 0.5s ease-out;
}

.parallax-image:hover {
  transform: scale(1.05);
}
[V0_FILE]typescriptreact:file="app/layout.tsx"
import type React from "react"
import type { Metadata } from "next"
import { Poppins, Inter } from "next/font/google"
import "./globals.css"
import { ThemeProvider } from "@/components/theme-provider"
import { Navigation } from "@/components/navigation"
import { SocialLinks } from "@/components/social-links"
import { ProgressIndicator } from "@/components/progress-indicator"
import { AccessibilitySkipLinks } from "@/components/accessibility-skip-links"
import { DashainAnimation } from "@/components/dashain-animation"

const poppins = Poppins({
  subsets: ["latin"],
  weight: ["400", "500", "600", "700", "800"],
  variable: "--font-poppins",
})

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
})

export const metadata: Metadata = {
  title: "Om Prakash Paudel Gaurav - Trekker & MBA Scholar | Portfolio",
  description:
    "Om Prakash Paudel Gaurav - MBA Scholar, Himalayan Trekker & Adventure Explorer. Explore trekking portfolio, personality assessments, and professional experience.",
  keywords:
    "Om Prakash Paudel, Om Prakash Paudel Gaurav, Om Gaurav, trekker Nepal, MBA scholar Nepal, Himalayan trekking, adventure explorer, mountain guide, trek portfolio, Om Prakash",
  authors: [{ name: "Om Prakash Paudel Gaurav" }],
  creator: "Om Prakash Paudel",
  metadataBase: new URL("https://omgaurav.com.np"),
  alternates: {
    canonical: "https://omgaurav.com.np",
  },
  openGraph: {
    type: "website",
    locale: "en_US",
    url: "https://omgaurav.com.np",
    title: "Om Prakash Paudel Gaurav - Trekker & MBA Scholar",
    description:
      "MBA Scholar, Himalayan Trekker & Adventure Explorer. View my trekking portfolio, personality assessment, and professional journey.",
    siteName: "Om Prakash Paudel Portfolio",
    images: [
      {
        url: "https://omgaurav.com.np/images/himalayan-hero.jpg",
        width: 1200,
        height: 630,
        alt: "Om Prakash Paudel Gaurav - Himalayan Adventure",
        type: "image/jpeg",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "Om Prakash Paudel Gaurav - Trekker & MBA Scholar",
    description: "Explore my Himalayan adventures, MBA insights, and professional portfolio.",
    creator: "@gaurab__as_a",
    images: ["https://omgaurav.com.np/images/himalayan-hero.jpg"],
  },
  robots: {
    index: true,
    follow: true,
    nocache: false,
    googleBot: {
      index: true,
      follow: true,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },
  verification: {
    google: "YOUR_GOOGLE_SEARCH_CONSOLE_CODE",
    yandex: "YOUR_YANDEX_VERIFICATION_CODE",
  },
    generator: 'v0.app'
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning className={`${poppins.variable} ${inter.variable}`}>
      <head>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify({
              "@context": "https://schema.org",
              "@type": "Person",
              "@id": "https://omgaurav.com.np/#person",
              name: "Om Prakash Paudel",
              givenName: "Om Prakash",
              familyName: "Paudel",
              alternateName: ["Om Prakash Paudel Gaurav", "Om Gaurav", "Gaurav"],
              url: "https://omgaurav.com.np",
              sameAs: [
                "https://instagram.com/gaurab__as_a",
                "https://facebook.com/omgaurav",
                "https://linkedin.com/in/om-prakash-paudel",
              ],
              description:
                "MBA Scholar and Himalayan Trekker from Nepal specializing in mountain adventures and professional development.",
              image: "https://omgaurav.com.np/images/himalayan-hero.jpg",
              jobTitle: ["Trekker", "Adventure Explorer", "MBA Scholar"],
              nationality: "Nepali",
              birthPlace: {
                "@type": "Place",
                name: "Nepal",
              },
              areaServed: [
                {
                  "@type": "Place",
                  name: "Nepal",
                },
                {
                  "@type": "Place",
                  name: "Himalayas",
                },
              ],
              knowsAbout: [
                "Himalayan Trekking",
                "Mountain Navigation",
                "Adventure Leadership",
                "MBA",
                "Business Strategy",
              ],
              hasOccupation: [
                {
                  "@type": "Occupation",
                  name: "Trekker",
                },
                {
                  "@type": "Occupation",
                  name: "Adventure Explorer",
                },
                {
                  "@type": "Occupation",
                  name: "MBA Scholar",
                },
              ],
            }),
          }}
        />
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify({
              "@context": "https://schema.org",
              "@type": "WebSite",
              url: "https://omgaurav.com.np",
              name: "Om Prakash Paudel Portfolio",
              description: "Personal portfolio and adventure blog of Om Prakash Paudel Gaurav",
              potentialAction: {
                "@type": "SearchAction",
                target: {
                  "@type": "EntryPoint",
                  urlTemplate: "https://omgaurav.com.np/search?q={search_term_string}",
                },
                query_input: "required name=search_term_string",
              },
            }),
          }}
        />
        <link rel="canonical" href="https://omgaurav.com.np" />
      </head>
      <body className="font-sans">
        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
          <AccessibilitySkipLinks />
          <ProgressIndicator />
          <DashainAnimation />
          <Navigation />
          <main className="min-h-screen">{children}</main>
          <SocialLinks />
        </ThemeProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/not-found.tsx"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function NotFound() {
  return (
    <div className="container flex h-[calc(100vh-8rem)] flex-col items-center justify-center">
      <div className="mx-auto flex max-w-[420px] flex-col items-center justify-center text-center">
        <h2 className="mb-2 text-3xl font-bold">Page Not Found</h2>
        <p className="mb-6 text-muted-foreground">
          Sorry, the page you're looking for doesn't exist or has been moved.
        </p>
        <Button asChild>
          <Link href="/">Return to Home</Link>
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx"
"use client"

import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Dialog, DialogContent } from "@/components/ui/dialog"
import {
  Mail,
  MapPin,
  Phone,
  Calendar,
  Award,
  Briefcase,
  GraduationCap,
  Star,
  Send,
  Mountain,
  Users,
  Compass,
  Lightbulb,
  Sparkles,
  X,
} from "lucide-react"
import { AnimateOnScroll, AnimateStagger } from "@/components/scroll-animation"
import { useState } from "react"
import { HeroProfile } from "@/components/hero-profile"
import { CloudEffect } from "@/components/cloud-effect"
import { SnowEffect } from "@/components/snow-effect"
import { ProjectsShowcase } from "@/components/projects-showcase"
import { usePortfolioData } from "@/hooks/use-portfolio-data"

function TrekModal({
  trek,
  isOpen,
  onClose,
}: {
  trek: any
  isOpen: boolean
  onClose: () => void
}) {
  if (!trek) return null

return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-3xl max-h-[90vh] bg-card border-secondary/30 text-foreground p-0 overflow-y-auto">
        <div className="relative h-48 md:h-80 w-full flex-shrink-0">
          <Image src={trek.image || "/placeholder.svg"} alt={trek.name} fill className="object-cover" />
          <div className="absolute inset-0 bg-gradient-to-t from-card via-card/50 to-transparent" />
          <button
            onClick={onClose}
            className="fixed md:absolute top-2 right-2 md:top-4 md:right-4 w-10 h-10 rounded-full bg-background/90 backdrop-blur-sm flex items-center justify-center hover:bg-background transition-colors z-50 shadow-lg"
            aria-label="Close modal"
          >
            <X className="h-5 w-5 text-foreground" />
          </button>
          <div className="absolute bottom-3 left-4 right-4 md:bottom-4 md:left-6 md:right-6">
            <Badge className="bg-primary text-primary-foreground font-bold px-2 py-1 md:px-3 text-xs md:text-sm mb-2 inline-flex items-center gap-1">
              <Mountain className="h-3 w-3" />
              {trek.elevation}
            </Badge>
            <h2 className="text-xl md:text-3xl font-bold text-foreground drop-shadow-lg">{trek.name}</h2>
          </div>
        </div>
        <div className="p-4 md:p-8">
          <p className="text-primary text-base md:text-lg font-medium mb-3 md:mb-4">{trek.description}</p>
          <p className="text-foreground/90 text-sm md:text-base leading-relaxed">{trek.experience}</p>
          <div className="mt-4 md:mt-6 pt-4 md:pt-6 border-t border-secondary/20 flex flex-col sm:flex-row items-start sm:items-center gap-3 md:gap-4">
            <div className="flex items-center gap-2 text-muted-foreground text-sm">
              <MapPin className="h-4 w-4 text-secondary" />
              <span>Nepal Himalayas</span>
            </div>
            <div className="flex items-center gap-2 text-muted-foreground text-sm">
              <Mountain className="h-4 w-4 text-primary" />
              <span>{trek.elevation} elevation</span>
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}

// Trek data is now fetched dynamically from the database via usePortfolioData hook

export default function Home() {
  const [selectedTrek, setSelectedTrek] = useState<any>(null)
  const [isModalOpen, setIsModalOpen] = useState(false)
  const portfolio = usePortfolioData()

const handleTrekClick = (trek: any) => {
    setSelectedTrek(trek)
    setIsModalOpen(true)
  }

// Map DB data to the format the page expects
  const education = portfolio.education.map((edu: any) => ({
    year: edu.start_date?.slice(-2) || edu.start_date || "",
    degree: edu.degree,
    school: edu.institution,
    location: edu.location || "",
  }))

const workExperience = portfolio.experience.map((exp: any) => ({
    title: exp.title,
    company: exp.company,
    period: `${exp.start_date}${exp.is_current ? " - Present" : exp.end_date ? ` - ${exp.end_date}` : ""}`,
    location: exp.location || "",
    description: exp.description || "",
  }))

const leadershipExperience = [
    {
      title: "Team Leader & Navigator",
      description: "Led multiple trekking expeditions, making critical decisions on routes, safety, and group dynamics in challenging mountain environments.",
      icon: Compass,
    },
    {
      title: "Community Organizer",
      description: "Organized local youth initiatives and environmental awareness programs, bringing together diverse groups for common goals.",
      icon: Users,
    },
    {
      title: "Problem Solver",
      description: "Developed strong analytical and creative problem-solving skills through academic projects and real-world challenges in the mountains.",
      icon: Lightbulb,
    },
  ]

const achievementIcons = [Mountain, Award, Star, Sparkles]
  const achievements = portfolio.achievements.map((a: any, i: number) => ({
    icon: achievementIcons[i % achievementIcons.length],
    title: a.title,
    description: a.description || "",
  }))

const skills = portfolio.skills.map((s: any) => ({
    name: s.name,
    category: s.category,
  }))

// Map treks from DB or fallback — use image_url for DB, image for legacy
  const treks = portfolio.treks.map((t: any) => ({
    name: t.name,
    image: t.image_url || t.image || "/placeholder.svg",
    description: t.description || "",
    elevation: t.altitude || "",
    experience: t.description || "",
  }))

return (
    <div className="min-h-screen bg-background">
      <SnowEffect />

<TrekModal trek={selectedTrek} isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />

{/* Hero Section */}
      <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
        {/* Background Image with Parallax */}
        <div className="absolute inset-0">
          <Image
            src="/images/himalayan-hero.jpg"
            alt="Himalayan Mountains"
            fill
            className="object-cover"
            priority
            sizes="100vw"
          />
          <div className="absolute inset-0 bg-gradient-to-b from-background/50 via-background/30 to-background/60" />
        </div>

{/* Contour pattern overlay */}
        <div className="absolute inset-0 contour-pattern opacity-30" />

{/* Hero Content */}
        <div className="relative z-10 text-center px-4 max-w-4xl mx-auto">
          <AnimateOnScroll animation="fadeIn" className="mb-6">
            <span className="inline-block px-4 py-2 rounded-full bg-primary/20 text-primary text-sm font-medium mb-6 backdrop-blur-sm border border-primary/30">
              Trekker • Explorer • Nature Wanderer
            </span>
          </AnimateOnScroll>

<AnimateOnScroll animation="slideUp" delay={0.2} className="mb-8">
            <h1 className="text-5xl md:text-7xl font-bold text-foreground drop-shadow-lg">
              Om Prakash Paudel
              <span className="block text-primary">(Gaurav)</span>
            </h1>
          </AnimateOnScroll>

<AnimateOnScroll animation="slideUp" delay={0.4} className="mb-8">
            <p className="text-xl md:text-2xl text-foreground/90 mb-8 max-w-2xl mx-auto leading-relaxed">
              {portfolio.about?.subtitle || "MBA Scholar & Himalayan Trekker Exploring Nepal's Mountains"}
            </p>
          </AnimateOnScroll>

<AnimateOnScroll animation="slideUp" delay={0.6} className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button
              size="lg"
              className="rounded-full px-8 py-6 text-lg font-semibold bg-primary text-primary-foreground hover:bg-primary/90 btn-hover-lift shadow-lg hover:shadow-xl transition-shadow"
            >
              <a href="#portfolio">View Trek Portfolio</a>
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="rounded-full px-8 py-6 text-lg font-semibold border-2 border-secondary text-secondary bg-transparent hover:bg-secondary/10 btn-hover-lift shadow-lg hover:shadow-xl transition-shadow"
            >
              <a href="#contact">Connect With Me</a>
            </Button>
          </AnimateOnScroll>
        </div>
      </section>

<section id="about" className="relative py-24 bg-muted">
        {/* Diagonal top border */}
        <div className="absolute top-0 left-0 right-0 h-16 bg-background transform -skew-y-2 origin-top-left" />

<div className="container mx-auto px-4 pt-8">
          <AnimateOnScroll animation="fadeIn">
            <h2 className="text-3xl md:text-4xl font-bold text-center mb-4 text-foreground">About {portfolio.about?.title || "Om Prakash Paudel"}</h2>
            <div className="w-20 h-1 bg-primary mx-auto mb-12 rounded-full" />
          </AnimateOnScroll>

<AnimateOnScroll animation="slideUp" delay={0.3} className="max-w-4xl mx-auto">
            <Card className="border-none shadow-2xl bg-card rounded-2xl overflow-hidden">
              <CardContent className="p-8 md:p-12">
                <p className="text-lg md:text-xl leading-relaxed text-foreground mb-6 text-center">
                  I'm Om Prakash Paudel, a student with a strong academic background in management and a deep personal
                  passion for the mountains. While pursuing my MBA education, trekking has become the space where I test
                  my mindset, discipline, and leadership across Nepal's Himalayan region.
                </p>
                <p className="text-lg md:text-xl leading-relaxed text-muted-foreground mb-6 text-center">
                  Studying management and organizational behavior taught me how teams think. The mountains taught me how
                  people move — how they push limits, stay calm under pressure, and grow through discomfort.
                </p>

<h3 className="text-xl font-bold text-primary mb-4 text-center">My journey blends both worlds:</h3>
                <div className="grid md:grid-cols-2 gap-4 mb-8">
                  <div className="flex items-start gap-3 p-4 rounded-xl bg-background/50 border border-primary/20">
                    <GraduationCap className="h-6 w-6 text-primary shrink-0 mt-1" />
                    <p className="text-foreground text-center">
                      <span className="font-semibold text-primary">Education</span> gives me clarity, structure, and
                      strategy.
                    </p>
                  </div>
                  <div className="flex items-start gap-3 p-4 rounded-xl bg-background/50 border border-secondary/20">
                    <Mountain className="h-6 w-6 text-secondary shrink-0 mt-1" />
                    <p className="text-foreground text-center">
                      <span className="font-semibold text-secondary">Trekking</span> gives me resilience, confidence,
                      and life experience you don't get inside a classroom.
                    </p>
                  </div>
                </div>

<p className="text-lg md:text-xl leading-relaxed text-muted-foreground text-center mb-4">
                  Every trail I walk reminds me why I love exploring Nepal: the culture, the nature, and the silence
                  that hits deeper than any lecture.
                </p>
                <p className="text-lg md:text-xl leading-relaxed text-foreground text-center italic font-medium">
                  I trek to understand myself better — and to inspire others to step outside their comfort zone.
                </p>
              </CardContent>
            </Card>
          </AnimateOnScroll>
        </div>
      </section>

<section id="experience" className="relative py-24 bg-background contour-pattern">
        <div className="container mx-auto px-4">
          <AnimateOnScroll animation="fadeIn">
            <h2 className="text-3xl md:text-4xl font-bold text-center mb-4 text-foreground">Experience & Leadership</h2>
            <div className="w-20 h-1 bg-secondary mx-auto mb-12 rounded-full" />
          </AnimateOnScroll>

<div className="grid gap-8 md:grid-cols-3 max-w-5xl mx-auto">
            <AnimateStagger delay={0.3} staggerDelay={0.15} animation="slideUp">
              {leadershipExperience.map((exp, index) => (
                <Card key={index} className="border-none shadow-xl bg-card rounded-2xl overflow-hidden group">
                  <CardContent className="p-6 text-center">
                    <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
                      <exp.icon className="h-8 w-8 text-primary" />
                    </div>
                    <h3 className="text-xl font-bold text-foreground mb-3">{exp.title}</h3>
                    <p className="text-muted-foreground leading-relaxed">{exp.description}</p>
                  </CardContent>
                </Card>
              ))}
            </AnimateStagger>
          </div>
        </div>
      </section>

{/* My Projects & Experiments */}
      <section id="projects" className="relative py-24 bg-muted">
        <div className="container mx-auto px-4">
          <AnimateOnScroll animation="fadeIn">
            <div className="text-center mb-4">
              <Badge variant="outline" className="bg-primary/10 text-primary border-primary/30 mb-4">
                My Work
              </Badge>
              <h2 className="text-3xl md:text-4xl font-bold text-foreground">Projects & Experiments</h2>
            </div>
            <div className="w-20 h-1 bg-primary mx-auto mb-12 rounded-full" />
          </AnimateOnScroll>

<AnimateOnScroll animation="slideUp" delay={0.3} className="max-w-6xl mx-auto">
            <p className="text-center text-lg text-muted-foreground mb-12">
              A collection of innovative projects spanning educational platforms, consulting tools, and interactive
              portfolios.
            </p>
          </AnimateOnScroll>

{/* Resume Section */}
      <section id="resume" className="py-20 bg-gradient-to-b from-muted to-background">
        <div className="container mx-auto px-4">
          <AnimateOnScroll animation="fadeIn">
            <h2 className="text-3xl md:text-4xl font-bold text-center mb-4 text-foreground">Resume</h2>
            <p className="text-center text-muted-foreground mb-12 max-w-2xl mx-auto">
              My educational background, professional experience, and achievements
            </p>
          </AnimateOnScroll>

<div className="grid gap-8 md:grid-cols-2">
            {/* Education Timeline */}
            <AnimateOnScroll animation="slideRight" delay={0.2}>
              <Card className="border-none shadow-lg hover:shadow-xl transition-shadow bg-card rounded-2xl overflow-hidden">
                <CardHeader className="p-6 border-b border-primary/20 bg-gradient-to-r from-primary/5 to-primary/10">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-lg bg-primary/20 flex items-center justify-center">
                      <GraduationCap className="h-5 w-5 text-primary" />
                    </div>
                    <CardTitle className="text-foreground text-2xl">Education</CardTitle>
                  </div>
                </CardHeader>
                <CardContent className="p-6">
                  <div className="relative space-y-8 before:absolute before:inset-0 before:ml-5 before:h-full before:w-0.5 before:-translate-x-px before:bg-gradient-to-b before:from-primary/20 before:via-primary/50 before:to-primary/20">
                    <AnimateStagger delay={0.3} staggerDelay={0.15} animation="slideUp">
                      {education.map((edu, index) => (
                        <div key={index} className="relative flex items-start gap-6 group">
                          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-md group-hover:scale-110 transition-transform text-xs font-bold">
                            {edu.year === "Present" ? <Calendar className="h-4 w-4" /> : edu.year}
                          </div>
                          <div className="flex flex-col pt-1 group-hover:translate-x-1 transition-transform">
                            <h3 className="font-semibold text-lg text-foreground">{edu.degree}</h3>
                            <p className="text-primary font-medium">{edu.school}</p>
                            <p className="text-sm text-muted-foreground flex items-center gap-1">
                              <MapPin className="h-3 w-3" /> {edu.location}
                            </p>
                          </div>
                        </div>
                      ))}
                    </AnimateStagger>
                  </div>
                </CardContent>
              </Card>
            </AnimateOnScroll>

{/* Work Experience and Internship */}
            <AnimateOnScroll animation="slideLeft" delay={0.2}>
              <Card className="border-none shadow-lg hover:shadow-xl transition-shadow bg-card rounded-2xl">
                <CardHeader className="bg-gradient-to-r from-secondary/5 to-secondary/10 border-b border-secondary/20 p-6">
                  <div className="flex items-center gap-3">
                    <div className="p-2.5 rounded-lg bg-secondary/15">
                      <Briefcase className="h-5 w-5 text-secondary" />
                    </div>
                    <CardTitle className="text-lg text-foreground">Work Experience & Internship</CardTitle>
                  </div>
                </CardHeader>
                <CardContent className="p-6">
                  <div className="relative space-y-8 before:absolute before:inset-0 before:ml-5 before:h-full before:w-0.5 before:-translate-x-px before:bg-gradient-to-b before:from-secondary/20 before:via-secondary/50 before:to-secondary/20">
                    <AnimateStagger delay={0.3} staggerDelay={0.15} animation="slideUp">
                      {workExperience.map((work, index) => (
                        <div key={index} className="relative flex items-start gap-6 group">
                          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-secondary text-secondary-foreground shadow-md group-hover:scale-110 transition-transform">
                            <Briefcase className="h-4 w-4" />
                          </div>
                          <div className="flex flex-col pt-1 group-hover:translate-x-1 transition-transform">
                            <h3 className="font-semibold text-lg text-foreground">{work.title}</h3>
                            <p className="text-secondary font-medium">{work.company}</p>
                            <p className="text-sm text-muted-foreground">{work.period}</p>
                            <p className="text-sm text-muted-foreground flex items-center gap-1">
                              <MapPin className="h-3 w-3" /> {work.location}
                            </p>
                            <p className="text-sm text-muted-foreground mt-2">{work.description}</p>
                          </div>
                        </div>
                      ))}
                    </AnimateStagger>
                  </div>
                </CardContent>
              </Card>
            </AnimateOnScroll>
          </div>

{/* Achievements and Skills */}
          <div className="mt-8 grid gap-8 md:grid-cols-2">
            {/* Achievements */}
            <AnimateOnScroll animation="slideUp" delay={0.3}>
              <Card className="border-none shadow-lg hover:shadow-xl transition-shadow bg-card rounded-2xl">
                <CardHeader className="bg-gradient-to-r from-primary/5 to-primary/10 border-b border-primary/20 p-6">
                  <div className="flex items-center gap-3">
                    <div className="p-2.5 rounded-lg bg-primary/15">
                      <Award className="h-5 w-5 text-primary" />
                    </div>
                    <CardTitle className="text-lg text-foreground">Achievements</CardTitle>
                  </div>
                </CardHeader>
                <CardContent className="p-6">
                  <div className="grid gap-4 sm:grid-cols-2">
                    <AnimateStagger delay={0.4} staggerDelay={0.1} animation="slideUp">
                      {achievements.map((achievement, index) => (
                        <div
                          key={index}
                          className="flex flex-col p-4 border border-primary/20 rounded-xl bg-background/50 hover:shadow-md transition-shadow hover:border-primary/40 card-hover"
                        >
                          <achievement.icon className="h-8 w-8 text-primary mb-3" />
                          <h3 className="font-semibold text-foreground">{achievement.title}</h3>
                          <p className="text-sm text-muted-foreground mt-1">{achievement.description}</p>
                        </div>
                      ))}
                    </AnimateStagger>
                  </div>
                </CardContent>
              </Card>
            </AnimateOnScroll>

{/* Skills */}
            <AnimateOnScroll animation="slideUp" delay={0.3}>
              <Card className="border-none shadow-lg hover:shadow-xl transition-shadow bg-card rounded-2xl">
                <CardHeader className="bg-gradient-to-r from-secondary/5 to-secondary/10 border-b border-secondary/20 p-6">
                  <div className="flex items-center gap-3">
                    <div className="p-2.5 rounded-lg bg-secondary/15">
                      <Star className="h-5 w-5 text-secondary" />
                    </div>
                    <CardTitle className="text-lg text-foreground">Skills</CardTitle>
                  </div>
                </CardHeader>
                <CardContent className="p-6">
                  <div className="space-y-6">
                    {/* Trekking & Adventure */}
                    <AnimateOnScroll animation="fadeIn" delay={0.4}>
                      <div>
                        <h4 className="text-sm font-medium text-primary mb-3 flex items-center gap-2">
                          <Mountain className="h-4 w-4" /> Trekking & Adventure
                        </h4>
                        <div className="flex flex-wrap gap-2">
                          <AnimateStagger delay={0.5} staggerDelay={0.05} animation="slideUp">
                            {skills
                              .filter((skill) => skill.category === "Trekking & Adventure")
                              .map((skill, index) => (
                                <Badge
                                  key={index}
                                  className="px-3 py-1.5 text-xs bg-primary/10 text-primary border border-primary/30 hover:bg-primary/20 skill-badge"
                                >
                                  {skill.name}
                                </Badge>
                              ))}
                          </AnimateStagger>
                        </div>
                      </div>
                    </AnimateOnScroll>

{/* Leadership & Teamwork */}
                    <AnimateOnScroll animation="fadeIn" delay={0.5}>
                      <div>
                        <h4 className="text-sm font-medium text-secondary mb-3 flex items-center gap-2">
                          <Users className="h-4 w-4" /> Leadership & Teamwork
                        </h4>
                        <div className="flex flex-wrap gap-2">
                          <AnimateStagger delay={0.6} staggerDelay={0.05} animation="slideUp">
                            {skills
                              .filter((skill) => skill.category === "Leadership & Teamwork")
                              .map((skill, index) => (
                                <Badge
                                  key={index}
                                  className="px-3 py-1.5 text-xs bg-secondary/10 text-secondary border border-secondary/30 hover:bg-secondary/20 skill-badge"
                                >
                                  {skill.name}
                                </Badge>
                              ))}
                          </AnimateStagger>
                        </div>
                      </div>
                    </AnimateOnScroll>

{/* Management & Academic */}
                    <AnimateOnScroll animation="fadeIn" delay={0.6}>
                      <div>
                        <h4 className="text-sm font-medium text-primary mb-3 flex items-center gap-2">
                          <GraduationCap className="h-4 w-4" /> Management & Academic
                        </h4>
                        <div className="flex flex-wrap gap-2">
                          <AnimateStagger delay={0.7} staggerDelay={0.05} animation="slideUp">
                            {skills
                              .filter((skill) => skill.category === "Management & Academic")
                              .map((skill, index) => (
                                <Badge
                                  key={index}
                                  className="px-3 py-1.5 text-xs bg-primary/10 text-primary border border-primary/30 hover:bg-primary/20 skill-badge"
                                >
                                  {skill.name}
                                </Badge>
                              ))}
                          </AnimateStagger>
                        </div>
                      </div>
                    </AnimateOnScroll>

{/* Digital & Personal Growth */}
                    <AnimateOnScroll animation="fadeIn" delay={0.7}>
                      <div>
                        <h4 className="text-sm font-medium text-secondary mb-3 flex items-center gap-2">
                          <Lightbulb className="h-4 w-4" /> Digital & Personal Growth
                        </h4>
                        <div className="flex flex-wrap gap-2">
                          <AnimateStagger delay={0.8} staggerDelay={0.05} animation="slideUp">
                            {skills
                              .filter((skill) => skill.category === "Digital & Personal Growth")
                              .map((skill, index) => (
                                <Badge
                                  key={index}
                                  className="px-3 py-1.5 text-xs bg-secondary/10 text-secondary border border-secondary/30 hover:bg-secondary/20 skill-badge"
                                >
                                  {skill.name}
                                </Badge>
                              ))}
                          </AnimateStagger>
                        </div>
                      </div>
                    </AnimateOnScroll>
                  </div>
                </CardContent>
              </Card>
            </AnimateOnScroll>
          </div>
        </div>
      </section>

<section id="portfolio" className="py-24 bg-background relative overflow-hidden">
        {/* Contour pattern background */}
        <div className="absolute inset-0 contour-pattern opacity-20" />

<div className="container mx-auto px-4 relative z-10">
          <AnimateOnScroll animation="fadeIn">
            <h2 className="text-3xl md:text-4xl font-bold text-center mb-4 text-foreground">Trekking Portfolio</h2>
            <p className="text-center text-muted-foreground mb-4 max-w-2xl mx-auto">
              Exploring the breathtaking landscapes of Nepal's mountains and trails
            </p>
            <p className="text-center text-primary mb-12 text-sm">Click on any card to read the full experience</p>
          </AnimateOnScroll>

{/* Masonry Grid with varying heights */}
          <div className="columns-1 md:columns-2 lg:columns-3 gap-6 space-y-6">
            <AnimateStagger delay={0.2} staggerDelay={0.1} animation="slideUp">
              {treks.map((trek, index) => {
                // Varying heights for masonry effect
                const heights = [
                  "h-[400px]",
                  "h-[480px]",
                  "h-[420px]",
                  "h-[500px]",
                  "h-[440px]",
                  "h-[460px]",
                  "h-[430px]",
                ]
                const height = heights[index % heights.length]

return (
                  <Card
                    key={index}
                    onClick={() => handleTrekClick(trek)}
                    className={`break-inside-avoid mb-6 border-none shadow-xl bg-card rounded-2xl overflow-hidden group relative ${height} cursor-pointer transition-all duration-500 hover:shadow-2xl hover:shadow-secondary/20`}
                  >
                    {/* Image with parallax effect */}
                    <div className="absolute inset-0 overflow-hidden">
                      <Image
                        src={trek.image || "/placeholder.svg"}
                        alt={trek.name}
                        fill
                        className="object-cover transition-transform duration-700 group-hover:scale-110"
                      />
                      {/* Dark gradient overlay */}
                      <div className="absolute inset-0 bg-gradient-to-t from-background via-background/40 to-transparent opacity-70 group-hover:opacity-90 transition-opacity duration-500" />
                    </div>

{/* Hover border glow effect */}
                    <div className="absolute inset-0 border-2 border-transparent group-hover:border-secondary/50 rounded-2xl transition-all duration-500" />

{/* Location marker */}
                    <div className="absolute top-4 right-4 z-20">
                      <div className="w-12 h-12 rounded-full bg-primary flex items-center justify-center shadow-lg transform group-hover:scale-110 transition-transform duration-300">
                        <MapPin className="h-5 w-5 text-primary-foreground" />
                      </div>
                    </div>

{/* Content overlay */}
                    <div className="absolute inset-0 flex flex-col justify-end p-6 z-10">
                      <div className="transform transition-all duration-500 group-hover:-translate-y-2">
                        <Badge className="bg-primary text-primary-foreground font-bold px-3 py-1 mb-2 inline-flex items-center gap-1">
                          <Mountain className="h-3 w-3" />
                          {trek.elevation}
                        </Badge>
                        <h3 className="text-2xl font-bold text-foreground mb-2 drop-shadow-lg">{trek.name}</h3>
                      </div>

{/* Description - fades in on hover */}
                      <div className="transform transition-all duration-500 opacity-0 translate-y-4 group-hover:opacity-100 group-hover:translate-y-0">
                        <p className="text-primary text-sm font-medium mb-2">{trek.description}</p>
                        <p className="text-foreground/90 text-sm leading-relaxed line-clamp-3">{trek.experience}</p>
                        <p className="text-secondary text-xs mt-2 flex items-center gap-1">Click to read more...</p>
                      </div>
                    </div>
                  </Card>
                )
              })}
            </AnimateStagger>
          </div>
        </div>
      </section>

{/* Contact Section */}
      <section id="contact" className="py-24 bg-gradient-to-b from-muted to-background">
        <div className="container mx-auto px-4 md:px-8 lg:px-12">
          <AnimateOnScroll animation="slideDown">
            <h2 className="text-3xl md:text-4xl font-bold text-center mb-4 text-foreground">Get In Touch</h2>
            <p className="text-center text-muted-foreground mb-12 max-w-2xl mx-auto">
              Have a question or want to work together? Feel free to reach out!
            </p>
          </AnimateOnScroll>

<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-5 w-full">
            {/* Contact Information Card */}
            <AnimateOnScroll animation="slideRight" delay={0.3} className="md:col-span-1 lg:col-span-2">
              <Card className="border-none shadow-lg overflow-hidden bg-card rounded-2xl">
                <div className="relative h-full min-h-[500px] overflow-hidden">
                  <Image
                    src="/images/design-mode/mardi_Himal1.jpg.jpeg"
                    alt="Mountain view"
                    fill
                    className="object-cover"
                    sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 40vw"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-background/95 via-background/70 to-transparent p-6 flex flex-col justify-end">
                    <AnimateOnScroll animation="slideUp" delay={0.4}>
                      <h3 className="text-2xl font-bold text-foreground mb-8">Contact Information</h3>
                    </AnimateOnScroll>

<div className="space-y-8">
                      <AnimateStagger delay={0.5} staggerDelay={0.15} animation="slideUp">
                        <div className="flex items-center gap-4 group">
                          <div className="flex h-14 w-14 items-center justify-center rounded-full bg-primary/20 backdrop-blur-sm group-hover:bg-primary/40 transition-colors">
                            <Phone className="h-6 w-6 text-primary" />
                          </div>
                          <div>
                            <p className="font-medium text-muted-foreground text-lg">Phone</p>
                            <a
                              href="tel:+9779845952270"
                              className="text-foreground hover:text-primary transition-colors group-hover:underline text-lg"
                            >
                              +977 9845952270
                            </a>
                          </div>
                        </div>
                        <div className="flex items-center gap-4 group">
                          <div className="flex h-14 w-14 items-center justify-center rounded-full bg-secondary/20 backdrop-blur-sm group-hover:bg-secondary/40 transition-colors">
                            <Mail className="h-6 w-6 text-secondary" />
                          </div>
                          <div>
                            <p className="font-medium text-muted-foreground text-lg">Email</p>
                            <a
                              href="mailto:paudelg97@gmail.com"
                              className="text-foreground hover:text-secondary transition-colors group-hover:underline text-lg"
                            >
                              paudelg97@gmail.com
                            </a>
                          </div>
                        </div>
                        <div className="flex items-center gap-4 group">
                          <div className="flex h-14 w-14 items-center justify-center rounded-full bg-primary/20 backdrop-blur-sm group-hover:bg-primary/40 transition-colors">
                            <MapPin className="h-6 w-6 text-primary" />
                          </div>
                          <div>
                            <p className="font-medium text-muted-foreground text-lg">Location</p>
                            <span className="text-foreground text-lg">Chitwan, Nepal</span>
                          </div>
                        </div>
                      </AnimateStagger>
                    </div>
                  </div>
                </div>
              </Card>
            </AnimateOnScroll>

{/* Contact Form Card */}
            <AnimateOnScroll animation="slideLeft" delay={0.3} className="md:col-span-1 lg:col-span-3">
              <Card className="border-none shadow-xl bg-card rounded-2xl h-full">
                <CardContent className="p-6 md:p-8 flex flex-col h-full">
                  <h3 className="text-2xl font-bold text-foreground mb-6">Send a Message</h3>
                  <form action="/api/contact" method="POST" className="flex flex-col flex-1 space-y-5">
                    <div className="grid gap-5 md:grid-cols-2">
                      <div className="space-y-2">
                        <label htmlFor="name" className="text-sm font-medium text-muted-foreground">
                          Your Name
                        </label>
                        <Input
                          id="name"
                          name="name"
                          placeholder="John Doe"
                          required
                          className="bg-background/50 border-secondary/30 text-foreground placeholder:text-muted-foreground/50 focus:border-primary h-12"
                        />
                      </div>
                      <div className="space-y-2">
                        <label htmlFor="email" className="text-sm font-medium text-muted-foreground">
                          Email Address
                        </label>
                        <Input
                          id="email"
                          name="email"
                          type="email"
                          placeholder="john@example.com"
                          required
                          className="bg-background/50 border-secondary/30 text-foreground placeholder:text-muted-foreground/50 focus:border-primary h-12"
                        />
                      </div>
                    </div>
                    <div className="space-y-2">
                      <label htmlFor="subject" className="text-sm font-medium text-muted-foreground">
                        Subject
                      </label>
                      <Input
                        id="subject"
                        name="subject"
                        placeholder="How can I help you?"
                        required
                        className="bg-background/50 border-secondary/30 text-foreground placeholder:text-muted-foreground/50 focus:border-primary h-12"
                      />
                    </div>
                    <div className="space-y-2 flex-1 flex flex-col">
                      <label htmlFor="message" className="text-sm font-medium text-muted-foreground">
                        Message
                      </label>
                      <Textarea
                        id="message"
                        name="message"
                        placeholder="Your message here..."
                        required
                        className="flex-1 min-h-[150px] bg-background/50 border-secondary/30 text-foreground placeholder:text-muted-foreground/50 focus:border-primary resize-none"
                      />
                    </div>
                    <Button
                      type="submit"
                      size="lg"
                      className="w-full bg-primary text-primary-foreground hover:bg-primary/90 btn-hover-lift h-12 text-lg font-semibold"
                    >
                      <Send className="mr-2 h-5 w-5" />
                      Send Message
                    </Button>
                  </form>
                </CardContent>
              </Card>
            </AnimateOnScroll>
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="py-8 bg-background border-t border-border">
        <div className="container mx-auto px-4 text-center">
          <p className="text-muted-foreground">© {new Date().getFullYear()} Om Prakash Paudel. All rights reserved.</p>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/personality-test/page.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { AnimateOnScroll } from "@/components/scroll-animation"
import { Share2, RotateCcw, ArrowRight, Printer, Info } from "lucide-react"
import Link from "next/link"
import { Big5Test } from "@/components/big5-test"
import { Big5ResultsDisplay } from "@/components/big5-results-display"
import { PersonalityReport } from "@/components/personality-report"

interface Question {
  id: number
  question: string
  optionA: { text: string; type: string }
  optionB: { text: string; type: string }
}

interface Scores {
  E: number
  I: number
  S: number
  N: number
  T: number
  F: number
  J: number
  P: number
}

interface PersonalityType {
  type: string
  name: string
  description: string
  traits: string[]
  strengths: string[]
  careers: string[]
}

interface Big5Scores {
  O: number
  C: number
  E: number
  A: number
  N: number
}

interface UserAnswer {
  questionId: number
  value: number
}

const mbtiQuestions: Question[] = [
  {
    id: 1,
    question: "Where do you get your energy from?",
    optionA: { text: "Spending time alone helps me recharge.", type: "I" },
    optionB: { text: "I feel energized by being around other people.", type: "E" },
  },
  {
    id: 2,
    question: "How do you prefer to gather information?",
    optionA: { text: "I trust facts, data, and real-life experience.", type: "S" },
    optionB: { text: "I enjoy interpreting meanings and exploring possibilities.", type: "N" },
  },
  {
    id: 3,
    question: "How do you make decisions?",
    optionA: { text: "I prefer logical reasoning over personal feelings.", type: "T" },
    optionB: { text: "I consider values and how decisions affect people.", type: "F" },
  },
  {
    id: 4,
    question: "How do you approach your daily life?",
    optionA: { text: "I like schedules, plans, and clear structure.", type: "J" },
    optionB: { text: "I prefer flexibility and spontaneity.", type: "P" },
  },
  {
    id: 5,
    question: "In conversations, you usually:",
    optionA: { text: "Think before speaking, choosing words carefully.", type: "I" },
    optionB: { text: "Speak freely and process thoughts out loud.", type: "E" },
  },
  {
    id: 6,
    question: "When learning something new, you prefer:",
    optionA: { text: "Practical examples and step-by-step instruction.", type: "S" },
    optionB: { text: "Big ideas, theories, and patterns.", type: "N" },
  },
  {
    id: 7,
    question: "When solving problems, you tend to:",
    optionA: { text: "Analyze pros and cons objectively.", type: "T" },
    optionB: { text: "Focus on people's needs and harmony.", type: "F" },
  },
  {
    id: 8,
    question: "When working on a project, you usually:",
    optionA: { text: "Prefer sticking to a plan with set deadlines.", type: "J" },
    optionB: { text: "Feel more productive with freedom to adapt as you go.", type: "P" },
  },
]

const personalityTypes: Record<string, PersonalityType> = {
  INTJ: {
    type: "INTJ",
    name: "The Architect",
    description:
      "You're a strategic thinker with a natural drive for implementing your ideas and achieving your goals.",
    traits: ["Independent", "Strategic", "Determined", "Insightful"],
    strengths: ["Long-term planning", "Problem-solving", "Independent work", "Strategic thinking"],
    careers: ["Engineer", "Scientist", "Architect", "Consultant", "Researcher"],
  },
  INTP: {
    type: "INTP",
    name: "The Thinker",
    description: "You're innovative and curious, with an unquenchable thirst for knowledge and understanding.",
    traits: ["Analytical", "Creative", "Independent", "Curious"],
    strengths: ["Logical analysis", "Creative problem-solving", "Theoretical thinking", "Adaptability"],
    careers: ["Researcher", "Programmer", "Analyst", "Professor", "Writer"],
  },
  ENTJ: {
    type: "ENTJ",
    name: "The Commander",
    description: "You're a natural leader, able to organize people and resources to achieve your vision.",
    traits: ["Confident", "Strategic", "Charismatic", "Efficient"],
    strengths: ["Leadership", "Strategic planning", "Decision-making", "Goal achievement"],
    careers: ["CEO", "Manager", "Entrepreneur", "Lawyer", "Consultant"],
  },
  ENTP: {
    type: "ENTP",
    name: "The Debater",
    description: "You're quick-witted and clever, enjoying the challenge of ideas and mental sparring.",
    traits: ["Innovative", "Enthusiastic", "Strategic", "Charismatic"],
    strengths: ["Innovation", "Brainstorming", "Debate", "Adaptability"],
    careers: ["Entrepreneur", "Consultant", "Journalist", "Inventor", "Marketing"],
  },
  INFJ: {
    type: "INFJ",
    name: "The Advocate",
    description: "You're creative and insightful, inspired and independent, with a deep desire to help others.",
    traits: ["Idealistic", "Insightful", "Principled", "Passionate"],
    strengths: ["Understanding others", "Creative solutions", "Long-term vision", "Helping others"],
    careers: ["Counselor", "Writer", "Teacher", "Social Worker", "Psychologist"],
  },
  INFP: {
    type: "INFP",
    name: "The Mediator",
    description: "You're poetic, kind and altruistic, always eager to help good causes and help others.",
    traits: ["Idealistic", "Loyal", "Adaptable", "Curious"],
    strengths: ["Creativity", "Open-mindedness", "Passion", "Personal growth"],
    careers: ["Writer", "Artist", "Counselor", "Teacher", "Social Worker"],
  },
  ENFJ: {
    type: "ENFJ",
    name: "The Protagonist",
    description: "You're charismatic and inspiring, able to mesmerize listeners with your passion.",
    traits: ["Charismatic", "Altruistic", "Natural leader", "Reliable"],
    strengths: ["Leadership", "Communication", "Empathy", "Organizing"],
    careers: ["Teacher", "Coach", "Politician", "Counselor", "Manager"],
  },
  ENFP: {
    type: "ENFP",
    name: "The Campaigner",
    description:
      "You're enthusiastic, creative, and sociable. You thrive on new ideas and inspire others with your passion.",
    traits: ["Enthusiastic", "Creative", "Sociable", "Energetic"],
    strengths: ["Communication", "Enthusiasm", "Creativity", "People skills"],
    careers: ["Marketing", "Journalism", "Acting", "Counseling", "Teaching"],
  },
  ISTJ: {
    type: "ISTJ",
    name: "The Logistician",
    description: "You're practical and fact-minded, reliable and responsible, always getting the job done.",
    traits: ["Responsible", "Sincere", "Practical", "Hardworking"],
    strengths: ["Organization", "Reliability", "Practical skills", "Persistence"],
    careers: ["Accountant", "Administrator", "Engineer", "Doctor", "Lawyer"],
  },
  ISFJ: {
    type: "ISFJ",
    name: "The Protector",
    description: "You're warm-hearted and dedicated, always ready to protect loved ones and serve others.",
    traits: ["Supportive", "Reliable", "Patient", "Imaginative"],
    strengths: ["Supporting others", "Reliability", "Practical skills", "Attention to detail"],
    careers: ["Nurse", "Teacher", "Social Worker", "Administrator", "Counselor"],
  },
  ESTJ: {
    type: "ESTJ",
    name: "The Executive",
    description: "You're excellent at managing things and people, bringing order and organization to projects.",
    traits: ["Organized", "Practical", "Logical", "Assertive"],
    strengths: ["Leadership", "Organization", "Practical solutions", "Decision-making"],
    careers: ["Manager", "Administrator", "Judge", "Teacher", "Supervisor"],
  },
  ESFJ: {
    type: "ESFJ",
    name: "The Consul",
    description: "You're extraordinarily caring, social and popular, always eager to help others.",
    traits: ["Caring", "Social", "Popular", "Dutiful"],
    strengths: ["People skills", "Practical helping", "Organization", "Loyalty"],
    careers: ["Teacher", "Nurse", "Social Worker", "Counselor", "Administrator"],
  },
  ISTP: {
    type: "ISTP",
    name: "The Virtuoso",
    description: "You're bold and practical, a master of all kinds of tools and skilled at hands-on work.",
    traits: ["Practical", "Observant", "Adaptable", "Reserved"],
    strengths: ["Practical skills", "Crisis management", "Flexibility", "Efficiency"],
    careers: ["Engineer", "Mechanic", "Pilot", "Programmer", "Athlete"],
  },
  ISFP: {
    type: "ISFP",
    name: "The Adventurer",
    description: "You're flexible and charming, always ready to explore new possibilities and experiences.",
    traits: ["Flexible", "Charming", "Curious", "Artistic"],
    strengths: ["Creativity", "Open-mindedness", "Passion", "Practical skills"],
    careers: ["Artist", "Designer", "Musician", "Counselor", "Teacher"],
  },
  ESTP: {
    type: "ESTP",
    name: "The Entrepreneur",
    description: "You're smart, energetic and perceptive, truly enjoying living on the edge.",
    traits: ["Energetic", "Perceptive", "Spontaneous", "Pragmatic"],
    strengths: ["Adaptability", "Practical skills", "People skills", "Crisis management"],
    careers: ["Sales", "Marketing", "Entrepreneur", "Paramedic", "Actor"],
  },
  ESFP: {
    type: "ESFP",
    name: "The Entertainer",
    description: "You're spontaneous, energetic and enthusiastic, always ready to try something new.",
    traits: ["Spontaneous", "Energetic", "Enthusiastic", "People-focused"],
    strengths: ["People skills", "Practical helping", "Enthusiasm", "Flexibility"],
    careers: ["Teacher", "Social Worker", "Actor", "Artist", "Counselor"],
  },
}

export default function PersonalityTest() {
  const [testType, setTestType] = useState<"none" | "MBTI" | "BIG5">("none")
  const [currentQuestion, setCurrentQuestion] = useState(0)
  const [mbtiScores, setMbtiScores] = useState<Scores>({
    E: 0,
    I: 0,
    S: 0,
    N: 0,
    T: 0,
    F: 0,
    J: 0,
    P: 0,
  })
  const [mbtiSelectedAnswer, setMbtiSelectedAnswer] = useState<string | null>(null)
  const [mbtiResult, setMbtiResult] = useState<string>("")
  const [showMbtiResult, setShowMbtiResult] = useState(false)
  const [showMbtiPrintReport, setShowMbtiPrintReport] = useState(false)

const [big5Scores, setBig5Scores] = useState<Big5Scores | null>(null)
  const [big5Answers, setBig5Answers] = useState<UserAnswer[]>([]) // State to store Big 5 answers
  const [showBig5Result, setShowBig5Result] = useState(false)

const handleMbtiAnswer = (type: string) => {
    setMbtiSelectedAnswer(type)
  }

const nextMbtiQuestion = () => {
    if (mbtiSelectedAnswer) {
      setMbtiScores((prev) => ({
        ...prev,
        [mbtiSelectedAnswer]: prev[mbtiSelectedAnswer as keyof Scores] + 1,
      }))

if (currentQuestion < mbtiQuestions.length - 1) {
        setCurrentQuestion((prev) => prev + 1)
        setMbtiSelectedAnswer(null)
      } else {
        calculateMbtiResult()
      }
    }
  }

const calculateMbtiResult = () => {
    const finalScores = {
      ...mbtiScores,
      [mbtiSelectedAnswer!]: mbtiScores[mbtiSelectedAnswer! as keyof Scores] + 1,
    }

const personality =
      (finalScores.E > finalScores.I ? "E" : "I") +
      (finalScores.S > finalScores.N ? "S" : "N") +
      (finalScores.T > finalScores.F ? "T" : "F") +
      (finalScores.J > finalScores.P ? "J" : "P")

setMbtiResult(personality)
    setShowMbtiResult(true)
  }

const resetMbtiTest = () => {
    setCurrentQuestion(0)
    setMbtiScores({ E: 0, I: 0, S: 0, N: 0, T: 0, F: 0, J: 0, P: 0 })
    setMbtiSelectedAnswer(null)
    setShowMbtiResult(false)
    setMbtiResult("")
    setTestType("none") // Go back to test selection
  }

const shareMbtiResult = () => {
    const personalityInfo = personalityTypes[mbtiResult]
    const text = `I just discovered I'm ${personalityInfo.name} (${mbtiResult})! ${personalityInfo.description}`

if (navigator.share) {
      navigator.share({
        title: "My Personality Test Result",
        text: text,
        url: window.location.href,
      })
    } else {
      navigator.clipboard.writeText(`${text} - Take the test at ${window.location.href}`)
      alert("Result copied to clipboard!")
    }
  }

const handleMbtiPrintReport = () => {
    setShowMbtiPrintReport(true)
    setTimeout(() => {
      window.print()
      setShowMbtiPrintReport(false)
    }, 100)
  }

const handleBig5Complete = (scores: Big5Scores, answers: UserAnswer[]) => {
    setBig5Scores(scores)
    setBig5Answers(answers) // Store the answers
    setShowBig5Result(true)
  }

const resetBig5Test = () => {
    setBig5Scores(null)
    setBig5Answers([]) // Clear answers
    setShowBig5Result(false)
    setTestType("none") // Go back to test selection
  }

const mbtiProgress = ((currentQuestion + 1) / mbtiQuestions.length) * 100

if (testType === "none") {
    return (
      <div className="container mx-auto px-4 py-8 max-w-2xl">
        <AnimateOnScroll animation="fadeIn">
          <Card className="border-none shadow-xl">
            <CardHeader className="text-center border-b">
              <CardTitle className="text-2xl md:text-3xl font-bold">Choose Your Personality Test</CardTitle>
              <p className="text-muted-foreground">Select a test to discover more about yourself</p>
            </CardHeader>
            <CardContent className="p-8 flex flex-col gap-4">
              <AnimateOnScroll animation="slideUp" delay={0.2}>
                <Button onClick={() => setTestType("MBTI")} className="w-full h-12 text-lg">
                  MBTI Personality Test
                </Button>
              </AnimateOnScroll>
              <AnimateOnScroll animation="slideUp" delay={0.3}>
                <Button onClick={() => setTestType("BIG5")} className="w-full h-12 text-lg">
                  Big 5 Personality Test
                </Button>
              </AnimateOnScroll>
            </CardContent>
          </Card>
        </AnimateOnScroll>
      </div>
    )
  }

if (testType === "MBTI") {
    if (showMbtiPrintReport) {
      return (
        <PersonalityReport testType="MBTI" mbtiResult={mbtiResult} mbtiPersonalityInfo={personalityTypes[mbtiResult]} />
      )
    }

if (showMbtiResult) {
      const personalityInfo = personalityTypes[mbtiResult]

return (
        <div className="container mx-auto px-4 py-8 max-w-4xl">
          <AnimateOnScroll animation="fadeIn">
            <Card className="border-none shadow-xl">
              <CardHeader className="text-center bg-gradient-to-r from-primary/10 to-primary/5 border-b">
                <CardTitle className="text-3xl md:text-4xl font-bold text-primary">Your Personality Type</CardTitle>
              </CardHeader>
              <CardContent className="p-8">
                <div className="text-center mb-8">
                  <AnimateOnScroll animation="zoomIn" delay={0.2}>
                    <div className="inline-block p-6 bg-primary/10 rounded-full mb-4">
                      <span className="text-4xl md:text-6xl font-bold text-primary">{mbtiResult}</span>
                    </div>
                    <h2 className="text-2xl md:text-3xl font-bold mb-4">{personalityInfo.name}</h2>
                    <p className="text-lg text-muted-foreground max-w-2xl mx-auto">{personalityInfo.description}</p>
                  </AnimateOnScroll>
                </div>

<div className="grid gap-6 md:grid-cols-3 mb-8">
                  <AnimateOnScroll animation="slideUp" delay={0.3}>
                    <Card className="border border-primary/20">
                      <CardHeader className="pb-3">
                        <CardTitle className="text-lg">Key Traits</CardTitle>
                      </CardHeader>
                      <CardContent>
                        <ul className="space-y-2">
                          {personalityInfo.traits.map((trait, index) => (
                            <li key={index} className="flex items-center gap-2">
                              <div className="w-2 h-2 bg-primary rounded-full"></div>
                              {trait}
                            </li>
                          ))}
                        </ul>
                      </CardContent>
                    </Card>
                  </AnimateOnScroll>

<AnimateOnScroll animation="slideUp" delay={0.4}>
                    <Card className="border border-primary/20">
                      <CardHeader className="pb-3">
                        <CardTitle className="text-lg">Strengths</CardTitle>
                      </CardHeader>
                      <CardContent>
                        <ul className="space-y-2">
                          {personalityInfo.strengths.map((strength, index) => (
                            <li key={index} className="flex items-center gap-2">
                              <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                              {strength}
                            </li>
                          ))}
                        </ul>
                      </CardContent>
                    </Card>
                  </AnimateOnScroll>

<AnimateOnScroll animation="slideUp" delay={0.5}>
                    <Card className="border border-primary/20">
                      <CardHeader className="pb-3">
                        <CardTitle className="text-lg">Career Matches</CardTitle>
                      </CardHeader>
                      <CardContent>
                        <ul className="space-y-2">
                          {personalityInfo.careers.map((career, index) => (
                            <li key={index} className="flex items-center gap-2">
                              <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
                              {career}
                            </li>
                          ))}
                        </ul>
                      </CardContent>
                    </Card>
                  </AnimateOnScroll>
                </div>

<div className="flex flex-col sm:flex-row gap-4 justify-center">
                  <AnimateOnScroll animation="slideUp" delay={0.7}>
                    <div className="flex flex-col items-center gap-2">
                      <Button onClick={handleMbtiPrintReport} className="flex items-center gap-2">
                        <Printer className="h-4 w-4" />
                        Print Report
                      </Button>
                      <div className="flex items-center gap-1 text-xs text-muted-foreground">
                        <Info className="h-3 w-3" />
                        <span>Please use "Save as PDF" option to download your report</span>
                      </div>
                    </div>
                  </AnimateOnScroll>
                  <AnimateOnScroll animation="slideUp" delay={0.8}>
                    <Button
                      onClick={shareMbtiResult}
                      variant="outline"
                      className="flex items-center gap-2 bg-transparent"
                    >
                      <Share2 className="h-4 w-4" />
                      Share Result
                    </Button>
                  </AnimateOnScroll>
                  <AnimateOnScroll animation="slideUp" delay={0.9}>
                    <Button
                      variant="outline"
                      onClick={resetMbtiTest}
                      className="flex items-center gap-2 bg-transparent"
                    >
                      <RotateCcw className="h-4 w-4" />
                      Take Test Again
                    </Button>
                  </AnimateOnScroll>
                  <AnimateOnScroll animation="slideUp" delay={1.0}>
                    <Button variant="outline" asChild>
                      <Link href="/">Back to Portfolio</Link>
                    </Button>
                  </AnimateOnScroll>
                </div>
              </CardContent>
            </Card>
          </AnimateOnScroll>
        </div>
      )
    }

return (
      <div className="container mx-auto px-4 py-8 max-w-4xl">
        <AnimateOnScroll animation="fadeIn">
          <Card className="border-none shadow-xl">
            <CardHeader className="text-center border-b">
              <CardTitle className="text-2xl md:text-3xl font-bold">MBTI Personality Test</CardTitle>
              <p className="text-muted-foreground">Discover your personality type with this quick assessment</p>
              <div className="mt-4">
                <Progress value={mbtiProgress} />
                <p className="text-sm text-muted-foreground mt-2">
                  Question {currentQuestion + 1} of {mbtiQuestions.length}
                </p>
              </div>
            </CardHeader>
            <CardContent className="p-8">
              <AnimateOnScroll animation="slideUp" key={currentQuestion}>
                <div className="mb-8">
                  <h3 className="text-xl md:text-2xl font-semibold mb-6 text-center">
                    {mbtiQuestions[currentQuestion].question}
                  </h3>

<div className="space-y-4">
                    <Card
                      className={`cursor-pointer transition-all hover:shadow-md border-2 ${
                        mbtiSelectedAnswer === mbtiQuestions[currentQuestion].optionA.type
                          ? "border-primary bg-primary/5"
                          : "border-border hover:border-primary/50"
                      }`}
                      onClick={() => handleMbtiAnswer(mbtiQuestions[currentQuestion].optionA.type)}
                    >
                      <CardContent className="p-6">
                        <div className="flex items-center gap-4">
                          <div
                            className={`w-4 h-4 rounded-full border-2 ${
                              mbtiSelectedAnswer === mbtiQuestions[currentQuestion].optionA.type
                                ? "bg-primary border-primary"
                                : "border-muted-foreground"
                            }`}
                          ></div>
                          <p className="text-lg">{mbtiQuestions[currentQuestion].optionA.text}</p>
                        </div>
                      </CardContent>
                    </Card>

<Card
                      className={`cursor-pointer transition-all hover:shadow-md border-2 ${
                        mbtiSelectedAnswer === mbtiQuestions[currentQuestion].optionB.type
                          ? "border-primary bg-primary/5"
                          : "border-border hover:border-primary/50"
                      }`}
                      onClick={() => handleMbtiAnswer(mbtiQuestions[currentQuestion].optionB.type)}
                    >
                      <CardContent className="p-6">
                        <div className="flex items-center gap-4">
                          <div
                            className={`w-4 h-4 rounded-full border-2 ${
                              mbtiSelectedAnswer === mbtiQuestions[currentQuestion].optionB.type
                                ? "bg-primary border-primary"
                                : "border-muted-foreground"
                            }`}
                          ></div>
                          <p className="text-lg">{mbtiQuestions[currentQuestion].optionB.text}</p>
                        </div>
                      </CardContent>
                    </Card>
                  </div>
                </div>

<div className="flex justify-center gap-4">
                  <Button onClick={() => setTestType("none")} variant="outline">
                    Back to Test Selection
                  </Button>
                  <Button
                    onClick={nextMbtiQuestion}
                    disabled={mbtiSelectedAnswer === null}
                    className="flex items-center gap-2 px-8"
                  >
                    {currentQuestion === mbtiQuestions.length - 1 ? "Get Results" : "Next Question"}
                    <ArrowRight className="h-4 w-4" />
                  </Button>
                </div>
              </AnimateOnScroll>
            </CardContent>
          </Card>
        </AnimateOnScroll>
      </div>
    )
  }

if (testType === "BIG5") {
    if (showBig5Result && big5Scores && big5Answers) {
      return <Big5ResultsDisplay scores={big5Scores} answers={big5Answers} onReset={resetBig5Test} />
    }
    return <Big5Test onComplete={handleBig5Complete} onBack={() => setTestType("none")} />
  }

return null // Should not happen if testType is handled
}
[V0_FILE]typescriptreact:file="app/portfolio/page.tsx"
import Image from "next/image"
import { Card, CardContent } from "@/components/ui/card"

export default function Portfolio() {
  const treks = [
    {
      name: "Annapurna Base Camp",
      image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ABC4.jpg-6Od2QDYDYJ9ovFU3R9jUeoNVtLmode.jpeg",
      description: "ABC at 4130 meters",
    },
    {
      name: "Annapurna North Basecamp",
      image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Annapurna%20North%20Basecamp-gHJAHCyHuntE5VGPBvQDjewAo8qBNz.jpg",
      description: "Pristine PanchaKunda lake at Myagdi district with snow-capped Annapurna range views",
    },
    {
      name: "Mardi Himal",
      image:
        "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Mardi_Himal2.jpg-LvO5xFp5RZVK6Y0kucpWOoey7fKauN.jpeg",
      description: "Beautiful view of the Mardi Himal trek",
    },
    {
      name: "Gosaikunda",
      image:
        "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Gosainkunda.jpg-ED7MKAuL52ThN2LH51EaUFF7EmHuvC.jpeg",
      description: "Sacred lake at high altitude",
    },
    {
      name: "Poon Hill",
      image:
        "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Poon_hill.jpg-WtJ0sjV1ES2jHTLHXJbr15lGsV2o18.jpeg",
      description: "Famous viewpoint trek",
    },
    {
      name: "Tilicho Lake",
      image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Tilicho.jpg-5FCaoDO9j8rAySfCJRuDaHpkL6xSMG.jpeg",
      description: "One of the highest lakes in the world",
    },
    {
      name: "Khumai",
      image:
        "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Khumai_Danda.jpg-297m5pMhAvEG3MLkPsMTxFObuUGanN.jpeg",
      description: "Scenic trek with mountain views",
    },
  ]

return (
    <div className="container mx-auto py-12">
      <h1 className="mb-8 text-3xl font-bold">Trekking Portfolio</h1>
      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {treks.map((trek, index) => (
          <Card key={index} className="overflow-hidden transition-transform hover:scale-105">
            <div className="relative h-64">
              <Image src={trek.image || "/placeholder.svg"} alt={trek.name} fill className="object-cover" />
            </div>
            <CardContent className="p-4">
              <h3 className="font-semibold">{trek.name}</h3>
              <p className="text-sm text-muted-foreground">{trek.description}</p>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/resume/page.tsx"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import Image from "next/image"

export default function Resume() {
  const education = [
    {
      year: "Present",
      degree: "Master in Business Administration (MBA)",
      school: "Boston International College",
      location: "Bharatpuur-10, Nepal",
    },
    {
      year: "2024",
      degree: "Bachelor in Business Administration (BBA)",
      school: "Saptagandaki Multiple Campus",
      location: "Bharatpur-10, Chitwan",
    },
    {
      year: "2019",
      degree: "Secondary Level (+2) in Management",
      school: "Eden Garden English Secondary School",
      location: "Bharatpur-10, Chitwan",
    },
    {
      year: "2016",
      degree: "SLC",
      school: "Madi Secondary School",
      location: "Madi-03, Chitwan",
    },
  ]

return (
    <div className="container mx-auto py-12">
      <div className="grid gap-8 md:grid-cols-[2fr,1fr]">
        <div className="space-y-8">
          <Card>
            <CardHeader>
              <CardTitle>Education</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="relative space-y-8 before:absolute before:inset-0 before:ml-5 before:h-full before:w-0.5 before:-translate-x-px before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent">
                {education.map((edu, index) => (
                  <div key={index} className="relative flex items-center gap-6">
                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary text-white text-xs">
                      {edu.year}
                    </div>
                    <div className="flex flex-col">
                      <h3 className="font-semibold">{edu.degree}</h3>
                      <p className="text-muted-foreground">{edu.school}</p>
                      <p className="text-sm text-muted-foreground">{edu.location}</p>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Skills</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid gap-4 md:grid-cols-2">
                <div>
                  <h3 className="font-semibold">Marketing</h3>
                  <ul className="mt-2 list-disc pl-4 text-muted-foreground">
                    <li>Digital Marketing</li>
                    <li>Brand Management</li>
                    <li>Market Research</li>
                    <li>Social Media Marketing</li>
                  </ul>
                </div>
                <div>
                  <h3 className="font-semibold">Technical</h3>
                  <ul className="mt-2 list-disc pl-4 text-muted-foreground">
                    <li>MS Office Suite</li>
                    <li>Data Analysis</li>
                    <li>Digital Tools</li>
                    <li>Project Management</li>
                  </ul>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

<Card>
            <CardHeader>
              <CardTitle>Trekking Achievements</CardTitle>
            </CardHeader>
            <CardContent>
              <ul className="space-y-2 text-muted-foreground">
                <li>Annapurna Base Camp (ABC)</li>
                <li>Mardi Himal</li>
                <li>Gosaikunda</li>
                <li>Poon Hill</li>
                <li>Tilicho Lake</li>
                <li>Khumai</li>
              </ul>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/robots.ts"
import type { MetadataRoute } from "next"

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
      disallow: ["/admin", "/api/admin"],
    },
    sitemap: "https://omgaurav.com.np/sitemap.xml",
  }
}
[V0_FILE]typescript:file="app/sitemap.ts"
import type { MetadataRoute } from "next"

export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = "https://omgaurav.com.np"

return [
    {
      url: baseUrl,
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 1,
    },
    {
      url: `${baseUrl}/glabs`,
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 0.9,
    },
    {
      url: `${baseUrl}/contact`,
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.7,
    },
  ]
}
[V0_FILE]typescriptreact:file="app/thank-you/page.tsx"
"use client"

import { Button } from "@/components/ui/button"
import Link from "next/link"
import { CheckCircle } from "lucide-react"
import { AnimateOnScroll } from "@/components/scroll-animation"

export default function ThankYou() {
  return (
    <div className="container mx-auto px-4 flex h-[calc(100vh-4rem)] flex-col items-center justify-center space-y-6 text-center">
      <AnimateOnScroll animation="zoomIn" duration={0.8}>
        <div className="rounded-full bg-primary/10 p-3 text-primary">
          <CheckCircle className="h-12 w-12" />
        </div>
      </AnimateOnScroll>
      <AnimateOnScroll animation="slideUp" delay={0.3}>
        <h1 className="text-3xl md:text-4xl font-bold">Thank You!</h1>
      </AnimateOnScroll>
      <AnimateOnScroll animation="slideUp" delay={0.5}>
        <p className="text-lg md:text-xl text-muted-foreground max-w-md">
          Your message has been sent successfully. I'll get back to you soon.
        </p>
      </AnimateOnScroll>
      <AnimateOnScroll animation="slideUp" delay={0.7}>
        <Button size="lg" className="mt-4" asChild>
          <Link href="/">Return Home</Link>
        </Button>
      </AnimateOnScroll>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tools/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { EnhancedButton } from "@/components/enhanced-button"
import { EnhancedCard, EnhancedCardContent, EnhancedCardHeader, EnhancedCardTitle } from "@/components/enhanced-card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { AnimateOnScroll } from "@/components/scroll-animation"
import { ToolsSkeleton } from "@/components/loading-states"
import { Calendar, Calculator, Type, Palette, Ruler, Lock, AlertCircle, CheckCircle, Copy } from "lucide-react"
import {
  convertBSToAD,
  convertADToBS,
  formatNepaliDate,
  formatEnglishDate,
  getCurrentNepaliDate,
  nepaliMonths,
  englishMonths,
} from "@/lib/nepali-date-converter"

export default function Tools() {
  const [loading, setLoading] = useState(true)

// Date Converter State
  const [dateType, setDateType] = useState<"AD_TO_BS" | "BS_TO_AD">("AD_TO_BS")
  const [inputDate, setInputDate] = useState({ year: "", month: "", day: "" })
  const [convertedResult, setConvertedResult] = useState<{
    success: boolean
    data?: any
    error?: string
  } | null>(null)
  const [dateLoading, setDateLoading] = useState(false)

// Text Tools State
  const [textInput, setTextInput] = useState("")
  const [textResult, setTextResult] = useState("")
  const [textLoading, setTextLoading] = useState(false)

// Color Picker State
  const [selectedColor, setSelectedColor] = useState("#3b82f6")

// Unit Converter State
  const [unitValue, setUnitValue] = useState("")
  const [unitType, setUnitType] = useState<"LENGTH" | "WEIGHT" | "TEMPERATURE">("LENGTH")
  const [unitLoading, setUnitLoading] = useState(false)

// Password Generator State
  const [passwordLength, setPasswordLength] = useState(12)
  const [generatedPassword, setGeneratedPassword] = useState("")
  const [passwordLoading, setPasswordLoading] = useState(false)

useEffect(() => {
    // Simulate initial loading
    const timer = setTimeout(() => {
      setLoading(false)
    }, 1000)

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

const handleDateConversion = async () => {
    setDateLoading(true)

// Simulate processing time
    await new Promise((resolve) => setTimeout(resolve, 500))

try {
      const year = Number.parseInt(inputDate.year)
      const month = Number.parseInt(inputDate.month)
      const day = Number.parseInt(inputDate.day)

if (!year || !month || !day) {
        setConvertedResult({
          success: false,
          error: "Please enter valid year, month, and day",
        })
        return
      }

if (dateType === "AD_TO_BS") {
        const result = convertADToBS(year, month, day)
        setConvertedResult({
          success: true,
          data: {
            type: "BS",
            formatted: formatNepaliDate(result),
            raw: result,
          },
        })
      } else {
        const result = convertBSToAD(year, month, day)
        setConvertedResult({
          success: true,
          data: {
            type: "AD",
            formatted: formatEnglishDate(result),
            raw: result,
          },
        })
      }
    } catch (error) {
      setConvertedResult({
        success: false,
        error: error instanceof Error ? error.message : "Conversion failed",
      })
    } finally {
      setDateLoading(false)
    }
  }

const setTodayDate = () => {
    const today = new Date()
    if (dateType === "AD_TO_BS") {
      setInputDate({
        year: today.getFullYear().toString(),
        month: (today.getMonth() + 1).toString(),
        day: today.getDate().toString(),
      })
    } else {
      const nepaliToday = getCurrentNepaliDate()
      setInputDate({
        year: nepaliToday.year.toString(),
        month: nepaliToday.month.toString(),
        day: nepaliToday.day.toString(),
      })
    }
  }

const copyToClipboard = async (text: string) => {
    try {
      await navigator.clipboard.writeText(text)
      // You could add a toast notification here
    } catch (err) {
      console.error("Failed to copy text: ", err)
    }
  }

const handleTextTransform = async (type: "UPPER" | "LOWER" | "TITLE" | "COUNT") => {
    setTextLoading(true)

// Simulate processing time
    await new Promise((resolve) => setTimeout(resolve, 300))

switch (type) {
      case "UPPER":
        setTextResult(textInput.toUpperCase())
        break
      case "LOWER":
        setTextResult(textInput.toLowerCase())
        break
      case "TITLE":
        setTextResult(textInput.replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()))
        break
      case "COUNT":
        const words = textInput
          .trim()
          .split(/\s+/)
          .filter((word) => word.length > 0)
        const chars = textInput.length
        const charsNoSpaces = textInput.replace(/\s/g, "").length
        const lines = textInput.split("\n").length
        setTextResult(
          `Words: ${words.length} | Characters: ${chars} | Characters (no spaces): ${charsNoSpaces} | Lines: ${lines}`,
        )
        break
    }

setTextLoading(false)
  }

const generatePassword = async () => {
    setPasswordLoading(true)

// Simulate generation time
    await new Promise((resolve) => setTimeout(resolve, 400))

const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*"
    let password = ""
    for (let i = 0; i < passwordLength; i++) {
      password += chars.charAt(Math.floor(Math.random() * chars.length))
    }
    setGeneratedPassword(password)
    setPasswordLoading(false)
  }

const convertUnits = async () => {
    setUnitLoading(true)

// Simulate conversion time
    await new Promise((resolve) => setTimeout(resolve, 300))

const value = Number.parseFloat(unitValue)
    if (!value) {
      setUnitLoading(false)
      return
    }

switch (unitType) {
      case "LENGTH":
        const feet = value * 3.28084
        const inches = value * 39.3701
        const cm = value * 100
        const km = value / 1000
        setTextResult(
          `${value} meters = ${feet.toFixed(2)} feet = ${inches.toFixed(2)} inches = ${cm} cm = ${km.toFixed(3)} km`,
        )
        break
      case "WEIGHT":
        const pounds = value * 2.20462
        const grams = value * 1000
        const ounces = value * 35.274
        setTextResult(`${value} kg = ${pounds.toFixed(2)} pounds = ${grams} grams = ${ounces.toFixed(2)} ounces`)
        break
      case "TEMPERATURE":
        const fahrenheit = (value * 9) / 5 + 32
        const kelvin = value + 273.15
        const rankine = ((value + 273.15) * 9) / 5
        setTextResult(`${value}°C = ${fahrenheit.toFixed(2)}°F = ${kelvin.toFixed(2)}K = ${rankine.toFixed(2)}°R`)
        break
    }

setUnitLoading(false)
  }

const tools = [
    {
      id: "date-converter",
      title: "Date Converter (AD ↔ BS)",
      description: "Convert dates between Gregorian (AD) and Bikram Sambat (BS) calendars",
      icon: Calendar,
      category: "Date & Time",
    },
    {
      id: "text-tools",
      title: "Text Tools",
      description: "Transform text case, count words/characters, and more",
      icon: Type,
      category: "Text",
    },
    {
      id: "color-picker",
      title: "Color Picker & Converter",
      description: "Pick colors and convert between HEX, RGB, and HSL",
      icon: Palette,
      category: "Design",
    },
    {
      id: "unit-converter",
      title: "Unit Converter",
      description: "Convert between different units of measurement",
      icon: Ruler,
      category: "Calculator",
    },
    {
      id: "password-generator",
      title: "Password Generator",
      description: "Generate secure random passwords",
      icon: Lock,
      category: "Security",
    },
  ]

const [selectedTool, setSelectedTool] = useState<string | null>(null)

const renderTool = () => {
    switch (selectedTool) {
      case "date-converter":
        return (
          <EnhancedCard hover>
            <EnhancedCardHeader>
              <EnhancedCardTitle className="flex items-center gap-2">
                <Calendar className="h-5 w-5" />
                Date Converter (AD ↔ BS)
              </EnhancedCardTitle>
            </EnhancedCardHeader>
            <EnhancedCardContent className="space-y-4">
              <div className="flex gap-2">
                <EnhancedButton
                  variant={dateType === "AD_TO_BS" ? "default" : "outline"}
                  onClick={() => {
                    setDateType("AD_TO_BS")
                    setInputDate({ year: "", month: "", day: "" })
                    setConvertedResult(null)
                  }}
                >
                  AD to BS
                </EnhancedButton>
                <EnhancedButton
                  variant={dateType === "BS_TO_AD" ? "default" : "outline"}
                  onClick={() => {
                    setDateType("BS_TO_AD")
                    setInputDate({ year: "", month: "", day: "" })
                    setConvertedResult(null)
                  }}
                >
                  BS to AD
                </EnhancedButton>
                <EnhancedButton onClick={setTodayDate} variant="outline" size="sm">
                  Today
                </EnhancedButton>
              </div>

<div className="grid grid-cols-3 gap-2">
                <div>
                  <Label>Year</Label>
                  <Input
                    placeholder={dateType === "AD_TO_BS" ? "2024" : "2081"}
                    value={inputDate.year}
                    onChange={(e) => setInputDate((prev) => ({ ...prev, year: e.target.value }))}
                  />
                </div>
                <div>
                  <Label>Month</Label>
                  <Select
                    value={inputDate.month}
                    onValueChange={(value) => setInputDate((prev) => ({ ...prev, month: value }))}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Select month" />
                    </SelectTrigger>
                    <SelectContent>
                      {(dateType === "AD_TO_BS" ? englishMonths : nepaliMonths).map((month, index) => (
                        <SelectItem key={index} value={(index + 1).toString()}>
                          {index + 1}. {month}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label>Day</Label>
                  <Input
                    placeholder="1-31"
                    value={inputDate.day}
                    onChange={(e) => setInputDate((prev) => ({ ...prev, day: e.target.value }))}
                  />
                </div>
              </div>

<EnhancedButton
                onClick={handleDateConversion}
                className="w-full"
                loading={dateLoading}
                disabled={!inputDate.year || !inputDate.month || !inputDate.day}
              >
                Convert Date
              </EnhancedButton>

{convertedResult && (
                <div
                  className={`p-4 rounded-lg border transition-all duration-200 ${
                    convertedResult.success
                      ? "bg-green-50 border-green-200 dark:bg-green-950 dark:border-green-800"
                      : "bg-red-50 border-red-200 dark:bg-red-950 dark:border-red-800"
                  }`}
                  role="status"
                  aria-live="polite"
                >
                  <div className="flex items-start gap-2">
                    {convertedResult.success ? (
                      <CheckCircle className="h-5 w-5 text-green-600 mt-0.5" />
                    ) : (
                      <AlertCircle className="h-5 w-5 text-red-600 mt-0.5" />
                    )}
                    <div className="flex-1">
                      {convertedResult.success ? (
                        <div>
                          <p className="font-semibold text-green-800 dark:text-green-200">Converted Date:</p>
                          <p className="text-green-700 dark:text-green-300 text-lg">{convertedResult.data.formatted}</p>
                          <div className="mt-2 text-sm text-green-600 dark:text-green-400">
                            <p>Year: {convertedResult.data.raw.year}</p>
                            <p>
                              Month: {convertedResult.data.raw.month} ({convertedResult.data.raw.monthName})
                            </p>
                            <p>Day: {convertedResult.data.raw.day}</p>
                            {convertedResult.data.raw.dayName && <p>Day of Week: {convertedResult.data.raw.dayName}</p>}
                          </div>
                          <EnhancedButton
                            onClick={() => copyToClipboard(convertedResult.data.formatted)}
                            variant="outline"
                            size="sm"
                            className="mt-2"
                          >
                            <Copy className="h-4 w-4 mr-2" />
                            Copy Result
                          </EnhancedButton>
                        </div>
                      ) : (
                        <div>
                          <p className="font-semibold text-red-800 dark:text-red-200">Conversion Error:</p>
                          <p className="text-red-700 dark:text-red-300">{convertedResult.error}</p>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              )}

<div className="text-xs text-muted-foreground space-y-1">
                <p>
                  <strong>Supported ranges:</strong>
                </p>
                <p>• AD: 1943-2043 (English Calendar)</p>
                <p>• BS: 2000-2100 (Bikram Sambat Calendar)</p>
                <p>
                  <strong>Reference:</strong> 1st Baishakh 2000 BS = 13th April 1943 AD
                </p>
                <p>
                  <strong>Note:</strong> Uses verified conversion algorithms with accurate calendar data.
                </p>
              </div>
            </EnhancedCardContent>
          </EnhancedCard>
        )

case "text-tools":
        return (
          <EnhancedCard hover>
            <EnhancedCardHeader>
              <EnhancedCardTitle className="flex items-center gap-2">
                <Type className="h-5 w-5" />
                Text Tools
              </EnhancedCardTitle>
            </EnhancedCardHeader>
            <EnhancedCardContent className="space-y-4">
              <div>
                <Label>Input Text</Label>
                <Textarea
                  placeholder="Enter your text here..."
                  value={textInput}
                  onChange={(e) => setTextInput(e.target.value)}
                  rows={4}
                  className="resize-none"
                />
              </div>

<div className="flex flex-wrap gap-2">
                <EnhancedButton
                  onClick={() => handleTextTransform("UPPER")}
                  variant="outline"
                  size="sm"
                  loading={textLoading}
                  disabled={!textInput}
                >
                  UPPERCASE
                </EnhancedButton>
                <EnhancedButton
                  onClick={() => handleTextTransform("LOWER")}
                  variant="outline"
                  size="sm"
                  loading={textLoading}
                  disabled={!textInput}
                >
                  lowercase
                </EnhancedButton>
                <EnhancedButton
                  onClick={() => handleTextTransform("TITLE")}
                  variant="outline"
                  size="sm"
                  loading={textLoading}
                  disabled={!textInput}
                >
                  Title Case
                </EnhancedButton>
                <EnhancedButton
                  onClick={() => handleTextTransform("COUNT")}
                  variant="outline"
                  size="sm"
                  loading={textLoading}
                  disabled={!textInput}
                >
                  Count Words
                </EnhancedButton>
                <EnhancedButton
                  onClick={() => {
                    setTextInput("")
                    setTextResult("")
                  }}
                  variant="outline"
                  size="sm"
                  className="text-red-600 hover:text-red-700"
                >
                  Clear
                </EnhancedButton>
              </div>

{textResult && (
                <div className="p-4 bg-primary/10 rounded-lg transition-all duration-200">
                  <Label>Result:</Label>
                  <p className="mt-2 font-mono text-sm break-all">{textResult}</p>
                  <EnhancedButton
                    onClick={() => copyToClipboard(textResult)}
                    variant="outline"
                    size="sm"
                    className="mt-2"
                  >
                    <Copy className="h-4 w-4 mr-2" />
                    Copy Result
                  </EnhancedButton>
                </div>
              )}
            </EnhancedCardContent>
          </EnhancedCard>
        )

case "color-picker":
        return (
          <EnhancedCard hover>
            <EnhancedCardHeader>
              <EnhancedCardTitle className="flex items-center gap-2">
                <Palette className="h-5 w-5" />
                Color Picker & Converter
              </EnhancedCardTitle>
            </EnhancedCardHeader>
            <EnhancedCardContent className="space-y-4">
              <div>
                <Label>Pick a Color</Label>
                <div className="flex items-center gap-4 mt-2">
                  <input
                    type="color"
                    value={selectedColor}
                    onChange={(e) => setSelectedColor(e.target.value)}
                    className="w-16 h-16 rounded border cursor-pointer transition-transform hover:scale-105"
                    aria-label="Color picker"
                  />
                  <div className="space-y-2 flex-1">
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm">
                      <div>
                        <strong>HEX:</strong> {selectedColor.toUpperCase()}
                      </div>
                      <div>
                        <strong>RGB:</strong>{" "}
                        {`rgb(${Number.parseInt(selectedColor.slice(1, 3), 16)}, ${Number.parseInt(selectedColor.slice(3, 5), 16)}, ${Number.parseInt(selectedColor.slice(5, 7), 16)})`}
                      </div>
                    </div>
                    <EnhancedButton onClick={() => copyToClipboard(selectedColor)} variant="outline" size="sm">
                      <Copy className="h-4 w-4 mr-2" />
                      Copy HEX
                    </EnhancedButton>
                  </div>
                </div>
              </div>

<div
                className="p-6 rounded-lg border-2 border-dashed transition-all duration-200"
                style={{ backgroundColor: selectedColor }}
              >
                <p className="text-white font-semibold text-center drop-shadow-lg">Color Preview</p>
              </div>

<div className="grid grid-cols-4 gap-2">
                {["#ef4444", "#f97316", "#eab308", "#22c55e", "#3b82f6", "#8b5cf6", "#ec4899", "#6b7280"].map(
                  (color) => (
                    <button
                      key={color}
                      onClick={() => setSelectedColor(color)}
                      className="w-full h-8 rounded border-2 border-gray-300 hover:border-gray-400 transition-all duration-200 hover:scale-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                      style={{ backgroundColor: color }}
                      title={color}
                      aria-label={`Select color ${color}`}
                    />
                  ),
                )}
              </div>
            </EnhancedCardContent>
          </EnhancedCard>
        )

case "password-generator":
        return (
          <EnhancedCard hover>
            <EnhancedCardHeader>
              <EnhancedCardTitle className="flex items-center gap-2">
                <Lock className="h-5 w-5" />
                Password Generator
              </EnhancedCardTitle>
            </EnhancedCardHeader>
            <EnhancedCardContent className="space-y-4">
              <div>
                <Label>Password Length: {passwordLength}</Label>
                <input
                  type="range"
                  min="4"
                  max="50"
                  value={passwordLength}
                  onChange={(e) => setPasswordLength(Number.parseInt(e.target.value))}
                  className="w-full mt-2 accent-primary"
                  aria-label={`Password length: ${passwordLength} characters`}
                />
                <div className="flex justify-between text-xs text-muted-foreground mt-1">
                  <span>4</span>
                  <span>50</span>
                </div>
              </div>

<EnhancedButton onClick={generatePassword} className="w-full" loading={passwordLoading}>
                Generate Password
              </EnhancedButton>

{generatedPassword && (
                <div className="p-4 bg-primary/10 rounded-lg transition-all duration-200">
                  <Label>Generated Password:</Label>
                  <div className="mt-2 p-2 bg-background rounded border font-mono text-lg break-all select-all">
                    {generatedPassword}
                  </div>
                  <div className="flex gap-2 mt-2">
                    <EnhancedButton onClick={() => copyToClipboard(generatedPassword)} variant="outline" size="sm">
                      <Copy className="h-4 w-4 mr-2" />
                      Copy Password
                    </EnhancedButton>
                    <EnhancedButton onClick={generatePassword} variant="outline" size="sm" loading={passwordLoading}>
                      Generate New
                    </EnhancedButton>
                  </div>
                  <div className="mt-2 text-xs text-muted-foreground">
                    <p>
                      Password strength: <span className="text-green-600 font-semibold">Strong</span>
                    </p>
                    <p>Contains: Uppercase, lowercase, numbers, and symbols</p>
                  </div>
                </div>
              )}
            </EnhancedCardContent>
          </EnhancedCard>
        )

case "unit-converter":
        return (
          <EnhancedCard hover>
            <EnhancedCardHeader>
              <EnhancedCardTitle className="flex items-center gap-2">
                <Ruler className="h-5 w-5" />
                Unit Converter
              </EnhancedCardTitle>
            </EnhancedCardHeader>
            <EnhancedCardContent className="space-y-4">
              <div className="flex gap-2">
                <EnhancedButton
                  variant={unitType === "LENGTH" ? "default" : "outline"}
                  onClick={() => setUnitType("LENGTH")}
                  size="sm"
                >
                  Length
                </EnhancedButton>
                <EnhancedButton
                  variant={unitType === "WEIGHT" ? "default" : "outline"}
                  onClick={() => setUnitType("WEIGHT")}
                  size="sm"
                >
                  Weight
                </EnhancedButton>
                <EnhancedButton
                  variant={unitType === "TEMPERATURE" ? "default" : "outline"}
                  onClick={() => setUnitType("TEMPERATURE")}
                  size="sm"
                >
                  Temperature
                </EnhancedButton>
              </div>

<div>
                <Label>
                  Enter value in {unitType === "LENGTH" ? "meters" : unitType === "WEIGHT" ? "kilograms" : "Celsius"}
                </Label>
                <Input
                  type="number"
                  placeholder="Enter value"
                  value={unitValue}
                  onChange={(e) => setUnitValue(e.target.value)}
                />
              </div>

<EnhancedButton onClick={convertUnits} className="w-full" disabled={!unitValue} loading={unitLoading}>
                Convert
              </EnhancedButton>

{textResult && (
                <div className="p-4 bg-primary/10 rounded-lg transition-all duration-200">
                  <Label>Conversion Result:</Label>
                  <p className="mt-2 font-mono text-sm">{textResult}</p>
                  <EnhancedButton
                    onClick={() => copyToClipboard(textResult)}
                    variant="outline"
                    size="sm"
                    className="mt-2"
                  >
                    <Copy className="h-4 w-4 mr-2" />
                    Copy Result
                  </EnhancedButton>
                </div>
              )}
            </EnhancedCardContent>
          </EnhancedCard>
        )

default:
        return null
    }
  }

return (
    <div className="container mx-auto px-4 py-8">
      <AnimateOnScroll animation="fadeIn">
        <div className="text-center mb-12">
          <h1 className="text-3xl md:text-4xl font-bold mb-4">Utility Tools</h1>
          <p className="text-muted-foreground max-w-2xl mx-auto">
            A collection of useful tools to help with everyday tasks and calculations
          </p>
        </div>
      </AnimateOnScroll>

<div className="grid gap-8 md:grid-cols-2">
        {/* Tools Grid */}
        <div>
          <AnimateOnScroll animation="slideRight" delay={0.2}>
            <h2 className="text-2xl font-bold mb-6">Available Tools</h2>
            <div className="grid gap-4">
              {tools.map((tool, index) => (
                <AnimateOnScroll key={tool.id} animation="slideUp" delay={0.1 + index * 0.1}>
                  <EnhancedCard
                    interactive
                    hover
                    className={`cursor-pointer transition-all ${
                      selectedTool === tool.id ? "border-primary bg-primary/5" : ""
                    }`}
                    onClick={() => setSelectedTool(tool.id)}
                    onKeyDown={(e) => {
                      if (e.key === "Enter" || e.key === " ") {
                        e.preventDefault()
                        setSelectedTool(tool.id)
                      }
                    }}
                    role="button"
                    tabIndex={0}
                    aria-label={`Select ${tool.title} tool`}
                  >
                    <EnhancedCardContent className="p-4">
                      <div className="flex items-start gap-3">
                        <div className="p-2 bg-primary/10 rounded-lg">
                          <tool.icon className="h-5 w-5 text-primary" />
                        </div>
                        <div className="flex-1">
                          <div className="flex items-center gap-2 mb-1">
                            <h3 className="font-semibold">{tool.title}</h3>
                            <Badge variant="secondary" className="text-xs">
                              {tool.category}
                            </Badge>
                          </div>
                          <p className="text-sm text-muted-foreground">{tool.description}</p>
                        </div>
                      </div>
                    </EnhancedCardContent>
                  </EnhancedCard>
                </AnimateOnScroll>
              ))}
            </div>
          </AnimateOnScroll>
        </div>

{/* Tool Interface */}
        <div>
          <AnimateOnScroll animation="slideLeft" delay={0.2}>
            {selectedTool ? (
              renderTool()
            ) : (
              <EnhancedCard className="h-full flex items-center justify-center">
                <EnhancedCardContent className="text-center p-8">
                  <Calculator className="h-16 w-16 text-muted-foreground mx-auto mb-4" />
                  <h3 className="text-xl font-semibold mb-2">Select a Tool</h3>
                  <p className="text-muted-foreground">Choose a tool from the left to get started</p>
                </EnhancedCardContent>
              </EnhancedCard>
            )}
          </AnimateOnScroll>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]json:file="components.json"
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}
[V0_FILE]typescriptreact:file="components/accessibility-skip-links.tsx"
"use client"

import { Button } from "@/components/ui/button"

export function AccessibilitySkipLinks() {
  return (
    <div className="sr-only focus-within:not-sr-only">
      <Button
        asChild
        variant="outline"
        className="absolute top-4 left-4 z-[9999] focus:relative focus:z-auto bg-transparent"
      >
        <a href="#main-content">Skip to main content</a>
      </Button>
      <Button
        asChild
        variant="outline"
        className="absolute top-4 left-32 z-[9999] focus:relative focus:z-auto bg-transparent"
      >
        <a href="#navigation">Skip to navigation</a>
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/about-editor.tsx"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Save, Loader2, ImageIcon } from "lucide-react"

export function AboutEditor() {
  const [data, setData] = useState({ id: 0, title: "", subtitle: "", description: "", image_url: "" })
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [msg, setMsg] = useState("")

useEffect(() => {
    fetch("/api/admin/content?table=about")
      .then(r => r.json())
      .then(res => { if (res.data?.[0]) setData(res.data[0]); setLoading(false) })
      .catch(() => setLoading(false))
  }, [])

async function handleSave() {
    setSaving(true)
    setMsg("")
    const method = data.id ? "PUT" : "POST"
    const res = await fetch("/api/admin/content", {
      method,
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ table: "about", ...data }),
    })
    if (res.ok) {
      const result = await res.json()
      if (result.data) setData(result.data)
      setMsg("Saved!")
    } else setMsg("Failed to save")
    setSaving(false)
    setTimeout(() => setMsg(""), 3000)
  }

if (loading) return <div className="flex justify-center p-8"><Loader2 className="h-6 w-6 animate-spin" /></div>

return (
    <Card>
      <CardHeader><CardTitle>About Me</CardTitle></CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2"><Label>Title</Label><Input value={data.title} onChange={e => setData({ ...data, title: e.target.value })} placeholder="Your name" /></div>
        <div className="space-y-2"><Label>Subtitle</Label><Input value={data.subtitle} onChange={e => setData({ ...data, subtitle: e.target.value })} placeholder="Your tagline" /></div>
        <div className="space-y-2"><Label>Description</Label><Textarea value={data.description} onChange={e => setData({ ...data, description: e.target.value })} placeholder="About yourself..." rows={6} /></div>
        <div className="space-y-2">
          <Label>Profile Image URL</Label>
          <Input value={data.image_url || ""} onChange={e => setData({ ...data, image_url: e.target.value })} placeholder="https://..." />
          {data.image_url && (
            <div className="mt-2 relative w-32 h-32 rounded-lg overflow-hidden border border-border">
              <img src={data.image_url || "/placeholder.svg"} alt="Profile preview" className="w-full h-full object-cover" onError={e => { (e.target as HTMLImageElement).style.display = "none" }} />
            </div>
          )}
          {!data.image_url && (
            <div className="mt-2 w-32 h-32 rounded-lg border border-dashed border-muted-foreground/30 flex items-center justify-center">
              <ImageIcon className="h-8 w-8 text-muted-foreground/30" />
            </div>
          )}
        </div>
        <div className="flex items-center gap-4">
          <Button onClick={handleSave} disabled={saving} className="gap-2">
            {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />} Save
          </Button>
          {msg && <span className="text-sm text-muted-foreground">{msg}</span>}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/admin/achievements-editor.tsx"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Plus, Trash2, Loader2 } from "lucide-react"

interface Achievement { id: number; title: string; description: string; date_achieved: string; icon: string }

export function AchievementsEditor() {
  const [items, setItems] = useState<Achievement[]>([])
  const [loading, setLoading] = useState(true)
  const [showForm, setShowForm] = useState(false)
  const [adding, setAdding] = useState(false)
  const [form, setForm] = useState({ title: "", description: "", date_achieved: "", icon: "" })

useEffect(() => {
    fetch("/api/admin/content?table=achievements")
      .then(r => r.json())
      .then(res => { setItems(res.data || []); setLoading(false) })
      .catch(() => setLoading(false))
  }, [])

async function addItem() {
    if (!form.title) return
    setAdding(true)
    const res = await fetch("/api/admin/content", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ table: "achievements", ...form, sort_order: items.length }),
    })
    if (res.ok) {
      const result = await res.json()
      setItems([...items, result.data])
      setForm({ title: "", description: "", date_achieved: "", icon: "" })
      setShowForm(false)
    }
    setAdding(false)
  }

async function deleteItem(id: number) {
    if (!confirm("Delete this achievement?")) return
    const res = await fetch(`/api/admin/content?table=achievements&id=${id}`, { method: "DELETE" })
    if (res.ok) setItems(items.filter(i => i.id !== id))
  }

if (loading) return <div className="flex justify-center p-8"><Loader2 className="h-6 w-6 animate-spin" /></div>

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h2 className="text-xl font-semibold">Achievements</h2>
        <Button onClick={() => setShowForm(!showForm)} className="gap-2"><Plus className="h-4 w-4" /> Add</Button>
      </div>

{items.map(item => (
        <Card key={item.id}>
          <CardContent className="pt-6">
            <div className="flex items-start justify-between">
              <div>
                <p className="font-bold">{item.title}</p>
                {item.date_achieved && <p className="text-xs text-muted-foreground">{item.date_achieved}</p>}
                {item.description && <p className="text-sm mt-1 text-muted-foreground">{item.description}</p>}
              </div>
              <Button variant="ghost" size="icon" onClick={() => deleteItem(item.id)} className="text-destructive"><Trash2 className="h-4 w-4" /></Button>
            </div>
          </CardContent>
        </Card>
      ))}

{items.length === 0 && !showForm && <p className="text-center text-muted-foreground py-8">No achievements added yet.</p>}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/admin-dashboard.tsx"
'use client'

import { useState } from 'react'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Button } from '@/components/ui/button'
import { LogOut } from 'lucide-react'
import { SkillsEditor } from '@/components/admin/skills-editor'
import { ExperienceEditor } from '@/components/admin/experience-editor'
import { ProjectsEditor } from '@/components/admin/projects-editor'
import { AchievementsEditor } from '@/components/admin/achievements-editor'
import { EducationEditor } from '@/components/admin/education-editor'
import { AboutEditor } from '@/components/admin/about-editor'
import { TreksEditor } from '@/components/admin/treks-editor'

export function AdminDashboard() {
  const handleLogout = () => {
    localStorage.removeItem("admin_logged_in")
    localStorage.removeItem("admin_user")
    window.location.href = "/admin/login"
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-background via-background to-primary/5">
      {/* Header */}
      <div className="sticky top-0 z-50 border-b border-primary/10 bg-background/80 backdrop-blur-md">
        <div className="container mx-auto px-4 py-4 flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold text-foreground">Portfolio Admin</h1>
            <p className="text-sm text-muted-foreground">Manage your portfolio content</p>
          </div>
          <Button variant="outline" onClick={handleLogout} className="gap-2 bg-transparent">
            <LogOut className="w-4 h-4" />
            Logout
          </Button>
        </div>
      </div>

{/* Main Content */}
      <div className="container mx-auto px-4 py-8">
        <Tabs defaultValue="about" className="w-full">
            <TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 w-full mb-8 bg-card/50 p-1 rounded-lg border border-primary/10">
            <TabsTrigger value="about" className="text-xs md:text-sm">About</TabsTrigger>
            <TabsTrigger value="skills" className="text-xs md:text-sm">Skills</TabsTrigger>
            <TabsTrigger value="experience" className="text-xs md:text-sm">Experience</TabsTrigger>
            <TabsTrigger value="education" className="text-xs md:text-sm">Education</TabsTrigger>
            <TabsTrigger value="projects" className="text-xs md:text-sm">Projects</TabsTrigger>
            <TabsTrigger value="achievements" className="text-xs md:text-sm">Achievements</TabsTrigger>
            <TabsTrigger value="treks" className="text-xs md:text-sm">Treks</TabsTrigger>
          </TabsList>

<TabsContent value="treks" className="space-y-4">
            <TreksEditor />
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/admin-layout.tsx"
"use client"

import type React from "react"

import Link from "next/link"
import { usePathname, useRouter } from "next/navigation"
import { LayoutDashboard, Mountain, MessageSquare, LogOut, ChevronRight, Menu, X, Layers } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useState } from "react"
import { cn } from "@/lib/utils"

const sidebarLinks = [
  { href: "/admin/dashboard", label: "Dashboard", icon: LayoutDashboard },
  { href: "/admin/sections", label: "Website Content", icon: Layers },
  { href: "/admin/treks", label: "Manage Treks", icon: Mountain },
  { href: "/admin/messages", label: "Messages", icon: MessageSquare },
]

export function AdminLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname()
  const [isSidebarOpen, setIsSidebarOpen] = useState(false)
  const router = useRouter()

const handleLogout = async () => {
    await fetch("/api/admin/logout", { method: "POST" })
    router.push("/admin/login")
    router.refresh()
  }

return (
    <div className="min-h-screen bg-background flex flex-col md:flex-row">
      {/* Mobile Header */}
      <div className="md:hidden flex items-center justify-between p-4 border-b border-primary/20 bg-card">
        <div className="flex items-center gap-2">
          <Mountain className="h-6 w-6 text-primary" />
          <span className="font-bold text-lg">Admin Panel</span>
        </div>
        <Button variant="ghost" size="icon" onClick={() => setIsSidebarOpen(!isSidebarOpen)}>
          {isSidebarOpen ? <X /> : <Menu />}
        </Button>
      </div>

{/* Sidebar */}
      <aside
        className={cn(
          "w-full md:w-64 bg-card border-r border-primary/20 flex-col z-50",
          isSidebarOpen ? "flex fixed inset-0 top-[65px] md:top-0" : "hidden md:flex",
        )}
      >
        <div className="p-6 hidden md:flex items-center gap-3 border-b border-primary/10">
          <div className="w-8 h-8 bg-primary/20 rounded-lg flex items-center justify-center">
            <Mountain className="h-5 w-5 text-primary" />
          </div>
          <span className="font-bold text-xl tracking-tight">Himalayan CMS</span>
        </div>

<nav className="flex-1 p-4 space-y-2 overflow-y-auto">
          {sidebarLinks.map((link) => {
            const Icon = link.icon
            const isActive = pathname === link.href
            return (
              <Link
                key={link.href}
                href={link.href}
                onClick={() => setIsSidebarOpen(false)}
                className={cn(
                  "flex items-center justify-between p-3 rounded-xl transition-all duration-200 group",
                  isActive
                    ? "bg-primary text-primary-foreground shadow-lg shadow-primary/20"
                    : "text-muted-foreground hover:bg-primary/10 hover:text-foreground",
                )}
              >
                <div className="flex items-center gap-3">
                  <Icon className={cn("h-5 w-5", isActive ? "text-primary-foreground" : "text-primary")} />
                  <span className="font-medium">{link.label}</span>
                </div>
                {isActive && <ChevronRight className="h-4 w-4" />}
              </Link>
            )
          })}
        </nav>

{/* Main Content */}
      <main className="flex-1 p-4 md:p-8 lg:p-12 overflow-y-auto max-h-screen">
        <div className="max-w-6xl mx-auto animate-fadeIn">{children}</div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/education-editor.tsx"
"use client"

interface Education { id: number; degree: string; institution: string; location: string; start_date: string; end_date: string; description: string }

export function EducationEditor() {
  const [items, setItems] = useState<Education[]>([])
  const [loading, setLoading] = useState(true)
  const [showForm, setShowForm] = useState(false)
  const [adding, setAdding] = useState(false)
  const [form, setForm] = useState({ degree: "", institution: "", location: "", start_date: "", end_date: "", description: "" })

useEffect(() => {
    fetch("/api/admin/content?table=education")
      .then(r => r.json())
      .then(res => { setItems(res.data || []); setLoading(false) })
      .catch(() => setLoading(false))
  }, [])

async function addItem() {
    if (!form.degree || !form.institution) return
    setAdding(true)
    const res = await fetch("/api/admin/content", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ table: "education", ...form, sort_order: items.length }),
    })
    if (res.ok) {
      const result = await res.json()
      setItems([...items, result.data])
      setForm({ degree: "", institution: "", location: "", start_date: "", end_date: "", description: "" })
      setShowForm(false)
    }
    setAdding(false)
  }

async function deleteItem(id: number) {
    if (!confirm("Delete this entry?")) return
    const res = await fetch(`/api/admin/content?table=education&id=${id}`, { method: "DELETE" })
    if (res.ok) setItems(items.filter(i => i.id !== id))
  }

if (loading) return <div className="flex justify-center p-8"><Loader2 className="h-6 w-6 animate-spin" /></div>

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h2 className="text-xl font-semibold">Education</h2>
        <Button onClick={() => setShowForm(!showForm)} className="gap-2"><Plus className="h-4 w-4" /> Add</Button>
      </div>

{items.map(item => (
        <Card key={item.id}>
          <CardContent className="pt-6">
            <div className="flex items-start justify-between">
              <div>
                <p className="font-bold text-lg">{item.degree}</p>
                <p className="text-primary font-semibold">{item.institution}</p>
                <p className="text-sm text-muted-foreground">{item.start_date} - {item.end_date} {item.location && `| ${item.location}`}</p>
                {item.description && <p className="text-sm mt-1 text-muted-foreground">{item.description}</p>}
              </div>
              <Button variant="ghost" size="icon" onClick={() => deleteItem(item.id)} className="text-destructive"><Trash2 className="h-4 w-4" /></Button>
            </div>
          </CardContent>
        </Card>
      ))}

{items.length === 0 && !showForm && <p className="text-center text-muted-foreground py-8">No education added yet.</p>}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/experience-editor.tsx"
"use client"

interface Experience { id: number; title: string; company: string; location: string; start_date: string; end_date: string; description: string; is_current: boolean }

export function ExperienceEditor() {
  const [items, setItems] = useState<Experience[]>([])
  const [loading, setLoading] = useState(true)
  const [showForm, setShowForm] = useState(false)
  const [adding, setAdding] = useState(false)
  const [form, setForm] = useState({ title: "", company: "", location: "", start_date: "", end_date: "", description: "", is_current: false })

useEffect(() => {
    fetch("/api/admin/content?table=experience")
      .then(r => r.json())
      .then(res => { setItems(res.data || []); setLoading(false) })
      .catch(() => setLoading(false))
  }, [])

async function addItem() {
    if (!form.title || !form.company) return
    setAdding(true)
    const res = await fetch("/api/admin/content", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ table: "experience", ...form, sort_order: items.length }),
    })
    if (res.ok) {
      const result = await res.json()
      setItems([...items, result.data])
      setForm({ title: "", company: "", location: "", start_date: "", end_date: "", description: "", is_current: false })
      setShowForm(false)
    }
    setAdding(false)
  }

async function deleteItem(id: number) {
    if (!confirm("Delete this experience?")) return
    const res = await fetch(`/api/admin/content?table=experience&id=${id}`, { method: "DELETE" })
    if (res.ok) setItems(items.filter(i => i.id !== id))
  }

if (loading) return <div className="flex justify-center p-8"><Loader2 className="h-6 w-6 animate-spin" /></div>

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h2 className="text-xl font-semibold">Work Experience</h2>
        <Button onClick={() => setShowForm(!showForm)} className="gap-2"><Plus className="h-4 w-4" /> Add</Button>
      </div>

{items.map(item => (
        <Card key={item.id}>
          <CardContent className="pt-6">
            <div className="flex items-start justify-between">
              <div>
                <p className="font-bold text-lg">{item.title}</p>
                <p className="text-primary font-semibold">{item.company}</p>
                <p className="text-sm text-muted-foreground">{item.start_date} - {item.is_current ? "Present" : item.end_date} {item.location && `| ${item.location}`}</p>
                {item.description && <p className="text-sm mt-2 text-muted-foreground">{item.description}</p>}
              </div>
              <Button variant="ghost" size="icon" onClick={() => deleteItem(item.id)} className="text-destructive"><Trash2 className="h-4 w-4" /></Button>
            </div>
          </CardContent>
        </Card>
      ))}

{items.length === 0 && !showForm && <p className="text-center text-muted-foreground py-8">No experience added yet.</p>}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/projects-editor.tsx"
"use client"

interface Project { id: number; title: string; description: string; category: string; tech_stack: string; image_url: string; live_url: string; github_url: string; status: string }

export function ProjectsEditor() {
  const [items, setItems] = useState<Project[]>([])
  const [loading, setLoading] = useState(true)
  const [showForm, setShowForm] = useState(false)
  const [adding, setAdding] = useState(false)
  const [form, setForm] = useState({ title: "", description: "", category: "", tech_stack: "", image_url: "", live_url: "", github_url: "", status: "completed" })

useEffect(() => {
    fetch("/api/admin/content?table=projects")
      .then(r => r.json())
      .then(res => { setItems(res.data || []); setLoading(false) })
      .catch(() => setLoading(false))
  }, [])

async function addItem() {
    if (!form.title || !form.description) return
    setAdding(true)
    const res = await fetch("/api/admin/content", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ table: "projects", ...form, sort_order: items.length }),
    })
    if (res.ok) {
      const result = await res.json()
      setItems([...items, result.data])
      setForm({ title: "", description: "", category: "", tech_stack: "", image_url: "", live_url: "", github_url: "", status: "completed" })
      setShowForm(false)
    }
    setAdding(false)
  }

async function deleteItem(id: number) {
    if (!confirm("Delete this project?")) return
    const res = await fetch(`/api/admin/content?table=projects&id=${id}`, { method: "DELETE" })
    if (res.ok) setItems(items.filter(i => i.id !== id))
  }

if (loading) return <div className="flex justify-center p-8"><Loader2 className="h-6 w-6 animate-spin" /></div>

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h2 className="text-xl font-semibold">Projects & Experiments</h2>
        <Button onClick={() => setShowForm(!showForm)} className="gap-2"><Plus className="h-4 w-4" /> Add</Button>
      </div>

{showForm && (
        <Card className="border-primary/20 border-2">
          <CardContent className="pt-6 space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-1"><Label>Title</Label><Input value={form.title} onChange={e => setForm({ ...form, title: e.target.value })} /></div>
              <div className="space-y-1"><Label>Category</Label><Input value={form.category} onChange={e => setForm({ ...form, category: e.target.value })} placeholder="Web App, Tool..." /></div>
              <div className="space-y-1"><Label>Tech Stack</Label><Input value={form.tech_stack} onChange={e => setForm({ ...form, tech_stack: e.target.value })} placeholder="React, Next.js, Node" /></div>
              <div className="space-y-1">
                <Label>Status</Label>
                <select className="w-full px-3 py-2 border rounded-md bg-background text-sm" value={form.status} onChange={e => setForm({ ...form, status: e.target.value })}>
                  <option value="completed">Completed</option>
                  <option value="in_progress">In Progress</option>
                  <option value="planned">Planned</option>
                </select>
              </div>
              <div className="space-y-1"><Label>Live URL</Label><Input value={form.live_url} onChange={e => setForm({ ...form, live_url: e.target.value })} /></div>
              <div className="space-y-1"><Label>GitHub URL</Label><Input value={form.github_url} onChange={e => setForm({ ...form, github_url: e.target.value })} /></div>
            </div>
            <div className="space-y-1">
              <Label>Image URL</Label>
              <Input value={form.image_url} onChange={e => setForm({ ...form, image_url: e.target.value })} placeholder="https://..." />
              {form.image_url && (
                <div className="mt-2 relative w-full max-w-xs h-40 rounded-lg overflow-hidden border border-border">
                  <img src={form.image_url || "/placeholder.svg"} alt="Preview" className="w-full h-full object-cover" onError={e => { (e.target as HTMLImageElement).style.display = "none" }} />
                </div>
              )}
            </div>
            <div className="space-y-1"><Label>Description</Label><Textarea value={form.description} onChange={e => setForm({ ...form, description: e.target.value })} rows={3} /></div>
            <div className="flex gap-2">
              <Button onClick={addItem} disabled={adding}>{adding ? "Saving..." : "Save"}</Button>
              <Button variant="outline" onClick={() => setShowForm(false)} className="bg-transparent">Cancel</Button>
            </div>
          </CardContent>
        </Card>
      )}

{items.map(item => (
        <Card key={item.id}>
          <CardContent className="pt-6">
            <div className="flex items-start gap-4">
              {item.image_url ? (
                <div className="w-24 h-24 rounded-lg overflow-hidden border border-border shrink-0">
                  <img src={item.image_url || "/placeholder.svg"} alt={item.title} className="w-full h-full object-cover" onError={e => { (e.target as HTMLImageElement).parentElement!.style.display = "none" }} />
                </div>
              ) : (
                <div className="w-24 h-24 rounded-lg border border-dashed border-muted-foreground/30 flex items-center justify-center shrink-0">
                  <ImageIcon className="h-6 w-6 text-muted-foreground/30" />
                </div>
              )}
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2">
                  <p className="font-bold text-lg">{item.title}</p>
                  {item.status && <span className="text-xs px-2 py-0.5 bg-primary/10 rounded-full">{item.status}</span>}
                </div>
                {item.category && <p className="text-xs text-muted-foreground">{item.category}</p>}
                <p className="text-sm mt-1 text-muted-foreground line-clamp-2">{item.description}</p>
                {item.tech_stack && <div className="flex flex-wrap gap-1 mt-2">{item.tech_stack.split(",").map((t, i) => <span key={i} className="text-xs px-2 py-0.5 bg-primary/10 rounded-full">{t.trim()}</span>)}</div>}
                <div className="flex gap-3 mt-2">
                  {item.live_url && <a href={item.live_url} target="_blank" rel="noopener noreferrer" className="text-xs text-primary hover:underline flex items-center gap-1"><ExternalLink className="h-3 w-3" /> Live</a>}
                  {item.github_url && <a href={item.github_url} target="_blank" rel="noopener noreferrer" className="text-xs text-primary hover:underline">GitHub</a>}
                </div>
              </div>
              <Button variant="ghost" size="icon" onClick={() => deleteItem(item.id)} className="text-destructive shrink-0"><Trash2 className="h-4 w-4" /></Button>
            </div>
          </CardContent>
        </Card>
      ))}

{items.length === 0 && !showForm && <p className="text-center text-muted-foreground py-8">No projects added yet.</p>}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/skills-editor.tsx"
"use client"

interface Skill { id: number; name: string; category: string; proficiency: number; sort_order: number }

export function SkillsEditor() {
  const [skills, setSkills] = useState<Skill[]>([])
  const [loading, setLoading] = useState(true)
  const [adding, setAdding] = useState(false)
  const [form, setForm] = useState({ name: "", category: "Technical", proficiency: 80 })

useEffect(() => {
    fetch("/api/admin/content?table=skills")
      .then(r => r.json())
      .then(res => { setSkills(res.data || []); setLoading(false) })
      .catch(() => setLoading(false))
  }, [])

async function addSkill() {
    if (!form.name) return
    setAdding(true)
    const res = await fetch("/api/admin/content", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ table: "skills", ...form, sort_order: skills.length }),
    })
    if (res.ok) {
      const result = await res.json()
      setSkills([...skills, result.data])
      setForm({ name: "", category: "Technical", proficiency: 80 })
    }
    setAdding(false)
  }

async function deleteSkill(id: number) {
    if (!confirm("Delete this skill?")) return
    const res = await fetch(`/api/admin/content?table=skills&id=${id}`, { method: "DELETE" })
    if (res.ok) setSkills(skills.filter(s => s.id !== id))
  }

if (loading) return <div className="flex justify-center p-8"><Loader2 className="h-6 w-6 animate-spin" /></div>

const categories = [...new Set(skills.map(s => s.category))]

return (
    <div className="space-y-6">
      <Card>
        <CardHeader><CardTitle>Add New Skill</CardTitle></CardHeader>
        <CardContent>
          <div className="flex flex-wrap gap-3 items-end">
            <div className="space-y-1 flex-1 min-w-[150px]"><Label>Name</Label><Input value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} placeholder="React, Python..." /></div>
            <div className="space-y-1 min-w-[120px]"><Label>Category</Label><Input value={form.category} onChange={e => setForm({ ...form, category: e.target.value })} placeholder="Technical" /></div>
            <div className="space-y-1 w-24"><Label>Level %</Label><Input type="number" min={0} max={100} value={form.proficiency} onChange={e => setForm({ ...form, proficiency: Number(e.target.value) })} /></div>
            <Button onClick={addSkill} disabled={adding} className="gap-2">{adding ? <Loader2 className="h-4 w-4 animate-spin" /> : <Plus className="h-4 w-4" />} Add</Button>
          </div>
        </CardContent>
      </Card>

{categories.map(cat => (
        <Card key={cat}>
          <CardHeader><CardTitle className="text-lg">{cat}</CardTitle></CardHeader>
          <CardContent>
            <div className="flex flex-wrap gap-2">
              {skills.filter(s => s.category === cat).map(skill => (
                <div key={skill.id} className="flex items-center gap-2 px-3 py-1.5 bg-primary/10 rounded-full text-sm">
                  <span>{skill.name}</span>
                  <span className="text-xs text-muted-foreground">({skill.proficiency}%)</span>
                  <button onClick={() => deleteSkill(skill.id)} className="text-destructive hover:text-destructive/80"><Trash2 className="h-3 w-3" /></button>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      ))}

{skills.length === 0 && <p className="text-center text-muted-foreground py-8">No skills added yet.</p>}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/treks-editor.tsx"
"use client"

interface Trek { id: number; name: string; location: string; altitude: string; duration: string; difficulty: string; description: string; image_url: string; date_completed: string }

export function TreksEditor() {
  const [items, setItems] = useState<Trek[]>([])
  const [loading, setLoading] = useState(true)
  const [showForm, setShowForm] = useState(false)
  const [adding, setAdding] = useState(false)
  const [form, setForm] = useState({ name: "", location: "", altitude: "", duration: "", difficulty: "Moderate", description: "", image_url: "", date_completed: "" })

useEffect(() => {
    fetch("/api/admin/content?table=treks")
      .then(r => r.json())
      .then(res => { setItems(res.data || []); setLoading(false) })
      .catch(() => setLoading(false))
  }, [])

async function addItem() {
    if (!form.name) return
    setAdding(true)
    const res = await fetch("/api/admin/content", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ table: "treks", ...form, sort_order: items.length }),
    })
    if (res.ok) {
      const result = await res.json()
      setItems([...items, result.data])
      setForm({ name: "", location: "", altitude: "", duration: "", difficulty: "Moderate", description: "", image_url: "", date_completed: "" })
      setShowForm(false)
    }
    setAdding(false)
  }

async function deleteItem(id: number) {
    if (!confirm("Delete this trek?")) return
    const res = await fetch(`/api/admin/content?table=treks&id=${id}`, { method: "DELETE" })
    if (res.ok) setItems(items.filter(i => i.id !== id))
  }

if (loading) return <div className="flex justify-center p-8"><Loader2 className="h-6 w-6 animate-spin" /></div>

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h2 className="text-xl font-semibold flex items-center gap-2"><Mountain className="h-5 w-5" /> Trekking Portfolio</h2>
        <Button onClick={() => setShowForm(!showForm)} className="gap-2"><Plus className="h-4 w-4" /> Add Trek</Button>
      </div>

{showForm && (
        <Card className="border-primary/20 border-2">
          <CardContent className="pt-6 space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-1"><Label>Trek Name</Label><Input value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} placeholder="Annapurna Base Camp" /></div>
              <div className="space-y-1"><Label>Location</Label><Input value={form.location} onChange={e => setForm({ ...form, location: e.target.value })} placeholder="Nepal" /></div>
              <div className="space-y-1"><Label>Altitude</Label><Input value={form.altitude} onChange={e => setForm({ ...form, altitude: e.target.value })} placeholder="4,130m" /></div>
              <div className="space-y-1"><Label>Duration</Label><Input value={form.duration} onChange={e => setForm({ ...form, duration: e.target.value })} placeholder="10 days" /></div>
              <div className="space-y-1">
                <Label>Difficulty</Label>
                <select className="w-full px-3 py-2 border rounded-md bg-background text-sm" value={form.difficulty} onChange={e => setForm({ ...form, difficulty: e.target.value })}>
                  <option>Easy</option>
                  <option>Moderate</option>
                  <option>Difficult</option>
                  <option>Extreme</option>
                </select>
              </div>
              <div className="space-y-1"><Label>Date Completed</Label><Input value={form.date_completed} onChange={e => setForm({ ...form, date_completed: e.target.value })} placeholder="2024" /></div>
            </div>
            <div className="space-y-1">
              <Label>Image URL</Label>
              <Input value={form.image_url} onChange={e => setForm({ ...form, image_url: e.target.value })} placeholder="https://..." />
              {form.image_url && (
                <div className="mt-2 relative w-full max-w-xs h-40 rounded-lg overflow-hidden border border-border">
                  <img src={form.image_url || "/placeholder.svg"} alt="Preview" className="w-full h-full object-cover" onError={e => { (e.target as HTMLImageElement).style.display = "none" }} />
                </div>
              )}
            </div>
            <div className="space-y-1"><Label>Description</Label><Textarea value={form.description} onChange={e => setForm({ ...form, description: e.target.value })} rows={3} placeholder="Your trek experience..." /></div>
            <div className="flex gap-2">
              <Button onClick={addItem} disabled={adding}>{adding ? "Saving..." : "Save"}</Button>
              <Button variant="outline" onClick={() => setShowForm(false)} className="bg-transparent">Cancel</Button>
            </div>
          </CardContent>
        </Card>
      )}

{items.map(item => (
        <Card key={item.id}>
          <CardContent className="pt-6">
            <div className="flex items-start gap-4">
              {item.image_url ? (
                <div className="w-28 h-20 rounded-lg overflow-hidden border border-border shrink-0">
                  <img src={item.image_url || "/placeholder.svg"} alt={item.name} className="w-full h-full object-cover" onError={e => { (e.target as HTMLImageElement).parentElement!.style.display = "none" }} />
                </div>
              ) : (
                <div className="w-28 h-20 rounded-lg border border-dashed border-muted-foreground/30 flex items-center justify-center shrink-0">
                  <ImageIcon className="h-6 w-6 text-muted-foreground/30" />
                </div>
              )}
              <div className="flex-1 min-w-0">
                <p className="font-bold text-lg">{item.name}</p>
                <div className="flex flex-wrap gap-2 mt-1">
                  {item.location && <span className="text-xs px-2 py-0.5 bg-primary/10 rounded-full">{item.location}</span>}
                  {item.altitude && <span className="text-xs px-2 py-0.5 bg-primary/10 rounded-full">{item.altitude}</span>}
                  {item.duration && <span className="text-xs px-2 py-0.5 bg-primary/10 rounded-full">{item.duration}</span>}
                  {item.difficulty && <span className="text-xs px-2 py-0.5 bg-primary/10 rounded-full">{item.difficulty}</span>}
                </div>
                {item.description && <p className="text-sm mt-2 text-muted-foreground line-clamp-2">{item.description}</p>}
                {item.date_completed && <p className="text-xs text-muted-foreground mt-1">Completed: {item.date_completed}</p>}
              </div>
              <Button variant="ghost" size="icon" onClick={() => deleteItem(item.id)} className="text-destructive shrink-0"><Trash2 className="h-4 w-4" /></Button>
            </div>
          </CardContent>
        </Card>
      ))}

{items.length === 0 && !showForm && <p className="text-center text-muted-foreground py-8">No treks added yet.</p>}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/analytics-provider.tsx"
"use client"

import { useEffect } from "react"
import Script from "next/script"
import { usePathname } from "next/navigation"

export function AnalyticsProvider({ measurementId }: { measurementId: string }) {
  const pathname = usePathname()

useEffect(() => {
    if (pathname && window.gtag) {
      window.gtag("config", measurementId, {
        page_path: pathname,
      })
    }
  }, [pathname, measurementId])

return (
    <>
      <Script strategy="afterInteractive" src={`https://www.googletagmanager.com/gtag/js?id=${measurementId}`} />
      <Script
        id="google-analytics"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${measurementId}');
          `,
        }}
      />
    </>
  )
}
[V0_FILE]typescriptreact:file="components/big5-results-display.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { AnimateOnScroll } from "@/components/scroll-animation"
import { Share2, RotateCcw, Printer, Info, ChevronDown, ChevronUp } from "lucide-react"
import Link from "next/link"
import { XAxis, YAxis, CartesianGrid, ResponsiveContainer, LabelList, Bar, BarChart } from "recharts"
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
import { PersonalityReport } from "./personality-report"

interface Big5Scores {
  O: number // Openness to Experience
  C: number // Conscientiousness
  E: number // Extraversion
  A: number // Agreeableness
  N: number // Neuroticism
}

interface UserAnswer {
  questionId: number
  value: number
}

interface Big5Question {
  id: number
  question: string
  trait: "O" | "C" | "E" | "A" | "N"
  subcategory: string
}

// Re-define big5Questions here for use in this component to map answers to questions
const big5Questions: Big5Question[] = [
  // Neuroticism (Emotional Stability) - N
  { id: 1, question: "I often feel nervous or anxious.", trait: "N", subcategory: "N1" },
  { id: 2, question: "I worry about things even when there's no reason.", trait: "N", subcategory: "N1" },
  { id: 3, question: "I easily get irritated by small things.", trait: "N", subcategory: "N2" },
  { id: 4, question: "I lose my temper quickly.", trait: "N", subcategory: "N2" },
  { id: 5, question: "I often feel sad or down for no clear reason.", trait: "N", subcategory: "N3" },
  { id: 6, question: "I frequently feel hopeless or discouraged.", trait: "N", subcategory: "N3" },
  { id: 7, question: "I often feel uncomfortable around others.", trait: "N", subcategory: "N4" },
  { id: 8, question: "I worry about being judged by others.", trait: "N", subcategory: "N4" },
  { id: 9, question: "I find it hard to resist temptations.", trait: "N", subcategory: "N5" },
  { id: 10, question: "I often act on impulse without thinking.", trait: "N", subcategory: "N5" },
  { id: 11, question: "I struggle to stay calm in difficult situations.", trait: "N", subcategory: "N6" },
  { id: 12, question: "I panic easily in stressful situations.", trait: "N", subcategory: "N6" },

// Extraversion (Sociability and Enthusiasm) - E
  { id: 13, question: "I easily connect with others emotionally.", trait: "E", subcategory: "E1" },
  { id: 14, question: "I often express affection toward people I care about.", trait: "E", subcategory: "E1" },
  { id: 15, question: "I enjoy being in large groups or social events.", trait: "E", subcategory: "E2" },
  { id: 16, question: "I seek out company rather than being alone.", trait: "E", subcategory: "E2" },
  { id: 17, question: "I often take the lead in group situations.", trait: "E", subcategory: "E3" },
  { id: 18, question: "I enjoy being the center of attention.", trait: "E", subcategory: "E3" },
  { id: 19, question: "I like to keep busy with many activities.", trait: "E", subcategory: "E4" },
  { id: 20, question: "I live a fast-paced life.", trait: "E", subcategory: "E4" },
  { id: 21, question: "I enjoy taking risks for excitement.", trait: "E", subcategory: "E5" },
  { id: 22, question: "I get bored easily without stimulation.", trait: "E", subcategory: "E5" },
  { id: 23, question: "I feel enthusiastic and upbeat most of the time.", trait: "E", subcategory: "E6" },
  { id: 24, question: "I frequently experience joy and excitement.", trait: "E", subcategory: "E6" },

// Openness to Experience (Creativity and Curiosity) - O
  { id: 25, question: "I enjoy letting my imagination run wild.", trait: "O", subcategory: "O1" },
  { id: 26, question: "I often daydream about different worlds or possibilities.", trait: "O", subcategory: "O1" },
  { id: 27, question: "I am deeply moved by art or music.", trait: "O", subcategory: "O2" },
  { id: 28, question: "I appreciate beauty in nature and creativity.", trait: "O", subcategory: "O2" },
  { id: 29, question: "I am very aware of my own emotions.", trait: "O", subcategory: "O3" },
  { id: 30, question: "I reflect deeply on how I feel.", trait: "O", subcategory: "O3" },
  { id: 31, question: "I enjoy trying new and unusual activities.", trait: "O", subcategory: "O4" },
  { id: 32, question: "I like breaking routines and experimenting with life.", trait: "O", subcategory: "O4" },
  { id: 33, question: "I enjoy exploring complex concepts and theories.", trait: "O", subcategory: "O5" },
  { id: 34, question: "I often think about philosophical or abstract ideas.", trait: "O", subcategory: "O5" },
  { id: 35, question: "I am open to reconsidering traditional beliefs.", trait: "O", subcategory: "O6" },
  { id: 36, question: "I believe in questioning social norms and authority.", trait: "O", subcategory: "O6" },

// Agreeableness (Compassion and Cooperation) - A
  { id: 37, question: "I believe most people have good intentions.", trait: "A", subcategory: "A1" },
  { id: 38, question: "I usually assume the best about others.", trait: "A", subcategory: "A1" },
  { id: 39, question: "I express my opinions honestly and clearly.", trait: "A", subcategory: "A2" },
  { id: 40, question: "I avoid being deceptive or manipulative.", trait: "A", subcategory: "A2" },
  { id: 41, question: "I like helping others even when it's inconvenient.", trait: "A", subcategory: "A3" },
  { id: 42, question: "I often put others' needs before mine.", trait: "A", subcategory: "A3" },
  { id: 43, question: "I avoid arguments and conflicts.", trait: "A", subcategory: "A4" },
  { id: 44, question: "I try to maintain harmony in groups.", trait: "A", subcategory: "A4" },
  { id: 45, question: "I rarely brag about my achievements.", trait: "A", subcategory: "A5" },
  { id: 46, question: "I prefer to stay humble even when I succeed.", trait: "A", subcategory: "A5" },
  { id: 47, question: "I feel deep concern for people who are suffering.", trait: "A", subcategory: "A6" },
  { id: 48, question: "I am very empathetic toward others' emotions.", trait: "A", subcategory: "A6" },

// Conscientiousness (Organization and Dependability) - C
  { id: 49, question: "I consider myself capable and efficient.", trait: "C", subcategory: "C1" },
  { id: 50, question: "I feel confident handling difficult tasks.", trait: "C", subcategory: "C1" },
  { id: 51, question: "I like to keep things organized and tidy.", trait: "C", subcategory: "C2" },
  { id: 52, question: "I follow clear routines in my life.", trait: "C", subcategory: "C2" },
  { id: 53, question: "I take my responsibilities seriously.", trait: "C", subcategory: "C3" },
  { id: 54, question: "I keep promises and meet expectations.", trait: "C", subcategory: "C3" },
  { id: 55, question: "I am driven to achieve my goals.", trait: "C", subcategory: "C4" },
  { id: 56, question: "I set high standards for myself.", trait: "C", subcategory: "C4" },
  { id: 57, question: "I complete tasks even when I don't feel like it.", trait: "C", subcategory: "C5" },
  { id: 58, question: "I avoid procrastination and stay focused.", trait: "C", subcategory: "C5" },
  { id: 59, question: "I think carefully before making decisions.", trait: "C", subcategory: "C6" },
  { id: 60, question: "I weigh pros and cons before acting.", trait: "C", subcategory: "C6" },
]

// Subcategory names mapping
const subcategoryNames: Record<string, string> = {
  N1: "Anxiety",
  N2: "Anger/Hostility",
  N3: "Depression",
  N4: "Self-Consciousness",
  N5: "Impulsiveness",
  N6: "Vulnerability",
  E1: "Warmth",
  E2: "Gregariousness",
  E3: "Assertiveness",
  E4: "Activity",
  E5: "Excitement-Seeking",
  E6: "Positive Emotions",
  O1: "Fantasy",
  O2: "Aesthetics",
  O3: "Feelings",
  O4: "Actions",
  O5: "Ideas",
  O6: "Values",
  A1: "Trust",
  A2: "Straightforwardness",
  A3: "Altruism",
  A4: "Compliance",
  A5: "Modesty",
  A6: "Tender-Mindedness",
  C1: "Competence",
  C2: "Order",
  C3: "Dutifulness",
  C4: "Achievement Striving",
  C5: "Self-Discipline",
  C6: "Deliberation",
}

// Trait full names
const traitFullNames: Record<string, string> = {
  O: "Openness to Experience",
  C: "Conscientiousness",
  E: "Extraversion",
  A: "Agreeableness",
  N: "Neuroticism",
}

interface Big5ResultsDisplayProps {
  scores: Big5Scores
  answers: UserAnswer[]
  onReset: () => void
}

export function Big5ResultsDisplay({ scores, answers, onReset }: Big5ResultsDisplayProps) {
  const [showPrintReport, setShowPrintReport] = useState(false)
  const [expandedTraits, setExpandedTraits] = useState<Record<string, boolean>>({
    N: true,
    E: true,
    O: true,
    A: true,
    C: true,
  })

const getTraitLevel = (score: number): "Low" | "Moderate" | "High" => {
    if (score <= 30) return "Low"
    if (score > 30 && score <= 42) return "Moderate"
    return "High"
  }

const getSubcategoryLevel = (score: number): "Low" | "Moderate" | "High" => {
    if (score <= 5) return "Low"
    if (score > 5 && score <= 7) return "Moderate"
    return "High"
  }

const getTraitSummary = (trait: keyof Big5Scores, score: number) => {
    const level = getTraitLevel(score)
    switch (trait) {
      case "N":
        if (level === "Low")
          return "You are emotionally stable, calm under pressure, and resilient in stressful situations."
        if (level === "Moderate")
          return "You experience a balanced emotional life, occasionally feeling anxious but generally able to manage stress."
        return "You may struggle with emotional reactivity, often feeling anxious, moody, or overwhelmed under stress."
      case "E":
        if (level === "Low")
          return "You tend to be reserved, enjoy solitude, and feel drained by too much social interaction."
        if (level === "Moderate")
          return "You enjoy socializing but also value alone time, showing a balanced sociability."
        return "You are outgoing, energetic, and feel energized by social interaction and group activities."
      case "O":
        if (level === "Low") return "You prefer familiarity and routine over novelty and abstract ideas."
        if (level === "Moderate")
          return "You are curious but also grounded, open to new experiences while valuing practicality."
        return "You are highly imaginative, creative, and intellectually curious with a love for new ideas and experiences."
      case "A":
        if (level === "Low")
          return "You may be competitive, skeptical of others, and prefer being direct over diplomatic."
        if (level === "Moderate")
          return "You are cooperative but can assert yourself when needed, balancing empathy with boundaries."
        return "You are empathetic, trusting, and highly cooperative, often prioritizing harmony and kindness."
      case "C":
        if (level === "Low")
          return "You may prefer spontaneity over planning, and sometimes struggle with follow-through or organization."
        if (level === "Moderate") return "You are generally dependable and organized but flexible when needed."
        return "You are disciplined, goal-oriented, and highly reliable in completing tasks and managing responsibilities."
      default:
        return ""
    }
  }

const getSubcategorySummary = (subcategory: string, score: number) => {
    const level = getSubcategoryLevel(score)
    switch (subcategory) {
      case "N1": // Anxiety
        if (level === "Low") return "You rarely experience anxiety and tend to be calm and unworried."
        if (level === "Moderate") return "You experience occasional anxiety but generally manage it well."
        return "You frequently feel anxious, worried, and prone to nervousness."
      case "N2": // Anger/Hostility
        if (level === "Low") return "You are generally calm and rarely experience feelings of anger or hostility."
        if (level === "Moderate")
          return "You occasionally feel irritated or angry but typically manage these emotions constructively."
        return "You are prone to anger, easily frustrated, and may express hostility."
      case "N3": // Depression
        if (level === "Low")
          return "You are generally cheerful and optimistic, rarely experiencing feelings of sadness or hopelessness."
        if (level === "Moderate")
          return "You experience occasional periods of sadness but generally maintain a positive outlook."
        return "You frequently feel sad, hopeless, and may struggle with depressive moods."
      case "N4": // Self-Consciousness
        if (level === "Low")
          return "You are self-assured and comfortable in social situations, rarely worrying about others' opinions."
        if (level === "Moderate")
          return "You are generally comfortable but may occasionally feel self-conscious in social settings."
        return "You are highly self-conscious, easily embarrassed, and worry excessively about what others think."
      case "N5": // Impulsiveness
        if (level === "Low") return "You are disciplined and thoughtful, rarely acting on impulse."
        if (level === "Moderate") return "You are generally self-controlled but may occasionally act on impulse."
        return "You are prone to impulsive behavior, often acting without thinking through consequences."
      case "N6": // Vulnerability
        if (level === "Low")
          return "You are resilient and composed under pressure, rarely feeling overwhelmed by stress."
        if (level === "Moderate")
          return "You are generally resilient but may feel vulnerable during highly stressful times."
        return "You feel vulnerable and overwhelmed by stress, struggling to cope with pressure."

case "E1": // Warmth
        if (level === "Low")
          return "You tend to be reserved and less outwardly affectionate, preferring deeper, fewer connections."
        if (level === "Moderate")
          return "You are generally warm and friendly, showing affection to those you care about."
        return "You are highly warm, affectionate, and easily form close bonds with others."
      case "E2": // Gregariousness
        if (level === "Low") return "You prefer solitude or small groups, finding large social gatherings draining."
        if (level === "Moderate") return "You enjoy social interaction but also value alone time, balancing both."
        return "You thrive in social settings, enjoy large groups, and seek out company."
      case "E3": // Assertiveness
        if (level === "Low") return "You tend to be less assertive, preferring to let others take the lead."
        if (level === "Moderate") return "You are assertive when necessary but generally prefer a cooperative approach."
        return "You are highly assertive, enjoy taking charge, and express your opinions forcefully."
      case "E4": // Activity
        if (level === "Low") return "You prefer a slower pace of life and less intense activities."
        if (level === "Moderate")
          return "You are moderately active, enjoying a balance of energetic and relaxed pursuits."
        return "You are highly energetic, enjoy a fast-paced life, and are always on the go."
      case "E5": // Excitement-Seeking
        if (level === "Low") return "You prefer routine and predictability, avoiding thrilling or risky activities."
        if (level === "Moderate")
          return "You are open to new experiences but generally prefer a moderate level of excitement."
        return "You actively seek excitement, enjoy thrilling activities, and are prone to taking risks."
      case "E6": // Positive Emotions
        if (level === "Low") return "You tend to be less expressive of positive emotions, maintaining a more even keel."
        if (level === "Moderate")
          return "You experience and express positive emotions regularly, maintaining a generally optimistic outlook."
        return "You are highly enthusiastic, cheerful, and frequently experience joy and excitement."

case "O1": // Fantasy
        if (level === "Low")
          return "You are grounded in reality and less inclined to daydream or engage in elaborate fantasies."
        if (level === "Moderate") return "You enjoy imagination but remain practical, balancing fantasy with reality."
        return "You have a vivid imagination, enjoy daydreaming, and are drawn to fantastical ideas."
      case "O2": // Aesthetics
        if (level === "Low")
          return "You are less moved by art, music, or natural beauty, preferring practical considerations."
        if (level === "Moderate") return "You appreciate art and beauty but it's not a central focus."
        return "You have a deep appreciation for art, music, and beauty, finding profound meaning in them."
      case "O3": // Feelings
        if (level === "Low") return "You tend to be less aware of or expressive about your own emotions."
        if (level === "Moderate") return "You are generally aware of your emotions and can reflect on them."
        return "You are highly aware of your emotions, reflect deeply on them, and experience a wide range of feelings."
      case "O4": // Actions
        if (level === "Low") return "You prefer routine and familiarity, avoiding new or unconventional activities."
        if (level === "Moderate")
          return "You are open to new experiences but generally prefer a degree of predictability."
        return "You enjoy trying new things, breaking routines, and experimenting with life."
      case "O5": // Ideas
        if (level === "Low")
          return "You prefer concrete facts and practical solutions over abstract or complex theories."
        if (level === "Moderate") return "You are curious about ideas but remain grounded in practical applications."
        return "You are intellectually curious, enjoy exploring complex ideas, and love theoretical discussions."
      case "O6": // Values
        if (level === "Low")
          return "You hold traditional values and beliefs, less inclined to question authority or social norms."
        if (level === "Moderate") return "You are open to reconsidering beliefs but generally respect tradition."
        return "You are open-minded, willing to question traditional values, and challenge authority."

case "A1": // Trust
        if (level === "Low") return "You tend to be skeptical and cautious of others' intentions."
        if (level === "Moderate") return "You are generally trusting but maintain a healthy level of caution."
        return "You are highly trusting, believing in the good intentions of most people."
      case "A2": // Straightforwardness
        if (level === "Low") return "You may be indirect or manipulative in your communication."
        if (level === "Moderate") return "You are generally honest but can be diplomatic when needed."
        return "You are direct, honest, and straightforward in your communication."
      case "A3": // Altruism
        if (level === "Low") return "You prioritize your own needs and may be less inclined to help others."
        if (level === "Moderate") return "You are willing to help others but also prioritize your own well-being."
        return "You are highly altruistic, often putting others' needs before your own."
      case "A4": // Compliance
        if (level === "Low") return "You are competitive and may prefer to assert your own will over cooperating."
        if (level === "Moderate") return "You are cooperative but can assert yourself when necessary."
        return "You are highly cooperative, avoid conflict, and prioritize harmony."
      case "A5": // Modesty
        if (level === "Low") return "You may be prone to bragging or highlighting your achievements."
        if (level === "Moderate") return "You are generally modest but can acknowledge your accomplishments."
        return "You are humble and rarely brag about your achievements."
      case "A6": // Tender-Mindedness
        if (level === "Low") return "You are less empathetic and may struggle to understand others' emotions."
        if (level === "Moderate") return "You are generally empathetic and concerned for others' well-being."
        return "You are deeply empathetic, compassionate, and feel strong concern for others' suffering."

case "C1": // Competence
        if (level === "Low") return "You may doubt your abilities and feel less capable of handling difficult tasks."
        if (level === "Moderate") return "You are generally competent and confident in your abilities."
        return "You are highly competent, efficient, and confident in your ability to handle challenges."
      case "C2": // Order
        if (level === "Low") return "You prefer spontaneity and may struggle with organization and tidiness."
        if (level === "Moderate") return "You are generally organized but can be flexible when needed."
        return "You are highly organized, meticulous, and prefer a structured environment."
      case "C3": // Dutifulness
        if (level === "Low") return "You may be less reliable and sometimes neglect your responsibilities."
        if (level === "Moderate") return "You are generally dependable and take your responsibilities seriously."
        return "You are highly dutiful, reliable, and always fulfill your obligations."
      case "C4": // Achievement Striving
        if (level === "Low") return "You are less driven by external achievements and may set lower goals."
        if (level === "Moderate") return "You are motivated to achieve goals but also value balance."
        return "You are highly ambitious, driven to succeed, and set high standards for yourself."
      case "C5": // Self-Discipline
        if (level === "Low") return "You may struggle with self-discipline and procrastination."
        if (level === "Moderate") return "You are generally self-disciplined but may occasionally procrastinate."
        return "You are highly self-disciplined, persistent, and rarely procrastinate."
      case "C6": // Deliberation
        if (level === "Low") return "You tend to make quick decisions without much thought."
        if (level === "Moderate") return "You consider options before acting but can also be spontaneous."
        return "You are thoughtful, deliberate, and carefully weigh pros and cons before making decisions."
      default:
        return ""
    }
  }

// Calculate subcategory scores
  const calculateSubcategoryScores = () => {
    const subcategoryScores: Record<string, number> = {}
    const subcategories = [
      "N1",
      "N2",
      "N3",
      "N4",
      "N5",
      "N6",
      "E1",
      "E2",
      "E3",
      "E4",
      "E5",
      "E6",
      "O1",
      "O2",
      "O3",
      "O4",
      "O5",
      "O6",
      "A1",
      "A2",
      "A3",
      "A4",
      "A5",
      "A6",
      "C1",
      "C2",
      "C3",
      "C4",
      "C5",
      "C6",
    ]

subcategories.forEach((subcat) => {
      const questions = big5Questions.filter((q) => q.subcategory === subcat)
      const score = questions.reduce((sum, q) => {
        const answer = answers.find((a) => a.questionId === q.id)
        return sum + (answer?.value || 0)
      }, 0)
      subcategoryScores[subcat] = score
    })

return subcategoryScores
  }

const subcategoryScores = calculateSubcategoryScores()

// Generate integrated personality dimensions
  const getIntegratedDimensions = () => {
    const oLevel = getTraitLevel(scores.O)
    const cLevel = getTraitLevel(scores.C)
    const eLevel = getTraitLevel(scores.E)
    const aLevel = getTraitLevel(scores.A)
    const nLevel = getTraitLevel(scores.N)

return {
      emotionalStyle:
        nLevel === "High"
          ? "You tend to experience emotions intensely and may be sensitive to stress. Developing coping strategies and emotional regulation techniques can help you navigate challenging situations more effectively."
          : nLevel === "Low"
            ? "You are emotionally stable and resilient, able to handle stress and pressure with composure. This stability allows you to remain calm in difficult situations and make clear-headed decisions."
            : "You have a balanced emotional style, experiencing emotions appropriately while maintaining overall stability. You can handle most stressful situations while still being in touch with your feelings.",

interpersonalRelations:
        eLevel === "High" && aLevel === "High"
          ? "You are highly sociable and cooperative, forming warm relationships easily. You thrive in social settings and prioritize harmony in your interactions."
          : eLevel === "Low" && aLevel === "Low"
            ? "You prefer independence and may be more selective in your relationships. You value authenticity over social pleasantries and may prefer deeper one-on-one connections."
            : "You have a balanced approach to relationships, able to connect with others while maintaining appropriate boundaries. You can adapt your social style to different situations.",

vocationalStyle:
        cLevel === "High" && oLevel === "High"
          ? "You combine creativity with discipline, making you well-suited for roles that require both innovation and follow-through. You excel in positions that allow you to develop new ideas while maintaining high standards."
          : cLevel === "High" && oLevel === "Low"
            ? "You are highly organized and detail-oriented, excelling in structured environments with clear procedures. You prefer established methods and are reliable in executing tasks."
            : cLevel === "Low" && oLevel === "High"
              ? "You are creative and adaptable but may struggle with routine tasks. Roles that allow flexibility and creative expression suit you best."
              : "You have a flexible vocational style, able to balance creativity with practicality as needed.",

patternOfActivity:
        eLevel === "High" && cLevel === "High"
          ? "You are highly energetic and productive, always keeping busy with multiple activities. You thrive on achievement and social engagement."
          : eLevel === "Low" && cLevel === "Low"
            ? "You prefer a relaxed pace and may be selective about how you spend your energy. You value quality over quantity in your activities."
            : "You have a balanced activity pattern, able to be productive when needed while also knowing when to rest and recharge.",

attitudes:
        oLevel === "High"
          ? "You are open-minded and intellectually curious, willing to explore new ideas and perspectives. You value growth, learning, and personal development."
          : oLevel === "Low"
            ? "You hold traditional values and prefer familiar approaches. You value stability, consistency, and proven methods."
            : "You have balanced attitudes, open to new ideas while respecting tradition and established practices.",

academicPerformance:
        cLevel === "High" && oLevel === "High"
          ? "You are well-suited for academic pursuits, combining intellectual curiosity with discipline and organization. You can engage deeply with complex material while maintaining focus."
          : cLevel === "High"
            ? "You excel in structured academic environments, with strong organizational skills and the discipline to complete assignments on time."
            : oLevel === "High"
              ? "You are intellectually curious and enjoy learning, though you may benefit from developing more structured study habits."
              : "You may need to develop strategies to stay engaged with academic material and maintain consistent study habits.",

character:
        aLevel === "High" && cLevel === "High"
          ? "You are principled, reliable, and compassionate. You take your commitments seriously and treat others with respect and kindness."
          : aLevel === "High"
            ? "You are warm, empathetic, and considerate of others. You prioritize harmony and cooperation in your relationships."
            : cLevel === "High"
              ? "You are responsible, disciplined, and goal-oriented. You hold yourself to high standards and follow through on commitments."
              : "You value authenticity and personal freedom, preferring to follow your own path rather than conforming to expectations.",
    }
  }

const integratedDimensions = getIntegratedDimensions()

const mainTraitChartData = [
    { name: "Openness", score: scores.O, fill: "hsl(var(--chart-1))" },
    { name: "Conscientiousness", score: scores.C, fill: "hsl(var(--chart-2))" },
    { name: "Extraversion", score: scores.E, fill: "hsl(var(--chart-3))" },
    { name: "Agreeableness", score: scores.A, fill: "hsl(var(--chart-4))" },
    { name: "Neuroticism", score: scores.N, fill: "hsl(var(--chart-5))" },
  ]

const shareResult = () => {
    const text = `I just completed the Big 5 personality test! My scores are: Openness: ${scores.O}/60, Conscientiousness: ${scores.C}/60, Extraversion: ${scores.E}/60, Agreeableness: ${scores.A}/60, Neuroticism: ${scores.N}/60. Check out my full personality profile!`

if (navigator.share) {
      navigator.share({
        title: "My Big 5 Personality Test Result",
        text: text,
        url: window.location.href,
      })
    } else {
      navigator.clipboard.writeText(`${text} - Take the test at ${window.location.href}`)
      alert("Result copied to clipboard!")
    }
  }

const handlePrintReport = () => {
    setShowPrintReport(true)
    setTimeout(() => {
      window.print()
      setShowPrintReport(false)
    }, 100)
  }

const toggleTraitExpanded = (trait: string) => {
    setExpandedTraits((prev) => ({ ...prev, [trait]: !prev[trait] }))
  }

const getLevelColor = (level: string) => {
    switch (level) {
      case "Low":
        return "text-blue-600 dark:text-blue-400"
      case "Moderate":
        return "text-yellow-600 dark:text-yellow-400"
      case "High":
        return "text-green-600 dark:text-green-400"
      default:
        return ""
    }
  }

const getLevelBgColor = (level: string) => {
    switch (level) {
      case "Low":
        return "bg-blue-100 dark:bg-blue-900/30"
      case "Moderate":
        return "bg-yellow-100 dark:bg-yellow-900/30"
      case "High":
        return "bg-green-100 dark:bg-green-900/30"
      default:
        return ""
    }
  }

if (showPrintReport) {
    return (
      <PersonalityReport
        testType="BIG5"
        big5Scores={scores}
        big5Answers={answers}
        customSummaries={integratedDimensions}
      />
    )
  }

return (
    <div className="container mx-auto px-4 py-8 max-w-6xl">
      <AnimateOnScroll animation="fadeIn">
        <Card className="border-none shadow-xl">
          <CardHeader className="text-center bg-gradient-to-r from-primary/10 to-primary/5 border-b">
            <CardTitle className="text-3xl md:text-4xl font-bold text-primary">
              Your Big 5 Personality Profile
            </CardTitle>
            <p className="text-lg text-muted-foreground">Comprehensive analysis based on the Five-Factor Model</p>
          </CardHeader>
          <CardContent className="p-4 md:p-8">
            {/* Main Trait Chart */}
            <section className="mb-12">
              <h2 className="text-2xl font-bold mb-6 text-center">Core Trait Scores</h2>
              <AnimateOnScroll animation="zoomIn" delay={0.2}>
                <Card className="border border-primary/20">
                  <CardContent className="p-4 md:p-6">
                    <ChartContainer
                      config={{
                        score: {
                          label: "Score",
                          color: "hsl(var(--primary))",
                        },
                      }}
                      className="h-[300px] w-full"
                    >
                      <ResponsiveContainer width="100%" height="100%">
                        <BarChart data={mainTraitChartData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
                          <CartesianGrid strokeDasharray="3 3" />
                          <XAxis dataKey="name" tick={{ fontSize: 12 }} />
                          <YAxis domain={[0, 60]} />
                          <ChartTooltip content={<ChartTooltipContent />} />
                          <Bar dataKey="score" radius={[4, 4, 0, 0]}>
                            <LabelList dataKey="score" position="top" />
                          </Bar>
                        </BarChart>
                      </ResponsiveContainer>
                    </ChartContainer>
                    <div className="mt-4 text-center text-sm text-muted-foreground">
                      <p className="font-semibold">Rating Scale:</p>
                      <p>
                        <span className="text-blue-600">Low: 0-30</span> |{" "}
                        <span className="text-yellow-600">Moderate: 31-42</span> |{" "}
                        <span className="text-green-600">High: 43-60</span>
                      </p>
                    </div>
                  </CardContent>
                </Card>
              </AnimateOnScroll>
            </section>

{/* Score Summary Table */}
            <section className="mb-12">
              <h2 className="text-2xl font-bold mb-6 text-center">Score Summary</h2>
              <AnimateOnScroll animation="slideUp" delay={0.3}>
                <Card className="border border-primary/20 overflow-hidden">
                  <CardContent className="p-0">
                    <div className="overflow-x-auto">
                      <table className="w-full">
                        <thead className="bg-muted/50">
                          <tr>
                            <th className="px-4 py-3 text-left font-semibold">Trait</th>
                            <th className="px-4 py-3 text-center font-semibold">Score</th>
                            <th className="px-4 py-3 text-center font-semibold">Level</th>
                            <th className="px-4 py-3 text-left font-semibold hidden md:table-cell">Interpretation</th>
                          </tr>
                        </thead>
                        <tbody>
                          {Object.entries(scores).map(([trait, score], index) => {
                            const level = getTraitLevel(score)
                            return (
                              <tr key={trait} className={index % 2 === 0 ? "bg-background" : "bg-muted/20"}>
                                <td className="px-4 py-3 font-medium">{traitFullNames[trait]}</td>
                                <td className="px-4 py-3 text-center font-bold">{score}/60</td>
                                <td className="px-4 py-3 text-center">
                                  <span
                                    className={`px-2 py-1 rounded-full text-sm font-medium ${getLevelBgColor(level)} ${getLevelColor(level)}`}
                                  >
                                    {level}
                                  </span>
                                </td>
                                <td className="px-4 py-3 text-sm text-muted-foreground hidden md:table-cell">
                                  {getTraitSummary(trait as keyof Big5Scores, score)}
                                </td>
                              </tr>
                            )
                          })}
                        </tbody>
                      </table>
                    </div>
                  </CardContent>
                </Card>
              </AnimateOnScroll>
            </section>

{/* Detailed Trait Analysis with Subcategories */}
            <section className="mb-12">
              <h2 className="text-2xl font-bold mb-6 text-center">Detailed Trait Analysis</h2>
              <div className="space-y-4">
                {(["N", "E", "O", "A", "C"] as const).map((trait, traitIndex) => {
                  const traitScore = scores[trait]
                  const traitLevel = getTraitLevel(traitScore)
                  const subcategories = ["1", "2", "3", "4", "5", "6"].map((num) => `${trait}${num}`)

return (
                    <AnimateOnScroll key={trait} animation="slideUp" delay={0.1 + traitIndex * 0.1}>
                      <Card className="border border-primary/20">
                        <CardHeader
                          className="cursor-pointer hover:bg-muted/50 transition-colors"
                          onClick={() => toggleTraitExpanded(trait)}
                        >
                          <div className="flex items-center justify-between">
                            <div className="flex items-center gap-4">
                              <CardTitle className="text-lg md:text-xl">{traitFullNames[trait]}</CardTitle>
                              <span
                                className={`px-3 py-1 rounded-full text-sm font-medium ${getLevelBgColor(traitLevel)} ${getLevelColor(traitLevel)}`}
                              >
                                {traitScore}/60 - {traitLevel}
                              </span>
                            </div>
                            {expandedTraits[trait] ? (
                              <ChevronUp className="h-5 w-5 text-muted-foreground" />
                            ) : (
                              <ChevronDown className="h-5 w-5 text-muted-foreground" />
                            )}
                          </div>
                          <p className="text-muted-foreground text-sm mt-2">{getTraitSummary(trait, traitScore)}</p>
                        </CardHeader>
                        {expandedTraits[trait] && (
                          <CardContent className="pt-0">
                            <div className="border-t pt-4">
                              <h4 className="font-semibold mb-4 text-sm text-muted-foreground uppercase tracking-wide">
                                Subcategory Breakdown
                              </h4>
                              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                                {subcategories.map((subcat) => {
                                  const subcatScore = subcategoryScores[subcat]
                                  const subcatLevel = getSubcategoryLevel(subcatScore)
                                  return (
                                    <div key={subcat} className="p-3 rounded-lg bg-muted/30 border">
                                      <div className="flex items-center justify-between mb-2">
                                        <span className="font-medium text-sm">{subcategoryNames[subcat]}</span>
                                        <span
                                          className={`text-xs font-medium px-2 py-0.5 rounded ${getLevelBgColor(subcatLevel)} ${getLevelColor(subcatLevel)}`}
                                        >
                                          {subcatScore}/10
                                        </span>
                                      </div>
                                      <p className="text-xs text-muted-foreground">
                                        {getSubcategorySummary(subcat, subcatScore)}
                                      </p>
                                    </div>
                                  )
                                })}
                              </div>
                            </div>
                          </CardContent>
                        )}
                      </Card>
                    </AnimateOnScroll>
                  )
                })}
              </div>
            </section>

{/* Integrated Personality Dimensions */}
            <section className="mb-12">
              <h2 className="text-2xl font-bold mb-6 text-center">Integrated Personality Dimensions</h2>
              <div className="grid gap-4 md:grid-cols-2">
                <AnimateOnScroll animation="slideUp" delay={0.1}>
                  <Card className="border border-primary/20 h-full">
                    <CardHeader className="pb-2">
                      <CardTitle className="text-lg flex items-center gap-2">
                        <span className="w-2 h-2 rounded-full bg-blue-500"></span>
                        Emotional Style
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <p className="text-muted-foreground text-sm">{integratedDimensions.emotionalStyle}</p>
                    </CardContent>
                  </Card>
                </AnimateOnScroll>

<AnimateOnScroll animation="slideUp" delay={0.15}>
                  <Card className="border border-primary/20 h-full">
                    <CardHeader className="pb-2">
                      <CardTitle className="text-lg flex items-center gap-2">
                        <span className="w-2 h-2 rounded-full bg-green-500"></span>
                        Interpersonal Relations
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <p className="text-muted-foreground text-sm">{integratedDimensions.interpersonalRelations}</p>
                    </CardContent>
                  </Card>
                </AnimateOnScroll>

<AnimateOnScroll animation="slideUp" delay={0.2}>
                  <Card className="border border-primary/20 h-full">
                    <CardHeader className="pb-2">
                      <CardTitle className="text-lg flex items-center gap-2">
                        <span className="w-2 h-2 rounded-full bg-purple-500"></span>
                        Vocational Style
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <p className="text-muted-foreground text-sm">{integratedDimensions.vocationalStyle}</p>
                    </CardContent>
                  </Card>
                </AnimateOnScroll>

<AnimateOnScroll animation="slideUp" delay={0.25}>
                  <Card className="border border-primary/20 h-full">
                    <CardHeader className="pb-2">
                      <CardTitle className="text-lg flex items-center gap-2">
                        <span className="w-2 h-2 rounded-full bg-orange-500"></span>
                        Pattern of Activity
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <p className="text-muted-foreground text-sm">{integratedDimensions.patternOfActivity}</p>
                    </CardContent>
                  </Card>
                </AnimateOnScroll>

<AnimateOnScroll animation="slideUp" delay={0.3}>
                  <Card className="border border-primary/20 h-full">
                    <CardHeader className="pb-2">
                      <CardTitle className="text-lg flex items-center gap-2">
                        <span className="w-2 h-2 rounded-full bg-pink-500"></span>
                        Attitudes
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <p className="text-muted-foreground text-sm">{integratedDimensions.attitudes}</p>
                    </CardContent>
                  </Card>
                </AnimateOnScroll>

<AnimateOnScroll animation="slideUp" delay={0.35}>
                  <Card className="border border-primary/20 h-full">
                    <CardHeader className="pb-2">
                      <CardTitle className="text-lg flex items-center gap-2">
                        <span className="w-2 h-2 rounded-full bg-cyan-500"></span>
                        Academic Performance
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <p className="text-muted-foreground text-sm">{integratedDimensions.academicPerformance}</p>
                    </CardContent>
                  </Card>
                </AnimateOnScroll>

<AnimateOnScroll animation="slideUp" delay={0.4}>
                  <Card className="border border-primary/20 h-full md:col-span-2">
                    <CardHeader className="pb-2">
                      <CardTitle className="text-lg flex items-center gap-2">
                        <span className="w-2 h-2 rounded-full bg-amber-500"></span>
                        Character
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <p className="text-muted-foreground text-sm">{integratedDimensions.character}</p>
                    </CardContent>
                  </Card>
                </AnimateOnScroll>
              </div>
            </section>

{/* Action Buttons */}
            <div className="flex flex-col sm:flex-row gap-4 justify-center flex-wrap">
              <AnimateOnScroll animation="slideUp" delay={0.5}>
                <div className="flex flex-col items-center gap-2">
                  <Button onClick={handlePrintReport} className="flex items-center gap-2">
                    <Printer className="h-4 w-4" />
                    Print Full Report
                  </Button>
                  <div className="flex items-center gap-1 text-xs text-muted-foreground">
                    <Info className="h-3 w-3" />
                    <span>Use "Save as PDF" to download</span>
                  </div>
                </div>
              </AnimateOnScroll>
              <AnimateOnScroll animation="slideUp" delay={0.55}>
                <Button onClick={shareResult} variant="outline" className="flex items-center gap-2 bg-transparent">
                  <Share2 className="h-4 w-4" />
                  Share Result
                </Button>
              </AnimateOnScroll>
              <AnimateOnScroll animation="slideUp" delay={0.6}>
                <Button variant="outline" onClick={onReset} className="flex items-center gap-2 bg-transparent">
                  <RotateCcw className="h-4 w-4" />
                  Take Test Again
                </Button>
              </AnimateOnScroll>
              <AnimateOnScroll animation="slideUp" delay={0.65}>
                <Button variant="outline" asChild>
                  <Link href="/">Back to Portfolio</Link>
                </Button>
              </AnimateOnScroll>
            </div>
          </CardContent>
        </Card>
      </AnimateOnScroll>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/big5-test.tsx"
"use client"

interface Big5Question {
  id: number
  question: string
  trait: "O" | "C" | "E" | "A" | "N"
  subcategory: string // Added subcategory
}

interface Big5Scores {
  O: number // Openness to Experience
  C: number // Conscientiousness
  E: number // Extraversion
  A: number // Agreeableness
  N: number // Neuroticism
}

interface UserAnswer {
  questionId: number
  value: number
}

const likertOptions = [
  { label: "Strongly Disagree", value: 1 },
  { label: "Disagree", value: 2 },
  { label: "Neutral", value: 3 },
  { label: "Agree", value: 4 },
  { label: "Strongly Agree", value: 5 },
]

const big5Questions: Big5Question[] = [
  // Neuroticism (Emotional Stability) - N
  { id: 1, question: "I often feel nervous or anxious.", trait: "N", subcategory: "N1" },
  { id: 2, question: "I worry about things even when there's no reason.", trait: "N", subcategory: "N1" },
  { id: 3, question: "I easily get irritated by small things.", trait: "N", subcategory: "N2" },
  { id: 4, question: "I lose my temper quickly.", trait: "N", subcategory: "N2" },
  { id: 5, question: "I often feel sad or down for no clear reason.", trait: "N", subcategory: "N3" },
  { id: 6, question: "I frequently feel hopeless or discouraged.", trait: "N", subcategory: "N3" },
  { id: 7, question: "I often feel uncomfortable around others.", trait: "N", subcategory: "N4" },
  { id: 8, question: "I worry about being judged by others.", trait: "N", subcategory: "N4" },
  { id: 9, question: "I find it hard to resist temptations.", trait: "N", subcategory: "N5" },
  { id: 10, question: "I often act on impulse without thinking.", trait: "N", subcategory: "N5" },
  { id: 11, question: "I struggle to stay calm in difficult situations.", trait: "N", subcategory: "N6" },
  { id: 12, question: "I panic easily in stressful situations.", trait: "N", subcategory: "N6" },

// Agreeableness (Compassion and Cooperation) - A
  { id: 37, question: "I believe most people have good intentions.", trait: "A", subcategory: "A1" },
  { id: 38, question: "I usually assume the best about others.", trait: "A", subcategory: "A1" },
  { id: 39, question: "I express my opinions honestly and clearly.", trait: "A", subcategory: "A2" },
  { id: 40, question: "I avoid being deceptive or manipulative.", trait: "A", subcategory: "A2" },
  { id: 41, question: "I like helping others even when it’s inconvenient.", trait: "A", subcategory: "A3" },
  { id: 42, question: "I often put others’ needs before mine.", trait: "A", subcategory: "A3" },
  { id: 43, question: "I avoid arguments and conflicts.", trait: "A", subcategory: "A4" },
  { id: 44, question: "I try to maintain harmony in groups.", trait: "A", subcategory: "A4" },
  { id: 45, question: "I rarely brag about my achievements.", trait: "A", subcategory: "A5" },
  { id: 46, question: "I prefer to stay humble even when I succeed.", trait: "A", subcategory: "A5" },
  { id: 47, question: "I feel deep concern for people who are suffering.", trait: "A", subcategory: "A6" },
  { id: 48, question: "I am very empathetic toward others' emotions.", trait: "A", subcategory: "A6" },

// Conscientiousness (Organization and Dependability) - C
  { id: 49, question: "I consider myself capable and efficient.", trait: "C", subcategory: "C1" },
  { id: 50, question: "I feel confident handling difficult tasks.", trait: "C", subcategory: "C1" },
  { id: 51, question: "I like to keep things organized and tidy.", trait: "C", subcategory: "C2" },
  { id: 52, question: "I follow clear routines in my life.", trait: "C", subcategory: "C2" },
  { id: 53, question: "I take my responsibilities seriously.", trait: "C", subcategory: "C3" },
  { id: 54, question: "I keep promises and meet expectations.", trait: "C", subcategory: "C3" },
  { id: 55, question: "I am driven to achieve my goals.", trait: "C", subcategory: "C4" },
  { id: 56, question: "I set high standards for myself.", trait: "C", subcategory: "C4" },
  { id: 57, question: "I complete tasks even when I don’t feel like it.", trait: "C", subcategory: "C5" },
  { id: 58, question: "I avoid procrastination and stay focused.", trait: "C", subcategory: "C5" },
  { id: 59, question: "I think carefully before making decisions.", trait: "C", subcategory: "C6" },
  { id: 60, question: "I weigh pros and cons before acting.", trait: "C", subcategory: "C6" },
]

interface Big5TestProps {
  onComplete: (scores: Big5Scores, answers: UserAnswer[]) => void // Updated onComplete signature
  onBack: () => void
}

export function Big5Test({ onComplete, onBack }: Big5TestProps) {
  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0)
  const [userAnswers, setUserAnswers] = useState<UserAnswer[]>([]) // Store individual answers
  const [selectedAnswerValue, setSelectedAnswerValue] = useState<number | null>(null)

const handleAnswer = (value: number) => {
    setSelectedAnswerValue(value)
  }

const nextQuestion = () => {
    if (selectedAnswerValue !== null) {
      const currentQuestion = big5Questions[currentQuestionIndex]
      const newAnswer: UserAnswer = { questionId: currentQuestion.id, value: selectedAnswerValue }
      const updatedAnswers = [...userAnswers, newAnswer]
      setUserAnswers(updatedAnswers)

if (currentQuestionIndex < big5Questions.length - 1) {
        setCurrentQuestionIndex((prev) => prev + 1)
        setSelectedAnswerValue(null)
      } else {
        // Last question, calculate final scores and complete the test
        const finalScores: Big5Scores = { O: 0, C: 0, E: 0, A: 0, N: 0 }
        updatedAnswers.forEach((answer) => {
          const question = big5Questions.find((q) => q.id === answer.questionId)
          if (question) {
            finalScores[question.trait] += answer.value
          }
        })
        onComplete(finalScores, updatedAnswers) // Pass both scores and answers
      }
    }
  }

const currentQuestion = big5Questions[currentQuestionIndex]
  const progress = ((currentQuestionIndex + 1) / big5Questions.length) * 100

return (
    <AnimateOnScroll animation="fadeIn">
      <Card className="border-none shadow-xl">
        <CardHeader className="text-center border-b">
          <CardTitle className="text-2xl md:text-3xl font-bold">Big 5 Personality Test</CardTitle>
          <p className="text-muted-foreground">Discover your Big 5 traits with this assessment</p>
          <div className="mt-4">
            <Progress value={progress} />
            <p className="text-sm text-muted-foreground mt-2">
              Question {currentQuestionIndex + 1} of {big5Questions.length}
            </p>
          </div>
        </CardHeader>
        <CardContent className="p-8">
          <AnimateOnScroll animation="slideUp" key={currentQuestion.id}>
            <div className="mb-8">
              <h3 className="text-xl md:text-2xl font-semibold mb-6 text-center">{currentQuestion.question}</h3>

<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
                {likertOptions.map((option) => (
                  <Card
                    key={option.value}
                    className={`cursor-pointer transition-all hover:shadow-md border-2 ${
                      selectedAnswerValue === option.value
                        ? "border-primary bg-primary/5"
                        : "border-border hover:border-primary/50"
                    }`}
                    onClick={() => handleAnswer(option.value)}
                  >
                    <CardContent className="p-4 text-center">
                      <div className="flex flex-col items-center gap-2">
                        <div
                          className={`w-4 h-4 rounded-full border-2 ${
                            selectedAnswerValue === option.value
                              ? "bg-primary border-primary"
                              : "border-muted-foreground"
                          }`}
                        ></div>
                        <p className="text-sm font-medium">{option.label}</p>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>

<div className="flex justify-center gap-4">
              <Button onClick={onBack} variant="outline">
                Back to Test Selection
              </Button>
              <Button
                onClick={nextQuestion}
                disabled={selectedAnswerValue === null}
                className="flex items-center gap-2 px-8"
              >
                {currentQuestionIndex === big5Questions.length - 1 ? "Get Results" : "Next Question"}
                <ArrowRight className="h-4 w-4" />
              </Button>
            </div>
          </AnimateOnScroll>
        </CardContent>
      </Card>
    </AnimateOnScroll>
  )
}
[V0_FILE]typescriptreact:file="components/cloud-effect.tsx"
"use client"

import { useEffect, useRef } from "react"
import { motion, useMotionValue, useSpring } from "framer-motion"

interface Cloud {
  id: number
  x: number
  y: number
  scale: number
  opacity: number
  speed: number
  parallaxFactor: number
}

export function CloudEffect() {
  const containerRef = useRef<HTMLDivElement>(null)
  const mouseX = useMotionValue(0)
  const mouseY = useMotionValue(0)

const springX = useSpring(mouseX, { stiffness: 50, damping: 30 })
  const springY = useSpring(mouseY, { stiffness: 50, damping: 30 })

useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      const x = (e.clientX / window.innerWidth - 0.5) * 100
      const y = (e.clientY / window.innerHeight - 0.5) * 50
      mouseX.set(x)
      mouseY.set(y)
    }

window.addEventListener("mousemove", handleMouseMove)
    return () => window.removeEventListener("mousemove", handleMouseMove)
  }, [mouseX, mouseY])

const clouds: Cloud[] = [
    { id: 1, x: 5, y: 10, scale: 1.2, opacity: 0.15, speed: 60, parallaxFactor: 0.3 },
    { id: 2, x: 25, y: 5, scale: 0.8, opacity: 0.12, speed: 80, parallaxFactor: 0.2 },
    { id: 3, x: 60, y: 15, scale: 1.5, opacity: 0.18, speed: 50, parallaxFactor: 0.4 },
    { id: 4, x: 80, y: 8, scale: 1, opacity: 0.14, speed: 70, parallaxFactor: 0.25 },
    { id: 5, x: 40, y: 20, scale: 0.9, opacity: 0.1, speed: 90, parallaxFactor: 0.15 },
    { id: 6, x: 15, y: 25, scale: 1.3, opacity: 0.16, speed: 55, parallaxFactor: 0.35 },
  ]

return (
    <div ref={containerRef} className="absolute inset-0 overflow-hidden pointer-events-none">
      {clouds.map((cloud) => (
        <motion.div
          key={cloud.id}
          className="absolute"
          style={{
            left: `${cloud.x}%`,
            top: `${cloud.y}%`,
            x: springX.get() * cloud.parallaxFactor,
            y: springY.get() * cloud.parallaxFactor,
          }}
          animate={{
            x: [
              springX.get() * cloud.parallaxFactor - 20,
              springX.get() * cloud.parallaxFactor + 20,
              springX.get() * cloud.parallaxFactor - 20,
            ],
          }}
          transition={{
            duration: cloud.speed,
            repeat: Number.POSITIVE_INFINITY,
            ease: "linear",
          }}
        >
          <svg
            viewBox="0 0 200 100"
            className="w-48 md:w-64 lg:w-80"
            style={{
              transform: `scale(${cloud.scale})`,
              opacity: cloud.opacity,
              filter: "blur(8px)",
            }}
          >
            <defs>
              <linearGradient id={`cloudGrad${cloud.id}`} x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" stopColor="white" stopOpacity="0.9" />
                <stop offset="100%" stopColor="white" stopOpacity="0.3" />
              </linearGradient>
            </defs>
            <ellipse cx="60" cy="60" rx="50" ry="30" fill={`url(#cloudGrad${cloud.id})`} />
            <ellipse cx="100" cy="50" rx="60" ry="35" fill={`url(#cloudGrad${cloud.id})`} />
            <ellipse cx="140" cy="60" rx="45" ry="28" fill={`url(#cloudGrad${cloud.id})`} />
            <ellipse cx="80" cy="70" rx="40" ry="25" fill={`url(#cloudGrad${cloud.id})`} />
            <ellipse cx="120" cy="65" rx="35" ry="22" fill={`url(#cloudGrad${cloud.id})`} />
          </svg>
        </motion.div>
      ))}

{/* Mist layers */}
      <motion.div
        className="absolute bottom-0 left-0 right-0 h-40 bg-gradient-to-t from-white/10 to-transparent dark:from-white/5"
        style={{
          x: springX,
          y: springY.get() * 0.1,
        }}
      />
      <motion.div
        className="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-white/5 to-transparent"
        style={{
          x: springX.get() * 0.5,
        }}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/cursor-spotlight.tsx"
"use client"

export function CursorSpotlight() {
  return null
}
[V0_FILE]typescriptreact:file="components/dashain-animation.tsx"
"use client"

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { X, Sparkles } from "lucide-react"
import { Button } from "@/components/ui/button"

export function DashainAnimation() {
  const [isVisible, setIsVisible] = useState(false)
  const [shouldShow, setShouldShow] = useState(false)

useEffect(() => {
    // Check if we should show the animation (until Oct 8, 2025)
    const targetDate = new Date("2025-10-08")
    const currentDate = new Date()

if (currentDate <= targetDate) {
      // Check if user has seen it today
      const today = currentDate.toDateString()
      const lastShown = localStorage.getItem("dashain-animation-shown")

if (lastShown !== today) {
        setShouldShow(true)
        setIsVisible(true)
        localStorage.setItem("dashain-animation-shown", today)
      }
    }
  }, [])

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

if (!shouldShow) return null

return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm"
          onClick={handleClose}
        >
          <motion.div
            initial={{ scale: 0.5, rotateY: -90, opacity: 0 }}
            animate={{ scale: 1, rotateY: 0, opacity: 1 }}
            exit={{ scale: 0.5, rotateY: 90, opacity: 0 }}
            transition={{
              type: "spring",
              stiffness: 300,
              damping: 30,
              duration: 0.8,
            }}
            className="relative max-w-md mx-4 bg-gradient-to-br from-orange-50 to-red-50 rounded-2xl shadow-2xl overflow-hidden border-4 border-orange-300"
            onClick={(e) => e.stopPropagation()}
          >
            {/* Decorative Bunting */}
            <div className="absolute top-0 left-0 right-0 h-8 bg-gradient-to-r from-orange-400 via-red-400 to-orange-400 overflow-hidden">
              <div className="flex">
                {Array.from({ length: 20 }).map((_, i) => (
                  <motion.div
                    key={i}
                    initial={{ y: -20 }}
                    animate={{ y: 0 }}
                    transition={{ delay: i * 0.05, type: "spring" }}
                    className="w-6 h-8 bg-gradient-to-b from-orange-500 to-red-500 transform rotate-45 -skew-x-12 border-r border-orange-600"
                    style={{ clipPath: "polygon(0 0, 100% 0, 85% 100%, 15% 100%)" }}
                  />
                ))}
              </div>
            </div>

{/* Close Button */}
            <Button
              variant="ghost"
              size="icon"
              className="absolute top-10 right-4 z-10 text-orange-700 hover:bg-orange-200"
              onClick={handleClose}
            >
              <X className="h-5 w-5" />
            </Button>

{/* Background Swings (Ping) */}
            <div className="absolute inset-0 overflow-hidden opacity-20">
              {Array.from({ length: 3 }).map((_, i) => (
                <motion.div
                  key={i}
                  className="absolute"
                  style={{
                    left: `${20 + i * 30}%`,
                    top: `${10 + i * 5}%`,
                  }}
                  animate={{
                    rotate: [0, 15, -15, 0],
                  }}
                  transition={{
                    duration: 3 + i * 0.5,
                    repeat: Number.POSITIVE_INFINITY,
                    ease: "easeInOut",
                  }}
                >
                  {/* Swing Rope */}
                  <div className="w-0.5 h-20 bg-amber-800 mx-auto" />
                  {/* Swing Seat */}
                  <div className="w-8 h-2 bg-amber-700 rounded-full" />
                </motion.div>
              ))}
            </div>

{/* Firecracker Animations */}
            <div className="absolute inset-0 pointer-events-none">
              {Array.from({ length: 12 }).map((_, i) => (
                <motion.div
                  key={i}
                  className="absolute"
                  style={{
                    left: `${Math.random() * 80 + 10}%`,
                    top: `${Math.random() * 60 + 20}%`,
                  }}
                  initial={{ scale: 0, opacity: 0 }}
                  animate={{
                    scale: [0, 1, 0],
                    opacity: [0, 1, 0],
                  }}
                  transition={{
                    duration: 1.5,
                    delay: i * 0.3,
                    repeat: Number.POSITIVE_INFINITY,
                    repeatDelay: 2,
                  }}
                >
                  {/* Firecracker Burst */}
                  <div className="relative">
                    {Array.from({ length: 8 }).map((_, rayIndex) => (
                      <motion.div
                        key={rayIndex}
                        className="absolute w-1 h-6 bg-gradient-to-t from-transparent via-yellow-400 to-orange-500 rounded-full"
                        style={{
                          transformOrigin: "bottom center",
                          transform: `rotate(${rayIndex * 45}deg)`,
                        }}
                        animate={{
                          scaleY: [0, 1, 0],
                          opacity: [0, 1, 0],
                        }}
                        transition={{
                          duration: 0.8,
                          delay: rayIndex * 0.05,
                        }}
                      />
                    ))}
                  </div>
                </motion.div>
              ))}
            </div>

{/* Main Content */}
            <div className="relative p-8 pt-16 text-center">
              {/* Title */}
              <motion.h1
                initial={{ y: 30, opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                transition={{ delay: 0.3, type: "spring" }}
                className="text-3xl font-bold text-orange-600 mb-2"
              >
                Happy
              </motion.h1>

<motion.h2
                initial={{ y: 30, opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                transition={{ delay: 0.4, type: "spring" }}
                className="text-4xl font-bold text-orange-700 mb-4 tracking-wider"
              >
                VIJAYADASHAMI
              </motion.h2>

{/* Circular Frame with Warrior */}
              <motion.div
                initial={{ scale: 0, rotate: -180 }}
                animate={{ scale: 1, rotate: 0 }}
                transition={{ delay: 0.6, type: "spring", stiffness: 200 }}
                className="relative mx-auto w-48 h-48 mb-6"
              >
                {/* Decorative Border with Om Symbols */}
                <div className="absolute inset-0 rounded-full border-4 border-orange-300 bg-gradient-to-br from-orange-100 to-red-100">
                  {Array.from({ length: 12 }).map((_, i) => (
                    <motion.div
                      key={i}
                      className="absolute w-6 h-6 text-orange-500 text-sm flex items-center justify-center font-bold"
                      style={{
                        left: "50%",
                        top: "50%",
                        transformOrigin: "0 0",
                        transform: `rotate(${i * 30}deg) translate(85px, -12px)`,
                      }}
                      animate={{ rotate: 360 }}
                      transition={{
                        duration: 20,
                        repeat: Number.POSITIVE_INFINITY,
                        ease: "linear",
                      }}
                    >
                      ॐ
                    </motion.div>
                  ))}
                </div>

{/* Warrior Silhouette */}
                <div className="absolute inset-4 rounded-full bg-gradient-to-br from-orange-200 to-red-200 flex items-center justify-center overflow-hidden">
                  <motion.div
                    initial={{ scale: 0 }}
                    animate={{ scale: 1 }}
                    transition={{ delay: 0.8, type: "spring" }}
                    className="text-6xl"
                  >
                    🏹
                  </motion.div>
                </div>
              </motion.div>

{/* Nepali Blessing */}
              <motion.div
                initial={{ y: 30, opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                transition={{ delay: 0.9 }}
                className="text-orange-700 mb-4"
              >
                <p className="text-lg font-semibold mb-2">विजया दशमी २०८२ को हार्दिक मंगलमय शुभकामना</p>
                <p className="text-sm">यो पावन अवसरले सबैका जीवनमा शान्ति, समृद्धि, स्वास्थ्य र दीर्घायु</p>
                <p className="text-sm">ल्याओस् भन्ने शुभकामना।</p>
              </motion.div>

{/* Decorative Devanagari */}
              <motion.div
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
                transition={{ delay: 1.0, type: "spring" }}
                className="text-2xl font-bold text-orange-600 mb-4"
              >
                श्री विजयादशमी
              </motion.div>

{/* English Blessing */}
              <motion.p
                initial={{ y: 20, opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                transition={{ delay: 1.1 }}
                className="text-orange-600 text-sm mb-6"
              >
                May this auspicious festival bring joy, prosperity, and victory over all obstacles in your life!
              </motion.p>

{/* Signature */}
              <motion.p
                initial={{ y: 20, opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                transition={{ delay: 1.2 }}
                className="text-orange-700 font-semibold"
              >
                Gaurav
              </motion.p>

{/* Floating Sparkles */}
              <div className="absolute inset-0 pointer-events-none">
                {Array.from({ length: 15 }).map((_, i) => (
                  <motion.div
                    key={i}
                    className="absolute"
                    style={{
                      left: `${Math.random() * 100}%`,
                      top: `${Math.random() * 100}%`,
                    }}
                    animate={{
                      y: [0, -20, 0],
                      rotate: [0, 180, 360],
                      scale: [0.5, 1, 0.5],
                    }}
                    transition={{
                      duration: 3 + Math.random() * 2,
                      repeat: Number.POSITIVE_INFINITY,
                      delay: Math.random() * 2,
                    }}
                  >
                    <Sparkles className="w-4 h-4 text-yellow-400" />
                  </motion.div>
                ))}
              </div>
            </div>

{/* Glowing Border Effect */}
            <motion.div
              className="absolute inset-0 rounded-2xl border-2 border-orange-400"
              animate={{
                boxShadow: [
                  "0 0 20px rgba(251, 146, 60, 0.5)",
                  "0 0 40px rgba(251, 146, 60, 0.8)",
                  "0 0 20px rgba(251, 146, 60, 0.5)",
                ],
              }}
              transition={{
                duration: 2,
                repeat: Number.POSITIVE_INFINITY,
                ease: "easeInOut",
              }}
            />
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  )
}
[V0_FILE]typescriptreact:file="components/dynamic-achievements-section.tsx"
'use client'

import { useEffect, useState } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

interface Achievement {
  id: string
  title: string
  description: string
}

export function DynamicAchievementsSection() {
  const [achievements, setAchievements] = useState<Achievement[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const fetchAchievements = async () => {
      try {
        const res = await fetch('/api/admin/achievements')
        const data = await res.json()
        setAchievements(data.length > 0 ? data : getDefaultAchievements())
      } catch (error) {
        console.error('Error fetching achievements:', error)
        setAchievements(getDefaultAchievements())
      }
      setLoading(false)
    }

fetchAchievements()
  }, [])

if (loading) {
    return <div className="text-center py-8">Loading achievements...</div>
  }

return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      {achievements.map((achievement) => (
        <Card
          key={achievement.id}
          className="border-none shadow-lg hover:shadow-xl transition-shadow bg-card rounded-2xl overflow-hidden group"
        >
          <CardHeader className="bg-secondary/10 border-b border-secondary/20">
            <CardTitle className="text-foreground group-hover:text-secondary transition-colors">
              {achievement.title}
            </CardTitle>
          </CardHeader>
          <CardContent className="p-6">
            <p className="text-sm text-foreground/90">{achievement.description}</p>
          </CardContent>
        </Card>
      ))}
    </div>
  )
}

function getDefaultAchievements(): Achievement[] {
  return [
    {
      id: '1',
      title: '7 Major Treks Completed',
      description: 'Successfully completed treks to iconic destinations across Nepal',
    },
  ]
}
[V0_FILE]typescriptreact:file="components/dynamic-experience-section.tsx"
'use client'

import { useEffect, useState } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Briefcase, MapPin, Calendar } from 'lucide-react'

interface Experience {
  id: string
  title: string
  company: string
  period: string
  location: string
  description: string
}

export function DynamicExperienceSection() {
  const [experience, setExperience] = useState<Experience[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const fetchExperience = async () => {
      try {
        const res = await fetch('/api/admin/experience')
        const data = await res.json()
        setExperience(data.length > 0 ? data : getDefaultExperience())
      } catch (error) {
        console.error('Error fetching experience:', error)
        setExperience(getDefaultExperience())
      }
      setLoading(false)
    }

fetchExperience()
  }, [])

if (loading) {
    return <div className="text-center py-8">Loading experience...</div>
  }

return (
    <div className="space-y-4">
      {experience.map((exp, index) => (
        <Card key={exp.id || index} className="border-none shadow-lg hover:shadow-xl transition-shadow bg-card rounded-2xl overflow-hidden">
          <CardHeader className="bg-primary/10 border-b border-primary/20">
            <div className="flex items-start justify-between">
              <div className="flex-1">
                <CardTitle className="text-primary flex items-center gap-2">
                  <Briefcase className="h-5 w-5" />
                  {exp.title}
                </CardTitle>
                <p className="text-sm text-muted-foreground font-semibold mt-1">{exp.company}</p>
              </div>
            </div>
          </CardHeader>
          <CardContent className="p-6">
            <div className="flex flex-wrap gap-4 mb-4">
              <div className="flex items-center gap-2 text-sm text-muted-foreground">
                <Calendar className="h-4 w-4" />
                {exp.period}
              </div>
              <div className="flex items-center gap-2 text-sm text-muted-foreground">
                <MapPin className="h-4 w-4" />
                {exp.location}
              </div>
            </div>
            <p className="text-sm leading-relaxed text-foreground/90">{exp.description}</p>
          </CardContent>
        </Card>
      ))}
    </div>
  )
}

function getDefaultExperience(): Experience[] {
  return [
    {
      id: '1',
      title: 'CEO',
      company: 'Aakar Academy',
      period: 'Nov 2025 - Present',
      location: 'Chitwan, Nepal',
      description: 'Leading Aakar Academy as Chief Executive Officer, driving strategic vision and operational excellence.',
    },
  ]
}
[V0_FILE]typescriptreact:file="components/dynamic-skills-section.tsx"
'use client'

import { useEffect, useState } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'

interface Skill {
  id: string
  name: string
  category: string
  proficiency_level?: string
}

export function DynamicSkillsSection() {
  const [skills, setSkills] = useState<Skill[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const fetchSkills = async () => {
      try {
        const res = await fetch('/api/admin/skills')
        const data = await res.json()
        setSkills(data.length > 0 ? data : getDefaultSkills())
      } catch (error) {
        console.error('Error fetching skills:', error)
        setSkills(getDefaultSkills())
      }
      setLoading(false)
    }

fetchSkills()
  }, [])

if (loading) {
    return <div className="text-center py-8">Loading skills...</div>
  }

// Group skills by category
  const categorizedSkills = skills.reduce(
    (acc, skill) => {
      const category = skill.category || 'Other'
      if (!acc[category]) acc[category] = []
      acc[category].push(skill)
      return acc
    },
    {} as Record<string, Skill[]>
  )

return (
    <div className="space-y-6">
      {Object.entries(categorizedSkills).map(([category, categorySkills]) => (
        <div key={category}>
          <h3 className="text-lg font-semibold mb-3 text-primary">{category}</h3>
          <div className="flex flex-wrap gap-2">
            {categorySkills.map((skill) => (
              <Badge key={skill.id} variant="outline" className="px-3 py-1">
                {skill.name}
              </Badge>
            ))}
          </div>
        </div>
      ))}
    </div>
  )
}

function getDefaultSkills(): Skill[] {
  return [
    { id: '1', name: 'Navigation & Route Planning', category: 'Trekking & Adventure' },
    { id: '2', name: 'High Altitude Trekking', category: 'Trekking & Adventure' },
    { id: '3', name: 'Team Leadership', category: 'Leadership & Teamwork' },
  ]
}
[V0_FILE]typescriptreact:file="components/enhanced-button.tsx"
"use client"

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-95 hover:shadow-md",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90 hover:scale-105",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 hover:scale-105",
        outline:
          "border border-input bg-background hover:bg-accent hover:text-accent-foreground hover:border-primary/50 hover:scale-105",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 hover:scale-105",
        ghost: "hover:bg-accent hover:text-accent-foreground hover:scale-105",
        link: "text-primary underline-offset-4 hover:underline hover:scale-105",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  },
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
  loading?: boolean
}

const EnhancedButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, loading = false, children, disabled, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"

return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        disabled={disabled || loading}
        aria-busy={loading}
        {...props}
      >
        {loading && (
          <div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
        )}
        {children}
      </Comp>
    )
  },
)
EnhancedButton.displayName = "EnhancedButton"

export { EnhancedButton, buttonVariants }
[V0_FILE]typescriptreact:file="components/enhanced-card.tsx"
"use client"

import * as React from "react"
import { cn } from "@/lib/utils"

const EnhancedCard = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & {
    hover?: boolean
    interactive?: boolean
  }
>(({ className, hover = false, interactive = false, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "rounded-lg border bg-card text-card-foreground shadow-sm transition-all duration-200",
      hover && "hover:shadow-lg hover:-translate-y-1",
      interactive &&
        "cursor-pointer hover:border-primary/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      className,
    )}
    tabIndex={interactive ? 0 : undefined}
    role={interactive ? "button" : undefined}
    {...props}
  />
))
EnhancedCard.displayName = "EnhancedCard"

const EnhancedCardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn("flex flex-col space-y-1.5 p-6 transition-colors duration-200", className)}
      {...props}
    />
  ),
)
EnhancedCardHeader.displayName = "EnhancedCardHeader"

const EnhancedCardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
  ({ className, ...props }, ref) => (
    <h3
      ref={ref}
      className={cn("text-2xl font-semibold leading-none tracking-tight transition-colors duration-200", className)}
      {...props}
    />
  ),
)
EnhancedCardTitle.displayName = "EnhancedCardTitle"

const EnhancedCardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className, ...props }, ref) => (
    <p ref={ref} className={cn("text-sm text-muted-foreground transition-colors duration-200", className)} {...props} />
  ),
)
EnhancedCardDescription.displayName = "EnhancedCardDescription"

const EnhancedCardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("p-6 pt-0 transition-all duration-200", className)} {...props} />
  ),
)
EnhancedCardContent.displayName = "EnhancedCardContent"

const EnhancedCardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("flex items-center p-6 pt-0 transition-all duration-200", className)} {...props} />
  ),
)
EnhancedCardFooter.displayName = "EnhancedCardFooter"

export {
  EnhancedCard,
  EnhancedCardHeader,
  EnhancedCardFooter,
  EnhancedCardTitle,
  EnhancedCardDescription,
  EnhancedCardContent,
}
[V0_FILE]typescriptreact:file="components/enhanced-theme-provider.tsx"
"use client"

import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import type { ThemeProviderProps } from "next-themes"

export function EnhancedThemeProvider({ children, ...props }: ThemeProviderProps) {
  const [mounted, setMounted] = React.useState(false)

React.useEffect(() => {
    setMounted(true)

// Enhanced system preference detection
    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")

const handleChange = (e: MediaQueryListEvent) => {
      // Only auto-switch if user hasn't manually set a preference
      const currentTheme = localStorage.getItem("theme")
      if (!currentTheme || currentTheme === "system") {
        // Theme will automatically update via next-themes
      }
    }

mediaQuery.addEventListener("change", handleChange)

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

if (!mounted) {
    return <>{children}</>
  }

return (
    <NextThemesProvider
      {...props}
      enableSystem={true}
      defaultTheme="system"
      attribute="class"
      disableTransitionOnChange={false}
    >
      {children}
    </NextThemesProvider>
  )
}
[V0_FILE]typescriptreact:file="components/hero-profile.tsx"
"use client"

import { useEffect, useRef, useState } from "react"
import Image from "next/image"
import { motion, useMotionValue, useSpring, useTransform } from "framer-motion"

interface HeroProfileProps {
  imageSrc: string
  alt: string
}

export function HeroProfile({ imageSrc, alt }: HeroProfileProps) {
  const containerRef = useRef<HTMLDivElement>(null)
  const [isHovered, setIsHovered] = useState(false)

const mouseX = useMotionValue(0)
  const mouseY = useMotionValue(0)

const springConfig = { stiffness: 150, damping: 20 }
  const springX = useSpring(mouseX, springConfig)
  const springY = useSpring(mouseY, springConfig)

const rotateX = useTransform(springY, [-0.5, 0.5], [5, -5])
  const rotateY = useTransform(springX, [-0.5, 0.5], [-5, 5])

useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (!containerRef.current) return

const rect = containerRef.current.getBoundingClientRect()
      const centerX = rect.left + rect.width / 2
      const centerY = rect.top + rect.height / 2

const x = (e.clientX - centerX) / rect.width
      const y = (e.clientY - centerY) / rect.height

mouseX.set(x)
      mouseY.set(y)
    }

window.addEventListener("mousemove", handleMouseMove)
    return () => window.removeEventListener("mousemove", handleMouseMove)
  }, [mouseX, mouseY])

return (
    <motion.div
      ref={containerRef}
      className="relative w-40 h-40 md:w-44 md:h-44 lg:w-48 lg:h-48 mx-auto"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      style={{
        perspective: 1000,
      }}
      initial={{ opacity: 0, scale: 0.8, y: 20 }}
      animate={{ opacity: 1, scale: 1, y: 0 }}
      transition={{ duration: 1, ease: [0.16, 1, 0.3, 1] }}
    >
      <motion.div
        className="absolute inset-0 rounded-full"
        style={{
          background: `
            radial-gradient(
              circle at 30% 30%,
              rgba(245,179,72,0.35) 0%,
              rgba(74,198,233,0.25) 30%,
              rgba(245,179,72,0.15) 60%,
              transparent 80%
            )
          `,
          filter: "blur(24px)",
          transform: "scale(1.6)",
        }}
        animate={{
          scale: [1.55, 1.65, 1.55],
          rotate: [0, 120, 240, 360],
        }}
        transition={{
          duration: 12,
          repeat: Number.POSITIVE_INFINITY,
          ease: "linear",
        }}
      />

<motion.div
        className="absolute inset-0 rounded-full opacity-80"
        style={{
          background: `conic-gradient(
            from 0deg,
            rgba(245,179,72,0.4) 0deg,
            rgba(74,198,233,0.3) 90deg,
            rgba(245,179,72,0.2) 180deg,
            rgba(74,198,233,0.4) 270deg,
            rgba(245,179,72,0.4) 360deg
          )`,
          filter: "blur(16px)",
          transform: "scale(1.25)",
        }}
        animate={{
          rotate: [0, 360],
        }}
        transition={{
          duration: 15,
          repeat: Number.POSITIVE_INFINITY,
          ease: "linear",
        }}
      />

{[0, 90, 180, 270].map((angle, i) => (
        <motion.div
          key={`accent-${i}`}
          className="absolute w-2 h-2 rounded-full"
          style={{
            top: "50%",
            left: "50%",
            background: "radial-gradient(circle, rgba(245,179,72,0.8), transparent)",
            transform: `rotate(${angle}deg) translateY(-${isHovered ? 90 : 85}px)`,
            filter: "blur(2px)",
          }}
          animate={{
            opacity: [0.4, 0.8, 0.4],
          }}
          transition={{
            duration: 2.5,
            repeat: Number.POSITIVE_INFINITY,
            delay: i * 0.3,
            ease: "easeInOut",
          }}
        />
      ))}

<motion.div
        className="relative w-full h-full rounded-full overflow-hidden"
        style={{
          rotateX,
          rotateY,
          transformStyle: "preserve-3d",
        }}
      >
        <div className="absolute inset-0 rounded-full p-[2px] bg-gradient-to-br from-primary/80 via-secondary/60 to-primary/80">
          <div className="absolute inset-[2px] rounded-full p-[1px] bg-gradient-to-tl from-secondary/40 via-primary/30 to-secondary/40">
            <div className="w-full h-full rounded-full overflow-hidden bg-card/95 backdrop-blur-sm">
              {/* Profile image */}
              <div className="relative w-full h-full">
                <Image
                  src={imageSrc || "/placeholder.svg"}
                  alt={alt}
                  fill
                  className="object-cover transition-transform duration-700 ease-out"
                  style={{
                    transform: isHovered ? "scale(1.05)" : "scale(1)",
                  }}
                  priority
                  sizes="(max-width: 768px) 160px, (max-width: 1024px) 176px, 192px"
                />

<motion.div
                  className="absolute inset-0 bg-gradient-to-br from-primary/10 via-transparent to-secondary/10"
                  animate={{
                    opacity: isHovered ? 0.3 : 0.15,
                  }}
                  transition={{ duration: 0.4 }}
                />
              </div>
            </div>
          </div>
        </div>

{/* Inner shadow for depth */}
        <div className="absolute inset-0 rounded-full shadow-[inset_0_2px_8px_rgba(0,0,0,0.3)] pointer-events-none" />
      </motion.div>

{[...Array(6)].map((_, i) => (
        <motion.div
          key={`particle-${i}`}
          className="absolute w-1 h-1 rounded-full bg-primary/50"
          style={{
            top: "50%",
            left: "50%",
            filter: "blur(0.5px)",
          }}
          animate={{
            x: [Math.cos((i * Math.PI * 2) / 6) * 70, Math.cos((i * Math.PI * 2) / 6 + Math.PI * 2) * 70],
            y: [Math.sin((i * Math.PI * 2) / 6) * 70, Math.sin((i * Math.PI * 2) / 6 + Math.PI * 2) * 70],
            opacity: [0.3, 0.6, 0.3],
          }}
          transition={{
            duration: 8,
            repeat: Number.POSITIVE_INFINITY,
            ease: "linear",
          }}
        />
      ))}
    </motion.div>
  )
}
[V0_FILE]typescriptreact:file="components/loading-states.tsx"
"use client"

import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent, CardHeader } from "@/components/ui/card"

export function PortfolioSkeleton() {
  return (
    <div className="space-y-24">
      {Array.from({ length: 3 }).map((_, index) => (
        <div
          key={index}
          className={`flex flex-col ${index % 2 === 1 ? "md:flex-row-reverse" : "md:flex-row"} gap-8 items-center`}
        >
          <div className="w-full md:w-1/2">
            <Card className="overflow-hidden border-none shadow-xl">
              <Skeleton className="h-80 md:h-[28rem] w-full" />
            </Card>
          </div>
          <div className="w-full md:w-1/2 space-y-4">
            <Skeleton className="h-8 w-3/4" />
            <Skeleton className="h-6 w-full" />
            <div className="space-y-2">
              <Skeleton className="h-4 w-full" />
              <Skeleton className="h-4 w-full" />
              <Skeleton className="h-4 w-3/4" />
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}

export function GamesSkeleton() {
  return (
    <div className="grid gap-8 lg:grid-cols-3">
      <div className="lg:col-span-1">
        <Skeleton className="h-8 w-48 mb-6" />
        <div className="space-y-4">
          {Array.from({ length: 3 }).map((_, index) => (
            <Card key={index}>
              <CardContent className="p-4">
                <div className="flex items-start gap-3">
                  <Skeleton className="h-10 w-10 rounded-lg" />
                  <div className="flex-1 space-y-2">
                    <Skeleton className="h-5 w-3/4" />
                    <Skeleton className="h-4 w-full" />
                    <div className="flex gap-2">
                      <Skeleton className="h-5 w-16" />
                      <Skeleton className="h-5 w-12" />
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
      <div className="lg:col-span-2">
        <Card className="h-full">
          <CardHeader>
            <Skeleton className="h-6 w-48" />
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex gap-4">
              <Skeleton className="h-10 w-24" />
              <Skeleton className="h-10 w-24" />
            </div>
            <Skeleton className="h-64 w-full" />
          </CardContent>
        </Card>
      </div>
    </div>
  )
}

export function ToolsSkeleton() {
  return (
    <div className="grid gap-8 md:grid-cols-2">
      <div>
        <Skeleton className="h-8 w-48 mb-6" />
        <div className="grid gap-4">
          {Array.from({ length: 5 }).map((_, index) => (
            <Card key={index}>
              <CardContent className="p-4">
                <div className="flex items-start gap-3">
                  <Skeleton className="h-10 w-10 rounded-lg" />
                  <div className="flex-1 space-y-2">
                    <div className="flex items-center gap-2">
                      <Skeleton className="h-5 w-32" />
                      <Skeleton className="h-5 w-16" />
                    </div>
                    <Skeleton className="h-4 w-full" />
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
      <div>
        <Card className="h-full">
          <CardHeader>
            <Skeleton className="h-6 w-48" />
          </CardHeader>
          <CardContent className="space-y-4">
            <Skeleton className="h-32 w-full" />
            <div className="flex gap-2">
              <Skeleton className="h-10 w-24" />
              <Skeleton className="h-10 w-24" />
            </div>
            <Skeleton className="h-10 w-full" />
          </CardContent>
        </Card>
      </div>
    </div>
  )
}

export function ContactSkeleton() {
  return (
    <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-5">
      <div className="md:col-span-1 lg:col-span-2">
        <Card className="border-none shadow-lg overflow-hidden">
          <Skeleton className="h-[500px] w-full" />
        </Card>
      </div>
      <div className="md:col-span-1 lg:col-span-3">
        <Card className="border-none shadow-xl">
          <CardHeader className="pb-2">
            <Skeleton className="h-6 w-48" />
            <Skeleton className="h-4 w-64" />
          </CardHeader>
          <CardContent className="p-6 space-y-6">
            <div className="grid gap-6 sm:grid-cols-2">
              <div className="space-y-2">
                <Skeleton className="h-4 w-16" />
                <Skeleton className="h-12 w-full" />
              </div>
              <div className="space-y-2">
                <Skeleton className="h-4 w-20" />
                <Skeleton className="h-12 w-full" />
              </div>
            </div>
            <div className="space-y-2">
              <Skeleton className="h-4 w-16" />
              <Skeleton className="h-12 w-full" />
            </div>
            <div className="space-y-2">
              <Skeleton className="h-4 w-20" />
              <Skeleton className="h-32 w-full" />
            </div>
            <Skeleton className="h-14 w-full" />
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/navigation.tsx"
"use client"

import type React from "react"

import Link from "next/link"
import { EnhancedButton } from "@/components/enhanced-button"
import { Moon, Sun, Menu, X } from "lucide-react"
import { useTheme } from "next-themes"
import { useEffect, useState } from "react"
import { usePathname } from "next/navigation"

export function Navigation() {
  const { theme, setTheme } = useTheme()
  const [activeSection, setActiveSection] = useState("home")
  const [mounted, setMounted] = useState(false)
  const [isScrolled, setIsScrolled] = useState(false)
  const [isVisible, setIsVisible] = useState(true)
  const [lastScrollY, setLastScrollY] = useState(0)
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
  const [scrolledPast, setScrolledPast] = useState(false)
  const pathname = usePathname()

// Handle scroll and update active section
  useEffect(() => {
    setMounted(true)

const handleScroll = () => {
      const currentScrollY = window.scrollY

// Show/hide navbar based on scroll direction
      if (currentScrollY > lastScrollY && currentScrollY > 100) {
        setIsVisible(false) // Hide when scrolling down
      } else {
        setIsVisible(true) // Show when scrolling up
      }

// Add background when scrolled
      setIsScrolled(currentScrollY > 10)
      setLastScrollY(currentScrollY)

// Update active section only on home page
      if (pathname === "/") {
        const sections = ["home", "resume", "portfolio", "contact"]
        const scrollPosition = currentScrollY + 100

for (const section of sections) {
          const element = document.getElementById(section)
          if (element) {
            const { offsetTop, offsetHeight } = element
            if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
              setActiveSection(section)
              break
            }
          }
        }
      }
    }

window.addEventListener("scroll", handleScroll, { passive: true })
    return () => window.removeEventListener("scroll", handleScroll)
  }, [lastScrollY, pathname])

// Handle keyboard navigation
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Escape" && isMobileMenuOpen) {
        setIsMobileMenuOpen(false)
      }
    }

document.addEventListener("keydown", handleKeyDown)
    return () => document.removeEventListener("keydown", handleKeyDown)
  }, [isMobileMenuOpen])

const links = [
    { href: "/", label: "Home", id: "home" },
    { href: "/#resume", label: "Resume", id: "resume" },
    { href: "/#portfolio", label: "Portfolio", id: "portfolio" },
    { href: "/personality-test", label: "Personality Test", id: "personality-test" },
    { href: "/tools", label: "Tools", id: "tools" },
    { href: "/games", label: "Games", id: "games" },
    { href: "/#contact", label: "Contact", id: "contact" },
  ]

const handleClick = (e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
    setIsMobileMenuOpen(false) // Close mobile menu on click

// Handle different types of links
    if (href === "/") {
      // Direct home link
      return
    } else if (href.startsWith("/#")) {
      // Hash links - navigate to home first if not already there
      if (pathname !== "/") {
        // Let the browser handle navigation to home page with hash
        return
      } else {
        // Already on home page, scroll to section
        e.preventDefault()
        const targetId = href.replace("/#", "")
        const element = document.getElementById(targetId)
        if (element) {
          window.scrollTo({
            top: element.offsetTop - 80,
            behavior: "smooth",
          })
        }
      }
    } else if (href.startsWith("/")) {
      // Other routes like /personality-test, /tools, /games
      return
    }
  }

const toggleMobileMenu = () => {
    setIsMobileMenuOpen(!isMobileMenuOpen)
  }

const toggleTheme = () => {
    setTheme(theme === "dark" ? "light" : "dark")
  }

if (!mounted) {
    return null
  }

return (
    <>
      <nav
        id="navigation"
        data-navigation
        role="navigation"
        aria-label="Main navigation"
        className={`fixed top-8 left-0 right-0 z-50 flex justify-center transition-all duration-300 ${
          isVisible ? "translate-y-0 opacity-100" : "-translate-y-full opacity-0"
        }`}
      >
        <div
          className={`
          flex items-center gap-2 px-6 py-3 rounded-full
          bg-background/40 backdrop-blur-xl border border-primary/20
          shadow-lg transition-all duration-300
          ${isScrolled ? "lg:gap-1" : "gap-3"}
          hidden md:flex
        `}
        >
          {/* Logo - hidden on scroll on desktop */}
          <Link
            href="/"
            className={`
              font-bold focus-visible:outline-none focus-visible:ring-2 
              focus-visible:ring-ring focus-visible:ring-offset-2 rounded-md px-3 py-1
              transition-all duration-300 whitespace-nowrap
              ${isScrolled ? "hidden lg:inline" : "inline"}
            `}
            aria-label="Go to homepage"
          >
            Gaurav
          </Link>

{/* Desktop Navigation */}
          <div className="hidden md:flex items-center gap-1">
            {links.map((link) => {
              const isActive =
                (pathname === "/" && activeSection === link.id) ||
                (pathname === "/personality-test" && link.id === "personality-test") ||
                (pathname === "/tools" && link.id === "tools") ||
                (pathname === "/games" && link.id === "games") ||
                (pathname !== "/" &&
                  pathname !== "/personality-test" &&
                  pathname !== "/tools" &&
                  pathname !== "/games" &&
                  link.href === pathname)

return (
                <Link
                  key={link.href}
                  href={link.href}
                  onClick={(e) => handleClick(e, link.href)}
                  className={`
                    text-sm font-medium transition-all rounded-full px-3 py-1.5
                    focus-visible:outline-none focus-visible:ring-2 
                    focus-visible:ring-ring focus-visible:ring-offset-2
                    ${
                      isActive
                        ? "bg-primary text-primary-foreground"
                        : "text-muted-foreground hover:text-primary hover:bg-primary/10"
                    }
                  `}
                  aria-current={isActive ? "page" : undefined}
                >
                  {link.label}
                </Link>
              )
            })}
          </div>

{/* Theme Toggle */}
          <EnhancedButton
            data-theme-toggle
            variant="ghost"
            size="icon"
            className="rounded-full h-8 w-8 ml-2"
            onClick={toggleTheme}
            aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
          >
            <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
            <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          </EnhancedButton>
        </div>

<EnhancedButton
            data-hamburger
            variant="ghost"
            size="icon"
            className="rounded-full h-8 w-8"
            onClick={toggleMobileMenu}
            aria-label={isMobileMenuOpen ? "Close menu" : "Open menu"}
            aria-expanded={isMobileMenuOpen}
            aria-controls="mobile-menu"
          >
            {isMobileMenuOpen ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
          </EnhancedButton>
        </div>
      </nav>

{/* Mobile Navigation Menu */}
      {isMobileMenuOpen && (
        <div
          id="mobile-menu"
          className={`
            fixed top-20 left-4 right-4 md:hidden z-40
            bg-background/40 backdrop-blur-xl border border-primary/20
            rounded-2xl shadow-lg
          `}
          role="menu"
          aria-orientation="vertical"
        >
          <div className="p-4">
            <div className="flex flex-col space-y-2">
              {links.map((link) => {
                const isActive =
                  (pathname === "/" && activeSection === link.id) ||
                  (pathname === "/personality-test" && link.id === "personality-test") ||
                  (pathname === "/tools" && link.id === "tools") ||
                  (pathname === "/games" && link.id === "games") ||
                  (pathname !== "/" &&
                    pathname !== "/personality-test" &&
                    pathname !== "/tools" &&
                    pathname !== "/games" &&
                    link.href === pathname)

return (
                  <Link
                    key={link.href}
                    href={link.href}
                    onClick={(e) => handleClick(e, link.href)}
                    className={`
                      text-sm font-medium transition-all py-2 px-4 rounded-lg
                      focus-visible:outline-none focus-visible:ring-2 
                      focus-visible:ring-ring focus-visible:ring-offset-2
                      ${
                        isActive
                          ? "bg-primary text-primary-foreground"
                          : "text-muted-foreground hover:text-primary hover:bg-primary/10"
                      }
                    `}
                    role="menuitem"
                    aria-current={isActive ? "page" : undefined}
                  >
                    {link.label}
                  </Link>
                )
              })}
            </div>
          </div>
        </div>
      )}

{/* Spacer to prevent content from hiding behind fixed navbar */}
      <div className="h-16" />
    </>
  )
}
[V0_FILE]typescriptreact:file="components/personality-report.tsx"
"use client"

interface Big5Scores {
  O: number
  C: number
  E: number
  A: number
  N: number
}

interface UserAnswer {
  questionId: number
  value: number
}

interface Big5Question {
  id: number
  question: string
  trait: "O" | "C" | "E" | "A" | "N"
  subcategory: string
}

interface PersonalityReportProps {
  testType: "MBTI" | "BIG5"
  mbtiResult?: string
  mbtiPersonalityInfo?: any
  big5Scores?: Big5Scores
  big5Answers?: UserAnswer[]
  customSummaries?: {
    emotionalStyle: string
    interpersonalRelations: string
    vocationalStyle: string
    patternOfActivity: string
    attitudes: string
    academicPerformance: string
    character: string
  }
}

const getCurrentDate = () => {
  const now = new Date()
  const day = now.getDate().toString().padStart(2, "0")
  const month = (now.getMonth() + 1).toString().padStart(2, "0")
  const year = now.getFullYear()
  return `${day}/${month}/${year}`
}

// Re-define big5Questions for this component
const big5Questions: Big5Question[] = [
  // Neuroticism (Emotional Stability) - N
  { id: 1, question: "I often feel nervous or anxious.", trait: "N", subcategory: "N1" },
  { id: 2, question: "I worry about things even when there's no reason.", trait: "N", subcategory: "N1" },
  { id: 3, question: "I easily get irritated by small things.", trait: "N", subcategory: "N2" },
  { id: 4, question: "I lose my temper quickly.", trait: "N", subcategory: "N2" },
  { id: 5, question: "I often feel sad or down for no clear reason.", trait: "N", subcategory: "N3" },
  { id: 6, question: "I frequently feel hopeless or discouraged.", trait: "N", subcategory: "N3" },
  { id: 7, question: "I often feel uncomfortable around others.", trait: "N", subcategory: "N4" },
  { id: 8, question: "I worry about being judged by others.", trait: "N", subcategory: "N4" },
  { id: 9, question: "I find it hard to resist temptations.", trait: "N", subcategory: "N5" },
  { id: 10, question: "I often act on impulse without thinking.", trait: "N", subcategory: "N5" },
  { id: 11, question: "I struggle to stay calm in difficult situations.", trait: "N", subcategory: "N6" },
  { id: 12, question: "I panic easily in stressful situations.", trait: "N", subcategory: "N6" },

// Trait full names
const traitFullNames: Record<string, string> = {
  O: "Openness to Experience",
  C: "Conscientiousness",
  E: "Extraversion",
  A: "Agreeableness",
  N: "Neuroticism",
}

export function PersonalityReport({
  testType,
  mbtiResult,
  mbtiPersonalityInfo,
  big5Scores,
  big5Answers,
  customSummaries,
}: PersonalityReportProps) {
  const getTraitLevel = (score: number): "Low" | "Moderate" | "High" => {
    if (score <= 30) return "Low"
    if (score > 30 && score <= 42) return "Moderate"
    return "High"
  }

const getSubcategoryLevel = (score: number): "Low" | "Moderate" | "High" => {
    if (score <= 5) return "Low"
    if (score > 5 && score <= 7) return "Moderate"
    return "High"
  }

const getTraitSummary = (trait: string, score: number) => {
    const level = getTraitLevel(score)
    switch (trait) {
      case "N":
        if (level === "Low")
          return "You are emotionally stable, calm under pressure, and resilient in stressful situations."
        if (level === "Moderate")
          return "You experience a balanced emotional life, occasionally feeling anxious but generally able to manage stress."
        return "You may struggle with emotional reactivity, often feeling anxious, moody, or overwhelmed under stress."
      case "E":
        if (level === "Low")
          return "You tend to be reserved, enjoy solitude, and feel drained by too much social interaction."
        if (level === "Moderate")
          return "You enjoy socializing but also value alone time, showing a balanced sociability."
        return "You are outgoing, energetic, and feel energized by social interaction and group activities."
      case "O":
        if (level === "Low") return "You prefer familiarity and routine over novelty and abstract ideas."
        if (level === "Moderate")
          return "You are curious but also grounded, open to new experiences while valuing practicality."
        return "You are highly imaginative, creative, and intellectually curious with a love for new ideas and experiences."
      case "A":
        if (level === "Low")
          return "You may be competitive, skeptical of others, and prefer being direct over diplomatic."
        if (level === "Moderate")
          return "You are cooperative but can assert yourself when needed, balancing empathy with boundaries."
        return "You are empathetic, trusting, and highly cooperative, often prioritizing harmony and kindness."
      case "C":
        if (level === "Low")
          return "You may prefer spontaneity over planning, and sometimes struggle with follow-through or organization."
        if (level === "Moderate") return "You are generally dependable and organized but flexible when needed."
        return "You are disciplined, goal-oriented, and highly reliable in completing tasks and managing responsibilities."
      default:
        return ""
    }
  }

const getSubcategorySummary = (subcategory: string, score: number) => {
    const level = getSubcategoryLevel(score)
    switch (subcategory) {
      case "N1":
        if (level === "Low") return "Rarely experiences anxiety; tends to be calm and unworried."
        if (level === "Moderate") return "Experiences occasional anxiety but generally manages it well."
        return "Frequently feels anxious, worried, and prone to nervousness."
      case "N2":
        if (level === "Low") return "Generally calm; rarely experiences feelings of anger or hostility."
        if (level === "Moderate") return "Occasionally feels irritated but typically manages emotions constructively."
        return "Prone to anger, easily frustrated, and may express hostility."
      case "N3":
        if (level === "Low") return "Generally cheerful and optimistic; rarely feels sad or hopeless."
        if (level === "Moderate") return "Occasional periods of sadness but maintains a positive outlook."
        return "Frequently feels sad, hopeless, and may struggle with depressive moods."
      case "N4":
        if (level === "Low") return "Self-assured and comfortable in social situations."
        if (level === "Moderate") return "Generally comfortable but occasionally self-conscious."
        return "Highly self-conscious and worries excessively about others' opinions."
      case "N5":
        if (level === "Low") return "Disciplined and thoughtful; rarely acts on impulse."
        if (level === "Moderate") return "Generally self-controlled but may occasionally act impulsively."
        return "Prone to impulsive behavior without thinking through consequences."
      case "N6":
        if (level === "Low") return "Resilient and composed under pressure."
        if (level === "Moderate") return "Generally resilient but may feel vulnerable during high stress."
        return "Feels vulnerable and overwhelmed by stress."

case "E1":
        if (level === "Low") return "Reserved and less outwardly affectionate."
        if (level === "Moderate") return "Generally warm and friendly with those close."
        return "Highly warm, affectionate, and forms close bonds easily."
      case "E2":
        if (level === "Low") return "Prefers solitude or small groups."
        if (level === "Moderate") return "Enjoys social interaction but values alone time."
        return "Thrives in social settings and seeks out company."
      case "E3":
        if (level === "Low") return "Less assertive; prefers to let others lead."
        if (level === "Moderate") return "Assertive when necessary but prefers cooperation."
        return "Highly assertive; enjoys taking charge."
      case "E4":
        if (level === "Low") return "Prefers a slower pace of life."
        if (level === "Moderate") return "Moderately active with balance of energy."
        return "Highly energetic; enjoys a fast-paced life."
      case "E5":
        if (level === "Low") return "Prefers routine and predictability."
        if (level === "Moderate") return "Open to experiences but prefers moderate excitement."
        return "Actively seeks excitement and thrilling activities."
      case "E6":
        if (level === "Low") return "Less expressive of positive emotions."
        if (level === "Moderate") return "Experiences positive emotions regularly."
        return "Highly enthusiastic, cheerful, and joyful."

case "O1":
        if (level === "Low") return "Grounded in reality; less inclined to daydream."
        if (level === "Moderate") return "Enjoys imagination while remaining practical."
        return "Vivid imagination; drawn to fantastical ideas."
      case "O2":
        if (level === "Low") return "Less moved by art, music, or natural beauty."
        if (level === "Moderate") return "Appreciates art and beauty moderately."
        return "Deep appreciation for art, music, and beauty."
      case "O3":
        if (level === "Low") return "Less aware of or expressive about emotions."
        if (level === "Moderate") return "Generally aware of emotions and reflects on them."
        return "Highly aware of emotions; experiences wide range of feelings."
      case "O4":
        if (level === "Low") return "Prefers routine and familiarity."
        if (level === "Moderate") return "Open to new experiences with some predictability."
        return "Enjoys trying new things and breaking routines."
      case "O5":
        if (level === "Low") return "Prefers concrete facts over abstract theories."
        if (level === "Moderate") return "Curious about ideas but grounded in practicality."
        return "Intellectually curious; loves theoretical discussions."
      case "O6":
        if (level === "Low") return "Holds traditional values; respects authority."
        if (level === "Moderate") return "Open to reconsidering beliefs while respecting tradition."
        return "Open-minded; questions traditional values and authority."

case "A1":
        if (level === "Low") return "Skeptical and cautious of others' intentions."
        if (level === "Moderate") return "Generally trusting with healthy caution."
        return "Highly trusting; believes in good intentions of others."
      case "A2":
        if (level === "Low") return "May be indirect in communication."
        if (level === "Moderate") return "Generally honest but can be diplomatic."
        return "Direct, honest, and straightforward."
      case "A3":
        if (level === "Low") return "Prioritizes own needs; less inclined to help others."
        if (level === "Moderate") return "Willing to help while prioritizing own well-being."
        return "Highly altruistic; puts others' needs first."
      case "A4":
        if (level === "Low") return "Competitive; prefers asserting own will."
        if (level === "Moderate") return "Cooperative but can assert when necessary."
        return "Highly cooperative; avoids conflict and prioritizes harmony."
      case "A5":
        if (level === "Low") return "May highlight achievements; less modest."
        if (level === "Moderate") return "Generally modest but acknowledges accomplishments."
        return "Humble; rarely brags about achievements."
      case "A6":
        if (level === "Low") return "Less empathetic; may struggle with others' emotions."
        if (level === "Moderate") return "Generally empathetic and concerned for others."
        return "Deeply empathetic and compassionate."

case "C1":
        if (level === "Low") return "May doubt abilities; feels less capable."
        if (level === "Moderate") return "Generally competent and confident."
        return "Highly competent, efficient, and confident."
      case "C2":
        if (level === "Low") return "Prefers spontaneity; may struggle with organization."
        if (level === "Moderate") return "Generally organized but flexible."
        return "Highly organized, meticulous, and structured."
      case "C3":
        if (level === "Low") return "May be less reliable with responsibilities."
        if (level === "Moderate") return "Generally dependable and responsible."
        return "Highly dutiful, reliable, and fulfills obligations."
      case "C4":
        if (level === "Low") return "Less driven by external achievements."
        if (level === "Moderate") return "Motivated to achieve goals with balance."
        return "Highly ambitious; sets high standards."
      case "C5":
        if (level === "Low") return "May struggle with self-discipline."
        if (level === "Moderate") return "Generally self-disciplined with occasional lapses."
        return "Highly self-disciplined; rarely procrastinates."
      case "C6":
        if (level === "Low") return "Makes quick decisions without much thought."
        if (level === "Moderate") return "Considers options but can be spontaneous."
        return "Thoughtful and deliberate in decision-making."
      default:
        return ""
    }
  }

if (testType === "MBTI" && mbtiResult && mbtiPersonalityInfo) {
    return (
      <div className="print-report">
        <style jsx>{`
          @media print {
            .print-report {
              font-family: Arial, sans-serif;
              max-width: 100%;
              margin: 0;
              padding: 20px;
              color: inherit;
              background: #fff;
            }
            .print-report .section {
              page-break-inside: avoid;
              margin-bottom: 30px;
            }
            .print-report h1 {
              font-size: 24px;
              margin-bottom: 10px;
              text-align: center;
            }
            .print-report h2 {
              font-size: 20px;
              margin-bottom: 15px;
              border-bottom: 2px solid #ccc;
              padding-bottom: 5px;
            }
            .print-report h3 {
              font-size: 16px;
              margin-bottom: 10px;
            }
            .print-report p {
              font-size: 12px;
              line-height: 1.4;
              margin-bottom: 8px;
            }
            .print-report .grid {
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              gap: 20px;
              margin-bottom: 20px;
            }
            .print-report .card {
              border: 1px solid #ccc;
              padding: 15px;
              border-radius: 5px;
            }
          }
        `}</style>

<div className="section">
          <h1>MBTI Personality Test Report</h1>
          <div style={{ textAlign: "center", marginBottom: "30px" }}>
            <div
              style={{
                display: "inline-block",
                padding: "20px",
                border: "3px solid #ccc",
                borderRadius: "50%",
                marginBottom: "15px",
              }}
            >
              <span style={{ fontSize: "48px", fontWeight: "bold" }}>{mbtiResult}</span>
            </div>
            <h2>{mbtiPersonalityInfo.name}</h2>
            <p style={{ fontSize: "14px", fontStyle: "italic" }}>{mbtiPersonalityInfo.description}</p>
          </div>
        </div>

<div className="section">
          <h2>Personality Overview</h2>
          <div className="grid">
            <div className="card">
              <h3>Key Traits</h3>
              {mbtiPersonalityInfo.traits.map((trait: string, index: number) => (
                <p key={index}>• {trait}</p>
              ))}
            </div>
            <div className="card">
              <h3>Strengths</h3>
              {mbtiPersonalityInfo.strengths.map((strength: string, index: number) => (
                <p key={index}>• {strength}</p>
              ))}
            </div>
            <div className="card">
              <h3>Career Matches</h3>
              {mbtiPersonalityInfo.careers.map((career: string, index: number) => (
                <p key={index}>• {career}</p>
              ))}
            </div>
          </div>
        </div>

<div className="section">
          <p style={{ textAlign: "center", fontSize: "10px", color: "#666", marginTop: "40px" }}>
            © 2025 Om Prakash Paudel (Gaurav). All rights reserved.
          </p>
          <p style={{ textAlign: "center", fontSize: "10px", color: "#666", marginTop: "5px" }}>
            Generated on {getCurrentDate()} | https://www.omprakashpaudelgaurav.com.np/personality-test
          </p>
        </div>
      </div>
    )
  }

if (testType === "BIG5" && big5Scores && big5Answers) {
    // Calculate subcategory scores
    const calculateSubcategoryScores = () => {
      const scores: Record<string, number> = {}
      const subcategories = [
        "N1",
        "N2",
        "N3",
        "N4",
        "N5",
        "N6",
        "E1",
        "E2",
        "E3",
        "E4",
        "E5",
        "E6",
        "O1",
        "O2",
        "O3",
        "O4",
        "O5",
        "O6",
        "A1",
        "A2",
        "A3",
        "A4",
        "A5",
        "A6",
        "C1",
        "C2",
        "C3",
        "C4",
        "C5",
        "C6",
      ]

subcategories.forEach((subcat) => {
        const questions = big5Questions.filter((q) => q.subcategory === subcat)
        const score = questions.reduce((sum, q) => {
          const answer = big5Answers.find((a) => a.questionId === q.id)
          return sum + (answer?.value || 0)
        }, 0)
        scores[subcat] = score
      })

return scores
    }

const subcategoryScores = calculateSubcategoryScores()

const mainTraitChartData = [
      { name: "Openness", score: big5Scores.O },
      { name: "Conscientiousness", score: big5Scores.C },
      { name: "Extraversion", score: big5Scores.E },
      { name: "Agreeableness", score: big5Scores.A },
      { name: "Neuroticism", score: big5Scores.N },
    ]

return (
      <div className="print-report">
        <style jsx>{`
          @media print {
            .print-report {
              font-family: Arial, sans-serif;
              max-width: 100%;
              margin: 0;
              padding: 15px;
              color: inherit;
              background: #fff;
              font-size: 10px;
            }
            .print-report .page-break {
              page-break-before: always;
            }
            .print-report .section {
              margin-bottom: 20px;
            }
            .print-report .avoid-break {
              page-break-inside: avoid;
            }
            .print-report h1 {
              font-size: 22px;
              margin-bottom: 5px;
              text-align: center;
            }
            .print-report .subtitle {
              font-size: 11px;
              text-align: center;
              margin-bottom: 15px;
              color: #666;
            }
            .print-report h2 {
              font-size: 14px;
              margin-bottom: 10px;
              border-bottom: 2px solid #333;
              padding-bottom: 3px;
              font-weight: bold;
            }
            .print-report h3 {
              font-size: 12px;
              margin-bottom: 8px;
              font-weight: bold;
            }
            .print-report h4 {
              font-size: 11px;
              margin-bottom: 4px;
              font-weight: bold;
            }
            .print-report p {
              font-size: 10px;
              line-height: 1.3;
              margin-bottom: 4px;
            }
            .print-report .score-table {
              width: 100%;
              border-collapse: collapse;
              margin-bottom: 15px;
              font-size: 10px;
            }
            .print-report .score-table th,
            .print-report .score-table td {
              border: 1px solid #ccc;
              padding: 6px 8px;
              text-align: left;
            }
            .print-report .score-table th {
              background-color: #f0f0f0 !important;
              font-weight: bold;
            }
            .print-report .score-table .center {
              text-align: center;
            }
            .print-report .trait-section {
              margin-bottom: 15px;
              padding: 10px;
              border: 1px solid #ddd;
              border-radius: 4px;
            }
            .print-report .trait-header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 8px;
              padding-bottom: 5px;
              border-bottom: 1px solid #eee;
            }
            .print-report .subcat-grid {
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              gap: 8px;
            }
            .print-report .subcat-item {
              padding: 6px;
              border: 1px solid #eee;
              border-radius: 3px;
              font-size: 9px;
            }
            .print-report .subcat-item h5 {
              font-size: 10px;
              font-weight: bold;
              margin-bottom: 2px;
            }
            .print-report .dimensions-grid {
              display: grid;
              grid-template-columns: repeat(2, 1fr);
              gap: 10px;
              margin-bottom: 15px;
            }
            .print-report .dimension-card {
              padding: 8px;
              border: 1px solid #ddd;
              border-radius: 4px;
            }
            .print-report .dimension-card h4 {
              font-size: 11px;
              margin-bottom: 4px;
              color: #333;
            }
            .print-report .dimension-card p {
              font-size: 9px;
            }
            .print-report .footer {
              text-align: center;
              font-size: 9px;
              color: #666;
              margin-top: 20px;
              padding-top: 10px;
              border-top: 1px solid #ccc;
            }
            .print-report .level-badge {
              display: inline-block;
              padding: 2px 6px;
              border-radius: 3px;
              font-size: 9px;
              font-weight: bold;
            }
            .print-report .level-low {
              background-color: #e3f2fd !important;
              color: #1565c0 !important;
            }
            .print-report .level-moderate {
              background-color: #fff8e1 !important;
              color: #f57f17 !important;
            }
            .print-report .level-high {
              background-color: #e8f5e9 !important;
              color: #2e7d32 !important;
            }
          }
          
          /* Screen styles for preview */
          .print-report {
            font-family: Arial, sans-serif;
            max-width: 100%;
            margin: 0 auto;
            padding: 20px;
            background: #fff;
            color: #000;
          }
          .print-report h1 {
            font-size: 24px;
            text-align: center;
            margin-bottom: 5px;
          }
          .print-report .subtitle {
            text-align: center;
            color: #666;
            margin-bottom: 20px;
          }
          .print-report h2 {
            font-size: 16px;
            border-bottom: 2px solid #333;
            padding-bottom: 5px;
            margin-bottom: 15px;
          }
          .print-report .score-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
          }
          .print-report .score-table th,
          .print-report .score-table td {
            border: 1px solid #ccc;
            padding: 8px;
          }
          .print-report .score-table th {
            background: #f5f5f5;
          }
          .print-report .trait-section {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
          }
          .print-report .subcat-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
          }
          .print-report .subcat-item {
            padding: 8px;
            border: 1px solid #eee;
            border-radius: 4px;
          }
          .print-report .dimensions-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
          }
          .print-report .dimension-card {
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
          }
          .print-report .level-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: bold;
          }
          .print-report .level-low {
            background: #e3f2fd;
            color: #1565c0;
          }
          .print-report .level-moderate {
            background: #fff8e1;
            color: #f57f17;
          }
          .print-report .level-high {
            background: #e8f5e9;
            color: #2e7d32;
          }
          .print-report .footer {
            text-align: center;
            margin-top: 30px;
            padding-top: 15px;
            border-top: 1px solid #ccc;
            color: #666;
            font-size: 11px;
          }
        `}</style>

{/* Page 1: Title and Score Summary */}
        <div className="section">
          <h1>Big 5 Personality Test Report</h1>
          <p className="subtitle">Comprehensive Personality Analysis Based on the Five-Factor Model</p>
        </div>

<div className="section avoid-break">
          <h2>Core Trait Scores Summary</h2>
          <table className="score-table">
            <thead>
              <tr>
                <th>Trait</th>
                <th className="center">Score</th>
                <th className="center">Level</th>
                <th>Interpretation</th>
              </tr>
            </thead>
            <tbody>
              {mainTraitChartData.map((data) => {
                const traitKey = Object.keys(traitFullNames).find((k) => traitFullNames[k] === data.name) || ""
                const level = getTraitLevel(data.score)
                return (
                  <tr key={data.name}>
                    <td>
                      <strong>{data.name}</strong>
                    </td>
                    <td className="center">{data.score}/60</td>
                    <td className="center">
                      <span className={`level-badge level-${level.toLowerCase()}`}>{level}</span>
                    </td>
                    <td>{getTraitSummary(traitKey, data.score)}</td>
                  </tr>
                )
              })}
            </tbody>
          </table>
          <p style={{ fontSize: "10px", textAlign: "center", color: "#666" }}>
            <strong>Rating Scale:</strong> Low (0-30) | Moderate (31-42) | High (43-60)
          </p>
        </div>

{/* Detailed Trait Analysis */}
        <div className="page-break"></div>
        <div className="section">
          <h2>Detailed Trait Analysis with Subcategories</h2>

{(["N", "E", "O", "A", "C"] as const).map((trait) => {
            const traitScore = big5Scores[trait]
            const traitLevel = getTraitLevel(traitScore)
            const subcategories = ["1", "2", "3", "4", "5", "6"].map((num) => `${trait}${num}`)

return (
              <div key={trait} className="trait-section avoid-break">
                <div className="trait-header">
                  <h3>{traitFullNames[trait]}</h3>
                  <span className={`level-badge level-${traitLevel.toLowerCase()}`}>
                    {traitScore}/60 - {traitLevel}
                  </span>
                </div>
                <p style={{ marginBottom: "10px" }}>{getTraitSummary(trait, traitScore)}</p>

<h4>Subcategory Breakdown:</h4>
                <div className="subcat-grid">
                  {subcategories.map((subcat) => {
                    const subcatScore = subcategoryScores[subcat]
                    const subcatLevel = getSubcategoryLevel(subcatScore)
                    return (
                      <div key={subcat} className="subcat-item">
                        <h5>
                          {subcategoryNames[subcat]}
                          <span
                            className={`level-badge level-${subcatLevel.toLowerCase()}`}
                            style={{ marginLeft: "5px" }}
                          >
                            {subcatScore}/10
                          </span>
                        </h5>
                        <p>{getSubcategorySummary(subcat, subcatScore)}</p>
                      </div>
                    )
                  })}
                </div>
              </div>
            )
          })}
        </div>

{/* Integrated Dimensions */}
        {customSummaries && (
          <>
            <div className="page-break"></div>
            <div className="section">
              <h2>Integrated Personality Dimensions</h2>
              <div className="dimensions-grid">
                <div className="dimension-card">
                  <h4>Emotional Style</h4>
                  <p>{customSummaries.emotionalStyle}</p>
                </div>
                <div className="dimension-card">
                  <h4>Interpersonal Relations</h4>
                  <p>{customSummaries.interpersonalRelations}</p>
                </div>
                <div className="dimension-card">
                  <h4>Vocational Style</h4>
                  <p>{customSummaries.vocationalStyle}</p>
                </div>
                <div className="dimension-card">
                  <h4>Pattern of Activity</h4>
                  <p>{customSummaries.patternOfActivity}</p>
                </div>
                <div className="dimension-card">
                  <h4>Attitudes</h4>
                  <p>{customSummaries.attitudes}</p>
                </div>
                <div className="dimension-card">
                  <h4>Academic Performance</h4>
                  <p>{customSummaries.academicPerformance}</p>
                </div>
              </div>
              <div className="dimension-card" style={{ marginTop: "10px" }}>
                <h4>Character</h4>
                <p>{customSummaries.character}</p>
              </div>
            </div>
          </>
        )}

{/* Footer */}
        <div className="footer">
          <p>© 2025 Om Prakash Paudel (Gaurav). All rights reserved.</p>
          <p>Generated on {getCurrentDate()} | https://www.omprakashpaudelgaurav.com.np/personality-test</p>
        </div>
      </div>
    )
  }

return null
}
[V0_FILE]typescriptreact:file="components/progress-indicator.tsx"
"use client"

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

export function ProgressIndicator() {
  const [scrollProgress, setScrollProgress] = useState(0)

useEffect(() => {
    const updateScrollProgress = () => {
      const scrollPx = document.documentElement.scrollTop
      const winHeightPx = document.documentElement.scrollHeight - document.documentElement.clientHeight
      const scrolled = scrollPx / winHeightPx
      setScrollProgress(scrolled)
    }

window.addEventListener("scroll", updateScrollProgress, { passive: true })
    return () => window.removeEventListener("scroll", updateScrollProgress)
  }, [])

return (
    <motion.div
      className="fixed top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary via-primary/80 to-primary z-50 origin-left"
      style={{
        scaleX: scrollProgress,
      }}
      initial={{ scaleX: 0 }}
      animate={{ scaleX: scrollProgress }}
      transition={{ duration: 0.1 }}
    />
  )
}
[V0_FILE]typescriptreact:file="components/projects-showcase.tsx"
"use client"

import Image from "next/image"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { ExternalLink, Github, Star } from "lucide-react"
import { projectsData } from "@/lib/projects-data"
import { AnimateOnScroll, AnimateStagger } from "@/components/scroll-animation"

interface ProjectCardProps {
  project: (typeof projectsData)[0]
}

function ProjectCard({ project }: ProjectCardProps) {
  return (
    <AnimateOnScroll animation="slideUp">
      <Card className="border-none shadow-lg hover:shadow-2xl transition-all duration-300 bg-card rounded-2xl overflow-hidden group h-full flex flex-col">
        {/* Project Image */}
        <div className="relative h-48 md:h-56 w-full overflow-hidden bg-muted">
          <Image
            src={project.image || "/placeholder.svg"}
            alt={project.title}
            fill
            className="object-cover group-hover:scale-110 transition-transform duration-500"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

{/* Status Badge */}
          <div className="absolute top-4 right-4">
            <Badge
              className={`${
                project.status === "Live"
                  ? "bg-primary/90 text-primary-foreground"
                  : "bg-secondary/90 text-secondary-foreground"
              } font-semibold`}
            >
              {project.status}
            </Badge>
          </div>
        </div>

{/* Content */}
        <CardHeader className="bg-primary/5 border-b border-primary/20">
          <div className="flex items-start justify-between gap-2 mb-2">
            <div className="flex-1">
              <CardTitle className="text-xl md:text-2xl text-foreground group-hover:text-primary transition-colors">
                {project.title}
              </CardTitle>
              <p className="text-sm text-primary font-semibold mt-1">{project.category}</p>
            </div>
            <Star className="h-5 w-5 text-primary shrink-0" />
          </div>
        </CardHeader>

<CardContent className="flex-1 flex flex-col p-4 md:p-6">
          <p className="text-foreground/90 mb-4 line-clamp-3">{project.description}</p>

{/* Highlights */}
          <div className="mb-4 space-y-2">
            {project.highlights.slice(0, 2).map((highlight, idx) => (
              <div key={idx} className="flex items-start gap-2 text-sm text-muted-foreground">
                <span className="text-primary mt-1">•</span>
                <span>{highlight}</span>
              </div>
            ))}
          </div>

{/* Tech Stack */}
          <div className="mb-6 flex flex-wrap gap-2">
            {project.technologies.slice(0, 3).map((tech) => (
              <Badge
                key={tech}
                variant="outline"
                className="bg-background/50 text-foreground border-secondary/30 text-xs"
              >
                {tech}
              </Badge>
            ))}
            {project.technologies.length > 3 && (
              <Badge variant="outline" className="bg-background/50 text-foreground border-secondary/30 text-xs">
                +{project.technologies.length - 3}
              </Badge>
            )}
          </div>

{/* Actions */}
          <div className="flex gap-3 mt-auto">
            {project.link !== "#" && (
              <Button
                size="sm"
                className="flex-1 bg-primary text-primary-foreground hover:bg-primary/90 rounded-lg"
                asChild
              >
                <a href={project.link} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2">
                  <ExternalLink className="h-4 w-4" />
                  View
                </a>
              </Button>
            )}
            {project.github !== "#" && (
              <Button size="sm" variant="outline" className="flex-1 rounded-lg bg-transparent" asChild>
                <a href={project.github} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2">
                  <Github className="h-4 w-4" />
                  Code
                </a>
              </Button>
            )}
          </div>
        </CardContent>
      </Card>
    </AnimateOnScroll>
  )
}

export function ProjectsShowcase() {
  return (
    <div className="w-full">
      <div className="grid gap-6 md:gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
        <AnimateStagger delay={0.2} staggerDelay={0.1} animation="slideUp">
          {projectsData.map((project) => (
            <ProjectCard key={project.id} project={project} />
          ))}
        </AnimateStagger>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/scroll-animation.tsx"
"use client"

import React from "react"

import { useRef, useEffect, useState, type ReactNode } from "react"
import { motion } from "framer-motion"

interface AnimateOnScrollProps {
  children: ReactNode
  animation?: "fadeIn" | "slideUp" | "slideRight" | "slideLeft" | "slideDown" | "zoomIn" | "bounce" | "rotate"
  delay?: number
  duration?: number
  threshold?: number
  className?: string
  once?: boolean
}

export function AnimateOnScroll({
  children,
  animation = "fadeIn",
  delay = 0,
  duration = 0.5,
  threshold = 0.1,
  className = "",
  once = true,
}: AnimateOnScrollProps) {
  const ref = useRef<HTMLDivElement>(null)
  const [isVisible, setIsVisible] = useState(false)

useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true)
          if (once) {
            observer.unobserve(entry.target)
          }
        } else if (!once) {
          setIsVisible(false)
        }
      },
      {
        threshold,
      },
    )

const currentRef = ref.current
    if (currentRef) {
      observer.observe(currentRef)
    }

return () => {
      if (currentRef) {
        observer.unobserve(currentRef)
      }
    }
  }, [threshold, once])

const animations = {
    fadeIn: {
      initial: { opacity: 0 },
      animate: { opacity: 1 },
    },
    slideUp: {
      initial: { opacity: 0, y: 50 },
      animate: { opacity: 1, y: 0 },
    },
    slideDown: {
      initial: { opacity: 0, y: -50 },
      animate: { opacity: 1, y: 0 },
    },
    slideRight: {
      initial: { opacity: 0, x: -50 },
      animate: { opacity: 1, x: 0 },
    },
    slideLeft: {
      initial: { opacity: 0, x: 50 },
      animate: { opacity: 1, x: 0 },
    },
    zoomIn: {
      initial: { opacity: 0, scale: 0.9 },
      animate: { opacity: 1, scale: 1 },
    },
    bounce: {
      initial: { opacity: 0, y: 50 },
      animate: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 300, damping: 15 } },
    },
    rotate: {
      initial: { opacity: 0, rotate: -5 },
      animate: { opacity: 1, rotate: 0 },
    },
  }

const selectedAnimation = animations[animation]

return (
    <motion.div
      ref={ref}
      initial={selectedAnimation.initial}
      animate={isVisible ? selectedAnimation.animate : selectedAnimation.initial}
      transition={selectedAnimation.transition || { duration, delay }}
      className={className}
    >
      {children}
    </motion.div>
  )
}

export function AnimateLines({
  text,
  delay = 0,
  duration = 0.5,
  threshold = 0.1,
}: { text: string; delay?: number; duration?: number; threshold?: number }) {
  const lines = text.split(". ")

return (
    <>
      {lines.map((line, index) => (
        <AnimateOnScroll
          key={index}
          animation="slideUp"
          delay={delay + index * 0.15}
          duration={duration}
          threshold={threshold}
          className="mb-2"
        >
          {line}
          {index < lines.length - 1 ? "." : ""}
        </AnimateOnScroll>
      ))}
    </>
  )
}

export function AnimateStagger({
  children,
  delay = 0.1,
  staggerDelay = 0.1,
  animation = "fadeIn",
  threshold = 0.1,
}: {
  children: ReactNode[]
  delay?: number
  staggerDelay?: number
  animation?: AnimateOnScrollProps["animation"]
  threshold?: number
}) {
  return (
    <>
      {React.Children.map(children, (child, index) => (
        <AnimateOnScroll key={index} animation={animation} delay={delay + index * staggerDelay} threshold={threshold}>
          {child}
        </AnimateOnScroll>
      ))}
    </>
  )
}
[V0_FILE]typescriptreact:file="components/snow-effect.tsx"
"use client"

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

interface Snowflake {
  id: number
  x: number
  y: number
  size: number
  speed: number
  opacity: number
  wobble: number
  wobbleSpeed: number
  rotation: number
  rotationSpeed: number
  stuck: boolean
  stuckY: number
  meltProgress: number
  type: "crystal" | "dot" | "star"
}

interface StuckFlake {
  id: number
  x: number
  y: number
  size: number
  opacity: number
  drip: number
  dripSpeed: number
  melting: boolean
}

export function SnowEffect() {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const snowflakesRef = useRef<Snowflake[]>([])
  const stuckFlakesRef = useRef<StuckFlake[]>([])
  const animationRef = useRef<number>()
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 })
  const [isWinterSeason, setIsWinterSeason] = useState(false)

const createSnowflake = useCallback(
    (id: number, startFromTop = true): Snowflake => ({
      id,
      x: Math.random() * dimensions.width,
      y: startFromTop ? -10 : Math.random() * dimensions.height * 0.5,
      size: Math.random() * 4 + 2,
      speed: Math.random() * 0.8 + 0.3,
      opacity: Math.random() * 0.6 + 0.4,
      wobble: 0,
      wobbleSpeed: Math.random() * 0.02 + 0.01,
      rotation: Math.random() * Math.PI * 2,
      rotationSpeed: (Math.random() - 0.5) * 0.02,
      stuck: false,
      stuckY: 0,
      meltProgress: 0,
      type: ["crystal", "dot", "star"][Math.floor(Math.random() * 3)] as "crystal" | "dot" | "star",
    }),
    [dimensions.width, dimensions.height],
  )

useEffect(() => {
    const checkWinterSeason = () => {
      const now = new Date()
      const month = now.getMonth() // 0 = January, 1 = February, etc.

// Display snow effect from December (11) through January (0)
      const isWinter = month === 0 || month === 11
      setIsWinterSeason(isWinter)
    }

checkWinterSeason()
  }, [])

useEffect(() => {
    const updateDimensions = () => {
      setDimensions({ width: window.innerWidth, height: window.innerHeight })
    }
    updateDimensions()
    window.addEventListener("resize", updateDimensions)
    return () => window.removeEventListener("resize", updateDimensions)
  }, [])

useEffect(() => {
    if (!isWinterSeason || dimensions.width === 0) return

// Initialize snowflakes
    snowflakesRef.current = Array.from({ length: 60 }, (_, i) => createSnowflake(i, false))

const canvas = canvasRef.current
    if (!canvas) return
    const ctx = canvas.getContext("2d")
    if (!ctx) return

canvas.width = dimensions.width
    canvas.height = dimensions.height

const drawCrystal = (x: number, y: number, size: number, rotation: number, opacity: number) => {
      ctx.save()
      ctx.translate(x, y)
      ctx.rotate(rotation)
      ctx.globalAlpha = opacity
      ctx.strokeStyle = "rgba(255, 255, 255, 0.9)"
      ctx.lineWidth = 1

// Draw 6-pointed crystal
      for (let i = 0; i < 6; i++) {
        ctx.save()
        ctx.rotate((i * Math.PI) / 3)
        ctx.beginPath()
        ctx.moveTo(0, 0)
        ctx.lineTo(0, -size)
        // Add branches
        ctx.moveTo(0, -size * 0.4)
        ctx.lineTo(-size * 0.3, -size * 0.6)
        ctx.moveTo(0, -size * 0.4)
        ctx.lineTo(size * 0.3, -size * 0.6)
        ctx.stroke()
        ctx.restore()
      }
      ctx.restore()
    }

const drawStar = (x: number, y: number, size: number, rotation: number, opacity: number) => {
      ctx.save()
      ctx.translate(x, y)
      ctx.rotate(rotation)
      ctx.globalAlpha = opacity
      ctx.fillStyle = "rgba(255, 255, 255, 0.95)"
      ctx.beginPath()
      for (let i = 0; i < 8; i++) {
        const angle = (i * Math.PI) / 4
        const r = i % 2 === 0 ? size : size * 0.4
        const px = Math.cos(angle) * r
        const py = Math.sin(angle) * r
        if (i === 0) ctx.moveTo(px, py)
        else ctx.lineTo(px, py)
      }
      ctx.closePath()
      ctx.fill()
      ctx.restore()
    }

const drawDot = (x: number, y: number, size: number, opacity: number) => {
      ctx.beginPath()
      ctx.arc(x, y, size * 0.5, 0, Math.PI * 2)
      ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`
      ctx.fill()
      // Add subtle glow
      const gradient = ctx.createRadialGradient(x, y, 0, x, y, size)
      gradient.addColorStop(0, `rgba(255, 255, 255, ${opacity * 0.5})`)
      gradient.addColorStop(1, "rgba(255, 255, 255, 0)")
      ctx.beginPath()
      ctx.arc(x, y, size, 0, Math.PI * 2)
      ctx.fillStyle = gradient
      ctx.fill()
    }

const drawStuckFlake = (flake: StuckFlake) => {
      // Draw the stuck snowflake with drip effect
      ctx.globalAlpha = flake.opacity * (1 - flake.drip / 50)

// Main stuck part
      ctx.beginPath()
      ctx.arc(flake.x, flake.y, flake.size * 0.6, 0, Math.PI * 2)
      ctx.fillStyle = "rgba(255, 255, 255, 0.8)"
      ctx.fill()

// Drip/melt trail
      if (flake.drip > 0) {
        ctx.beginPath()
        ctx.moveTo(flake.x - flake.size * 0.3, flake.y)
        ctx.quadraticCurveTo(flake.x, flake.y + flake.drip * 0.5, flake.x, flake.y + flake.drip)
        ctx.quadraticCurveTo(flake.x, flake.y + flake.drip * 0.5, flake.x + flake.size * 0.3, flake.y)
        ctx.fillStyle = `rgba(200, 220, 255, ${0.4 * (1 - flake.drip / 50)})`
        ctx.fill()
      }
    }

const animate = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height)

// Update and draw falling snowflakes
      snowflakesRef.current.forEach((flake, index) => {
        // Update position
        flake.wobble += flake.wobbleSpeed
        flake.x += Math.sin(flake.wobble) * 0.5
        flake.y += flake.speed
        flake.rotation += flake.rotationSpeed

// Check if snowflake should stick to screen edge (top 5% of screen)
        if (flake.y > 0 && flake.y < dimensions.height * 0.05 && Math.random() < 0.001) {
          stuckFlakesRef.current.push({
            id: Date.now() + Math.random(),
            x: flake.x,
            y: flake.y,
            size: flake.size,
            opacity: flake.opacity,
            drip: 0,
            dripSpeed: Math.random() * 0.1 + 0.05,
            melting: false,
          })
          // Reset this snowflake
          snowflakesRef.current[index] = createSnowflake(flake.id, true)
          return
        }

// Reset if out of bounds
        if (flake.y > dimensions.height || flake.x < -20 || flake.x > dimensions.width + 20) {
          snowflakesRef.current[index] = createSnowflake(flake.id, true)
          return
        }

// Draw based on type
        switch (flake.type) {
          case "crystal":
            drawCrystal(flake.x, flake.y, flake.size, flake.rotation, flake.opacity)
            break
          case "star":
            drawStar(flake.x, flake.y, flake.size, flake.rotation, flake.opacity)
            break
          default:
            drawDot(flake.x, flake.y, flake.size, flake.opacity)
        }
      })

// Update and draw stuck flakes
      stuckFlakesRef.current = stuckFlakesRef.current.filter((flake) => {
        // Start melting after a delay
        if (!flake.melting && Math.random() < 0.005) {
          flake.melting = true
        }

if (flake.melting) {
          flake.drip += flake.dripSpeed
          flake.opacity -= 0.002
        }

if (flake.drip > 50 || flake.opacity <= 0) {
          return false // Remove this flake
        }

drawStuckFlake(flake)
        return true
      })

animationRef.current = requestAnimationFrame(animate)
    }

animate()

return () => {
      if (animationRef.current) {
        cancelAnimationFrame(animationRef.current)
      }
    }
  }, [dimensions, createSnowflake, isWinterSeason])

if (!isWinterSeason) {
    return null
  }

return (
    <canvas
      ref={canvasRef}
      className="fixed inset-0 pointer-events-none z-[100]"
      style={{ width: "100%", height: "100%" }}
    />
  )
}
[V0_FILE]typescriptreact:file="components/social-links.tsx"
"use client"

import { Facebook, Instagram, Linkedin } from "lucide-react"
import { Button } from "@/components/ui/button"

export function SocialLinks() {
  const socialLinks = [
    {
      icon: Facebook,
      href: "https://www.facebook.com/Gaurab0",
      label: "Facebook",
    },
    {
      icon: Instagram,
      href: "https://www.instagram.com/gaurab__as_a",
      label: "Instagram",
    },
    {
      icon: Linkedin,
      href: "https://www.linkedin.com/in/gau7ab/",
      label: "LinkedIn",
    },
  ]

return (
    <div data-social-links className="fixed bottom-8 left-8 flex flex-col gap-2 z-40 print:hidden">
      {socialLinks.map((link) => (
        <Button
          key={link.label}
          variant="outline"
          size="icon"
          className="rounded-full bg-background/80 backdrop-blur-sm hover:bg-background"
          asChild
        >
          <a
            href={link.href}
            target="_blank"
            rel="noopener noreferrer"
            className="transition-transform hover:scale-110"
          >
            <link.icon className="h-4 w-4" />
            <span className="sr-only">{link.label}</span>
          </a>
        </Button>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx"
"use client"

import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import type { ThemeProviderProps } from "next-themes"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/ui/alert.tsx"
import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'

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

const alertVariants = cva(
  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
  {
    variants: {
      variant: {
        default: 'bg-card text-card-foreground',
        destructive:
          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

function Alert({
  className,
  variant,
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
  return (
    <div
      data-slot="alert"
      role="alert"
      className={cn(alertVariants({ variant }), className)}
      {...props}
    />
  )
}

function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="alert-title"
      className={cn(
        'col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight',
        className,
      )}
      {...props}
    />
  )
}

function AlertDescription({
  className,
  ...props
}: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="alert-description"
      className={cn(
        'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
        className,
      )}
      {...props}
    />
  )
}

export { Alert, AlertTitle, AlertDescription }
[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="components/ui/button.tsx"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

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

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive:
          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
        secondary:
          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        ghost:
          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
        icon: 'size-9',
        'icon-sm': 'size-8',
        'icon-lg': 'size-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

function Button({
  className,
  variant,
  size,
  asChild = false,
  ...props
}: React.ComponentProps<'button'> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
  const Comp = asChild ? Slot : 'button'

return (
    <Comp
      data-slot="button"
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/card.tsx"
import * as React from 'react'

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

function Card({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card"
      className={cn(
        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
        className,
      )}
      {...props}
    />
  )
}

function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-header"
      className={cn(
        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
        className,
      )}
      {...props}
    />
  )
}

function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-title"
      className={cn('leading-none font-semibold', className)}
      {...props}
    />
  )
}

function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-action"
      className={cn(
        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
        className,
      )}
      {...props}
    />
  )
}

function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-content"
      className={cn('px-6', className)}
      {...props}
    />
  )
}

function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-footer"
      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
      {...props}
    />
  )
}

export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
}
[V0_FILE]typescriptreact:file="components/ui/chart.tsx"
"use client"

import * as React from "react"
import { Label } from "@radix-ui/react-label"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import * as RechartsPrimitive from "recharts"

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

const ChartContext = React.createContext<
  {
    config: Record<string, { label?: string; color?: string; icon?: React.ElementType }>
  } & ({ type: "bar" } | { type: "line" } | { type: "area" })
>(null as any)

function Chart({
  id,
  type = "bar",
  config,
  className,
  children,
  ...props
}: React.ComponentProps<"div"> & {
  id?: string
  type?: "bar" | "line" | "area"
  config: Record<string, { label?: string; color?: string; icon?: React.ElementType }>
}) {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId}`
  return (
    <ChartContext.Provider value={{ type, config, id: chartId }}>
      <div
        data-chart={chartId}
        className={cn("flex aspect-video h-full w-full flex-col [--color-gray:220_8.9%_46.1%]")}
        {...props}
      >
        {children}
      </div>
    </ChartContext.Provider>
  )
}

function useChart() {
  const context = React.useContext(ChartContext)
  if (!context) {
    throw new Error("useChart must be used within a <Chart />")
  }
  return context
}

const ChartTooltip = React.forwardRef<React.ElementRef<typeof Tooltip>, React.ComponentPropsWithoutRef<typeof Tooltip>>(
  ({ children, ...props }, ref) => {
    return (
      <TooltipProvider>
        <Tooltip {...props}>
          <TooltipTrigger asChild>{children}</TooltipTrigger>
          <TooltipContent ref={ref} className="shadow-lg">
            <ChartTooltipContent />
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
    )
  },
)
ChartTooltip.displayName = Tooltip.displayName

const ChartTooltipContent = React.forwardRef<
  React.ElementRef<typeof ChartTooltip>,
  React.ComponentPropsWithoutRef<typeof ChartTooltip> & {
    hideLabel?: boolean
    hideIndicator?: boolean
    nameKey?: string
    valueKey?: string
    indicator?: "dot" | "dashed" | "solid"
    labelFormatter?: (payload: any) => string
    valueFormatter?: (value: any, name: string, item: any, index: number) => string
    categoryFormatter?: (value: any) => string
  }
>(
  (
    {
      hideLabel = false,
      hideIndicator = false,
      indicator = "dot",
      nameKey,
      valueKey,
      labelFormatter,
      valueFormatter,
      categoryFormatter,
      className,
      ...props
    },
    ref,
  ) => {
    const { config } = useChart()

return (
      <div
        ref={ref}
        className={cn(
          "grid min-w-[120px] items-center gap-1.5 rounded-lg border border-border bg-background px-2.5 py-2 font-sans text-xs shadow-md",
          className,
        )}
        {...props}
      >
        {!hideLabel && (
          <div className="row-span-2 flex flex-col items-start">
            <h4 className="font-medium">
              {labelFormatter ? labelFormatter(props.payload?.[0]?.payload?.name) : props.label}
            </h4>
            {categoryFormatter && (
              <p className="text-muted-foreground">{categoryFormatter(props.payload?.[0]?.payload?.category)}</p>
            )}
          </div>
        )}
        {props.payload?.map((item: any) => {
          const key = nameKey || item.dataKey
          const name = config[key]?.label || item.name
          const value = valueKey ? item.payload[valueKey] : item.value

if (!name || value === undefined) return null

return (
            <div key={item.dataKey} className={cn("flex w-full items-center gap-2", hideLabel ? "pt-2" : "")}>
              {!hideIndicator && (
                <div
                  className={cn(
                    "h-2 w-2 shrink-0 rounded-full",
                    indicator === "dashed" && "rounded-none",
                    indicator === "solid" && "rounded-none h-2.5 w-1",
                  )}
                  style={{
                    backgroundColor: item.color || config[key]?.color,
                  }}
                />
              )}
              <div className="flex flex-1 justify-between">
                <span className="text-muted-foreground">{name}</span>
                <span className="font-mono font-medium tabular-nums text-foreground">
                  {valueFormatter ? valueFormatter(value, name, item, item.index) : value}
                </span>
              </div>
            </div>
          )
        })}
      </div>
    )
  },
)
ChartTooltipContent.displayName = "ChartTooltipContent"

const ChartLegend = React.forwardRef<
  React.ElementRef<typeof RechartsPrimitive.Legend>,
  React.ComponentPropsWithoutRef<typeof RechartsPrimitive.Legend>
>(({ className, ...props }, ref) => {
  const { config } = useChart()

return (
    <RechartsPrimitive.Legend
      {...props}
      ref={ref}
      wrapperStyle={{ ...props.wrapperStyle, position: "relative" }}
      content={({ payload }) => (
        <div className={cn("flex flex-wrap items-center justify-center gap-4", className)}>
          {payload?.map((item: any) => {
            if (!item.value) return null

const { icon: Icon } = config[item.value] || {}

return (
              <div key={item.value} className="flex items-center gap-1.5">
                {Icon ? (
                  <Icon
                    className="h-3 w-3"
                    style={{
                      fill: item.color,
                      stroke: item.color,
                    }}
                  />
                ) : (
                  <div
                    className="h-2 w-2 shrink-0 rounded-full"
                    style={{
                      backgroundColor: item.color,
                    }}
                  />
                )}
                <Label className="text-xs">{item.value}</Label>
              </div>
            )
          })}
        </div>
      )}
    />
  )
})
ChartLegend.displayName = "ChartLegend"

const ChartLegendContent = React.forwardRef<
  React.ElementRef<typeof RechartsPrimitive.Legend>,
  React.ComponentPropsWithoutRef<typeof RechartsPrimitive.Legend>
>(({ className, ...props }, ref) => {
  const { config } = useChart()

const { icon: Icon } = config[item.value] || {}

const ChartContainer = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    children: React.ReactNode
    config: ChartConfig
    id?: string
    className?: string
  }
>(({ id, className, children, config, ...props }, ref) => {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId}`
  return (
    <ChartContext.Provider value={{ config, id: chartId, type: "bar" }}>
      <div
        data-chart={chartId}
        ref={ref}
        className={cn("flex aspect-video h-full w-full flex-col [--color-gray:220_8.9%_46.1%]", className)}
        {...props}
      >
        {children}
      </div>
    </ChartContext.Provider>
  )
})
ChartContainer.displayName = "ChartContainer"

type ChartConfig = Record<
  string,
  {
    label?: string
    color?: string
    icon?: React.ElementType
  }
>

export { Chart, ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent }
[V0_FILE]typescriptreact:file="components/ui/dialog.tsx"
'use client'

import * as React from 'react'
import * as DialogPrimitive from '@radix-ui/react-dialog'
import { XIcon } from 'lucide-react'

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

function Dialog({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
  return <DialogPrimitive.Root data-slot="dialog" {...props} />
}

function DialogTrigger({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
}

function DialogPortal({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
}

function DialogClose({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
}

function DialogOverlay({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
  return (
    <DialogPrimitive.Overlay
      data-slot="dialog-overlay"
      className={cn(
        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
        className,
      )}
      {...props}
    />
  )
}

function DialogContent({
  className,
  children,
  showCloseButton = true,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
  showCloseButton?: boolean
}) {
  return (
    <DialogPortal data-slot="dialog-portal">
      <DialogOverlay />
      <DialogPrimitive.Content
        data-slot="dialog-content"
        className={cn(
          'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
          className,
        )}
        {...props}
      >
        {children}
        {showCloseButton && (
          <DialogPrimitive.Close
            data-slot="dialog-close"
            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
          >
            <XIcon />
            <span className="sr-only">Close</span>
          </DialogPrimitive.Close>
        )}
      </DialogPrimitive.Content>
    </DialogPortal>
  )
}

function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="dialog-header"
      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
      {...props}
    />
  )
}

function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="dialog-footer"
      className={cn(
        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
        className,
      )}
      {...props}
    />
  )
}

function DialogTitle({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
  return (
    <DialogPrimitive.Title
      data-slot="dialog-title"
      className={cn('text-lg leading-none font-semibold', className)}
      {...props}
    />
  )
}

function DialogDescription({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
  return (
    <DialogPrimitive.Description
      data-slot="dialog-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

export {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogOverlay,
  DialogPortal,
  DialogTitle,
  DialogTrigger,
}
[V0_FILE]typescriptreact:file="components/ui/input.tsx"
import * as React from 'react'

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

function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
        className,
      )}
      {...props}
    />
  )
}

export { Input }
[V0_FILE]typescriptreact:file="components/ui/label.tsx"
'use client'

import * as React from 'react'
import * as LabelPrimitive from '@radix-ui/react-label'

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

function Label({
  className,
  ...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
  return (
    <LabelPrimitive.Root
      data-slot="label"
      className={cn(
        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
        className,
      )}
      {...props}
    />
  )
}

export { Label }
[V0_FILE]typescriptreact:file="components/ui/progress.tsx"
import { cn } from "@/lib/utils"

interface ProgressProps {
  value?: number
  className?: string
  indicatorClassName?: string
}

export function Progress({ value = 0, className, indicatorClassName }: ProgressProps) {
  return (
    <div className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)}>
      <div className={cn("h-full bg-primary transition-all", indicatorClassName)} style={{ width: `${value}%` }} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/select.tsx"
'use client'

import * as React from 'react'
import * as SelectPrimitive from '@radix-ui/react-select'
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'

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

function Select({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
  return <SelectPrimitive.Root data-slot="select" {...props} />
}

function SelectGroup({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
  return <SelectPrimitive.Group data-slot="select-group" {...props} />
}

function SelectValue({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
  return <SelectPrimitive.Value data-slot="select-value" {...props} />
}

function SelectTrigger({
  className,
  size = 'default',
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
  size?: 'sm' | 'default'
}) {
  return (
    <SelectPrimitive.Trigger
      data-slot="select-trigger"
      data-size={size}
      className={cn(
        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      {children}
      <SelectPrimitive.Icon asChild>
        <ChevronDownIcon className="size-4 opacity-50" />
      </SelectPrimitive.Icon>
    </SelectPrimitive.Trigger>
  )
}

function SelectContent({
  className,
  children,
  position = 'popper',
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
  return (
    <SelectPrimitive.Portal>
      <SelectPrimitive.Content
        data-slot="select-content"
        className={cn(
          'bg-popover text-popover-foreground 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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
          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)] scroll-my-1',
          )}
        >
          {children}
        </SelectPrimitive.Viewport>
        <SelectScrollDownButton />
      </SelectPrimitive.Content>
    </SelectPrimitive.Portal>
  )
}

function SelectLabel({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
  return (
    <SelectPrimitive.Label
      data-slot="select-label"
      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
      {...props}
    />
  )
}

function SelectItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
  return (
    <SelectPrimitive.Item
      data-slot="select-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
        className,
      )}
      {...props}
    >
      <span className="absolute right-2 flex size-3.5 items-center justify-center">
        <SelectPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </SelectPrimitive.ItemIndicator>
      </span>
      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
    </SelectPrimitive.Item>
  )
}

function SelectSeparator({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
  return (
    <SelectPrimitive.Separator
      data-slot="select-separator"
      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
      {...props}
    />
  )
}

function SelectScrollUpButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
  return (
    <SelectPrimitive.ScrollUpButton
      data-slot="select-scroll-up-button"
      className={cn(
        'flex cursor-default items-center justify-center py-1',
        className,
      )}
      {...props}
    >
      <ChevronUpIcon className="size-4" />
    </SelectPrimitive.ScrollUpButton>
  )
}

function SelectScrollDownButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
  return (
    <SelectPrimitive.ScrollDownButton
      data-slot="select-scroll-down-button"
      className={cn(
        'flex cursor-default items-center justify-center py-1',
        className,
      )}
      {...props}
    >
      <ChevronDownIcon className="size-4" />
    </SelectPrimitive.ScrollDownButton>
  )
}

export {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectScrollDownButton,
  SelectScrollUpButton,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
}
[V0_FILE]typescriptreact:file="components/ui/skeleton.tsx"
import type React from "react"
import { cn } from "@/lib/utils"

function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("animate-pulse rounded-md bg-muted", className)} {...props} />
}

export { Skeleton }
[V0_FILE]typescriptreact:file="components/ui/table.tsx"
'use client'

import * as React from 'react'

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

function Table({ className, ...props }: React.ComponentProps<'table'>) {
  return (
    <div
      data-slot="table-container"
      className="relative w-full overflow-x-auto"
    >
      <table
        data-slot="table"
        className={cn('w-full caption-bottom text-sm', className)}
        {...props}
      />
    </div>
  )
}

function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
  return (
    <thead
      data-slot="table-header"
      className={cn('[&_tr]:border-b', className)}
      {...props}
    />
  )
}

function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
  return (
    <tbody
      data-slot="table-body"
      className={cn('[&_tr:last-child]:border-0', className)}
      {...props}
    />
  )
}

function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
  return (
    <tfoot
      data-slot="table-footer"
      className={cn(
        'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
        className,
      )}
      {...props}
    />
  )
}

function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
  return (
    <tr
      data-slot="table-row"
      className={cn(
        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
        className,
      )}
      {...props}
    />
  )
}

function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
  return (
    <th
      data-slot="table-head"
      className={cn(
        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
        className,
      )}
      {...props}
    />
  )
}

function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
  return (
    <td
      data-slot="table-cell"
      className={cn(
        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
        className,
      )}
      {...props}
    />
  )
}

function TableCaption({
  className,
  ...props
}: React.ComponentProps<'caption'>) {
  return (
    <caption
      data-slot="table-caption"
      className={cn('text-muted-foreground mt-4 text-sm', className)}
      {...props}
    />
  )
}

export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
}
[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'

function Tabs({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
  return (
    <TabsPrimitive.Root
      data-slot="tabs"
      className={cn('flex flex-col gap-2', className)}
      {...props}
    />
  )
}

function TabsList({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.List>) {
  return (
    <TabsPrimitive.List
      data-slot="tabs-list"
      className={cn(
        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
        className,
      )}
      {...props}
    />
  )
}

function TabsTrigger({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
  return (
    <TabsPrimitive.Trigger
      data-slot="tabs-trigger"
      className={cn(
        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function TabsContent({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
  return (
    <TabsPrimitive.Content
      data-slot="tabs-content"
      className={cn('flex-1 outline-none', className)}
      {...props}
    />
  )
}

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx"
import * as React from 'react'

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

function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
        className,
      )}
      {...props}
    />
  )
}

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/tooltip.tsx"
'use client'

import * as React from 'react'
import * as TooltipPrimitive from '@radix-ui/react-tooltip'

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

function TooltipProvider({
  delayDuration = 0,
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
  return (
    <TooltipPrimitive.Provider
      data-slot="tooltip-provider"
      delayDuration={delayDuration}
      {...props}
    />
  )
}

function Tooltip({
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
  return (
    <TooltipProvider>
      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
    </TooltipProvider>
  )
}

function TooltipTrigger({
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
}

function TooltipContent({
  className,
  sideOffset = 0,
  children,
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
  return (
    <TooltipPrimitive.Portal>
      <TooltipPrimitive.Content
        data-slot="tooltip-content"
        sideOffset={sideOffset}
        className={cn(
          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
          className,
        )}
        {...props}
      >
        {children}
        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
      </TooltipPrimitive.Content>
    </TooltipPrimitive.Portal>
  )
}

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
[V0_FILE]typescript:file="hooks/use-portfolio-data.ts"
import useSWR from "swr"

const fetcher = (url: string) => fetch(url).then(r => r.json())

// Fallback hardcoded data used when database is empty
const fallbackData = {
  about: {
    title: "Om Prakash Paudel",
    subtitle: "MBA Scholar & Himalayan Trekker Exploring Nepal's Mountains",
    description: "I'm Om Prakash Paudel, a student with a strong academic background in management and a deep personal passion for the mountains. While pursuing my MBA education, trekking has become the space where I test my mindset, discipline, and leadership across Nepal's Himalayan region.",
  },
  skills: [
    { id: 1, name: "Navigation & Route Planning", category: "Trekking & Adventure" },
    { id: 2, name: "High Altitude Trekking", category: "Trekking & Adventure" },
    { id: 3, name: "Wilderness Survival", category: "Trekking & Adventure" },
    { id: 4, name: "Photography", category: "Trekking & Adventure" },
    { id: 5, name: "Team Leadership", category: "Leadership & Teamwork" },
    { id: 6, name: "Decision Making", category: "Leadership & Teamwork" },
    { id: 7, name: "Group Coordination", category: "Leadership & Teamwork" },
    { id: 8, name: "Crisis Management", category: "Leadership & Teamwork" },
    { id: 9, name: "Business Administration", category: "Management & Academic" },
    { id: 10, name: "Organizational Behavior", category: "Management & Academic" },
    { id: 11, name: "Strategic Planning", category: "Management & Academic" },
    { id: 12, name: "Project Management", category: "Management & Academic" },
    { id: 13, name: "Digital Literacy", category: "Digital & Personal Growth" },
    { id: 14, name: "Social Media", category: "Digital & Personal Growth" },
    { id: 15, name: "Adaptability", category: "Digital & Personal Growth" },
    { id: 16, name: "Cultural Awareness", category: "Digital & Personal Growth" },
  ],
  experience: [
    { id: 1, title: "CEO", company: "Aakar Academy", start_date: "Nov 2025", end_date: "", is_current: true, location: "Chitwan, Nepal", description: "Leading Aakar Academy as Chief Executive Officer, driving strategic vision and operational excellence." },
    { id: 2, title: "Head of SARAL", company: "Bitflux Technologies Pvt. Ltd.", start_date: "Oct 2024", end_date: "Sep 2025", is_current: false, location: "Chitwan, Nepal", description: "Led the development and implementation of SARAL, an innovative restaurant management system." },
    { id: 3, title: "Business Development Officer", company: "Bitflux Technologies Pvt. Ltd.", start_date: "Aug 2024", end_date: "Sep 2025", is_current: false, location: "Chitwan, Nepal", description: "Spearheaded business development initiatives to expand the company's market presence." },
    { id: 4, title: "Banking Intern", company: "Muktinath Bikas Bank Limited", start_date: "May 2024", end_date: "Jul 2024", is_current: false, location: "Nepal", description: "Gained comprehensive exposure to banking operations including customer service, account management, and financial analysis." },
  ],
  education: [
    { id: 1, degree: "Master in Business Administration (MBA)", institution: "Boston International College", location: "Bharatpur-10, Nepal", start_date: "2024", end_date: "" },
    { id: 2, degree: "Bachelor in Business Administration (BBA)", institution: "Saptagandaki Multiple Campus", location: "Bharatpur-10, Chitwan", start_date: "2019", end_date: "" },
    { id: 3, degree: "Secondary Level (+2) in Management", institution: "Eden Garden English Secondary School", location: "Bharatpur-10, Chitwan", start_date: "2016", end_date: "" },
    { id: 4, degree: "SLC", institution: "Madi Secondary School", location: "Madi-03, Chitwan", start_date: "SLC", end_date: "" },
  ],
  projects: [],
  achievements: [
    { id: 1, title: "7 Major Treks Completed", description: "Successfully completed treks to iconic destinations across Nepal's Himalayan region." },
    { id: 2, title: "Academic Excellence", description: "Maintaining strong academic performance while pursuing passion for adventure and exploration." },
    { id: 3, title: "Youth Leadership", description: "Recognized for leadership in organizing community events and youth programs." },
    { id: 4, title: "Cultural Ambassador", description: "Promoting Nepali culture and natural heritage through trekking experiences and storytelling." },
  ],
  treks: [
    { id: 1, name: "Annapurna Base Camp", image_url: "/images/abc4.jpeg", description: "Gateway to the Annapurna Sanctuary", altitude: "4,130m", location: "Nepal", difficulty: "Moderate", duration: "10 days" },
    { id: 2, name: "Annapurna North Basecamp", image_url: "/images/annapurna-20north-20basecamp.jpg", description: "Remote and less-explored route to the north face", altitude: "4,190m", location: "Nepal", difficulty: "Difficult", duration: "12 days" },
    { id: 3, name: "Mardi Himal", image_url: "/images/mardi-himal2.jpeg", description: "Scenic alternative to ABC with dramatic views", altitude: "4,500m", location: "Nepal", difficulty: "Moderate", duration: "7 days" },
    { id: 4, name: "Gosainkunda", image_url: "/images/gosainkunda.jpeg", description: "Sacred lake at high altitude", altitude: "4,380m", location: "Nepal", difficulty: "Moderate", duration: "7 days" },
    { id: 5, name: "Poon Hill", image_url: "/images/poon-hill.jpeg", description: "Classic sunrise viewpoint", altitude: "3,210m", location: "Nepal", difficulty: "Easy", duration: "4 days" },
    { id: 6, name: "Tilicho Lake", image_url: "/images/tilicho.jpeg", description: "One of the highest lakes in the world", altitude: "4,919m", location: "Nepal", difficulty: "Difficult", duration: "14 days" },
    { id: 7, name: "Khumai Danda", image_url: "/images/khumai-danda.jpeg", description: "Panoramic viewpoint in Kaski", altitude: "3,245m", location: "Nepal", difficulty: "Easy", duration: "3 days" },
  ],
}

export function usePortfolioData() {
  const { data, error, isLoading } = useSWR("/api/portfolio", fetcher, {
    fallbackData,
    revalidateOnFocus: false,
    dedupingInterval: 60000,
  })

// Merge: use DB data when available, fall back to hardcoded
  return {
    about: data?.about || fallbackData.about,
    skills: data?.skills?.length ? data.skills : fallbackData.skills,
    experience: data?.experience?.length ? data.experience : fallbackData.experience,
    education: data?.education?.length ? data.education : fallbackData.education,
    projects: data?.projects?.length ? data.projects : fallbackData.projects,
    achievements: data?.achievements?.length ? data.achievements : fallbackData.achievements,
    treks: data?.treks?.length ? data.treks : fallbackData.treks,
    isLoading,
    error,
  }
}
[V0_FILE]typescript:file="lib/actions.ts"
export async function sendEmail(formData: FormData) {
  const name = formData.get("name") as string
  const email = formData.get("email") as string
  const message = formData.get("message") as string

// TODO: Implement email sending logic here
  // You can use a service like SendGrid, Nodemailer, etc.
  console.log("Sending email:", { name, email, message })

// Redirect to a thank you page
  // redirect("/thank-you")
}
[V0_FILE]typescript:file="lib/admin-actions.ts"
"use server"

import { sql } from "./db"
import { getSession } from "./auth"
import { revalidatePath } from "next/cache"

// Helper to check auth in server actions
async function checkAuth() {
  const session = await getSession()
  if (!session) throw new Error("Unauthorized")
  return session
}

export async function addTrek(formData: FormData) {
  await checkAuth()

const name = formData.get("name") as string
  const elevation = formData.get("elevation") as string
  // ... other fields

await sql`
    INSERT INTO treks (name, elevation, ...)
    VALUES (${name}, ${elevation}, ...)
  `

revalidatePath("/")
  revalidatePath("/admin/treks")
}

export async function deleteTrek(id: string) {
  await checkAuth()
  await sql`DELETE FROM treks WHERE id = ${id}`
  revalidatePath("/")
  revalidatePath("/admin/treks")
}
[V0_FILE]typescript:file="lib/admin-server-actions.ts"
'use server'

import { cookies } from 'next/headers'
import { decrypt } from './auth'

// Get admin session
export async function getAdminSession() {
  try {
    const cookieStore = await cookies()
    const session = cookieStore.get('session')?.value
    if (!session) return null
    
    const decrypted = await decrypt(session)
    if (decrypted?.user?.email === 'paudelg97@gmail.com') {
      return decrypted.user
    }
    return null
  } catch (error) {
    console.error('Session error:', error)
    return null
  }
}

// Fetch skills
export async function fetchSkills() {
  try {
    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL || ''}/api/admin/skills`, {
      cache: 'no-store'
    })
    return response.json()
  } catch (error) {
    console.error('Error fetching skills:', error)
    return []
  }
}

// Fetch experience
export async function fetchExperience() {
  try {
    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL || ''}/api/admin/experience`, {
      cache: 'no-store'
    })
    return response.json()
  } catch (error) {
    console.error('Error fetching experience:', error)
    return []
  }
}

// Fetch projects
export async function fetchProjects() {
  try {
    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL || ''}/api/admin/projects`, {
      cache: 'no-store'
    })
    return response.json()
  } catch (error) {
    console.error('Error fetching projects:', error)
    return []
  }
}

// Fetch achievements
export async function fetchAchievements() {
  try {
    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL || ''}/api/admin/achievements`, {
      cache: 'no-store'
    })
    return response.json()
  } catch (error) {
    console.error('Error fetching achievements:', error)
    return []
  }
}

// Fetch education
export async function fetchEducation() {
  try {
    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL || ''}/api/admin/education`, {
      cache: 'no-store'
    })
    return response.json()
  } catch (error) {
    console.error('Error fetching education:', error)
    return []
  }
}

// Fetch about section
export async function fetchAboutSection() {
  try {
    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL || ''}/api/admin/about`, {
      cache: 'no-store'
    })
    return response.json()
  } catch (error) {
    console.error('Error fetching about section:', error)
    return null
  }
}
[V0_FILE]typescript:file="lib/auth.ts"
import { SignJWT, jwtVerify } from "jose"
import { cookies } from "next/headers"
import { type NextRequest, NextResponse } from "next/server"

const secretKey = process.env.JWT_SECRET || "secret-key-for-himalayan-navigator"
const key = new TextEncoder().encode(secretKey)

export async function encrypt(payload: any) {
  return await new SignJWT(payload)
    .setProtectedHeader({ alg: "HS256" })
    .setIssuedAt()
    .setExpirationTime("24h")
    .sign(key)
}

export async function decrypt(input: string): Promise<any> {
  const { payload } = await jwtVerify(input, key, {
    algorithms: ["HS256"],
  })
  return payload
}

export async function login(formData: FormData) {
  // Verify credentials and create the session
  const user = { email: formData.get("email"), name: "John Doe" }

// Create the session
  const expires = new Date(Date.now() + 24 * 60 * 60 * 1000)
  const session = await encrypt({ user, expires })

// Save the session in a cookie
  cookies().set("session", session, { expires, httpOnly: true })
}

export async function logout() {
  // Destroy the session
  cookies().set("session", "", { expires: new Date(0) })
}

export async function getSession() {
  const session = cookies().get("session")?.value
  if (!session) return null
  return await decrypt(session)
}

export async function updateSession(request: NextRequest) {
  const session = request.cookies.get("session")?.value
  if (!session) return

// Refresh the session so it doesn't expire
  const parsed = await decrypt(session)
  parsed.expires = new Date(Date.now() + 24 * 60 * 60 * 1000)
  const res = NextResponse.next()
  res.cookies.set({
    name: "session",
    value: await encrypt(parsed),
    httpOnly: true,
    expires: parsed.expires,
  })
  return res
}
[V0_FILE]typescript:file="lib/db.ts"
import { neon } from "@neondatabase/serverless"

if (!process.env.DATABASE_URL) {
  throw new Error("DATABASE_URL is not defined")
}

export const sql = neon(process.env.DATABASE_URL)
[V0_FILE]typescript:file="lib/fetch-dynamic-content.ts"
// Utility functions to fetch dynamic content from API

export async function getAboutContent() {
  try {
    const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL || ''}/api/admin/about`, {
      cache: 'no-store',
    })
    return res.json()
  } catch (error) {
    console.error('Error fetching about content:', error)
    return null
  }
}

export async function getSkillsContent() {
  try {
    const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL || ''}/api/admin/skills`, {
      cache: 'no-store',
    })
    return res.json()
  } catch (error) {
    console.error('Error fetching skills:', error)
    return []
  }
}

export async function getExperienceContent() {
  try {
    const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL || ''}/api/admin/experience`, {
      cache: 'no-store',
    })
    return res.json()
  } catch (error) {
    console.error('Error fetching experience:', error)
    return []
  }
}

export async function getEducationContent() {
  try {
    const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL || ''}/api/admin/education`, {
      cache: 'no-store',
    })
    return res.json()
  } catch (error) {
    console.error('Error fetching education:', error)
    return []
  }
}

export async function getProjectsContent() {
  try {
    const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL || ''}/api/admin/projects`, {
      cache: 'no-store',
    })
    return res.json()
  } catch (error) {
    console.error('Error fetching projects:', error)
    return []
  }
}

export async function getAchievementsContent() {
  try {
    const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL || ''}/api/admin/achievements`, {
      cache: 'no-store',
    })
    return res.json()
  } catch (error) {
    console.error('Error fetching achievements:', error)
    return []
  }
}
[V0_FILE]typescript:file="lib/nepali-date-converter.ts"
// Accurate Nepali Date Conversion Utilities
// Based on verified conversion algorithms and reference points

interface NepaliDate {
  year: number
  month: number
  day: number
  monthName: string
  dayName?: string
}

interface EnglishDate {
  year: number
  month: number
  day: number
  monthName: string
  dayName?: string
}

// Nepali month names
export const nepaliMonths = [
  "Baishakh",
  "Jestha",
  "Ashadh",
  "Shrawan",
  "Bhadra",
  "Ashwin",
  "Kartik",
  "Mangsir",
  "Poush",
  "Magh",
  "Falgun",
  "Chaitra",
]

// English month names
export const englishMonths = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
]

// Day names
export const nepaliDays = ["Aaitabar", "Sombar", "Mangalbar", "Budhabar", "Bihibar", "Shukrabar", "Shanibar"]
export const englishDays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

// Accurate Nepali calendar data with verified month lengths
const nepaliCalendarData: { [year: number]: number[] } = {
  2000: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31],
  2001: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30],
  2002: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30],
  2003: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31],
  2004: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31],
  2005: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30],
  2006: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30],
  2007: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31],
  2008: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31],
  2009: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30],
  2010: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30],
  2011: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31],
  2012: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31],
  2013: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30],
  2014: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30],
  2015: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31],
  2016: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31],
  2017: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30],
  2018: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30],
  2019: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31],
  2020: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31],
  2021: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30],
  2022: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30],
  2023: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31],
  2024: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31],
  2025: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30],
  2026: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30],
  2027: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31],
  2028: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31],
  2029: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30],
  2030: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30],
  2031: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31],
  2032: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31],
  2033: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30],
  2034: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30],
  2035: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31],
  2036: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31],
  2037: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30],
  2038: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30],
  2039: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31],
  2040: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31],
  2041: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30],
  2042: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30],
  2043: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31],
  2044: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31],
  2045: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30],
  2046: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30],
  2047: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31],
  2048: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31],
  2049: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30],
  2050: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30],
  2051: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31],
  2052: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31],
  2053: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30],
  2054: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30],
  2055: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31],
  2056: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31],
  2057: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30],
  2058: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30],
  2059: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31],
  2060: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31],
  2061: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30],
  2062: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30],
  2063: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31],
  2064: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31],
  2065: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30],
  2066: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30],
  2067: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31],
  2068: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31],
  2069: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30],
  2070: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30],
  2071: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31],
  2072: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31],
  2073: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30],
  2074: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30],
  2075: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31],
  2076: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31],
  2077: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30],
  2078: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30],
  2079: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31],
  2080: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31],
  2081: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30],
  2082: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30],
  2083: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31],
  2084: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31],
  2085: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30],
  2086: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30],
  2087: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31],
  2088: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31],
  2089: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30],
  2090: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30],
  2091: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31],
  2092: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31],
  2093: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30],
  2094: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30],
  2095: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31],
  2096: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31],
  2097: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30],
  2098: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30],
  2099: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31],
  2100: [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31],
}

// Known accurate reference point: 1st Baishakh 2000 BS = 13th April 1943 AD
const REFERENCE_BS = { year: 2000, month: 1, day: 1 }
const REFERENCE_AD = { year: 1943, month: 4, day: 13 }

// Calculate total days in BS from reference point
function getTotalDaysFromBSReference(bsYear: number, bsMonth: number, bsDay: number): number {
  let totalDays = 0

// Add days for complete years
  for (let year = REFERENCE_BS.year; year < bsYear; year++) {
    const monthDays = nepaliCalendarData[year] || getDefaultNepaliMonths()
    totalDays += monthDays.reduce((sum, days) => sum + days, 0)
  }

// Add days for complete months in the target year
  const targetYearMonths = nepaliCalendarData[bsYear] || getDefaultNepaliMonths()
  for (let month = 1; month < bsMonth; month++) {
    totalDays += targetYearMonths[month - 1]
  }

// Add remaining days
  totalDays += bsDay - REFERENCE_BS.day

return totalDays
}

// Calculate total days in AD from reference point
function getTotalDaysFromADReference(adYear: number, adMonth: number, adDay: number): number {
  let totalDays = 0

// Add days for complete years
  for (let year = REFERENCE_AD.year; year < adYear; year++) {
    totalDays += isLeapYear(year) ? 366 : 365
  }

// Add days for complete months in the target year
  for (let month = 1; month < adMonth; month++) {
    totalDays += getDaysInEnglishMonth(adYear, month)
  }

// Add remaining days
  totalDays += adDay - REFERENCE_AD.day

return totalDays
}

function getDefaultNepaliMonths(): number[] {
  return [30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31]
}

function isLeapYear(year: number): boolean {
  return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0
}

function getDaysInEnglishMonth(year: number, month: number): number {
  const daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
  if (month === 2 && isLeapYear(year)) {
    return 29
  }
  return daysInMonth[month - 1]
}

// Convert BS to AD using proper algorithm
export function convertBSToAD(bsYear: number, bsMonth: number, bsDay: number): EnglishDate {
  try {
    // Validate input
    if (bsYear < 2000 || bsYear > 2100) {
      throw new Error("Year must be between 2000 and 2100 BS")
    }
    if (bsMonth < 1 || bsMonth > 12) {
      throw new Error("Month must be between 1 and 12")
    }

const monthsInYear = nepaliCalendarData[bsYear] || getDefaultNepaliMonths()
    if (bsDay < 1 || bsDay > monthsInYear[bsMonth - 1]) {
      throw new Error(
        `Day must be between 1 and ${monthsInYear[bsMonth - 1]} for ${nepaliMonths[bsMonth - 1]} ${bsYear}`,
      )
    }

// Calculate days from BS reference
    const daysDiff = getTotalDaysFromBSReference(bsYear, bsMonth, bsDay)

// Convert to AD date
    const referenceDate = new Date(REFERENCE_AD.year, REFERENCE_AD.month - 1, REFERENCE_AD.day)
    referenceDate.setDate(referenceDate.getDate() + daysDiff)

const dayOfWeek = referenceDate.getDay()

return {
      year: referenceDate.getFullYear(),
      month: referenceDate.getMonth() + 1,
      day: referenceDate.getDate(),
      monthName: englishMonths[referenceDate.getMonth()],
      dayName: englishDays[dayOfWeek],
    }
  } catch (error) {
    throw new Error(`BS to AD conversion error: ${error instanceof Error ? error.message : "Unknown error"}`)
  }
}

// Convert AD to BS using proper algorithm
export function convertADToBS(adYear: number, adMonth: number, adDay: number): NepaliDate {
  try {
    // Validate input
    if (adYear < 1943 || adYear > 2043) {
      throw new Error("Year must be between 1943 and 2043 AD")
    }
    if (adMonth < 1 || adMonth > 12) {
      throw new Error("Month must be between 1 and 12")
    }
    if (adDay < 1 || adDay > getDaysInEnglishMonth(adYear, adMonth)) {
      throw new Error(
        `Day must be between 1 and ${getDaysInEnglishMonth(adYear, adMonth)} for ${englishMonths[adMonth - 1]} ${adYear}`,
      )
    }

// Calculate days from AD reference
    const daysDiff = getTotalDaysFromADReference(adYear, adMonth, adDay)

// Convert to BS date
    let currentYear = REFERENCE_BS.year
    let currentMonth = REFERENCE_BS.month
    let remainingDays = daysDiff

// Handle negative days (dates before reference)
    if (remainingDays < 0) {
      remainingDays = Math.abs(remainingDays)

// Go backwards
      while (remainingDays > 0) {
        currentMonth--
        if (currentMonth < 1) {
          currentMonth = 12
          currentYear--
        }

const monthDays = nepaliCalendarData[currentYear]?.[currentMonth - 1] || 30
        if (remainingDays >= monthDays) {
          remainingDays -= monthDays
        } else {
          break
        }
      }

const currentDay = monthDays - remainingDays + 1

const adDate = new Date(adYear, adMonth - 1, adDay)
      const dayOfWeek = adDate.getDay()

return {
        year: currentYear,
        month: currentMonth,
        day: currentDay,
        monthName: nepaliMonths[currentMonth - 1],
        dayName: nepaliDays[dayOfWeek],
      }
    }

// Handle positive days (dates after reference)
    let currentDay = REFERENCE_BS.day + remainingDays

while (true) {
      const monthDays = nepaliCalendarData[currentYear]?.[currentMonth - 1] || 30

if (currentDay <= monthDays) {
        break
      }

currentDay -= monthDays
      currentMonth++

if (currentMonth > 12) {
        currentMonth = 1
        currentYear++
      }
    }

const adDate = new Date(adYear, adMonth - 1, adDay)
    const dayOfWeek = adDate.getDay()

return {
      year: currentYear,
      month: currentMonth,
      day: currentDay,
      monthName: nepaliMonths[currentMonth - 1],
      dayName: nepaliDays[dayOfWeek],
    }
  } catch (error) {
    throw new Error(`AD to BS conversion error: ${error instanceof Error ? error.message : "Unknown error"}`)
  }
}

// Format date for display
export function formatNepaliDate(date: NepaliDate): string {
  return `${date.day} ${date.monthName} ${date.year} BS (${date.dayName})`
}

export function formatEnglishDate(date: EnglishDate): string {
  return `${date.day} ${date.monthName} ${date.year} AD (${date.dayName})`
}

// Get current Nepali date
export function getCurrentNepaliDate(): NepaliDate {
  const today = new Date()
  return convertADToBS(today.getFullYear(), today.getMonth() + 1, today.getDate())
}

// Get current English date
export function getCurrentEnglishDate(): EnglishDate {
  const today = new Date()
  const dayOfWeek = today.getDay()

return {
    year: today.getFullYear(),
    month: today.getMonth() + 1,
    day: today.getDate(),
    monthName: englishMonths[today.getMonth()],
    dayName: englishDays[dayOfWeek],
  }
}

// Helper function to get year range info
export function getYearRangeInfo() {
  return {
    ad: { min: 1943, max: 2043 },
    bs: { min: 2000, max: 2100 },
    description: "Supports dates from 1943-2043 AD (2000-2100 BS)",
  }
}

// Helper function to validate year
export function isValidYear(year: number, calendar: "AD" | "BS"): boolean {
  if (calendar === "AD") {
    return year >= 1943 && year <= 2043
  } else {
    return year >= 2000 && year <= 2100
  }
}

// Helper function to get days in BS month
export function getDaysInBSMonth(year: number, month: number): number {
  const monthsInYear = nepaliCalendarData[year] || getDefaultNepaliMonths()
  return monthsInYear[month - 1] || 30
}
[V0_FILE]typescript:file="lib/projects-data.ts"
export const projectsData = [
  {
    id: 1,
    title: "Glabs - Strategic Intelligence Platform",
    description:
      "A professional consulting platform delivering strategic intelligence tools and career intelligence tests. Built with modern design principles and consulting-grade business frameworks.",
    category: "Assessment Website",
    technologies: ["Next.js", "React", "Tailwind CSS", "TypeScript", "Teal Branding"],
    image: "/images/screenshot-202026-01-08-20120110.png",
    link: "https://omprakashpaudelgaurav.com.np",
    github: "#",
    status: "Live",
    year: "2025",
    highlights: [
      "Strategic decision-making tools",
      "Psychometric assessments",
      "Professional consulting framework",
      "Clean, modern interface",
    ],
  },
  {
    id: 2,
    title: "Aakar Academy Website",
    description:
      "A comprehensive educational platform featuring course catalogs, student enrollment, progress tracking, and instructor dashboards. Dark-themed with vibrant green accents and modern pedagogical design.",
    category: "Institutes Website",
    technologies: ["Next.js", "React", "Tailwind CSS", "TypeScript", "PostgreSQL"],
    image: "/images/screenshot-202026-01-08-20120115.png",
    link: "https://v0-aakar-academy-website-ashen.vercel.app/",
    github: "#",
    status: "Live",
    year: "2024",
    highlights: [
      "Dark theme with neon green accents",
      "Integrated enrollment system",
      "Course management and tracking",
      "Hero-driven educational marketing",
    ],
  },
  {
    id: 3,
    title: "Personal Portfolio Website",
    description:
      "An interactive portfolio showcasing trekking expeditions, academic achievements, and professional experience. Features dynamic project management with admin dashboard and psychometric assessments.",
    category: "Personal Portfolio",
    technologies: ["Next.js 16", "React 19", "Tailwind CSS v4", "Neon DB", "TypeScript"],
    image: "/images/personal-portfolio-hero.jpeg",
    link: "https://omgaurav.com.np",
    github: "#",
    status: "Live",
    year: "2024",
    highlights: [
      "Admin dashboard for content management",
      "Interactive trek portfolio with live previews",
      "Big Five personality test integration",
      "Glass morphism and cinematic design",
    ],
  },
]

export const projectCategories = ["All", "Assessment Website", "Institutes Website", "Personal Portfolio"]
[V0_FILE]typescript:file="lib/utils.ts"
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]javascript:file="next.config.mjs"
/** @type {import('next').NextConfig} */
const nextConfig = {
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
  redirects: async () => {
    return [
      // For SEO migration, handle redirects from old domain at the hosting/DNS level
      // Do NOT use next.config redirects as they cause infinite loops when redirecting to the same domain
    ]
  },
  rewrites: async () => {
    return {
      beforeFiles: [],
      afterFiles: [],
      fallback: [],
    }
  },
}

export default nextConfig
[V0_FILE]json:file="package.json"
{
  "name": "portfolio",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "next lint",
    "start": "next start"
  },
  "dependencies": {
    "@ai-sdk/openai": "^0.0.66",
    "@emotion/is-prop-valid": "latest",
    "@neondatabase/serverless": "1.0.2",
    "@radix-ui/react-accordion": "^1.2.1",
    "@radix-ui/react-alert-dialog": "^1.1.2",
    "@radix-ui/react-avatar": "^1.1.1",
    "@radix-ui/react-dialog": "^1.1.2",
    "@radix-ui/react-dropdown-menu": "^2.1.2",
    "@radix-ui/react-label": "^2.1.7",
    "@radix-ui/react-progress": "^1.1.0",
    "@radix-ui/react-scroll-area": "^1.2.0",
    "@radix-ui/react-select": "^2.1.2",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-tabs": "^1.1.1",
    "@radix-ui/react-toast": "^1.2.2",
    "@radix-ui/react-tooltip": "^1.1.3",
    "ai": "^3.4.32",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "framer-motion": "^11.11.17",
    "jose": "6.1.3",
    "lucide-react": "^0.454.0",
    "next": "16.0.10",
    "next-themes": "^0.4.3",
    "openai": "latest",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "recharts": "^2.13.3",
    "sswr": "latest",
    "swr": "2.4.0",
    "tailwind-merge": "^2.5.4",
    "tailwindcss-animate": "1.0.7",
    "ws": "latest",
    "zod": "latest"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^20.17.6",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "eslint": "^8.57.1",
    "eslint-config-next": "16.0.10",
    "postcss": "8.5.6",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "^1.2.0",
    "typescript": "^5.6.3"
  }
}
[V0_FILE]javascript:file="postcss.config.mjs"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}

export default config
[V0_FILE]typescript:file="proxy.ts"
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"

export default function middleware(_request: NextRequest) {
  return NextResponse.next()
}
[V0_FILE]json:file="public/manifest.json"
{
  "name": "Om Prakash Paudel (Gaurav) - Portfolio",
  "short_name": "Gaurav Portfolio",
  "description": "Marketing Professional & Trek Enthusiast - MBA Student with expertise in business development and digital transformation",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#3b82f6",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "categories": ["business", "portfolio", "education"],
  "lang": "en",
  "dir": "ltr"
}
[V0_FILE]plaintext:file="public/robots.txt"
User-agent: *
Allow: /
Disallow: /admin/
Disallow: /api/

Sitemap: https://omgaurav.com.np/sitemap.xml

# Allow Google and Bing to crawl
User-agent: Googlebot
Allow: /

User-agent: Bingbot
Allow: /
[V0_FILE]sql:file="scripts/01-setup-schema.sql"
-- Create users table for admin authentication
CREATE TABLE IF NOT EXISTS users (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  email TEXT UNIQUE NOT NULL,
  password_hash TEXT NOT NULL,
  role TEXT NOT NULL DEFAULT 'admin',
  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- Create treks table for dynamic management
CREATE TABLE IF NOT EXISTS treks (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT NOT NULL,
  image_url TEXT,
  description TEXT,
  elevation TEXT,
  experience TEXT,
  district TEXT,
  region TEXT,
  difficulty TEXT,
  order_index INTEGER DEFAULT 0,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- Create content_sections table for home page content
CREATE TABLE IF NOT EXISTS content_sections (
  id TEXT PRIMARY KEY, -- e.g., 'about', 'hero'
  title TEXT,
  content JSONB,
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- Create messages table for contact form submissions
CREATE TABLE IF NOT EXISTS messages (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT NOT NULL,
  email TEXT NOT NULL,
  subject TEXT,
  message TEXT NOT NULL,
  status TEXT DEFAULT 'unread',
  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);
[V0_FILE]sql:file="scripts/02-seed-admin.sql"
-- Seed the super admin user
-- NOTE: We will use a pre-hashed password for "Hbvsc2000gg#"
-- Hashed using bcrypt (10 rounds): $2b$10$vYv6eYm4L8i2wL6eL8i2u.z.m9O6u9O6u9O6u9O6u9O6u9O6u9O6u
-- Since I can't run bcrypt here, I'll use a placeholder that we'll handle in the auth logic or via a server action script
INSERT INTO users (email, password_hash, role)
VALUES ('Paudelg97@gmail.com', '$2b$10$fV2.X9zF5.K9QzJ.M8N8.u5Yy6Zz7AaBbCcDdEeFfGgHhIiJjKkLl', 'super_admin')
ON CONFLICT (email) DO NOTHING;
[V0_FILE]sql:file="scripts/03-content-management-schema.sql"
-- Portfolio Content Management Schema

-- About Me Section
CREATE TABLE IF NOT EXISTS about_sections (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  title TEXT NOT NULL,
  description TEXT NOT NULL,
  bio_text TEXT NOT NULL,
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT now(),
  updated_by UUID REFERENCES users(id)
);

-- Skills Management
CREATE TABLE IF NOT EXISTS portfolio_skills (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT NOT NULL,
  category TEXT NOT NULL,
  proficiency_level TEXT,
  order_index INTEGER,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT now(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT now(),
  updated_by UUID REFERENCES users(id)
);

-- Experience Management
CREATE TABLE IF NOT EXISTS portfolio_experience (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  title TEXT NOT NULL,
  company TEXT NOT NULL,
  period TEXT NOT NULL,
  location TEXT NOT NULL,
  description TEXT NOT NULL,
  order_index INTEGER,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT now(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT now(),
  updated_by UUID REFERENCES users(id)
);

-- Projects Management
CREATE TABLE IF NOT EXISTS portfolio_projects (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  title TEXT NOT NULL,
  description TEXT NOT NULL,
  image_url TEXT,
  technologies TEXT[],
  highlights TEXT[],
  live_url TEXT,
  github_url TEXT,
  category TEXT,
  order_index INTEGER,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT now(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT now(),
  updated_by UUID REFERENCES users(id)
);

-- Achievements Management
CREATE TABLE IF NOT EXISTS portfolio_achievements (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  title TEXT NOT NULL,
  description TEXT NOT NULL,
  icon_name TEXT,
  order_index INTEGER,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT now(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT now(),
  updated_by UUID REFERENCES users(id)
);

-- Education Management
CREATE TABLE IF NOT EXISTS portfolio_education (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  year TEXT NOT NULL,
  degree TEXT NOT NULL,
  school TEXT NOT NULL,
  location TEXT NOT NULL,
  order_index INTEGER,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT now(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT now(),
  updated_by UUID REFERENCES users(id)
);

-- Resume Documents
CREATE TABLE IF NOT EXISTS portfolio_resumes (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  title TEXT NOT NULL,
  file_url TEXT NOT NULL,
  file_size INTEGER,
  is_active BOOLEAN DEFAULT false,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT now(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT now(),
  updated_by UUID REFERENCES users(id)
);

-- Create indexes for better query performance
CREATE INDEX idx_portfolio_skills_category ON portfolio_skills(category);
CREATE INDEX idx_portfolio_experience_order ON portfolio_experience(order_index);
CREATE INDEX idx_portfolio_projects_category ON portfolio_projects(category);
CREATE INDEX idx_portfolio_achievements_order ON portfolio_achievements(order_index);
CREATE INDEX idx_portfolio_education_order ON portfolio_education(order_index);
CREATE INDEX idx_portfolio_resumes_active ON portfolio_resumes(is_active);

-- Grant permissions to authenticated users
GRANT SELECT ON portfolio_skills, portfolio_experience, portfolio_projects, portfolio_achievements, portfolio_education, portfolio_resumes, about_sections TO authenticated;
GRANT SELECT, INSERT, UPDATE, DELETE ON portfolio_skills, portfolio_experience, portfolio_projects, portfolio_achievements, portfolio_education, portfolio_resumes, about_sections TO authenticated;
[V0_FILE]sql:file="scripts/04-fresh-admin-schema.sql"
-- Drop old content tables if they exist
DROP TABLE IF EXISTS portfolio_about CASCADE;
DROP TABLE IF EXISTS portfolio_skills CASCADE;
DROP TABLE IF EXISTS portfolio_experience CASCADE;
DROP TABLE IF EXISTS portfolio_education CASCADE;
DROP TABLE IF EXISTS portfolio_projects CASCADE;
DROP TABLE IF EXISTS portfolio_achievements CASCADE;
DROP TABLE IF EXISTS portfolio_treks CASCADE;
DROP TABLE IF EXISTS admin_users CASCADE;

-- Admin users table
CREATE TABLE admin_users (
  id SERIAL PRIMARY KEY,
  username TEXT UNIQUE NOT NULL,
  password TEXT NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- About section
CREATE TABLE portfolio_about (
  id SERIAL PRIMARY KEY,
  title TEXT NOT NULL DEFAULT '',
  description TEXT NOT NULL DEFAULT '',
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Skills
CREATE TABLE portfolio_skills (
  id SERIAL PRIMARY KEY,
  name TEXT NOT NULL,
  category TEXT NOT NULL DEFAULT 'General',
  proficiency INTEGER DEFAULT 80,
  sort_order INTEGER DEFAULT 0,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Work Experience
CREATE TABLE portfolio_experience (
  id SERIAL PRIMARY KEY,
  title TEXT NOT NULL,
  company TEXT NOT NULL,
  location TEXT DEFAULT '',
  start_date TEXT NOT NULL,
  end_date TEXT DEFAULT 'Present',
  description TEXT DEFAULT '',
  sort_order INTEGER DEFAULT 0,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Education
CREATE TABLE portfolio_education (
  id SERIAL PRIMARY KEY,
  degree TEXT NOT NULL,
  institution TEXT NOT NULL,
  location TEXT DEFAULT '',
  start_date TEXT NOT NULL,
  end_date TEXT DEFAULT '',
  description TEXT DEFAULT '',
  sort_order INTEGER DEFAULT 0,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Projects & Experiments
CREATE TABLE portfolio_projects (
  id SERIAL PRIMARY KEY,
  title TEXT NOT NULL,
  description TEXT DEFAULT '',
  category TEXT DEFAULT 'Web App',
  tech_stack TEXT DEFAULT '',
  image_url TEXT DEFAULT '',
  live_url TEXT DEFAULT '',
  github_url TEXT DEFAULT '',
  highlights TEXT DEFAULT '',
  sort_order INTEGER DEFAULT 0,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Achievements
CREATE TABLE portfolio_achievements (
  id SERIAL PRIMARY KEY,
  title TEXT NOT NULL,
  description TEXT DEFAULT '',
  date_achieved TEXT DEFAULT '',
  icon TEXT DEFAULT 'Award',
  sort_order INTEGER DEFAULT 0,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Trek Portfolio
CREATE TABLE portfolio_treks (
  id SERIAL PRIMARY KEY,
  name TEXT NOT NULL,
  description TEXT DEFAULT '',
  region TEXT DEFAULT '',
  district TEXT DEFAULT '',
  elevation TEXT DEFAULT '',
  difficulty TEXT DEFAULT 'Moderate',
  experience TEXT DEFAULT '',
  image_url TEXT DEFAULT '',
  sort_order INTEGER DEFAULT 0,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Insert admin user (username: paudelg97, password: Hbvsc2000gg#)
INSERT INTO admin_users (username, password) 
VALUES ('paudelg97', 'Hbvsc2000gg#')
ON CONFLICT (username) DO UPDATE SET password = 'Hbvsc2000gg#';
[V0_FILE]sql:file="scripts/05-seed-admin-user.sql"
INSERT INTO admin_users (username, password)
VALUES ('paudelg97', 'Hbvsc2000gg#')
ON CONFLICT (username) DO NOTHING;
[V0_FILE]sql:file="scripts/06-verify-and-create-tables.sql"
-- Drop old tables that may have wrong schema
DROP TABLE IF EXISTS portfolio_about CASCADE;
DROP TABLE IF EXISTS portfolio_skills CASCADE;
DROP TABLE IF EXISTS portfolio_experience CASCADE;
DROP TABLE IF EXISTS portfolio_education CASCADE;
DROP TABLE IF EXISTS portfolio_projects CASCADE;
DROP TABLE IF EXISTS portfolio_achievements CASCADE;
DROP TABLE IF EXISTS portfolio_treks CASCADE;

-- Create fresh tables with correct columns
CREATE TABLE portfolio_about (
  id SERIAL PRIMARY KEY,
  title TEXT NOT NULL DEFAULT '',
  subtitle TEXT NOT NULL DEFAULT '',
  description TEXT NOT NULL DEFAULT '',
  image_url TEXT,
  updated_at TIMESTAMP DEFAULT NOW()
);

CREATE TABLE portfolio_skills (
  id SERIAL PRIMARY KEY,
  name TEXT NOT NULL,
  category TEXT NOT NULL DEFAULT 'Technical',
  proficiency INTEGER DEFAULT 80,
  sort_order INTEGER DEFAULT 0
);

CREATE TABLE portfolio_experience (
  id SERIAL PRIMARY KEY,
  title TEXT NOT NULL,
  company TEXT NOT NULL,
  location TEXT,
  start_date TEXT,
  end_date TEXT,
  description TEXT,
  is_current BOOLEAN DEFAULT false,
  sort_order INTEGER DEFAULT 0
);

CREATE TABLE portfolio_education (
  id SERIAL PRIMARY KEY,
  degree TEXT NOT NULL,
  institution TEXT NOT NULL,
  location TEXT,
  start_date TEXT,
  end_date TEXT,
  description TEXT,
  sort_order INTEGER DEFAULT 0
);

CREATE TABLE portfolio_projects (
  id SERIAL PRIMARY KEY,
  title TEXT NOT NULL,
  description TEXT,
  category TEXT,
  tech_stack TEXT,
  image_url TEXT,
  live_url TEXT,
  github_url TEXT,
  status TEXT DEFAULT 'completed',
  sort_order INTEGER DEFAULT 0
);

CREATE TABLE portfolio_achievements (
  id SERIAL PRIMARY KEY,
  title TEXT NOT NULL,
  description TEXT,
  date_achieved TEXT,
  icon TEXT,
  sort_order INTEGER DEFAULT 0
);

CREATE TABLE portfolio_treks (
  id SERIAL PRIMARY KEY,
  name TEXT NOT NULL,
  location TEXT,
  altitude TEXT,
  duration TEXT,
  difficulty TEXT,
  description TEXT,
  image_url TEXT,
  date_completed TEXT,
  sort_order INTEGER DEFAULT 0
);
[V0_FILE]sql:file="scripts/07-seed-existing-content.sql"
-- Seed About
INSERT INTO portfolio_about (title, subtitle, description, image_url) VALUES
('Om Prakash Paudel', 'MBA Scholar & Himalayan Trekker Exploring Nepal''s Mountains', 'I''m Om Prakash Paudel, a student with a strong academic background in management and a deep personal passion for the mountains. While pursuing my MBA education, trekking has become the space where I test my mindset, discipline, and leadership across Nepal''s Himalayan region.', '/images/abc4.jpeg')
ON CONFLICT DO NOTHING;

-- Seed Skills
INSERT INTO portfolio_skills (name, category, proficiency, sort_order) VALUES
('Navigation & Route Planning', 'Trekking & Adventure', 90, 1),
('High Altitude Trekking', 'Trekking & Adventure', 95, 2),
('Wilderness Survival', 'Trekking & Adventure', 85, 3),
('Photography', 'Trekking & Adventure', 80, 4),
('Team Leadership', 'Leadership & Teamwork', 90, 5),
('Decision Making', 'Leadership & Teamwork', 88, 6),
('Group Coordination', 'Leadership & Teamwork', 85, 7),
('Crisis Management', 'Leadership & Teamwork', 82, 8),
('Business Administration', 'Management & Academic', 90, 9),
('Organizational Behavior', 'Management & Academic', 85, 10),
('Strategic Planning', 'Management & Academic', 88, 11),
('Project Management', 'Management & Academic', 86, 12),
('Digital Literacy', 'Digital & Personal Growth', 80, 13),
('Social Media', 'Digital & Personal Growth', 78, 14),
('Adaptability', 'Digital & Personal Growth', 92, 15),
('Cultural Awareness', 'Digital & Personal Growth', 90, 16)
ON CONFLICT DO NOTHING;

-- Seed Experience
INSERT INTO portfolio_experience (title, company, start_date, end_date, is_current, location, description, sort_order) VALUES
('CEO', 'Aakar Academy', 'Nov 2025', NULL, true, 'Chitwan, Nepal', 'Leading Aakar Academy as Chief Executive Officer, driving strategic vision and operational excellence. Overseeing curriculum development, institutional growth, student success initiatives, and team management to establish the academy as a leading educational institution in Nepal.', 1),
('Head of SARAL', 'Bitflux Technologies Pvt. Ltd.', 'Oct 2024', 'Sep 2025', false, 'Chitwan, Nepal', 'Led the development and implementation of SARAL, an innovative restaurant management system. Oversaw product strategy, client onboarding, and continuous improvement of the platform to streamline restaurant operations across Nepal.', 2),
('Business Development Officer', 'Bitflux Technologies Pvt. Ltd.', 'Aug 2024', 'Sep 2025', false, 'Chitwan, Nepal', 'Spearheaded business development initiatives to expand the company''s market presence. Developed strategic partnerships, identified growth opportunities, and implemented effective marketing strategies to increase brand awareness and customer acquisition.', 3),
('Banking Intern', 'Muktinath Bikas Bank Limited', 'May 2024', 'Jul 2024', false, 'Nepal', 'Gained comprehensive exposure to banking operations including customer service, account management, and financial analysis. Assisted in processing transactions, preparing financial reports, and implementing customer relationship management strategies.', 4)
ON CONFLICT DO NOTHING;

-- Seed Education
INSERT INTO portfolio_education (degree, institution, start_date, end_date, location, sort_order) VALUES
('Master in Business Administration (MBA)', 'Boston International College', '2024', 'Present', 'Bharatpur-10, Nepal', 1),
('Bachelor in Business Administration (BBA)', 'Saptagandaki Multiple Campus', '2019', '2024', 'Bharatpur-10, Chitwan', 2),
('Secondary Level (+2) in Management', 'Eden Garden English Secondary School', '2016', '2019', 'Bharatpur-10, Chitwan', 3),
('SLC', 'Madi Secondary School', 'SLC', '', 'Madi-03, Chitwan', 4)
ON CONFLICT DO NOTHING;

-- Seed Achievements
INSERT INTO portfolio_achievements (title, description, icon, sort_order) VALUES
('7 Major Treks Completed', 'Successfully completed treks to iconic destinations across Nepal''s Himalayan region.', 'Mountain', 1),
('Academic Excellence', 'Maintaining strong academic performance while pursuing passion for adventure and exploration.', 'Award', 2),
('Youth Leadership', 'Recognized for leadership in organizing community events and youth programs.', 'Star', 3),
('Cultural Ambassador', 'Promoting Nepali culture and natural heritage through trekking experiences and storytelling.', 'Sparkles', 4)
ON CONFLICT DO NOTHING;

-- Seed Projects
INSERT INTO portfolio_projects (title, description, category, tech_stack, image_url, live_url, github_url, status, sort_order) VALUES
('Glabs - Strategic Intelligence Platform', 'A professional consulting platform delivering strategic intelligence tools and career intelligence tests. Built with modern design principles and consulting-grade business frameworks.', 'Assessment Website', 'Next.js, React, Tailwind CSS, TypeScript, Teal Branding', '/images/screenshot-202026-01-08-20120110.png', 'https://omprakashpaudelgaurav.com.np', '#', 'Live', 1),
('Aakar Academy Website', 'A comprehensive educational platform featuring course catalogs, student enrollment, progress tracking, and instructor dashboards. Dark-themed with vibrant green accents and modern pedagogical design.', 'Institutes Website', 'Next.js, React, Tailwind CSS, TypeScript, PostgreSQL', '/images/screenshot-202026-01-08-20120115.png', 'https://v0-aakar-academy-website-ashen.vercel.app/', '#', 'Live', 2),
('Personal Portfolio Website', 'An interactive portfolio showcasing trekking expeditions, academic achievements, and professional experience. Features dynamic project management with admin dashboard.', 'Personal Portfolio', 'Next.js 16, React 19, Tailwind CSS v4, Neon DB, TypeScript', '/images/personal-portfolio-hero.jpeg', 'https://omgaurav.com.np', '#', 'Live', 3)
ON CONFLICT DO NOTHING;

-- Seed Treks
INSERT INTO portfolio_treks (name, description, altitude, image_url, location, difficulty, sort_order) VALUES
('Annapurna Base Camp', 'Gateway to the Annapurna Sanctuary. Annapurna Base Camp Trek is one of the most popular trekking routes in Nepal, leading to the base of Annapurna I (8,091 m). The trail passes through traditional Gurung villages, dense rhododendron forests, glaciers, and high-altitude landscapes.', '4,130m', '/images/abc4.jpeg', 'Nepal Himalayas', 'Moderate', 1),
('Annapurna North Basecamp', 'Remote and less-explored route to the north face of Annapurna I. Accessed via Narchyang in Myagdi district, the trek includes alpine terrain, glacier views, and the sacred Panchakunda Lake.', '4,190m', '/images/annapurna-20north-20basecamp.jpg', 'Nepal Himalayas', 'Difficult', 2),
('Mardi Himal', 'Scenic alternative to ABC with dramatic views. The route follows narrow ridgelines with dramatic views of Machhapuchhre (Fishtail), Annapurna South, and Hiunchuli.', '4,500m', '/images/mardi-himal2.jpeg', 'Nepal Himalayas', 'Moderate', 3),
('Gosainkunda', 'Sacred lake at high altitude. The sacred alpine lake holds religious significance for Hindus and Buddhists and offers rugged trails, rocky landscapes, and seasonal snow conditions.', '4,380m', '/images/gosainkunda.jpeg', 'Nepal Himalayas', 'Moderate', 4),
('Poon Hill', 'Classic sunrise viewpoint. A short and beginner-friendly trek famous for its sunrise views over the Annapurna and Dhaulagiri mountain ranges.', '3,210m', '/images/poon-hill.jpeg', 'Nepal Himalayas', 'Easy', 5),
('Tilicho Lake', 'One of the highest lakes in the world. The route features rugged high-altitude terrain, landslide-prone sections, and dramatic Himalayan scenery.', '4,919m', '/images/tilicho.jpeg', 'Nepal Himalayas', 'Difficult', 6),
('Khumai Danda', 'Panoramic viewpoint in Kaski. Known for sunrise and sunset views of Machhapuchhre, Annapurna South, and Lamjung Himal.', '3,245m', '/images/khumai-danda.jpeg', 'Nepal Himalayas', 'Easy', 7)
ON CONFLICT DO NOTHING;
[V0_FILE]css:file="styles/globals.css"
@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --font-sans: 'Geist', 'Geist Fallback';
  --font-mono: 'Geist Mono', 'Geist Mono Fallback';
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]json:file="tsconfig.json"
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "target": "ES6",
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
[V0_FILE]typescript:file="types/global.d.ts"
interface Window {
  gtag: (command: "config" | "event" | "js" | "set", targetId: string, config?: Record<string, any> | Date) => void
  dataLayer: any[]
}
[V0_FILE]png:file="public/apple-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_CuK6UgDPe7DKsLmLqTKio30iENQ7/IbCKqe8aOyKCr3C9s15usz/public/apple-icon.png"
[V0_FILE]png:file="public/icon-dark-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_CuK6UgDPe7DKsLmLqTKio30iENQ7/_NLAIkeVwoL6vEzK2uSXmZ/public/icon-dark-32x32.png"
[V0_FILE]png:file="public/icon-light-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_CuK6UgDPe7DKsLmLqTKio30iENQ7/DVnRdScnZe8NA9byc6_b4H/public/icon-light-32x32.png"
[V0_FILE]xml:file="public/icon.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_CuK6UgDPe7DKsLmLqTKio30iENQ7/l2-w3jDSPuRqpmK6lDq3GH/public/icon.svg"
[V0_FILE]jpeg:file="public/images/abc4.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_CuK6UgDPe7DKsLmLqTKio30iENQ7/SnknRps_g8jq8RP-GUbIIw/public/images/abc4.jpeg"
[V0_FILE]jpg:file="public/images/annapurna-20north-20basecamp.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_CuK6UgDPe7DKsLmLqTKio30iENQ7/gSO2rITWxtH20xbLFns9Y2/public/images/annapurna-20north-20basecamp.jpg"
[V0_FILE]png:file="public/images/dashain-inspiration.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_CuK6UgDPe7DKsLmLqTKio30iENQ7/Sul3lCs98IHysBhRzd0Vxo/public/images/dashain-inspiration.png"
[V0_FILE]jpeg:file="public/images/design-mode/ABC4.jpg.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_CuK6UgDPe7DKsLmLqTKio30iENQ7/SnknRps_g8jq8RP-GUbIIw/public/images/design-mode/ABC4.jpg.jpeg"
[V0_FILE]jpeg:file="public/images/design-mode/Poon_hill.jpg.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_CuK6UgDPe7DKsLmLqTKio30iENQ7/L8-Cvu8mljsst37llPk-Kf/public/images/design-mode/Poon_hill.jpg.jpeg"
[V0_FILE]jpeg:file="public/images/design-mode/mardi_Himal1.jpg.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_CuK6UgDPe7DKsLmLqTKio30iENQ7/HbSH20PfdL5rnlr8Q8mMfn/public/images/design-mode/mardi_Himal1.jpg.jpeg"
[V0_FILE]jpeg:file="public/images/gosainkunda.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_CuK6UgDPe7DKsLmLqTKio30iENQ7/efQl-oA5TT0z4Jva4btOFA/public/images/gosainkunda.jpeg"
[V0_FILE]jpg:file="public/images/himalayan-hero.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_CuK6UgDPe7DKsLmLqTKio30iENQ7/No-pEnRMFcVlDiQvvN-q5k/public/images/himalayan-hero.jpg"
[V0_FILE]jpeg:file="public/images/khumai-danda.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_CuK6UgDPe7DKsLmLqTKio30iENQ7/cKqxrblOYlwPFy2tZgYQPb/public/images/khumai-danda.jpeg"
[V0_FILE]jpeg:file="public/images/mardi-himal1.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_CuK6UgDPe7DKsLmLqTKio30iENQ7/HbSH20PfdL5rnlr8Q8mMfn/public/images/mardi-himal1.jpeg"
[V0_FILE]jpeg:file="public/images/mardi-himal2.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_CuK6UgDPe7DKsLmLqTKio30iENQ7/kkX1zzcENdM6WbWbdPqHY7/public/images/mardi-himal2.jpeg"
[V0_FILE]jpeg:file="public/images/personal-portfolio-hero.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_CuK6UgDPe7DKsLmLqTKio30iENQ7/pT7KzwyDHRoDEQ08qqKWop/public/images/personal-portfolio-hero.jpeg"
[V0_FILE]jpeg:file="public/images/poon-hill.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_CuK6UgDPe7DKsLmLqTKio30iENQ7/L8-Cvu8mljsst37llPk-Kf/public/images/poon-hill.jpeg"
[V0_FILE]png:file="public/images/screenshot-202026-01-08-20120110.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_CuK6UgDPe7DKsLmLqTKio30iENQ7/2_66_ZsZDjJa0WAClLHbpE/public/images/screenshot-202026-01-08-20120110.png"
[V0_FILE]png:file="public/images/screenshot-202026-01-08-20120115.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_CuK6UgDPe7DKsLmLqTKio30iENQ7/E5jzm6pViXiAt4YDaQIM8x/public/images/screenshot-202026-01-08-20120115.png"
[V0_FILE]jpeg:file="public/images/tilicho.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_CuK6UgDPe7DKsLmLqTKio30iENQ7/KByHXRBrvSz12lKC6uS18w/public/images/tilicho.jpeg"
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_CuK6UgDPe7DKsLmLqTKio30iENQ7/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_CuK6UgDPe7DKsLmLqTKio30iENQ7/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_CuK6UgDPe7DKsLmLqTKio30iENQ7/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_CuK6UgDPe7DKsLmLqTKio30iENQ7/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_CuK6UgDPe7DKsLmLqTKio30iENQ7/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg"
[V0_FILE]png:file="public/restaurant-management-dashboard.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_CuK6UgDPe7DKsLmLqTKio30iENQ7/XkoAeoBuzI8UKJZ97LFgfP/public/restaurant-management-dashboard.png"</article></body></html>