[V0_FILE]plaintext:file=".gitignore" isMerged="true" # 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" isMerged="true" # YoYo *Automatically synced with your [v0.dev](https://v0.dev) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/dev-jackjackrocs-projects/v0-build-a-prototype) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.dev-black?style=for-the-badge)](https://v0.dev/chat/projects/m7P6ScTt79A) ## Overview This repository will stay in sync with your deployed chats on [v0.dev](https://v0.dev). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.dev](https://v0.dev). ## Deployment Your project is live at: **[https://vercel.com/dev-jackjackrocs-projects/v0-build-a-prototype](https://vercel.com/dev-jackjackrocs-projects/v0-build-a-prototype)** ## Build your app Continue building your app on: **[https://v0.dev/chat/projects/m7P6ScTt79A](https://v0.dev/chat/projects/m7P6ScTt79A)** ## How It Works 1. Create and modify your project using [v0.dev](https://v0.dev) 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]typescript:file="app/api/_supabase.ts" isMerged="true" import { cookies } from "next/headers" import { createServerClient } from "@supabase/ssr" export function createSupabaseServer() { const cookieStore = cookies() const supabase = createServerClient(process.env.SUPABASE_URL!, process.env.SUPABASE_ANON_KEY!, { cookies: { get(name: string) { return cookieStore.get(name)?.value }, set(name: string, value: string, options: any) { cookieStore.set({ name, value, ...options }) }, remove(name: string, options: any) { cookieStore.set({ name, value: "", ...options, maxAge: 0 }) }, }, }) return supabase } [V0_FILE]typescript:file="app/api/admin/reports/route.ts" isMerged="true" import type { NextRequest } from "next/server" import { createSupabaseServer } from "../../_supabase" async function ensureAdmin() { const supabase = createSupabaseServer() const { data: { user }, } = await supabase.auth.getUser() if (!user) return { error: "Unauthorized" } const { data: pr } = await supabase.from("profiles").select("id, role").eq("user_id", user.id).single() if (!pr || pr.role !== "admin") return { error: "Forbidden" } return { supabase, adminProfileId: pr.id } } export async function GET() { const supabase = createSupabaseServer() const { data: { user }, } = await supabase.auth.getUser() if (!user) return Response.json({ error: "Unauthorized" }, { status: 401 }) // RLS will enforce admin-only read on reports via policy, so we can call directly const { data, error } = await supabase .from("reports") .select("id, reporter_profile_id, target_type, target_id, reason, status, created_at") .in("status", ["open", "reviewing"]) .order("created_at", { ascending: false }) if (error) return Response.json({ error: error.message }, { status: 400 }) return Response.json({ reports: data }) } export async function PATCH(req: NextRequest) { const auth = await ensureAdmin() if (auth.error) return Response.json({ error: auth.error }, { status: auth.error === "Forbidden" ? 403 : 401 }) const { supabase, adminProfileId } = auth const body = await req.json() const { report_id, status, action, action_reason } = body || {} const allowedStatus = new Set(["open", "reviewing", "resolved", "dismissed"]) const allowedActions = new Set([undefined, "hide", "delete", "suspend"]) if (!report_id || !status) return Response.json({ error: "Missing fields" }, { status: 400 }) if (!allowedStatus.has(status)) return Response.json({ error: "Invalid status" }, { status: 400 }) if (!allowedActions.has(action)) return Response.json({ error: "Invalid action" }, { status: 400 }) const { error } = await supabase.from("reports").update({ status }).eq("id", report_id) if (error) return Response.json({ error: error.message }, { status: 400 }) if (action) { await supabase.from("moderation_actions").insert({ admin_profile_id: adminProfileId, target_type: "report", target_id: report_id, action, reason: action_reason, }) } return Response.json({ ok: true }) } [V0_FILE]typescript:file="app/api/analytics/track/route.ts" isMerged="true" import { NextResponse } from "next/server" import { getServerSupabase } from "@/lib/supabase-server" import { getAdminSupabase } from "@/lib/supabase-admin" export async function POST(req: Request) { const supabase = getServerSupabase() const body = await req.json().catch(() => ({})) const { event_name, payload } = body ?? {} if (!event_name) return NextResponse.json({ ok: false, error: "event_name required" }, { status: 400 }) const { data: { user }, } = await supabase.auth.getUser() try { const admin = getAdminSupabase() const { error } = await admin.from("analytics_events").insert({ user_id: user?.id ?? null, event_name, payload: payload ?? {}, }) if (error) { return NextResponse.json({ ok: false, error: error.message }, { status: 500 }) } } catch (e: any) { return NextResponse.json({ ok: false, error: e?.message ?? "insert failed" }, { status: 500 }) } return NextResponse.json({ ok: true }) } [V0_FILE]typescript:file="app/api/applications/route.ts" isMerged="true" import { NextResponse } from "next/server" import { getSupabaseServer } from "@/lib/supabase/server" export async function GET() { const supabase = await getSupabaseServer() const { data: user } = await supabase.auth.getUser() if (!user?.user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) const { data: profile, error: perr } = await supabase .from("profiles") .select("id") .eq("auth_user_id", user.user.id) .single() if (perr || !profile) return NextResponse.json({ error: "Profile not found" }, { status: 400 }) const { data, error } = await supabase .from("applications") .select("id,job_id,status,created_at,expected_rate") .eq("profile_id", profile.id) .order("created_at", { ascending: false }) if (error) return NextResponse.json({ error: error.message }, { status: 400 }) return NextResponse.json({ applications: data ?? [] }) } export async function POST(request: Request) { const supabase = await getSupabaseServer() const { data: user } = await supabase.auth.getUser() if (!user?.user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) const body = await request.json() const { job_id, cover_letter = "", expected_rate = null } = body || {} if (!job_id) return NextResponse.json({ error: "job_id is required" }, { status: 400 }) const { data: profile, error: perr } = await supabase .from("profiles") .select("id") .eq("auth_user_id", user.user.id) .single() if (perr || !profile) return NextResponse.json({ error: "Profile not found" }, { status: 400 }) const { data, error } = await supabase .from("applications") .insert({ job_id, profile_id: profile.id, cover_letter, expected_rate }) .select("id") .single() if (error) return NextResponse.json({ error: error.message }, { status: 400 }) return NextResponse.json({ id: data.id }, { status: 201 }) } [V0_FILE]typescript:file="app/api/assessments/route.ts" isMerged="true" import type { NextRequest } from "next/server" import { createSupabaseServer } from "../_supabase" export async function GET() { const supabase = createSupabaseServer() const { data, error } = await supabase .from("assessment_tests") .select("id, slug, name, description, skill_id, skills(name)") .order("created_at", { ascending: false }) if (error) return Response.json({ error: error.message }, { status: 400 }) return Response.json({ tests: data }) } export async function POST(req: NextRequest) { const supabase = createSupabaseServer() const { data: { user }, } = await supabase.auth.getUser() if (!user) return Response.json({ error: "Unauthorized" }, { status: 401 }) const body = await req.json() const { test_id } = body || {} if (!test_id) return Response.json({ error: "Missing test_id" }, { status: 400 }) const { data: me } = await supabase.from("profiles").select("id").eq("user_id", user.id).single() if (!me) return Response.json({ error: "Profile not found" }, { status: 404 }) // verify test exists const { data: testExists } = await supabase.from("assessment_tests").select("id").eq("id", test_id).single() if (!testExists) return Response.json({ error: "Test not found" }, { status: 404 }) const { error: insertError } = await supabase.from("assessment_attempts").insert({ test_id, profile_id: me.id }) if (insertError) return Response.json({ error: insertError.message }, { status: 400 }) return Response.json({ ok: true }, { status: 201 }) } [V0_FILE]typescript:file="app/api/auth/admin-signup/route.ts" isMerged="true" import { NextResponse } from "next/server" import { createClient } from "@supabase/supabase-js" export async function POST(req: Request) { const { email, password, role, full_name, company_name, contact_phone } = await req.json() const url = process.env.NEXT_PUBLIC_SUPABASE_URL! const serviceKey = process.env.SUPABASE_SERVICE_ROLE_KEY! if (!url || !serviceKey) { return NextResponse.json({ ok: false, error: "Missing Supabase env vars" }, { status: 500 }) } const admin = createClient(url, serviceKey, { auth: { autoRefreshToken: false, persistSession: false }, }) try { const anyAdmin: any = admin as any if (anyAdmin?.auth?.admin?.getUserByEmail) { const { data: existing, error: getErr } = await anyAdmin.auth.admin.getUserByEmail(email) if (!getErr && existing?.user) { return NextResponse.json({ ok: true, reason: "email_exists", user_id: existing.user.id }, { status: 200 }) } } } catch { // swallow and continue to createUser; we’ll normalize errors below } try { const { data, error } = await admin.auth.admin.createUser({ email, password, email_confirm: true, user_metadata: { role, full_name, company_name, contact_phone }, }) if (error) { const code = (error as any)?.code || (error as any)?.status const msg = (error as any)?.message || (error as any)?.error_description || String(error) if (code === "email_exists" || /email_exists/i.test(msg) || /already been registered/i.test(msg)) { return NextResponse.json({ ok: true, reason: "email_exists" }, { status: 200 }) } return NextResponse.json({ ok: false, error: msg }, { status: 400 }) } return NextResponse.json({ ok: true, user_id: data.user?.id }, { status: 201 }) } catch (e: any) { // Supabase SDK can throw with { status: 422, error: { code: 'email_exists', message: ... } } const status = e?.status || e?.error?.status const code = e?.code || e?.error?.code const message = e?.message || e?.error?.message || "Unknown error" if ( status === 422 || code === "email_exists" || /email_exists/i.test(message) || /already been registered/i.test(message) ) { return NextResponse.json({ ok: true, reason: "email_exists" }, { status: 200 }) } // Log non-duplicate failures for diagnostics console.log("[v0] admin.createUser exception:", { status, code, message }) return NextResponse.json({ ok: false, error: message }, { status: 400 }) } } [V0_FILE]typescript:file="app/api/auth/sign-in/route.ts" isMerged="true" import { NextResponse } from "next/server" import { createServerClient } from "@supabase/ssr" export async function POST(req: Request) { try { const { email, password } = (await req.json()) as { email: string; password: string } if (!email || !password) { return NextResponse.json({ error: "Missing credentials" }, { status: 400 }) } const url = process.env.SUPABASE_URL const anon = process.env.SUPABASE_ANON_KEY if (!url || !anon) { return NextResponse.json({ error: "Missing Supabase env vars" }, { status: 500 }) } const res = NextResponse.json({ ok: true }) const supabase = createServerClient(url, anon, { cookies: { getAll() { return [] }, setAll(cookiesToSet) { cookiesToSet.forEach(({ name, value, options }) => { res.cookies.set(name, value, options) }) }, }, }) const { error } = await supabase.auth.signInWithPassword({ email, password }) if (error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return res } catch (e: any) { return NextResponse.json({ error: e?.message || "Unknown error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/conversations/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { getSupabaseServer } from "@/lib/supabase/server" export async function GET() { const supabase = await getSupabaseServer() // current auth user const { data: { user }, } = await supabase.auth.getUser() if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) // resolve profile_id const { data: profile, error: pErr } = await supabase.from("profiles").select("id").eq("user_id", user.id).single() if (pErr || !profile) return NextResponse.json({ error: "Profile not found" }, { status: 400 }) // list conversations where current profile is a participant const { data, error } = await supabase .from("conversation_participants") .select("conversation_id, role, conversations ( company_id, created_at )") .eq("profile_id", profile.id) .order("joined_at", { ascending: false }) if (error) return NextResponse.json({ error: error.message }, { status: 400 }) return NextResponse.json({ conversations: data ?? [] }) } export async function POST(req: NextRequest) { const supabase = await getSupabaseServer() const { data: { user }, } = await supabase.auth.getUser() if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) // resolve current profile_id const { data: me, error: meErr } = await supabase.from("profiles").select("id, role").eq("user_id", user.id).single() if (meErr || !me) return NextResponse.json({ error: "Profile not found" }, { status: 400 }) const body = await req.json() // Accept either participant_profile_ids (preferred) or participant_user_ids (fallback) const participant_profile_ids: string[] | undefined = body?.participant_profile_ids const participant_user_ids: string[] | undefined = body?.participant_user_ids const company_id: string | null = body?.company_id ?? null let participantIds = participant_profile_ids ?? [] if (!participant_profile_ids && Array.isArray(participant_user_ids) && participant_user_ids.length > 0) { // map auth user ids -> profile ids const { data: profs, error: mErr } = await supabase .from("profiles") .select("id, user_id") .in("user_id", participant_user_ids) if (mErr) return NextResponse.json({ error: mErr.message }, { status: 400 }) participantIds = (profs ?? []).map((p) => p.id) } // create conversation const { data: convo, error: cErr } = await supabase.from("conversations").insert({ company_id }).select("id").single() if (cErr) return NextResponse.json({ error: cErr.message }, { status: 400 }) // insert participants (dedup + include current profile) const unique = Array.from(new Set([me.id, ...participantIds])) const rows = unique.map((pid) => ({ conversation_id: convo.id, profile_id: pid, role: pid === me.id ? (me.role === "employer" ? "employer" : "worker") : "worker", })) const { error: pErr } = await supabase.from("conversation_participants").insert(rows) if (pErr) return NextResponse.json({ error: pErr.message }, { status: 400 }) return NextResponse.json({ id: convo.id }, { status: 201 }) } [V0_FILE]typescript:file="app/api/dashboard/tasks/route.ts" isMerged="true" import { NextResponse } from "next/server" import { cookies } from "next/headers" import { createServerClient } from "@supabase/ssr" export async function GET() { const cookieStore = cookies() const response = new NextResponse() const supabase = createServerClient(process.env.SUPABASE_URL!, process.env.SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { for (const { name, value, options } of cookiesToSet) { response.cookies.set({ name, value, ...options }) } }, }, }) try { const { data: { user }, } = await supabase.auth.getUser() if (!user) return NextResponse.json({ items: [] }, { headers: response.headers }) return NextResponse.json( { items: [ { id: "1", title: "Interview", done: true }, { id: "2", title: "Team Meeting", done: false }, { id: "3", title: "Project Update", done: false }, ], }, { headers: response.headers }, ) } catch { return NextResponse.json({ items: [] }, { headers: response.headers }) } } export async function POST(req: Request) { const cookieStore = cookies() const response = new NextResponse() const supabase = createServerClient(process.env.SUPABASE_URL!, process.env.SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { for (const { name, value, options } of cookiesToSet) { response.cookies.set({ name, value, ...options }) } }, }, }) try { const { id, done } = await req.json() const { data: { user }, } = await supabase.auth.getUser() if (!user) return NextResponse.json({ ok: false }, { status: 401, headers: response.headers }) // Replace with real update once table exists return NextResponse.json({ ok: true, id, done }, { headers: response.headers }) } catch { return NextResponse.json({ ok: false }, { status: 400, headers: response.headers }) } } [V0_FILE]typescript:file="app/api/dashboard/time/route.ts" isMerged="true" import { NextResponse } from "next/server" import { cookies } from "next/headers" import { createServerClient } from "@supabase/ssr" export async function POST(req: Request) { const cookieStore = cookies() const response = new NextResponse() const supabase = createServerClient(process.env.SUPABASE_URL!, process.env.SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { for (const { name, value, options } of cookiesToSet) { response.cookies.set({ name, value, ...options }) } }, }, }) try { const { action } = await req.json() const { data: { user }, } = await supabase.auth.getUser() if (!user) return NextResponse.json({ ok: false }, { status: 401, headers: response.headers }) // TODO: write to time_entries when table exists return NextResponse.json({ ok: true, action }, { headers: response.headers }) } catch { return NextResponse.json({ ok: false }, { status: 400, headers: response.headers }) } } [V0_FILE]typescript:file="app/api/endorsements/route.ts" isMerged="true" import type { NextRequest } from "next/server" import { createSupabaseServer } from "../_supabase" export async function GET(req: NextRequest) { const supabase = createSupabaseServer() const { searchParams } = new URL(req.url) const endorseeId = searchParams.get("endorseeId") if (!endorseeId) return Response.json({ endorsements: [] }) const { data, error } = await supabase .from("endorsements") .select("id, endorser_profile_id, endorsee_profile_id, skill_id, comment, created_at") .eq("endorsee_profile_id", endorseeId) .order("created_at", { ascending: false }) if (error) return Response.json({ error: error.message }, { status: 400 }) return Response.json({ endorsements: data }) } export async function POST(req: NextRequest) { const supabase = createSupabaseServer() const { data: { user }, } = await supabase.auth.getUser() if (!user) return Response.json({ error: "Unauthorized" }, { status: 401 }) const body = await req.json() const { endorsee_profile_id, skill_id, comment } = body || {} if (!endorsee_profile_id || !skill_id) return Response.json({ error: "Missing fields" }, { status: 400 }) const { data: me } = await supabase.from("profiles").select("id").eq("user_id", user.id).single() if (!me) return Response.json({ error: "Profile not found" }, { status: 404 }) const { error: insertError } = await supabase.from("endorsements").insert({ endorser_profile_id: me.id, endorsee_profile_id, skill_id, comment, }) if (insertError) return Response.json({ error: insertError.message }, { status: 400 }) return Response.json({ ok: true }, { status: 201 }) } [V0_FILE]typescript:file="app/api/jobs/route.ts" isMerged="true" import { NextResponse } from "next/server" import { getSupabaseServer } from "@/lib/supabase/server" import { getAdminSupabase } from "@/lib/supabase-admin" export async function GET() { const supabase = getAdminSupabase() const { data, error } = await supabase .from("jobs") .select( "id,title,description,job_type,location_type,budget_min,budget_max,currency,status,created_at,created_by,company_id", ) .eq("status", "open") .order("created_at", { ascending: false }) if (error) return NextResponse.json({ error: error.message }, { status: 400 }) return NextResponse.json({ jobs: data ?? [] }) } export async function POST(request: Request) { const supabase = await getSupabaseServer() const { data: userData } = await supabase.auth.getUser() if (!userData?.user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) const body = await request.json() const { title, description, job_type = "contract", location_type = "remote", budget_min = null, budget_max = null, currency = "USD", company_id = null, } = body || {} // find profile.id for current auth user const { data: profileRow, error: profileErr } = await supabase .from("profiles") .select("id") .eq("auth_user_id", userData.user.id) .single() if (profileErr || !profileRow) { return NextResponse.json({ error: "Profile not found for user" }, { status: 400 }) } const { data, error } = await supabase .from("jobs") .insert({ title, description, job_type, location_type, budget_min, budget_max, currency, company_id, created_by: profileRow.id, status: "open", }) .select("id") .single() if (error) return NextResponse.json({ error: error.message }, { status: 400 }) return NextResponse.json({ id: data.id }, { status: 201 }) } [V0_FILE]typescript:file="app/api/messages/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { getSupabaseServer } from "@/lib/supabase/server" export async function GET(req: NextRequest) { const supabase = await getSupabaseServer() const { searchParams } = new URL(req.url) const conversationId = searchParams.get("conversationId") if (!conversationId) return NextResponse.json({ error: "Missing conversationId" }, { status: 400 }) // RLS enforces participant access; just return messages const { data, error } = await supabase .from("messages") .select("id, sender_profile_id, body, attachment_url, created_at") .eq("conversation_id", conversationId) .order("created_at", { ascending: true }) if (error) return NextResponse.json({ error: error.message }, { status: 400 }) return NextResponse.json({ messages: data ?? [] }) } export async function POST(req: NextRequest) { const supabase = await getSupabaseServer() const { data: { user }, } = await supabase.auth.getUser() if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) const body = await req.json() const { conversation_id, body: text, attachment_url = null } = body || {} if (!conversation_id || !text) return NextResponse.json({ error: "Missing fields" }, { status: 400 }) // resolve sender profile id const { data: profile, error: pErr } = await supabase.from("profiles").select("id").eq("user_id", user.id).single() if (pErr || !profile) return NextResponse.json({ error: "Profile not found" }, { status: 400 }) const { data, error } = await supabase .from("messages") .insert({ conversation_id, sender_profile_id: profile.id, body: String(text), attachment_url, }) .select("id") .single() if (error) return NextResponse.json({ error: error.message }, { status: 400 }) return NextResponse.json({ id: data.id }, { status: 201 }) } [V0_FILE]typescript:file="app/api/projects/route.ts" isMerged="true" import type { NextRequest } from "next/server" import { createSupabaseServer } from "../_supabase" export async function GET(req: NextRequest) { const supabase = createSupabaseServer() const { searchParams } = new URL(req.url) const profileId = searchParams.get("profileId") const query = supabase .from("projects") .select("id, profile_id, title, description, links, cover_image_url, created_at, project_skills(skill_id)") const { data, error } = profileId ? await query.eq("profile_id", profileId).order("created_at", { ascending: false }) : await query.order("created_at", { ascending: false }).limit(50) if (error) return Response.json({ error: error.message }, { status: 400 }) return Response.json({ projects: data }) } export async function POST(req: NextRequest) { const supabase = createSupabaseServer() const { data: { user }, error: userErr, } = await supabase.auth.getUser() if (userErr || !user) return Response.json({ error: "Unauthorized" }, { status: 401 }) const body = await req.json() const { title, description, links = [], cover_image_url, skillIds = [] } = body || {} if (!title || typeof title !== "string") { return Response.json({ error: "Title is required" }, { status: 400 }) } const safeLinks = Array.isArray(links) ? links : [] const safeSkillIds = Array.isArray(skillIds) ? skillIds.filter(Boolean) : [] const { data: profile } = await supabase.from("profiles").select("id").eq("user_id", user.id).single() if (!profile) return Response.json({ error: "Profile not found" }, { status: 404 }) const { data: proj, error } = await supabase .from("projects") .insert({ profile_id: profile.id, title, description, links: safeLinks as any, cover_image_url, }) .select("id") .single() if (error) return Response.json({ error: error.message }, { status: 400 }) if (safeSkillIds.length) { const rows = safeSkillIds.map((skill_id: string) => ({ project_id: proj.id, skill_id })) const { error: psErr } = await supabase.from("project_skills").insert(rows) if (psErr) return Response.json({ error: psErr.message }, { status: 400 }) } return Response.json({ id: proj.id }, { status: 201 }) } [V0_FILE]typescript:file="app/api/reports/route.ts" isMerged="true" import type { NextRequest } from "next/server" import { createSupabaseServer } from "../_supabase" export async function POST(req: NextRequest) { const supabase = createSupabaseServer() const { data: { user }, } = await supabase.auth.getUser() if (!user) return Response.json({ error: "Unauthorized" }, { status: 401 }) const body = await req.json() const { target_type, target_id, reason } = body || {} const allowed = new Set(["profile", "job", "message", "project"]) if (!target_type || !target_id || !reason) return Response.json({ error: "Missing fields" }, { status: 400 }) if (!allowed.has(String(target_type))) return Response.json({ error: "Invalid target_type" }, { status: 400 }) const { data: me } = await supabase.from("profiles").select("id").eq("user_id", user.id).single() if (!me) return Response.json({ error: "Profile not found" }, { status: 404 }) const { error } = await supabase.from("reports").insert({ reporter_profile_id: me.id, target_type, target_id, reason, }) if (error) return Response.json({ error: error.message }, { status: 400 }) return Response.json({ ok: true }, { status: 201 }) } [V0_FILE]typescript:file="app/api/signup/bootstrap/route.ts" isMerged="true" import { NextResponse } from "next/server" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" export async function POST(req: Request) { const cookieStore = await cookies() const supabase = createServerClient(process.env.SUPABASE_URL!, process.env.SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) }, }, }) const { role, full_name, company_name, contact_phone } = await req.json() const { data: auth, error: authErr } = await supabase.auth.getUser() if (authErr || !auth.user) { console.log("[v0] bootstrap auth error:", authErr?.message) return NextResponse.json({ ok: false, error: "Unauthorized" }, { status: 401 }) } console.log("[v0] bootstrap for user:", auth.user.id, "role:", role) const { error: profErr } = await supabase.from("profiles").upsert( { id: auth.user.id, auth_user_id: auth.user.id, role, onboarding_status: "started", }, { onConflict: "auth_user_id" }, ) if (profErr) { console.log("[v0] profiles upsert error:", profErr.message, profErr.details, profErr.hint) return NextResponse.json({ ok: false, error: profErr.message }, { status: 400 }) } console.log("[v0] profiles upserted successfully") if (role === "worker") { const { error: wErr } = await supabase .from("worker_profiles") .upsert({ profile_id: auth.user.id }, { onConflict: "profile_id" }) if (wErr) { const code = (wErr as any)?.code || "" const msg = (wErr as any)?.message || "" if (code === "PGRST205" || /Could not find the table 'public\.worker_profiles'/.test(msg)) { console.log("[v0] worker_profiles table missing; skipping upsert and continuing bootstrap") } else { console.log("[v0] worker_profiles upsert error:", wErr.message, (wErr as any)?.details) return NextResponse.json({ ok: false, error: wErr.message }, { status: 400 }) } } else { console.log("[v0] worker_profiles upserted successfully") } } else if (role === "employer") { const { error: eErr } = await supabase .from("employer_profiles") .upsert({ profile_id: auth.user.id }, { onConflict: "profile_id" }) if (eErr) { const code = (eErr as any)?.code || "" const msg = (eErr as any)?.message || "" if (code === "PGRST205" || /Could not find the table 'public\.employer_profiles'/.test(msg)) { console.log("[v0] employer_profiles table missing; skipping upsert and continuing bootstrap") } else { console.log("[v0] employer_profiles upsert error:", eErr.message, (eErr as any)?.details) return NextResponse.json({ ok: false, error: eErr.message }, { status: 400 }) } } else { console.log("[v0] employer_profiles upserted successfully") } } return NextResponse.json({ ok: true }) } [V0_FILE]typescript:file="app/api/signup/employer/project/route.ts" isMerged="true" import { NextResponse } from "next/server" import { getServerSupabase } from "@/lib/supabase-server" export async function POST(req: Request) { const supabase = getServerSupabase() const { data: auth } = await supabase.auth.getUser() if (!auth.user) return NextResponse.json({ ok: false }, { status: 401 }) const { data: profile } = await supabase.from("profiles").select("user_id").eq("user_id", auth.user.id).maybeSingle() if (!profile) return NextResponse.json({ ok: false }, { status: 400 }) const { title, description, budget } = await req.json() await supabase.from("projects").insert({ profile_id: profile.user_id, title, description, budget, status: "draft", }) await supabase.from("profiles").update({ onboarding_status: "employer_project_created" }).eq("user_id", auth.user.id) return NextResponse.json({ ok: true }) } [V0_FILE]typescript:file="app/api/signup/worker/profile/route.ts" isMerged="true" import { NextResponse } from "next/server" import { getServerSupabase } from "@/lib/supabase-server" export async function POST(req: Request) { const supabase = getServerSupabase() const { data: auth } = await supabase.auth.getUser() if (!auth?.user) return NextResponse.json({ ok: false, error: "unauthorized" }, { status: 401 }) const { about, skills } = await req.json() // 1) Ensure we have a profile for this user (RLS-safe via auth_user_id) let { data: profileRow, error: profileErr } = await supabase .from("profiles") .select("id") .eq("auth_user_id", auth.user.id) .maybeSingle() if (profileErr) { return NextResponse.json({ ok: false, error: profileErr.message }, { status: 400 }) } if (!profileRow) { const { data: upserted, error: upsertErr } = await supabase .from("profiles") .upsert( { auth_user_id: auth.user.id, role: "worker", onboarding_status: "started" }, { onConflict: "auth_user_id" }, ) .select("id") .single() if (upsertErr) return NextResponse.json({ ok: false, error: upsertErr.message }, { status: 400 }) profileRow = upserted } const profileId = profileRow.id if (about) { const { error: aboutErr } = await supabase.from("profiles").update({ about }).eq("id", profileId) if (aboutErr) { const msg = aboutErr.message?.toLowerCase() || "" const code = (aboutErr as any).code if (!(code === "42703" || msg.includes("column") || msg.includes("does not exist"))) { return NextResponse.json({ ok: false, error: aboutErr.message }, { status: 400 }) } } } const names: string[] = Array.isArray(skills) ? skills : typeof skills === "string" ? skills .split(",") .map((s: string) => s.trim()) .filter(Boolean) .slice(0, 10) : [] if (names.length) { const slugs = names.map((n) => n .toLowerCase() .replace(/[^a-z0-9]+/g, "-") .replace(/(^-|-$)/g, ""), ) const upsertRows = names.map((name, i) => ({ slug: slugs[i], name })) // Upsert catalog skills (policy allows insert with basic checks) const { error: skillsUpsertErr } = await supabase.from("skills").upsert(upsertRows, { onConflict: "slug" }) if (skillsUpsertErr) { // Allow RLS block to pass silently so onboarding can continue // 42501 is "insufficient_privilege" from PostgREST under RLS policies // console.log("[v0] skills upsert blocked by RLS; proceeding with existing skills only:", skillsUpsertErr) // Only bail on non-RLS errors const code = (skillsUpsertErr as any).code const msg = (skillsUpsertErr as any).message || "" if (!(code === "42501" || code === "PGRST205" || /does not exist|relation .* skills/i.test(msg))) { return NextResponse.json({ ok: false, error: skillsUpsertErr.message }, { status: 400 }) } } // Fetch whatever skills the user is allowed to read, then map them const { data: skillRows, error: selectSkillErr } = await supabase .from("skills") .select("id, slug") .in("slug", slugs) const safeSkillRows = selectSkillErr ? [] : (skillRows ?? []) // Replace user_skills for this profile using only accessible skills const { error: delErr } = await supabase.from("user_skills").delete().eq("profile_id", profileId) if (delErr) { const code = (delErr as any).code const msg = (delErr as any).message || "" if (!(code === "42501" || code === "PGRST205" || /relation .* user_skills .* does not exist/i.test(msg))) { return NextResponse.json({ ok: false, error: delErr.message }, { status: 400 }) } } const mapRows = safeSkillRows.map((s) => ({ profile_id: profileId, skill_id: s.id })) if (mapRows.length) { const { error: mapErr } = await supabase.from("user_skills").insert(mapRows) if (mapErr) { const code = (mapErr as any).code const msg = (mapErr as any).message || "" if (!(code === "42501" || code === "PGRST205" || /relation .* user_skills .* does not exist/i.test(msg))) { return NextResponse.json({ ok: false, error: mapErr.message }, { status: 400 }) } } } } // 4) Advance onboarding status on the profiles table by id (not user_id) const { error: statusErr } = await supabase .from("profiles") .update({ onboarding_status: "worker_completed" }) // unified key .eq("id", profileId) if (statusErr) { const code = (statusErr as any).code const msg = (statusErr as any).message?.toLowerCase() || "" if (!(code === "42703" || msg.includes("column") || msg.includes("does not exist"))) { return NextResponse.json({ ok: false, error: statusErr.message }, { status: 400 }) } } return NextResponse.json({ ok: true, profileId }) } [V0_FILE]typescript:file="app/api/stories/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { createServerClient } from "@supabase/ssr" export const runtime = "nodejs" const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL || process.env.SUPABASE_URL! const SUPABASE_ANON_KEY = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || process.env.SUPABASE_ANON_KEY! function createClient(req: NextRequest, res: NextResponse) { const authHeader = req.headers.get("authorization") || undefined return createServerClient(SUPABASE_URL, SUPABASE_ANON_KEY, { cookies: { getAll() { return req.cookies.getAll() }, setAll(cookiesToSet) { cookiesToSet.forEach(({ name, value, options }) => { res.cookies.set(name, value, options) }) }, }, // Forward the bearer token to all Supabase requests (auth.getUser, table ops, etc.) global: authHeader ? { headers: { Authorization: authHeader } } : undefined, }) } export async function GET(req: NextRequest) { const res = NextResponse.next() const supabase = createClient(req, res) const { data, error } = await supabase .from("stories") .select("id,title,content,author_name,author_avatar_url,created_at") .order("created_at", { ascending: false }) .limit(50) if (error) { return NextResponse.json({ stories: [], error: error.message }, { status: 200, headers: res.headers }) } return NextResponse.json({ stories: data ?? [] }, { status: 200, headers: res.headers }) } export async function POST(req: NextRequest) { const res = NextResponse.next() const supabase = createClient(req, res) try { const { data: auth } = await supabase.auth.getUser() const user = auth?.user console.log("[v0] stories POST user:", user?.id || "none") // debug if (!user) { return NextResponse.json({ error: "Unauthorized" }, { status: 401, headers: res.headers }) } const body = await req.json().catch(() => ({}) as any) const title = (body.storyTitle || body.title || "").toString().trim() const content = (body.story || body.content || "").toString().trim() if (!title || !content) { return NextResponse.json({ error: "Missing title or content" }, { status: 400, headers: res.headers }) } let author_name = (body.name || "").toString().trim() || null let author_avatar_url: string | null = null const userMeta = (user.user_metadata || {}) as Record const avatarFromMetadata = (userMeta.avatar_url as string) || (userMeta.picture as string) || (userMeta.avatar as string) || null try { if (!author_name) { const { data: profile } = await supabase .from("profiles") .select("full_name") .eq("auth_user_id", user.id) .maybeSingle() author_name = author_name || profile?.full_name || user.email?.split("@")?.[0] || "Anonymous" author_avatar_url = avatarFromMetadata } else if (!author_avatar_url) { author_avatar_url = avatarFromMetadata } } catch { // tolerate missing profiles table/columns author_name = author_name || user.email?.split("@")?.[0] || "Anonymous" } const insertPayload = { user_id: user.id, title, content, author_name, author_avatar_url, } const { data, error } = await supabase.from("stories").insert(insertPayload).select().maybeSingle() if (error) { return NextResponse.json({ error: error.message }, { status: 400, headers: res.headers }) } return NextResponse.json({ story: data }, { status: 201, headers: res.headers }) } catch (e: any) { const message = e?.message || "Unexpected server error" return NextResponse.json({ error: message }, { status: 500, headers: res.headers }) } } [V0_FILE]typescript:file="app/api/talent/route.ts" isMerged="true" import { NextResponse } from "next/server" import { cookies } from "next/headers" import { createServerClient } from "@supabase/ssr" export async function GET() { const cookieStore = cookies() const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { get: (name: string) => cookieStore.get(name)?.value, }, }, ) // Query existing profiles table instead of missing `worker_public_view` and shape to expected fields const { data, error } = await supabase.from("profiles").select("id, display_name, location, avatar_url").limit(60) if (error) return NextResponse.json({ error: error.message }, { status: 500 }) const workers = (data || []).map((p: any) => ({ user_id: p.id, display_name: p.display_name, headline: null, // not available in profiles; add later if needed location: p.location, avatar_url: p.avatar_url, availability: null, hourly_rate: null, skills: [], projects_count: 0, })) || [] return NextResponse.json({ workers }) } [V0_FILE]typescript:file="app/api/time-entries/route.ts" isMerged="true" import { NextResponse } from "next/server" import { getServerSupabase } from "@/lib/supabase-server" export async function GET() { const supabase = getServerSupabase() const { data: { user }, } = await supabase.auth.getUser() if (!user) return NextResponse.json({ error: "unauthorized" }, { status: 401 }) const { data, error } = await supabase .from("time_entries") .select("*") .eq("user_id", user.id) .order("started_at", { ascending: false }) .limit(100) if (error) return NextResponse.json({ error: error.message }, { status: 500 }) return NextResponse.json({ data }) } export async function POST(req: Request) { const supabase = getServerSupabase() const { data: { user }, } = await supabase.auth.getUser() if (!user) return NextResponse.json({ error: "unauthorized" }, { status: 401 }) const body = await req.json() // body: { action: "start" | "stop", started_at?: string } if (body.action === "start") { const { error } = await supabase.from("time_entries").insert({ user_id: user.id, started_at: body.started_at ? new Date(body.started_at).toISOString() : new Date().toISOString(), }) if (error) return NextResponse.json({ error: error.message }, { status: 500 }) return NextResponse.json({ ok: true }) } if (body.action === "stop") { // stop the most recent open session const { data: last, error: selErr } = await supabase .from("time_entries") .select("*") .eq("user_id", user.id) .is("ended_at", null) .order("started_at", { ascending: false }) .limit(1) .maybeSingle() if (selErr) return NextResponse.json({ error: selErr.message }, { status: 500 }) if (!last) return NextResponse.json({ ok: true }) // nothing to stop const { error: updErr } = await supabase .from("time_entries") .update({ ended_at: new Date().toISOString() }) .eq("id", last.id) .eq("user_id", user.id) if (updErr) return NextResponse.json({ error: updErr.message }, { status: 500 }) return NextResponse.json({ ok: true }) } return NextResponse.json({ error: "invalid action" }, { status: 400 }) } [V0_FILE]typescript:file="app/api/user-tasks/route.ts" isMerged="true" import { NextResponse } from "next/server" import { getServerSupabase } from "@/lib/supabase-server" export async function GET() { const supabase = getServerSupabase() const { data: { user }, } = await supabase.auth.getUser() if (!user) return NextResponse.json({ error: "unauthorized" }, { status: 401 }) const { data, error } = await supabase .from("user_tasks") .select("*") .eq("user_id", user.id) .order("created_at", { ascending: false }) if (error) return NextResponse.json({ error: error.message }, { status: 500 }) return NextResponse.json({ data }) } export async function POST(req: Request) { const supabase = getServerSupabase() const { data: { user }, } = await supabase.auth.getUser() if (!user) return NextResponse.json({ error: "unauthorized" }, { status: 401 }) const body = (await req.json()) as { title?: string; done?: boolean; id?: string; due_at?: string } if (body.id) { const { error } = await supabase .from("user_tasks") .update({ done: body.done, title: body.title, due_at: body.due_at }) .eq("id", body.id) .eq("user_id", user.id) if (error) return NextResponse.json({ error: error.message }, { status: 500 }) return NextResponse.json({ ok: true }) } if (!body.title) return NextResponse.json({ error: "title required" }, { status: 400 }) const { error } = await supabase.from("user_tasks").insert({ user_id: user.id, title: body.title, due_at: body.due_at ?? null, }) if (error) return NextResponse.json({ error: error.message }, { status: 500 }) return NextResponse.json({ ok: true }) } [V0_FILE]typescriptreact:file="app/apple-icon.tsx" isMerged="true" import { ImageResponse } from "next/og" export const runtime = "edge" export const size = { width: 180, height: 180, } export const contentType = "image/png" export default function AppleIcon() { return new ImageResponse(

, { ...size, }, ) } [V0_FILE]typescriptreact:file="app/auth/login/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/auth/login/page.tsx" isMerged="true" "use client" import { useState } from "react" import { useRouter, useSearchParams } from "next/navigation" import Link from "next/link" import AnimatedLogin from "@/components/auth/animated-login" import { createClient } from "@/lib/supabase/client" export default function Page() { const [error, setError] = useState(null) const [isLoading, setIsLoading] = useState(false) const router = useRouter() const searchParams = useSearchParams() const handleSubmit = async (email: string, password: string) => { setError(null) setIsLoading(true) try { const supabase = createClient() const { error } = await supabase.auth.signInWithPassword({ email, password }) if (error) throw error const redirectTo = searchParams.get("redirect") || "/dashboard" router.replace(redirectTo) } catch (e: any) { setError(e?.message ?? "Unable to sign in") } finally { setIsLoading(false) } } const handleGoogle = async () => { setError(null) const supabase = createClient() const base = process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || (typeof window !== "undefined" ? window.location.origin : undefined) const redirectTo = base ? `${base}/sign-up/verified` : undefined const { error } = await supabase.auth.signInWithOAuth({ provider: "google", options: redirectTo ? { redirectTo } : {}, }) if (error) setError(error.message) } return (

Don{"'"}t have an account?{" "} { try { ;(window as any)?.analytics?.track?.("login_to_sign_up_click", { location: "/auth/login" }) ;(window as any)?.gtag?.("event", "login_to_sign_up_click", { location: "/auth/login" }) ;(window as any)?.plausible?.("login_to_sign_up_click", { props: { location: "/auth/login" } }) ;(window as any)?.umami?.track?.("login_to_sign_up_click", { location: "/auth/login" }) ;(window as any)?.posthog?.capture?.("login_to_sign_up_click", { location: "/auth/login" }) } catch {} }} > Sign up

) } [V0_FILE]typescriptreact:file="app/browse-jobs/loading.tsx" isMerged="true" export default function Loading() { return (

Loading jobs...

) } [V0_FILE]typescriptreact:file="app/browse-jobs/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Card } from "@/components/ui/card" import useSWR from "swr" import { Search, MapPin, Clock, DollarSign, Bookmark, BookmarkCheck, Filter, Building2, Users, TrendingUp, Briefcase, Calendar, CheckCircle2, } from "lucide-react" import BackButton from "../../components/back-button" const fetcher = (url: string) => fetch(url).then((r) => r.json()) export default function BrowseJobsPage() { const [searchQuery, setSearchQuery] = useState("") const [selectedType, setSelectedType] = useState("all") const [selectedBudget, setSelectedBudget] = useState("all") const [savedJobs, setSavedJobs] = useState([]) const [showFilters, setShowFilters] = useState(false) const { data } = useSWR<{ jobs: any[] }>("/api/jobs", fetcher) const apiJobs = data?.jobs?.map((j) => ({ id: j.id, title: j.title, company: j.company_name || "", // use real company if joined in API; otherwise blank (no placeholder) companyRating: undefined, // no fake rating location: j.location_type === "remote" ? "Remote" : j.location_type, type: (j.job_type || "Contract") .replace("full-time", "Full-time") .replace("part-time", "Part-time") .replace("contract", "Contract") .replace("gig", "Gig"), budget: j.budget_min && j.budget_max ? `$${j.budget_min}-${j.budget_max}/hr` : "", skills: j.skills || [], // hydrate when API provides job_skills description: j.description?.slice(0, 140) + (j.description?.length > 140 ? "…" : ""), posted: new Date(j.created_at).toLocaleDateString(), applicants: j.applicants_count ?? 0, verified: true, saved: false, })) ?? [] const sourceJobs = apiJobs const toggleSaveJob = (jobId: number) => { setSavedJobs((prev) => (prev.includes(jobId) ? prev.filter((id) => id !== jobId) : [...prev, jobId])) } const filteredJobs = sourceJobs.filter((job) => { const matchesSearch = (job.title || "").toLowerCase().includes(searchQuery.toLowerCase()) || (job.skills || []).some((skill: string) => (skill || "").toLowerCase().includes(searchQuery.toLowerCase())) || (job.company || "").toLowerCase().includes(searchQuery.toLowerCase()) const matchesType = selectedType === "all" || job.type === selectedType const matchesBudget = selectedBudget === "all" || (job.budget || "").includes(selectedBudget) return matchesSearch && matchesType && matchesBudget }) const activeJobs = apiJobs.length const companiesCount = new Set((data?.jobs || []).map((j: any) => j.company_id).filter(Boolean)).size const applicantsCount = (data?.jobs || []).reduce((acc: number, j: any) => acc + (j.applicants_count ?? 0), 0) const successRate = data?.success_rate || "—" return (

{/* Fixed logo */}

Shiftza {/* Hero Section with Gradient */}

{/* Header */}

Browse Jobs

Discover opportunities that match your skills and expertise

{/* Search Bar */}

setSearchQuery(e.target.value)} className="w-full pl-12 pr-4 py-6 bg-white/5 border-white/10 rounded-xl text-white placeholder:text-gray-500 focus:border-cyan-400 focus:ring-2 focus:ring-cyan-400/20" />

{/* Stats Cards */}

{activeJobs}

Active Jobs

{companiesCount}

Companies

{applicantsCount}

Applicants

{successRate}

Success Rate

{/* Main Content */}

{/* Filters Sidebar */}

Job Type

{["all", "Full-time", "Contract", "Part-time"].map((type) => ( ))}

Budget Range

{["all", "$50-70", "$70-100", "$100+"].map((budget) => ( ))}

Saved Jobs

{savedJobs.length}

jobs bookmarked

{/* Job Listings */}

Showing {filteredJobs.length} jobs

{filteredJobs.map((job) => (

{job.title}

{job.verified && ( Verified )}

{job.company && (

{job.company}

)}

{job.location}

{job.description}

{job.skills.map((skill) => ( {skill} ))}

{job.budget}

{job.type}

{job.posted}

{job.applicants} applicants

))}

{/* Pagination */}

) } [V0_FILE]css:file="app/dashboard/dashboard-theme.css" isMerged="true" /* Move inline CSS custom properties to a scoped class to avoid runtime parsing errors */ /* These tokens mirror the previous inline values exactly, preserving appearance */ .dashboard-theme { --background: 0 0% 100%; --foreground: 220 18% 8%; --card: 0 0% 100%; --card-foreground: 220 18% 8%; --popover: 0 0% 100%; --popover-foreground: 220 18% 8%; --primary: 217 91% 60%; --primary-foreground: 0 0% 100%; --secondary: 220 14% 96%; --secondary-foreground: 220 18% 18%; --muted: 220 14% 96%; --muted-foreground: 220 9% 46%; --accent: 190 95% 42%; --accent-foreground: 0 0% 100%; --destructive: 0 84% 58%; --destructive-foreground: 0 0% 100%; --border: 220 14% 90%; --input: 220 14% 90%; --ring: 217 91% 60%; /* Sidebar tokens (used by sidebar components) */ --sidebar: 0 0% 100%; --sidebar-foreground: 220 18% 8%; --sidebar-primary: 217 91% 60%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 220 14% 96%; --sidebar-accent-foreground: 220 18% 18%; --sidebar-border: 220 14% 90%; --sidebar-ring: 217 91% 60%; } [V0_FILE]typescriptreact:file="app/dashboard/employer/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { headers } from "next/headers" import { getServerSupabase } from "@/lib/supabase-server" import { DashboardShell } from "@/components/dashboard/dashboard-shell" import { WelcomeBanner } from "@/components/dashboard/welcome-banner" import { KPIRow } from "@/components/dashboard/kpi-row" import { ProfileOrCompanyCard } from "@/components/dashboard/profile-or-company-card" import { WorkProgressCard } from "@/components/dashboard/work-progress-card" import { TimeTrackerCard } from "@/components/dashboard/time-tracker-card" import { HeadlineKPIs } from "@/components/dashboard/headline-kpis" import { OnboardingSummary } from "@/components/dashboard/onboarding-summary" import { OnboardingTasksPanel } from "@/components/dashboard/onboarding-tasks-panel" import { DevicesBenefitsAccordion } from "@/components/dashboard/devices-benefits-accordion" import { CalendarStrip } from "@/components/dashboard/calendar-strip" export const dynamic = "force-dynamic" export const revalidate = 0 export const runtime = "nodejs" export default async function EmployerDashboardPage() { const supabase = getServerSupabase() const { data } = await supabase.auth.getUser() const user = data?.user if (!user) { redirect("/auth/login?redirect=/dashboard") } // Fetch real summary data (RLS-safe via user cookies) const h = headers() const host = h.get("host") const proto = h.get("x-forwarded-proto") ?? "https" const baseUrl = host ? `${proto}://${host}` : "" let summary: any | null = null try { const res = await fetch(`${baseUrl}/api/dashboard/summary`, { cache: "no-store", headers: { cookie: h.get("cookie") ?? "" }, }) if (res.ok) { summary = await res.json() } } catch (e) { // intentionally no placeholders; show minimal UI below } const role = "employer" as const const name = role === "employer" ? summary?.company?.name : summary?.profile?.name const kpis = summary?.kpis const weeklyHours: number[] | undefined = summary?.progress?.weeklyHours const obTotal = summary?.onboarding?.total const obDone = summary?.onboarding?.done const obPercent = summary?.onboarding?.percent const topBars = role === "employer" ? (summary?.topBars as Array<{ label: string; value: number }> | undefined) : undefined return (

) ?? []} />

) } [V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" isMerged="true" import type React from "react" import "./dashboard-theme.css" // Import the CSS file with the theme tokens import Link from "next/link" export default function DashboardLayout({ children, }: { children: React.ReactNode }) { // Locally override theme tokens to light without touching global .dark return (

{/* Add a compact sticky header with a back link to the main landing page */}

← Landing Page

{/* Remove the fixed max-width; make content full-bleed with responsive padding */}

{children}

) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { getServerSupabase } from "@/lib/supabase-server" import { DashboardShell } from "@/components/dashboard/dashboard-shell" import { WelcomeBanner } from "@/components/dashboard/welcome-banner" import { KPIRow } from "@/components/dashboard/kpi-row" import { ProfileOrCompanyCard } from "@/components/dashboard/profile-or-company-card" import { WorkProgressCard } from "@/components/dashboard/work-progress-card" import { TimeTrackerCard } from "@/components/dashboard/time-tracker-card" import { HeadlineKPIs } from "@/components/dashboard/headline-kpis" import { OnboardingSummary } from "@/components/dashboard/onboarding-summary" import { OnboardingTasksPanel } from "@/components/dashboard/onboarding-tasks-panel" import { DevicesBenefitsAccordion } from "@/components/dashboard/devices-benefits-accordion" import { CalendarStrip } from "@/components/dashboard/calendar-strip" import { headers } from "next/headers" export const dynamic = "force-dynamic" export const revalidate = 0 export const runtime = "nodejs" export default async function DashboardPage() { const supabase = getServerSupabase() let user: { id: string } | null = null try { const { data } = await supabase.auth.getUser() user = data.user } catch (e) { console.log("[v0] dashboard getUser error:", (e as Error)?.message) } if (!user) { redirect("/auth/login?redirect=/dashboard") } // Determine role from profiles and redirect to canonical role dashboard try { const { data: roleRow, error: roleErr } = await supabase .from("profiles") .select("role") .eq("auth_user_id", user.id) .single() if (roleErr) { console.log("[v0] dashboard role fetch error:", roleErr.message) } const role = (roleRow?.role as "worker" | "employer" | null) || null if (role === "worker") { redirect("/dashboard/worker") } else if (role === "employer") { redirect("/dashboard/employer") } } catch (e) { console.log("[v0] dashboard role redirect error:", (e as Error)?.message) } // Fetch role-aware summary; use no-store to keep fresh and avoid flicker const h = headers() const host = h.get("host") const proto = h.get("x-forwarded-proto") ?? "https" const baseUrl = host ? `${proto}://${host}` : "" let summary: any = {} try { const res = await fetch(`${baseUrl}/api/dashboard/summary`, { cache: "no-store", headers: { cookie: h.get("cookie") ?? "" }, }) summary = await res.json() } catch (e) { console.log("[v0] dashboard summary fetch error:", (e as Error)?.message) // fall back to safe defaults (keeps UI identical, avoids error boundary) summary = { role: "worker", profile: { name: "Your Name", title: "UX/UI Designer", balance: 1200 }, company: null, kpis: { employees: 0, hirings: 0, projects: 0 }, progress: { weeklyHours: [0, 0, 0, 0, 0, 0, 0] }, onboarding: { percent: 18, total: 8, done: 2 }, } } const role = (summary?.role as "worker" | "employer") || "worker" const name = role === "employer" ? summary?.company?.name || "Your Company" : summary?.profile?.name || "Your Name" const kpis = summary?.kpis || { employees: 0, hirings: 0, projects: 0 } const weeklyHours: number[] = summary?.progress?.weeklyHours || [0, 0, 0, 0, 0, 0, 0] const obTotal = Number(summary?.onboarding?.total ?? 8) const obDone = Number(summary?.onboarding?.done ?? 2) const obPercent = Number(summary?.onboarding?.percent ?? 18) const topBars = role === "employer" ? [ { label: "Interviews", value: 15 }, { label: "Offers", value: 15 }, { label: "Hiring Velocity", value: 60 }, { label: "Output", value: 10 }, ] : [ { label: "Interviews", value: 15 }, { label: "Hired", value: 15 }, { label: "Project time", value: 60 }, { label: "Output", value: 10 }, ] return (

) } [V0_FILE]typescriptreact:file="app/error.tsx" isMerged="true" "use client" import { useEffect } from "react" export default function GlobalError({ error, reset, }: { error: Error & { digest?: string } reset: () => void }) { useEffect(() => { // Useful for v0 logs to diagnose remaining issues, then can be removed console.error("[v0] Global Error:", { message: error?.message, digest: (error as any)?.digest, stack: error?.stack, }) }, [error]) return (

Something went wrong. Please try again.

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; /* @import "tw-animate-css"; */ /* Root design tokens (unchanged) */ :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 { /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */ --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); } /* Base (unchanged) */ @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Minimal keyframes (safe) */ @keyframes enter { from { opacity: var(--tw-enter-opacity, 1); transform: translate(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0)) scale(var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0)); } to { opacity: 1; transform: none; } } @keyframes exit { from { opacity: 1; transform: none; } to { opacity: var(--tw-exit-opacity, 1); transform: translate(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0)) scale(var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0)); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } /* Minimal utilities (balanced braces) */ @layer utilities { .animate-in { animation-duration: 200ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); animation-fill-mode: both; } .animate-out { animation-duration: 200ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); animation-fill-mode: both; } .fade-in-0 { animation-name: fadeIn; animation-duration: 200ms; animation-fill-mode: both; } .fade-out-0 { animation-name: fadeOut; animation-duration: 200ms; animation-fill-mode: both; } .zoom-in-95 { animation-name: enter; animation-duration: 200ms; animation-fill-mode: both; --tw-enter-scale: 0.95; } .zoom-out-95 { animation-name: exit; animation-duration: 200ms; animation-fill-mode: both; --tw-exit-scale: 0.95; } .slide-in-from-top-2 { animation-name: enter; animation-duration: 200ms; animation-fill-mode: both; --tw-enter-translate-y: -0.5rem; } .slide-in-from-bottom-2 { animation-name: enter; animation-duration: 200ms; animation-fill-mode: both; --tw-enter-translate-y: 0.5rem; } .slide-in-from-left-2 { animation-name: enter; animation-duration: 200ms; animation-fill-mode: both; --tw-enter-translate-x: -0.5rem; } .slide-in-from-right-2 { animation-name: enter; animation-duration: 200ms; animation-fill-mode: both; --tw-enter-translate-x: 0.5rem; } } [V0_FILE]typescriptreact:file="app/hire-talent/loading.tsx" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/hire-talent/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Badge } from "@/components/ui/badge" import useSWR from "swr" import { Briefcase, DollarSign, Calendar, Users, MessageSquare, FileCheck, Shield, CheckCircle2, ArrowRight, Sparkles, Search, Star, Clock, } from "lucide-react" import Link from "next/link" import BackButton from "@/components/back-button" const WORKFLOW_STEPS = [ { id: 1, title: "Create Job Post", description: "Add project details, skills needed, budget, and timeline", icon: Briefcase, color: "from-cyan-500 to-blue-500", }, { id: 2, title: "Match Talent", description: "AI recommends verified professionals based on skills and proof-of-work", icon: Sparkles, color: "from-blue-500 to-purple-500", }, { id: 3, title: "Review & Proposals", description: "Review suggested talent or receive proposals from interested professionals", icon: Search, color: "from-purple-500 to-pink-500", }, { id: 4, title: "Shortlist & Connect", description: "Chat, interview, or test candidates directly inside the platform", icon: MessageSquare, color: "from-pink-500 to-orange-500", }, { id: 5, title: "Hire & Contract", description: "Create digital contracts: hourly, fixed, or milestone-based", icon: FileCheck, color: "from-orange-500 to-red-500", }, { id: 6, title: "Work Together", description: "Collaborate with chat, file sharing, and progress tracking", icon: Users, color: "from-red-500 to-pink-500", }, { id: 7, title: "Secure Payment", description: "Payments held in escrow and released upon milestone completion", icon: Shield, color: "from-pink-500 to-purple-500", }, ] export default function HireTalentPage() { const [currentStep, setCurrentStep] = useState(0) const [jobTitle, setJobTitle] = useState("") const [jobDescription, setJobDescription] = useState("") const [budget, setBudget] = useState("") const [skills, setSkills] = useState([]) const [skillInput, setSkillInput] = useState("") const handleAddSkill = () => { if (skillInput.trim() && !skills.includes(skillInput.trim())) { setSkills([...skills, skillInput.trim()]) setSkillInput("") } } const handleRemoveSkill = (skillToRemove: string) => { setSkills(skills.filter((skill) => skill !== skillToRemove)) } const handleNextStep = () => { if (currentStep === 0 && jobTitle && jobDescription && budget && skills.length > 0) { setCurrentStep(1) } } const { data } = useSWR<{ workers: any[] }>("/api/talent", (u) => fetch(u).then((r) => r.json())) const skillSet = new Set(skills.map((s) => s.toLowerCase())) const matches = data?.workers ?.map((w) => ({ name: w.display_name, role: w.headline, rating: undefined, // do not fabricate projects: w.projects_count ?? 0, rate: w.hourly_rate ?? 0, skills: w.skills || [], availability: w.availability || "Unavailable", verified: true, })) .filter((t) => { if (!skillSet.size) return true const s = (t.skills || []).map((x: string) => (x || "").toLowerCase()) return Array.from(skillSet).some((k) => s.includes(k)) }) ?? [] return (

{/* Global Back Button */} {/* Header */}

{/* Replace inline SVG with transparent logo */}

Shiftza

{/* Hero Section */}

AI-Powered Talent Matching

Hire World-Class Talent

Post your project, get matched with verified professionals, and collaborate seamlessly — all in one platform.

{/* Workflow Steps Grid */}

{WORKFLOW_STEPS.map((step) => { const Icon = step.icon return (

Step {step.id}

{step.title}

{step.description}

) })}

{/* Job Posting Form */}

Create Your Job Post

Tell us about your project and we'll find the perfect match

{currentStep === 0 ? (

{/* Job Title */}

Job Title setJobTitle(e.target.value)} className="bg-white/5 border-white/10 text-white placeholder:text-gray-500" />

{/* Job Description */}

Project Description

setJobDescription(e.target.value)}
                    className="bg-white/5 border-white/10 text-white placeholder:text-gray-500 min-h-[150px]"
                  />
                </div>

{/* Skills Required */}
                <div>
                  <label className="block text-sm font-medium mb-2">Skills Required</label>
                  <div className="flex gap-2 mb-3">
                    <Input
                      placeholder="Add a skill (e.g., React, Node.js)"
                      value={skillInput}
                      onChange={(e) => setSkillInput(e.target.value)}
                      onKeyPress={(e) => e.key === "Enter" && handleAddSkill()}
                      className="bg-white/5 border-white/10 text-white placeholder:text-gray-500"
                    />
                    <Button onClick={handleAddSkill} className="bg-cyan-500 hover:bg-cyan-600">
                      Add
                    </Button>
                  </div>
                  <div className="flex flex-wrap gap-2">
                    {skills.map((skill) => (
                      <Badge
                        key={skill}
                        className="bg-cyan-500/20 text-cyan-400 border-cyan-500/30 px-3 py-1 cursor-pointer hover:bg-cyan-500/30"
                        onClick={() => handleRemoveSkill(skill)}
                      >
                        {skill} ×
                      </Badge>
                    ))}
                  </div>
                </div>

{/* Budget */}
                <div>
                  <label className="block text-sm font-medium mb-2 flex items-center gap-2">
                    <DollarSign className="w-4 h-4 text-cyan-400" />
                    Budget Range
                  </label>
                  <Input
                    placeholder="e.g., $5,000 - $10,000 or $50/hour"
                    value={budget}
                    onChange={(e) => setBudget(e.target.value)}
                    className="bg-white/5 border-white/10 text-white placeholder:text-gray-500"
                  />
                </div>

{/* Timeline */}
                <div>
                  <label className="block text-sm font-medium mb-2 flex items-center gap-2">
                    <Calendar className="w-4 h-4 text-cyan-400" />
                    Project Timeline
                  </label>
                  <Input
                    placeholder="e.g., 2-3 months, ASAP, Ongoing"
                    className="bg-white/5 border-white/10 text-white placeholder:text-gray-500"
                  />
                </div>

<Button
                  onClick={handleNextStep}
                  disabled={!jobTitle || !jobDescription || !budget || skills.length === 0}
                  className="w-full bg-gradient-to-r from-cyan-500 to-purple-500 hover:from-cyan-600 hover:to-purple-600 text-white font-semibold py-6 text-lg"
                >
                  Find Matching Talent
                  <ArrowRight className="ml-2 w-5 h-5" />
                </Button>
              </div>
            ) : (
              <div className="space-y-6">
                {/* Success Message */}
                <div className="text-center py-8">
                  <div className="w-20 h-20 bg-gradient-to-br from-cyan-500 to-purple-500 rounded-full flex items-center justify-center mx-auto mb-6 animate-pulse">
                    <CheckCircle2 className="w-10 h-10 text-white" />
                  </div>
                  <h3 className="text-3xl font-bold mb-4">Job Post Created!</h3>
                  <p className="text-gray-400 text-lg mb-8">
                    Our AI is analyzing your requirements and matching you with the best talent...
                  </p>
                </div>

{/* Matched Talent */}
                <div>
                  <h4 className="text-2xl font-semibold mb-6 flex items-center gap-2">
                    <Sparkles className="w-6 h-6 text-cyan-400" />
                    Top Matched Professionals
                  </h4>

<div className="space-y-4">
                    {matches.map((talent, index) => (
                      <Card
                        key={index}
                        className="bg-white/5 border-white/10 p-6 hover:bg-white/10 transition-all duration-300"
                      >
                        <div className="flex items-start justify-between mb-4">
                          <div>
                            <div className="flex items-center gap-2 mb-1">
                              <h5 className="text-xl font-semibold">{talent.name}</h5>
                              {talent.verified && (
                                <Badge className="bg-cyan-500/20 text-cyan-400 border-cyan-500/30">
                                  <CheckCircle2 className="w-3 h-3 mr-1" />
                                  Verified
                                </Badge>
                              )}
                            </div>
                            <p className="text-gray-400">{talent.role}</p>
                          </div>
                          <div className="text-right">
                            {typeof talent.rating === "number" && (
                              <div className="flex items-center gap-1 text-yellow-400 mb-1">
                                <Star className="w-4 h-4 fill-yellow-400" />
                                <span className="font-semibold">{talent.rating}</span>
                              </div>
                            )}
                            <p className="text-sm text-gray-400">{talent.projects} projects</p>
                          </div>
                        </div>

<div className="flex flex-wrap gap-2 mb-4">
                          {(talent.skills || []).map((skill: string) => (
                            <Badge key={skill} className="bg-purple-500/20 text-purple-400 border-purple-500/30">
                              {skill}
                            </Badge>
                          ))}
                        </div>

<div className="flex items-center justify-between pt-4 border-t border-white/10">
                          <div className="flex items-center gap-4 text-sm text-gray-400">
                            <div className="flex items-center gap-1">
                              <DollarSign className="w-4 h-4" />
                              {talent.rate ? `$${talent.rate}/hr` : "—"}
                            </div>
                            <div className="flex items-center gap-1">
                              <Clock className="w-4 h-4" />
                              {talent.availability}
                            </div>
                          </div>
                          <div className="flex gap-2">
                            <Button variant="outline" className="border-white/20 hover:bg-white/10 bg-transparent">
                              View Profile
                            </Button>
                            <Button className="bg-gradient-to-r from-cyan-500 to-purple-500 hover:from-cyan-600 hover:to-purple-600">
                              <MessageSquare className="w-4 h-4 mr-2" />
                              Contact
                            </Button>
                          </div>
                        </div>
                      </Card>
                    ))}
                    {matches.length === 0 && <p className="text-white/60">No matches yet. Add skills and try again.</p>}
                  </div>
                </div>

<Button
                  onClick={() => setCurrentStep(0)}
                  variant="outline"
                  className="w-full border-white/20 hover:bg-white/10"
                >
                  Create Another Job Post
                </Button>
              </div>
            )}
          </Card>
        </div>
      </section>

{/* Features Section */}
      <section className="py-20 bg-black">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold mb-4">Why Hire on Shiftza?</h2>
            <p className="text-xl text-gray-400 font-mono">Everything you need to hire and manage talent</p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <Card className="bg-gradient-to-br from-cyan-500/10 to-blue-500/10 border-cyan-500/20 p-8">
              <Shield className="w-12 h-12 text-cyan-400 mb-4" />
              <h3 className="text-2xl font-semibold mb-3">Secure Payments</h3>
              <p className="text-gray-400">
                Escrow protection ensures payments are only released when milestones are completed to your satisfaction.
              </p>
            </Card>

<Card className="bg-gradient-to-br from-purple-500/10 to-pink-500/10 border-purple-500/20 p-8">
              <Sparkles className="w-12 h-12 text-purple-400 mb-4" />
              <h3 className="text-2xl font-semibold mb-3">AI Matching</h3>
              <p className="text-gray-400">
                Our AI analyzes skills, experience, and project history to recommend the perfect professionals for your
                needs.
              </p>
            </Card>

<Card className="bg-gradient-to-br from-orange-500/10 to-red-500/10 border-orange-500/20 p-8">
              <Users className="w-12 h-12 text-orange-400 mb-4" />
              <h3 className="text-2xl font-semibold mb-3">Built-in Collaboration</h3>
              <p className="text-gray-400">
                Chat, share files, track progress, and manage everything in one place. No need for external tools.
              </p>
            </Card>
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="py-20 bg-gradient-to-br from-cyan-500/20 via-purple-500/20 to-pink-500/20">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-4xl md:text-5xl font-bold mb-6">Ready to Build Your Team?</h2>
          <p className="text-xl text-gray-300 mb-8 font-mono">
            Join thousands of companies hiring verified talent on Shiftza
          </p>
          <Button
            onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
            className="bg-white text-black hover:bg-gray-200 px-8 py-6 text-lg font-semibold"
          >
            Post Your First Job
            <ArrowRight className="ml-2 w-5 h-5" />
          </Button>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/icon.tsx" isMerged="true"
import { ImageResponse } from "next/og"

export const runtime = "edge"
export const size = {
  width: 32,
  height: 32,
}
export const contentType = "image/png"

export default function Icon() {
  return new ImageResponse(
    <div
      style={{
        width: "100%",
        height: "100%",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        background: "white",
      }}
    >
      <img
        src="/images/design-mode/Picsart_25-10-06_23-22-59-176%281%29%281%29.png"
        alt="Shiftza Logo"
        width="32"
        height="32"
      />
    </div>,
    {
      ...size,
    },
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import "./globals.css"
import "./animation-utilities.css"
import type { Metadata } from "next"
import BackButton from "@/components/back-button"

export const metadata: Metadata = {
  title: "Shiftza – Skills Lead, Not CVs.",
  description:
    "Millions of skilled workers remain unseen — Shiftza is the premier skills-first talent platform where professionals without degrees can prove their worth and access real opportunities.",
  keywords: "skills-first hiring, non-degree professionals, talent platform, prove your skills, access opportunities",
  authors: [{ name: "Shiftza Team" }],
  creator: "Shiftza",
  publisher: "Shiftza",
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },
  openGraph: {
    type: "website",
    locale: "en_US",
    url: "https://runyoyo.com",
    siteName: "Shiftza",
    title: "Shiftza – Skills Lead, Not CVs.",
    description:
      "Millions of skilled workers remain unseen — Shiftza is the premier skills-first talent platform where professionals without degrees can prove their worth and access real opportunities.",
    images: [
      {
        url: "https://runyoyo.com/images/og-new.jpeg",
        width: 1200,
        height: 630,
        alt: "Shiftza skills-first talent platform",
        type: "image/jpeg",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "Shiftza – Skills Lead, Not CVs.",
    description:
      "Millions of skilled workers remain unseen — Shiftza is the premier skills-first talent platform where professionals without degrees can prove their worth and access real opportunities.",
    images: ["https://runyoyo.com/images/og-new.jpeg"],
    creator: "@jackjack_eth",
    site: "@yoyo_dev",
  },
  alternates: {
    canonical: "https://runyoyo.com",
  },
  category: "Technology",
  classification: "Developer Tools",
  generator: "Next.js",
  applicationName: "Shiftza",
  referrer: "origin-when-cross-origin",
  formatDetection: {
    email: false,
    address: false,
    telephone: false,
  },
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className="dark">
      <head>
        <link rel="preconnect" href="https://hebbkx1anhila5yf.public.blob.vercel-storage.com" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />

{/* Software Application JSON-LD */}
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify({
              "@context": "https://schema.org",
              "@type": "SoftwareApplication",
              name: "Shiftza - Skills Lead, Not CVs.",
              description:
                "Shiftza lets professionals without degrees prove their worth and access real opportunities through a skills-first talent platform.",
              url: "https://runyoyo.com",
              applicationCategory: "DeveloperApplication",
              operatingSystem: "Windows, macOS, Linux",
              offers: {
                "@type": "Offer",
                price: "0",
                priceCurrency: "USD",
              },
              author: {
                "@type": "Organization",
                name: "Shiftza",
                url: "https://runyoyo.com",
              },
              aggregateRating: {
                "@type": "AggregateRating",
                ratingValue: "4.8",
                ratingCount: "2000",
              },
              featureList: [
                "AI mistake recovery and rollback",
                "One-click version restore",
                "Cross-IDE compatibility (Cursor, Windsurf, VS Code, Claude Code, OpenAI Codex)",
                "Real-time code backup",
                "AI search across code versions",
                "Vibe coding workflow optimization",
              ],
              audience: {
                "@type": "Audience",
                audienceType: "AI developers, software engineers using AI assistants, vibe coders",
              },
            }),
          }}
        />

{/* FAQ JSON-LD */}
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify({
              "@context": "https://schema.org",
              "@type": "FAQPage",
              mainEntity: [
                {
                  "@type": "Question",
                  name: "I already use Git. Why would I need YoYo?",
                  acceptedAnswer: {
                    "@type": "Answer",
                    text: "Git is great for commits. YoYo is for everything before that — messy AI edits, experiments, prompts gone wrong. It gives you a safety net without bloating your commit history.",
                  },
                },
                {
                  "@type": "Question",
                  name: "Is it free?",
                  acceptedAnswer: {
                    "@type": "Answer",
                    text: "Yes — there's a generous free tier. Pro and Team plans coming soon.",
                  },
                },
                {
                  "@type": "Question",
                  name: "Will this mess up my Git repo?",
                  acceptedAnswer: {
                    "@type": "Answer",
                    text: "Nope. YoYo keeps everything separate from your Git repo. No staged files. No surprise commits. Your .git/ stays clean and untouched.",
                  },
                },
                {
                  "@type": "Question",
                  name: "Where is my version history stored?",
                  acceptedAnswer: {
                    "@type": "Answer",
                    text: "Your full version history lives on your machine — not in the cloud.",
                  },
                },
                {
                  "@type": "Question",
                  name: "How does YoYo secure AI usage?",
                  acceptedAnswer: {
                    "@type": "Answer",
                    text: "YoYo uses fast, secure LLM providers like Groq, with zero data retention. Your code is encrypted in transit using TLS 1.2+ and never stored or used for training. We don't keep logs. We don't keep copies.",
                  },
                },
                {
                  "@type": "Question",
                  name: "Does it work with branches?",
                  acceptedAnswer: {
                    "@type": "Answer",
                    text: "Yes — beautifully. Each Git branch has its own version timeline in YoYo. Snapshots stay scoped to your work.",
                  },
                },
              ],
            }),
          }}
        />

{/* Video Schema JSON-LD */}
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify({
              "@context": "https://schema.org",
              "@type": "VideoObject",
              name: "YOYO AI Version Control - Save, Preview, Restore Demo",
              description:
                "See how YOYO lets you instantly save your code progress, preview any past version, and restore with one click when AI prompts go wrong. Perfect for vibe coding workflows.",
              thumbnailUrl: "https://runyoyo.com/images/save-thumbnail.jpeg",
              uploadDate: "2024-12-01",
              duration: "PT45S",
              contentUrl:
                "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/yoyo-save-2-DUbUp5aKE9GtNY9Diok2eG6SW2qHCX.mp4",
              embedUrl: "https://runyoyo.com",
              publisher: {
                "@type": "Organization",
                name: "Shiftza",
                logo: {
                  "@type": "ImageObject",
                  url: "https://runyoyo.com/android-chrome-512x512.png",
                },
              },
              keywords: "AI version control, vibe coding, code backup, AI mistakes, developer tools",
              category: "Technology",
            }),
          }}
        />

{/* Additional Video Schema for AI Search Demo */}
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify({
              "@context": "https://schema.org",
              "@type": "VideoObject",
              name: "YOYO Agentic AI Search - Query Your Code History",
              description:
                "YOYO's AI search lets you ask questions about your entire coding timeline across versions, branches, and editors. Find any change instantly with natural language queries.",
              thumbnailUrl: "https://runyoyo.com/images/preview-thumbnail.jpeg",
              uploadDate: "2024-12-01",
              duration: "PT60S",
              contentUrl:
                "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/favorites-FFCUeeEFzfxDBIhgGACi7YGpYQZbnU.mp4",
              embedUrl: "https://runyoyo.com",
              publisher: {
                "@type": "Organization",
                name: "Shiftza",
                logo: {
                  "@type": "ImageObject",
                  url: "https://runyoyo.com/android-chrome-512x512.png",
                },
              },
              keywords: "AI search, code history, version control, AI assistant, developer productivity",
              category: "Technology",
            }),
          }}
        />
      </head>
      <body>
        <BackButton />
        {children}
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescript:file="app/manifest.ts" isMerged="true"
import type { MetadataRoute } from "next"

export default function manifest(): MetadataRoute.Manifest {
  return {
    name: "Shiftza - Skills-First Talent Platform",
    short_name: "Shiftza",
    description: "Built to help skilled professionals without degrees prove their worth and access real opportunities.",
    start_url: "/",
    display: "standalone",
    background_color: "#000000",
    theme_color: "#000000",
    icons: [
      {
        src: "/android-chrome-192x192.png",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "/android-chrome-512x512.png",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  }
}
[V0_FILE]typescriptreact:file="app/messages/page.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import ThreadList from "@/components/messaging/thread-list"
import ThreadView from "@/components/messaging/thread-view"
import { Card } from "@/components/ui/card"

export default function MessagesPage() {
  const [selected, setSelected] = useState<string | null>(null)

// pick the first thread automatically on mount/list updates (handled inside list via ensureSeed)
  useEffect(() => {
    // selection stays null until user clicks; keeping UX explicit
  }, [])

return (
    <div className="min-h-screen bg-black text-white">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <h1 className="text-3xl md:text-4xl font-bold mb-6">Messages</h1>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="md:col-span-1">
            <ThreadList selectedId={selected} onSelect={setSelected} />
          </div>
          <div className="md:col-span-2 min-h-[60vh]">
            {selected ? (
              <ThreadView threadId={selected} />
            ) : (
              <Card className="p-8 bg-white/5 border-white/10 text-white/70">
                Select a conversation to start chatting.
              </Card>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/mobile-hero/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/mobile-hero/page.tsx" isMerged="true"
// "use client" is required since we use state for the SignUpCard modal
"use client"

import { useState } from "react"
import SignUpCard from "@/components/sign-up-card"
import SearchInterface from "@/components/search-interface"

export default function MobileHeroPage() {
  const [isSignUpOpen, setIsSignUpOpen] = useState(false)

// Minimal stories list (compact, 1-per-row)
  const stories = [
    {
      id: 1,
      title: "Will Skills Speak Louder Than Certificates?",
      byline: "Arjun Mehta • 5 years exp • Software Development",
      excerpt:
        "Self-taught programmer who can code better than CS grads, but HR filters me out before anyone sees my work.",
      tags: ["Full-Stack", "React & Node.js", "Cloud"],
    },
    {
      id: 2,
      title: "Designing Your Portfolio for Real Employers",
      byline: "Priya Singh • 3 years exp • Product Design",
      excerpt:
        "Projects that tell a story get more callbacks. Learn how to turn case studies into outcomes recruiters remember.",
      tags: ["UX", "UI", "Case Studies"],
    },
    {
      id: 3,
      title: "From Freelance to Full-Time",
      byline: "Dev Patel • 4 years exp • Data",
      excerpt: "Turning short gigs into a compelling narrative that shows reliability, growth, and business impact.",
      tags: ["Analytics", "SQL", "Storytelling"],
    },
  ]

return (
    <main className="md:hidden px-4 py-6 space-y-6">
      {/* Video at top (height 220px) */}
      <section aria-label="Hero video" className="w-full">
        <div className="w-full h-[220px] overflow-hidden rounded-2xl bg-black">
          <video
            src="/videos/hero-video-v3.mp4"
            className="w-full h-full object-cover"
            muted
            loop
            playsInline
            autoPlay
            controls={false}
            aria-label="Product hero video"
          />
        </div>
      </section>

{/* Headline and subtext */}
      <section className="space-y-3">
        <h1 className="font-semibold text-balance" style={{ fontSize: "clamp(32px, 7.5vw, 56px)", lineHeight: 1.1 }}>
          Your Skills Are Your Superpower
        </h1>
        <p className="text-sm leading-relaxed text-white/80">
          Millions of skilled workers remain unseen — shift to a skills‑first world where your work speaks for you.
        </p>
      </section>

{/* Search panel (glass) */}
      <section aria-label="Search" className="w-full">
        <div className="w-full rounded-2xl bg-white/10 backdrop-blur-md border border-white/20 p-4">
          <SearchInterface />
        </div>
      </section>

{/* Stories list - compact, 1 per row */}
      <section aria-label="Stories and updates" className="space-y-3">
        {stories.map((s) => (
          <article key={s.id} className="rounded-xl bg-white/10 backdrop-blur-md border border-white/15 p-4 shadow-sm">
            <h3 className="text-base font-semibold mb-1">{s.title}</h3>
            <p className="text-xs text-white/70 mb-2">{s.byline}</p>
            <p className="text-sm text-white/90 mb-3">{s.excerpt}</p>
            <div className="flex flex-wrap gap-2">
              {s.tags.map((t) => (
                <span
                  key={t}
                  className="text-[11px] px-2 py-1 rounded-full bg-white/10 border border-white/15 text-white/80"
                >
                  {t}
                </span>
              ))}
            </div>
          </article>
        ))}
      </section>

{/* CTA: compact SignUpCard under stories (choice 6B) */}
      <section className="pt-2">
        <button
          onClick={() => setIsSignUpOpen(true)}
          className="w-full rounded-xl bg-white text-black font-semibold py-3"
          aria-haspopup="dialog"
          aria-expanded={isSignUpOpen ? "true" : "false"}
        >
          Sign up
        </button>
        {/* Render SignUpCard as provided by your project */}
        <SignUpCard open={isSignUpOpen} onClose={() => setIsSignUpOpen(false)} initialTab="signup" />
      </section>

{/* Note: Desktop shows nothing here; this route is mobile-focused by design */}
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/opengraph-image.tsx" isMerged="true"
import { ImageResponse } from "next/og"

export const runtime = "edge"

export const alt =
  "Your Skills Are YourSuperpower — Millions of skilled workers remain unseen — Shiftza is the premier skills-first talent platform where professionals without degrees can prove their worth and access real opportunities."
export const size = {
  width: 1200,
  height: 630,
}

export const contentType = "image/png"

// This route generates the Open Graph image
export default function Image() {
  return new ImageResponse(
    <div style={{ display: "flex", justifyContent: "center", alignItems: "center", width: "100%", height: "100%" }}>
      <img
        src="/images/design-mode/og.jpg.jpeg"
        alt="Your Skills Are YourSuperpower"
        style={{ width: "100%", height: "100%", objectFit: "cover" }}
      />
    </div>,
    {
      ...size,
    },
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
"use client"
import FeatureVideo from "@/components/feature-video"
import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import FAQSection from "@/components/faq-section"
import SaveReviewRestoreSection from "@/components/save-review-restore-section"
import AgenticAISearchSection from "@/components/agentic-ai-search-section"
import WhyNotGitSection from "@/components/why-not-git-section"
import TestimonialsSection from "@/components/testimonials-section"
import VibeCodingTweetsSection from "@/components/vibe-coding-tweets-section"
import SearchInterface from "@/components/search-interface"
import { useState } from "react"
import AnnouncementBanner from "@/components/announcement-banner"
import { useRouter } from "next/navigation"
import { HeroFrame } from "@/components/hero-frame"

// Direct Vercel Blob URLs for videos
const VIDEO_URLS = {
  savePreview:
    "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/save-review-restore-g3BK0sricXTSPMzxK4iGrmXBUwPt11.mp4",
  crossIde: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/cross-ides-PZyN9x34tNJsgQrbFkY3UUaatEaePh.mp4",
}

export default function Home() {
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [isBannerVisible, setIsBannerVisible] = useState(true)
  const router = useRouter()

const openInstallModal = () => {
    setIsModalOpen(true)
  }

const openTalentSearch = () => {
    router.push("/talent-search")
  }

const openBrowseJobs = () => {
    router.push("/browse-jobs")
  }

return (
    <div
      className={`min-h-screen bg-background text-foreground font-geist transition-all duration-300 mt-2.5 ${isBannerVisible ? "pt-12 sm:pt-20 md:pt-[108px]" : "pt-8 md:pt-20"}`}
    >
      {/* Announcement Banner */}
      <AnnouncementBanner onVisibilityChange={setIsBannerVisible} />

{/* Navigation */}
      <Navbar isBannerVisible={isBannerVisible} />

<div className="max-w-[1920px] mx-auto relative px-0 md:px-6 md:px-8">
        {/* Hero Section */}
        <section className="relative rounded-[16px] mt-2 mb-6 min-h-[600px] md:min-h-[calc(100vh-144px)] font-geist text-white overflow-hidden bg-background">
          <img
            src="/images/design-mode/ChatGPT%20Image%20Oct%2012%2C%202025%2C%2005_25_17%20PM%281%29.jpg"
            alt=""
            aria-hidden="true"
            className="absolute inset-0 w-full h-full object-cover hidden md:block"
          />
          {/* Content - Split Layout */}
          <div className="relative z-10 h-full my-2.5">
            {/* Mobile Layout - Stack vertically */}
            <div className="flex flex-col md:hidden mx-[10px] p-0 pt-0">
              {/* Hero Content */}
              <div className="mb-2">
                <h1
                  className="font-semibold ml-3.5 text-left pr-8 mr-0 mb-1 mt-4"
                  style={{
                    fontSize: "clamp(24px, 5.5vw, 45px)",
                    lineHeight: "1.1",
                    letterSpacing: "-0.02em",
                    fontFamily: 'GeistSans, "GeistSans Fallback", sans-serif',
                    color: "#FFFFFF",
                    textShadow: "0 1px 2px rgba(0,0,0,0.3)",
                  }}
                >
                  Your Skills is Your
                  <br />
                  <span
                    style={{
                      fontSize: "clamp(28px, 6.5vw, 56px)",
                      background: "linear-gradient(90deg, #FFD700 0%, #FFA500 100%)",
                      WebkitBackgroundClip: "text",
                      WebkitTextFillColor: "transparent",
                      backgroundClip: "text",
                    }}
                  >
                    Superpower
                  </span>
                </h1>
                <p
                  className="ml-0 pl-2.5 leading-tight tracking-tighter text-left mb-0 mt-1.5"
                  style={{
                    fontFamily: "GeistMono, monospace",
                    fontSize: "clamp(13px, 2.8vw, 18px)",
                    lineHeight: "1.35",
                    color: "#FFFFFF",
                  }}
                >
                  You've seen it before: impressive résumés and big degrees — but when the real work starts, something's
                  missing.
                </p>
              </div>

{/* Search Interface */}
              <div className="mb-2">
                <SearchInterface onFindTalent={openTalentSearch} onBrowseJobs={openBrowseJobs} />
              </div>

{/* Stories View on Mobile */}
              <div>
                <HeroFrame className="w-full h-[28rem]" />
              </div>
            </div>

{/* Desktop Layout - 2-column layout */}
            <div className="hidden md:flex items-stretch gap-0">
              {/* Left: Hero Content (60%) */}
              <div className="flex flex-col justify-start p-8 lg:p-12 md:w-3/5">
                <h1
                  className="font-semibold mb-4"
                  style={{
                    fontSize: "clamp(48px, 5vw, 72px)",
                    lineHeight: "1.1",
                    letterSpacing: "-0.02em",
                    fontFamily: 'GeistSans, "GeistSans Fallback", sans-serif',
                    color: "#FFFFFF",
                    textShadow: "0 1px 2px rgba(0,0,0,0.3)",
                  }}
                >
                  Your Skills Are Your
                  <br />
                  <span
                    style={{
                      background: "linear-gradient(90deg, #FFD700 0%, #FFA500 100%)",
                      WebkitBackgroundClip: "text",
                      WebkitTextFillColor: "transparent",
                      backgroundClip: "text",
                    }}
                  >
                    Superpower
                  </span>
                </h1>
                <p
                  className="mb-8 max-w-xl"
                  style={{
                    fontFamily: "GeistMono, monospace",
                    fontSize: "clamp(12px, 1.2vw, 15px)",
                    lineHeight: "1.5",
                    color: "#FFFFFF",
                  }}
                >
                  Millions of skilled workers remain unseen — Shiftza is the premier skills-first talent platform where
                  professionals without degrees can prove their worth and access real opportunities.
                </p>

{/* Right: Framed image (40%) */}
              <div className="md:w-2/5 p-0 relative">
                <HeroFrame className="h-full" />
              </div>
            </div>
          </div>
        </section>

{/* Works wherever you build */}
        <section id="features" className="pb-12 md:pb-16 bg-background mt-[60px] md:mt-[112px]">
          <div className="container mx-auto px-4 text-center">
            <p
              className="uppercase mb-6 md:mb-8"
              style={{
                fontFamily:
                  'GeistMono, ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace',
                fontSize: "14px",
                lineHeight: "18px",
                fontWeight: "400",
                letterSpacing: "0.5px",
                color: "#999999",
              }}
            >
              No degree? No problem! Skills-based hiring is growing in India.
            </p>
            {/* Updated company names */}
            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-y-8 sm:gap-y-12 gap-x-6 md:gap-x-8 mb-8 md:mb-12 max-w-6xl mx-auto">
              <CompanyName name="Apple" />
              <CompanyName name="IBM" />
              <CompanyName name="Google" />
              <CompanyName name="Amazon" />
              <CompanyName name="Tesla" />
              <CompanyName name="Netflix" />
            </div>
            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-y-8 sm:gap-y-12 gap-x-6 md:gap-x-8 max-w-6xl mx-auto">
              <CompanyName name="Airbnb" />
              <CompanyName name="Adobe" />
              <CompanyName name="Spotify" />
              <CompanyName name="LinkedIn" />
              <CompanyName name="Intel" />
              <CompanyName name="Shopify" />
            </div>
          </div>
        </section>

<section className="py-16 md:py-24 bg-background">
          <div className="max-w-6xl mx-auto px-4 sm:px-6 text-center mb-12">
            <h2
              className="mb-4 font-semibold"
              style={{
                backgroundImage: "linear-gradient(rgb(245, 245, 245), rgb(245, 245, 245) 29%, rgb(153, 153, 153))",
                color: "transparent",
                fontFamily: "GeistSans, sans-serif",
                fontSize: "clamp(32px, 6vw, 52px)",
                fontWeight: 600,
                letterSpacing: "clamp(-1.5px, -0.04em, -2.08px)",
                lineHeight: "1.15",
                textAlign: "center",
                WebkitBackgroundClip: "text",
                backgroundClip: "text",
              }}
            >
              50,000+ Professionals Trust Shiftza
            </h2>
            <p
              className="max-w-3xl mx-auto text-white/80"
              style={{
                fontFamily: "GeistMono, monospace",
                fontSize: "clamp(16px, 3vw, 22px)",
                lineHeight: "1.4",
                textAlign: "center",
              }}
            >
              From self-taught developers to skilled designers — trusted worldwide for skills-first opportunities.
            </p>
          </div>

<div className="space-y-8 overflow-hidden">
            <div className="relative">
              <div className="flex animate-scroll-left whitespace-nowrap">
                <div className="flex">
                  {[
                    "Mumbai",
                    "Delhi",
                    "Bengaluru",
                    "Hyderabad",
                    "Ahmedabad",
                    "Chennai",
                    "Kolkata",
                    "Pune",
                    "Jaipur",
                    "Surat",
                    "Lucknow",
                    "Kanpur",
                    "Nagpur",
                    "Indore",
                    "Thane",
                    "Bhopal",
                    "Visakhapatnam",
                    "Patna",
                    "Vadodara",
                    "Ghaziabad",
                  ]
                    .concat([
                      "Mumbai",
                      "Delhi",
                      "Bengaluru",
                      "Hyderabad",
                      "Ahmedabad",
                      "Chennai",
                      "Kolkata",
                      "Pune",
                      "Jaipur",
                      "Surat",
                      "Lucknow",
                      "Kanpur",
                      "Nagpur",
                      "Indore",
                      "Thane",
                      "Bhopal",
                      "Visakhapatnam",
                      "Patna",
                      "Vadodara",
                      "Ghaziabad",
                    ])
                    .map((city, index) => (
                      <span
                        key={index}
                        style={{
                          fontFamily: 'GeistSans, "GeistSans Fallback", sans-serif',
                          fontSize: "20px",
                          lineHeight: "28px",
                          fontWeight: "700",
                          letterSpacing: "normal",
                          color: "#999999",
                          whiteSpace: "nowrap",
                          padding: "0 1rem",
                        }}
                      >
                        {city}
                      </span>
                    ))}
                </div>
              </div>
            </div>

<div className="relative">
              <div className="flex animate-scroll-right whitespace-nowrap">
                <div className="flex">
                  {[
                    "Ludhiana",
                    "Agra",
                    "Nashik",
                    "Faridabad",
                    "Meerut",
                    "Rajkot",
                    "Kalyan-Dombivli",
                    "Vasai-Virar",
                    "Varanasi",
                    "Srinagar",
                    "Aurangabad",
                    "Dhanbad",
                    "Amritsar",
                    "Navi Mumbai",
                    "Prayagraj",
                    "Ranchi",
                    "Coimbatore",
                    "Jabalpur",
                    "Gwalior",
                    "Vijayawada",
                  ]
                    .concat([
                      "Ludhiana",
                      "Agra",
                      "Nashik",
                      "Faridabad",
                      "Meerut",
                      "Rajkot",
                      "Kalyan-Dombivli",
                      "Vasai-Virar",
                      "Varanasi",
                      "Srinagar",
                      "Aurangabad",
                      "Dhanbad",
                      "Amritsar",
                      "Navi Mumbai",
                      "Prayagraj",
                      "Ranchi",
                      "Coimbatore",
                      "Jabalpur",
                      "Gwalior",
                      "Vijayawada",
                    ])
                    .map((city, index) => (
                      <span
                        key={index}
                        style={{
                          fontFamily: 'GeistSans, "GeistSans Fallback", sans-serif',
                          fontSize: "20px",
                          lineHeight: "28px",
                          fontWeight: "700",
                          letterSpacing: "normal",
                          color: "#999999",
                          whiteSpace: "nowrap",
                          padding: "0 1rem",
                        }}
                      >
                        {city}
                      </span>
                    ))}
                </div>
              </div>
            </div>
          </div>
        </section>

<SaveReviewRestoreSection onOpenInstall={openInstallModal} />
        <AgenticAISearchSection onOpenInstall={openInstallModal} />
        <FeatureVideoSection
          title="Seamless Project Collaboration"
          description="Work with companies across platforms — switch between projects and keep your portfolio updated in real-time."
          videoSrc="/videos/cross-ides.mp4"
          fallbackVideoSrc={VIDEO_URLS.crossIde}
          gradientClass="gradient-yellow-red-diagonal"
        />
        <WhyNotGitSection onOpenInstall={openInstallModal} />
        <VibeCodingTweetsSection onOpenInstall={openInstallModal} />
        <div id="testimonials">
          <TestimonialsSection />
        </div>
        <div id="faq">
          <FAQSection onOpenInstall={openInstallModal} />
        </div>
        <Footer />
      </div>
    </div>
  )
}

function CompanyName({
  name,
  noWrapDesktop = false,
  className = "",
}: { name: string; noWrapDesktop?: boolean; className?: string }) {
  const logoMap: Record<string, string> = {
    Apple: "https://cdn.simpleicons.org/apple/FFFFFF",
    IBM: "https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg",
    Google: "https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg",
    Amazon: "https://upload.wikimedia.org/wikipedia/commons/a/a9/Amazon_logo.svg",
    Tesla: "https://upload.wikimedia.org/wikipedia/commons/b/bd/Tesla_Motors.svg",
    Netflix: "https://upload.wikimedia.org/wikipedia/commons/0/08/Netflix_logo_without_text.svg",
    Airbnb: "https://upload.wikimedia.org/wikipedia/commons/6/69/Airbnb_Logo_B%C3%A9lo.svg",
    Adobe: "https://upload.wikimedia.org/wikipedia/commons/6/6e/Adobe_Corporate_logo.svg",
    Spotify: "https://upload.wikimedia.org/wikipedia/commons/1/19/Spotify_logo_without_text.svg",
    LinkedIn: "https://upload.wikimedia.org/wikipedia/commons/c/ca/LinkedIn_logo_initials.png",
    Intel: "https://upload.wikimedia.org/wikipedia/commons/7/7d/Intel_logo_%282006-2020%29.svg",
    Shopify: "https://upload.wikimedia.org/wikipedia/commons/0/0e/Shopify_logo_2018.svg",
  }

const logoUrl = logoMap[name]

return (
    <div className={`flex justify-center items-center px-2 ${className}`}>
      {logoUrl ? (
        <img src={logoUrl || "/placeholder.svg"} alt={`${name} logo`} className="h-8 w-auto object-contain" />
      ) : (
        <span
          className={"text-[#999999] text-center" + (noWrapDesktop ? " md:whitespace-nowrap" : "")}
          style={{
            fontFamily: 'GeistSans, "GeistSans Fallback", sans-serif',
            fontSize: "20px",
            lineHeight: "28px",
            fontWeight: "700",
            letterSpacing: "normal",
          }}
        >
          {name}
        </span>
      )}
    </div>
  )
}

function FeatureVideoSection({
  title,
  description,
  videoSrc,
  fallbackVideoSrc,
  gradientClass,
}: {
  title: string
  description: string
  videoSrc: string
  fallbackVideoSrc?: string
  gradientClass: string
}) {
  return (
    <div className="my-24">
      <div className="text-center mb-6 md:mb-12 px-4">
        <h2
          className="mb-4 font-semibold"
          style={{
            backgroundImage: "linear-gradient(rgb(245, 245, 245), rgb(245, 245, 245) 29%, rgb(153, 153, 153))",
            color: "transparent",
            fontFamily: "GeistSans, sans-serif",
            fontSize: "clamp(32px, 6vw, 52px)",
            fontWeight: 600,
            letterSpacing: "clamp(-1.5px, -0.04em, -2.08px)",
            lineHeight: "1.15",
            textAlign: "center",
            WebkitBackgroundClip: "text",
            backgroundClip: "text",
          }}
        >
          {title}
        </h2>
        <p
          className="max-w-2xl mx-auto"
          style={{
            color: "#f5f5f5",
            fontFamily: "GeistMono, monospace",
            fontSize: "clamp(16px, 3vw, 22px)",
            lineHeight: "1.3",
            textAlign: "center",
          }}
        >
          {description}
        </p>
      </div>

<div className="flex justify-center">
        <div className={`gradient-container ${gradientClass} max-w-[1296px] w-full`}>
          <div className="absolute inset-0 bg-black/35 rounded-[16px]"></div>
          <div className="noise-texture"></div>
          <div className="relative z-10 pt-4 sm:pt-12 md:pt-16 pb-0 px-4 sm:px-6 md:px-12">
            <div className="rounded-t-lg overflow-hidden shadow-2xl max-w-4xl mx-auto border border-white/10 border-b-0">
              <FeatureVideo src={videoSrc} alt={title} fallbackSrc={fallbackVideoSrc} />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/protected/page.tsx" isMerged="true"
import { redirect } from "next/navigation"

import { createClient } from "@/lib/supabase/server"

export const dynamic = "force-dynamic"
export const revalidate = 0
export const runtime = "nodejs"

export default async function ProtectedPage() {
  const supabase = await createClient()

const { data, error } = await supabase.auth.getUser()
  if (error || !data?.user) {
    redirect("/auth/login")
  }

return (
    <div className="flex-1 w-full flex flex-col gap-12">
      <h1>Protected Page</h1>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/sign-up/check-email/page.tsx" isMerged="true"
export default function CheckEmail() {
  return (
    <main className="min-h-[50vh] max-w-2xl mx-auto px-6 py-16 text-center">
      <h1 className="text-3xl md:text-4xl font-semibold mb-4">Verify your email</h1>
      <p className="text-white/80">
        We sent you a verification link. Please click it to continue. You’ll be redirected back automatically.
      </p>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/sign-up/employer/project/page.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { getBrowserSupabase } from "@/lib/supabase-browser"
import { useRouter } from "next/navigation"

export default function EmployerProject() {
  const supabase = getBrowserSupabase()
  const router = useRouter()
  const [title, setTitle] = useState("")
  const [description, setDescription] = useState("")
  const [budget, setBudget] = useState("")
  const [saving, setSaving] = useState(false)
  const [isExiting, setIsExiting] = useState(false)

async function onSave(e: React.FormEvent) {
    e.preventDefault()
    if (saving) return
    setSaving(true)
    try {
      const {
        data: { user },
      } = await supabase.auth.getUser()
      if (!user) {
        router.push("/auth/login")
        return
      }

await supabase.from("projects").insert({
        profile_id: user.id,
        title,
        description,
        budget,
        status: "open",
      })

await supabase
        .from("profiles")
        .update({ onboarding_status: "employer_project_created" })
        .eq("user_id", user.id)

await fetch("/api/analytics/track", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ event_name: "project_created", payload: {} }),
      })

setIsExiting(true)
      setTimeout(() => router.push("/sign-up/employer/review"), 600)
    } finally {
      setSaving(false)
    }
  }

const fadeUp = {
    hidden: { opacity: 0, y: 30 },
    show: { opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" } },
  }

const pageVariants = {
    initial: { opacity: 0, x: 80 },
    animate: { opacity: 1, x: 0, transition: { duration: 0.6, ease: "easeOut" } },
    exit: { opacity: 0, x: -80, transition: { duration: 0.5, ease: "easeIn" } },
  }

return (
    <AnimatePresence mode="wait">
      {!isExiting && (
        <motion.main
          key="employer-project"
          variants={pageVariants}
          initial="initial"
          animate="animate"
          exit="exit"
          className="min-h-screen w-full bg-gradient-to-br from-slate-50 to-blue-50 overflow-y-auto text-slate-900"
        >
          <div className="w-full flex flex-col min-h-screen">
            {/* Header */}
            <motion.div
              className="w-full px-8 py-8 border-b border-slate-300"
              variants={fadeUp}
              initial="hidden"
              animate="show"
            >
              <div className="max-w-4xl mx-auto">
                <motion.div
                  initial={{ opacity: 0, y: -10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.1 }}
                  className="mb-3 text-sm text-slate-600 font-medium"
                >
                  Step 3 of 5
                </motion.div>
                <motion.h1
                  initial={{ opacity: 0, y: -10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.2 }}
                  className="text-3xl font-semibold mb-2 text-slate-900"
                >
                  Post Your First Project
                </motion.h1>
                <motion.p
                  initial={{ opacity: 0, y: -10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.3 }}
                  className="text-slate-700 mb-4 text-sm font-medium"
                >
                  Describe what you need — and get matched with skilled, verified talent.
                </motion.p>

<motion.div
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.4 }}
                  className="space-y-2 text-slate-700 text-xs leading-relaxed bg-white/90 p-4 rounded-lg shadow-sm"
                >
                  <p>
                    <span className="font-semibold text-blue-700">Shiftza</span> makes hiring simple — just tell us what
                    you need, and we’ll connect you with professionals whose skills have already been tested and verified.
                  </p>
                  <p>
                    Every candidate you see has proven their ability to deliver — so you can hire with confidence.
                  </p>
                </motion.div>
              </div>
            </motion.div>

{/* Form */}
            <div className="w-full flex-1 px-8 py-6 text-slate-900">
              <div className="max-w-4xl mx-auto">
                <motion.form
                  onSubmit={onSave}
                  className="space-y-5 bg-white border border-slate-200 rounded-lg shadow-sm p-6"
                  variants={fadeUp}
                  initial="hidden"
                  animate="show"
                >
                  <div>
                    <label className="block text-sm font-semibold text-slate-700 mb-1">
                      Project Title
                    </label>
                    <input
                      className="w-full h-11 rounded-md bg-slate-50 border-2 border-slate-300 px-3 text-slate-900 placeholder-slate-500 focus:border-blue-500 focus:ring-0"
                      placeholder="e.g. Build a Marketing Dashboard"
                      value={title}
                      onChange={(e) => setTitle(e.target.value)}
                      required
                    />
                  </div>

<div>
                    <label className="block text-sm font-semibold text-slate-700 mb-1">
                      Project Description
                    </label>
                    <textarea
                      className="w-full min-h-32 rounded-md bg-slate-50 border-2 border-slate-300 px-3 py-2 text-slate-900 placeholder-slate-500 focus:border-blue-500 focus:ring-0"
                      placeholder="Describe your project goals, deliverables, and expectations..."
                      value={description}
                      onChange={(e) => setDescription(e.target.value)}
                      required
                    />
                  </div>

<div>
                    <label className="block text-sm font-semibold text-slate-700 mb-1">
                      Budget (₹)
                    </label>
                    <input
                      className="w-full h-11 rounded-md bg-slate-50 border-2 border-slate-300 px-3 text-slate-900 placeholder-slate-500 focus:border-blue-500 focus:ring-0"
                      placeholder="e.g. 50000"
                      value={budget}
                      onChange={(e) => setBudget(e.target.value)}
                    />
                  </div>

<motion.button
                    type="submit"
                    disabled={saving}
                    whileTap={{ scale: 0.97 }}
                    whileHover={!saving ? { scale: 1.02 } : {}}
                    className={`w-full h-11 rounded-md font-semibold transition px-4 text-sm ${
                      saving
                        ? "bg-gray-300 text-slate-700 cursor-not-allowed"
                        : "bg-blue-600 text-white hover:bg-blue-700 shadow-md"
                    }`}
                  >
                    {saving ? "Saving..." : "Post My Project"}
                  </motion.button>
                </motion.form>
              </div>
            </div>
          </div>
        </motion.main>
      )}
    </AnimatePresence>
  )
}
[V0_FILE]typescriptreact:file="app/sign-up/employer/review/page.tsx" isMerged="true"
"use client"

import { getBrowserSupabase } from "@/lib/supabase-browser"
import { useRouter } from "next/navigation"
import { useState } from "react"

export default function EmployerReview() {
  const supabase = getBrowserSupabase()
  const router = useRouter()
  const [loading, setLoading] = useState(false)

async function finish() {
    setLoading(true)
    try {
      let userId: string | null = null

try {
        const { data: sessionData } = await supabase.auth.getSession()
        userId = sessionData.session?.user?.id ?? null
      } catch (e) {}

if (!userId) {
        try {
          const { data } = await supabase.auth.getUser()
          userId = data.user?.id ?? null
        } catch (e) {
          console.warn("[v0] supabase.auth.getUser failed:", (e as Error)?.message)
        }
      }

if (!userId) {
        router.push("/auth/login")
        return
      }

await supabase
        .from("profiles")
        .update({ onboarding_status: "employer_completed" })
        .eq("user_id", userId)

await fetch("/api/analytics/track", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          event_name: "onboarding_completed",
          payload: { role: "employer" },
        }),
      }).catch((e) => console.warn("Analytics failed", e))

router.push("/dashboard/employer")
    } finally {
      setLoading(false)
    }
  }

return (
    <main className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 py-16">
      {/* Section Header */}
      <section className="max-w-6xl mx-auto px-6 md:px-10 mb-12">
        <div className="mb-3 text-sm text-slate-600">Step 4–5 of 5</div>
        <h1 className="text-3xl font-semibold text-slate-900 mb-2">
          Meet the Talent. Choose with Confidence.
        </h1>
        <p className="text-slate-700 max-w-2xl">
          Every profile you see includes verified skills, badges, and proof of work.
        </p>
      </section>

{/* Full-width Horizontal Band */}
      <section className="w-full bg-white border-t border-b border-slate-200 py-16 shadow-sm">
        <div className="max-w-6xl mx-auto px-6 md:px-10 grid md:grid-cols-2 gap-10 items-center">
          {/* Left Text Column */}
          <div>
            <h2 className="text-2xl font-semibold text-slate-900 mb-4">
              Your Hiring Hub
            </h2>
            <p className="text-slate-700 leading-relaxed mb-6">
              Manage projects, review professionals, and track your hiring progress — all in one place.
              This is where the real work begins. Post new projects, manage active ones, and review
              candidate performance. Every hire supports the skills-first movement — where proof, not
              paper, wins.
            </p>

<button
              onClick={finish}
              disabled={loading}
              className="h-11 px-6 rounded-md bg-blue-600 text-white font-semibold hover:bg-blue-700 transition disabled:opacity-50"
            >
              {loading ? "Opening..." : "Hire Skilled Talent"}
            </button>
          </div>

{/* Right Visual / Illustration (Optional placeholder) */}
          <div className="hidden md:flex justify-center">
            <div className="w-full h-56 rounded-xl bg-gradient-to-br from-blue-100 to-blue-50 border border-slate-200 flex items-center justify-center text-slate-600 text-sm font-medium">
              Employer Dashboard Preview
            </div>
          </div>
        </div>
      </section>

{/* Final Note */}
      <section className="max-w-6xl mx-auto px-6 md:px-10 mt-12">
        <p className="text-slate-600 text-sm">
          Once you complete setup, you’ll access your full dashboard with tools to post projects, invite
          candidates, and track hires.
        </p>
      </section>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/sign-up/verified/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { getServerSupabase } from "@/lib/supabase-server"

export const dynamic = "force-dynamic"
export const revalidate = 0
export const runtime = "nodejs"

export default async function VerifiedGate() {
  const supabase = getServerSupabase()
  const {
    data: { user },
  } = await supabase.auth.getUser()
  if (!user) {
    redirect("/auth/login")
  }

// Ensure profile exists and read role + onboarding status
  const { data: profile } = await supabase
    .from("profiles")
    .select("role, onboarding_status")
    .eq("auth_user_id", user.id) // use auth_user_id for reliable selection under RLS
    .maybeSingle()

if (!profile) {
    const role = (user.user_metadata?.role as string) ?? "worker"
    const { data: created } = await supabase
      .from("profiles")
      .insert({ id: user.id, auth_user_id: user.id, role, onboarding_status: "started" }) // avoid writing to generated user_id; insert id + auth_user_id explicitly
      .select("role, onboarding_status")
      .maybeSingle()

if (!created) {
      redirect("/dashboard")
    }
    if (created.role === "worker") redirect("/sign-up/worker/profile")
    redirect("/sign-up/employer/project")
  }

if (profile.role === "worker") {
    // If already done, go to opportunities/dashboard
    if (profile.onboarding_status === "worker_completed") {
      redirect("/dashboard")
    }
    redirect("/sign-up/worker/profile")
  } else {
    if (profile.onboarding_status === "employer_completed") {
      redirect("/dashboard")
    }
    redirect("/sign-up/employer/project")
  }
}
[V0_FILE]typescriptreact:file="app/sign-up/worker/opportunities/page.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"

export default function WorkerJourneyHorizontal() {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [activeStep, setActiveStep] = useState(0)

const steps = [
    { title: "Choose Path", desc: "Pick your role — worker or employer." },
    { title: "Create Profile", desc: "Show your experience & strengths." },
    { title: "Show Skills", desc: "Add real projects & get endorsed." },
    { title: "Get Verified", desc: "Earn trusted skill badges." },
    { title: "Land Work", desc: "Access jobs & build your career." },
  ]

// Animate through steps automatically
  useEffect(() => {
    const timer = setInterval(() => {
      setActiveStep((prev) => (prev + 1) % steps.length)
    }, 2200)
    return () => clearInterval(timer)
  }, [])

return (
    <main className="min-h-screen flex items-center justify-center bg-gradient-to-b from-blue-50 via-white to-blue-100 px-6 py-10 overflow-hidden">
      <motion.div
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6 }}
        className="w-full max-w-6xl bg-white/90 backdrop-blur-lg rounded-3xl shadow-xl border border-blue-100 p-10 flex flex-col md:flex-row items-center justify-between gap-10 py-8 px-7"
      >
        {/* LEFT SIDE */}
        <div className="flex-1">
          <div className="text-blue-600 text-sm font-semibold mb-2">Step 5 of 5</div>
          <h1 className="text-gray-900 flex items-center gap-2 mx-auto my-auto leading-7 text-2xl tracking-normal font-bold">
            Land Projects That Match Your Skills{" "}
            
          </h1>
          <p className="text-gray-600 mb-5">
            You’ve proven your ability — now it’s time to turn it into real work.
          </p>
          <p className="text-gray-500 text-sm leading-relaxed mb-8">
            Explore verified opportunities, connect with companies, and build your career project by
            project. Every win adds to your story.
          </p>

<motion.button
            onClick={async () => {
              setLoading(true)
              try {
                router.push("/dashboard")
              } finally {
                setLoading(false)
              }
            }}
            disabled={loading}
            whileHover={{ scale: 1.04 }}
            whileTap={{ scale: 0.96 }}
            className="w-full md:w-auto px-6 h-11 rounded-md bg-gradient-to-r from-blue-700 to-sky-600 text-white font-semibold hover:opacity-90 shadow-md flex items-center justify-center gap-2"
          >
            {loading ? "Opening..." : "Go to My Dashboard →"}
          </motion.button>
        </div>

{/* RIGHT SIDE — Horizontal Steps */}
        <div className="flex-1 relative w-full flex flex-col items-center">
          <h2 className="text-lg font-bold text-blue-700 mb-6 text-center">
            The 5-Step Journey
          </h2>

{/* Timeline */}
          <div className="relative w-full flex flex-col items-center">
            <div className="relative w-full h-[4px] bg-blue-100 rounded-full">
              {/* Progress Line */}
              <motion.div
                className="absolute left-0 top-0 h-[4px] bg-gradient-to-r from-blue-500 via-sky-400 to-blue-600 rounded-full shadow-[0_0_12px_rgba(37,99,235,0.5)]"
                animate={{ width: `${((activeStep + 1) / steps.length) * 100}%` }}
                transition={{ duration: 0.6 }}
              />
            </div>

{/* Steps */}
            <div className="mt-6 w-full flex justify-between items-stretch">
              {steps.map((step, i) => (
                <motion.div
                  key={i}
                  animate={{
                    scale: activeStep === i ? 1.1 : 1,
                    opacity: activeStep >= i ? 1 : 0.5,
                  }}
                  transition={{ type: "spring", stiffness: 200, damping: 15 }}
                  className="flex flex-col items-center text-center max-w-[100px]"
                >
                  <motion.div
                    className={`w-8 h-8 rounded-full flex items-center justify-center border-2 ${
                      activeStep >= i
                        ? "bg-blue-600 border-blue-600 text-white shadow-[0_0_10px_rgba(37,99,235,0.7)]"
                        : "border-blue-200 bg-white text-blue-600"
                    }`}
                  >
                    {i + 1}
                  </motion.div>
                  <h3 className="text-xs font-bold text-gray-800 mt-2">{step.title}</h3>
                  <p className="text-[10px] text-gray-500">{step.desc}</p>
                </motion.div>
              ))}
            </div>
          </div>
        </div>
      </motion.div>
    </main>
  )
}
[V0_FILE]typescript:file="app/sign-up/worker/profile/page.tsx" isMerged="true"
"use client"

import type React from "react"
import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { motion, AnimatePresence } from "framer-motion"
import { getBrowserSupabase } from "@/lib/supabase-browser"
import { ProfileCompletionStatus } from "@/components/sign-up/profile-completion-status"
import { ProfilePreviewCard } from "@/components/sign-up/profile-preview-card"
import { SkillCategorySelector, getJobsForSkills } from "@/components/sign-up/skill-category-selector"
import { JobProfileSelector } from "@/components/sign-up/job-profile-selector"
import { ExperienceSourceSelector } from "@/components/sign-up/experience-source-selector"
import { SkillProofSelector } from "@/components/sign-up/skill-proof-selector"

export default function WorkerProfile() {
  const supabase = getBrowserSupabase()
  const router = useRouter()

const [selectedSkills, setSelectedSkills] = useState<string[]>([])
  const [selectedJobs, setSelectedJobs] = useState<string[]>([])
  const [learningSource, setLearningSource] = useState("")
  const [hasWorkExperience, setHasWorkExperience] = useState(false)
  const [previousExperience, setPreviousExperience] = useState("")
  const [canProveSkill, setCanProveSkill] = useState(false)
  const [proofLink, setProofLink] = useState("")
  const [proofDescription, setProofDescription] = useState("")
  const [about, setAbout] = useState("")
  const [sampleUrl, setSampleUrl] = useState("")
  const [saving, setSaving] = useState(false)
  const [status, setStatus] = useState<string | null>(null)
  const [isExiting, setIsExiting] = useState(false)

const generatedAbout =
    selectedSkills.length > 0
      ? `I'm skilled in ${selectedSkills.slice(0, 3).join(", ")}${
          selectedSkills.length > 3 ? ` and ${selectedSkills.length - 3} more skills` : ""
        }. ${
          learningSource ? `I learned through ${learningSource.replace(/-/g, " ")}.` : ""
        } ${hasWorkExperience ? "I have professional experience in this field." : ""}`
      : ""

const generatedSampleUrl = proofLink || sampleUrl
  const availableJobs = getJobsForSkills(selectedSkills)

useEffect(() => {
    const channel = supabase
      .channel("onboarding_status")
      .on("postgres_changes", { event: "*", schema: "public", table: "profiles" }, (payload) => {
        const newStatus = (payload.new as any)?.onboarding_status
        if (newStatus) setStatus(newStatus)
      })
      .subscribe()

return () => {
      supabase.removeChannel(channel)
    }
  }, [supabase])

const res = await fetch("/api/signup/worker/profile", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          about: generatedAbout || about,
          skills: selectedSkills,
          sampleUrl: generatedSampleUrl,
          targetJobs: selectedJobs,
          learningSource,
          hasWorkExperience,
          previousExperience,
          canProveSkill,
          proofLink,
          proofDescription,
        }),
      })

if (!res.ok) {
        let errorMessage = `Failed to save profile (${res.status})`
        try {
          const err = await res.json()
          errorMessage = err?.error || errorMessage
        } catch {}
        throw new Error(errorMessage)
      }

// Track analytics event (non-blocking)
      try {
        await fetch("/api/analytics/track", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ event_name: "profile_saved", payload: { role: "worker" } }),
        })
      } catch (error) {
        console.warn("Analytics tracking failed:", error)
      }

setIsExiting(true)
      setTimeout(() => router.push("/sign-up/worker/verify"), 600)
    } catch (error) {
      console.error("Profile save error:", error)
      alert("Something went wrong while saving your profile.")
      setSaving(false)
    }
  }

const handleFormKeyDown = (e: React.KeyboardEvent<HTMLFormElement>) => {
    if (e.key === "Enter" && e.target !== e.currentTarget) {
      const target = e.target as HTMLElement
      if (target.tagName !== "TEXTAREA" && target.tagName !== "BUTTON") {
        e.preventDefault()
      }
    }
  }

const isValid = selectedSkills.length > 0 && selectedJobs.length > 0

// --- 👇 Refined enterprise-grade animations (fade + subtle upward motion) ---
  const fadeUp = {
    hidden: { opacity: 0, y: 20 },
    show: { opacity: 1, y: 0, transition: { duration: 0.4, ease: "easeOut" } },
  }

const pageVariants = {
    initial: { opacity: 0, y: 12 },
    animate: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.35, ease: "easeOut" },
    },
    exit: {
      opacity: 0,
      y: -8,
      transition: { duration: 0.25, ease: "easeIn" },
    },
  }
  // --- 👆 Animation section ends ---

return (
    <AnimatePresence mode="wait">
      {!isExiting && (
        <motion.main
          key="worker-profile"
          variants={pageVariants}
          initial="initial"
          animate="animate"
          exit="exit"
          className="min-h-screen w-full bg-gradient-to-br from-gray-100 to-blue-50 overflow-y-auto text-gray-900"
        >
          <div className="w-full flex flex-col min-h-screen">
            {/* Header Section */}
            <motion.div
              className="w-full px-8 py-8 border-b border-gray-300"
              variants={fadeUp}
              initial="hidden"
              animate="show"
            >
              <div className="max-w-7xl mx-auto">
                <motion.div
                  initial={{ opacity: 0, y: -10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.1 }}
                  className="mb-3 text-sm text-gray-900 font-medium"
                >
                  Step 3 of 5
                </motion.div>
                <motion.h1
                  initial={{ opacity: 0, y: -10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.2 }}
                  className="text-3xl font-semibold mb-2 text-gray-900"
                >
                  Build Your Skills-Focused Profile
                </motion.h1>
                <motion.p
                  initial={{ opacity: 0, y: -10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.3 }}
                  className="text-gray-900 mb-4 text-sm font-medium"
                >
                  Show the world what you can do — not what papers you have.
                </motion.p>

<motion.div
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.4 }}
                  className="space-y-2 text-gray-900 leading-relaxed bg-white/80 p-4 rounded-lg shadow-sm text-xs tracking-normal"
                >
                  <p>
                    Meet <span className="font-semibold text-sidebar-primary">Rohan</span> — a mechanical engineering student
                    who fell in love with coding and taught himself AI and machine learning. He builds models, automates
                    workflows, and solves real IT problems — but his job applications rarely get a reply.
                  </p>
                  <p>
                    <span className="font-semibold text-sidebar-primary">Shiftza</span> was built for people like Rohan — and
                    for everyone who learns by doing, not just studying. Here, your skills tell your story. If you can
                    do it, you can prove it — and finally be seen for it.
                  </p>
                  <p>It's time to showcase your craft — and get the recognition you deserve.</p>
                </motion.div>
              </div>
            </motion.div>

{/* Form Section */}
            <div className="w-full flex-1 px-8 py-6 text-gray-900">
              <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-6">
                {/* Left: Preview */}
                <motion.div
                  className="lg:col-span-1"
                  variants={fadeUp}
                  initial="hidden"
                  animate="show"
                  transition={{ delay: 0.2 }}
                >
                  <div className="sticky top-6">
                    <ProfileCompletionStatus
                      skills={selectedSkills.join(", ")}
                      about={generatedAbout}
                      sampleUrl={generatedSampleUrl}
                    />

<motion.div
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ delay: 0.3 }}
                      className="mt-4"
                    >
                      <ProfilePreviewCard
                        skills={selectedSkills.join(", ")}
                        about={generatedAbout}
                        sampleUrl={generatedSampleUrl}
                      />
                    </motion.div>
                  </div>
                </motion.div>

{/* Right: Form */}
                <motion.div
                  className="lg:col-span-2 space-y-4"
                  variants={fadeUp}
                  initial="hidden"
                  animate="show"
                  transition={{ delay: 0.3 }}
                >
                  <form onSubmit={onSave} onKeyDown={handleFormKeyDown} className="space-y-4 text-gray-900">
                    {[
                      {
                        title: "Select Your Skills",
                        component: (
                          <SkillCategorySelector selectedSkills={selectedSkills} onSkillsChange={setSelectedSkills} />
                        ),
                      },
                      {
                        title: "Target Job Profiles",
                        component: (
                          <JobProfileSelector
                            availableJobs={availableJobs}
                            selectedJobs={selectedJobs}
                            onJobsChange={setSelectedJobs}
                          />
                        ),
                      },
                      {
                        title: "Your Experience & Learning",
                        component: (
                          <ExperienceSourceSelector
                            learningSource={learningSource}
                            hasWorkExperience={hasWorkExperience}
                            previousExperience={previousExperience}
                            onLearningSourceChange={setLearningSource}
                            onWorkExperienceChange={setHasWorkExperience}
                            onPreviousExperienceChange={setPreviousExperience}
                          />
                        ),
                      },
                      {
                        title: "Prove Your Skills",
                        component: (
                          <SkillProofSelector
                            canProveSkill={canProveSkill}
                            proofLink={proofLink}
                            proofDescription={proofDescription}
                            onCanProveChange={setCanProveSkill}
                            onProofLinkChange={setProofLink}
                            onProofDescriptionChange={setProofDescription}
                          />
                        ),
                      },
                    ].map((section, idx) => (
                      <motion.div
                        key={idx}
                        className="rounded-lg bg-white border border-gray-300 p-5 shadow-sm"
                        variants={fadeUp}
                        initial="hidden"
                        animate="show"
                        transition={{ delay: 0.4 + idx * 0.1 }}
                      >
                        <h2 className="text-base font-semibold text-gray-900 mb-1">{section.title}</h2>
                        {section.component}
                      </motion.div>
                    ))}

<motion.button
                      type="submit"
                      disabled={saving || !isValid}
                      whileTap={{ scale: 0.97 }}
                      whileHover={isValid ? { scale: 1.02 } : {}}
                      onClick={(e) => {
                        if (!isValid || saving) {
                          e.preventDefault()
                        }
                      }}
                      className={`w-full h-10 rounded-md font-semibold transition px-4 text-sm ${
                        isValid
                          ? "bg-blue-700 text-gray-100 hover:bg-blue-800 shadow-md"
                          : "bg-gray-300 text-gray-900 cursor-not-allowed"
                      }`}
                    >
                      {saving ? "Saving..." : "Continue to Skill Verification"}
                    </motion.button>

{!isValid && (
                      <p className="text-xs text-gray-900 text-center font-medium">
                        Please select at least one skill and one job profile to continue
                      </p>
                    )}
                  </form>

{status && <p className="mt-4 text-gray-900 text-xs">Status: {status}</p>}
                </motion.div>
              </div>
            </div>
          </div>
        </motion.main>
      )}
    </AnimatePresence>
  )
}
[V0_FILE]typescriptreact:file="app/sign-up/worker/verify/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { useRouter } from "next/navigation"
import { getBrowserSupabase } from "@/lib/supabase-browser"

export default function WorkerVerifyShowcase() {
  const router = useRouter()
  const supabase = getBrowserSupabase()
  const [loading, setLoading] = useState(false)
  const [selected, setSelected] = useState<any>(null)
  const [currentStep, setCurrentStep] = useState(0)

useEffect(() => {
    const interval = setInterval(() => {
      setCurrentStep((prev) => (prev + 1) % 5)
    }, 1800)
    return () => clearInterval(interval)
  }, [])

const steps = ["Choose your path", "Show your skills", "Build your profile", "Get verified", "Land projects"]

const testimonials = [
    {
      name: "Ravi Kumar",
      role: "Delivery Rider → Software Developer",
      quote: "Shiftza helped me turn my coding passion into a real career.",
      story:
        "Ravi learned coding after delivery shifts. Through Shiftza, he proved his JavaScript and React skills — now he's a front-end developer in Pune.",
      img: "https://randomuser.me/api/portraits/men/32.jpg",
    },
    {
      name: "Aditi Sharma",
      role: "Freelance Designer",
      quote: "Clients finally trust my badges — not just my portfolio.",
      story:
        "Aditi used Shiftza's UI/UX verification to show her design credibility. It helped her boost her freelance income by 40%.",
      img: "https://randomuser.me/api/portraits/women/65.jpg",
    },
    {
      name: "Arjun Mehta",
      role: "Data Analyst",
      quote: "Verification gave me confidence and my first data job.",
      story: "Arjun proved his SQL and Excel work with Shiftza and landed a data analyst role in a top tech firm.",
      img: "https://randomuser.me/api/portraits/men/55.jpg",
    },
    {
      name: "Neha Patil",
      role: "Mechanical Engineer → Production Planner",
      quote: "Shiftza helped me bridge my background into planning.",
      story:
        "Neha showcased her scheduling projects using Shiftza's work-sample verification. She now leads production planning at an automotive company.",
      img: "https://randomuser.me/api/portraits/women/66.jpg",
    },
    {
      name: "Mohit Verma",
      role: "Electrician → IoT Technician",
      quote: "I proved my practical skills and got a better-paying job.",
      story:
        "Mohit uploaded videos and sensor project data via Shiftza, earning a verified IoT badge. He now manages smart devices for a tech-enabled company.",
      img: "https://randomuser.me/api/portraits/men/71.jpg",
    },
    {
      name: "Priya Singh",
      role: "Cloud Support Intern",
      quote: "Shiftza made my cloud badges stand out to recruiters.",
      story:
        "Priya showcased verified AWS badges, which helped her secure a cloud internship at a leading tech company.",
      img: "https://randomuser.me/api/portraits/women/68.jpg",
    },
    {
      name: "Rohit Nair",
      role: "Quality Engineer → Data Automation Expert",
      quote: "I transitioned to analytics through my verified projects.",
      story: "Rohit proved his Python and Excel automation skills on Shiftza — now he's a data automation lead.",
      img: "https://randomuser.me/api/portraits/men/74.jpg",
    },
    {
      name: "Sneha Deshmukh",
      role: "Frontend Developer",
      quote: "Verified projects helped me move from freelance to full-time.",
      story:
        "Sneha's Shiftza profile showcased her verified web apps, helping her get a full-time role at a top startup.",
      img: "https://randomuser.me/api/portraits/women/62.jpg",
    },
    {
      name: "Vikas Yadav",
      role: "Production Worker → Supervisor",
      quote: "Shiftza recognized my leadership and technical skills.",
      story: "Vikas uploaded testimonials and project proof — now he's a production supervisor leading a small team.",
      img: "https://randomuser.me/api/portraits/men/77.jpg",
    },
    {
      name: "Meera Joshi",
      role: "IT Graduate → Cybersecurity Analyst",
      quote: "Shiftza turned my cybersecurity labs into proof employers trust.",
      story:
        "Meera completed online security labs and uploaded proof on Shiftza. Her verified profile led to a cybersecurity analyst job.",
      img: "https://randomuser.me/api/portraits/women/70.jpg",
    },
  ]

async function startVerify() {
    setLoading(true)
    try {
      const {
        data: { user },
      } = await supabase.auth.getUser()
      if (!user) {
        router.push("/auth/login")
        return
      }
      await supabase
        .from("worker_profiles")
        .upsert({ user_id: user.id, verification_intent: true }, { onConflict: "user_id" })
      await supabase.from("profiles").update({ onboarding_status: "worker_completed" }).eq("user_id", user.id)
      router.push("/sign-up/worker/opportunities")
    } finally {
      setLoading(false)
    }
  }

// --- Professional page animation (fade + slight upward motion) ---
  const pageVariants = {
    initial: { opacity: 0, y: 16 },
    animate: { opacity: 1, y: 0, transition: { duration: 0.4, ease: "easeOut" } },
    exit: { opacity: 0, y: -10, transition: { duration: 0.3, ease: "easeIn" } },
  }
  // ---------------------------------------------------------------

return (
    <AnimatePresence mode="wait">
      <motion.main
        key="worker-verify"
        variants={pageVariants}
        initial="initial"
        animate="animate"
        exit="exit"
        className="min-h-screen flex justify-between items-center bg-gradient-to-b from-blue-50 to-white px-10 py-10 overflow-hidden"
      >
        {/* Left Section */}
        <div className="w-full h-full space-y-5 my-0 mx-0">
          {/* Verification Section */}
          <div className="bg-white rounded-2xl shadow-lg p-8 border border-blue-100 py-4 px-7">
            <div className="text-sm text-blue-600 font-medium mb-2">Step 4 of 5</div>
            <h1 className="font-bold text-gray-900 mb-4 text-2xl">Prove Your Skills. Earn Your Badges.</h1>

<div className="space-y-5 text-gray-600 leading-relaxed mb-6 text-sm tracking-tight leading-7">
              <p className="my-auto text-justify">
                Behind every skill lies effort, persistence, and progress. Shiftza gives you a way to turn that journey
                into visible, verifiable proof.
              </p>
              <p className="my-2.5 text-justify">
                Showcase your talent through quick skill tests, real work samples, or endorsements from peers. Earn
                badges that employers trust — and recognition you deserve.
              </p>
              <p className="my-auto text-justify">
                No degrees required. No doors closed. Just your skill, your story, your proof.
              </p>
            </div>

<button
              onClick={startVerify}
              disabled={loading}
              className="h-12 rounded-md text-white font-semibold text-lg hover:bg-blue-700 transition-all duration-200 disabled:opacity-70 shadow-md bg-sky-950 w-full"
            >
              {loading ? "Starting..." : "Start Verification"}
            </button>
          </div>

{/* Auto-moving Stories */}
          <div className="my-auto mx-auto">
            <h2 className="text-2xl font-bold text-blue-700 mb-4">Real Stories. Real Skills.</h2>
            <p className="text-gray-600 mb-6">
              Click any story below to explore how others turned their skills into real opportunities.
            </p>
            <motion.div
              className="flex gap-6"
              animate={{ x: ["0%", "-50%"] }}
              transition={{ repeat: Number.POSITIVE_INFINITY, duration: 25, ease: "linear" }}
            >
              {[...testimonials, ...testimonials].map((t, i) => (
                <motion.div
                  key={i}
                  onClick={() => setSelected(t)}
                  className="bg-white rounded-xl shadow-md p-4 border border-blue-100 hover:shadow-xl hover:scale-[1.03] transition cursor-pointer flex flex-col justify-between w-60 h-auto flex-shrink-0 py-4"
                >
                  <p className="text-gray-700 italic text-sm leading-relaxed mb-2.5">"{t.quote}"</p>
                  <div>
                    <h4 className="font-semibold text-blue-700 text-sm">{t.name}</h4>
                    <p className="text-xs text-gray-500">{t.role}</p>
                  </div>
                </motion.div>
              ))}
            </motion.div>
          </div>
        </div>

{/* Story Modal */}
        <AnimatePresence>
          {selected && (
            <motion.div
              className="fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center z-50"
              onClick={() => setSelected(null)}
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
            >
              <motion.div
                onClick={(e) => e.stopPropagation()}
                initial={{ scale: 0.9, opacity: 0 }}
                animate={{ scale: 1, opacity: 1 }}
                exit={{ scale: 0.9, opacity: 0 }}
                className="bg-white rounded-2xl p-8 w-full max-w-md shadow-2xl relative"
              >
                <button
                  onClick={() => setSelected(null)}
                  className="absolute top-4 right-5 text-gray-500 hover:text-gray-800 text-xl"
                >
                  ✕
                </button>
                <div className="flex flex-col items-center text-center">
                  <img
                    src={selected.img || "/placeholder.svg"}
                    alt={selected.name}
                    className="w-20 h-20 rounded-full mb-4 object-cover border-2 border-blue-300"
                  />
                  <h3 className="text-2xl font-bold text-blue-700">{selected.name}</h3>
                  <p className="text-sm text-gray-500 mb-4">{selected.role}</p>
                  <p className="text-gray-700 leading-relaxed">{selected.story}</p>
                </div>
              </motion.div>
            </motion.div>
          )}
        </AnimatePresence>
      </motion.main>
    </AnimatePresence>
  )
}
[V0_FILE]typescript:file="app/sitemap.ts" isMerged="true"
import type { MetadataRoute } from "next"

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: "https://runyoyo.com",
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 1,
    },
    {
      url: "https://runyoyo.com/video-sitemap.xml",
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 0.8,
    },
  ]
}
[V0_FILE]typescriptreact:file="app/talent-search/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/talent-search/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Search, Filter } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import TalentCard from "@/components/talent-card"
import TalentFilters from "@/components/talent-filters"
import TalentProfileModal from "@/components/talent-profile-modal"
import BackButton from "@/components/back-button"
import Link from "next/link"
import useSWR from "swr"

// Fetcher function to get data from API
const fetcher = (url: string) => fetch(url).then((r) => r.json())

export default function TalentSearchPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [showFilters, setShowFilters] = useState(false)
  const [selectedTalent, setSelectedTalent] = useState<any>(null)
  const [filters, setFilters] = useState({
    skills: [] as string[],
    minRate: 0,
    maxRate: 200,
    availability: "all",
    location: "",
    minRating: 0,
    languages: [] as string[],
  })

const { data } = useSWR<{ workers: any[] }>("/api/talent", fetcher)
  const workers =
    data?.workers?.map((w) => ({
      id: w.user_id,
      name: w.display_name,
      title: w.headline,
      skills: w.skills || [],
      rate: w.hourly_rate || 0,
      availability: w.availability || "Unavailable",
      location: w.location || "",
      rating: undefined, // no fake rating
      projectsCompleted: w.projects_count ?? 0,
      verified: true,
      languages: [],
      bio: "",
      portfolio: [],
      image: w.avatar_url || "",
    })) ?? []

const filteredTalents = workers.filter((talent) => {
    const matchesSearch =
      searchQuery === "" ||
      (talent.name || "").toLowerCase().includes(searchQuery.toLowerCase()) ||
      (talent.title || "").toLowerCase().includes(searchQuery.toLowerCase()) ||
      (talent.skills || []).some((skill: string) => (skill || "").toLowerCase().includes(searchQuery.toLowerCase()))

const matchesRate = (talent.rate ?? 0) >= filters.minRate && (talent.rate ?? 0) <= filters.maxRate
    const matchesAvailability = filters.availability === "all" || (talent.availability || "") === filters.availability
    const matchesLocation =
      filters.location === "" || (talent.location || "").toLowerCase().includes(filters.location.toLowerCase())
    const matchesRating = (talent.rating ?? 0) >= filters.minRating

return matchesSearch && matchesRate && matchesAvailability && matchesLocation && matchesRating
  })

return (
    <div className="min-h-screen bg-black text-white">
      <BackButton />
      <Navbar isBannerVisible={false} />

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-12">
        {/* Header */}
        <div className="text-center mb-12">
          <h1
            className="text-4xl md:text-6xl font-bold mb-4"
            style={{
              backgroundImage: "linear-gradient(rgb(245, 245, 245), rgb(245, 245, 245) 29%, rgb(153, 153, 153))",
              color: "transparent",
              fontFamily: "GeistSans, sans-serif",
              letterSpacing: "-0.04em",
              lineHeight: "1.15",
              WebkitBackgroundClip: "text",
              backgroundClip: "text",
            }}
          >
            Find Skills-First Talent
          </h1>
          <p className="text-xl text-white/80 max-w-3xl mx-auto font-mono">
            Connect with verified professionals based on what they can do, not what degrees they hold
          </p>
          {/* Hire Talent button */}
          <div className="mt-8">
            <Link href="/hire-talent">
              <Button className="bg-gradient-to-r from-cyan-500 to-purple-500 hover:from-cyan-600 hover:to-purple-600 text-white font-semibold px-8 py-6 text-lg">
                Hire Talent
              </Button>
            </Link>
          </div>
        </div>

{/* Search Bar */}
        <div className="mb-8">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="flex-1 relative">
              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-white/50" size={20} />
              <Input
                type="text"
                placeholder="Search by skills, role, or name..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full pl-12 pr-4 py-6 bg-white/5 border-white/10 text-white placeholder:text-white/50 rounded-lg text-lg"
              />
            </div>
            <Button
              onClick={() => setShowFilters(!showFilters)}
              className="bg-white/10 hover:bg-white/20 text-white border border-white/10 px-6 py-6 rounded-lg"
            >
              <Filter size={20} className="mr-2" />
              Filters
            </Button>
          </div>
        </div>

{/* Filters Panel */}
        {showFilters && (
          <div className="mb-8">
            <TalentFilters filters={filters} setFilters={setFilters} />
          </div>
        )}

{/* Results Count */}
        <div className="mb-6">
          <p className="text-white/70 font-mono">
            {filteredTalents.length} verified {filteredTalents.length === 1 ? "professional" : "professionals"} found
          </p>
        </div>

{/* Talent Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
          {filteredTalents.map((talent) => (
            <TalentCard key={talent.id} talent={talent} onViewProfile={() => setSelectedTalent(talent)} />
          ))}
        </div>

{/* Empty State */}
        {filteredTalents.length === 0 && (
          <div className="text-center py-12">
            <p className="text-white/50 text-lg mb-4">No talent found matching your criteria</p>
            <Button
              onClick={() => {
                setSearchQuery("")
                setFilters({
                  skills: [],
                  minRate: 0,
                  maxRate: 200,
                  availability: "all",
                  location: "",
                  minRating: 0,
                  languages: [],
                })
              }}
              className="bg-white text-black hover:bg-gray-100"
            >
              Clear Filters
            </Button>
          </div>
        )}
      </div>

{/* Talent Profile Modal */}
      {selectedTalent && <TalentProfileModal talent={selectedTalent} onClose={() => setSelectedTalent(null)} />}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/test-logos/page.tsx" isMerged="true"
"use client"

export default function TestLogos() {
  return (
    <div className="min-h-screen bg-black text-white p-8">
      <div className="max-w-6xl mx-auto">
        <h1 className="text-4xl font-bold mb-8 text-center">Company Logos Test</h1>

<p className="text-center text-gray-400 mb-12">Testing all 13 company logos for visibility and accuracy</p>

{/* First row - 6 logos */}
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-y-12 gap-x-8 mb-16 max-w-6xl mx-auto">
          <CompanyLogo name="Apple" />
          <CompanyLogo name="IBM" />
          <CompanyLogo name="Google" />
          <CompanyLogo name="EY" />
          <CompanyLogo name="Tesla" />
          <CompanyLogo name="Netflix" />
        </div>

{/* Second row - 7 logos */}
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-7 gap-y-12 gap-x-8 max-w-6xl mx-auto">
          <CompanyLogo name="Airbnb" />
          <CompanyLogo name="Dell" />
          <CompanyLogo name="Adobe" />
          <CompanyLogo name="Dropbox" />
          <CompanyLogo name="Zoho" />
          <CompanyLogo name="Hilton" />
          <CompanyLogo name="Bank of America" />
        </div>
      </div>
    </div>
  )
}

function CompanyLogo({ name }: { name: string }) {
  const logoMap: Record<string, string> = {
    Apple: "https://cdn.simpleicons.org/apple/white",
    IBM: "https://cdn.simpleicons.org/ibm/white",
    Google: "https://cdn.simpleicons.org/google",
    EY: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/EY_logo_2019.svg/320px-EY_logo_2019.svg.png",
    Tesla: "https://cdn.simpleicons.org/tesla/white",
    Netflix: "https://cdn.simpleicons.org/netflix",
    Airbnb: "https://cdn.simpleicons.org/airbnb/FF5A5F",
    Dell: "https://cdn.simpleicons.org/dell/007DB8",
    Adobe: "/logos/adobe-logo.png",
    Dropbox: "https://cdn.simpleicons.org/dropbox",
    Zoho: "https://www.zoho.com/branding/images/zoho-logo-512.png",
    Hilton:
      "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Hilton_Hotels_logo.svg/320px-Hilton_Hotels_logo.svg.png",
    "Bank of America":
      "https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Bank_of_America_logo.svg/320px-Bank_of_America_logo.svg.png",
  }

const logoUrl = logoMap[name]

const heightMap: Record<string, string> = {
    Apple: "50px",
    IBM: "42px",
    Google: "40px",
    EY: "45px",
    Tesla: "45px",
    Netflix: "35px",
    Airbnb: "45px",
    Dell: "42px",
    Adobe: "48px",
    Dropbox: "42px",
    Zoho: "45px",
    Hilton: "40px",
    "Bank of America": "42px",
  }

return (
    <div className="flex flex-col items-center justify-center gap-4">
      <div className="flex items-center justify-center h-[60px]">
        <img
          src={logoUrl || "/placeholder.svg"}
          alt={`${name} logo`}
          className="w-auto object-contain"
          style={{
            height: heightMap[name] || "42px",
            maxWidth: "150px",
          }}
          onError={(e) => {
            console.log(`[v0] Failed to load logo for ${name}`)
            e.currentTarget.style.display = "none"
            const parent = e.currentTarget.parentElement
            if (parent) {
              const fallback = document.createElement("div")
              fallback.textContent = "❌"
              fallback.className = "text-4xl"
              parent.appendChild(fallback)
            }
          }}
        />
      </div>
      <span className="text-sm text-gray-400 text-center">{name}</span>
    </div>
  )
}
[V0_FILE]json:file="components.json" isMerged="true"
{
  "$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/agentic-ai-search-section.tsx" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Play } from "lucide-react"
import FeatureVideo from "@/components/feature-video"

interface SearchQuery {
  id: string
  question: string
  videoSrc: string
  fallbackSrc?: string
  category: string
}

const searchQueries: SearchQuery[] = [
  {
    id: "skills",
    question: "Show me React developers with 3+ years experience",
    videoSrc: "/videos/favorites.mp4",
    fallbackSrc: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/favorites-FFCUeeEFzfxDBIhgGACi7YGpYQZbnU.mp4",
    category: "Talent",
  },
  {
    id: "projects",
    question: "Find designers who worked on mobile apps",
    videoSrc: "/videos/update-windsurf.mp4",
    fallbackSrc:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/update-windsurf-2nLOc5uJICad4940kOGQdrwE4nsXdo.mp4",
    category: "Portfolio",
  },
  {
    id: "budget",
    question: "Show me projects under $5000 budget?",
    videoSrc: "/videos/dark-mode-search.mp4",
    fallbackSrc:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/dark-mode-search-mSz6mUD1V8RUdjEfezII84ljPxeCyT.mp4",
    category: "Budget",
  },
  {
    id: "verified",
    question: "Which developers have verified skills?",
    videoSrc: "/videos/did-v9.mp4",
    fallbackSrc: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/did-v9-sNyHkh5hs5gfnDH0tYkH15uK5syHUX.mp4",
    category: "Verified",
  },
]

interface AgenticAISearchSectionProps {
  onOpenInstall?: () => void
}

export default function AgenticAISearchSection({ onOpenInstall }: AgenticAISearchSectionProps) {
  const [activeQuery, setActiveQuery] = useState(searchQueries[0])
  const [hoveredQuery, setHoveredQuery] = useState<string | null>(null)
  const [videosLoaded, setVideosLoaded] = useState<{ [key: string]: boolean }>({})
  const videoCache = useRef<{ [key: string]: HTMLVideoElement }>({})
  const [isHovering, setIsHovering] = useState(false)

// Improved video preloading without autoplay
  useEffect(() => {
    const preloadVideos = async () => {
      // Start with the first video (already active)
      setVideosLoaded({ [searchQueries[0].id]: true })

// Then preload the rest in the background
      for (const query of searchQueries) {
        if (query.id === searchQueries[0].id) continue

try {
          const video = document.createElement("video")
          video.muted = true
          video.preload = "auto"
          video.playsInline = true
          video.loop = true
          // Remove autoplay - controlled by intersection observer

videoCache.current[query.id] = video

video.src = query.videoSrc

setTimeout(() => {
            setVideosLoaded((prev) => ({ ...prev, [query.id]: true }))
          }, 1000)

video.onerror = () => {
            if (query.fallbackSrc) {
              video.src = query.fallbackSrc
            }
          }
        } catch (error) {
          console.warn(`Failed to preload video for query ${query.id}:`, error)
        }
      }
    }

preloadVideos()

return () => {
      Object.values(videoCache.current).forEach((video) => {
        video.src = ""
        video.load()
      })
      videoCache.current = {}
    }
  }, [])

const handleQueryClick = (query: SearchQuery) => {
    setActiveQuery(query)
  }

// Simplified hover handling - no delay
  const handleQueryHover = (query: SearchQuery) => {
    if (isHovering) {
      setHoveredQuery(query.id)
      setActiveQuery(query)
    }
  }

const handleSectionEnter = () => {
    setIsHovering(true)
  }

const handleSectionLeave = () => {
    setIsHovering(false)
    setHoveredQuery(null)
  }

const getCategoryColor = (category: string) => {
    switch (category) {
      case "Talent":
        return "bg-cyan-500/20 text-cyan-300 border-cyan-400/30"
      case "Portfolio":
        return "bg-orange-500/20 text-orange-300 border-orange-400/30"
      case "Budget":
        return "bg-pink-500/20 text-pink-300 border-pink-400/30"
      case "Verified":
        return "bg-purple-500/20 text-purple-300 border-purple-400/30"
      default:
        return "bg-white/20 text-white border-white/30"
    }
  }

return (
    <div className="my-24">
      {/* Title and Description */}
      <div className="text-center mb-6 md:mb-12 px-4">
        <h2
          className="mb-4 font-semibold"
          style={{
            backgroundImage: "linear-gradient(rgb(245, 245, 245), rgb(245, 245, 245) 29%, rgb(153, 153, 153))",
            color: "transparent",
            fontFamily: "GeistSans, sans-serif",
            fontSize: "clamp(32px, 6vw, 52px)",
            fontWeight: 600,
            letterSpacing: "clamp(-1.5px, -0.04em, -2.08px)",
            lineHeight: "1.15",
            textAlign: "center",
            WebkitBackgroundClip: "text",
            backgroundClip: "text",
          }}
        >
          Smart AI Matching
        </h2>
        <p
          className="max-w-2xl mx-auto"
          style={{
            color: "#f5f5f5",
            fontFamily: "GeistMono, monospace",
            fontSize: "clamp(16px, 3vw, 22px)",
            lineHeight: "1.3",
            textAlign: "center",
          }}
        >
          Ask anything. Shiftza understands your skills, experience, and project needs — matching talent with
          opportunities perfectly.
        </p>
      </div>

{/* Gradient Section with Video */}
      <div className="flex justify-center">
        <div className="gradient-container gradient-blue-red max-w-[1296px] w-full relative">
          {/* Dark Overlay */}
          <div className="absolute inset-0 bg-black/35 rounded-[16px]"></div>

{/* Noise Overlay */}
          <div className="noise-texture"></div>

{/* Video Section */}
          <div className="relative z-10 pt-4 sm:pt-12 md:pt-16 pb-0 px-4 sm:px-6 md:px-12">
            {/* FIXED ASPECT RATIO CONTAINER */}
            <div className="rounded-t-lg overflow-hidden shadow-2xl max-w-4xl mx-auto border border-white/10 border-b-0 relative">
              <FeatureVideo
                src={activeQuery.videoSrc}
                alt={`Smart AI Matching: ${activeQuery.question}`}
                fallbackSrc={activeQuery.fallbackSrc}
                fixedAspectRatio={true}
              />

{/* Mobile Navigation Dots - Only visible on mobile */}
              <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 lg:hidden z-20">
                <div className="flex gap-2 bg-black/50 backdrop-blur-sm rounded-full px-3 py-2">
                  {searchQueries.map((query, index) => (
                    <button
                      key={query.id}
                      onClick={() => setActiveQuery(query)}
                      className={`w-2 h-2 rounded-full transition-all duration-200 ${
                        activeQuery.id === query.id ? "bg-white w-6" : "bg-white/50 hover:bg-white/70"
                      }`}
                      aria-label={`Switch to query: ${query.question}`}
                    />
                  ))}
                </div>
              </div>

{/* Gradient Overlay for Text Readability - HIDDEN on mobile and tablet */}
              <div
                className="absolute inset-0 hidden lg:block pointer-events-none"
                style={{
                  background:
                    "linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 40%, transparent 70%)",
                }}
              ></div>

{/* Overlay Content on top of the video - HIDDEN on mobile and tablet */}
              <div
                className="absolute inset-0 hidden lg:flex flex-col justify-end p-6 lg:p-8"
                onMouseEnter={handleSectionEnter}
                onMouseLeave={handleSectionLeave}
              >
                {/* Bottom Section: Content Left, Query Buttons Right */}
                <div className="flex gap-4 lg:gap-8 items-end justify-between">
                  {/* Left: Feature Info and Install Button - KEEPING ORIGINAL DESIGN */}
                  <div className="flex-1 max-w-xs lg:max-w-md">
                    <h3
                      className="text-white text-xl lg:text-2xl font-semibold mb-3"
                      style={{
                        fontFamily: 'var(--font-geist-sans), "GeistSans", sans-serif',
                        letterSpacing: "-0.02em",
                        textShadow: "0 2px 4px rgba(0,0,0,0.8)",
                      }}
                    >
                      AI Search
                    </h3>
                    <p
                      className="text-white/95 mb-6 text-base lg:text-lg"
                      style={{
                        fontFamily: "GeistMono, monospace",
                        lineHeight: "1.4",
                        textShadow: "0 1px 2px rgba(0,0,0,0.8)",
                      }}
                    >
                      "{activeQuery.question}"
                    </p>
                    {onOpenInstall && (
                      <Button
                        onClick={onOpenInstall}
                        className="bg-white hover:bg-gray-100 text-black font-mono text-sm font-semibold tracking-wider py-3 px-6 rounded-lg shadow-lg"
                        style={{
                          fontFamily: "GeistMono, monospace",
                          letterSpacing: "0.56px",
                          height: "48px",
                        }}
                      >
                        GET STARTED
                      </Button>
                    )}
                  </div>

{/* Right: Enhanced Query Buttons - FIXED WIDTH CONTAINER */}
                  <div className="flex flex-col gap-2 max-w-xs">
                    {/* Fixed width container for all buttons to prevent layout shifts */}
                    <div className="flex flex-col gap-2 w-[240px]">
                      {searchQueries.map((query) => (
                        <button
                          key={query.id}
                          onClick={() => handleQueryClick(query)}
                          onMouseEnter={() => handleQueryHover(query)}
                          className={`group relative text-left p-3 rounded-xl border-2 transition-colors duration-200 ${
                            activeQuery.id === query.id
                              ? "bg-white/15 border-white/60 text-white shadow-lg"
                              : "bg-black/30 border-white/20 text-white/90 hover:bg-white/10 hover:border-white/40"
                          }`}
                          style={{
                            backdropFilter: "blur(8px)",
                            height: "auto",
                            minHeight: "64px",
                          }}
                        >
                          <div className="flex items-start gap-2">
                            <div className="flex-1 min-w-0">
                              {/* Category Badge */}
                              <div className="flex items-center gap-2 mb-1">
                                <span
                                  className={`px-1.5 py-0.5 rounded text-[10px] font-medium border ${getCategoryColor(
                                    query.category,
                                  )}`}
                                  style={{
                                    fontFamily: "GeistMono, monospace",
                                  }}
                                >
                                  {query.category}
                                </span>
                                {activeQuery.id === query.id && (
                                  <Play className="w-3 h-3 text-white/80" fill="currentColor" />
                                )}
                              </div>
                              {/* Question Text */}
                              <p
                                className="text-xs leading-relaxed"
                                style={{
                                  fontFamily: "GeistMono, monospace",
                                  textShadow: "0 1px 2px rgba(0,0,0,0.8)",
                                }}
                              >
                                "{query.question}"
                              </p>
                            </div>
                          </div>

{/* Hover Effect Border - SIMPLIFIED */}
                          {hoveredQuery === query.id && activeQuery.id !== query.id && (
                            <div
                              className="absolute inset-0 rounded-xl pointer-events-none"
                              style={{
                                background:
                                  "linear-gradient(135deg, rgba(34, 211, 238, 0.1), rgba(255, 92, 40, 0.1), rgba(255, 92, 157, 0.1))",
                                border: "1px solid rgba(255, 255, 255, 0.2)",
                              }}
                            />
                          )}
                        </button>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/announcement-banner.tsx" isMerged="true"
"use client"

import { X } from "lucide-react"
import { useState, useEffect } from "react"

interface AnnouncementBannerProps {
  onVisibilityChange?: (isVisible: boolean) => void
}

interface BannerInfo {
  id: string
  desktopText: string
  mobileText: string
  linkText: string
  linkUrl: string
}

const bannerInfos: BannerInfo[] = [
  {
    id: "skills-first-hiring",
    desktopText: "Skills-first Hiring Approach: Why & How to Adopt It",
    mobileText: "Skills-first Hiring Approach: Why & How to Adopt It",
    linkText: "Read More",
    linkUrl: "https://www.vireup.com/blog/skills-first-hiring",
  },
  {
    id: "ai-jason",
    desktopText: 'AI Jason (200K) calls YOYO "Vibe Versioning" — Iterate UI in Cursor 10× faster',
    mobileText: 'AI Jason calls YOYO "Vibe Versioning"',
    linkText: "Watch Now",
    linkUrl: "https://youtu.be/JfMcFjD-tIA?si=sSr6SIvZfGOth7QV",
  },
  {
    id: "eric-tech",
    desktopText: 'Eric Tech just dropped: "Vibe Coding with Gemini AI." YOYO featured in the workflow.',
    mobileText: 'Eric Tech: "Vibe Coding with Gemini AI." YOYO featured.',
    linkText: "Watch Gemini Workflow",
    linkUrl: "https://youtu.be/AMeMeWjQmsY?si=hqXmTiIzDWzBUkn7",
  },
]

export default function AnnouncementBanner({ onVisibilityChange }: AnnouncementBannerProps) {
  const [isVisible, setIsVisible] = useState(true)
  const [currentBannerIndex, setCurrentBannerIndex] = useState(0)
  const [isTransitioning, setIsTransitioning] = useState(false)
  const [isPaused, setIsPaused] = useState(false)
  // const [slideDirection, setSlideDirection] = useState<"left" | "right">("right")

const currentBanner = bannerInfos[currentBannerIndex]

// Cycle through banners every 8 seconds
  useEffect(() => {
    if (!isVisible || bannerInfos.length <= 1 || isPaused) return

const interval = setInterval(() => {
      setIsTransitioning(true)

// Alternate slide direction for more dynamic feel
      // setSlideDirection((prev) => (prev === "right" ? "left" : "right"))

setTimeout(() => {
        setCurrentBannerIndex((prev) => (prev + 1) % bannerInfos.length)
        setIsTransitioning(false)
      }, 300) // Half of transition duration
    }, 8000) // 8 seconds per banner - gives users more time to read

return () => clearInterval(interval)
  }, [isVisible, isPaused])

const handleClose = () => {
    setIsVisible(false)
    onVisibilityChange?.(false)
  }

useEffect(() => {
    onVisibilityChange?.(isVisible)
  }, [isVisible, onVisibilityChange])

if (!isVisible) return null

const renderIcon = () => {
    // Show different icons based on banner type
    if (currentBanner.id === "visual-studio-magazine") {
      return (
        <svg className="w-4 h-4 text-white/70" fill="currentColor" viewBox="0 0 24 24">
          <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z" />
        </svg>
      )
    }

// YouTube icon for video content
    return (
      <svg className="w-4 h-4 text-white/70" fill="currentColor" viewBox="0 0 24 24">
        <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136C4.495 20.455 12 20.455 12 20.455s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"></path>
      </svg>
    )
  }

// Simplified transition - just opacity and subtle scale
  const simpleTransition = isTransitioning ? "opacity-0 transform scale-98" : "opacity-100 transform scale-100"

return (
    <div className="fixed top-0 left-0 right-0 z-[60] bg-black border-b border-white/10">
      {/* Screen reader announcement for banner changes */}
      <div className="sr-only" aria-live="polite" aria-atomic="true" key={currentBanner.id}>
        {currentBanner.desktopText}
      </div>

</div>
  )
}
[V0_FILE]typescriptreact:file="components/auth-modal.tsx" isMerged="true"
"use client"

import * as React from "react"
import { X, Mail } from "lucide-react"
import { Dialog, DialogContent, DialogOverlay } from "@/components/ui/dialog"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { getSupabaseBrowser } from "@/lib/supabase/client"

type AuthTab = "signup" | "signin"

interface AuthModalProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  defaultTab?: AuthTab
}

export default function AuthModal({ open, onOpenChange, defaultTab = "signup" }: AuthModalProps) {
  const [tab, setTab] = React.useState<AuthTab>(defaultTab)
  const [email, setEmail] = React.useState("")
  const [password, setPassword] = React.useState("")
  const [loading, setLoading] = React.useState<"email" | "google" | null>(null)
  const [errorMsg, setErrorMsg] = React.useState<string | null>(null)

React.useEffect(() => {
    setTab(defaultTab)
  }, [defaultTab])

const handleEmailSignIn = async () => {
    try {
      setLoading("email")
      setErrorMsg(null)
      const supabase = getSupabaseBrowser()
      const { error } = await supabase.auth.signInWithPassword({ email, password })
      if (error) {
        setErrorMsg(error.message)
        return
      }
      onOpenChange(false)
      if (typeof window !== "undefined") window.location.reload()
    } catch (e: any) {
      setErrorMsg(e?.message || "Something went wrong")
    } finally {
      setLoading(null)
    }
  }

const handleGoogleSignIn = async () => {
    try {
      setLoading("google")
      setErrorMsg(null)
      const supabase = getSupabaseBrowser()
      const redirectTo = typeof window !== "undefined" ? window.location.origin : undefined

const { data, error } = await supabase.auth.signInWithOAuth({
        provider: "google",
        options: { redirectTo },
        skipBrowserRedirect: true,
      })
      if (error) {
        setErrorMsg(error.message)
        return
      }
      if (data?.url) {
        if (typeof window !== "undefined") {
          const target = (window.top ?? window) as Window
          target.location.assign(data.url)
        }
      } else {
        setErrorMsg("Unable to start Google sign-in.")
      }
    } catch (e: any) {
      setErrorMsg(e?.message || "Google sign-in failed")
    } finally {
      setLoading(null)
    }
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogOverlay className="fixed inset-0 z-50 bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out" />
      <DialogContent
        className="
          z-50
          w-[92vw] max-w-[520px]
          rounded-[24px]
          p-0
          border border-white/15
          bg-white/10
          backdrop-blur-2xl
          shadow-[0_8px_40px_rgba(0,0,0,0.5)]
          overflow-hidden
        "
      >
        <div className="absolute inset-0 -z-10 pointer-events-none">
          <div
            className="
              absolute inset-0
              bg-[radial-gradient(120%_120%_at_0%_0%,#FF6A3D_0%,transparent_50%),radial-gradient(120%_120%_at_100%_100%,#C2410C_0%,transparent_50%)]
              opacity-80
            "
          />
        </div>

<div className="flex items-center justify-between px-4 pt-4">
          <Tabs value={tab} onValueChange={(v) => setTab(v as AuthTab)}>
            <TabsList
              className="
                h-10 rounded-full bg-white/10 backdrop-blur
                border border-white/20
                p-1
              "
            >
              <TabsTrigger
                value="signup"
                className="
                  h-8 px-4 rounded-full text-white/90 data-[state=active]:bg-white data-[state=active]:text-black
                  transition-colors
                "
              >
                Sign up
              </TabsTrigger>
              <TabsTrigger
                value="signin"
                className="
                  h-8 px-4 rounded-full text-white/90 data-[state=active]:bg-white data-[state=active]:text-black
                  transition-colors
                "
              >
                Sign In
              </TabsTrigger>
            </TabsList>
          </Tabs>

<button
            aria-label="Close"
            className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-white/10 hover:bg-white/20 border border-white/20 text-white"
            onClick={() => onOpenChange(false)}
          >
            <X className="h-5 w-5" />
          </button>
        </div>

<div className="px-6 pb-6 pt-2">
          {errorMsg ? (
            <div className="mb-3 rounded-xl border border-red-400/30 bg-red-500/10 px-3 py-2 text-sm text-red-200">
              {errorMsg}
            </div>
          ) : null}

<Tabs value={tab} onValueChange={(v) => setTab(v as AuthTab)}>
            <TabsContent value="signup" className="mt-4">
              <h2 className="text-2xl md:text-3xl font-semibold text-white mb-6 text-pretty">Create an account</h2>

<Button
                className="
                  mt-5 w-full h-12 rounded-2xl
                  bg-white/80 hover:bg-white text-black font-semibold
                "
                type="button"
                onClick={() => void 0}
              >
                Create an account
              </Button>

<button
                type="button"
                className="
                  w-full h-12 rounded-2xl bg-black/40 border border-white/20 text-white
                  hover:bg-black/50 transition-colors inline-flex items-center justify-center gap-2
                  disabled:opacity-60
                "
                onClick={handleGoogleSignIn}
                disabled={loading === "google"}
              >
                <svg width="20" height="20" viewBox="0 0 533.5 544.3" aria-hidden="true">
                  <path
                    fill="#EA4335"
                    d="M533.5 278.4c0-18.6-1.7-37-5.1-54.8H272v103.8h147.5c-6.4 34.5-25.9 63.7-55.2 83.1v68h89.2c52.3-48.1 79.9-119 79.9-200.1z"
                  />
                  <path
                    fill="#34A853"
                    d="M272 544.3c72.6 0 133.6-24 178.2-65.2l-89.2-68c-24.7 16.6-56.3 26.3-89 26.3-68.4 0-126.3-46.1-147.1-108.1h-92.3v68.3C76.8 486.8 168.3 544.3 272 544.3z"
                  />
                  <path
                    fill="#4A90E2"
                    d="M124.9 329.3c-10-29.6-10-61.2 0-90.8v-68.3H32.6c-38.2 76.3-38.2 151.1 0 227.4l92.3-68.3z"
                  />
                  <path
                    fill="#FBBC05"
                    d="M272 107.7c39.5-.6 77.6 14 106.6 41.1l79.4-79.4C414.8 16.5 344.6-4.2 272 0 168.3 0 76.8 57.5 32.6 154.9l92.3 68.3C145.7 153.3 203.6 107.2 272 107.7z"
                  />
                </svg>
                <span className="font-medium">
                  {loading === "google" ? "Starting Google..." : "sign in with Google"}
                </span>
              </button>

<p className="mt-5 text-xs text-white/60 text-center">
                By creating an account, you agree to our Terms & Service
              </p>

<p className="mt-8 text-center text-white/70 text-sm">shiftza - future of work.</p>
            </TabsContent>

<TabsContent value="signin" className="mt-4">
              <h2 className="text-2xl md:text-3xl font-semibold text-white mb-6 text-pretty">Welcome back</h2>

<div className="space-y-3">
                <div className="relative">
                  <Mail className="absolute left-4 top-1/2 -translate-y-1/2 h-4 w-4 text-white/60 pointer-events-none" />
                  <Input
                    placeholder="Enter your email"
                    className="h-12 pl-10 rounded-2xl bg-black/40 border-white/20 text-white placeholder:text-white/60"
                    type="email"
                    inputMode="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                  />
                </div>
                <Input
                  placeholder="Password"
                  className="h-12 rounded-2xl bg-black/40 border-white/20 text-white placeholder:text-white/60"
                  type="password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                />
                <Button
                  className="mt-2 w-full h-12 rounded-2xl bg-white/80 hover:bg-white text-black font-semibold disabled:opacity-60"
                  type="button"
                  onClick={handleEmailSignIn}
                  disabled={loading === "email"}
                >
                  {loading === "email" ? "Signing In..." : "Sign In"}
                </Button>
              </div>

<div className="my-5 flex items-center gap-3">
                <div className="h-px flex-1 bg-white/15" />
                <span className="text-xs tracking-wide text-white/60">OR CONTINUE WITH</span>
                <div className="h-px flex-1 bg-white/15" />
              </div>

type AnimatedLoginProps = {
  onSubmit: (email: string, password: string) => Promise<void> | void
  onGoogle?: () => Promise<void> | void
  error?: string | null
  isLoading?: boolean
}

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 flex 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 default function AnimatedLogin({ onSubmit, onGoogle, error, isLoading: isLoadingProp }: AnimatedLoginProps) {
  const [showPassword, setShowPassword] = useState(false)
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [focusedInput, setFocusedInput] = useState<"email" | "password" | null>(null)
  const [rememberMe, setRememberMe] = useState(false)

// local loading used if parent doesn't control it
  const [localLoading, setLocalLoading] = useState(false)
  const isLoading = isLoadingProp ?? localLoading

// 3D card effect
  const mouseX = useMotionValue(0)
  const mouseY = useMotionValue(0)
  const rotateX = useTransform(mouseY, [-300, 300], [10, -10])
  const rotateY = useTransform(mouseX, [-300, 300], [-10, 10])

const handleMouseMove = (e: React.MouseEvent) => {
    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
    mouseX.set(e.clientX - rect.left - rect.width / 2)
    mouseY.set(e.clientY - rect.top - rect.height / 2)
  }

const handleMouseLeave = () => {
    mouseX.set(0)
    mouseY.set(0)
  }

const submit = async (e: React.FormEvent) => {
    e.preventDefault()
    try {
      if (isLoadingProp === undefined) setLocalLoading(true)
      await onSubmit(email, password)
    } finally {
      if (isLoadingProp === undefined) setLocalLoading(false)
    }
  }

return (
    <div className="min-h-screen w-screen bg-black relative overflow-hidden flex items-center justify-center">
      {/* Background gradient effect - matches the purple OnlyPipe style */}
      <div className="absolute inset-0 bg-gradient-to-b from-purple-500/40 via-purple-700/50 to-black" />

{/* Subtle noise texture overlay */}
      <div
        className="absolute inset-0 opacity-[0.03] mix-blend-soft-light"
        style={{
          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`,
          backgroundSize: "200px 200px",
        }}
      />

{/* Top radial glow */}
      <div className="absolute top-0 left-1/2 transform -translate-x-1/2 w-[120vh] h-[60vh] rounded-b-[50%] bg-purple-400/20 blur-[80px]" />
      <motion.div
        className="absolute top-0 left-1/2 transform -translate-x-1/2 w-[100vh] h-[60vh] rounded-b-full bg-purple-300/20 blur-[60px]"
        animate={{
          opacity: [0.15, 0.3, 0.15],
          scale: [0.98, 1.02, 0.98],
        }}
        transition={{
          duration: 8,
          repeat: Number.POSITIVE_INFINITY,
          repeatType: "mirror",
        }}
      />
      <motion.div
        className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-[90vh] h-[90vh] rounded-t-full bg-purple-400/20 blur-[60px]"
        animate={{
          opacity: [0.3, 0.5, 0.3],
          scale: [1, 1.1, 1],
        }}
        transition={{
          duration: 6,
          repeat: Number.POSITIVE_INFINITY,
          repeatType: "mirror",
          delay: 1,
        }}
      />

{/* Animated glow spots */}
      <div className="absolute left-1/4 top-1/4 w-96 h-96 bg-white/5 rounded-full blur-[100px] animate-pulse opacity-40" />
      <div className="absolute right-1/4 bottom-1/4 w-96 h-96 bg-white/5 rounded-full blur-[100px] animate-pulse delay-1000 opacity-40" />

<motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8 }}
        className="w-full max-w-sm relative z-10"
        style={{ perspective: 1500 }}
      >
        <motion.div
          className="relative"
          style={{ rotateX, rotateY }}
          onMouseMove={handleMouseMove}
          onMouseLeave={handleMouseLeave}
          whileHover={{ z: 10 }}
        >
          <div className="relative group">
            {/* Card glow effect - reduced intensity */}
            <motion.div
              className="absolute -inset-[1px] rounded-2xl opacity-0 group-hover:opacity-70 transition-opacity duration-700"
              animate={{
                boxShadow: [
                  "0 0 10px 2px rgba(255,255,255,0.03)",
                  "0 0 15px 5px rgba(255,255,255,0.05)",
                  "0 0 10px 2px rgba(255,255,255,0.03)",
                ],
                opacity: [0.2, 0.4, 0.2],
              }}
              transition={{
                duration: 4,
                repeat: Number.POSITIVE_INFINITY,
                ease: "easeInOut",
                repeatType: "mirror",
              }}
            />

{/* Traveling light beam effect - reduced opacity */}
            <div className="absolute -inset-[1px] rounded-2xl overflow-hidden">
              {/* Top light beam - enhanced glow */}
              <motion.div
                className="absolute top-0 left-0 h-[3px] w-[50%] bg-gradient-to-r from-transparent via-white to-transparent opacity-70"
                initial={{ filter: "blur(2px)" }}
                animate={{
                  left: ["-50%", "100%"],
                  opacity: [0.3, 0.7, 0.3],
                  filter: ["blur(1px)", "blur(2.5px)", "blur(1px)"],
                }}
                transition={{
                  left: {
                    duration: 2.5,
                    ease: "easeInOut",
                    repeat: Number.POSITIVE_INFINITY,
                    repeatDelay: 1,
                  },
                  opacity: {
                    duration: 1.2,
                    repeat: Number.POSITIVE_INFINITY,
                    repeatType: "mirror",
                  },
                  filter: {
                    duration: 1.5,
                    repeat: Number.POSITIVE_INFINITY,
                    repeatType: "mirror",
                  },
                }}
              />

{/* Right light beam - enhanced glow */}
              <motion.div
                className="absolute top-0 right-0 h-[50%] w-[3px] bg-gradient-to-b from-transparent via-white to-transparent opacity-70"
                initial={{ filter: "blur(2px)" }}
                animate={{
                  top: ["-50%", "100%"],
                  opacity: [0.3, 0.7, 0.3],
                  filter: ["blur(1px)", "blur(2.5px)", "blur(1px)"],
                }}
                transition={{
                  top: {
                    duration: 2.5,
                    ease: "easeInOut",
                    repeat: Number.POSITIVE_INFINITY,
                    repeatDelay: 1,
                    delay: 0.6,
                  },
                  opacity: {
                    duration: 1.2,
                    repeat: Number.POSITIVE_INFINITY,
                    repeatType: "mirror",
                    delay: 0.6,
                  },
                  filter: {
                    duration: 1.5,
                    repeat: Number.POSITIVE_INFINITY,
                    repeatType: "mirror",
                    delay: 0.6,
                  },
                }}
              />

{/* Bottom light beam - enhanced glow */}
              <motion.div
                className="absolute bottom-0 right-0 h-[3px] w-[50%] bg-gradient-to-r from-transparent via-white to-transparent opacity-70"
                initial={{ filter: "blur(2px)" }}
                animate={{
                  right: ["-50%", "100%"],
                  opacity: [0.3, 0.7, 0.3],
                  filter: ["blur(1px)", "blur(2.5px)", "blur(1px)"],
                }}
                transition={{
                  right: {
                    duration: 2.5,
                    ease: "easeInOut",
                    repeat: Number.POSITIVE_INFINITY,
                    repeatDelay: 1,
                    delay: 1.2,
                  },
                  opacity: {
                    duration: 1.2,
                    repeat: Number.POSITIVE_INFINITY,
                    repeatType: "mirror",
                    delay: 1.2,
                  },
                  filter: {
                    duration: 1.5,
                    repeat: Number.POSITIVE_INFINITY,
                    repeatType: "mirror",
                    delay: 1.2,
                  },
                }}
              />

{/* Left light beam - enhanced glow */}
              <motion.div
                className="absolute bottom-0 left-0 h-[50%] w-[3px] bg-gradient-to-b from-transparent via-white to-transparent opacity-70"
                initial={{ filter: "blur(2px)" }}
                animate={{
                  bottom: ["-50%", "100%"],
                  opacity: [0.3, 0.7, 0.3],
                  filter: ["blur(1px)", "blur(2.5px)", "blur(1px)"],
                }}
                transition={{
                  bottom: {
                    duration: 2.5,
                    ease: "easeInOut",
                    repeat: Number.POSITIVE_INFINITY,
                    repeatDelay: 1,
                    delay: 1.8,
                  },
                  opacity: {
                    duration: 1.2,
                    repeat: Number.POSITIVE_INFINITY,
                    repeatType: "mirror",
                    delay: 1.8,
                  },
                  filter: {
                    duration: 1.5,
                    repeat: Number.POSITIVE_INFINITY,
                    repeatType: "mirror",
                    delay: 1.8,
                  },
                }}
              />

{/* Subtle corner glow spots - reduced opacity */}
              <motion.div
                className="absolute top-0 left-0 h-[5px] w-[5px] rounded-full bg-white/40 blur-[1px]"
                animate={{
                  opacity: [0.2, 0.4, 0.2],
                }}
                transition={{
                  duration: 2,
                  repeat: Number.POSITIVE_INFINITY,
                  repeatType: "mirror",
                }}
              />
              <motion.div
                className="absolute top-0 right-0 h-[8px] w-[8px] rounded-full bg-white/60 blur-[2px]"
                animate={{
                  opacity: [0.2, 0.4, 0.2],
                }}
                transition={{
                  duration: 2.4,
                  repeat: Number.POSITIVE_INFINITY,
                  repeatType: "mirror",
                  delay: 0.5,
                }}
              />
              <motion.div
                className="absolute bottom-0 right-0 h-[8px] w-[8px] rounded-full bg-white/60 blur-[2px]"
                animate={{
                  opacity: [0.2, 0.4, 0.2],
                }}
                transition={{
                  duration: 2.2,
                  repeat: Number.POSITIVE_INFINITY,
                  repeatType: "mirror",
                  delay: 1,
                }}
              />
              <motion.div
                className="absolute bottom-0 left-0 h-[5px] w-[5px] rounded-full bg-white/40 blur-[1px]"
                animate={{
                  opacity: [0.2, 0.4, 0.2],
                }}
                transition={{
                  duration: 2.3,
                  repeat: Number.POSITIVE_INFINITY,
                  repeatType: "mirror",
                  delay: 1.5,
                }}
              />
            </div>

{/* Card border glow - reduced opacity */}
            <div className="absolute -inset-[0.5px] rounded-2xl bg-gradient-to-r from-white/3 via-white/7 to-white/3 opacity-60" />

{/* Glass card background */}
            <div className="relative bg-black/40 backdrop-blur-xl rounded-2xl p-6 border border-white/[0.05] shadow-2xl overflow-hidden">
              {/* Subtle card inner patterns */}
              <div
                className="absolute inset-0 opacity-[0.03]"
                style={{
                  backgroundImage: `linear-gradient(135deg, white 0.5px, transparent 0.5px), linear-gradient(45deg, white 0.5px, transparent 0.5px)`,
                  backgroundSize: "30px 30px",
                }}
              />

{/* Logo and header */}
              <div className="text-center space-y-1 mb-5">
                <motion.div
                  initial={{ scale: 0.5, opacity: 0 }}
                  animate={{ scale: 1, opacity: 1 }}
                  transition={{ type: "spring", duration: 0.8 }}
                  className="mx-auto w-10 h-10 rounded-full border border-white/10 flex items-center justify-center relative overflow-hidden"
                >
                  {/* Logo placeholder - would be an SVG in practice */}
                  {/*  */}
                  <span className="text-lg font-bold bg-clip-text text-transparent bg-gradient-to-b from-white to-white/70">
                    S
                  </span>

{/* Inner lighting effect */}
                  <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent opacity-50" />
                </motion.div>

<motion.h1
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.2 }}
                  className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-b from-white to-white/80"
                >
                  Welcome Back
                </motion.h1>

<motion.p
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ delay: 0.3 }}
                  className="text-white/60 text-xs"
                >
                  Sign in to continue to Shiftza
                </motion.p>
              </div>

{/* Login form */}
              <form onSubmit={submit} className="space-y-4">
                {error ? <p className="mb-2 text-xs text-red-300 text-center">{error}</p> : null}

<motion.div className="space-y-3">
                  {/* Email input */}
                  <motion.div
                    className={`relative ${focusedInput === "email" ? "z-10" : ""}`}
                    whileFocus={{ scale: 1.02 }}
                    whileHover={{ scale: 1.01 }}
                    transition={{ type: "spring", stiffness: 400, damping: 25 }}
                  >
                    <div className="absolute -inset-[0.5px] bg-gradient-to-r from-white/10 via-white/5 to-white/10 rounded-lg opacity-0 group-hover:opacity-100 transition-all duration-300" />

<Input
                        type="email"
                        placeholder="Email address"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        onFocus={() => setFocusedInput("email")}
                        onBlur={() => setFocusedInput(null)}
                        className="w-full bg-white/5 border-transparent focus:border-white/20 text-white placeholder:text-white/30 h-10 transition-all duration-300 pl-10 pr-3 focus:bg-white/10"
                        required
                      />
                    </div>
                  </motion.div>

{/* Password input */}
                  <motion.div
                    className={`relative ${focusedInput === "password" ? "z-10" : ""}`}
                    whileFocus={{ scale: 1.02 }}
                    whileHover={{ scale: 1.01 }}
                    transition={{ type: "spring", stiffness: 400, damping: 25 }}
                  >
                    <div className="absolute -inset-[0.5px] bg-gradient-to-r from-white/10 via-white/5 to-white/10 rounded-lg opacity-0 group-hover:opacity-100 transition-all duration-300" />

<Input
                        type={showPassword ? "text" : "password"}
                        placeholder="Password"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                        onFocus={() => setFocusedInput("password")}
                        onBlur={() => setFocusedInput(null)}
                        className="w-full bg-white/5 border-transparent focus:border-white/20 text-white placeholder:text-white/30 h-10 transition-all duration-300 pl-10 pr-10 focus:bg-white/10"
                        required
                      />

{/* Toggle password visibility */}
                      <button
                        type="button"
                        onClick={() => setShowPassword(!showPassword)}
                        className="absolute right-3 cursor-pointer"
                      >
                        {showPassword ? (
                          <Eye className="w-4 h-4 text-white/40 hover:text-white transition-colors duration-300" />
                        ) : (
                          <EyeClosed className="w-4 h-4 text-white/40 hover:text-white transition-colors duration-300" />
                        )}
                      </button>
                    </div>
                  </motion.div>
                </motion.div>

{/* Remember me & Forgot password */}
                <div className="flex items-center justify-between pt-1">
                  <label className="flex items-center space-x-2 text-xs text-white/60">
                    <input
                      type="checkbox"
                      className="h-4 w-4 rounded border border-white/20 bg-white/5 checked:bg-white checked:border-white focus:outline-none focus:ring-1 focus:ring-white/30 transition-all duration-200"
                      checked={rememberMe}
                      onChange={() => setRememberMe((v) => !v)}
                    />
                    <span>Remember me</span>
                  </label>
                  <Link
                    href="/forgot-password"
                    className="text-xs text-white/60 hover:text-white transition-colors duration-200"
                  >
                    Forgot password?
                  </Link>
                </div>

{/* Sign in button */}
                <motion.button
                  whileHover={{ scale: 1.02 }}
                  whileTap={{ scale: 0.98 }}
                  type="submit"
                  disabled={isLoading}
                  className="w-full relative group/button mt-5"
                >
                  {/* Button glow effect - reduced intensity */}
                  <div className="absolute inset-0 bg-white/10 rounded-lg blur-lg opacity-0 group-hover/button:opacity-70 transition-opacity duration-300" />

<div className="relative overflow-hidden bg-white text-black font-medium h-10 rounded-lg transition-all duration-300 flex items-center justify-center">
                    {/* Button background animation */}
                    <motion.div
                      className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/30 to-white/0 -z-10"
                      animate={{
                        x: ["-100%", "100%"],
                      }}
                      transition={{
                        duration: 1.5,
                        ease: "easeInOut",
                        repeat: Number.POSITIVE_INFINITY,
                        repeatDelay: 1,
                      }}
                      style={{
                        opacity: isLoading ? 1 : 0,
                        transition: "opacity 0.3s ease",
                      }}
                    />

<AnimatePresence mode="wait">
                      {isLoading ? (
                        <motion.div
                          key="loading"
                          initial={{ opacity: 0 }}
                          animate={{ opacity: 1 }}
                          exit={{ opacity: 0 }}
                          className="flex items-center justify-center"
                        >
                          <div className="w-4 h-4 border-2 border-black/70 border-t-transparent rounded-full animate-spin" />
                        </motion.div>
                      ) : (
                        <motion.span
                          key="button-text"
                          initial={{ opacity: 0 }}
                          animate={{ opacity: 1 }}
                          exit={{ opacity: 0 }}
                          className="flex items-center justify-center gap-1 text-sm font-medium"
                        >
                          Sign In
                          <ArrowRight className="w-3 h-3 group-hover/button:translate-x-1 transition-transform duration-300" />
                        </motion.span>
                      )}
                    </AnimatePresence>
                  </div>
                </motion.button>

{/* Minimal Divider */}
                <div className="relative mt-2 mb-4 flex items-center">
                  <div className="flex-grow border-t border-white/5"></div>
                  <span className="mx-3 text-xs text-white/40">or</span>
                  <div className="flex-grow border-t border-white/5"></div>
                </div>

{/* Google Sign In */}
                {onGoogle && (
                  <motion.button
                    whileHover={{ scale: 1.02 }}
                    whileTap={{ scale: 0.98 }}
                    type="button"
                    onClick={onGoogle}
                    className="w-full relative group/google"
                  >
                    <div className="relative overflow-hidden bg-white/5 text-white font-medium h-10 rounded-lg border border-white/10 hover:border-white/20 transition-all duration-300 flex items-center justify-center gap-2">
                      {/*  */}
                      <div className="w-4 h-4 flex items-center justify-center text-white/80 group-hover/google:text-white transition-colors duration-300">
                        G
                      </div>

<span className="text-white/80 group-hover/google:text-white transition-colors text-xs">
                        Sign in with Google
                      </span>
                    </div>
                  </motion.button>
                )}

{/* Sign up link */}
                <p className="text-center text-xs text-white/60 mt-4">
                  {"Don't have an account?"}{" "}
                  <Link
                    href="/sign-up"
                    className="relative inline-block"
                    aria-label="Sign up for a new account"
                    data-analytics-event="login_to_sign_up_click"
                    data-analytics-location="/auth/login"
                    onClick={() => {
                      try {
                        ;(window as any)?.analytics?.track?.("login_to_sign_up_click", { location: "/auth/login" })
                        ;(window as any)?.gtag?.("event", "login_to_sign_up_click", { location: "/auth/login" })
                        ;(window as any)?.plausible?.("login_to_sign_up_click", { props: { location: "/auth/login" } })
                        ;(window as any)?.umami?.track?.("login_to_sign_up_click", { location: "/auth/login" })
                        ;(window as any)?.posthog?.capture?.("login_to_sign_up_click", { location: "/auth/login" })
                      } catch {}
                    }}
                  >
                    <span className="relative z-10 text-white hover:text-white/70 transition-colors duration-300 font-medium">
                      Sign up
                    </span>
                    <span className="absolute bottom-0 left-0 w-0 h-[1px] bg-white group-hover:w-full transition-all duration-300" />
                  </Link>
                </p>
              </form>
            </div>
          </div>
        </motion.div>
      </motion.div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/auth/login-card.tsx" isMerged="true"
"use client"

import type React from "react"
import Link from "next/link"

import { useState } from "react"
import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

type Props = {
  onSuccess?: () => void
}

export function LoginCard({ onSuccess }: Props) {
  const supabase = createClient()
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

async function handleEmailLogin(e: React.FormEvent) {
    e.preventDefault()
    setLoading(true)
    setError(null)
    try {
      const { error } = await supabase.auth.signInWithPassword({ email, password })
      if (error) throw error
      onSuccess?.()
      // Optional: refresh to reflect authenticated UI
      window.location.reload()
    } catch (err: any) {
      setError(err?.message || "Sign-in failed")
    } finally {
      setLoading(false)
    }
  }

async function handleGoogleLogin() {
    setLoading(true)
    setError(null)
    try {
      // NOTE: The Google provider must be enabled in Supabase (Connect → Supabase → Providers)
      const { data, error } = await supabase.auth.signInWithOAuth({
        provider: "google",
        options: {
          // Redirect back to the current site; no dedicated callback route needed
          redirectTo: typeof window !== "undefined" ? window.location.origin : undefined,
        },
      })
      if (error) throw error
      // Supabase will redirect the current tab, no further action required
      if (data?.url) {
        // In some previews, a full redirect is more reliable than popups/iframes
        window.location.href = data.url
      }
    } catch (err: any) {
      setError(err?.message || "Google sign-in failed")
      setLoading(false)
    }
  }

return (
    <div className="relative w-[420px] md:w-[460px] rounded-2xl overflow-hidden text-white">
      {/* Border glow layers */}
      <div className="absolute -inset-px rounded-2xl bg-gradient-to-b from-purple-400/15 via-purple-500/10 to-purple-900/20" />
      <div className="absolute -inset-[0.5px] rounded-2xl bg-gradient-to-r from-white/5 via-white/10 to-white/5 opacity-30" />

{/* Card content */}
      <div className="relative backdrop-blur-xl rounded-2xl border border-white/10 shadow-2xl p-6">
        {/* Subtle pattern */}
        <div
          className="pointer-events-none absolute inset-0 opacity-[0.04] mix-blend-soft-light rounded-2xl"
          style={{
            backgroundImage:
              "linear-gradient(135deg, rgba(255,255,255,0.5) 0.5px, transparent 0.5px), linear-gradient(45deg, rgba(255,255,255,0.5) 0.5px, transparent 0.5px)",
            backgroundSize: "16px 16px, 16px 16px",
          }}
        />

<div className="relative z-10">
          {/* Avatar */}
          <div className="mx-auto mb-4 flex h-10 w-10 items-center justify-center rounded-full border border-white/20 text-white/80">
            S
          </div>

<h2 className="text-center text-2xl font-semibold">Welcome Back</h2>
          <p className="mt-1 text-center text-sm text-white/70">Sign in to continue to StyleMe</p>

<form onSubmit={handleEmailLogin} className="mt-6 space-y-3">
            <div className="space-y-1.5">
              <Label htmlFor="login-email" className="text-white/80">
                Email address
              </Label>
              <Input
                id="login-email"
                type="email"
                autoComplete="email"
                placeholder="you@example.com"
                className="h-11 bg-white/5 border-white/15 text-white placeholder:text-white/50"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
              />
            </div>

<div className="space-y-1.5">
              <Label htmlFor="login-password" className="text-white/80">
                Password
              </Label>
              <Input
                id="login-password"
                type="password"
                autoComplete="current-password"
                placeholder="••••••••"
                className="h-11 bg-white/5 border-white/15 text-white placeholder:text-white/50"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
              />
            </div>

<div className="flex items-center justify-between text-sm text-white/70">
              <label className="inline-flex items-center gap-2">
                <input type="checkbox" className="h-4 w-4 rounded border-white/20 bg-transparent" />
                Remember me
              </label>
              <button type="button" className="text-white/80 hover:text-white">
                Forgot password?
              </button>
            </div>

{error && <div className="text-sm text-red-400">{error}</div>}

<Button type="submit" disabled={loading} className="w-full h-11 bg-white text-black hover:bg-gray-200">
              {loading ? "Signing in..." : "Sign In →"}
            </Button>

<Button
              type="button"
              variant="outline"
              onClick={handleGoogleLogin}
              className="w-full h-11 bg-white/5 border-white/20 text-white hover:bg-white/10"
            >
              {/* Google G logo (colored) */}
              <svg width="18" height="18" viewBox="0 0 48 48" className="mr-2">
                <path
                  fill="#FFC107"
                  d="M43.611 20.083H42V20H24v8h11.303C33.602 31.91 29.174 35 24 35 16.82 35 11 29.18 11 22S16.82 9 24 9c3.59 0 6.84 1.353 9.343 3.557l5.657-5.657C35.23 3.042 29.9 1 24 1 10.745 1 0 11.745 0 25s10.745 24 24 24c13.255 0 24-10.745 24-24 0-1.61-.163-3.181-.389-4.917z"
                />
                <path
                  fill="#FF3D00"
                  d="M6.305 14.691l6.571 4.817C14.51 16.398 18.84 13 24 13c3.59 0 6.84 1.353 9.343 3.557l5.657-5.657C35.23 3.042 29.9 1 24 1 15.318 1 7.8 5.887 3.56 13.09l2.745 1.601z"
                />
                <path
                  fill="#4CAF50"
                  d="M24 49c5.064 0 9.673-1.74 13.303-4.69l-6.143-5.168C29.861 40.79 27.058 42 24 42c-5.132 0-9.466-3.455-11.01-8.182l-6.47 4.984C9.724 44.993 16.387 49 24 49z"
                />
                <path
                  fill="#1976D2"
                  d="M43.611 20.083H42V20H24v8h11.303c-1.642 3.827-5.407 7-11.303 7-7.18 0-13-5.82-13-13S16.82 9 24 9c3.59 0 6.84 1.353 9.343 3.557l5.657-5.657C35.23 3.042 29.9 1 24 1 10.745 1 0 11.745 0 25s10.745 24 24 24c13.255 0 24-10.745 24-24 0-1.61-.163-3.181-.389-4.917z"
                />
              </svg>
              Sign in with Google
            </Button>

<div className="text-center text-sm text-white/70">
              Don't have an account?{" "}
              <Link
                href="/sign-up"
                aria-label="Sign up for a new account"
                className="underline underline-offset-4"
                data-analytics-event="login_to_sign_up_click"
                data-analytics-location="/auth/login"
                onClick={() => {
                  try {
                    ;(window as any)?.analytics?.track?.("login_to_sign_up_click", { location: "/auth/login" })
                    ;(window as any)?.gtag?.("event", "login_to_sign_up_click", { location: "/auth/login" })
                    ;(window as any)?.plausible?.("login_to_sign_up_click", { props: { location: "/auth/login" } })
                    ;(window as any)?.umami?.track?.("login_to_sign_up_click", { location: "/auth/login" })
                    ;(window as any)?.posthog?.capture?.("login_to_sign_up_click", { location: "/auth/login" })
                  } catch {}
                }}
              >
                Sign up
              </Link>
            </div>
          </form>
        </div>
      </div>
    </div>
  )
}

export default LoginCard
[V0_FILE]typescriptreact:file="components/back-button.tsx" isMerged="true"
"use client"

import { ArrowLeft } from "lucide-react"
import { useRouter, usePathname } from "next/navigation"
import { Button } from "@/components/ui/button"

export default function BackButton() {
  const router = useRouter()
  const pathname = usePathname()
  if (pathname === "/") return null

return (
    <Button
      onClick={() => router.back()}
      className="fixed top-20 left-6 z-50 bg-white/10 hover:bg-white/20 backdrop-blur-sm border border-white/20 rounded-full w-10 h-10 p-0 flex items-center justify-center"
      aria-label="Go back"
    >
      <ArrowLeft className="h-5 w-5 text-card" />
    </Button>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/application-table.tsx" isMerged="true"
"use client"

type Application = {
  id: string
  role: string
  company: string
  status: "Applied" | "Interview" | "Offer" | "Rejected"
  date: string
}

export function ApplicationTable({ rows }: { rows: Application[] }) {
  return (
    <div className="card-live rounded-lg border bg-card p-4 overflow-x-auto">
      <h3 className="mb-3 font-medium">Applications</h3>
      <table className="w-full text-sm">
        <thead>
          <tr className="text-left text-muted-foreground">
            <th className="py-2 pr-4">Role</th>
            <th className="py-2 pr-4">Company</th>
            <th className="py-2 pr-4">Status</th>
            <th className="py-2 pr-4">Date</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r) => (
            <tr key={r.id} className="border-t">
              <td className="py-2 pr-4">{r.role}</td>
              <td className="py-2 pr-4">{r.company}</td>
              <td className="py-2 pr-4">
                <span className="rounded-md bg-secondary px-2 py-1 text-xs">{r.status}</span>
              </td>
              <td className="py-2 pr-4">{r.date}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/calendar-strip.tsx" isMerged="true"
"use client"

export function CalendarStrip() {
  return (
    <div className="rounded-2xl bg-card shadow-sm p-4">
      <div className="flex items-center justify-between">
        <div className="text-sm text-muted-foreground">September 2024</div>
        <div className="space-x-2 text-sm">
          <button className="rounded-full bg-muted px-2 py-0.5">August</button>
          <button className="rounded-full bg-muted px-2 py-0.5">October</button>
        </div>
      </div>

<div className="mt-4 grid grid-cols-7 gap-3 text-center">
        {"SMTWTFS".split("").map((d) => (
          <div key={d} className="text-muted-foreground text-sm">
            {d}
          </div>
        ))}
      </div>

<div className="mt-4 space-y-3">
        <div className="rounded-xl bg-foreground text-background px-4 py-2 w-fit">Weekly Team Sync</div>
        <div className="rounded-xl bg-muted px-4 py-2 w-fit">Onboarding Session</div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/dashboard-shell.tsx" isMerged="true"
"use client"

import type { ReactNode } from "react"
import { cn } from "@/lib/utils"

export function DashboardShell({ children }: { children: ReactNode }) {
  return (
    <main
      className={cn(
        "min-h-[100dvh]",
        "bg-gradient-to-br from-background via-muted/40 to-background",
        "p-4 md:p-6 lg:p-8",
      )}
    >
      <div className="mx-auto w-full max-w-7xl">{children}</div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/devices-benefits-accordion.tsx" isMerged="true"
"use client"

export function DevicesBenefitsAccordion({ role }: { role: "worker" | "employer" }) {
  const items =
    role === "employer"
      ? ["Hiring budget & billing", "ATS integrations", "Company policies", "Recruiting team & roles"]
      : ["Pension contributions", "Devices", "Compensation Summary", "Employee Benefits"]

return (
    <div className="rounded-2xl bg-card shadow-sm p-4">
      <ul className="space-y-3">
        {items.map((label) => (
          <li key={label} className="rounded-xl border border-border p-4">
            <div className="flex items-center justify-between">
              <span className="font-medium">{label}</span>
              <span className="text-sm text-muted-foreground">Details</span>
            </div>
          </li>
        ))}
      </ul>
    </div>
  )
}
[V0_FILE]typescript:file="components/dashboard/headline-kpis.tsx" isMerged="true"
"use client"

export function HeadlineKPIs({
  kpis,
  role,
}: {
  kpis?: {
    employees?: number
    hirings?: number
    projects?: number
    skills?: number
    samples?: number
    applications?: number
  }
  role?: "worker" | "employer"
}) {
  if (role === "worker") {
    return (
      <div className="rounded-2xl bg-card shadow-sm p-6 flex items-center justify-between">
        <KPINumber label="Skills" value={kpis?.skills} />
        <KPINumber label="Work Samples" value={kpis?.samples} />
        <KPINumber label="Applications" value={kpis?.applications} />
      </div>
    )
  }

return (
    <div className="rounded-2xl bg-card shadow-sm p-6 flex items-center justify-between">
      <KPINumber label="Employees" value={kpis?.employees} />
      <KPINumber label="Hirings" value={kpis?.hirings} />
      <KPINumber label="Projects" value={kpis?.projects} />
    </div>
  )
}

function KPINumber({ label, value }: { label: string; value?: number }) {
  const display = typeof value === "number" ? value.toString() : "—"
  return (
    <div className="text-center">
      <div className="text-3xl md:text-4xl font-semibold">{display}</div>
      <div className="text-sm text-muted-foreground">{label}</div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/job-card.tsx" isMerged="true"
"use client"
import { cn } from "@/lib/utils"

type JobCardProps = {
  title: string
  company?: string
  locationType?: string
  jobType?: string
  budget?: string
  onClick?: () => void
  className?: string
}

export function JobCard({ title, company, locationType, jobType, budget, onClick, className }: JobCardProps) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={cn(
        "w-full rounded-lg border bg-background p-4 text-left shadow-sm transition-all duration-200",
        "hover:shadow focus:outline-none focus:ring-2 focus:ring-primary",
        className,
      )}
    >
      <div className="flex items-start justify-between gap-4">
        <div className="space-y-1">
          <div className="text-base font-medium leading-tight">{title}</div>
          <div className="text-sm text-muted-foreground">
            {[company, jobType, locationType].filter(Boolean).join(" • ")}
          </div>
        </div>
        {budget ? <div className="text-sm font-medium">{budget}</div> : null}
      </div>
    </button>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/kpi-row.tsx" isMerged="true"
"use client"
import Link from "next/link"

type KPIItem = { label: string; value: number }

export function KPIRow({ role, items }: { role: "worker" | "employer"; items: KPIItem[] }) {
  return (
    <div className={`grid grid-cols-2 ${role === "employer" ? "md:grid-cols-6" : "md:grid-cols-5"} gap-4`}>
      {items.map((it, i) => (
        <div key={i} className="rounded-xl bg-card p-4 shadow-sm">
          <div className="flex items-center justify-between">
            <span className="text-sm text-muted-foreground">{it.label}</span>
            <span className="text-xs rounded-full px-2 py-0.5 bg-muted/60">{it.value}%</span>
          </div>
          <div className="mt-2 h-2 rounded-full bg-muted">
            <div className="h-2 rounded-full" style={{ width: `${it.value}%`, backgroundColor: "rgb(244 211 94)" }} />
          </div>
        </div>
      ))}
      <Link
        href={role === "employer" ? "/hire-talent" : "/browse-jobs"}
        className="rounded-xl bg-card p-4 shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
      >
        <div className="flex items-center justify-between">
          <span className="text-sm font-medium">{role === "employer" ? "HIRE TALENT" : "Browse Projects"}</span>
        </div>
      </Link>
      {role === "employer" && (
        <Link
          href="/talent-search"
          className="rounded-xl bg-card p-4 shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
        >
          <div className="flex items-center justify-between">
            <span className="text-sm font-medium">Talent</span>
          </div>
        </Link>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/kpi-stats.tsx" isMerged="true"
export function KpiStats({ hours, openTasks, sessions }: { hours: number; openTasks: number; sessions: number }) {
  const item = (label: string, value: number) => (
    <div className="rounded-2xl bg-card p-6 text-right">
      <div className="text-4xl font-semibold">{value}</div>
      <div className="text-sm text-muted-foreground mt-1">{label}</div>
    </div>
  )
  return (
    <div className="grid grid-cols-3 gap-4">
      {item("Hours (week)", Math.round(hours))}
      {item("Open tasks", openTasks)}
      {item("Sessions", sessions)}
    </div>
  )
}
export default KpiStats
[V0_FILE]typescriptreact:file="components/dashboard/message-list.tsx" isMerged="true"
import { cn } from "@/lib/utils"

type Message = {
  id: string
  body: string
  created_at: string
  sender_name?: string
}

export function MessageList({
  items,
  className,
  emptyText = "No messages yet",
}: {
  items: Message[]
  className?: string
  emptyText?: string
}) {
  if (!items?.length) {
    return (
      <div className={cn("rounded-lg border bg-background p-4 text-sm text-muted-foreground", className)}>
        {emptyText}
      </div>
    )
  }

return (
    <div className={cn("rounded-lg border bg-background p-2", className)}>
      <ul className="divide-y">
        {items.map((m) => (
          <li key={m.id} className="p-3 hover:bg-muted/40 transition-colors">
            <div className="flex items-center justify-between gap-2">
              <span className="text-sm font-medium truncate">
                {m.sender_name ? `${m.sender_name}: ` : null}
                <span className="font-normal text-foreground">{m.body}</span>
              </span>
              <time className="shrink-0 text-xs text-muted-foreground">
                {new Date(m.created_at).toLocaleDateString()}
              </time>
            </div>
          </li>
        ))}
      </ul>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/onboarding-panel.tsx" isMerged="true"
"use client"
import useSWR from "swr"
import { useState } from "react"
type Task = { id: string; title: string; done: boolean; due_at: string | null }
const fetcher = (u: string) => fetch(u).then((r) => r.json())

export function OnboardingPanel() {
  const { data, mutate } = useSWR<{ data: Task[] }>("/api/user-tasks", fetcher)
  const tasks = data?.data ?? []
  const completed = tasks.filter((t) => t.done).length
  const total = tasks.length || 1
  const pct = Math.round((completed / total) * 100)

async function toggle(t: Task) {
    await fetch("/api/user-tasks", { method: "POST", body: JSON.stringify({ id: t.id, done: !t.done }) })
    mutate()
  }
  async function add(title: string) {
    if (!title.trim()) return
    await fetch("/api/user-tasks", { method: "POST", body: JSON.stringify({ title }) })
    mutate()
  }

const [newTitle, setNewTitle] = useState("")
  return (
    <div className="rounded-2xl bg-card p-5">
      <div className="flex items-center justify-between">
        <div className="text-lg font-medium">Onboarding</div>
        <div className="text-sm text-muted-foreground">
          {completed}/{total} · {pct}%
        </div>
      </div>
      <ul className="mt-4 space-y-2">
        {tasks.map((t) => (
          <li key={t.id} className="flex items-center gap-3">
            <input aria-label="done" type="checkbox" checked={t.done} onChange={() => toggle(t)} className="h-4 w-4" />
            <span className={t.done ? "line-through text-muted-foreground" : ""}>{t.title}</span>
          </li>
        ))}
      </ul>
      <div className="mt-4 flex gap-2">
        <input
          value={newTitle}
          onChange={(e) => setNewTitle(e.target.value)}
          placeholder="Add task"
          className="flex-1 rounded-xl border bg-background px-3 py-2 text-sm"
        />
        <button
          onClick={() => {
            add(newTitle)
            setNewTitle("")
          }}
          className="px-3 py-2 rounded-xl bg-primary text-primary-foreground text-sm"
        >
          Add
        </button>
      </div>
    </div>
  )
}
export default OnboardingPanel
[V0_FILE]typescriptreact:file="components/dashboard/onboarding-summary.tsx" isMerged="true"
"use client"

export function OnboardingSummary({ percent }: { percent: number }) {
  return (
    <div className="rounded-2xl bg-card shadow-sm p-6">
      <div className="flex items-center justify-between">
        <h3 className="font-medium">Onboarding</h3>
        <div className="text-xl font-semibold">{percent}%</div>
      </div>
      <div className="mt-3 flex items-center gap-2">
        {["Task", "Docs", "Training"].map((t, i) => (
          <div
            key={t}
            className="px-3 py-1 rounded-full text-sm"
            style={{ backgroundColor: i === 0 ? "rgb(244 211 94)" : "rgba(0,0,0,0.06)" }}
          >
            {t}
          </div>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/onboarding-tasks-panel.tsx" isMerged="true"
"use client"

import useSWR from "swr"

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

export function OnboardingTasksPanel({ total, done }: { total: number; done: number }) {
  const { data, mutate } = useSWR("/api/dashboard/tasks", fetcher)
  const items = Array.isArray(data?.items) ? data.items : []

async function toggle(id: string, next: boolean) {
    await fetch("/api/dashboard/tasks", { method: "POST", body: JSON.stringify({ id, done: next }) })
    mutate()
  }

const label = `${done}/${total}`

return (
    <div className="rounded-2xl bg-card shadow-sm p-0 overflow-hidden">
      <div className="bg-foreground text-background px-4 py-3 flex items-center justify-between">
        <div className="font-medium">Onboarding Task</div>
        <div className="text-sm">{label}</div>
      </div>
      <ul className="divide-y divide-border">
        {items.map((it: any) => (
          <li key={it.id} className="flex items-center justify-between p-4">
            <div className="flex items-center gap-3">
              <span className="h-2 w-2 rounded-full bg-muted inline-block" />
              <span>{it.title}</span>
            </div>
            <button
              onClick={() => toggle(it.id, !it.done)}
              className={`text-sm px-3 py-1 rounded-full ${it.done ? "bg-green-500 text-white" : "bg-muted"}`}
            >
              {it.done ? "Done" : "Mark done"}
            </button>
          </li>
        ))}
      </ul>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/personal-dashboard.tsx" isMerged="true"
// Uses shadcn/ui primitives that are included by default.

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

export default function PersonalDashboard() {
  return (
    <main className="mx-auto max-w-7xl p-6 space-y-6 bg-background text-foreground">
      <header className="space-y-2">
        <h1 className="text-3xl font-semibold tracking-tight text-pretty">Welcome in</h1>
        <p className="text-sm text-muted-foreground">Your personal dashboard</p>
      </header>

<section className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card>
          <CardHeader>
            <CardTitle className="text-sm text-muted-foreground">Interviews</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="h-3 w-full rounded-full bg-muted" />
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle className="text-sm text-muted-foreground">Hired</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="h-3 w-full rounded-full bg-muted" />
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle className="text-sm text-muted-foreground">Project time</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="h-3 w-full rounded-full bg-muted" />
          </CardContent>
        </Card>
      </section>

<section className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle className="text-base">Progress</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="h-48 rounded-md border border-dashed" />
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Time tracker</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="h-48 rounded-full border border-dashed" />
          </CardContent>
        </Card>
      </section>

<section className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle className="text-base">Calendar</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="h-56 rounded-md border border-dashed" />
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Onboarding Tasks</CardTitle>
          </CardHeader>
          <CardContent>
            <ul className="space-y-3 text-sm">
              <li className="flex items-center justify-between">
                <span>Interview</span>
                <span className="text-muted-foreground">Today 09:30</span>
              </li>
              <li className="flex items-center justify-between">
                <span>Team Meeting</span>
                <span className="text-muted-foreground">10:30</span>
              </li>
              <li className="flex items-center justify-between">
                <span>Project Update</span>
                <span className="text-muted-foreground">13:00</span>
              </li>
            </ul>
          </CardContent>
        </Card>
      </section>
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/pipeline-view.tsx" isMerged="true"
"use client"

type Stage = { name: string; count: number }

export function PipelineView({ stages }: { stages: Stage[] }) {
  return (
    <div className="card-live rounded-lg border bg-card p-4">
      <h3 className="mb-3 font-medium">Applicant Pipeline</h3>
      <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
        {stages.map((s) => (
          <div key={s.name} className="rounded-md border p-3 bg-secondary">
            <div className="text-xs text-muted-foreground">{s.name}</div>
            <div className="mt-1 text-xl font-semibold">{s.count}</div>
          </div>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/profile-card.tsx" isMerged="true"
type Props = {
  name: string
  title?: string | null
  avatarUrl?: string | null
  balance?: string | null
}
export function ProfileCard({ name, title, avatarUrl, balance }: Props) {
  return (
    <div className="rounded-3xl bg-card text-foreground shadow-sm p-5 flex items-end gap-4">
      <img
        src={avatarUrl || "/placeholder.svg?height=160&width=160&query=profile avatar photo"}
        alt="Profile photo"
        className="h-28 w-28 rounded-2xl object-cover"
      />
      <div className="flex-1">
        <div className="text-xl font-medium">{name}</div>
        <div className="text-sm text-muted-foreground">{title || "—"}</div>
      </div>
      {balance ? <div className="px-3 py-1.5 rounded-full bg-muted text-foreground text-sm">{balance}</div> : null}
    </div>
  )
}
export default ProfileCard
[V0_FILE]typescriptreact:file="components/dashboard/profile-or-company-card.tsx" isMerged="true"
"use client"

export function ProfileOrCompanyCard({
  role,
  profile,
  company,
  balance,
}: {
  role: "worker" | "employer"
  profile?: { name?: string; title?: string; avatar_url?: string }
  company?: { name?: string; logo_url?: string }
  balance?: number
}) {
  const displayName = role === "employer" ? (company?.name ?? "—") : (profile?.name ?? "—")
  const subtitle = role === "employer" ? "—" : (profile?.title ?? "—")
  const avatar = role === "employer" ? company?.logo_url : profile?.avatar_url

return (
    <div className="rounded-2xl bg-card shadow-sm p-4 md:p-6">
      <div className="flex items-center gap-4">
        <img
          src={avatar || "/placeholder.svg?height=96&width=96&query=avatar or logo"}
          alt="avatar"
          className="h-20 w-20 rounded-2xl object-cover"
        />
        <div className="flex-1">
          <div className="text-lg font-medium">{displayName}</div>
          <div className="text-sm text-muted-foreground">{subtitle}</div>
        </div>
        <div className="rounded-full bg-muted px-3 py-1 text-sm">
          {balance != null ? `$${Number(balance).toLocaleString()}` : "—"}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/stats-card.tsx" isMerged="true"
import type React from "react"
import { cn } from "@/lib/utils"

type StatsCardProps = {
  title: string
  value: string | number
  hint?: string
  className?: string
  children?: React.ReactNode
}

export function StatsCard({ title, value, hint, className, children }: StatsCardProps) {
  return (
    <div
      className={cn(
        "rounded-lg border bg-background p-4 shadow-sm transition-all duration-200 hover:shadow",
        "flex flex-col gap-2",
        className,
      )}
    >
      <div className="text-sm text-muted-foreground">{title}</div>
      <div className="text-2xl font-semibold tracking-tight">{value}</div>
      {hint ? <div className="text-xs text-muted-foreground">{hint}</div> : null}
      {children ? <div className="mt-2">{children}</div> : null}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/status-strips.tsx" isMerged="true"
type Strip = { label: string; value: number; color?: string }
export function StatusStrips({ strips }: { strips: Strip[] }) {
  return (
    <div className="grid md:grid-cols-4 gap-4">
      {strips.map((s) => (
        <div key={s.label} className="rounded-2xl bg-card p-4">
          <div className="text-sm text-muted-foreground">{s.label}</div>
          <div className="mt-2 h-2 rounded-full bg-muted overflow-hidden">
            <div
              className="h-full rounded-full"
              style={{
                width: `${Math.min(100, Math.max(0, s.value))}%`,
                backgroundColor: s.color || "hsl(var(--primary))",
              }}
            />
          </div>
          <div className="mt-2 text-sm">{s.value}%</div>
        </div>
      ))}
    </div>
  )
}
export default StatusStrips
[V0_FILE]typescriptreact:file="components/dashboard/time-tracker-card.tsx" isMerged="true"
"use client"

import { useState } from "react"

export function TimeTrackerCard() {
  const [running, setRunning] = useState(false)
  const [seconds, setSeconds] = useState(155) // default 02:35

async function toggle() {
    const res = await fetch("/api/dashboard/time", {
      method: "POST",
      body: JSON.stringify({ action: running ? "stop" : "start" }),
    })
    if (res.ok) setRunning(!running)
  }

const mm = String(Math.floor(seconds / 60)).padStart(2, "0")
  const ss = String(seconds % 60).padStart(2, "0")

return (
    <div className="rounded-2xl bg-card shadow-sm p-4">
      <div className="flex items-center justify-between mb-2">
        <h3 className="font-medium">Time tracker</h3>
      </div>
      <div className="flex items-center justify-center h-40">
        <div className="relative h-32 w-32 rounded-full bg-muted">
          <div className="absolute inset-2 rounded-full" style={{ boxShadow: "0 0 0 8px rgb(244 211 94)" }} />
          <div className="absolute inset-0 flex items-center justify-center text-2xl font-medium">
            {mm}:{ss}
          </div>
        </div>
      </div>
      <div className="mt-3 flex items-center gap-2">
        <button onClick={toggle} className="rounded-full bg-foreground text-background px-4 py-1 text-sm">
          {running ? "Pause" : "Play"}
        </button>
        <button
          onClick={async () => {
            await fetch("/api/dashboard/time", { method: "POST", body: JSON.stringify({ action: "reset" }) })
            setRunning(false)
            setSeconds(0)
          }}
          className="rounded-full bg-muted px-4 py-1 text-sm"
        >
          Reset
        </button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/time-tracker.tsx" isMerged="true"
"use client"
import { useEffect, useRef, useState } from "react"

export function TimeTracker() {
  const [running, setRunning] = useState(false)
  const [elapsed, setElapsed] = useState(0)
  const startedAt = useRef<number | null>(null)

useEffect(() => {
    let t: any
    if (running) {
      if (!startedAt.current) startedAt.current = Date.now()
      t = setInterval(() => setElapsed(Date.now() - (startedAt.current as number)), 1000)
    }
    return () => clearInterval(t)
  }, [running])

async function start() {
    const res = await fetch("/api/time-entries", { method: "POST", body: JSON.stringify({ action: "start" }) })
    if (!res.ok) return
    startedAt.current = Date.now()
    setRunning(true)
  }
  async function stop() {
    const res = await fetch("/api/time-entries", { method: "POST", body: JSON.stringify({ action: "stop" }) })
    if (!res.ok) return
    setRunning(false)
    setElapsed(0)
    startedAt.current = null
  }

const totalSec = Math.floor(elapsed / 1000)
  const m = String(Math.floor(totalSec / 60)).padStart(2, "0")
  const s = String(totalSec % 60).padStart(2, "0")

return (
    <div className="rounded-2xl bg-card p-5">
      <div className="text-lg font-medium">Time tracker</div>
      <div className="mt-6 flex items-center gap-4">
        <div className="text-5xl font-semibold tabular-nums">
          {m}:{s}
        </div>
        <div className="flex gap-2">
          {!running ? (
            <button onClick={start} className="px-3 py-1.5 rounded-full bg-primary text-primary-foreground text-sm">
              Start
            </button>
          ) : (
            <button onClick={stop} className="px-3 py-1.5 rounded-full bg-muted text-foreground text-sm">
              Stop
            </button>
          )}
        </div>
      </div>
    </div>
  )
}
export default TimeTracker
[V0_FILE]typescriptreact:file="components/dashboard/weekly-progress-chart.tsx" isMerged="true"
"use client"
import useSWR from "swr"

type Entry = { started_at: string; ended_at: string | null; duration_sec: number | null }
const fetcher = (url: string) => fetch(url).then((r) => r.json())

export function WeeklyProgressChart() {
  const { data } = useSWR<{ data: Entry[] }>("/api/time-entries", fetcher, { refreshInterval: 30_000 })
  const entries = data?.data ?? []
  const byDay = Array(7).fill(0) as number[]
  for (const e of entries) {
    const d = new Date(e.started_at)
    const idx = (d.getDay() + 6) % 7 // Mon=0
    const hrs = (e.duration_sec ?? 0) / 3600
    byDay[idx] += hrs
  }
  const max = Math.max(1, ...byDay)
  const labels = ["M", "T", "W", "T", "F", "S", "S"]
  return (
    <div className="rounded-2xl bg-card p-5">
      <div className="text-lg font-medium">Progress</div>
      <div className="text-sm text-muted-foreground">Work Time this week</div>
      <div className="mt-4 grid grid-cols-7 gap-3 items-end h-40">
        {byDay.map((v, i) => (
          <div key={i} className="flex flex-col items-center gap-2">
            <div className="w-3 rounded-full bg-muted" style={{ height: "100%" }}>
              <div className="w-3 rounded-full bg-primary" style={{ height: `${(v / max) * 100}%` }} />
            </div>
            <div className="text-xs text-muted-foreground">{labels[i]}</div>
          </div>
        ))}
      </div>
    </div>
  )
}
export default WeeklyProgressChart
[V0_FILE]typescriptreact:file="components/dashboard/welcome-banner.tsx" isMerged="true"
"use client"

export function WelcomeBanner({ name }: { name: string }) {
  return (
    <div className="rounded-2xl bg-card text-foreground shadow-sm p-6 md:p-8">
      <h1 className="text-3xl md:text-4xl font-semibold text-pretty">
        {"Welcome in, "}
        {name}
      </h1>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/work-progress-card.tsx" isMerged="true"
"use client"

import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"

export function WorkProgressCard({ weekly }: { weekly: number[] }) {
  const days = ["S", "M", "T", "W", "T", "F", "S"]
  const data = days.map((d, i) => ({ day: d, hours: weekly?.[i] ?? 0 }))

return (
    <div className="rounded-2xl bg-card shadow-sm p-4">
      <div className="flex items-center justify-between mb-2">
        <h3 className="font-medium">Progress</h3>
      </div>
      <div className="h-48">
        <ResponsiveContainer width="100%" height="100%">
          <BarChart data={data} barCategoryGap={20}>
            <CartesianGrid vertical={false} strokeOpacity={0.2} />
            <XAxis dataKey="day" />
            <YAxis width={24} />
            <Tooltip />
            <Bar dataKey="hours" radius={[6, 6, 0, 0]} fill="rgb(244 211 94)" />
          </BarChart>
        </ResponsiveContainer>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/faq-section.tsx" isMerged="true"
"use client"

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Button } from "@/components/ui/button"

const faqs = [
  {
    question: "Do I really not need a degree to join?",
    answer: (
      <>
        Absolutely not.
        <br />
        <br />
        Shiftza is built for skilled professionals — whether you're self-taught, bootcamp-trained, or learned on the
        job.
        <br />
        <br />
        We verify your skills through portfolios, tests, and real work — not diplomas.
      </>
    ),
  },
  {
    question: "Is it free to join?",
    answer: (
      <>
        Yes — creating a profile and applying to projects is completely free.
        <br />
        <br />
        We only take a small commission when you successfully complete a paid project.
      </>
    ),
  },
  {
    question: "How do you verify skills without degrees?",
    answer: (
      <>
        We use multiple verification methods:
        <br />
        <br />
        Portfolio reviews, skill assessments, peer endorsements, and most importantly — your actual work on the platform
        builds your reputation.
      </>
    ),
  },
  {
    question: "What kind of projects can I find?",
    answer: (
      <>
        Everything from short-term gigs to long-term contracts.
        <br />
        <br />
        Web development, mobile apps, design, data analysis, content creation, and more.
        <br />
        <br />
        Companies post projects ranging from $500 to $50,000+.
      </>
    ),
  },
  {
    question: "How does payment work?",
    answer: (
      <>
        All payments go through our secure escrow system.
        <br />
        <br />
        Companies fund projects upfront, and you get paid when milestones are completed.
        <br />
        <br />
        No chasing invoices. No payment disputes.
      </>
    ),
  },
  {
    question: "Can companies really hire without worrying about layoffs?",
    answer: (
      <>
        Yes — that's the whole point.
        <br />
        <br />
        Project-based hiring means companies scale up when they need talent and scale down naturally when projects end.
        <br />
        <br />
        No awkward layoffs. No severance packages. Just flexible collaboration.
      </>
    ),
  },
]

interface FAQSectionProps {
  onOpenInstall?: () => void
}

export default function FAQSection({ onOpenInstall }: FAQSectionProps) {
  return (
    <section className="py-16 md:py-24">
      <div className="max-w-4xl mx-auto px-4 sm:px-6">
        <h2
          className="text-center mb-12 md:mb-16 font-semibold"
          style={{
            backgroundImage: "linear-gradient(rgb(245, 245, 245), rgb(245, 245, 245) 29%, rgb(153, 153, 153))",
            color: "transparent",
            fontFamily: "GeistSans, sans-serif",
            fontSize: "clamp(32px, 6vw, 52px)",
            fontWeight: 600,
            letterSpacing: "clamp(-1.5px, -0.04em, -2.08px)",
            lineHeight: "1.15",
            textAlign: "center",
            WebkitBackgroundClip: "text",
            backgroundClip: "text",
          }}
        >
          Questions You Might Be Wondering
        </h2>

<Accordion type="single" collapsible className="w-full space-y-4">
          {faqs.map((faq, index) => (
            <AccordionItem
              key={index}
              value={`item-${index}`}
              className="border border-white/10 rounded-lg bg-white/5 overflow-hidden"
            >
              <AccordionTrigger className="px-5 py-4 hover:no-underline">
                <span
                  className="text-left font-medium text-white"
                  style={{
                    fontFamily: 'var(--font-geist-sans), "GeistSans", sans-serif',
                    fontSize: "18px",
                  }}
                >
                  {faq.question}
                </span>
              </AccordionTrigger>
              <AccordionContent className="px-5 pb-4 pt-0">
                <p
                  className="text-white/80"
                  style={{
                    fontFamily:
                      'GeistMono, ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace',
                    fontSize: "15px",
                    lineHeight: "1.5",
                  }}
                >
                  {faq.answer}
                </p>
              </AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>

{/* Call to action */}
        <div className="mt-12 md:mt-16 text-center">
          <p
            className="text-white/80 mb-6"
            style={{
              fontFamily:
                'GeistMono, ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace',
              fontSize: "16px",
              lineHeight: "1.5",
            }}
          >
            Still unsure? Create your profile in 5 minutes — you'll see why skills matter more than degrees.
          </p>

{onOpenInstall && (
            <Button
              onClick={onOpenInstall}
              className="btn-sheen sheen-on-hover bg-[hsl(var(--primary))] hover:brightness-110 text-[hsl(var(--primary-foreground))] font-mono text-sm font-semibold tracking-wider py-3 px-6 rounded-lg live-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--accent))] focus-visible:ring-offset-2 focus-visible:ring-offset-background"
              style={{
                letterSpacing: "0.56px",
                height: "48px",
              }}
            >
              GET STARTED
            </Button>
          )}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/feature-video.tsx" isMerged="true"
"use client"

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

interface FeatureVideoProps {
  src: string
  alt: string
  fallbackSrc?: string
  fixedAspectRatio?: boolean
}

export default function FeatureVideo({ src, alt, fallbackSrc, fixedAspectRatio = false }: FeatureVideoProps) {
  const videoRef = useRef<HTMLVideoElement>(null)
  const containerRef = useRef<HTMLDivElement>(null)
  const [isLoaded, setIsLoaded] = useState(false)
  const [currentSrc, setCurrentSrc] = useState(src)
  const [isInView, setIsInView] = useState(false)

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

const handleCanPlay = () => {
      setIsLoaded(true)
    }

const handleError = () => {
      // Silently try fallback if available
      if (fallbackSrc && currentSrc !== fallbackSrc) {
        setCurrentSrc(fallbackSrc)
        setIsLoaded(false)
      }
    }

// Intersection Observer to detect when video enters viewport
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          setIsInView(entry.isIntersecting)
        })
      },
      {
        threshold: 0.2, // Trigger when 20% of video is visible
        rootMargin: "50px 0px", // Start playing a bit before entering viewport
      },
    )

video.addEventListener("canplay", handleCanPlay)
    video.addEventListener("error", handleError)
    observer.observe(container)

// Reset when src changes
    video.load()

// If already loaded
    if (video.readyState >= 3) {
      handleCanPlay()
    }

return () => {
      video.removeEventListener("canplay", handleCanPlay)
      video.removeEventListener("error", handleError)
      observer.disconnect()
    }
  }, [currentSrc, fallbackSrc])

// Handle play/pause based on intersection and load state
  useEffect(() => {
    const video = videoRef.current
    if (!video || !isLoaded) return

if (isInView) {
      // Try to play the video
      const playPromise = video.play()
      if (playPromise !== undefined) {
        playPromise.catch((error) => {
          console.log("Video autoplay failed:", error)
          // Autoplay failed, but that's okay
        })
      }
    } else {
      // Pause when out of view
      if (!video.paused) {
        video.pause()
      }
    }
  }, [isInView, isLoaded])

// Update source when prop changes
  useEffect(() => {
    if (src !== currentSrc) {
      setCurrentSrc(src)
      setIsLoaded(false)
    }
  }, [src])

return (
    <div
      ref={containerRef}
      className={`w-full bg-black rounded-t-lg overflow-hidden ${fixedAspectRatio ? "" : ""}`}
      style={fixedAspectRatio ? { aspectRatio: "1728/1080" } : {}}
    >
      <video
        ref={videoRef}
        src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/download%20%2813%29-dQaE4fuXQd4jy0NQ0ezKmKbbbQUBwt.mp4"
        className={`w-full h-full transition-opacity duration-500 ${isLoaded ? "opacity-100" : "opacity-0"}`}
        loop
        muted
        playsInline
        controls={false}
        preload="auto"
        aria-label={alt}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true"
"use client"

import { Twitter } from "lucide-react"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

export default function Footer() {
  return (
    <footer className="w-full border-t border-foreground/10">
      <div className="max-w-[1200px] mx-auto px-6 md:px-8 py-10 md:py-14">
        {/* Top: Columns */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8 md:gap-10">
          {/* Features */}
          <div>
            <h3 className="text-xs tracking-[0.18em] font-semibold text-foreground/70 mb-4">FEATURES</h3>
            <ul className="space-y-3 text-foreground/80">
              <li>
                <a href="#" className="hover:text-foreground transition-colors">
                  Feedback Boards
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-foreground transition-colors">
                  Voting System
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-foreground transition-colors">
                  Roadmap Management
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-foreground transition-colors">
                  Analytics Dashboard
                </a>
              </li>
            </ul>
          </div>

{/* Resources */}
          <div>
            <h3 className="text-xs tracking-[0.18em] font-semibold text-foreground/70 mb-4">RESOURCES</h3>
            <ul className="space-y-3 text-foreground/80">
              <li>
                <a href="#" className="hover:text-foreground transition-colors">
                  Customer Stories
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-foreground transition-colors">
                  Migration Guide
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-foreground transition-colors">
                  API Documentation
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-foreground transition-colors">
                  Help Center
                </a>
              </li>
            </ul>
          </div>

{/* Company */}
          <div>
            <h3 className="text-xs tracking-[0.18em] font-semibold text-foreground/70 mb-4">COMPANY</h3>
            <ul className="space-y-3 text-foreground/80">
              <li>
                <a href="#" className="hover:text-foreground transition-colors">
                  About Shiftza
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-foreground transition-colors">
                  Pricing
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-foreground transition-colors">
                  Contact Us
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-foreground transition-colors">
                  Canny vs Shiftza
                </a>
              </li>
            </ul>
          </div>

{/* Stay in touch */}
          <div>
            <h3 className="text-xs tracking-[0.18em] font-semibold text-foreground/70 mb-4">STAY IN TOUCH</h3>

{/* Email input with Join */}
            <form
              className="flex items-center gap-3"
              onSubmit={(e) => {
                e.preventDefault()
                // No backend hooked up; intentionally no-op.
              }}
            >
              <div className="flex-1">
                <Input
                  type="email"
                  placeholder="you@example.com"
                  aria-label="Email address"
                  className="h-11 rounded-xl bg-background border-foreground/20 text-foreground placeholder:text-foreground/40"
                  required
                />
              </div>
              <Button
                type="submit"
                className="h-11 rounded-xl bg-foreground text-primary-foreground hover:bg-foreground/90"
                aria-label="Join mailing list"
              >
                Join
              </Button>
            </form>

{/* Social icons */}
            <div className="flex items-center gap-3 mt-5">
              {/* Instagram official-style colored mark (gradient bg + white camera) */}
              <a
                href="https://www.instagram.com/shiftza.in/?utm_source=ig_web_button_share_sheet"
                aria-label="Instagram"
                target="_blank"
                rel="noopener noreferrer"
                className="w-10 h-10 rounded-full border border-foreground/20 flex items-center justify-center hover:border-foreground/40 transition-colors"
              >
                <svg className="w-5 h-5" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                  <defs>
                    <linearGradient id="igGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                      <stop offset="0%" stopColor="#F58529" />
                      <stop offset="35%" stopColor="#DD2A7B" />
                      <stop offset="60%" stopColor="#8134AF" />
                      <stop offset="100%" stopColor="#515BD4" />
                    </linearGradient>
                  </defs>
                  {/* Gradient rounded square */}
                  <rect x="1.5" y="1.5" width="21" height="21" rx="5" fill="url(#igGradient)" />
                  {/* White camera glyph */}
                  <path
                    fill="#fff"
                    d="M12 7.8c2.32 0 4.2 1.88 4.2 4.2s-1.88 4.2-4.2 4.2-4.2-1.88-4.2-4.2 1.88-4.2 4.2-4.2zm0 1.8a2.4 2.4 0 100 4.8 2.4 2.4 0 000-4.8zM16.8 6.9a.9.9 0 110 1.8.9.9 0 010-1.8zM8.4 5.5h7.2A3.9 3.9 0 0119.5 9.4v5.2a3.9 3.9 0 01-3.9 3.9H8.4a3.9 3.9 0 01-3.9-3.9V9.4A3.9 3.9 0 018.4 5.5zm0 1.8A2.1 2.1 0 006.3 9.4v5.2a2.1 2.1 0 002.1 2.1h7.2a2.1 2.1 0 002.1-2.1V9.4a2.1 2.1 0 00-2.1-2.1H8.4z"
                  />
                </svg>
              </a>
              {/* Twitter remains unchanged */}
              <a
                href="#"
                aria-label="Twitter"
                className="w-10 h-10 rounded-full border border-foreground/20 flex items-center justify-center text-foreground/80 hover:text-foreground hover:border-foreground/40 transition-colors"
              >
                <Twitter className="w-5 h-5" />
              </a>
              {/* LinkedIn updated to use brand icon and open company page */}
              <a
                href="https://www.linkedin.com/company/shiftzaa/"
                aria-label="LinkedIn"
                target="_blank"
                rel="noopener noreferrer"
                className="w-10 h-10 rounded-full border border-foreground/20 flex items-center justify-center hover:border-foreground/40 transition-colors"
              >
                <svg className="w-5 h-5" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                  <rect x="1" y="1" width="22" height="22" rx="4" fill="#0A66C2" />
                  <path
                    fill="#fff"
                    d="M6.94 9.18H4.3v10.04h2.64V9.18zM5.62 4.78c-.86 0-1.56.7-1.56 1.56 0 .86.7 1.56 1.56 1.56.86 0 1.56-.7 1.56-1.56 0-.86-.7-1.56-1.56-1.56zM19.7 19.22v-5.44c0-2.64-1.41-3.87-3.29-3.87-1.52 0-2.2.84-2.58 1.43v-1.25H11.3c.03.83 0 10.13 0 10.13h2.54v-5.66c0-.3.02-.6.11-.82.25-.6.81-1.22 1.76-1.22 1.24 0 1.74.92 1.74 2.27v5.43H19.7z"
                  />
                </svg>
              </a>
            </div>
          </div>
        </div>

{/* Divider */}
        <div className="mt-8 md:mt-10 border-t border-foreground/10" />

{/* Bottom row */}
        <div className="mt-6 flex flex-col md:flex-row items-center justify-between gap-4 text-sm">
          <p
            className="text-foreground/60 font-mono flex items-center gap-1.5"
            style={{
              fontFamily:
                'GeistMono, ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace',
            }}
          >
            © {new Date().getFullYear()} Shiftza. All rights reserved.
          </p>

<nav className="flex items-center gap-6 text-foreground/70">
            <a href="#" className="hover:text-foreground transition-colors">
              Privacy
            </a>
            <span className="text-foreground/30">•</span>
            <a href="#" className="hover:text-foreground transition-colors">
              Terms
            </a>
            <span className="text-foreground/30">•</span>
            <a href="#top" className="hover:text-foreground transition-colors">
              Back to top
            </a>
          </nav>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="components/hero-frame-mobile.tsx" isMerged="true"
"use client"
import { useEffect, useRef, useState } from "react"
import type React from "react"

import { Plus, ChevronLeft, ChevronRight } from "lucide-react"
import { ShareStoryModal } from "./share-story-modal"
import { VideoScrollHero } from "./ui/video-scroll-hero"

type HeroFrameProps = {
  className?: string
}

export function HeroFrameMobile({ className }: HeroFrameProps) {
  const [isModalOpen, setIsModalOpen] = useState(false)

return (
    <div
      className={[
        "w-full h-full flex flex-col items-center justify-start",
        "rounded-3xl overflow-hidden",
        className,
      ].join(" tracking-tighter py-0 ")}
      aria-label="Stories feed"
    >
      <VideoScrollHero className="w-full flex-shrink-0" />

<div className="w-full flex flex-col items-center gap-2 pb-2 relative flex-1 mt-4">
        <div className="w-full flex items-center justify-between px-3 gap-2">
          <div className="bg-gradient-to-r from-foreground/5 to-foreground/10 border border-foreground/20 bg-foreground text-background px-3 py-1.5 rounded-md flex-1 min-w-0">
            <p className="text-xs font-medium py-0 my-0 px-0 line-clamp-2">
              Will Skills Ever Speak Louder Than Certificates?
            </p>
          </div>
          <button
            onClick={() => setIsModalOpen(true)}
            className="flex items-center justify-center w-8 h-8 hover:bg-primary/90 rounded-full transition-colors shadow-lg text-background bg-foreground flex-shrink-0"
            aria-label="Share your story"
            title="Share your story"
          >
            <Plus className="w-4 h-4" />
          </button>
        </div>
        <StoriesScrollerMobile className="w-full h-full" />
        <ShareStoryModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
      </div>
    </div>
  )
}

function StoriesScrollerMobile({ className }: { className?: string }) {
  const CARD_H = 280
  const AUTO_ADVANCE_MS = 8000
  const HINT_ANIMATION_START = 3000 // Start hint animation after 3 seconds

const containerRef = useRef<HTMLDivElement>(null)
  const [currentIdx, setCurrentIdx] = useState(0)
  const [isDragging, setIsDragging] = useState(false)
  const [dragStart, setDragStart] = useState(0)
  const [showHint, setShowHint] = useState(true) // Track if hint animation should show
  const autoAdvanceRef = useRef<NodeJS.Timeout | null>(null)
  const hintTimeoutRef = useRef<NodeJS.Timeout | null>(null)
  const pausedRef = useRef(false)

const stories = STORIES_20

useEffect(() => {
    const startAutoAdvance = () => {
      if (autoAdvanceRef.current) clearTimeout(autoAdvanceRef.current)
      autoAdvanceRef.current = setTimeout(() => {
        if (!pausedRef.current) {
          setCurrentIdx((prev) => (prev + 1) % stories.length)
        }
        startAutoAdvance()
      }, AUTO_ADVANCE_MS)
    }

startAutoAdvance()
    return () => {
      if (autoAdvanceRef.current) clearTimeout(autoAdvanceRef.current)
    }
  }, [stories.length])

useEffect(() => {
    if (hintTimeoutRef.current) clearTimeout(hintTimeoutRef.current)
    setShowHint(false)
    hintTimeoutRef.current = setTimeout(() => {
      setShowHint(true)
    }, HINT_ANIMATION_START)

return () => {
      if (hintTimeoutRef.current) clearTimeout(hintTimeoutRef.current)
    }
  }, [currentIdx])

const pauseAutoAdvance = () => {
    pausedRef.current = true
    setShowHint(false) // Hide hint when user interacts
    if (autoAdvanceRef.current) clearTimeout(autoAdvanceRef.current)
    setTimeout(() => {
      pausedRef.current = false
    }, 10000)
  }

const handleMouseDown = (e: React.MouseEvent) => {
    setIsDragging(true)
    setDragStart(e.clientX)
    pauseAutoAdvance()
  }

const handleTouchStart = (e: React.TouchEvent) => {
    setIsDragging(true)
    setDragStart(e.touches[0].clientX)
    pauseAutoAdvance()
  }

const handleMouseUp = (e: React.MouseEvent) => {
    if (!isDragging) return
    const diff = dragStart - e.clientX
    if (Math.abs(diff) > 50) {
      if (diff > 0) {
        setCurrentIdx((prev) => (prev + 1) % stories.length)
      } else {
        setCurrentIdx((prev) => (prev - 1 + stories.length) % stories.length)
      }
    }
    setIsDragging(false)
  }

const handleTouchEnd = (e: React.TouchEvent) => {
    if (!isDragging) return
    const diff = dragStart - e.changedTouches[0].clientX
    if (Math.abs(diff) > 50) {
      if (diff > 0) {
        setCurrentIdx((prev) => (prev + 1) % stories.length)
      } else {
        setCurrentIdx((prev) => (prev - 1 + stories.length) % stories.length)
      }
    }
    setIsDragging(false)
  }

useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "ArrowRight") {
        setCurrentIdx((prev) => (prev + 1) % stories.length)
        pauseAutoAdvance()
      } else if (e.key === "ArrowLeft") {
        setCurrentIdx((prev) => (prev - 1 + stories.length) % stories.length)
        pauseAutoAdvance()
      }
    }

window.addEventListener("keydown", handleKeyDown)
    return () => window.removeEventListener("keydown", handleKeyDown)
  }, [stories.length])

const currentStory = stories[currentIdx]

return (
    <div
      ref={containerRef}
      className={["relative w-full", "mx-auto", className || ""].join(" mb-auto ")}
      style={{ height: CARD_H }}
      onMouseDown={handleMouseDown}
      onMouseUp={handleMouseUp}
      onTouchStart={handleTouchStart}
      onTouchEnd={handleTouchEnd}
      aria-live="polite"
      role="region"
    >
      {stories.map((s, idx) => (
        <div
          key={`${s.id}-${idx}`}
          className={`absolute inset-0 text-foreground shadow-sm transition-all duration-700 my-0 mb-0 border-2 border-gray-400 border-double rounded-lg bg-secondary ${
            idx === currentIdx && showHint ? "swipe-hint" : ""
          }`}
          style={{
            opacity: idx === currentIdx ? 1 : 0,
            visibility: idx === currentIdx ? "visible" : "hidden",
            transform:
              idx === currentIdx
                ? "scale(1) translateX(0) rotate(0deg)"
                : idx < currentIdx
                  ? "scale(0.8) translateX(-20px) rotate(-1deg)"
                  : "scale(0.8) translateX(20px) rotate(1deg)",
            zIndex: idx === currentIdx ? 10 : 0,
            filter: idx === currentIdx ? "blur(0px)" : "blur(2px)",
            boxShadow:
              idx === currentIdx
                ? "0 0 30px rgba(59, 130, 246, 0.3), 0 4px 6px rgba(0, 0, 0, 0.1)"
                : "0 4px 6px rgba(0, 0, 0, 0.1)",
          }}
        >
          <article className="flex flex-row gap-0 mx-0 px-3 py-2 pl-3 pr-2 my-auto mb-0 h-auto">
            <div className="flex-1 min-w-0 flex flex-col mb-0 mt-8">
              <div className="flex items-center gap-2 text-sm flex-wrap mt-0 leading-4 tracking-tighter text-left">
                <h3 className="font-semibold text-base">{s.name}</h3>
                <span className="text-foreground/40">•</span>
                <span className="text-foreground/60">{s.location}</span>
                <span className="text-foreground/40">•</span>
                <span className="text-foreground/60">{s.yearsExp} years exp</span>
                <span className="text-foreground/40">•</span>
                <span className="text-xs rounded-full px-2.5 py-0.5 border bg-background/60">{s.category}</span>
              </div>

<p className="mt-3 text-base font-semibold leading-snug leading-4 tracking-tighter text-left">{s.headline}</p>

<p className="mt-2 text-sm leading-relaxed leading-4 tracking-tighter text-left">{s.body}</p>
            </div>
          </article>
        </div>
      ))}

<div className="absolute top-0 left-0 right-0 z-20 px-4 pt-4">
        <div className="flex items-center justify-center px-2 rounded-full bg-foreground/10 border border-foreground/20 w-fit mx-auto py-0 mr-0 ml-0">
          <span className="text-xs font-medium text-foreground/70">
            {currentIdx + 1} / {stories.length}
          </span>
        </div>
      </div>

<div className="absolute top-4 right-4 flex gap-2 z-20">
        <button
          onClick={() => setCurrentIdx((prev) => (prev - 1 + stories.length) % stories.length)}
          className="flex items-center justify-center w-8 rounded-full bg-foreground/10 hover:bg-foreground/20 transition-colors border border-foreground/20 h-5"
          aria-label="Previous story"
          title="Previous"
        >
          <ChevronLeft className="w-4 h-4 text-foreground/70" />
        </button>
        <button
          onClick={() => setCurrentIdx((prev) => (prev + 1) % stories.length)}
          className="flex items-center justify-center w-8 rounded-full bg-foreground/10 hover:bg-foreground/20 transition-colors border border-foreground/20 h-5"
          aria-label="Next story"
          title="Next"
        >
          <ChevronRight className="w-4 h-4 text-foreground/70" />
        </button>
      </div>
    </div>
  )
}

const STORIES_20 = [
  {
    id: "1",
    initial: "A",
    name: "Arjun Mehta",
    location: "Mumbai, Maharashtra",
    yearsExp: 5,
    category: "Software Development",
    headline: "Coding genius stuck in delivery job",
    body: "Self-taught programmer who can code better than computer science graduates, but no tech company will even interview me without a degree. I have a portfolio that speaks for itself, but HR filters me out before anyone sees my work. The irony? The apps I built are used by thousands, but I'm still delivering food.",
    skills: ["Full-Stack Development", "React & Node.js", "Cloud Architecture", "Database Design"],
    likes: 892,
    comments: 156,
  },
  {
    id: "2",
    initial: "P",
    name: "Priya Sharma",
    location: "Bangalore, Karnataka",
    yearsExp: 7,
    category: "Data Science",
    headline: "ML expert rejected for lacking degree",
    body: "I taught myself Python, statistics, and machine learning through online courses and real projects. My predictive models have 95% accuracy, better than what I see in production at big companies. But every job posting says 'Bachelor's required' and my applications never make it past the ATS system.",
    skills: ["Machine Learning", "Python & TensorFlow", "Statistical Analysis", "Data Engineering"],
    likes: 743,
    comments: 128,
  },
  {
    id: "3",
    initial: "R",
    name: "Rahul Singh",
    location: "Delhi NCR",
    yearsExp: 6,
    category: "DevOps Engineering",
    headline: "Infrastructure wizard denied without certification",
    body: "I manage Kubernetes clusters, CI/CD pipelines, and cloud infrastructure for freelance clients who pay me well. Yet when I apply to companies, they want AWS certifications and a degree. I've built systems that handle millions of requests, but that doesn't count as 'qualified' apparently.",
    skills: ["Kubernetes & Docker", "AWS & Azure", "CI/CD Automation", "Infrastructure as Code"],
    likes: 621,
    comments: 94,
  },
  {
    id: "4",
    initial: "S",
    name: "Sneha Patel",
    location: "Ahmedabad, Gujarat",
    yearsExp: 4,
    category: "UI/UX Design",
    headline: "Self-taught designer rejected by agencies",
    body: "Self-taught designer with a portfolio of apps that have won design awards. I understand user psychology, accessibility, and modern design systems better than most graduates. But design agencies won't even look at my work because I don't have a design degree from a fancy college.",
    skills: ["UI/UX Design", "Figma & Prototyping", "Design Systems", "User Research"],
    likes: 567,
    comments: 89,
  },
  {
    id: "5",
    initial: "V",
    name: "Vikram Reddy",
    location: "Hyderabad, Telangana",
    yearsExp: 8,
    category: "Cybersecurity",
    headline: "Security expert can't get hired without degree",
    body: "I've reported critical security flaws to companies like Google and Microsoft, earning bug bounties. I know penetration testing, network security, and ethical hacking inside out. But security firms require a degree in computer science, so I'm stuck doing freelance work instead of a stable job.",
    skills: ["Penetration Testing", "Network Security", "Ethical Hacking", "Security Auditing"],
    likes: 834,
    comments: 142,
  },
  {
    id: "6",
    initial: "M",
    name: "Meera Krishnan",
    location: "Chennai, Tamil Nadu",
    yearsExp: 5,
    category: "Mobile Development",
    headline: "App developer with 500K downloads rejected",
    body: "I learned Swift and Kotlin by building real apps that people actually use and love. My apps have 4.5+ star ratings and generate revenue. But when I apply to mobile development positions, they want a CS degree and I get auto-rejected before anyone sees my published work on the App Store.",
    skills: ["iOS Development", "Android Development", "Mobile Architecture", "App Performance"],
    likes: 698,
    comments: 117,
  },
  {
    id: "7",
    initial: "K",
    name: "Karan Joshi",
    location: "Pune, Maharashtra",
    yearsExp: 6,
    category: "Backend Engineering",
    headline: "Backend engineer filtered out by HR",
    body: "Self-taught backend engineer who understands distributed systems, microservices, and database optimization. I've built APIs that handle 10M+ requests per day for my clients. But tech companies filter me out because I learned from documentation and practice instead of a university classroom.",
    skills: ["API Development", "Microservices", "Database Optimization", "System Design"],
    likes: 712,
    comments: 103,
  },
  {
    id: "8",
    initial: "A",
    name: "Ananya Gupta",
    location: "Kolkata, West Bengal",
    yearsExp: 4,
    category: "Frontend Development",
    headline: "Frontend master denied interview without degree",
    body: "I mastered React, TypeScript, and modern CSS through building real projects. My code is clean, performant, and accessible. Clients love working with me and refer others. But when I apply to product companies, they want a degree and won't even give me a technical interview to prove my skills.",
    skills: ["React & TypeScript", "Modern CSS", "Web Performance", "Accessibility"],
    likes: 589,
    comments: 91,
  },
  {
    id: "9",
    initial: "D",
    name: "Deepak Kumar",
    location: "Jaipur, Rajasthan",
    yearsExp: 7,
    category: "Blockchain Development",
    headline: "Blockchain developer managing millions, still unemployed",
    body: "I taught myself Solidity and blockchain architecture by building DeFi protocols. My smart contracts are audited and secure, managing real money for real users. But blockchain companies want a degree in computer science, even though most CS programs don't even teach blockchain technology.",
    skills: ["Smart Contracts", "Solidity & Web3", "DeFi Protocols", "Blockchain Security"],
    likes: 923,
    comments: 167,
  },
  {
    id: "10",
    initial: "N",
    name: "Nisha Verma",
    location: "Lucknow, Uttar Pradesh",
    yearsExp: 5,
    category: "QA Engineering",
    headline: "QA engineer rejected for lacking certification",
    body: "Self-taught QA engineer who writes comprehensive test suites and catches bugs before production. I know Selenium, Cypress, and test automation frameworks better than many certified testers. But companies want QA certifications and a degree, not someone who actually knows how to test software properly.",
    skills: ["Test Automation", "Selenium & Cypress", "API Testing", "Performance Testing"],
    likes: 456,
    comments: 73,
  },
  {
    id: "11",
    initial: "R",
    name: "Rohan Malhotra",
    location: "Chandigarh, Punjab",
    yearsExp: 6,
    category: "Cloud Architecture",
    headline: "Cloud architect filtered out by HR systems",
    body: "I migrated 20+ companies to cloud platforms, saving them thousands in costs. I understand AWS, Azure, and GCP architecture patterns deeply. But enterprise companies require cloud certifications and a degree, even though I have more hands-on experience than most certified architects.",
    skills: ["Cloud Architecture", "AWS & Azure", "Cost Optimization", "Migration Strategy"],
    likes: 678,
    comments: 112,
  },
  {
    id: "12",
    initial: "S",
    name: "Sanjana Iyer",
    location: "Coimbatore, Tamil Nadu",
    yearsExp: 4,
    category: "Product Management",
    headline: "Product manager rejected without MBA",
    body: "Self-taught product manager who understands user needs, market fit, and agile development. I've launched products that generated real revenue and solved real problems. But product management roles require an MBA or engineering degree, not someone who actually knows how to build products users love.",
    skills: ["Product Strategy", "User Research", "Agile Methodology", "Data-Driven Decisions"],
    likes: 534,
    comments: 87,
  },
  {
    id: "13",
    initial: "A",
    name: "Amit Desai",
    location: "Surat, Gujarat",
    yearsExp: 8,
    category: "AI/ML Engineering",
    headline: "AI engineer denied job without PhD",
    body: "I trained neural networks that power real applications with thousands of users. I understand transformers, computer vision, and NLP from building actual AI products. But AI companies want PhDs and research papers, not someone who can actually deploy AI models that work in production.",
    skills: ["Deep Learning", "Computer Vision", "Natural Language Processing", "Model Deployment"],
    likes: 867,
    comments: 145,
  },
  {
    id: "14",
    initial: "P",
    name: "Pooja Nair",
    location: "Kochi, Kerala",
    yearsExp: 5,
    category: "Technical Writing",
    headline: "Technical writer rejected for no English degree",
    body: "Self-taught technical writer who creates clear, comprehensive documentation that developers actually use. I understand code, APIs, and how to explain complex concepts simply. But tech companies want English or Communications degrees, not someone who can actually write technical content that makes sense.",
    skills: ["API Documentation", "Technical Communication", "Developer Experience", "Content Strategy"],
    likes: 423,
    comments: 68,
  },
  {
    id: "15",
    initial: "H",
    name: "Harsh Agarwal",
    location: "Indore, Madhya Pradesh",
    yearsExp: 6,
    category: "Game Development",
    headline: "Game developer with 200K players unemployed",
    body: "I taught myself Unity and game design by building and publishing actual games. My games have positive reviews and a dedicated player base. But game studios require a degree in game design or computer science, even though I have more shipped games than most of their junior developers.",
    skills: ["Unity & C#", "Game Design", "3D Graphics", "Gameplay Programming"],
    likes: 756,
    comments: 124,
  },
  {
    id: "16",
    initial: "T",
    name: "Tanvi Kapoor",
    location: "Noida, Uttar Pradesh",
    yearsExp: 4,
    category: "Digital Marketing",
    headline: "Marketing expert rejected by agencies",
    body: "Self-taught digital marketer who understands SEO, content strategy, and social media algorithms. I've grown multiple brands from zero to six-figure revenues. But marketing agencies want a marketing degree, not someone who actually knows how to grow businesses online in today's landscape.",
    skills: ["SEO & SEM", "Content Strategy", "Social Media Marketing", "Analytics & Growth"],
    likes: 612,
    comments: 98,
  },
  {
    id: "17",
    initial: "V",
    name: "Varun Saxena",
    location: "Bhopal, Madhya Pradesh",
    yearsExp: 7,
    category: "Systems Programming",
    headline: "Open-source contributor can't get hired",
    body: "I write low-level code in C and Rust, contributing to major open-source projects. I understand operating systems, compilers, and performance optimization deeply. But systems engineering roles require a CS degree and won't consider someone who learned by reading kernel code and contributing to real projects.",
    skills: ["C & Rust", "Operating Systems", "Performance Optimization", "Systems Architecture"],
    likes: 789,
    comments: 134,
  },
  {
    id: "18",
    initial: "R",
    name: "Riya Chatterjee",
    location: "Guwahati, Assam",
    yearsExp: 5,
    category: "E-commerce Development",
    headline: "E-commerce builder generating millions, still rejected",
    body: "Self-taught e-commerce developer who builds Shopify apps and custom stores. My clients make real money from the platforms I build. But e-commerce companies want a degree and certifications, not someone who understands conversion optimization and payment integrations from building actual stores.",
    skills: ["E-commerce Platforms", "Payment Integration", "Conversion Optimization", "Inventory Systems"],
    likes: 543,
    comments: 86,
  },
  {
    id: "19",
    initial: "S",
    name: "Siddharth Rao",
    location: "Visakhapatnam, Andhra Pradesh",
    yearsExp: 6,
    category: "IoT Development",
    headline: "IoT developer denied without electronics degree",
    body: "Self-taught IoT developer who learned embedded systems and IoT protocols by building actual devices that people use in their homes. I understand hardware, firmware, and cloud integration. But IoT companies require an electronics degree, even though most graduates have never built a real IoT product that works outside a lab.",
    skills: ["Embedded Systems", "IoT Protocols", "Firmware Development", "Hardware Integration"],
    likes: 634,
    comments: 107,
  },
  {
    id: "20",
    initial: "K",
    name: "Kavya Menon",
    location: "Thiruvananthapuram, Kerala",
    yearsExp: 4,
    category: "Animation & VFX",
    headline: "Animator rejected by studios without degree",
    body: "Self-taught animator who mastered Blender, After Effects, and 3D modeling through countless hours of practice. My work has been featured in client projects and online portfolios. But animation studios want a degree from an animation school, not someone who learned by actually creating professional-quality animations.",
    skills: ["3D Animation", "Visual Effects", "Motion Graphics", "3D Modeling"],
    likes: 498,
    comments: 79,
  },
]
[V0_FILE]typescriptreact:file="components/hero-frame.tsx" isMerged="true"
"use client"
import { HeroFrameMobile } from "./hero-frame-mobile"
import { HeroFrameDesktop } from "./hero-frame-desktop"

type HeroFrameProps = {
  className?: string
}

export function HeroFrame({ className }: HeroFrameProps) {
  return (
    <>
      <div className="md:hidden">
        <HeroFrameMobile className={className} />
      </div>

<div className="hidden md:block">
        <HeroFrameDesktop className={className} />
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/hero-image.tsx" isMerged="true"
"use client"

export default function HeroImage() {
  return (
    <div className="w-full max-w-[1200px] mx-auto">
      <div className="w-full bg-black rounded-[16px] overflow-hidden">
        <img
          src="/images/design-mode/hero-image.jpg.jpeg"
          alt="Shiftza skills-first talent platform"
          className="w-full h-auto rounded-[16px]"
        />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/hero-video.tsx" isMerged="true"
"use client"

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

export default function HeroVideo() {
  const videoRef = useRef<HTMLVideoElement>(null)
  const containerRef = useRef<HTMLDivElement>(null)
  const [isLoaded, setIsLoaded] = useState(false)
  const [isInView, setIsInView] = useState(false)

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

const handleCanPlay = () => {
      setIsLoaded(true)
    }

const handleError = () => {
      // Silently try alternative source
      if (video.src.includes("/videos/hero-video-v3.mp4")) {
        video.src =
          "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/hero-video-v3-E4dqT6iUgKB1QNwAX45SXQ5xHIZApB.mp4"
        video.load()
      }
    }

// Intersection Observer for hero video
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          setIsInView(entry.isIntersecting)
        })
      },
      {
        threshold: 0.3, // Hero video needs more visibility
        rootMargin: "0px",
      },
    )

video.addEventListener("canplay", handleCanPlay)
    video.addEventListener("error", handleError)
    observer.observe(container)

// If already loaded
    if (video.readyState >= 3) {
      handleCanPlay()
    }

return () => {
      video.removeEventListener("canplay", handleCanPlay)
      video.removeEventListener("error", handleError)
      observer.disconnect()
    }
  }, [])

// Handle play/pause based on intersection
  useEffect(() => {
    const video = videoRef.current
    if (!video || !isLoaded) return

if (isInView) {
      const playPromise = video.play()
      if (playPromise !== undefined) {
        playPromise.catch((error) => {
          console.log("Hero video autoplay failed:", error)
        })
      }
    } else {
      if (!video.paused) {
        video.pause()
      }
    }
  }, [isInView, isLoaded])

return (
    <div className="w-full max-w-[1200px] mx-auto">
      <div ref={containerRef} className="w-full bg-black rounded-[16px] overflow-hidden">
        <video
          ref={videoRef}
          src="/videos/hero-video-v3.mp4"
          className={`w-full h-auto rounded-[16px] transition-opacity duration-500 ${
            isLoaded ? "opacity-100" : "opacity-0"
          }`}
          loop
          muted
          playsInline
          controls={false}
          preload="auto"
        />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/icons/linkedin.tsx" isMerged="true"
import type React from "react"
export default function LinkedIn(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.226.792 24 1.771 24h20.454C23.2 24 24 23.226 24 22.271V1.729C24 .774 23.2 0 22.225 0zM7.059 20.452H3.771V9h3.288v11.452zM5.415 7.433a2.062 2.062 0 1 1 0-4.123 2.062 2.062 0 0 1 0 4.123zM20.447 20.452h-3.554V14.8c0-1.345-.027-3.077-1.877-3.077-1.879 0-2.166 1.464-2.166 2.976v5.753H9.296V9h3.414v1.561h.049c.476-.9 1.637-1.848 3.368-1.848 3.604 0 4.27 2.372 4.27 5.459v6.28z" />
    </svg>
  )
}
[V0_FILE]typescriptreact:file="components/install-modal.tsx" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { X, Copy, Check, Download, Search, Terminal } from "lucide-react"

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

export default function InstallModal({ isOpen, onClose }: InstallModalProps) {
  const [activeTab, setActiveTab] = useState<string>("cursor")
  const [copied, setCopied] = useState<string | null>(null)
  const modalRef = useRef<HTMLDivElement>(null)

// Close modal with escape key or outside click
  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose()
    }

const handleOutsideClick = (e: MouseEvent) => {
      if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
        onClose()
      }
    }

if (isOpen) {
      window.addEventListener("keydown", handleEscape)
      document.addEventListener("mousedown", handleOutsideClick)
      // Prevent scrolling when modal is open
      document.body.style.overflow = "hidden"
    }

return () => {
      window.removeEventListener("keydown", handleEscape)
      document.removeEventListener("mousedown", handleOutsideClick)
      document.body.style.overflow = ""
    }
  }, [isOpen, onClose])

if (!isOpen) return null

const copyToClipboard = (text: string, id: string) => {
    navigator.clipboard.writeText(text)
    setCopied(id)
    setTimeout(() => setCopied(null), 2000)
  }

const installOptions = [
    {
      id: "cursor",
      name: "Cursor",
      command: "ext install iganbold.yoyo-ai-versioning",
      deeplink: "cursor:extension/iganbold.yoyo-ai-versioning",
    },
    {
      id: "windsurf",
      name: "Windsurf",
      command: "ext install iganbold.yoyo-ai-versioning",
      deeplink: "windsurf:extension/iganbold.yoyo-ai-versioning",
    },
    {
      id: "vscode",
      name: "VS Code",
      command: "ext install iganbold.yoyo-ai-versioning",
      deeplink: "vscode:extension/iganbold.yoyo-ai-versioning",
    },
    {
      id: "claude-code",
      name: "Claude Code",
      command: "ext install iganbold.yoyo-ai-versioning",
      deeplink: "",
      isTerminalBased: true,
    },
    {
      id: "codex-cli",
      name: "Codex CLI",
      command: "ext install iganbold.yoyo-ai-versioning",
      deeplink: "",
      isTerminalBased: true,
    },
    {
      id: "other",
      name: "Other",
      command: "ext install iganbold.yoyo-ai-versioning",
      deeplink: "",
    },
  ]

const activeOption = installOptions.find((option) => option.id === activeTab) || installOptions[0]

return (
    <div className="fixed inset-0 z-50 flex items-start md:items-center justify-center p-4 bg-black/80 backdrop-blur-sm overflow-y-auto">
      <div
        ref={modalRef}
        className="relative w-full max-w-2xl bg-black border border-white/10 rounded-[16px] shadow-2xl my-4 md:my-0"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Sticky header with close button */}
        <div className="sticky top-0 z-10 flex items-center justify-between p-4 md:p-6 bg-black rounded-t-[16px] border-b border-white/10">
          <h2
            className="text-xl md:text-2xl font-semibold text-white"
            style={{
              fontFamily: 'var(--font-geist-sans, "GeistSans", sans-serif)',
              letterSpacing: "-0.04em",
              lineHeight: "1.1",
            }}
          >
            Install YOYO
          </h2>
          <button
            onClick={onClose}
            className="p-2 text-white/70 hover:text-white rounded-full hover:bg-white/10 transition-colors"
            aria-label="Close"
          >
            <X size={20} />
          </button>
        </div>

<div className="p-4 md:p-6">
          {/* Tabs - scrollable on mobile */}
          <div className="flex overflow-x-auto pb-2 mb-4 border-b border-white/10 hide-scrollbar">
            <div className="flex gap-2 min-w-max">
              {installOptions.map((option) => (
                <button
                  key={option.id}
                  onClick={() => setActiveTab(option.id)}
                  className={`px-4 py-2 rounded-lg font-mono text-sm transition-colors whitespace-nowrap ${
                    activeTab === option.id ? "bg-white text-black" : "bg-transparent text-white/80 hover:bg-white/10"
                  }`}
                >
                  {option.name}
                </button>
              ))}
            </div>
          </div>

{/* Content */}
          <div className="space-y-6">
            {/* Claude Code Special Section */}
            {activeTab === "claude-code" && (
              <div className="space-y-4">
                <div className="bg-white/5 border border-white/10 rounded-lg p-4">
                  <h3 className="text-white font-semibold mb-2 flex items-center gap-2">
                    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M12 2L2 7L12 12L22 7L12 2Z" />
                      <path d="M2 17L12 22L22 17" stroke="currentColor" strokeWidth="1" fill="none" />
                      <path d="M2 12L12 17L22 12" stroke="currentColor" strokeWidth="1" fill="none" />
                    </svg>
                    Claude Code + YOYO Setup
                  </h3>
                  <p className="text-white/80 text-sm mb-3">
                    Run Claude Code in your terminal inside editors like Cursor, Windsurf, or VS Code. Pair it with YOYO
                    in the sidebar for the ideal vibe coding workflow.
                  </p>

{/* Demo Video */}
                  <div className="bg-black rounded-lg overflow-hidden mb-4">
                    <video className="w-full h-auto" controls preload="metadata" style={{ maxHeight: "300px" }}>
                      <source
                        src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/cllaude%20code%20YOYO%20setup-cepgrSbpCLJNjzr2AR2oSoPaWH73CH.mp4"
                        type="video/mp4"
                      />
                      Your browser does not support the video tag.
                    </video>
                  </div>

<div className="space-y-3">
                    <div className="text-white/70 text-sm">
                      <strong>Step 1:</strong> Install YOYO extension in your editor (Cursor, Windsurf, or VS Code)
                    </div>
                    <div className="text-white/70 text-sm">
                      <strong>Step 2:</strong> Run Claude Code from the built-in terminal inside your editor
                    </div>
                    <div className="text-white/70 text-sm">
                      <strong>Step 3:</strong> Use YOYO sidebar to save/restore versions instantly
                    </div>
                  </div>
                </div>
              </div>
            )}

{/* Codex CLI Special Section */}
            {activeTab === "codex-cli" && (
              <div className="space-y-4">
                <div className="bg-white/5 border border-white/10 rounded-lg p-4">
                  <h3 className="text-white font-semibold mb-2 flex items-center gap-2">
                    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M12 2L2 7L12 12L22 7L12 2Z" />
                      <path d="M2 17L12 22L22 17" stroke="currentColor" strokeWidth="1" fill="none" />
                      <path d="M2 12L12 17L22 12" stroke="currentColor" strokeWidth="1" fill="none" />
                    </svg>
                    Codex CLI + YOYO Setup
                  </h3>
                  <p className="text-white/80 text-sm mb-3">
                    Run OpenAI Codex CLI in your terminal inside editors like Cursor, Windsurf, or VS Code. Pair it with
                    YOYO in the sidebar for seamless AI-assisted development with version control.
                  </p>

{/* Demo Video */}
                  <div className="bg-black rounded-lg overflow-hidden mb-4">
                    <video className="w-full h-auto" controls preload="metadata" style={{ maxHeight: "300px" }}>
                      <source
                        src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/codex-yoyo-kqbKQsIS0uDFYJHrGUhQxEb15MDfHX.mp4"
                        type="video/mp4"
                      />
                      Your browser does not support the video tag.
                    </video>
                  </div>

<div className="space-y-3">
                    <div className="text-white/70 text-sm">
                      <strong>Step 1:</strong> Install YOYO extension in your editor (Cursor, Windsurf, or VS Code)
                    </div>
                    <div className="text-white/70 text-sm">
                      <strong>Step 2:</strong> Run OpenAI Codex CLI from the built-in terminal inside your editor
                    </div>
                    <div className="text-white/70 text-sm">
                      <strong>Step 3:</strong> Use YOYO sidebar to save/restore versions instantly
                    </div>
                  </div>
                </div>
              </div>
            )}

{/* Regular install sections for other options */}
            {activeTab !== "claude-code" && activeTab !== "codex-cli" && (
              <>
                {/* Direct Install Button - only show for options with deeplinks */}
                {activeOption.deeplink && (
                  <div className="space-y-2">
                    <a
                      href={activeOption.deeplink}
                      className="block w-full bg-white hover:bg-gray-100 text-black font-mono text-sm font-semibold tracking-wider py-3 px-4 rounded-lg text-center transition-colors"
                      style={{
                        fontFamily:
                          'GeistMono, ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace',
                        letterSpacing: "0.56px",
                        height: "48px",
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                      }}
                    >
                      <Download className="mr-2 h-4 w-4 stroke-[2.5px]" />
                      INSTALL IN {activeOption.name.toUpperCase()}
                    </a>
                    <p className="text-white/50 text-xs text-center">
                      Click the button above to open {activeOption.name} and install YOYO directly
                    </p>
                  </div>
                )}

{/* Search in Extensions Option */}
                <div className="space-y-2">
                  <div className="flex items-center gap-2 text-white/70 font-mono text-sm">
                    <Search size={16} />
                    {activeTab === "other" ? "Search in Extensions:" : `Search in ${activeOption.name} Extensions:`}
                  </div>
                  <div className="bg-white/5 border border-white/10 rounded-lg p-3 font-mono text-sm text-white">
                    {activeTab === "other" ? (
                      <>
                        1. Open your IDE
                        <br />
                        2. Go to Extensions view (usually Ctrl+Shift+X / Cmd+Shift+X)
                        <br />
                        3. Search for <span className="bg-white/10 px-2 py-0.5 rounded">YOYO</span>
                        <br />
                        4. Click Install
                      </>
                    ) : (
                      <>
                        1. Open {activeOption.name}
                        <br />
                        2. Go to Extensions view (Ctrl+Shift+X / Cmd+Shift+X)
                        <br />
                        3. Search for <span className="bg-white/10 px-2 py-0.5 rounded">YOYO</span>
                        <br />
                        4. Click Install
                      </>
                    )}
                  </div>
                </div>

{/* Command Palette Option */}
                {activeOption.command && (
                  <div className="space-y-2">
                    <div className="flex items-center gap-2 text-white/70 font-mono text-sm">
                      <Terminal size={16} />
                      {activeTab === "other"
                        ? "Run in command palette:"
                        : `Run in ${activeOption.name} command palette:`}
                    </div>
                    <div className="relative">
                      <div className="bg-white/5 border border-white/10 rounded-lg p-3 font-mono text-sm text-white overflow-x-auto">
                        {activeOption.command}
                      </div>
                      <button
                        onClick={() => copyToClipboard(activeOption.command, `${activeOption.id}-command`)}
                        className="absolute right-2 top-2 p-1.5 rounded-md bg-white/10 hover:bg-white/20 transition-colors"
                        aria-label="Copy command"
                      >
                        {copied === `${activeOption.id}-command` ? <Check size={16} /> : <Copy size={16} />}
                      </button>
                    </div>
                    {activeTab === "other" && (
                      <p className="text-white/50 text-xs">
                        Open the command palette with Ctrl+Shift+P / Cmd+Shift+P, then paste and run the command above
                      </p>
                    )}
                  </div>
                )}

{activeTab === "other" && (
                  <div className="bg-white/5 border border-white/10 rounded-lg p-4 mt-4">
                    <p className="text-white/70 text-sm mb-2">
                      YOYO works with most VS Code-compatible editors and IDEs, including:
                    </p>
                    <ul className="text-white/60 text-sm list-disc pl-5 space-y-1">
                      <li>VS Codium</li>
                      <li>GitPod</li>
                      <li>Code-OSS</li>
                      <li>GitHub Codespaces</li>
                      <li>And other VS Code forks</li>
                    </ul>
                  </div>
                )}
              </>
            )}

<div className="pt-4 mt-6 border-t border-white/10">
              <p className="text-white/50 text-sm">
                {activeTab === "claude-code"
                  ? "After installing YOYO in your editor, you can use Claude Code in the terminal while YOYO handles version control in the sidebar."
                  : activeTab === "codex-cli"
                    ? "After installing YOYO in your editor, you can use OpenAI Codex CLI in the terminal while YOYO handles version control in the sidebar."
                    : "After installation, open your project and click the YOYO icon in the sidebar to start versioning your AI-assisted code."}
              </p>
            </div>
          </div>
        </div>

{/* Mobile close button at bottom */}
        <div className="md:hidden p-4 border-t border-white/10">
          <button
            onClick={onClose}
            className="w-full py-3 px-4 bg-white/10 hover:bg-white/20 text-white rounded-lg font-mono text-sm transition-colors"
          >
            Close
          </button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/jobs/jobs-feed.tsx" isMerged="true"
"use client"

import { useEffect, useMemo, useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { type Job, getJobs, matchJobsBySkills } from "./local-jobs"
import { Clock, DollarSign, MapPin } from "lucide-react"

export default function JobsFeed() {
  const [jobs, setJobs] = useState<Job[]>([])
  const [skillFilter, setSkillFilter] = useState("")
  const skills = useMemo(
    () =>
      skillFilter
        .split(",")
        .map((s) => s.trim())
        .filter(Boolean),
    [skillFilter],
  )

useEffect(() => {
    // initial load
    setJobs(getJobs())
    // listen to storage updates from other tabs
    const onStorage = (e: StorageEvent) => {
      if (e.key === "shiftza_jobs_v1") setJobs(getJobs())
    }
    window.addEventListener("storage", onStorage)
    return () => window.removeEventListener("storage", onStorage)
  }, [])

const visible = skills.length ? matchJobsBySkills(jobs, skills) : jobs

return (
    <div className="space-y-4">
      <div className="flex flex-col md:flex-row items-stretch md:items-center gap-3">
        <Input
          value={skillFilter}
          onChange={(e) => setSkillFilter(e.target.value)}
          placeholder="Filter by skills, comma-separated (e.g., React, Figma)"
          className="bg-white/5 border-white/10 text-white"
        />
        <div className="text-white/60 text-sm">Showing {visible.length} job(s)</div>
      </div>

{visible.length === 0 && (
        <p className="text-white/70 text-sm">No jobs yet. Post your first project in Hire Talent.</p>
      )}

{visible.map((job) => (
        <Card key={job.id} className="bg-white/5 border-white/10 text-white">
          <CardContent className="p-4">
            <div className="flex items-start justify-between gap-3">
              <div>
                <h3 className="text-lg font-semibold">{job.title}</h3>
                <p className="text-white/70 text-sm mt-1">{job.description}</p>
                <div className="flex flex-wrap gap-2 mt-3">
                  {job.skills.map((s) => (
                    <Badge key={s} className="bg-white/10 border-white/20">
                      {s}
                    </Badge>
                  ))}
                </div>
                <div className="flex flex-wrap items-center gap-4 text-white/70 text-sm mt-3">
                  <span className="inline-flex items-center gap-1">
                    <DollarSign className="h-4 w-4" />
                    {job.budgetType === "hourly" ? "Hourly" : "Fixed"}
                    {(job.budgetMin || job.budgetMax) && (
                      <span className="ml-1">
                        {job.budgetMin ? `$${job.budgetMin}` : ""}
                        {job.budgetMin && job.budgetMax ? "–" : ""}
                        {job.budgetMax ? `$${job.budgetMax}` : ""}
                      </span>
                    )}
                  </span>
                  <span className="inline-flex items-center gap-1">
                    <MapPin className="h-4 w-4" /> {job.locationType}
                  </span>
                  {job.duration && (
                    <span className="inline-flex items-center gap-1">
                      <Clock className="h-4 w-4" /> {job.duration}
                    </span>
                  )}
                </div>
              </div>
              <Button className="bg-white text-black hover:bg-gray-100">Apply</Button>
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  )
}
[V0_FILE]typescript:file="components/jobs/local-jobs.ts" isMerged="true"
export type Job = {
  id: string
  title: string
  description: string
  skills: string[]
  budgetType: "hourly" | "fixed"
  budgetMin?: number
  budgetMax?: number
  locationType: "remote" | "hybrid" | "onsite"
  duration?: string
  createdAt: string
}

const STORAGE_KEY = "shiftza_jobs_v1"
const DRAFT_KEY = "shiftza_job_draft_v1"

function safeParse<T>(raw: string | null, fallback: T): T {
  try {
    return raw ? (JSON.parse(raw) as T) : fallback
  } catch {
    return fallback
  }
}

export function getJobs(): Job[] {
  if (typeof window === "undefined") return []
  return safeParse<Job[]>(localStorage.getItem(STORAGE_KEY), [])
}

export function saveJob(job: Job) {
  if (typeof window === "undefined") return
  const jobs = getJobs()
  localStorage.setItem(STORAGE_KEY, JSON.stringify([job, ...jobs]))
}

export function saveJobDraft(draft: Partial<Job>) {
  if (typeof window === "undefined") return
  localStorage.setItem(DRAFT_KEY, JSON.stringify(draft))
}

export function loadJobDraft(): Partial<Job> | null {
  if (typeof window === "undefined") return null
  return safeParse<Partial<Job> | null>(localStorage.getItem(DRAFT_KEY), null)
}

export function clearJobDraft() {
  if (typeof window === "undefined") return
  localStorage.removeItem(DRAFT_KEY)
}

export function matchJobsBySkills(jobs: Job[], skills: string[]): Job[] {
  if (!skills.length) return jobs
  const skillSet = new Set(skills.map((s) => s.toLowerCase().trim()))
  return jobs
    .map((j) => {
      const overlap = j.skills.filter((s) => skillSet.has(s.toLowerCase().trim()))
      return { job: j, score: overlap.length }
    })
    .filter((x) => x.score > 0)
    .sort((a, b) => b.score - a.score)
    .map((x) => x.job)
}
[V0_FILE]typescriptreact:file="components/jobs/post-job-form.tsx" isMerged="true"
"use client"

import { useEffect, useMemo, useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { useToast } from "@/components/ui/use-toast"
import { type Job, loadJobDraft, saveJob, saveJobDraft, clearJobDraft } from "./local-jobs"
import { Plus, X } from "lucide-react"

export default function PostJobForm() {
  const { toast } = useToast()
  const [title, setTitle] = useState("")
  const [description, setDescription] = useState("")
  const [skillInput, setSkillInput] = useState("")
  const [skills, setSkills] = useState<string[]>([])
  const [budgetType, setBudgetType] = useState<"hourly" | "fixed">("hourly")
  const [budgetMin, setBudgetMin] = useState<number | undefined>(undefined)
  const [budgetMax, setBudgetMax] = useState<number | undefined>(undefined)
  const [locationType, setLocationType] = useState<"remote" | "hybrid" | "onsite">("remote")
  const [duration, setDuration] = useState<string>("")

// load draft
  useEffect(() => {
    const d = loadJobDraft()
    if (!d) return
    setTitle(d.title ?? "")
    setDescription(d.description ?? "")
    setSkills(d.skills ?? [])
    setBudgetType((d.budgetType as any) ?? "hourly")
    setBudgetMin(d.budgetMin)
    setBudgetMax(d.budgetMax)
    setLocationType((d.locationType as any) ?? "remote")
    setDuration(d.duration ?? "")
  }, [])

// auto-save draft
  useEffect(() => {
    const draft = { title, description, skills, budgetType, budgetMin, budgetMax, locationType, duration }
    const id = window.setTimeout(() => saveJobDraft(draft), 500)
    return () => window.clearTimeout(id)
  }, [title, description, skills, budgetType, budgetMin, budgetMax, locationType, duration])

const valid = useMemo(() => {
    return title.trim().length >= 4 && description.trim().length >= 20 && skills.length > 0
  }, [title, description, skills])

function addSkill() {
    const s = skillInput.trim()
    if (!s) return
    if (!skills.includes(s)) setSkills((prev) => [...prev, s])
    setSkillInput("")
  }

function removeSkill(s: string) {
    setSkills((prev) => prev.filter((x) => x !== s))
  }

function publish() {
    if (!valid) {
      toast({ title: "Missing details", description: "Please add a clear title, description, and at least one skill." })
      return
    }
    const job: Job = {
      id: crypto.randomUUID(),
      title: title.trim(),
      description: description.trim(),
      skills,
      budgetType,
      budgetMin,
      budgetMax,
      locationType,
      duration,
      createdAt: new Date().toISOString(),
    }
    saveJob(job)
    clearJobDraft()
    toast({ title: "Job posted", description: "Your job is now visible in Browse Jobs on this device." })
    // clear form
    setTitle("")
    setDescription("")
    setSkills([])
    setBudgetType("hourly")
    setBudgetMin(undefined)
    setBudgetMax(undefined)
    setLocationType("remote")
    setDuration("")
  }

return (
    <Card className="bg-white/5 border-white/10 text-white">
      <CardHeader>
        <CardTitle className="text-white">Post a Project</CardTitle>
      </CardHeader>
      <CardContent className="space-y-6">
        <div className="grid md:grid-cols-2 gap-4">
          <div>
            <label className="block text-sm text-white/70 mb-2">Title</label>
            <Input
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              placeholder="Build a landing page in Next.js"
              className="bg-white/5 border-white/10 text-white"
            />
          </div>
          <div>
            <label className="block text-sm text-white/70 mb-2">Duration</label>
            <Input
              value={duration}
              onChange={(e) => setDuration(e.target.value)}
              placeholder="2-4 weeks"
              className="bg-white/5 border-white/10 text-white"
            />
          </div>
        </div>

<div>
          <label className="block text-sm text-white/70 mb-2">Description</label>
          <Textarea
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            placeholder="Describe the scope, goals, and deliverables..."
            className="bg-white/5 border-white/10 text-white min-h-[120px]"
          />
        </div>

<div>
          <label className="block text-sm text-white/70 mb-2">Required Skills</label>
          <div className="flex gap-2">
            <Input
              value={skillInput}
              onChange={(e) => setSkillInput(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && (e.preventDefault(), addSkill())}
              placeholder="e.g., React, Figma, Python"
              className="bg-white/5 border-white/10 text-white"
            />
            <Button type="button" onClick={addSkill} className="bg-white text-black hover:bg-gray-100">
              <Plus className="h-4 w-4 mr-1" /> Add
            </Button>
          </div>
          {skills.length > 0 && (
            <div className="flex flex-wrap gap-2 mt-3">
              {skills.map((s) => (
                <Badge key={s} className="bg-white/10 border-white/20">
                  {s}
                  <button
                    className="ml-2 opacity-70 hover:opacity-100"
                    onClick={() => removeSkill(s)}
                    aria-label={`Remove ${s}`}
                  >
                    <X className="h-3 w-3" />
                  </button>
                </Badge>
              ))}
            </div>
          )}
        </div>

<div className="grid md:grid-cols-3 gap-4">
          <div>
            <label className="block text-sm text-white/70 mb-2">Budget Type</label>
            <select
              value={budgetType}
              onChange={(e) => setBudgetType(e.target.value as any)}
              className="w-full bg-white/5 border border-white/10 text-white rounded-md px-3 py-2"
            >
              <option value="hourly">Hourly</option>
              <option value="fixed">Fixed</option>
            </select>
          </div>
          <div>
            <label className="block text-sm text-white/70 mb-2">Min</label>
            <Input
              type="number"
              value={budgetMin ?? ""}
              onChange={(e) => setBudgetMin(e.target.value ? Number(e.target.value) : undefined)}
              placeholder="25"
              className="bg-white/5 border-white/10 text-white"
            />
          </div>
          <div>
            <label className="block text-sm text-white/70 mb-2">Max</label>
            <Input
              type="number"
              value={budgetMax ?? ""}
              onChange={(e) => setBudgetMax(e.target.value ? Number(e.target.value) : undefined)}
              placeholder="60"
              className="bg-white/5 border-white/10 text-white"
            />
          </div>
        </div>

<div>
          <label className="block text-sm text-white/70 mb-2">Location</label>
          <select
            value={locationType}
            onChange={(e) => setLocationType(e.target.value as any)}
            className="w-full bg-white/5 border border-white/10 text-white rounded-md px-3 py-2"
          >
            <option value="remote">Remote</option>
            <option value="hybrid">Hybrid</option>
            <option value="onsite">On-site</option>
          </select>
        </div>

<div className="flex items-center justify-between gap-3 pt-2">
          <Button
            type="button"
            variant="outline"
            onClick={() => {
              saveJobDraft({ title, description, skills, budgetType, budgetMin, budgetMax, locationType, duration })
              toast({ title: "Draft saved", description: "Your draft is saved on this device." })
            }}
            className="border-white/20 text-white hover:bg-white/10"
          >
            Save Draft
          </Button>
          <Button
            type="button"
            onClick={publish}
            className="bg-gradient-to-r from-cyan-500 to-purple-500 hover:from-cyan-600 hover:to-purple-600"
          >
            Publish Job
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/join/background-shell.tsx" isMerged="true"
"use client"
import type React from "react"
import { HeroFrame } from "@/components/hero-frame"

export default function BackgroundShell({ children }: { children?: React.ReactNode }) {
  return (
    <section className="relative min-h-screen bg-background text-white overflow-hidden">
      {/* Gradient Background (matches home) */}
      <div className="absolute inset-0 w-full h-full">
        <div
          className="absolute inset-0 w-full h-full"
          style={{ background: "linear-gradient(135deg, #22D3EE 0%, #FF5C28 50%, #FF5C9D 100%)" }}
        />
        <div className="absolute inset-0 w-full h-full" style={{ backgroundColor: "rgba(0, 0, 0, 0.35)" }} />
      </div>

{/* Persistent background content */}
      <div className="relative z-0 max-w-[1920px] mx-auto px-6 md:px-8 pt-8 md:pt-14">
        <div className="hidden md:flex items-stretch gap-6">
          <div className="flex-1" />
          <div className="md:flex-1 p-0 relative">
            <HeroFrame className="h-full" />
          </div>
        </div>
      </div>

{/* Overlay content */}
      <div className="relative z-10">{children}</div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/join/employer-wizard-visual.tsx" isMerged="true"
"use client"

import { useMemo, useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"

type Step = 1 | 2 | 3 | 4 | 5

export default function EmployerWizardVisual() {
  const [step, setStep] = useState<Step>(1)

// Minimal form state (visual-only)
  const [companyName, setCompanyName] = useState("")
  const [emailOrPhone, setEmailOrPhone] = useState("")
  const [password, setPassword] = useState("")
  const [agree, setAgree] = useState(false)

const [industry, setIndustry] = useState("")
  const [companySize, setCompanySize] = useState("")
  const [location, setLocation] = useState("")
  const [website, setWebsite] = useState("")
  const [mission, setMission] = useState("")

const [roles, setRoles] = useState("")
  const [engagement, setEngagement] = useState("")
  const [duration, setDuration] = useState("")
  const [startDate, setStartDate] = useState("")

const safeName = useMemo(() => companyName?.trim() || "there", [companyName])

return (
    <main className="relative min-h-[85dvh] w-full px-4 py-8 md:py-12 flex items-start md:items-center justify-center md:pb-28 bg-transparent">
      {/* Background image and overlay to match worker theme */}
      <div className="pointer-events-none fixed inset-0 -z-10">
        <img src="/images/worker-flow-bg.png" alt="Background" className="h-full w-full object-cover opacity-25" />
        <div className="absolute inset-0 bg-black/40" />
      </div>

<section className="w-full max-w-5xl rounded-2xl border border-border/60 bg-background/80 backdrop-blur p-5 sm:p-6 md:p-8">
        {step === 1 && (
          <StepOne
            companyName={companyName}
            setCompanyName={setCompanyName}
            emailOrPhone={emailOrPhone}
            setEmailOrPhone={setEmailOrPhone}
            password={password}
            setPassword={setPassword}
            agree={agree}
            setAgree={setAgree}
            onNext={() => setStep(2)}
          />
        )}

{step === 2 && (
          <StepTwo
            industry={industry}
            setIndustry={setIndustry}
            companySize={companySize}
            setCompanySize={setCompanySize}
            location={location}
            setLocation={setLocation}
            website={website}
            setWebsite={setWebsite}
            mission={mission}
            setMission={setMission}
            onPrev={() => setStep(1)}
            onNext={() => setStep(3)}
          />
        )}

{step === 3 && (
          <StepThree
            roles={roles}
            setRoles={setRoles}
            engagement={engagement}
            setEngagement={setEngagement}
            duration={duration}
            setDuration={setDuration}
            startDate={startDate}
            setStartDate={setStartDate}
            onPrev={() => setStep(2)}
            onNext={() => setStep(4)}
          />
        )}

{step === 4 && <StepFour onPrev={() => setStep(3)} onNext={() => setStep(5)} />}

{step === 5 && <StepFive name={safeName} onRestart={() => setStep(1)} />}
      </section>
    </main>
  )
}

/* PAGE 1 — Create Your Company Account */
function StepOne({
  companyName,
  setCompanyName,
  emailOrPhone,
  setEmailOrPhone,
  password,
  setPassword,
  agree,
  setAgree,
  onNext,
}: {
  companyName: string
  setCompanyName: (v: string) => void
  emailOrPhone: string
  setEmailOrPhone: (v: string) => void
  password: string
  setPassword: (v: string) => void
  agree: boolean
  setAgree: (v: boolean) => void
  onNext: () => void
}) {
  return (
    <div className="space-y-4">
      <header className="space-y-2">
        <h1 className="text-xl md:text-2xl font-semibold tracking-tight text-balance">Hire by Skill, Not by Paper.</h1>
        <p className="text-sm text-muted-foreground leading-relaxed">
          You’ve seen it — impressive resumes, big degrees, but when it comes to real work, something’s missing. The
          truth is: the best talent doesn’t always come with a certificate. It comes with skill, dedication, and proof
          of work. That’s why this platform exists — to help businesses like yours connect directly with verified,
          capable professionals who can actually deliver.
        </p>
        <p className="text-sm text-muted-foreground">
          Let’s begin by setting up your company account and joining the skills-first movement.
        </p>
      </header>

<form
        className="grid grid-cols-1 md:grid-cols-2 gap-4"
        onSubmit={(e) => {
          e.preventDefault()
          onNext()
        }}
      >
        <div className="space-y-1">
          <Label htmlFor="companyName">Company Name</Label>
          <Input
            id="companyName"
            placeholder="Acme Industries"
            value={companyName}
            onChange={(e) => setCompanyName(e.target.value)}
          />
        </div>

<div className="space-y-1">
          <Label htmlFor="emailOrPhone">Work Email or Phone</Label>
          <Input
            id="emailOrPhone"
            placeholder="you@company.com / +1 555 555 5555"
            value={emailOrPhone}
            onChange={(e) => setEmailOrPhone(e.target.value)}
          />
        </div>

<div className="space-y-1">
          <Label htmlFor="password">Create Password</Label>
          <Input
            id="password"
            type="password"
            placeholder="••••••••"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>

<div className="flex flex-col justify-end gap-2">
          <Button type="button" variant="secondary" className="w-full">
            Sign in with Google
          </Button>
        </div>

<div className="col-span-1 md:col-span-2 flex items-center gap-2">
          <Checkbox id="agree" checked={agree} onCheckedChange={(v) => setAgree(Boolean(v))} />
          <Label htmlFor="agree" className="text-sm text-muted-foreground">
            I agree to the Terms & Privacy Policy
          </Label>
        </div>

<div className="col-span-1 md:col-span-2 flex items-center gap-3">
          <Button type="submit" className="shrink-0">
            👉 Create My Employer Account
          </Button>
          <p className="text-xs text-muted-foreground">
            Already have an account? <span className="underline underline-offset-2">Log in</span>
          </p>
        </div>
      </form>
    </div>
  )
}

/* PAGE 2 — Tell Us About Your Company */
function StepTwo({
  industry,
  setIndustry,
  companySize,
  setCompanySize,
  location,
  setLocation,
  website,
  setWebsite,
  mission,
  setMission,
  onPrev,
  onNext,
}: {
  industry: string
  setIndustry: (v: string) => void
  companySize: string
  setCompanySize: (v: string) => void
  location: string
  setLocation: (v: string) => void
  website: string
  setWebsite: (v: string) => void
  mission: string
  setMission: (v: string) => void
  onPrev: () => void
  onNext: () => void
}) {
  return (
    <div className="space-y-4">
      <header className="space-y-2">
        <h2 className="text-xl md:text-2xl font-semibold text-balance">
          Behind Every Great Hire Is a Vision. Tell Us Yours.
        </h2>
        <p className="text-sm text-muted-foreground leading-relaxed">
          We believe hiring isn’t just about filling positions — it’s about building something meaningful. Whether
          you’re a growing startup, a local business, or a global enterprise, your mission matters. The more we
          understand your goals, the better we can connect you to the right talent — people who share your values and
          deliver real results.
        </p>
        <p className="text-xs text-muted-foreground">
          “Your story helps us match you with skilled professionals who align with your goals.”
        </p>
      </header>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div className="space-y-1">
          <Label>Company Industry</Label>
          <Select value={industry} onValueChange={setIndustry}>
            <SelectTrigger>
              <SelectValue placeholder="Select industry" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="construction">Construction</SelectItem>
              <SelectItem value="design">Design</SelectItem>
              <SelectItem value="manufacturing">Manufacturing</SelectItem>
              <SelectItem value="technology">Technology</SelectItem>
              <SelectItem value="other">Other</SelectItem>
            </SelectContent>
          </Select>
        </div>

<div className="space-y-1">
          <Label>Company Size</Label>
          <Select value={companySize} onValueChange={setCompanySize}>
            <SelectTrigger>
              <SelectValue placeholder="Select size" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="1-10">1–10</SelectItem>
              <SelectItem value="10-50">10–50</SelectItem>
              <SelectItem value="50-200">50–200</SelectItem>
              <SelectItem value="200-1000">200–1000</SelectItem>
              <SelectItem value="1000+">1000+</SelectItem>
            </SelectContent>
          </Select>
        </div>

<div className="space-y-1">
          <Label>Office Location</Label>
          <Input placeholder="City, Country" value={location} onChange={(e) => setLocation(e.target.value)} />
        </div>

<div className="space-y-1">
          <Label>Company Website (optional)</Label>
          <Input placeholder="https://example.com" value={website} onChange={(e) => setWebsite(e.target.value)} />
        </div>

<div className="space-y-1 md:col-span-2">
          <Label>Short Description / Mission Statement</Label>
          <Textarea
            rows={3}
            placeholder="Who you are, what you stand for, and what you're building."
            value={mission}
            onChange={(e) => setMission(e.target.value)}
          />
        </div>
      </div>

<div className="flex justify-between gap-3">
        <Button variant="secondary" onClick={onPrev}>
          Back
        </Button>
        <Button onClick={onNext}>➡️ Continue</Button>
      </div>
    </div>
  )
}

/* PAGE 3 — Define What You’re Looking For */
function StepThree({
  roles,
  setRoles,
  engagement,
  setEngagement,
  duration,
  setDuration,
  startDate,
  setStartDate,
  onPrev,
  onNext,
}: {
  roles: string
  setRoles: (v: string) => void
  engagement: string
  setEngagement: (v: string) => void
  duration: string
  setDuration: (v: string) => void
  startDate: string
  setStartDate: (v: string) => void
  onPrev: () => void
  onNext: () => void
}) {
  return (
    <div className="space-y-4">
      <header className="space-y-2">
        <h2 className="text-xl md:text-2xl font-semibold text-balance">Tell Us What Kind of Talent You Need.</h2>
        <p className="text-sm text-muted-foreground leading-relaxed">
          Great companies are built by great people. But finding them shouldn’t be guesswork or luck — it should be
          based on skill, passion, and proof. Let’s make sure you reach the right professionals who can take your
          business forward.
        </p>
        <p className="text-xs text-muted-foreground">
          “We’ll use this info to recommend skilled workers who match your exact needs.”
        </p>
      </header>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div className="space-y-1 md:col-span-2">
          <Label>Roles / Skills You’re Looking For</Label>
          <Input
            placeholder="Electrician, Designer, Welder, Developer, etc. (comma separated)"
            value={roles}
            onChange={(e) => setRoles(e.target.value)}
          />
        </div>

<div className="space-y-1">
          <Label>Type of Engagement</Label>
          <Select value={engagement} onValueChange={setEngagement}>
            <SelectTrigger>
              <SelectValue placeholder="Select type" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="full-time">Full-time</SelectItem>
              <SelectItem value="part-time">Part-time</SelectItem>
              <SelectItem value="freelance">Freelance</SelectItem>
              <SelectItem value="project">Project-based</SelectItem>
            </SelectContent>
          </Select>
        </div>

<div className="space-y-1">
          <Label>Project Duration / Job Length</Label>
          <Select value={duration} onValueChange={setDuration}>
            <SelectTrigger>
              <SelectValue placeholder="Select duration" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="short">Less than 1 month</SelectItem>
              <SelectItem value="mid">1–3 months</SelectItem>
              <SelectItem value="long">3–6 months</SelectItem>
              <SelectItem value="ongoing">Ongoing</SelectItem>
            </SelectContent>
          </Select>
        </div>

<div className="space-y-1 md:col-span-2">
          <Label>Expected Start Date</Label>
          <Input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} />
        </div>
      </div>

/* PAGE 4 — Build Trust with Your Brand */
function StepFour({
  onPrev,
  onNext,
}: {
  onPrev: () => void
  onNext: () => void
}) {
  return (
    <div className="space-y-4">
      <header className="space-y-2">
        <h2 className="text-xl md:text-2xl font-semibold text-balance">
          Show Professionals Why They Should Work With You.
        </h2>
        <p className="text-sm text-muted-foreground leading-relaxed">
          Skilled workers take pride in their craft. They choose projects and employers who respect their time, pay
          fairly, and value ability. Let’s help you stand out as a trusted, transparent brand that skilled professionals
          want to collaborate with.
        </p>
        <p className="text-xs text-muted-foreground">
          “Trust goes both ways — verified employers attract verified talent.”
        </p>
      </header>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div className="space-y-1">
          <Label>Upload Company Logo or Photo</Label>
          <Input type="file" accept="image/*" />
        </div>

<div className="space-y-1">
          <Label>Optional: Upload Certifications or Partnerships</Label>
          <Input type="file" multiple />
        </div>

<div className="space-y-1 md:col-span-2">
          <Label>Add Company Description</Label>
          <Textarea rows={3} placeholder="Who you are, what you stand for, and why professionals should choose you." />
        </div>
      </div>

<div className="flex justify-between gap-3">
        <Button variant="secondary" onClick={onPrev}>
          Back
        </Button>
        <Button onClick={onNext}>✅ Continue</Button>
      </div>
    </div>
  )
}

/* PAGE 5 — Welcome */
function StepFive({
  name,
  onRestart,
}: {
  name: string
  onRestart: () => void
}) {
  return (
    <div className="space-y-4">
      <header className="space-y-2">
        <h2 className="text-xl md:text-2xl font-semibold text-balance">
          Welcome, {name}! You’re Part of the Future of Hiring.
        </h2>
        <p className="text-sm text-muted-foreground leading-relaxed">
          You’ve joined a global shift — one where companies look beyond degrees and discover real talent. Here, you
          won’t waste time sorting through empty resumes. You’ll meet professionals who’ve proven their worth through
          skill, craft, and results. The world of work is changing fast — and you’re among the pioneers building its
          next chapter.
        </p>
        <p className="text-sm text-muted-foreground">
          It’s time to connect with verified, project-ready professionals who can make a real impact.
        </p>
      </header>

<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
        <Button variant="secondary" className="w-full">
          🔍 Browse Skilled Workers
        </Button>
        <Button className="w-full">📢 Post a Job or Project</Button>
        <Button variant="outline" className="w-full bg-transparent">
          ⚙️ Complete My Employer Profile
        </Button>
      </div>

<div className="pt-2">
        <Button variant="ghost" onClick={onRestart} className="text-xs px-2 py-1">
          Start Over
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/join/overlay-shell.tsx" isMerged="true"
"use client"

import type React from "react"
import { useEffect, useRef } from "react"
import { useRouter } from "next/navigation"
import { X } from "lucide-react"

export default function OverlayShell({
  title,
  children,
  onCloseHref = "/",
}: {
  title?: string
  children: React.ReactNode
  onCloseHref?: string
}) {
  const router = useRouter()
  const headingRef = useRef<HTMLHeadingElement>(null)

useEffect(() => {
    headingRef.current?.focus()
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") router.push(onCloseHref)
    }
    document.addEventListener("keydown", onKey)
    return () => document.removeEventListener("keydown", onKey)
  }, [router, onCloseHref])

return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm px-4"
      role="dialog"
      aria-modal="true"
      aria-labelledby={title ? "overlay-title" : undefined}
      onClick={(e) => {
        if (e.target === e.currentTarget) router.push(onCloseHref)
      }}
    >
      <div className="relative w-full max-w-5xl rounded-xl border border-white/10 bg-background/95 text-foreground shadow-2xl">
        <button
          aria-label="Close"
          className="absolute right-3 top-3 inline-flex h-9 w-9 items-center justify-center rounded-md border border-foreground/10 hover:bg-foreground/5"
          onClick={() => router.push(onCloseHref)}
        >
          <X className="h-4 w-4" />
        </button>
        <div className="p-5 md:p-8">
          {title ? (
            <h1
              id="overlay-title"
              ref={headingRef}
              tabIndex={-1}
              className="text-2xl md:text-3xl font-semibold text-foreground mb-4 outline-none"
            >
              {title}
            </h1>
          ) : null}
          <div>{children}</div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/join/role-cards.tsx" isMerged="true"
"use client"

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

export default function RoleCards() {
  return (
    <section
      aria-labelledby="who-are-you"
      className="w-full max-w-5xl mx-auto rounded-2xl border border-border/60 bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/80 p-6 sm:p-8 md:p-10"
    >
      <header className="mb-8 md:mb-10">
        <h1 id="who-are-you" className="text-3xl md:text-4xl font-semibold tracking-tight text-foreground text-balance">
          {"Who are you?"}
        </h1>
        <p className="mt-2 text-muted-foreground leading-relaxed text-pretty">
          {
            "Choose how you’d like to get started. Shiftza values skill over status — the rest of your journey adapts to your choice."
          }
        </p>
      </header>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="rounded-xl border border-border/60 p-6 md:p-8 card-live focus-within:ring-2 focus-within:ring-accent/80 focus-within:ring-offset-2 focus-within:ring-offset-background hover:border-accent/60">
          <h2 className="text-xl md:text-2xl font-semibold text-foreground">{"I’m a Worker"}</h2>
          <p className="mt-3 text-muted-foreground leading-relaxed text-pretty">
            {"Showcase your real skills, build your credibility, and unlock better work opportunities."}
          </p>
          <div className="mt-6">
            <Button asChild variant="secondary" className="font-medium btn-sheen">
              <Link href="/join-talent/worker" aria-label="Continue as Worker">
                {"Continue as Worker"}
              </Link>
            </Button>
          </div>
        </div>

<div className="rounded-xl border border-border/60 p-6 md:p-8 card-live focus-within:ring-2 focus-within:ring-accent/80 focus-within:ring-offset-2 focus-within:ring-offset-background hover:border-accent/60">
          <h2 className="text-xl md:text-2xl font-semibold text-foreground">{"I’m Hiring"}</h2>
          <p className="mt-3 text-muted-foreground leading-relaxed text-pretty">
            {"Find verified, project-ready professionals — skilled, reliable, and focused."}
          </p>
          <div className="mt-6">
            <Button asChild variant="secondary" className="font-medium btn-sheen">
              <Link href="/join-talent/employer" aria-label="Continue as Employer">
                {"Continue as Employer"}
              </Link>
            </Button>
          </div>
        </div>
      </div>

<footer className="mt-8 flex flex-wrap items-center gap-x-6 gap-y-3 text-sm text-muted-foreground">
        <Link href="/" className="underline-offset-4 hover:underline focus-visible:underline">
          {"Back to Home"}
        </Link>
        <span aria-hidden="true" className="opacity-40">
          {"•"}
        </span>
        <Link href="/auth/login" className="underline-offset-4 hover:underline focus-visible:underline">
          {"Already have an account? Log in"}
        </Link>
      </footer>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/join/worker-wizard-visual.tsx" isMerged="true"
"use client"

import * as React from "react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { useToast } from "@/hooks/use-toast"
import { createBrowserClient } from "@supabase/ssr"

export function WorkerWizardVisual({
  className,
}: {
  className?: string
}) {
  const { toast } = useToast()
  const supabase = React.useMemo(
    () => createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!),
    [],
  )

const [step, setStep] = React.useState(1)
  const [loading, setLoading] = React.useState(false)
  const [name, setName] = React.useState("")
  const [emailOrPhone, setEmailOrPhone] = React.useState("")
  const [password, setPassword] = React.useState("")
  const [agree, setAgree] = React.useState(false)

const [mainSkill, setMainSkill] = React.useState<string | undefined>(undefined)
  const [tools, setTools] = React.useState("")
  const [years, setYears] = React.useState<string | undefined>(undefined)
  const [proofLink, setProofLink] = React.useState("") // New optional proof link state for MVP (single field)
  const [portfolioUrl, setPortfolioUrl] = React.useState("")
  const [linkedinUrl, setLinkedinUrl] = React.useState("")
  const [workDriveUrl, setWorkDriveUrl] = React.useState("")
  const [proofLinkStepTwo, setProofLinkStepTwo] = React.useState("") // Optional proof link state for MVP (single field)

const [workMode, setWorkMode] = React.useState<"full" | "part" | "freelance" | null>(null)
  const [availableFrom, setAvailableFrom] = React.useState<string | undefined>("immediately")
  const [preferredType, setPreferredType] = React.useState<string | undefined>("on-site")

const idInputRef = React.useRef<HTMLInputElement | null>(null)
  const [uploadedCount, setUploadedCount] = React.useState(0)

function slugify(s: string) {
    return s
      .toLowerCase()
      .trim()
      .replace(/[^a-z0-9]+/g, "-")
      .replace(/(^-|-$)/g, "")
  }

async function handleSignUpAndProfile() {
    try {
      setLoading(true)
      const isEmail = emailOrPhone.includes("@")
      if (!isEmail) {
        toast({
          title: "Use email for now",
          description: "Phone sign-up isn’t enabled yet. Please use an email.",
          variant: "destructive",
        })
        return
      }

const { data: signUpData, error: signUpError } = await supabase.auth.signUp({
        email: emailOrPhone,
        password,
        options: {
          emailRedirectTo: process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || window.location.origin,
        },
      })
      if (signUpError) {
        toast({ title: "Sign up failed", description: signUpError.message, variant: "destructive" })
        return
      }

const { data: userData } = await supabase.auth.getUser()
      const user = userData?.user
      if (!user) {
        toast({
          title: "Check your email",
          description: "We sent you a confirmation link. Open it, then return to continue.",
        })
        setStep(2)
        return
      }

const { error: profileErr } = await supabase.from("profiles").upsert(
        {
          id: user.id,
          display_name: name,
          role: "worker",
        },
        { onConflict: "id" },
      )
      if (profileErr) {
        toast({ title: "Profile save failed", description: profileErr.message, variant: "destructive" })
        return
      }

const { error: workerErr } = await supabase.from("worker_profiles").upsert(
        {
          user_id: user.id,
          headline: `Skilled professional`,
          availability: availableFrom || "immediately",
        },
        { onConflict: "user_id" },
      )
      if (workerErr) {
        toast({ title: "Worker profile failed", description: workerErr.message, variant: "destructive" })
        return
      }

// Record ToS/Privacy acceptance if table exists (ignore if not present)
      try {
        await supabase.from("terms_acceptances").insert({
          user_id: user.id,
          version: "v1",
          accepted_at: new Date().toISOString(),
        })
      } catch (_ignored) {}

toast({ title: "Account created", description: "Your profile is saved. Continue to add skills." })
      setStep(2)
    } catch (e: any) {
      toast({ title: "Error", description: e?.message || "Unexpected error", variant: "destructive" })
    } finally {
      setLoading(false)
    }
  }

async function handleSaveSkills() {
    try {
      setLoading(true)
      const { data: userData } = await supabase.auth.getUser()
      const user = userData?.user

if (!user) {
        // Save drafts locally so user doesn't lose input before confirming email
        try {
          if (mainSkill) localStorage.setItem("worker_mainSkill_draft", mainSkill)
          if (years) localStorage.setItem("worker_years_draft", years)
          if (tools?.trim()) localStorage.setItem("worker_tools_draft", tools.trim())
          if (proofLink?.trim()) localStorage.setItem("worker_proof_link", proofLink.trim())
        } catch (_ignored) {}
        toast({ title: "Saved for later", description: "Continue — we’ll save to your profile after sign-in." })
        setStep(3)
        return
      }

if (mainSkill) {
        const slug = slugify(mainSkill)
        const { data: existing, error: selErr } = await supabase
          .from("skills")
          .select("id, slug")
          .eq("slug", slug)
          .maybeSingle()
        if (selErr) throw selErr

let skillId = existing?.id as string | number | undefined
        if (!skillId) {
          const { data: inserted, error: insErr } = await supabase
            .from("skills")
            .insert({ slug, name: mainSkill })
            .select("id")
            .single()
          if (insErr) throw insErr
          skillId = inserted.id
        }

const levelMap: Record<string, number> = { "0-1": 1, "2-3": 2, "4-6": 3, "7-10": 4, "10+": 5 }
        const yearsMap: Record<string, number> = { "0-1": 1, "2-3": 3, "4-6": 5, "7-10": 9, "10+": 10 }
        const level = years ? (levelMap[years] ?? 2) : 2
        const yearsInt = years ? (yearsMap[years] ?? null) : null

const { error: usErr } = await supabase
          .from("user_skills")
          .upsert({ user_id: user.id, skill_id: skillId, level, years: yearsInt }, { onConflict: "user_id,skill_id" })
        if (usErr) throw usErr
      }

if (tools?.trim()) {
        await supabase.from("worker_profiles").update({ tools }).eq("user_id", user.id)
      }

// Store proof link as a draft only (no DB column in MVP)
      try {
        if (proofLink?.trim()) localStorage.setItem("worker_proof_link", proofLink.trim())
      } catch (_ignored) {}

toast({ title: "Skills saved", description: "Your skills and tools were saved." })
      setStep(3)
    } catch (e: any) {
      toast({ title: "Error saving skills", description: e?.message || "Unexpected error", variant: "destructive" })
    } finally {
      setLoading(false)
    }
  }

async function handleVerifyNow(files: FileList | null) {
    if (!files || files.length === 0) return
    try {
      setLoading(true)
      const { data: userData } = await supabase.auth.getUser()
      const user = userData?.user
      if (!user) {
        toast({ title: "Not signed in", description: "Please sign in to upload.", variant: "destructive" })
        return
      }
      let success = 0
      for (const file of Array.from(files)) {
        const filePath = `${user.id}/id/${Date.now()}-${file.name}`
        const { error } = await supabase.storage.from("project-media").upload(filePath, file, {
          cacheControl: "3600",
          upsert: true,
        })
        if (!error) success++
      }
      setUploadedCount((c) => c + success)
      toast({ title: "Upload complete", description: `${success} file(s) uploaded.` })
      setStep(4)
    } catch (e: any) {
      toast({ title: "Upload failed", description: e?.message || "Unexpected error", variant: "destructive" })
    } finally {
      setLoading(false)
    }
  }

async function handleSavePreferences() {
    try {
      setLoading(true)
      const { data: userData } = await supabase.auth.getUser()
      const user = userData?.user
      if (!user) {
        toast({ title: "Not signed in", description: "Please sign in first.", variant: "destructive" })
        return
      }
      await supabase
        .from("worker_profiles")
        .update({
          work_mode: workMode,
          availability: availableFrom,
          preferred_type: preferredType,
          portfolio_url: portfolioUrl,
          linkedin_url: linkedinUrl,
          work_drive_url: workDriveUrl,
        })
        .eq("user_id", user.id)
      toast({ title: "Preferences saved" })
      setStep(5)
    } catch (e: any) {
      toast({ title: "Save failed", description: e?.message || "Unexpected error", variant: "destructive" })
    } finally {
      setLoading(false)
    }
  }

return (
    <div className={cn("relative w-full bg-background", className)}>
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 -z-10 bg-[url('/images/worker-flow-bg.png')] bg-cover bg-center"
      />
      <div className="absolute inset-0 -z-10 bg-background/70 backdrop-blur-sm" />

{step === 1 && (
          <StepOne
            name={name}
            setName={setName}
            emailOrPhone={emailOrPhone}
            setEmailOrPhone={setEmailOrPhone}
            password={password}
            setPassword={setPassword}
            agree={agree}
            setAgree={setAgree}
            onNext={handleSignUpAndProfile}
            loading={loading}
          />
        )}

{step === 2 && (
          <StepTwo
            mainSkill={mainSkill}
            setMainSkill={setMainSkill}
            tools={tools}
            setTools={setTools}
            years={years}
            setYears={setYears}
            proofLink={proofLink}
            setProofLink={setProofLink}
            onNext={handleSaveSkills}
            loading={loading}
          />
        )}

{step === 3 && <StepThree onVerify={handleVerifyNow} onSkip={() => setStep(4)} />}

{step === 4 && (
          <StepFour
            workMode={workMode}
            setWorkMode={setWorkMode}
            availableFrom={availableFrom}
            setAvailableFrom={setAvailableFrom}
            preferredType={preferredType}
            setPreferredType={setPreferredType}
            onNext={handleSavePreferences}
            portfolioUrl={portfolioUrl}
            setPortfolioUrl={setPortfolioUrl}
            linkedinUrl={linkedinUrl}
            setLinkedinUrl={setLinkedinUrl}
            workDriveUrl={workDriveUrl}
            setWorkDriveUrl={setWorkDriveUrl}
          />
        )}

{step === 5 && <StepFive name={name} />}
      </section>
    </div>
  )
}

function Header({ step }: { step: number }) {
  const titles: Record<number, string> = {
    1: "Create Your Skills Profile",
    2: "Tell Us Who You Are",
    3: "Build Trust & Credibility",
    4: "Choose How You Want to Work",
    5: "Welcome to the Skills-First Movement",
  }
  return (
    <div className="flex items-start justify-between">
      <div>
        <h1 className="text-2xl md:text-3xl font-semibold tracking-tight text-balance">{titles[step]}</h1>
        <p className="mt-1.5 text-sm md:text-base text-muted-foreground">
          {step === 1 && "Your Skills Deserve to Be Seen."}
          {step === 2 && "Every Skill Has a Story. Tell Us Yours."}
          {step === 3 && "Trust Builds Opportunity."}
          {step === 4 && "Your Skills. Your Rules."}
          {step === 5 && "Welcome — the world finally sees you."}
        </p>
      </div>
      <div className="text-sm text-muted-foreground">Step {step} of 5</div>
    </div>
  )
}

function SectionShell({
  title,
  description,
  children,
}: {
  title: string
  description?: string
  children: React.ReactNode
}) {
  return (
    <Card className="border-border/60 bg-card/80">
      <CardHeader className="py-4">
        <CardTitle className="text-base md:text-lg">{title}</CardTitle>
        {description ? (
          <CardDescription className="text-sm text-muted-foreground">{description}</CardDescription>
        ) : null}
      </CardHeader>
      <CardContent className="pt-0">{children}</CardContent>
    </Card>
  )
}

function StepOne(props: {
  name: string
  setName: (v: string) => void
  emailOrPhone: string
  setEmailOrPhone: (v: string) => void
  password: string
  setPassword: (v: string) => void
  agree: boolean
  setAgree: (v: boolean) => void
  onNext: () => void
  loading?: boolean
}) {
  const { name, setName, emailOrPhone, setEmailOrPhone, password, setPassword, agree, setAgree, onNext, loading } =
    props

return (
    <div className="grid gap-4 md:gap-5">
      <p className="text-sm text-muted-foreground leading-relaxed">
        For years, you’ve built things, fixed problems, created value — but never got the recognition you truly
        deserved. Too many talented professionals are ignored simply because they don’t have a paper certificate. That
        ends here. This is your space — a platform made to let your skills, hard work, and real results speak for
        themselves.
      </p>
      <p className="text-sm text-muted-foreground">
        Let’s start by creating your profile — your digital identity where the world finally sees your worth.
      </p>

<SectionShell title="Start your profile">
        <div className="grid gap-3 md:grid-cols-2">
          <div className="grid gap-1.5">
            <Label htmlFor="name">Full Name</Label>
            <Input id="name" placeholder="e.g., Alex Sharma" value={name} onChange={(e) => setName(e.target.value)} />
          </div>
          <div className="grid gap-1.5">
            <Label htmlFor="contact">Email or Phone</Label>
            <Input
              id="contact"
              placeholder="you@example.com or +1 555 123 4567"
              value={emailOrPhone}
              onChange={(e) => setEmailOrPhone(e.target.value)}
            />
          </div>
          <div className="grid gap-1.5 md:col-span-2">
            <Label htmlFor="password">Create Password</Label>
            <Input
              id="password"
              type="password"
              placeholder="••••••••"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
            />
          </div>
        </div>

<div className="mt-3 flex flex-col sm:flex-row items-start sm:items-center gap-3">
          <Button variant="secondary" className="w-full sm:w-auto" disabled>
            Sign in with Google
          </Button>
          <div className="flex items-center gap-2">
            <Checkbox id="terms" checked={agree} onCheckedChange={(v) => setAgree(Boolean(v))} />
            <Label htmlFor="terms" className="text-sm text-muted-foreground">
              I agree to the Terms & Privacy Policy
            </Label>
          </div>
        </div>

<div className="mt-4 flex items-center justify-between">
          <div className="text-sm text-muted-foreground">
            Already have an account?{" "}
            <a href="/auth/login" className="underline underline-offset-4">
              Log in
            </a>
          </div>
          <Button
            onClick={onNext}
            className="min-w-[200px]"
            disabled={!name || !emailOrPhone || !password || !agree || Boolean(loading)}
          >
            {loading ? "Creating..." : "Create My Skills Profile"}
          </Button>
        </div>
      </SectionShell>
    </div>
  )
}

function StepTwo(props: {
  mainSkill?: string
  setMainSkill: (v: string | undefined) => void
  tools: string
  setTools: (v: string) => void
  years?: string
  setYears: (v: string | undefined) => void
  proofLink: string
  setProofLink: (v: string) => void
  onNext: () => void
  loading?: boolean
}) {
  const { mainSkill, setMainSkill, tools, setTools, years, setYears, proofLink, setProofLink, onNext, loading } = props
  return (
    <div className="grid gap-4 md:gap-5">
      <p className="text-sm text-muted-foreground leading-relaxed">
        Behind every great skill is a journey — years of learning, hustle, and hands-on experience. Whether you learned
        from your father’s workshop, taught yourself, or mastered your craft through real projects, your story matters.
        This is where you show the world what you can really do — no degrees, no fancy words — just your truth.
      </p>

<SectionShell title="Your work and tools" description="Your work is your proof — show the world your craft.">
        <div className="grid gap-3 md:grid-cols-2">
          <div className="grid gap-1.5">
            <Label>Main skill or trade</Label>
            <Select value={mainSkill} onValueChange={(v) => setMainSkill(v)}>
              <SelectTrigger>
                <SelectValue placeholder="Select a skill" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="carpentry">Carpentry</SelectItem>
                <SelectItem value="electrical">Electrical</SelectItem>
                <SelectItem value="plumbing">Plumbing</SelectItem>
                <SelectItem value="graphic-design">Graphic Design</SelectItem>
                <SelectItem value="software-dev">Software Development</SelectItem>
                <SelectItem value="welding">Welding</SelectItem>
              </SelectContent>
            </Select>
          </div>

<div className="grid gap-1.5">
            <Label>Years of experience</Label>
            <Select value={years} onValueChange={(v) => setYears(v)}>
              <SelectTrigger>
                <SelectValue placeholder="Select years" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="0-1">0–1</SelectItem>
                <SelectItem value="2-3">2–3</SelectItem>
                <SelectItem value="4-6">4–6</SelectItem>
                <SelectItem value="7-10">7–10</SelectItem>
                <SelectItem value="10+">10+</SelectItem>
              </SelectContent>
            </Select>
          </div>

<div className="grid gap-1.5 md:col-span-2">
            <Label>Tools or software you use</Label>
            <Input
              placeholder="AutoCAD, Photoshop, Welding tools, Figma, etc. (comma-separated)"
              value={tools}
              onChange={(e) => setTools(e.target.value)}
            />
          </div>

<div className="grid gap-1.5 md:col-span-2">
            <Label>Share a proof link (optional)</Label>
            <Input
              placeholder="Paste a link: LinkedIn post, Google Drive/Dropbox, YouTube, personal portfolio URL"
              value={proofLink}
              onChange={(e) => setProofLink(e.target.value)}
              inputMode="url"
            />
            <p className="text-xs text-muted-foreground">You can skip this now and add it later.</p>
          </div>
        </div>

<div className="mt-4 flex items-center justify-end">
          <Button onClick={onNext} className="min-w-[160px]" disabled={Boolean(loading)}>
            {loading ? "Saving..." : "Continue"}
          </Button>
        </div>
      </SectionShell>
    </div>
  )
}

function StepThree(props: { onVerify: () => void; onSkip: () => void }) {
  const { onVerify, onSkip } = props
  return (
    <div className="grid gap-4 md:gap-5">
      <p className="text-sm text-muted-foreground leading-relaxed">
        In today’s world, trust is everything. The best opportunities go to those who are verified and credible.
        Verification isn’t about formality — it’s about showing companies that you’re real, skilled, and reliable. Let’s
        help you stand out and open doors faster.
      </p>

<div className="grid gap-3 md:grid-cols-3">
        <Card className="border-border/60 bg-card/80">
          <CardHeader className="pb-2">
            <CardTitle className="text-base">Government ID</CardTitle>
            <CardDescription>Upload an ID document</CardDescription>
          </CardHeader>
          <CardContent className="pt-0">
            <Button variant="outline" className="w-full bg-transparent" onClick={onVerify}>
              Upload ID
            </Button>
          </CardContent>
        </Card>

<Card className="border-border/60 bg-card/80">
          <CardHeader className="pb-2">
            <CardTitle className="text-base">Selfie Check</CardTitle>
            <CardDescription>Quick identity selfie</CardDescription>
          </CardHeader>
          <CardContent className="pt-0">
            <Button variant="outline" className="w-full bg-transparent" onClick={onVerify}>
              Open Camera
            </Button>
          </CardContent>
        </Card>

<Card className="border-border/60 bg-card/80">
          <CardHeader className="pb-2">
            <CardTitle className="text-base">Skip for now</CardTitle>
            <CardDescription>Verify later anytime</CardDescription>
          </CardHeader>
          <CardContent className="pt-0">
            <Button variant="ghost" className="w-full" onClick={onSkip}>
              Skip
            </Button>
          </CardContent>
        </Card>
      </div>

<div className="flex items-center justify-end">
        <Button onClick={onVerify} className="min-w-[180px]">
          Verify Me Now
        </Button>
      </div>
    </div>
  )
}

function StepFour(props: {
  workMode: "full" | "part" | "freelance" | null
  setWorkMode: (v: "full" | "part" | "freelance" | null) => void
  availableFrom?: string
  setAvailableFrom: (v: string | undefined) => void
  preferredType?: string
  setPreferredType: (v: string | undefined) => void
  onNext: () => void
  portfolioUrl: string
  setPortfolioUrl: (v: string) => void
  linkedinUrl: string
  setLinkedinUrl: (v: string) => void
  workDriveUrl: string
  setWorkDriveUrl: (v: string) => void
}) {
  const {
    workMode,
    setWorkMode,
    availableFrom,
    setAvailableFrom,
    preferredType,
    setPreferredType,
    onNext,
    portfolioUrl,
    setPortfolioUrl,
    linkedinUrl,
    setLinkedinUrl,
    workDriveUrl,
    setWorkDriveUrl,
  } = props

return (
    <div className="grid gap-4 md:gap-5">
      <p className="text-sm text-muted-foreground leading-relaxed">
        You’ve earned the right to choose how you want to work. Whether you want full-time stability, part-time balance,
        or freelance freedom — this platform adapts to your journey. The world is shifting toward skill-based work, and
        we’re here to give you control of your own path.
      </p>

<div className="grid gap-3 md:grid-cols-3">
        <ModeCard title="Full-time Jobs" active={workMode === "full"} onClick={() => setWorkMode("full")} />
        <ModeCard title="Part-time Work" active={workMode === "part"} onClick={() => setWorkMode("part")} />
        <ModeCard
          title="Freelance / Project Work"
          active={workMode === "freelance"}
          onClick={() => setWorkMode("freelance")}
        />
      </div>

<SectionShell title="Availability & Preference">
        <div className="grid gap-3 md:grid-cols-2">
          <div className="grid gap-1.5">
            <Label>Available From</Label>
            <Select value={availableFrom} onValueChange={(v) => setAvailableFrom(v)}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="immediately">Immediately</SelectItem>
                <SelectItem value="next-week">Next Week</SelectItem>
                <SelectItem value="custom">Custom</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="grid gap-1.5">
            <Label>Preferred Work Type</Label>
            <Select value={preferredType} onValueChange={(v) => setPreferredType(v)}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="on-site">On-site</SelectItem>
                <SelectItem value="remote">Remote</SelectItem>
                <SelectItem value="both">Both</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>
      </SectionShell>

<div className="mt-4 flex items-center justify-end">
        <Button onClick={onNext} className="min-w-[140px]" disabled={!workMode}>
          Continue
        </Button>
      </div>
    </div>
  )
}

function ModeCard({ title, active, onClick }: { title: string; active?: boolean; onClick: () => void }) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={cn(
        "rounded-xl border p-4 text-left transition",
        active ? "border-primary bg-primary/10" : "border-border/60 hover:border-border",
      )}
    >
      <div className="font-medium">{title}</div>
      <div className="mt-1 text-sm text-muted-foreground">Select</div>
    </button>
  )
}

function StepFive({ name }: { name: string }) {
  const firstName = (name || "").split(" ")[0] || "Friend"
  return (
    <div className="grid gap-4 md:gap-5">
      <p className="text-sm text-muted-foreground leading-relaxed">
        You’ve taken the first step toward a new kind of career — one built on skill, not paper. Every project you
        complete here adds to your credibility. Every client you impress grows your story. You are now part of a global
        movement that values real talent, proven ability, and honest work. The world of work is changing — and you’re at
        the front of it.
      </p>

<SectionShell title={`Welcome, ${firstName} — The World Finally Sees You.`}>
        <div className="grid gap-3 md:grid-cols-3">
          <Button variant="secondary" className="w-full" aria-disabled>
            Explore Projects
          </Button>
          <Button variant="outline" className="w-full bg-transparent" aria-disabled>
            Take Skill Assessment (optional)
          </Button>
          <Button className="w-full" aria-disabled>
            Complete My Profile
          </Button>
        </div>
      </SectionShell>
    </div>
  )
}

export default WorkerWizardVisual
[V0_FILE]typescript:file="components/messaging/local-messages.ts" isMerged="true"
export type Author = "company" | "talent"

export type Message = {
  id: string
  threadId: string
  author: Author
  text: string
  createdAt: string
}

export type Thread = {
  id: string
  title: string
  participants: string[] // names or ids
  jobTitle?: string
  unreadCount: number
  lastMessageAt: string
}

const THREADS_KEY = "shiftza_threads_v1"
const MESSAGES_KEY = "shiftza_messages_v1"

function safeParse<T>(raw: string | null, fallback: T): T {
  try {
    return raw ? (JSON.parse(raw) as T) : fallback
  } catch {
    return fallback
  }
}

export function getThreads(): Thread[] {
  if (typeof window === "undefined") return []
  return safeParse<Thread[]>(localStorage.getItem(THREADS_KEY), [])
}

export function getMessages(threadId: string): Message[] {
  if (typeof window === "undefined") return []
  const all = safeParse<Message[]>(localStorage.getItem(MESSAGES_KEY), [])
  return all.filter((m) => m.threadId === threadId).sort((a, b) => +new Date(a.createdAt) - +new Date(b.createdAt))
}

export function saveThreads(threads: Thread[]) {
  if (typeof window === "undefined") return
  localStorage.setItem(THREADS_KEY, JSON.stringify(threads))
}

export function saveMessages(messages: Message[]) {
  if (typeof window === "undefined") return
  localStorage.setItem(MESSAGES_KEY, JSON.stringify(messages))
}

export function addMessage(threadId: string, author: Author, text: string) {
  const messages = safeParse<Message[]>(localStorage.getItem(MESSAGES_KEY), [])
  const newMsg: Message = {
    id: crypto.randomUUID(),
    threadId,
    author,
    text: text.trim(),
    createdAt: new Date().toISOString(),
  }
  const updated = [...messages, newMsg]
  saveMessages(updated)

// bump thread metadata + unread
  const threads = getThreads().map((t) =>
    t.id === threadId
      ? {
          ...t,
          lastMessageAt: newMsg.createdAt,
          unreadCount: author === "company" ? t.unreadCount : t.unreadCount + 1, // simplistic: unread increments for "company" side
        }
      : t,
  )
  saveThreads(threads)

// notify other tabs
  localStorage.setItem("shiftza_messages_ping", String(Date.now()))
}

export function markThreadRead(threadId: string) {
  const threads = getThreads().map((t) => (t.id === threadId ? { ...t, unreadCount: 0 } : t))
  saveThreads(threads)
  localStorage.setItem("shiftza_threads_ping", String(Date.now()))
}

// Seed example data on first run
export function ensureSeed() {
  if (typeof window === "undefined") return
  const haveThreads = getThreads()
  if (haveThreads.length > 0) return

const t1: Thread = {
    id: crypto.randomUUID(),
    title: "Website Redesign",
    participants: ["Acme Co.", "Priya Sharma"],
    jobTitle: "UI/UX Designer",
    unreadCount: 1,
    lastMessageAt: new Date(Date.now() - 1000 * 60 * 60).toISOString(),
  }
  const t2: Thread = {
    id: crypto.randomUUID(),
    title: "SaaS Dashboard Build",
    participants: ["Nova Labs", "Sarah Chen"],
    jobTitle: "Full‑Stack Dev",
    unreadCount: 0,
    lastMessageAt: new Date(Date.now() - 1000 * 60 * 120).toISOString(),
  }

const msgs: Message[] = [
    {
      id: crypto.randomUUID(),
      threadId: t1.id,
      author: "company",
      text: "Hi Priya! Loved your portfolio.",
      createdAt: new Date(Date.now() - 1000 * 60 * 90).toISOString(),
    },
    {
      id: crypto.randomUUID(),
      threadId: t1.id,
      author: "talent",
      text: "Thanks! Happy to walk through my process.",
      createdAt: new Date(Date.now() - 1000 * 60 * 70).toISOString(),
    },
    {
      id: crypto.randomUUID(),
      threadId: t1.id,
      author: "company",
      text: "Can you start next week?",
      createdAt: new Date(Date.now() - 1000 * 60 * 60).toISOString(),
    },

{
      id: crypto.randomUUID(),
      threadId: t2.id,
      author: "company",
      text: "We need a dashboard with auth + charts.",
      createdAt: new Date(Date.now() - 1000 * 60 * 150).toISOString(),
    },
    {
      id: crypto.randomUUID(),
      threadId: t2.id,
      author: "talent",
      text: "Sounds good. I can propose a milestone plan.",
      createdAt: new Date(Date.now() - 1000 * 60 * 130).toISOString(),
    },
  ]

saveThreads([t1, t2])
  saveMessages(msgs)
}
[V0_FILE]typescriptreact:file="components/messaging/thread-list.tsx" isMerged="true"
"use client"

import { useEffect, useMemo, useState } from "react"
import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Clock } from "lucide-react"
import useSWR from "swr"

type Thread = {
  id: string
  title: string
  participants: string[]
  jobTitle?: string
  unreadCount: number
  lastMessageAt: string
}

export default function ThreadList({
  selectedId,
  onSelect,
}: {
  selectedId?: string | null
  onSelect: (id: string) => void
}) {
  const [threads, setThreads] = useState<Thread[]>([])
  const [query, setQuery] = useState("")
  const { data } = useSWR<{ conversations: any[] }>("/api/conversations", (u) => fetch(u).then((r) => r.json()))

useEffect(() => {
    setThreads(
      data?.conversations?.map((c) => ({
        id: c.id,
        title: c.title || c.last_message_preview || "Conversation",
        participants: c.participants?.map((p: any) => p.display_name).filter(Boolean) ?? [],
        jobTitle: c.job_title || "",
        unreadCount: c.unread_count ?? 0,
        lastMessageAt: c.last_message_at || c.created_at,
      })) ?? [],
    )
  }, [data])

const filtered = useMemo(() => {
    const q = query.toLowerCase().trim()
    if (!q) return threads
    return threads.filter(
      (t) =>
        t.title.toLowerCase().includes(q) ||
        (t.jobTitle || "").toLowerCase().includes(q) ||
        t.participants.join(" ").toLowerCase().includes(q),
    )
  }, [threads, query])

return (
    <div className="space-y-3">
      <Input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search threads…"
        className="bg-white/5 border-white/10 text-white"
      />
      <div className="space-y-2">
        {filtered.map((t) => {
          const active = selectedId === t.id
          return (
            <Card
              key={t.id}
              onClick={() => onSelect(t.id)}
              className={`p-3 cursor-pointer bg-white/5 border-white/10 hover:bg-white/10 ${
                active ? "ring-2 ring-cyan-500/40" : ""
              }`}
            >
              <div className="flex items-start justify-between gap-3">
                <div>
                  <div className="flex items-center gap-2">
                    <h4 className="text-white font-semibold">{t.title}</h4>
                    {t.unreadCount > 0 && (
                      <Badge className="bg-cyan-500/20 text-cyan-400 border-cyan-500/30">{t.unreadCount}</Badge>
                    )}
                  </div>
                  <p className="text-sm text-white/60">{t.participants.join(" • ")}</p>
                  {t.jobTitle && <p className="text-xs text-white/40 mt-1">{t.jobTitle}</p>}
                </div>
                <div className="text-xs text-white/50 inline-flex items-center gap-1">
                  <Clock className="h-3 w-3" />
                  {new Date(t.lastMessageAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
                </div>
              </div>
            </Card>
          )
        })}
        {filtered.length === 0 && <p className="text-white/60 text-sm">No conversations yet.</p>}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/messaging/thread-view.tsx" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import useSWR, { mutate as globalMutate } from "swr"

export default function ThreadView({ threadId }: { threadId: string }) {
  const [text, setText] = useState("")
  const scrollerRef = useRef<HTMLDivElement | null>(null)

const { data, mutate } = useSWR<{ messages: any[] }>(
    threadId ? `/api/messages?conversationId=${threadId}` : null,
    (u) => fetch(u).then((r) => r.json()),
  )

const messages = data?.messages ?? []

useEffect(() => {
    const el = scrollerRef.current
    if (el) el.scrollTop = el.scrollHeight
  }, [messages])

async function send() {
    const body = text.trim()
    if (!body) return
    const res = await fetch(`/api/messages`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ conversationId: threadId, body }),
    })
    if (res.ok) {
      setText("")
      await mutate()
      await globalMutate(`/api/conversations`)
    }
  }

return (
    <Card className="flex h-full flex-col bg-white/5 border-white/10">
      <div ref={scrollerRef} className="flex-1 overflow-y-auto p-4 space-y-3">
        {messages.map((m) => {
          const isTalent = m.sender_role === "worker"
          return (
            <div key={m.id} className={`flex ${isTalent ? "justify-end" : "justify-start"}`}>
              <div
                className={`max-w-[80%] rounded-xl px-4 py-2 text-sm ${isTalent ? "bg-cyan-500/20 text-cyan-100" : "bg-white/10 text-white"}`}
              >
                <div className="opacity-60 text-[11px] mb-1">
                  {new Date(m.created_at).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
                </div>
                <div>{m.body}</div>
              </div>
            </div>
          )
        })}
        {messages.length === 0 && <p className="text-white/60 text-sm">No messages yet. Say hello!</p>}
      </div>

<div className="border-t border-white/10 p-3 flex items-center gap-2">
        <Input
          value={text}
          onChange={(e) => setText(e.target.value)}
          placeholder="Write a message…"
          className="bg-white/5 border-white/10 text-white"
          onKeyDown={(e) => {
            if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
              e.preventDefault()
              send()
            }
          }}
        />
        <Button onClick={send} className="bg-white text-black hover:bg-gray-100">
          Send
        </Button>
      </div>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/navbar.tsx" isMerged="true"
"use client"
import { useState, useEffect, useCallback } from "react"
import { Menu, X } from "lucide-react"
import InstallModal from "@/components/install-modal"
import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover"
import { getSupabaseBrowser } from "@/lib/supabase/client"
import SocialLinks from "@/components/ui/social-links"
import Shiftza3DTestimonials from "@/components/shiftza-3d-testimonials"

interface NavbarProps {
  isBannerVisible?: boolean
}

export default function Navbar({ isBannerVisible = true }: NavbarProps) {
  const [scrolled, setScrolled] = useState(false)
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
  const [isLoggedIn, setIsLoggedIn] = useState(false)

const socials = [
    {
      name: "Instagram",
      image: "https://link-hover-lndev.vercel.app/instagram.png",
      url: "https://www.instagram.com/shiftza.in/",
    },
    {
      name: "LinkedIn",
      image: "https://link-hover-lndev.vercel.app/linkedin.png",
      url: "https://www.linkedin.com/company/shiftzaa/",
    },
    {
      name: "Spotify",
      image: "https://link-hover-lndev.vercel.app/spotify.png",
    },
    {
      name: "TikTok",
      image: "https://link-hover-lndev.vercel.app/tiktok.png",
    },
  ]

const handleScroll = useCallback(() => {
    const isScrolled = window.scrollY > 10
    if (isScrolled !== scrolled) {
      setScrolled(isScrolled)
    }
  }, [scrolled])

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

useEffect(() => {
    if (mobileMenuOpen) {
      document.body.style.overflow = "hidden"
    } else {
      document.body.style.overflow = ""
    }
    return () => {
      document.body.style.overflow = ""
    }
  }, [mobileMenuOpen])

useEffect(() => {
    const supabase = getSupabaseBrowser()
    supabase.auth.getSession().then(({ data }) => {
      setIsLoggedIn(!!data.session)
    })
    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((_event, session) => {
      setIsLoggedIn(!!session)
    })
    return () => {
      subscription.unsubscribe()
    }
  }, [])

const navStyle = {
    boxShadow: scrolled ? "0 0 0 0 rgba(0,0,0,0), 0 0 0 0 rgba(0,0,0,0), 0 5px 18px 0 rgba(204,204,204,0.1)" : "none",
    border: scrolled ? "1px solid #1a1a1a" : "1px solid transparent",
    borderRadius: "16px",
    transition: "all 0.3s ease-in-out",
  }

return (
    <div
      className={`fixed my-0 ${isBannerVisible ? "top-[16px] sm:top-12" : "top-0"} left-0 right-0 z-50 flex justify-center px-6 md:px-8 transition-all duration-300`}
    >
      <div className="w-[calc(100%-24px)] max-w-[1400px] mt-2">
        <nav
          className={`flex items-center justify-between rounded-[16px] text-white font-geist transition-[background,box-shadow,border-color] duration-300 px-2 md:px-3 h-14 md:h-16 supports-[backdrop-filter]:bg-black/60 bg-black/80 backdrop-blur`}
          style={navStyle}
          role="navigation"
          aria-label="Main"
        >
          <a href="/" className="flex items-center ml-[15px] hover:opacity-80 transition-opacity">
            <img
              src="/images/shiftza-logo-transparent.png"
              alt="Shiftza Logo"
              className="mr-2"
              style={{
                width: "56px",
                height: "56px",
                objectFit: "contain",
                background: "transparent",
                display: "block",
              }}
            />
            <span
              className="logo-text"
              style={{
                fontFamily: 'var(--font-geist-sans), "GeistSans Fallback", sans-serif',
                fontSize: "18px",
                lineHeight: "1.1",
                fontWeight: "600",
                letterSpacing: "-0.04em",
                color: "#FFFFFF",
                width: "auto",
                height: "auto",
              }}
            >
              Shiftza
            </span>
          </a>

<Popover>
              <PopoverTrigger asChild>
                <button
                  className="text-white/80 hover:text-white transition-colors text-sm font-medium"
                  aria-haspopup="dialog"
                >
                  Contact
                </button>
              </PopoverTrigger>
              <PopoverContent
                align="center"
                sideOffset={10}
                className="w-auto rounded-md p-6 text-transparent bg-transparent border-transparent shadow-xl px-6"
              >
                <SocialLinks socials={socials} />
              </PopoverContent>
            </Popover>

{/* SIGN UP button stays unchanged */}
            <a href="/sign-up" aria-label="Go to signup">
              <button
                type="button"
                className="bg-white text-black hover:bg-gray-200 px-6 h-12 rounded-lg transition-colors"
                style={{
                  fontFamily:
                    'GeistMono, ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace',
                  fontSize: "14px",
                  lineHeight: "18px",
                  fontWeight: "600",
                  letterSpacing: "0.56px",
                  color: "#000000",
                  height: "48px",
                  borderRadius: "8px",
                }}
              >
                SIGN UP
              </button>
            </a>
            {/* LOG IN / LOG OUT toggle */}
            {isLoggedIn ? (
              <button
                type="button"
                className="bg-transparent hover:bg-white/10 border border-white/30 rounded-lg px-6 h-12 transition-colors"
                style={{
                  fontFamily:
                    'GeistMono, ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace',
                  fontSize: "14px",
                  lineHeight: "18px",
                  fontWeight: "600",
                  letterSpacing: "0.32px",
                  color: "#FFFFFF",
                  height: "48px",
                }}
                aria-label="Log out"
                onClick={async () => {
                  const supabase = getSupabaseBrowser()
                  await supabase.auth.signOut()
                  window.location.href = "/"
                }}
              >
                LOG OUT
              </button>
            ) : (
              <a href="/auth/login" aria-label="Go to login">
                <button
                  type="button"
                  className="bg-transparent hover:bg-white/10 border border-white/30 rounded-lg px-6 h-12 transition-colors"
                  style={{
                    fontFamily:
                      'GeistMono, ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace',
                    fontSize: "14px",
                    lineHeight: "18px",
                    fontWeight: "600",
                    letterSpacing: "0.32px",
                    color: "#FFFFFF",
                    height: "48px",
                  }}
                >
                  LOG IN
                </button>
              </a>
            )}
          </div>

<button
            className="md:hidden flex items-center justify-center mr-2 p-2 rounded-md hover:bg-white/10 transition-colors"
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            aria-label={mobileMenuOpen ? "Close menu" : "Open menu"}
          >
            {mobileMenuOpen ? <X className="h-6 w-6 text-white" /> : <Menu className="h-6 w-6 text-white" />}
          </button>
        </nav>

{mobileMenuOpen && (
          <div className="fixed inset-0 bg-black bg-opacity-50 z-40" onClick={() => setMobileMenuOpen(false)} />
        )}

<a
              href="/"
              onClick={() => setMobileMenuOpen(false)}
              className="px-3 py-3 rounded-md text-white/90 hover:bg-white/10"
            >
              Home
            </a>

<button
              type="button"
              onClick={() => setMobileMenuOpen(false)}
              className="text-left px-3 py-3 rounded-md text-white/90 hover:bg-white/10"
              aria-label="Go to contact"
            >
              Contact
            </button>

<a
              href="#faq"
              onClick={() => setMobileMenuOpen(false)}
              className="px-3 py-3 rounded-md text-white/90 hover:bg-white/10"
            >
              FAQ
            </a>

{/* Mobile auth action: toggle Log in / Log out */}
            {isLoggedIn ? (
              <button
                type="button"
                onClick={async () => {
                  const supabase = getSupabaseBrowser()
                  await supabase.auth.signOut()
                  setMobileMenuOpen(false)
                  window.location.href = "/"
                }}
                className="px-3 py-3 rounded-md text-white/70 hover:bg-white/10 text-left"
                aria-label="Log out"
              >
                Log out
              </button>
            ) : (
              <a
                href="/auth/login"
                className="px-3 py-3 rounded-md text-white/70 hover:bg-white/10"
                aria-label="Go to login"
              >
                Log in
              </a>
            )}
          </div>
        </div>
      </div>

<InstallModal />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/save-review-restore-section.tsx" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { Button } from "@/components/ui/button"
import FeatureVideo from "@/components/feature-video"

interface FeatureData {
  id: string
  title: string
  description: string
  videoSrc: string
  fallbackSrc?: string
  thumbnailSrc: string
}

const features: FeatureData[] = [
  {
    id: "create",
    title: "Create Profile",
    description: "Build your skills-first profile — showcase your work, not your degree.",
    videoSrc: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/yoyo-save-2-DUbUp5aKE9GtNY9Diok2eG6SW2qHCX.mp4",
    fallbackSrc: "/videos/save-review-restore.mp4",
    thumbnailSrc: "/images/save-thumbnail.jpeg",
  },
  {
    id: "match",
    title: "Get Matched",
    description: "AI matches you with projects that fit your skills perfectly.",
    videoSrc: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/yoyo-preview-dnsmAMg2AX6f1thlrNvj1e65T2zUTM.mp4",
    fallbackSrc:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/save-review-restore-g3BK0sricXTSPMzxK4iGrmXBUwPt11.mp4",
    thumbnailSrc: "/images/preview-thumbnail.jpeg",
  },
  {
    id: "work",
    title: "Start Working",
    description: "Get hired for projects and build your reputation.",
    videoSrc: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/yoyo-restore-rhqD0huLa48Q51Sy9gzIrIdHk2vu2L.mp4",
    fallbackSrc:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/save-review-restore-g3BK0sricXTSPMzxK4iGrmXBUwPt11.mp4",
    thumbnailSrc: "/images/restore-thumbnail.jpeg",
  },
]

interface SaveReviewRestoreSectionProps {
  onOpenInstall?: () => void
}

export default function SaveReviewRestoreSection({ onOpenInstall }: SaveReviewRestoreSectionProps) {
  const [activeFeature, setActiveFeature] = useState(features[0])
  const [hoveredFeature, setHoveredFeature] = useState<string | null>(null)
  const [videosLoaded, setVideosLoaded] = useState<{ [key: string]: boolean }>({})
  const videoRefs = useRef<{ [key: string]: HTMLVideoElement | null }>({})

// Preload all videos when component mounts
  useEffect(() => {
    const loadedState = { ...videosLoaded }

// Preload all videos but don't autoplay
    features.forEach((feature) => {
      const video = document.createElement("video")
      video.muted = true
      video.preload = "auto"
      video.playsInline = true
      video.loop = true
      // Remove autoplay - videos will be controlled by intersection observer

video.onloadeddata = () => {
        setVideosLoaded((prev) => ({
          ...prev,
          [feature.id]: true,
        }))
      }

video.onerror = () => {
        if (feature.fallbackSrc) {
          video.src = feature.fallbackSrc
        }
      }

video.src = feature.videoSrc
      loadedState[feature.id] = false
    })

setVideosLoaded(loadedState)
  }, [])

const handleThumbnailHover = (feature: FeatureData) => {
    setHoveredFeature(feature.id)
    setActiveFeature(feature)
  }

const handleThumbnailLeave = () => {
    setHoveredFeature(null)
  }

const handleThumbnailClick = (feature: FeatureData) => {
    setActiveFeature(feature)
  }

return (
    <div className="my-24">
      {/* Title and Description outside the gradient section */}
      <div className="text-center mb-6 md:mb-12 px-4">
        <h2
          className="mb-4 font-semibold"
          style={{
            backgroundImage: "linear-gradient(rgb(245, 245, 245), rgb(245, 245, 245) 29%, rgb(153, 153, 153))",
            color: "transparent",
            fontFamily: "GeistSans, sans-serif",
            fontSize: "clamp(32px, 6vw, 52px)",
            fontWeight: 600,
            letterSpacing: "clamp(-1.5px, -0.04em, -2.08px)",
            lineHeight: "1.15",
            textAlign: "center",
            WebkitBackgroundClip: "text",
            backgroundClip: "text",
          }}
        >
          Create, Match, Work
        </h2>
        <p
          className="max-w-2xl mx-auto"
          style={{
            color: "#f5f5f5",
            fontFamily: "GeistMono, monospace",
            fontSize: "clamp(16px, 3vw, 22px)",
            lineHeight: "1.3",
            textAlign: "center",
          }}
        >
          Getting hired shouldn't require a degree. Shiftza lets you prove your skills, get matched with companies, and
          start working on real projects.
        </p>
      </div>

{/* Gradient Section with Video - ORIGINAL DESIGN with overlay only on desktop */}
      <div className="flex justify-center">
        <div className="gradient-container gradient-yellow-red max-w-[1296px] w-full relative">
          {/* Dark Overlay */}
          <div className="absolute inset-0 bg-black/35 rounded-[16px]"></div>

{/* Noise Overlay */}
          <div className="noise-texture"></div>

{/* Original Video Section */}
          <div className="relative z-10 pt-4 sm:pt-12 md:pt-16 pb-0 px-4 sm:px-6 md:px-12">
            <div className="rounded-t-lg overflow-hidden shadow-2xl max-w-4xl mx-auto border border-white/10 border-b-0 relative">
              <FeatureVideo
                src={activeFeature.videoSrc}
                alt={activeFeature.title}
                fallbackSrc={activeFeature.fallbackSrc}
                fixedAspectRatio={true}
              />

{/* Mobile Navigation Dots - Only visible on mobile */}
              <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 lg:hidden z-20">
                <div className="flex gap-2 bg-black/50 backdrop-blur-sm rounded-full px-3 py-2">
                  {features.map((feature, index) => (
                    <button
                      key={feature.id}
                      onClick={() => setActiveFeature(feature)}
                      className={`w-2 h-2 rounded-full transition-all duration-200 ${
                        activeFeature.id === feature.id ? "bg-white w-6" : "bg-white/50 hover:bg-white/70"
                      }`}
                      aria-label={`Switch to ${feature.title}`}
                    />
                  ))}
                </div>
              </div>

{/* Gradient Overlay for Text Readability - HIDDEN on mobile and tablet */}
              <div
                className="absolute inset-0 hidden lg:block pointer-events-none"
                style={{
                  background: "linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 70%)",
                }}
              ></div>

{/* Overlay Content on top of the video - HIDDEN on mobile and tablet */}
              <div className="absolute inset-0 hidden lg:flex flex-col justify-end p-6 lg:p-8">
                {/* Bottom Section: Content Left, Thumbnails Right */}
                <div className="flex gap-4 lg:gap-8 items-end">
                  {/* Left: Feature Info and Install Button */}
                  <div className="flex-1 max-w-xs lg:max-w-md">
                    <h3
                      className="text-white text-2xl lg:text-3xl font-semibold mb-3"
                      style={{
                        fontFamily: 'var(--font-geist-sans), "GeistSans", sans-serif',
                        letterSpacing: "-0.02em",
                        textShadow: "0 2px 4px rgba(0,0,0,0.8)",
                      }}
                    >
                      {activeFeature.title}
                    </h3>
                    <p
                      className="text-white/95 mb-6 text-base lg:text-lg"
                      style={{
                        fontFamily: "GeistMono, monospace",
                        lineHeight: "1.4",
                        textShadow: "0 1px 2px rgba(0,0,0,0.8)",
                      }}
                    >
                      {activeFeature.description}
                    </p>
                    {onOpenInstall && (
                      <Button
                        onClick={onOpenInstall}
                        className="bg-white hover:bg-gray-100 text-black font-mono text-sm font-semibold tracking-wider py-3 px-6 rounded-lg shadow-lg"
                        style={{
                          fontFamily: "GeistMono, monospace",
                          letterSpacing: "0.56px",
                          height: "48px",
                        }}
                      >
                        JOIN NOW
                      </Button>
                    )}
                  </div>

{/* Right: Thumbnails - Now using actual YOYO interface images */}
                  <div className="flex gap-3">
                    {features.map((feature, index) => (
                      <div
                        key={feature.id}
                        className="relative group cursor-pointer"
                        onMouseEnter={() => handleThumbnailHover(feature)}
                        onMouseLeave={handleThumbnailLeave}
                        onClick={() => handleThumbnailClick(feature)}
                      >
                        <div
                          className={`w-24 h-15 lg:w-32 lg:h-20 rounded-lg overflow-hidden border-2 transition-all duration-200 shadow-lg ${
                            activeFeature.id === feature.id
                              ? "border-white shadow-xl scale-105"
                              : "border-white/40 hover:border-white/70 hover:scale-102"
                          }`}
                        >
                          <img
                            src={feature.thumbnailSrc || "/placeholder.svg"}
                            alt={`${feature.title} feature of Shiftza`}
                            className="w-full h-full object-cover"
                          />
                        </div>

{/* Thumbnail Label */}
                        <div className="absolute -bottom-6 left-1/2 transform -translate-x-1/2 whitespace-nowrap">
                          <span
                            className={`text-sm font-mono transition-colors duration-200 ${
                              activeFeature.id === feature.id ? "text-white" : "text-white/80"
                            }`}
                            style={{
                              fontFamily: "GeistMono, monospace",
                              textShadow: "0 1px 2px rgba(0,0,0,0.8)",
                            }}
                          >
                            {feature.title}
                          </span>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/share-story-modal.tsx" isMerged="true"
"use client"

import type React from "react"
import { X } from "lucide-react"
import { getSupabaseBrowser } from "@/lib/supabase/client"
import { useState } from "react"

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

export function ShareStoryModal({ isOpen, onClose }: ShareStoryModalProps) {
  const [formData, setFormData] = useState({
    name: "",
    location: "",
    yearsExp: "",
    category: "",
    storyTitle: "",
    story: "",
    skills: "",
  })
  const [submitting, setSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)

if (!isOpen) return null

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setSubmitting(true)
    setError(null)
    try {
      // Lazily create the Supabase client inside the event handler (browser-only)
      const supabase = getSupabaseBrowser()

const {
        data: { session },
      } = await supabase.auth.getSession()

if (!session) {
        setError("Please log in to share your story.")
        setSubmitting(false)
        return
      }

const res = await fetch("/api/stories", {
        method: "POST",
        credentials: "include",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${session.access_token}`,
        },
        body: JSON.stringify(formData),
      })
      if (res.status === 401) {
        setError("Please log in to share your story.")
        setSubmitting(false)
        return
      }
      if (!res.ok) {
        const j = await res.json().catch(() => ({}))
        throw new Error(j?.error || "Failed to submit story")
      }
      if (typeof window !== "undefined") {
        window.dispatchEvent(new CustomEvent("stories:refresh"))
      }
      onClose()
    } catch (err: any) {
      setError(err.message || "Something went wrong")
    } finally {
      setSubmitting(false)
    }
  }

return (
    <div className="absolute inset-0 z-10 flex items-center justify-center bg-black/80 backdrop-blur-sm rounded-2xl">
      <div className="relative w-full max-w-md mx-4 bg-background border rounded-xl shadow-2xl max-h-[90%] overflow-y-auto">
        <div className="flex items-center justify-between p-4 border-b sticky top-0 bg-background z-10">
          <h2 className="text-lg font-semibold">Share Your Story</h2>
          <button
            onClick={onClose}
            className="text-foreground/60 hover:text-foreground transition-colors"
            aria-label="Close"
          >
            <X className="w-4 h-4" />
          </button>
        </div>

<form onSubmit={handleSubmit} className="p-4 space-y-3">
          <input
            type="text"
            placeholder="Your Name"
            value={formData.name}
            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
            className="w-full px-3 py-2 text-sm bg-background border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50"
            required
          />

<input
            type="text"
            placeholder="Location"
            value={formData.location}
            onChange={(e) => setFormData({ ...formData, location: e.target.value })}
            className="w-full px-3 py-2 text-sm bg-background border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50"
            required
          />

<input
            type="number"
            placeholder="Years of Experience"
            value={formData.yearsExp}
            onChange={(e) => setFormData({ ...formData, yearsExp: e.target.value })}
            className="w-full px-3 py-2 text-sm bg-background border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50"
            required
          />

<input
            type="text"
            placeholder="Category"
            value={formData.category}
            onChange={(e) => setFormData({ ...formData, category: e.target.value })}
            className="w-full px-3 py-2 text-sm bg-background border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50"
            required
          />

<input
            type="text"
            placeholder="Story Title"
            value={formData.storyTitle}
            onChange={(e) => setFormData({ ...formData, storyTitle: e.target.value })}
            className="w-full px-3 py-2 text-sm bg-background border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50"
            required
          />

<textarea
            placeholder="Share your story..."
            value={formData.story}
            onChange={(e) => setFormData({ ...formData, story: e.target.value })}
            className="w-full px-3 py-2 text-sm bg-background border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 min-h-[100px] resize-none"
            required
          />

<input
            type="text"
            placeholder="Skills (comma separated)"
            value={formData.skills}
            onChange={(e) => setFormData({ ...formData, skills: e.target.value })}
            className="w-full px-3 py-2 text-sm bg-background border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50"
            required
          />

{error ? <p className="text-xs text-red-500">{error}</p> : null}

<button
            type="submit"
            disabled={submitting}
            className="w-full py-2.5 text-sm bg-primary text-primary-foreground font-semibold rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-60"
          >
            {submitting ? "Submitting..." : "Submit Story"}
          </button>
        </form>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/sign-up-card.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import { X, Mail } from "lucide-react"

// Colored Google "G" SVG
function GoogleLogo() {
  return (
    <svg width="20" height="20" viewBox="0 0 48 48" aria-hidden="true">
      <path
        fill="#FFC107"
        d="M43.611 20.083h-1.611V20H24v8h11.303C33.932 32.91 29.347 36 24 36c-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.841 1.157 7.961 3.039l5.657-5.657C34.087 6.073 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.139-2.651-.389-3.917z"
      />
      <path
        fill="#FF3D00"
        d="M6.306 14.691l6.571 4.819C14.586 16.055 18.94 14 24 14c3.059 0 5.841 1.157 7.961 3.039l5.657-5.657C34.087 6.073 29.268 4 24 4c-7.422 0-13.784 4.042-17.694 10.691z"
      />
      <path
        fill="#4CAF50"
        d="M24 44c5.272 0 10.092-2.02 13.73-5.309l-6.341-5.364C29.289 34.221 26.789 35 24 35c-5.323 0-9.896-3.07-11.936-7.523l-6.56 5.053C8.381 39.871 15.625 44 24 44z"
      />
      <path
        fill="#1976D2"
        d="M43.611 20.083H42V20H24v8h11.303c-1.137 3.267-4.284 6-11.303 6-5.06 0-9.414-3.055-11.123-7.509l-6.571 5.019C8.367 39.916 15.624 44 24 44c8.323 0 17-6.042 17-20 0-1.341-.139-2.651-.389-3.917z"
      />
    </svg>
  )
}

export default function SignUpCard({
  open,
  onClose,
  initialTab = "signup",
}: {
  open: boolean
  onClose: () => void
  initialTab?: "signup" | "signin"
}) {
  const [tab, setTab] = useState<"signup" | "signin">(initialTab)

if (!open) return null

return (
    // Wrapper must live inside a relatively positioned parent.
    <div className="absolute inset-0 flex items-start justify-center pointer-events-none">
      {/* Position the card down a bit so it sits inside the stories layout */}
      <div className="mt-8 pointer-events-auto relative">
        {/* Warm gradient behind the card */}
        <div
          aria-hidden="true"
          className="absolute -inset-6 rounded-[24px] opacity-90 blur-2xl"
          style={{
            background:
              "linear-gradient(135deg, rgba(255,140,66,0.85) 0%, rgba(255,82,82,0.85) 50%, rgba(255,105,180,0.85) 100%)",
          }}
        />
        {/* Frosted glass card */}
        <div className="relative z-10 w-[90vw] max-w-[440px] rounded-[20px] border border-white/15 bg-white/10 backdrop-blur-xl shadow-2xl overflow-hidden">
          {/* Header: Tabs + Close */}
          <div className="flex items-center justify-between px-4 pt-4">
            <Tabs value={tab} onValueChange={(v) => setTab(v as "signup" | "signin")} className="w-auto">
              <TabsList className="bg-black/30 border border-white/20">
                <TabsTrigger value="signup" className="data-[state=active]:bg-white data-[state=active]:text-black">
                  Sign up
                </TabsTrigger>
                <TabsTrigger value="signin" className="data-[state=active]:bg-white data-[state=active]:text-black">
                  Sign In
                </TabsTrigger>
              </TabsList>
            </Tabs>
            <button
              type="button"
              onClick={onClose}
              className="ml-2 inline-flex h-8 w-8 items-center justify-center rounded-full bg-black/40 hover:bg-black/60 border border-white/20 text-white"
              aria-label="Close"
            >
              <X className="h-4 w-4" />
            </button>
          </div>

<div className="px-5 pb-5">
            <h3 className="mt-4 mb-3 text-2xl md:text-[28px] font-semibold text-white">Create an account</h3>

{/* Sign up content */}
            <TabsContent value="signup" className="m-0">
              <div className="space-y-3">
                {/* Name row */}
                <div className="grid grid-cols-2 gap-3">
                  <div className="rounded-xl bg-black/40 border border-white/15 px-4 py-3 text-white placeholder:text-white/50">
                    John
                  </div>
                  <div className="rounded-xl bg-black/40 border border-white/15 px-4 py-3 text-white/50">Last name</div>
                </div>

{/* Email with icon */}
                <div className="rounded-xl bg-black/40 border border-white/15 px-4 py-3 flex items-center gap-2 text-white/80">
                  <Mail className="h-4 w-4 text-white/70" />
                  <span className="text-white/60">Enter your email</span>
                </div>

{/* Phone with IN +91 selector and flag */}
                <div className="rounded-xl bg-black/40 border border-white/15 px-2 py-2 flex items-center gap-2">
                  <div className="flex items-center gap-2 rounded-lg bg-black/50 px-2 py-1 border border-white/15">
                    <img
                      src="/images/design-mode/in.png"
                      width="20"
                      height="14"
                      alt="India flag"
                      className="rounded-[2px]"
                    />
                    <span className="text-white/85 text-sm">IN</span>
                  </div>
                  <span className="text-white/70 text-sm">(+91)</span>
                  <span className="text-white/80 text-sm tracking-wide">(775) 351-6501</span>
                </div>

{/* Primary CTA */}
                <button
                  type="button"
                  className="mt-2 w-full select-none rounded-xl border border-white/25 bg-gradient-to-b from-white/80 to-white/60 text-black font-semibold py-3 hover:from-white/90 hover:to-white/70 transition-colors"
                >
                  Create an account
                </button>

{/* Divider */}
                <div className="flex items-center gap-3 py-2">
                  <div className="h-px flex-1 bg-white/15" />
                  <span className="text-xs tracking-wide text-white/50">OR SIGN IN WITH</span>
                  <div className="h-px flex-1 bg-white/15" />
                </div>

{/* Google button */}
                <button
                  type="button"
                  className="mx-auto mb-1 flex items-center gap-3 rounded-2xl bg-black/50 border border-white/20 px-4 py-2 hover:bg-black/60 transition-colors"
                >
                  <GoogleLogo />
                  <span className="text-white/90 font-medium">sign in with Google</span>
                </button>

{/* Terms text */}
                <p className="text-[12px] text-white/60 text-center leading-snug mt-1">
                  By creating an account, you agree to our Terms & Service
                </p>
              </div>
            </TabsContent>

{/* Sign in content (visual-only to mirror tabs) */}
            <TabsContent value="signin" className="m-0">
              <div className="space-y-3">
                <div className="rounded-xl bg-black/40 border border-white/15 px-4 py-3 flex items-center gap-2 text-white/80">
                  <Mail className="h-4 w-4 text-white/70" />
                  <span className="text-white/60">Email</span>
                </div>
                <div className="rounded-xl bg-black/40 border border-white/15 px-4 py-3 text-white/60">Password</div>
                <button
                  type="button"
                  className="mt-2 w-full select-none rounded-xl border border-white/25 bg-gradient-to-b from-white/80 to-white/60 text-black font-semibold py-3 hover:from-white/90 hover:to-white/70 transition-colors"
                >
                  Sign In
                </button>
              </div>
            </TabsContent>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/sign-up-modal.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { X } from "lucide-react"

export function SignUpModal({
  isOpen,
  onClose,
  defaultTab = "signup",
}: {
  isOpen: boolean
  onClose: () => void
  defaultTab?: "signup" | "signin"
}) {
  const [tab, setTab] = useState<"signup" | "signin">(defaultTab)

if (!isOpen) return null

return (
    <div className="absolute inset-0 z-50 flex items-center justify-center rounded-2xl">
      {/* Backdrop with warm gradient and blur */}
      <div
        className="absolute inset-0 rounded-2xl"
        aria-hidden="true"
        style={{
          background:
            "linear-gradient(160deg, rgba(255,120,0,0.35) 0%, rgba(180,50,20,0.45) 50%, rgba(60,20,10,0.55) 100%)",
          backdropFilter: "blur(8px)",
        }}
      />
      {/* Modal card */}
      <div className="relative w-full max-w-md mx-4">
        <div
          className="relative rounded-3xl border shadow-2xl overflow-hidden"
          style={{
            background: "rgba(20,20,20,0.6)",
            backdropFilter: "blur(14px)",
            borderColor: "rgba(255,255,255,0.08)",
          }}
          role="dialog"
          aria-modal="true"
          aria-labelledby="signup-title"
        >
          {/* Header Tabs + Close */}
          <div className="flex items-center justify-between px-4 py-3">
            <div className="flex items-center gap-2 bg-white/10 rounded-full p-1">
              <button
                type="button"
                onClick={() => setTab("signup")}
                className={`px-3 py-1.5 text-sm rounded-full transition-colors ${
                  tab === "signup" ? "bg-white/70 text-black" : "text-white/80 hover:text-white"
                }`}
                aria-selected={tab === "signup"}
                aria-controls="signup-panel"
              >
                Sign up
              </button>
              <button
                type="button"
                onClick={() => setTab("signin")}
                className={`px-3 py-1.5 text-sm rounded-full transition-colors ${
                  tab === "signin" ? "bg-white/70 text-black" : "text-white/80 hover:text-white"
                }`}
                aria-selected={tab === "signin"}
                aria-controls="signin-panel"
              >
                Sign In
              </button>
            </div>

{/* Title */}
          <div className="px-6">
            <h2 id="signup-title" className="text-2xl md:text-3xl font-semibold tracking-tight text-white">
              {tab === "signup" ? "Create an account" : "Welcome back"}
            </h2>
          </div>

{/* Content */}
          <div className="px-6 pb-6 pt-4">
            {tab === "signup" ? (
              <div id="signup-panel" role="tabpanel" aria-labelledby="Sign up">
                {/* Name row */}
                <div className="grid grid-cols-2 gap-3">
                  <input
                    type="text"
                    placeholder="John"
                    className="h-12 rounded-2xl px-4 bg-white/5 border border-white/10 text-white placeholder:text-white/60 outline-none"
                  />
                  <input
                    type="text"
                    placeholder="Last name"
                    className="h-12 rounded-2xl px-4 bg-white/5 border border-white/10 text-white placeholder:text-white/60 outline-none"
                  />
                </div>

{/* Email */}
                <div className="mt-3">
                  <div className="h-12 rounded-2xl px-4 flex items-center gap-2 bg-white/5 border border-white/10 text-white">
                    <span aria-hidden="true">✉️</span>
                    <input
                      type="email"
                      placeholder="Enter your email"
                      className="w-full bg-transparent outline-none placeholder:text-white/60 text-white"
                    />
                  </div>
                </div>

{/* Phone with country selector */}
                <div className="mt-3">
                  <div className="h-12 rounded-2xl px-3 flex items-center gap-2 bg-white/5 border border-white/10 text-white">
                    <select className="bg-transparent outline-none pr-2" defaultValue="+91" aria-label="Country code">
                      <option value="+91">🇮🇳 +91</option>
                      <option value="+1">🇺🇸 +1</option>
                      <option value="+44">🇬🇧 +44</option>
                    </select>
                    <input
                      type="tel"
                      placeholder="(775) 351-6501"
                      className="w-full bg-transparent outline-none placeholder:text-white/60 text-white"
                    />
                  </div>
                </div>

{/* Primary CTA */}
                <button
                  type="button"
                  className="mt-4 w-full h-12 rounded-2xl font-semibold text-white"
                  style={{
                    background: "linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.35) 100%)",
                    color: "#111",
                  }}
                >
                  Create an account
                </button>

{/* Divider */}
                <div className="mt-5 mb-3 flex items-center gap-3 text-white/60 text-xs">
                  <div className="h-px flex-1 bg-white/10" />
                  <span>OR SIGN IN WITH</span>
                  <div className="h-px flex-1 bg-white/10" />
                </div>

{/* Google button (visual-only) */}
                <button
                  type="button"
                  className="w-full h-12 rounded-2xl bg-white/10 border border-white/15 text-white hover:bg-white/15 transition-colors flex items-center justify-center gap-2"
                >
                  <span className="text-lg">G</span>
                  <span className="font-medium">sign in with Google</span>
                </button>

<p className="mt-4 text-[12px] text-white/70 text-center">
                  By creating an account, you agree to our Terms & Service
                </p>
              </div>
            ) : (
              <div id="signin-panel" role="tabpanel" aria-labelledby="Sign In">
                <div className="space-y-3">
                  <input
                    type="email"
                    placeholder="Enter your email"
                    className="w-full h-12 rounded-2xl px-4 bg-white/5 border border-white/10 text-white placeholder:text-white/60 outline-none"
                  />
                  <input
                    type="password"
                    placeholder="Enter your password"
                    className="w-full h-12 rounded-2xl px-4 bg-white/5 border border-white/10 text-white placeholder:text-white/60 outline-none"
                  />
                  <button
                    type="button"
                    className="w-full h-12 rounded-2xl font-semibold text-white"
                    style={{
                      background: "linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.35) 100%)",
                      color: "#111",
                    }}
                  >
                    Sign In
                  </button>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/signup-card.tsx" isMerged="true"
"use client"

import type React from "react"

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

type SignupCardProps = {
  open: boolean
  onClose: () => void
  initialTab?: "signup" | "signin"
}

export default function SignupCard({ open, onClose, initialTab = "signup" }: SignupCardProps) {
  const [tab, setTab] = useState<"signup" | "signin">(initialTab)
  const overlayRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    if (!open) return
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose()
    window.addEventListener("keydown", onKey)
    return () => window.removeEventListener("keydown", onKey)
  }, [open, onClose])

if (!open) return null

return (
    <div
      ref={overlayRef}
      className="fixed inset-0 z-50 grid place-items-center"
      onMouseDown={(e) => {
        if (e.target === overlayRef.current) onClose()
      }}
    >
      <div
        role="dialog"
        aria-modal="true"
        className={cn(
          "relative w-[92vw] max-w-[420px] rounded-3xl",
          // gradient accent behind the frosted card
          "before:absolute before:inset-0 before:-z-10 before:rounded-3xl before:bg-[linear-gradient(180deg,#ff6a3d_0%,#b23a48_100%)] before:opacity-90",
          // frosted surface
          "border border-white/10 bg-white/5 backdrop-blur-xl shadow-xl",
        )}
      >
        {/* Close (icon-only) */}
        <button
          type="button"
          aria-label="Close"
          onClick={onClose}
          className="absolute right-3 top-3 inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/10 text-white/90 hover:bg-white/20"
        >
          <svg width="16" height="16" viewBox="0 0 24 24">
            <path
              fill="currentColor"
              d="M18.3 5.71L12 12.01l6.3 6.29-1.41 1.41L10.59 13.4l-6.3 6.3-1.41-1.41 6.3-6.3-6.3-6.3L4.3 4.3l6.29 6.3 6.3-6.3z"
            />
          </svg>
        </button>

{/* Header */}
        <div className="p-4 pt-5">
          <div className="inline-flex rounded-full bg-white/10 p-1">
            <button
              type="button"
              onClick={() => setTab("signup")}
              className={cn(
                "px-4 py-1.5 rounded-full text-sm",
                tab === "signup" ? "bg-white text-black" : "text-white/90",
              )}
              aria-pressed={tab === "signup"}
            >
              Sign up
            </button>
            <button
              type="button"
              onClick={() => setTab("signin")}
              className={cn(
                "px-4 py-1.5 rounded-full text-sm",
                tab === "signin" ? "bg-white text-black" : "text-white/90",
              )}
              aria-pressed={tab === "signin"}
            >
              Sign In
            </button>
          </div>

<h2 className="mt-6 text-2xl font-semibold text-white">Create an account</h2>
        </div>

<div className="px-4 pb-5 bg-transparent">{tab === "signup" ? <SignupForm /> : <SigninForm />}</div>
      </div>
    </div>
  )
}

function Field({ children }: { children: React.ReactNode }) {
  return <div className="mb-3 rounded-2xl bg-black/30 px-3 py-2 ring-1 ring-white/10">{children}</div>
}
function TextInput(props: React.InputHTMLAttributes<HTMLInputElement>) {
  return (
    <input
      {...props}
      className={cn("w-full bg-transparent text-white placeholder:text-white/60 outline-none", props.className)}
    />
  )
}

function SignupForm() {
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault()
        // visual-only for now
      }}
    >
      {/* First / Last name */}
      <div className="grid grid-cols-2 gap-3">
        <Field>
          <TextInput placeholder="John" aria-label="First name" />
        </Field>
        <Field>
          <TextInput placeholder="Last name" aria-label="Last name" />
        </Field>
      </div>

{/* Email with icon */}
      <Field>
        <div className="flex items-center gap-2">
          <svg width="16" height="16" viewBox="0 0 24 24" className="text-white/70">
            <path
              fill="currentColor"
              d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4l-8 5L4 8V6l8 5l8-5z"
            />
          </svg>
          <TextInput type="email" placeholder="Enter your email" aria-label="Email" />
        </div>
      </Field>

{/* India phone IN +91 */}
      <Field>
        <div className="flex items-center gap-2">
          <div className="flex items-center gap-2 rounded-xl bg-black/40 px-2 py-1.5 ring-1 ring-white/10">
            <span className="text-white/80 text-xs">IN</span>
            <span className="text-white text-sm font-medium">+91</span>
          </div>
          <TextInput inputMode="tel" placeholder="(775) 351-6501" aria-label="Phone number (India +91)" />
        </div>
      </Field>

<button
        type="submit"
        className="mt-2 w-full rounded-2xl bg-white/70 px-4 py-3 text-center font-medium text-black hover:bg-white"
      >
        Create an account
      </button>

{/* Divider */}
      <div className="relative my-4">
        <div className="h-px bg-white/15" />
        <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-transparent px-2 text-xs text-white/70">
          OR SIGN IN WITH
        </span>
      </div>

{/* Google button with colored G */}
      <button
        type="button"
        className="mx-auto flex w-full items-center justify-center gap-2 rounded-2xl bg-black/40 px-4 py-3 text-white ring-1 ring-white/10"
      >
        <svg width="18" height="18" viewBox="0 0 48 48" aria-hidden="true">
          <path
            fill="#FFC107"
            d="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8a12 12 0 1 1 0-24c3.059 0 5.842 1.161 7.961 3.059l5.657-5.657C34.346 6.053 29.383 4 24 4 12.954 4 4 12.954 4 24s8.954 20 20 20s20-8.954 20-20c0-1.341-.138-2.651-.389-3.917z"
          />
          <path
            fill="#FF3D00"
            d="M6.306 14.691l6.571 4.817C14.21 16.041 18.69 12 24 12c3.059 0 5.842 1.161 7.961 3.059l5.657-5.657C34.346 6.053 29.383 4 24 4C16.318 4 9.653 8.337 6.306 14.691z"
          />
          <path
            fill="#4CAF50"
            d="M24 44c5.265 0 10.09-2.015 13.73-5.292l-6.342-5.366C29.252 34.551 26.774 36 24 36c-5.199 0-9.613-3.316-11.271-7.947l-6.52 5.025C9.495 40.097 16.24 44 24 44z"
          />
          <path
            fill="#1976D2"
            d="M43.611 20.083H42V20H24v8h11.303c-.794 2.24-2.28 4.182-4.217 5.567l.003-.002l6.342 5.366C40.93 35.748 44 30.445 44 24c0-1.341-.138-2.651-.389-3.917z"
          />
        </svg>
        <span className="font-medium">sign in with Google</span>
      </button>

<div className="mt-3 text-center text-[11px] text-white/70">
        By creating an account, you agree to our Terms & Service
      </div>
    </form>
  )
}

function SigninForm() {
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault()
      }}
    >
      <Field>
        <TextInput type="email" placeholder="you@example.com" aria-label="Email" />
      </Field>
      <Field>
        <TextInput type="password" placeholder="••••••••" aria-label="Password" />
      </Field>
      <button
        type="submit"
        className="mt-2 w-full rounded-2xl bg-white/70 px-4 py-3 text-center font-medium text-black hover:bg-white"
      >
        Continue
      </button>
    </form>
  )
}
[V0_FILE]typescriptreact:file="components/signup/progress.tsx" isMerged="true"
export function SignUpProgress({ step, total }: { step: number; total: number }) {
  return (
    <div className="mb-6 text-sm text-muted-foreground" aria-live="polite">
      Step {step} of {total}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/signup/story-copy.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"

export function StoryCopy({ section }: { section?: string }) {
  const [text, setText] = useState<string>("")

useEffect(() => {
    let active = true
    fetch("/content/signup-full-story.txt", { cache: "no-store" })
      .then((r) => r.text())
      .then((t) => {
        if (!active) return
        // If a section label is provided, try to slice that part; otherwise show full.
        if (section) {
          // naive split by section headings in the doc if present
          const parts = t.split(new RegExp(`\\n#+\\s*${section}\\s*\\n`, "i"))
          if (parts.length > 1) {
            // take text after section until next heading
            const tail = parts[1]
            const next = tail.split(/\n#+\s*[A-Z].*/)[0]
            setText(next.trim())
            return
          }
        }
        setText(t.trim())
      })
      .catch(() => setText(""))
    return () => {
      active = false
    }
  }, [section])

if (!text) return null
  return <div className="prose prose-sm max-w-none whitespace-pre-wrap text-pretty">{text}</div>
}
[V0_FILE]typescriptreact:file="components/story-card.tsx" isMerged="true"
"use client"

import { Heart, MessageCircle, Share2 } from "lucide-react"
import { useState } from "react"

interface StoryCardProps {
  title: string
  content: string
  author: {
    name: string
    location: string
    experience: string
  }
  skills: string[]
  category: string
  likes?: number
}

export default function StoryCard({ title, content, author, skills, category, likes = 0 }: StoryCardProps) {
  const [isLiked, setIsLiked] = useState(false)
  const [likeCount, setLikeCount] = useState(likes)

const handleLike = () => {
    if (isLiked) {
      setLikeCount(likeCount - 1)
    } else {
      setLikeCount(likeCount + 1)
    }
    setIsLiked(!isLiked)
  }

return (
    <div
      className="bg-background/70 backdrop-blur-sm rounded-lg p-6 mb-4 border transition-all live-border hover:shadow-[0_0_28px_-10px_hsl(var(--accent)/0.5)]"
      style={{ borderColor: "hsl(var(--border))" }}
    >
      <h3 className="text-lg font-semibold text-foreground mb-3">{title}</h3>

<p className="text-foreground/70 text-sm mb-4 leading-relaxed">{content}</p>

<div className="flex flex-wrap gap-2 mb-4">
        {skills.map((skill, index) => (
          <span
            key={index}
            className="px-3 py-1 rounded-full text-xs font-medium bg-background/60 text-foreground/80 border"
            style={{ borderColor: "hsl(var(--border))" }}
          >
            {skill}
          </span>
        ))}
      </div>

<div className="flex items-center justify-between pt-4 border-t" style={{ borderColor: "hsl(var(--border))" }}>
        <div>
          <p className="text-foreground font-medium text-sm">{author.name}</p>
          <p className="text-foreground/60 text-xs">
            {author.location} • {author.experience}
          </p>
        </div>

<div className="flex items-center gap-1">
          <span
            className="px-3 py-1 rounded-full text-xs font-medium bg-background/60 text-foreground/70 border"
            style={{ borderColor: "hsl(var(--border))" }}
          >
            {category}
          </span>
        </div>
      </div>

<div className="flex items-center gap-4 mt-4 pt-4 border-t" style={{ borderColor: "hsl(var(--border))" }}>
        <button
          onClick={handleLike}
          className={`flex items-center gap-2 text-sm transition-colors ${
            isLiked ? "text-[hsl(var(--accent))] pulse-accent" : "text-foreground/70 hover:text-foreground/90"
          }`}
          aria-pressed={isLiked}
        >
          <Heart className={`h-4 w-4 ${isLiked ? "fill-[hsl(var(--accent))]" : ""}`} />
          <span>{likeCount}</span>
        </button>

<button className="flex items-center gap-2 text-sm text-foreground/70 hover:text-foreground/90 transition-colors">
          <Share2 className="h-4 w-4" />
        </button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/story-feed.tsx" isMerged="true"
"use client"

import { useEffect } from "react"
import useSWR from "swr"
import { cn } from "@/lib/utils"

type Story = {
  id: string
  title: string
  content?: string
  author_name?: string
  author_avatar_url?: string | null
  created_at?: string
}

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

export default function StoryFeed({ className }: { className?: string }) {
  const { data, isLoading, mutate } = useSWR<{ stories: Story[] }>("/api/stories", fetcher, {
    revalidateOnFocus: false,
  })

useEffect(() => {
    const handler = () => mutate()
    window.addEventListener("stories:refresh", handler)
    return () => window.removeEventListener("stories:refresh", handler)
  }, [mutate])

const stories = data?.stories ?? []

return (
    <div className={cn("w-full h-full overflow-y-auto", className)} aria-label="Latest stories">
      <ul className="flex flex-col gap-4 p-4">
        {(isLoading ? Array.from({ length: 4 }) : stories).map((s: any, idx: number) => (
          <li
            key={s?.id || idx}
            className="rounded-2xl border bg-background/60 text-foreground/90 hover:bg-background transition-colors"
          >
            <div className="p-4">
              <h3 className="text-base font-semibold leading-6">{isLoading ? "Loading..." : s.title}</h3>
              {!isLoading && (s.author_name || s.created_at) ? (
                <p className="mt-1 text-xs text-foreground/60">
                  {s.author_name ? s.author_name : "Anonymous"}
                  {s.author_name && s.created_at ? " • " : ""}
                  {s.created_at ? new Date(s.created_at).toLocaleString() : ""}
                </p>
              ) : null}
              {!isLoading && s.content ? (
                <p className="mt-2 text-sm text-foreground/80 line-clamp-3">{s.content}</p>
              ) : null}
            </div>
          </li>
        ))}
        {!isLoading && stories.length === 0 ? (
          <li className="rounded-2xl border bg-background/60 p-4 text-sm text-foreground/60">
            No stories yet. Be the first to share!
          </li>
        ) : null}
      </ul>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/talent-card.tsx" isMerged="true"
"use client"

import { Star, MapPin, DollarSign, Clock, CheckCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import Image from "next/image"

interface TalentCardProps {
  talent: {
    id: number
    name: string
    title: string
    skills: string[]
    rate: number
    availability: string
    location: string
    rating: number
    projectsCompleted: number
    verified: boolean
    image: string
  }
  onViewProfile: () => void
}

export default function TalentCard({ talent, onViewProfile }: TalentCardProps) {
  return (
    <div className="bg-white/5 border border-white/10 rounded-lg p-6 hover:bg-white/10 transition-all hover:border-white/20">
      <div className="flex items-start gap-4 mb-4">
        <div className="relative">
          <Image
            src={talent.image || "/placeholder.svg"}
            alt={talent.name}
            width={64}
            height={64}
            className="rounded-full"
          />
          {talent.verified && (
            <div className="absolute -bottom-1 -right-1 bg-green-500 rounded-full p-1">
              <CheckCircle size={16} className="text-white" />
            </div>
          )}
        </div>
        <div className="flex-1">
          <h3 className="text-xl font-semibold text-white mb-1">{talent.name}</h3>
          <p className="text-white/70 font-mono text-sm">{talent.title}</p>
        </div>
      </div>

{/* Skills */}
      <div className="mb-4">
        <div className="flex flex-wrap gap-2">
          {talent.skills.slice(0, 4).map((skill) => (
            <span key={skill} className="px-3 py-1 bg-white/10 text-white/90 rounded-full text-xs font-mono">
              {skill}
            </span>
          ))}
          {talent.skills.length > 4 && (
            <span className="px-3 py-1 bg-white/10 text-white/90 rounded-full text-xs font-mono">
              +{talent.skills.length - 4} more
            </span>
          )}
        </div>
      </div>

{/* Stats */}
      <div className="space-y-2 mb-4">
        <div className="flex items-center gap-2 text-white/70 text-sm">
          <Star size={16} className="text-yellow-500 fill-yellow-500" />
          <span className="font-semibold text-white">{talent.rating}</span>
          <span>({talent.projectsCompleted} projects)</span>
        </div>
        <div className="flex items-center gap-2 text-white/70 text-sm">
          <DollarSign size={16} />
          <span>${talent.rate}/hr</span>
        </div>
        <div className="flex items-center gap-2 text-white/70 text-sm">
          <Clock size={16} />
          <span>{talent.availability}</span>
        </div>
        <div className="flex items-center gap-2 text-white/70 text-sm">
          <MapPin size={16} />
          <span>{talent.location}</span>
        </div>
      </div>

{/* Action Button */}
      <Button onClick={onViewProfile} className="w-full bg-white text-black hover:bg-gray-100 font-mono font-semibold">
        View Profile
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/talent-filters.tsx" isMerged="true"
"use client"

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

interface TalentFiltersProps {
  filters: {
    skills: string[]
    minRate: number
    maxRate: number
    availability: string
    location: string
    minRating: number
    languages: string[]
  }
  setFilters: (filters: any) => void
}

export default function TalentFilters({ filters, setFilters }: TalentFiltersProps) {
  return (
    <div className="bg-white/5 border border-white/10 rounded-lg p-6">
      <h3 className="text-xl font-semibold text-white mb-6">Filter Talent</h3>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {/* Rate Range */}
        <div className="space-y-2">
          <Label className="text-white/90">Hourly Rate</Label>
          <div className="flex gap-2 items-center">
            <Input
              type="number"
              placeholder="Min"
              value={filters.minRate}
              onChange={(e) => setFilters({ ...filters, minRate: Number(e.target.value) })}
              className="bg-white/5 border-white/10 text-white"
            />
            <span className="text-white/50">-</span>
            <Input
              type="number"
              placeholder="Max"
              value={filters.maxRate}
              onChange={(e) => setFilters({ ...filters, maxRate: Number(e.target.value) })}
              className="bg-white/5 border-white/10 text-white"
            />
          </div>
        </div>

{/* Availability */}
        <div className="space-y-2">
          <Label className="text-white/90">Availability</Label>
          <Select
            value={filters.availability}
            onValueChange={(value) => setFilters({ ...filters, availability: value })}
          >
            <SelectTrigger className="bg-white/5 border-white/10 text-white">
              <SelectValue placeholder="Select availability" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All</SelectItem>
              <SelectItem value="Available">Available</SelectItem>
              <SelectItem value="Part-time">Part-time</SelectItem>
              <SelectItem value="Busy">Busy</SelectItem>
            </SelectContent>
          </Select>
        </div>

{/* Location */}
        <div className="space-y-2">
          <Label className="text-white/90">Location</Label>
          <Input
            type="text"
            placeholder="City, State, or Remote"
            value={filters.location}
            onChange={(e) => setFilters({ ...filters, location: e.target.value })}
            className="bg-white/5 border-white/10 text-white"
          />
        </div>

{/* Minimum Rating */}
        <div className="space-y-2">
          <Label className="text-white/90">Minimum Rating</Label>
          <Select
            value={filters.minRating.toString()}
            onValueChange={(value) => setFilters({ ...filters, minRating: Number(value) })}
          >
            <SelectTrigger className="bg-white/5 border-white/10 text-white">
              <SelectValue placeholder="Any rating" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="0">Any rating</SelectItem>
              <SelectItem value="4">4+ stars</SelectItem>
              <SelectItem value="4.5">4.5+ stars</SelectItem>
              <SelectItem value="4.8">4.8+ stars</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/talent-profile-modal.tsx" isMerged="true"
"use client"

import { X, Star, MapPin, DollarSign, Clock, CheckCircle, MessageCircle, UserPlus, Globe } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useEffect, useRef } from "react"
import Image from "next/image"

interface TalentProfileModalProps {
  talent: {
    id: number
    name: string
    title: string
    skills: string[]
    rate: number
    availability: string
    location: string
    rating: number
    projectsCompleted: number
    verified: boolean
    languages: string[]
    bio: string
    portfolio: Array<{ title: string; description: string }>
    image: string
  }
  onClose: () => void
}

export default function TalentProfileModal({ talent, onClose }: TalentProfileModalProps) {
  const modalRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose()
    }

const handleOutsideClick = (e: MouseEvent) => {
      if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
        onClose()
      }
    }

window.addEventListener("keydown", handleEscape)
    document.addEventListener("mousedown", handleOutsideClick)
    document.body.style.overflow = "hidden"

return (
    <div className="fixed inset-0 z-50 flex items-start md:items-center justify-center p-4 bg-black/80 backdrop-blur-sm overflow-y-auto">
      <div
        ref={modalRef}
        className="relative w-full max-w-4xl bg-black border border-white/10 rounded-[16px] shadow-2xl my-4 md:my-0"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header */}
        <div className="sticky top-0 z-10 flex items-center justify-between p-6 bg-black rounded-t-[16px] border-b border-white/10">
          <h2 className="text-2xl font-semibold text-white">Talent Profile</h2>
          <button
            onClick={onClose}
            className="p-2 text-white/70 hover:text-white rounded-full hover:bg-white/10 transition-colors"
            aria-label="Close"
          >
            <X size={20} />
          </button>
        </div>

<div className="p-6 space-y-6">
          {/* Profile Header */}
          <div className="flex flex-col md:flex-row gap-6">
            <div className="relative">
              <Image
                src={talent.image || "/placeholder.svg"}
                alt={talent.name}
                width={120}
                height={120}
                className="rounded-full"
              />
              {talent.verified && (
                <div className="absolute -bottom-2 -right-2 bg-green-500 rounded-full p-2">
                  <CheckCircle size={24} className="text-white" />
                </div>
              )}
            </div>
            <div className="flex-1">
              <h3 className="text-3xl font-bold text-white mb-2">{talent.name}</h3>
              <p className="text-xl text-white/70 font-mono mb-4">{talent.title}</p>
              <div className="flex flex-wrap gap-4 mb-4">
                <div className="flex items-center gap-2 text-white/70">
                  <Star size={20} className="text-yellow-500 fill-yellow-500" />
                  <span className="font-semibold text-white text-lg">{talent.rating}</span>
                  <span>({talent.projectsCompleted} projects)</span>
                </div>
                <div className="flex items-center gap-2 text-white/70">
                  <DollarSign size={20} />
                  <span className="text-lg">${talent.rate}/hr</span>
                </div>
                <div className="flex items-center gap-2 text-white/70">
                  <Clock size={20} />
                  <span>{talent.availability}</span>
                </div>
              </div>
              <div className="flex gap-3">
                <Button className="bg-white text-black hover:bg-gray-100 font-mono font-semibold">
                  <MessageCircle size={18} className="mr-2" />
                  Message
                </Button>
                <Button className="bg-white/10 text-white hover:bg-white/20 border border-white/10 font-mono font-semibold">
                  <UserPlus size={18} className="mr-2" />
                  Invite to Project
                </Button>
              </div>
            </div>
          </div>

{/* Bio */}
          <div>
            <h4 className="text-xl font-semibold text-white mb-3">About</h4>
            <p className="text-white/80 leading-relaxed">{talent.bio}</p>
          </div>

{/* Skills */}
          <div>
            <h4 className="text-xl font-semibold text-white mb-3">Skills</h4>
            <div className="flex flex-wrap gap-2">
              {talent.skills.map((skill) => (
                <span key={skill} className="px-4 py-2 bg-white/10 text-white rounded-lg font-mono">
                  {skill}
                </span>
              ))}
            </div>
          </div>

{/* Languages & Location */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <h4 className="text-xl font-semibold text-white mb-3">Languages</h4>
              <div className="flex flex-wrap gap-2">
                {talent.languages.map((lang) => (
                  <span key={lang} className="flex items-center gap-2 px-3 py-2 bg-white/5 text-white/80 rounded-lg">
                    <Globe size={16} />
                    {lang}
                  </span>
                ))}
              </div>
            </div>
            <div>
              <h4 className="text-xl font-semibold text-white mb-3">Location</h4>
              <div className="flex items-center gap-2 text-white/80">
                <MapPin size={20} />
                <span className="text-lg">{talent.location}</span>
              </div>
            </div>
          </div>

{/* Portfolio */}
          <div>
            <h4 className="text-xl font-semibold text-white mb-3">Portfolio Highlights</h4>
            <div className="space-y-4">
              {talent.portfolio.map((project, index) => (
                <div key={index} className="bg-white/5 border border-white/10 rounded-lg p-4">
                  <h5 className="text-lg font-semibold text-white mb-2">{project.title}</h5>
                  <p className="text-white/70">{project.description}</p>
                </div>
              ))}
            </div>
          </div>

{/* Verification Badge */}
          <div className="bg-green-500/10 border border-green-500/20 rounded-lg p-4">
            <div className="flex items-start gap-3">
              <CheckCircle size={24} className="text-green-500 flex-shrink-0 mt-1" />
              <div>
                <h5 className="text-lg font-semibold text-white mb-1">Verified Professional</h5>
                <p className="text-white/70 text-sm">
                  This talent has been verified through skill assessments, peer reviews, and proven project delivery. No
                  degree required—just real-world results.
                </p>
              </div>
            </div>
          </div>
        </div>

{/* Mobile close button */}
        <div className="md:hidden p-4 border-t border-white/10">
          <button
            onClick={onClose}
            className="w-full py-3 px-4 bg-white/10 hover:bg-white/20 text-white rounded-lg font-mono text-sm transition-colors"
          >
            Close
          </button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true"
'use client'

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

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/ui/3d-testimonails.tsx" isMerged="true"
"use client"

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

type MarqueeProps = {
  children: React.ReactNode
  className?: string
  vertical?: boolean
  reverse?: boolean
  pauseOnHover?: boolean
  repeat?: number
}

export function Marquee({
  children,
  className,
  vertical = false,
  reverse = false,
  pauseOnHover = false,
  repeat = 2,
}: MarqueeProps) {
  const items = Array.from({ length: Math.max(1, repeat) })

return (
    <div className={cn("relative overflow-hidden", vertical ? "h-96" : "w-full", className)}>
      <div
        className={cn(
          "flex",
          vertical ? "flex-col" : "flex-row",
          "gap-4 motion-reduce:animate-none",
          // animation classes
          vertical
            ? reverse
              ? "animate-marquee-y-reverse"
              : "animate-marquee-y"
            : reverse
              ? "animate-marquee-x-reverse"
              : "animate-marquee-x",
          pauseOnHover && "hover:[animation-play-state:paused]",
        )}
        // Default duration if not provided via [--duration]
        style={
          {
            // @ts-ignore
            "--duration": "30s",
          } as React.CSSProperties
        }
      >
        {items.map((_, i) => (
          <div key={i} className={cn(vertical ? "flex flex-col gap-4" : "flex flex-row gap-4")} aria-hidden={i > 0}>
            {children}
          </div>
        ))}
      </div>

import * as React from 'react'
import * as AccordionPrimitive from '@radix-ui/react-accordion'
import { ChevronDownIcon } from 'lucide-react'

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

function Accordion({
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
}

function AccordionItem({
  className,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
  return (
    <AccordionPrimitive.Item
      data-slot="accordion-item"
      className={cn('border-b last:border-b-0', className)}
      {...props}
    />
  )
}

function AccordionTrigger({
  className,
  children,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
  return (
    <AccordionPrimitive.Header className="flex">
      <AccordionPrimitive.Trigger
        data-slot="accordion-trigger"
        className={cn(
          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
          className,
        )}
        {...props}
      >
        {children}
        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
      </AccordionPrimitive.Trigger>
    </AccordionPrimitive.Header>
  )
}

function AccordionContent({
  className,
  children,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
  return (
    <AccordionPrimitive.Content
      data-slot="accordion-content"
      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
      {...props}
    >
      <div className={cn('pt-0 pb-4', className)}>{children}</div>
    </AccordionPrimitive.Content>
  )
}

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
[V0_FILE]typescriptreact:file="components/ui/avatar.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as AvatarPrimitive from '@radix-ui/react-avatar'

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

function Avatar({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
  return (
    <AvatarPrimitive.Root
      data-slot="avatar"
      className={cn(
        'relative flex size-8 shrink-0 overflow-hidden rounded-full',
        className,
      )}
      {...props}
    />
  )
}

function AvatarImage({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
  return (
    <AvatarPrimitive.Image
      data-slot="avatar-image"
      className={cn('aspect-square size-full', className)}
      {...props}
    />
  )
}

function AvatarFallback({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
  return (
    <AvatarPrimitive.Fallback
      data-slot="avatar-fallback"
      className={cn(
        'bg-muted flex size-full items-center justify-center rounded-full',
        className,
      )}
      {...props}
    />
  )
}

export { Avatar, AvatarImage, AvatarFallback }
[V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true"
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 badgeVariants = cva(
  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden',
  {
    variants: {
      variant: {
        default:
          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
        secondary:
          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
        destructive:
          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

function Badge({
  className,
  variant,
  asChild = false,
  ...props
}: React.ComponentProps<'span'> &
  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : 'span'

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

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true"
import type * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"
import { createClient } from "@/lib/supabase/client"

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, createClient }
[V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true"
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/input.tsx" isMerged="true"
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" isMerged="true"
'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/popover.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as PopoverPrimitive from "@radix-ui/react-popover"
import { cn } from "@/lib/utils"

const Popover = PopoverPrimitive.Root
const PopoverTrigger = PopoverPrimitive.Trigger

const PopoverContent = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = "center", sideOffset = 8, ...props }, ref) => (
  <PopoverPrimitive.Portal>
    <PopoverPrimitive.Content
      ref={ref}
      align={align}
      sideOffset={sideOffset}
      className={cn(
        // Base layer + panel look; use design tokens
        "z-50 rounded-md border bg-popover text-popover-foreground shadow-md outline-none",
        // Animations
        "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",
        // Default width/padding; callers can override
        "w-72 p-4",
        className,
      )}
      {...props}
    />
  </PopoverPrimitive.Portal>
))
PopoverContent.displayName = PopoverPrimitive.Content.displayName

export { Popover, PopoverTrigger, PopoverContent }
[V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true"
"use client"

import type * 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-[var(--radix-select-content-available-height)] min-w-[8rem] origin-[var(--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/social-links.tsx" isMerged="true"
"use client"

import * as React from "react"
import { motion, AnimatePresence } from "framer-motion"
import { cn } from "@/lib/utils"

interface Social {
  name: string
  image: string
  url?: string
}

interface SocialLinksProps extends React.HTMLAttributes<HTMLDivElement> {
  socials: Social[]
}

export function SocialLinks({ socials, className, ...props }: SocialLinksProps) {
  const [hoveredSocial, setHoveredSocial] = React.useState<string | null>(null)
  const [rotation, setRotation] = React.useState<number>(0)
  const [clicked, setClicked] = React.useState<boolean>(false)

const animation = {
    scale: clicked ? [1, 1.3, 1] : 1,
    transition: { duration: 0.3 },
  }

React.useEffect(() => {
    const handleClick = () => {
      setClicked(true)
      setTimeout(() => {
        setClicked(false)
      }, 200)
    }
    window.addEventListener("click", handleClick)
    return () => window.removeEventListener("click", handleClick)
  }, [clicked])

const handleSocialClick = (social: Social) => {
    if (social.url) {
      window.open(social.url, "_blank", "noopener,noreferrer")
    }
    setClicked(true)
  }

return (
    <div className={cn("flex items-center justify-center gap-0", className)} {...props}>
      {socials.map((social, index) => (
        <div
          className={cn(
            "relative cursor-pointer px-5 py-2 transition-opacity duration-200 text-foreground shadow-none opacity-100",
            hoveredSocial && hoveredSocial !== social.name ? "opacity-50" : "opacity-100",
          )}
          key={index}
          onMouseEnter={() => {
            setHoveredSocial(social.name)
            setRotation(Math.random() * 20 - 10)
          }}
          onMouseLeave={() => setHoveredSocial(null)}
          onClick={() => handleSocialClick(social)}
          role="button"
          tabIndex={0}
          onKeyDown={(e) => {
            if (e.key === "Enter" || e.key === " ") {
              handleSocialClick(social)
            }
          }}
        >
          <span className="block text-lg font-medium">{social.name}</span>
          <AnimatePresence>
            {hoveredSocial === social.name && (
              <motion.div
                className="absolute bottom-0 left-0 right-0 flex h-full w-full items-center justify-center"
                animate={animation}
              >
                <motion.img
                  key={social.name}
                  src={social.image}
                  alt={social.name}
                  className="size-16"
                  initial={{
                    y: -40,
                    rotate: rotation,
                    opacity: 0,
                    filter: "blur(2px)",
                  }}
                  animate={{ y: -50, opacity: 1, filter: "blur(0px)" }}
                  exit={{ y: -40, opacity: 0, filter: "blur(2px)" }}
                  transition={{ duration: 0.2 }}
                />
              </motion.div>
            )}
          </AnimatePresence>
        </div>
      ))}
    </div>
  )
}

export default SocialLinks
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isMerged="true"
"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}
    />
  )
}

class TabsErrorBoundary extends React.Component<{ fallback: React.ReactNode }, { hasError: boolean }> {
  constructor(props: { fallback: React.ReactNode }) {
    super(props)
    this.state = { hasError: false }
  }
  static getDerivedStateFromError() {
    return { hasError: true }
  }
  render() {
    if (this.state.hasError) {
      return this.props.fallback
    }
    return this.props.children
  }
}

// local error boundary to catch Radix context error
class TabsContentBoundary extends React.Component<{ fallback: React.ReactNode }> {
  state = { hasError: false }
  static getDerivedStateFromError() {
    return { hasError: true }
  }
  componentDidCatch() {
    // no-op; prevents crash while keeping UI responsive
  }
  render() {
    if ((this.state as any).hasError) return this.props.fallback
    return this.props.children as React.ReactElement
  }
}

class TabsContentErrorBoundary extends React.Component<
  { className?: string; children?: React.ReactNode },
  { hasError: boolean }
> {
  constructor(props: any) {
    super(props)
    this.state = { hasError: false }
  }
  static getDerivedStateFromError() {
    return { hasError: true }
  }
  componentDidCatch(error: any) {
    // Optional: debug once, then remove if noisy
    // console.log("[v0] TabsContent boundary caught:", error?.message)
  }
  render() {
    if (this.state.hasError) {
      // Fallback: render a simple container so layout remains intact
      return <div className={this.props.className}>{this.props.children}</div>
    }
    return this.props.children as any
  }
}

// Assuming the original file imports TabsPrimitive from "@radix-ui/react-tabs"
// and re-exports a TabsContent. We provide a safe wrapper here.
// If your file names it differently, adapt the identifier accordingly.

export const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(function SafeTabsContent({ className, children, ...props }, ref) {
  return (
    <TabsPrimitive.Root data-slot="tabs" className={cn("flex flex-col gap-2", className)}>
      <TabsContentErrorBoundary className={className}>
        <TabsPrimitive.Content ref={ref} className={className} {...props}>
          {children}
        </TabsPrimitive.Content>
      </TabsContentErrorBoundary>
    </TabsPrimitive.Root>
  )
})

export { Tabs, TabsList, TabsTrigger }
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true"
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/video-scroll-hero.tsx" isMerged="true"
"use client"

interface VideoScrollHeroProps {
  videoSrc?: string
  className?: string
}

export function VideoScrollHero({
  videoSrc = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
  className = "",
}: VideoScrollHeroProps) {
  return (
    <div
      className={`relative w-full flex md:items-start md:justify-end items-center justify-center md:order-none order-[-1] ${className}`}
    >
      
    </div>
  )
}

export default VideoScrollHero
[V0_FILE]typescriptreact:file="components/vibe-coding-tweets-section.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"

interface Tweet {
  text: string
  handle: string
  name: string
  url: string
  profileImage: string
  isHighlighted?: boolean
  isRetweet?: boolean
  originalTweet?: {
    text: string
    handle: string
    name: string
  }
  stats?: {
    views?: string
    likes?: string
    retweets?: string
  }
}

const tweets: Tweet[] = [
  {
    text: "I spent 4 years getting a CS degree and $80k in debt. My friend learned to code in 6 months and got hired through @Shiftza for the same salary. The system is broken, but platforms like this are fixing it.",
    handle: "@sarah_codes",
    name: "Sarah Chen",
    url: "https://twitter.com/sarah_codes",
    profileImage: "/images/profiles/bnj.jpg",
    stats: {
      views: "125K",
      likes: "4.2K",
      retweets: "892",
    },
  },
  {
    text: "Just got my 3rd project through Shiftza. No degree, no problem. Companies care about what I can build, not where I went to school. This is the future of work.",
    handle: "@dev_priya",
    name: "Priya Sharma",
    url: "https://twitter.com/dev_priya",
    profileImage: "/images/profiles/tom.jpg",
    stats: {
      views: "89K",
      likes: "2.8K",
      retweets: "456",
    },
  },
  {
    text: "As a hiring manager, Shiftza changed everything. We hire based on portfolios and skills tests, not degrees. Found 3 amazing developers who traditional recruiting would've filtered out.",
    handle: "@tech_recruiter",
    name: "Mike Johnson",
    url: "https://twitter.com/tech_recruiter",
    profileImage: "/images/profiles/kitze.jpg",
    stats: {
      views: "156K",
      likes: "5.1K",
      retweets: "1.2K",
    },
  },
  {
    text: "Self-taught designer here. Shiftza verified my skills through actual work, not a piece of paper. Now I'm working with startups I never thought would give me a chance.",
    handle: "@design_maya",
    name: "Maya Patel",
    url: "https://twitter.com/design_maya",
    profileImage: "/images/profiles/ian.jpg",
    stats: {
      views: "67K",
      likes: "1.9K",
      retweets: "234",
    },
  },
  {
    text: "Dropped out of college to learn web dev. Best decision ever. Shiftza helped me build a portfolio that speaks louder than any degree ever could.",
    handle: "@webdev_alex",
    name: "Alex Rodriguez",
    url: "https://twitter.com/webdev_alex",
    profileImage: "/images/profiles/bnj.jpg",
    stats: {
      views: "94K",
      likes: "3.4K",
      retweets: "678",
    },
  },
  {
    text: "Our startup can't afford to hire full-time. Shiftza lets us work with skilled professionals project-by-project. No layoffs, no guilt, just flexible collaboration.",
    handle: "@startup_founder",
    name: "Emma Wilson",
    url: "https://twitter.com/startup_founder",
    profileImage: "/images/profiles/anuj.jpg",
    stats: {
      likes: "2.1K",
      retweets: "445",
    },
  },
  {
    text: "Skills > Degrees. Finally a platform that gets it. Shiftza is what the job market should've been all along.",
    handle: "@tech_advocate",
    name: "Raj Kumar",
    url: "https://twitter.com/tech_advocate",
    profileImage: "/images/profiles/anushk.jpg",
    stats: {
      views: "45K",
      likes: "1.6K",
    },
  },
]

interface VibeCodingTweetsSectionProps {
  onOpenInstall?: () => void
}

export default function VibeCodingTweetsSection({ onOpenInstall }: VibeCodingTweetsSectionProps) {
  const [expandedTweets, setExpandedTweets] = useState<Set<number>>(new Set())

const toggleExpanded = (index: number, e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    setExpandedTweets((prev) => {
      const newSet = new Set(prev)
      if (newSet.has(index)) {
        newSet.delete(index)
      } else {
        newSet.add(index)
      }
      return newSet
    })
  }

const truncateText = (text: string, maxLength = 200) => {
    if (text.length <= maxLength) return text
    return text.substring(0, maxLength).trim() + "..."
  }

return (
    <section className="py-16 md:py-24">
      <div className="max-w-6xl mx-auto px-4 sm:px-6">
        {/* Header - Outside gradient like other sections */}
        <div className="text-center mb-6 md:mb-12 px-4">
          <h2
            className="mb-6 font-semibold"
            style={{
              backgroundImage: "linear-gradient(rgb(245, 245, 245), rgb(245, 245, 245) 29%, rgb(153, 153, 153))",
              color: "transparent",
              fontFamily: "GeistSans, sans-serif",
              fontSize: "clamp(32px, 6vw, 52px)",
              fontWeight: 600,
              letterSpacing: "clamp(-1.5px, -0.04em, -2.08px)",
              lineHeight: "1.15",
              textAlign: "center",
              WebkitBackgroundClip: "text",
              backgroundClip: "text",
            }}
          >
            Skills-First Hiring Is Here — And It's Working.
          </h2>
          <p
            className="max-w-3xl mx-auto text-white/80 mb-4"
            style={{
              fontFamily: "GeistMono, monospace",
              fontSize: "clamp(16px, 3vw, 20px)",
              lineHeight: "1.4",
              textAlign: "center",
            }}
          >
            Don't take our word for it — this is what professionals and companies are saying.
          </p>
        </div>

{/* Gradient Container - Matching other sections */}
        <div className="flex justify-center">
          <div
            className="gradient-container max-w-[1296px] w-full relative"
            style={{
              backgroundImage: 'url("/images/vibes-bg.png")',
              backgroundSize: "cover",
              backgroundPosition: "center",
              backgroundRepeat: "no-repeat",
            }}
          >
            {/* Dark Overlay */}
            <div className="absolute inset-0 bg-black/35 rounded-[16px]"></div>

{/* Noise Overlay */}
            <div className="noise-texture"></div>

{/* Content */}
            <div className="relative z-10 pt-6 sm:pt-8 md:pt-12 pb-6 sm:pb-8 md:pb-12 px-4 sm:px-6 md:px-12">
              {/* Enhanced Tweets Layout - Making 7 tweets feel substantial */}
              <div className="space-y-6 sm:space-y-8">
                {/* Featured Tweet - Most relevant */}
                <div className="max-w-4xl mx-auto">
                  <a
                    href={tweets[0].url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="group block relative transition-all duration-300 cursor-pointer rounded-[16px] sm:rounded-[20px] p-3 sm:p-6 md:p-10 bg-white/15 border border-white/30 sm:border-2 hover:border-white/50 hover:bg-white/20 backdrop-blur-sm"
                  >
                    {/* Tweet Content */}
                    <div className="mb-3 sm:mb-4 md:mb-8">
                      <p
                        className="text-white text-sm sm:text-base md:text-lg leading-relaxed"
                        style={{
                          fontFamily: "GeistMono, monospace",
                          lineHeight: "1.6",
                          textShadow: "0 1px 2px rgba(0,0,0,0.5)",
                        }}
                      >
                        {expandedTweets.has(0)
                          ? tweets[0].text.split("\n").map((line, i) => (
                              <span key={i}>
                                {line}
                                {i < tweets[0].text.split("\n").length - 1 && <br />}
                              </span>
                            ))
                          : truncateText(tweets[0].text, 150)}
                        {tweets[0].text.length > 150 && (
                          <button
                            onClick={(e) => toggleExpanded(0, e)}
                            className="ml-2 text-white/70 hover:text-white underline text-sm"
                            style={{ fontFamily: "GeistMono, monospace" }}
                          >
                            {expandedTweets.has(0) ? "show less" : "read more"}
                          </button>
                        )}
                      </p>
                    </div>

{/* Author Info - Enhanced */}
                    <div className="flex items-center justify-between flex-col sm:flex-row gap-2 sm:gap-4 sm:gap-0">
                      <div className="flex items-center gap-2 sm:gap-3 md:gap-4 w-full sm:w-auto">
                        <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-14 md:h-14 rounded-full overflow-hidden border border-white/30 sm:border-2 bg-white/10">
                          <img
                            src={tweets[0].profileImage || "/placeholder.svg"}
                            alt={`${tweets[0].name} profile`}
                            className="w-full h-full object-cover"
                          />
                        </div>
                        <div>
                          <p
                            className="text-white font-semibold text-sm sm:text-base md:text-lg"
                            style={{
                              fontFamily: 'var(--font-geist-sans), "GeistSans", sans-serif',
                              textShadow: "0 1px 2px rgba(0,0,0,0.5)",
                            }}
                          >
                            {tweets[0].name}
                          </p>
                          <p
                            className="text-white/70 text-xs sm:text-sm"
                            style={{
                              fontFamily: "GeistMono, monospace",
                              textShadow: "0 1px 2px rgba(0,0,0,0.5)",
                            }}
                          >
                            {tweets[0].handle}
                          </p>
                        </div>
                      </div>

{/* Enhanced engagement indicators with better visual prominence */}
                      <div className="flex items-center gap-3 sm:gap-4 md:gap-6 text-white/60 w-full sm:w-auto justify-center sm:justify-end">
                        {tweets[0].stats?.views && (
                          <div className="flex items-center gap-1 sm:gap-2 bg-white/10 px-2 py-1 rounded-full">
                            <svg className="w-4 h-4 sm:w-5 sm:h-5" fill="currentColor" viewBox="0 0 24 24">
                              <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" />
                            </svg>
                            <span className="text-xs sm:text-sm font-mono font-bold text-white">125K</span>
                          </div>
                        )}
                        <div className="flex items-center gap-1 sm:gap-2 bg-white/10 px-2 py-1 rounded-full">
                          <svg className="w-4 h-4 sm:w-5 sm:h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
                          </svg>
                          <span className="text-xs sm:text-sm font-mono font-bold text-white">4.2K</span>
                        </div>
                        <div className="hidden sm:flex items-center gap-1 sm:gap-2 bg-white/10 px-2 py-1 rounded-full">
                          <svg className="w-4 h-4 sm:w-5 sm:h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M23.77 15.67c-.292-.293-.767-.293-1.06 0l-2.22 2.22V7.65c0-2.068-1.683-3.75-3.75-3.75h-5.85c-.414 0-.75.336-.75.75s.336.75.75.75h5.85c1.24 0 2.25 1.01 2.25 2.25v10.24l-2.22-2.22c-.293-.293-.768-.293-1.061 0s-.293.768 0 1.061l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5c.294-.292.294-.767.001-1.06z" />
                          </svg>
                          <span className="text-xs sm:text-sm font-mono font-bold text-white">892</span>
                        </div>
                        <svg
                          className="h-4 w-4 sm:h-6 sm:w-6 text-white opacity-50 group-hover:opacity-80 transition-opacity"
                          fill="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
                        </svg>
                      </div>
                    </div>
                  </a>
                </div>

{/* Enhanced Stats Bar with more prominent styling */}
                <div className="flex justify-center">
                  <div className="bg-white/15 border-2 border-white/30 rounded-2xl px-4 sm:px-6 md:px-8 py-3 sm:py-4 md:py-5 flex items-center gap-4 sm:gap-6 md:gap-12 backdrop-blur-sm shadow-xl">
                    <div className="text-center">
                      <div className="text-white font-bold text-lg sm:text-xl md:text-2xl font-mono">750K+</div>
                      <div className="text-white/70 text-xs sm:text-sm font-mono uppercase tracking-wider">Views</div>
                    </div>
                    <div className="w-px h-8 sm:h-10 bg-white/40"></div>
                    <div className="text-center">
                      <div className="text-white font-bold text-lg sm:text-xl md:text-2xl font-mono">21K+</div>
                      <div className="text-white/70 text-xs sm:text-sm font-mono uppercase tracking-wider">Likes</div>
                    </div>
                    <div className="w-px h-8 sm:h-10 bg-white/40"></div>
                    <div className="text-center">
                      <div className="text-white font-bold text-lg sm:text-xl md:text-2xl font-mono">3.9K+</div>
                      <div className="text-white/70 text-xs sm:text-sm font-mono uppercase tracking-wider">Shares</div>
                    </div>
                  </div>
                </div>

{/* Masonry Grid for remaining tweets */}
                <div className="columns-1 lg:columns-2 xl:columns-3 gap-4 sm:gap-6 space-y-4 sm:space-y-6">
                  {tweets.slice(1).map((tweet, index) => {
                    const actualIndex = index + 1
                    return (
                      <a
                        key={actualIndex}
                        href={tweet.url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="group block relative transition-all duration-300 cursor-pointer rounded-[16px] p-4 sm:p-6 bg-white/10 border border-white/20 hover:bg-white/15 hover:border-white/30 break-inside-avoid mb-4 sm:mb-6 backdrop-blur-sm"
                        style={{
                          transform: `rotate(${(index % 2 === 0 ? 1 : -1) * 0.5}deg)`,
                        }}
                      >
                        {/* Tweet Content with truncation */}
                        <div className="mb-6">
                          <p
                            className="text-white/95 leading-relaxed"
                            style={{
                              fontFamily: "GeistMono, monospace",
                              fontSize: "15px",
                              lineHeight: "1.6",
                              textShadow: "0 1px 2px rgba(0,0,0,0.5)",
                            }}
                          >
                            {expandedTweets.has(actualIndex)
                              ? tweet.text.split("\n").map((line, i) => (
                                  <span key={i}>
                                    {line}
                                    {i < tweet.text.split("\n").length - 1 && <br />}
                                  </span>
                                ))
                              : truncateText(tweet.text, 120)}
                            {tweet.text.length > 120 && (
                              <button
                                onClick={(e) => toggleExpanded(actualIndex, e)}
                                className="ml-2 text-white/60 hover:text-white underline text-xs"
                                style={{ fontFamily: "GeistMono, monospace" }}
                              >
                                {expandedTweets.has(actualIndex) ? "less" : "more"}
                              </button>
                            )}
                          </p>
                        </div>

{/* Author Info */}
                        <div className="flex items-center justify-between flex-col sm:flex-row gap-3 sm:gap-0">
                          <div className="flex items-center gap-3 w-full sm:w-auto">
                            <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-14 md:h-14 rounded-full overflow-hidden border border-white/30 bg-white/10">
                              <img
                                src={tweet.profileImage || "/placeholder.svg"}
                                alt={`${tweet.name} profile`}
                                className="w-full h-full object-cover"
                              />
                            </div>
                            <div>
                              <p
                                className="text-white font-medium"
                                style={{
                                  fontFamily: 'var(--font-geist-sans), "GeistSans", sans-serif',
                                  fontSize: "14px",
                                  textShadow: "0 1px 2px rgba(0,0,0,0.5)",
                                }}
                              >
                                {tweet.name}
                              </p>
                              <p
                                className="text-white/70"
                                style={{
                                  fontFamily: "GeistMono, monospace",
                                  fontSize: "12px",
                                  textShadow: "0 1px 2px rgba(0,0,0,0.5)",
                                }}
                              >
                                {tweet.handle}
                              </p>
                            </div>
                          </div>

{/* Enhanced engagement stats for smaller tweets */}
                          <div className="flex items-center gap-2 sm:gap-3 text-white/50 w-full sm:w-auto justify-center sm:justify-end">
                            {tweet.stats?.likes && (
                              <div className="flex items-center gap-1 bg-white/10 px-2 py-1 rounded-full">
                                <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
                                  <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
                                </svg>
                                <span className="text-xs font-mono font-bold text-white">{tweet.stats.likes}</span>
                              </div>
                            )}
                            <svg
                              className="h-4 w-4 text-white opacity-40 group-hover:opacity-70 transition-opacity"
                              fill="currentColor"
                              viewBox="0 0 24 24"
                            >
                              <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
                            </svg>
                          </div>
                        </div>
                      </a>
                    )
                  })}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/why-not-git-section.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Lightbulb, Save, Users, SeparatorHorizontal } from "lucide-react"

interface WhyNotGitSectionProps {
  onOpenInstall?: () => void
}

export default function WhyNotGitSection({ onOpenInstall }: WhyNotGitSectionProps) {
  const features = [
    {
      icon: Save,
      title: "Traditional hiring wants degrees.",
      description: "Shiftza values skills — no need for expensive credentials or formal education.",
    },
    {
      icon: SeparatorHorizontal,
      title: "Job boards are cluttered with irrelevant listings.",
      description: "Shiftza matches you with projects that fit your actual skills.",
    },
    {
      icon: Users,
      title: "Hiring platforms are built for HR departments.",
      description: "Shiftza works for skilled professionals, freelancers, and project-based workers.",
    },
    {
      icon: Lightbulb,
      title: "Traditional jobs require long-term commitment.",
      description: "Shiftza is for flexible work — take projects when you want, scale as you grow.",
    },
  ]

return (
    <section className="py-16 md:py-24">
      <div className="max-w-6xl mx-auto px-4 sm:px-6">
        {/* Header */}
        <div className="text-center mb-12 md:mb-16">
          <h2
            className="mb-6 font-semibold"
            style={{
              backgroundImage: "linear-gradient(rgb(245, 245, 245), rgb(245, 245, 245) 29%, rgb(153, 153, 153))",
              color: "transparent",
              fontFamily: "GeistSans, sans-serif",
              fontSize: "clamp(32px, 6vw, 52px)",
              fontWeight: 600,
              letterSpacing: "clamp(-1.5px, -0.04em, -2.08px)",
              lineHeight: "1.15",
              textAlign: "center",
              WebkitBackgroundClip: "text",
              backgroundClip: "text",
            }}
          >
            Why Not Just Use Job Boards?
          </h2>
          <p
            className="max-w-2xl mx-auto text-white/90 mb-8"
            style={{
              fontFamily: "GeistMono, monospace",
              fontSize: "clamp(18px, 3vw, 24px)",
              lineHeight: "1.4",
              textAlign: "center",
            }}
          >
            Job boards are for resumes. Shiftza is for skills.
          </p>
        </div>

{/* Features Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 mb-12 md:mb-16">
          {features.map((feature, index) => (
            <div
              key={index}
              className="bg-white/5 border border-white/10 rounded-2xl p-6 md:p-8 hover:bg-white/10 transition-all duration-300"
            >
              <div className="flex items-start gap-4">
                <div className="flex-shrink-0">
                  <div className="w-12 h-12 bg-gradient-to-br from-cyan-400 via-orange-400 to-pink-400 rounded-xl flex items-center justify-center">
                    <feature.icon className="w-6 h-6 text-white" strokeWidth={2} />
                  </div>
                </div>
                <div className="flex-1">
                  <h3
                    className="text-white font-semibold mb-3"
                    style={{
                      fontFamily: 'var(--font-geist-sans), "GeistSans", sans-serif',
                      fontSize: "18px",
                      lineHeight: "1.3",
                      letterSpacing: "-0.01em",
                    }}
                  >
                    {feature.title}
                  </h3>
                  <p
                    className="text-white/80"
                    style={{
                      fontFamily: "GeistMono, monospace",
                      fontSize: "15px",
                      lineHeight: "1.5",
                    }}
                  >
                    {feature.description}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>

{/* Call to Action */}
        <div className="text-center">
          <p
            className="text-white/80 mb-6 max-w-3xl mx-auto"
            style={{
              fontFamily: "GeistMono, monospace",
              fontSize: "16px",
              lineHeight: "1.5",
            }}
          >
            Stop worrying about degrees. Start showcasing your skills.
          </p>

{onOpenInstall && (
            <Button
              onClick={onOpenInstall}
              className="bg-white hover:bg-gray-100 text-black font-mono text-sm font-semibold tracking-wider py-3 px-6 rounded-lg"
              style={{
                fontFamily: "GeistMono, monospace",
                letterSpacing: "0.56px",
                height: "48px",
              }}
            >
              JOIN NOW
            </Button>
          )}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/world-map-demo.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { WorldMap } from "./ui/world-map"

function WorldMapDemoInner() {
  const dots = [
    { start: { lat: 64.2008, lng: -149.4937 }, end: { lat: 34.0522, lng: -118.2437 } },
    { start: { lat: 64.2008, lng: -149.4937 }, end: { lat: -15.7975, lng: -47.8919 } },
    { start: { lat: -15.7975, lng: -47.8919 }, end: { lat: 38.7223, lng: -9.1393 } },
    { start: { lat: 51.5074, lng: -0.1278 }, end: { lat: 28.6139, lng: 77.209 } },
    { start: { lat: 28.6139, lng: 77.209 }, end: { lat: 43.1332, lng: 131.9113 } },
    { start: { lat: 28.6139, lng: 77.209 }, end: { lat: -1.2921, lng: 36.8219 } },
  ]

return (
    <div className="h-[100svh] w-full overflow-hidden dark:bg-black bg-white flex items-center">
      <div className="max-w-7xl mx-auto text-center px-6">
        <p className="font-bold text-xl md:text-4xl dark:text-white text-black">
          Remote{" "}
          <span className="text-neutral-400">
            {"Connectivity".split("").map((word, idx) => (
              <motion.span
                key={idx}
                className="inline-block"
                initial={{ x: -10, opacity: 0 }}
                animate={{ x: 0, opacity: 1 }}
                transition={{ duration: 0.5, delay: idx * 0.04 }}
              >
                {word}
              </motion.span>
            ))}
          </span>
        </p>
        <p className="text-sm md:text-lg text-neutral-500 max-w-2xl mx-auto py-4">
          Break free from traditional boundaries. Work from anywhere, at the comfort of your own studio apartment.
          Perfect for Nomads and Travellers.
        </p>
        <WorldMap dots={dots} />
      </div>
    </div>
  )
}

export function WorldMapDemo() {
  return <WorldMapDemoInner />
}
export default WorldMapDemoInner
[V0_FILE]typescript:file="lib/supabase-admin.ts" isMerged="true"
import { createClient } from "@supabase/supabase-js"

export function getAdminSupabase() {
  const url = process.env.NEXT_PUBLIC_SUPABASE_URL!
  const serviceKey = process.env.SUPABASE_SERVICE_ROLE_KEY!
  return createClient(url, serviceKey, {
    auth: {
      persistSession: false,
      autoRefreshToken: false,
    },
  })
}
[V0_FILE]typescript:file="lib/supabase-browser.ts" isMerged="true"
"use client"

import { createBrowserClient } from "@supabase/ssr"

let _client: ReturnType<typeof createBrowserClient> | null = null

export function getBrowserSupabase() {
  if (_client) return _client
  const url = process.env.NEXT_PUBLIC_SUPABASE_URL
  const anon = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
  if (!url || !anon) {
    // Fail fast with a clear message instead of "Failed to fetch"
    console.error("[v0] Missing Supabase envs", { urlPresent: !!url, anonPresent: !!anon })
    throw new Error(
      "Supabase is not configured. Please set NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY.",
    )
  }
  _client = createBrowserClient(url, anon)
  return _client
}

// Keep existing named export used across the app.
export function getSupabaseBrowser() {
  return getBrowserSupabase()
}
[V0_FILE]typescript:file="lib/supabase-server.ts" isMerged="true"
import { cookies } from "next/headers"
import { createServerClient } from "@supabase/ssr"

export function getServerSupabase() {
  const cookieStore = cookies()
  const supabaseUrl = process.env.SUPABASE_URL || process.env.NEXT_PUBLIC_SUPABASE_URL!
  const supabaseAnon = process.env.SUPABASE_ANON_KEY || process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!

const supabase = createServerClient(supabaseUrl, supabaseAnon, {
    cookies: {
      get(name: string) {
        return cookieStore.get(name)?.value
      },
      getAll() {
        return cookieStore.getAll()
      },
      // No-ops in Server Components; real writes happen in middleware/route handlers
      set() {},
      remove() {},
    },
  })
  return supabase
}
[V0_FILE]typescript:file="lib/supabase/browser.ts" isMerged="true"
"use client"

import { createBrowserClient } from "@supabase/ssr"

let client: ReturnType<typeof createBrowserClient> | null = null

export function getSupabaseBrowserClient() {
  if (client) return client
  const url = process.env.NEXT_PUBLIC_SUPABASE_URL
  const anon = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY

if (!url || !anon) {
    const msg =
      "Missing NEXT_PUBLIC_SUPABASE_URL or NEXT_PUBLIC_SUPABASE_ANON_KEY. " +
      "Set these in Vars (left sidebar) and reload."
    console.warn("[v0] " + msg)
    throw new Error(msg)
  }

client = createBrowserClient(url, anon)
  return client
}
[V0_FILE]typescript:file="lib/supabase/client.ts" isMerged="true"
"use client"

import { createBrowserClient } from "@supabase/ssr"
import type { SupabaseClient } from "@supabase/supabase-js"

let browserClient: SupabaseClient | null = null

/**
 * Returns a singleton Supabase client for browser usage.
 * Requires NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY.
 */
export function getSupabaseBrowser(): SupabaseClient {
  if (typeof window === "undefined") {
    throw new Error("getSupabaseBrowser must be called in the browser")
  }

if (!browserClient) {
    const url = process.env.NEXT_PUBLIC_SUPABASE_URL
    const anon = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY

if (!url || !anon) {
      const msg =
        "Missing NEXT_PUBLIC_SUPABASE_URL or NEXT_PUBLIC_SUPABASE_ANON_KEY. " +
        "Add them in the Vars section (left sidebar) and refresh."
      console.warn("[v0] " + msg)
      throw new Error(msg)
    }

browserClient = createBrowserClient(url, anon)
  }

return browserClient
}

/**
 * Backwards-compatible alias used across the repo.
 * Prefer getSupabaseBrowser() in new code.
 */
export function createClient(): SupabaseClient {
  return getSupabaseBrowser()
}
[V0_FILE]typescript:file="lib/supabase/middleware.ts" isMerged="true"
import { NextResponse, type NextRequest } from "next/server"
import { createServerClient } from "@supabase/ssr"

export async function updateSession(request: NextRequest) {
  const response = NextResponse.next()

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

// This will refresh the session if needed and set cookies on the response
  await supabase.auth.getUser()

return response
}
[V0_FILE]typescript:file="lib/supabase/server.ts" isMerged="true"
import { cookies } from "next/headers"
import { createServerClient } from "@supabase/ssr"
import type { SupabaseClient } from "@supabase/supabase-js"

export async function getSupabaseServer(): Promise<SupabaseClient> {
  const cookieStore = await cookies()
  const url = process.env.NEXT_PUBLIC_SUPABASE_URL!
  const anon = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!

// create a fresh client per request scope; don't store globally on the server
  const supabase = createServerClient(url, anon, {
    cookies: {
      getAll() {
        return cookieStore.getAll()
      },
      setAll(cookiesToSet) {
        try {
          cookiesToSet.forEach(({ name, value, options }) => {
            cookieStore.set(name, value, options)
          })
        } catch {
          // In RSC, setting cookies may be disallowed; safe to ignore
        }
      },
    },
  })

return supabase
}

/** Back-compat alias used across the repo */
export const createClient = getSupabaseServer
[V0_FILE]typescript:file="lib/utils.ts" isMerged="true"
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]typescript:file="middleware.ts" isMerged="true"
import { NextResponse, type NextRequest } from "next/server"
import { updateSession } from "@/lib/supabase/middleware"
import { createServerClient } from "@supabase/ssr"

export async function middleware(request: NextRequest) {
  // refresh session and keep cookie sync
  const response = await updateSession(request)

const url = request.nextUrl.clone()
  const { pathname } = url

const isDashboard = pathname === "/dashboard" || pathname.startsWith("/dashboard/")

if (!isDashboard) {
    return response
  }

// Create a Supabase server client bound to request/response cookies
  const supabase = createServerClient(
    process.env.SUPABASE_URL || process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.SUPABASE_ANON_KEY || process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll()
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) => {
            response.cookies.set(name, value, options)
          })
        },
      },
    },
  )

const redirectWithCookies = (url: URL) => {
    const res = NextResponse.redirect(url)
    // copy cookies set on `response` (from updateSession) so refresh tokens persist across redirects
    response.cookies.getAll().forEach(({ name, value }) => {
      res.cookies.set(name, value)
    })
    return res
  }

// Get user; if not logged in, send to login with return path
  const { data: userData } = await supabase.auth.getUser()
  const user = userData?.user
  if (!user) {
    url.pathname = "/auth/login"
    url.searchParams.set("redirect", pathname)
    return redirectWithCookies(url)
  }

const { data: profile } = await supabase
    .from("profiles")
    .select("role")
    .or(`auth_user_id.eq.${user.id},user_id.eq.${user.id}`)
    .maybeSingle()

const role = (profile?.role as "worker" | "employer" | null) ?? null

// If hitting the hub, go straight to their dashboard (never render hub)
  if (pathname === "/dashboard") {
    const dest = role === "employer" ? "/dashboard/employer" : "/dashboard/worker"
    url.pathname = dest
    return redirectWithCookies(url)
  }

// Route protection: keep users inside their role area
  const wantsWorker = pathname.startsWith("/dashboard/worker")
  const wantsEmployer = pathname.startsWith("/dashboard/employer")

if (role === "worker" && wantsEmployer) {
    url.pathname = "/dashboard/worker"
    return redirectWithCookies(url)
  }
  if (role === "employer" && wantsWorker) {
    url.pathname = "/dashboard/employer"
    return redirectWithCookies(url)
  }

// Proceed for matching role routes
  return response
}

export const config = {
  // refresh + guard all app routes except static assets
  matcher: ["/((?!_next/static|_next/image|favicon.ico|opengraph-image|sitemap.xml|robots.txt).*)"],
}
[V0_FILE]javascript:file="next.config.mjs" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
}

export default nextConfig
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "next lint",
    "start": "next start"
  },
  "dependencies": {
    "@emotion/is-prop-valid": "latest",
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "latest",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "latest",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "latest",
    "@radix-ui/react-hover-card": "latest",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "latest",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "latest",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "latest",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "latest",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "latest",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "latest",
    "@supabase/ssr": "latest",
    "@supabase/supabase-js": "latest",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "dotted-map": "latest",
    "embla-carousel-react": "8.5.1",
    "framer-motion": "latest",
    "geist": "latest",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "15.2.4",
    "next-themes": "latest",
    "react": "^19",
    "react-day-picker": "latest",
    "react-dom": "^19",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "latest",
    "sonner": "^1.7.4",
    "swr": "latest",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.9",
    "zod": "3.25.67",
    "motion": "12.23.24"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]javascript:file="postcss.config.mjs" isMerged="true"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

export default config
[V0_FILE]plaintext:file="public/content/signup-full-story.txt" isMerged="true"
Sign-Up Journey
________________________________________
🟣 Page 1 — “Who Are You?”
Header:
Who are you?
Subheader:
Choose how you’d like to get started. Shiftza values skill over status — your journey adapts to your truth.
________________________________________
Left Card: I’m a Worker
Headline:
Showcase your real skills. Build your credibility. Unlock better opportunities.
Story Copy:
For too long, skilled professionals have been overlooked — not because they lack ability, but because they don’t hold a paper certificate. You’ve worked hard, built things, solved problems, and made results happen.
Now, it’s time to be seen for what you can actually do.
Shiftza gives you a place to prove your skill, gain recognition, and connect directly with employers who care about results, not résumés.
👉 Button: “Continue as Worker”
________________________________________
Right Card: I’m Hiring
Headline:
Find verified, project-ready professionals — skilled, reliable, and focused.
Story Copy:
You’ve seen it before: impressive résumés, big degrees — but when real work starts, something’s missing. The truth is, the best talent doesn’t always come from universities. It comes from people who’ve learned by doing.
With Shiftza, you can hire by skill, not paper.
Discover proven professionals who have verified abilities, real project experience, and the dedication to deliver results.
👉 Button: “Continue as Employer”
________________________________________
Footer:
Back to Home | Already have an account? Log in
________________________________________
🟢 Page 2 (Worker Path) — “Create Your Skills Profile”
Header:
Create Your Skills Profile
Subheader:
Your skills deserve to be seen.
________________________________________
Story Copy:
For years, you’ve built, repaired, designed, and solved — but often without the recognition you truly earned.
Too many professionals are ignored simply because they don’t hold a degree or fancy certificate.
That ends here.
This is your space — a platform made for doers, makers, builders, and creators — where your skills, hard work, and results finally speak louder than paper.
Your Skills Profile is more than an account — it’s your digital identity, proof of your craft, and your passport to real opportunities.
Let’s start building your story — one skill, one project, one badge at a time.
________________________________________
Fields:
•	Full Name
•	Email Address
•	Password
•	I agree to the Terms & Privacy Policy
👉 Button: “Create My Skills Profile”
________________________________________
Footer:
Already have an account? Log in
________________________________________
💼 Page 2 (Employer Path) — “Hire by Skill, Not by Paper”
Header:
Hire by Skill, Not by Paper.
Subheader:
Build teams that can actually deliver — not just impress on paper.
________________________________________
Story Copy:
You’ve seen it — impressive résumés, polished LinkedIn profiles, degrees that look great on paper.
But when it comes to real work, results don’t always follow.
The best talent doesn’t always come with a certificate — it comes with dedication, skill, and proof of performance.
Shiftza helps your company connect directly with verified, project-ready professionals who have been tested, reviewed, and proven by their work.
Join the skills-first movement and start hiring based on what truly matters: capability, reliability, and results.
________________________________________
Fields:
•	Company Name
•	Work Email or Phone
•	Create Password
•	I agree to the Terms & Privacy Policy
👉 Button: “Create My Employer Account”
________________________________________
Footer:
Already have an account? Log in
________________________________________
🧱 Page 3 (Worker) — “Build Your Skills-Focused Profile”
Header:
Build Your Skills-Focused Profile
Subheader:
Show the world what you can do — not what papers you have.
________________________________________
Story Copy:
This is where your story comes alive.
Add your skills, upload work samples, and share your real experience.
Don’t worry about perfect words or degrees — just focus on what you’ve built, fixed, or created.
Every tool you’ve mastered, every project you’ve completed, every challenge you’ve solved — these are your credentials.
Shiftza helps turn that into a profile that earns attention and opens doors.
Let’s start showcasing your craft.
________________________________________
Prompts:
•	Add up to 10 key skills
•	Upload sample work (optional)
•	Write a short “About Me” summary
👉 Button: “Continue to Skill Verification”
________________________________________
🧠 Page 4 (Worker) — “Verify Your Skills & Earn Badges”
Header:
Prove Your Skills. Earn Your Badges.
Subheader:
Every skill has value — now, it has proof.
________________________________________
Story Copy:
Your skills tell a story — of hard work, learning, and results.
Shiftza gives you a way to show, not just tell.
Take short skill tests, upload real work samples, or get peer endorsements.
Once verified, you’ll earn digital badges that prove your ability to employers.
No degrees needed. No gatekeepers. Just real recognition for real skill.
This is your moment — let your results speak.
________________________________________
👉 Button: “Start Verification”
________________________________________
🚀 Page 5 (Worker) — “Find Projects & Opportunities”
Header:
Land Projects That Match Your Skills
Subheader:
Start working with companies that value what you can actually do.
________________________________________
Story Copy:
Now that your skills are verified, it’s time to explore opportunities.
Browse projects that match your expertise. Apply directly, or let companies invite you based on your badges and profile.
You’re no longer just another applicant — you’re a verified professional with a proof-backed profile.
Start where you are. Grow from there.
Every project builds your reputation and strengthens your story.
👉 Button: “Go to My Dashboard”
________________________________________
🏢 Page 3–5 (Employer Flow)
3️⃣ Post a Project
Header:
Post Your First Project
Subheader:
Describe what you need — and get matched with skilled, verified talent.
Story Copy:
Hiring on Shiftza is simple. Just tell us what you need — we’ll connect you with professionals whose skills have already been tested and verified.
No guesswork, no wasted interviews.
Every candidate you see has real proof of their ability to deliver.
👉 Button: “Post My Project”
________________________________________
4️⃣ Review & Hire
Header:
Meet the Talent. Choose with Confidence.
Subheader:
Every profile you see includes verified skills, badges, and proof of work.
Story Copy:
No need to gamble on degrees or titles.
Here, you see what candidates can actually do — their verified results, project samples, and endorsements.
Review, message, and hire directly from your dashboard.
👉 Button: “Hire Skilled Talent”
________________________________________
5️⃣ Dashboard Welcome
Header:
Welcome to Your Hiring Hub
Subheader:
Manage projects, review professionals, and track your hiring progress — all in one place.
Story Copy:
This is where the real work begins.
Your dashboard helps you post new projects, manage active ones, and review candidate performance.
Every hire you make supports the future of skills-first hiring — where proof, not paper, wins.
👉 Button: “Go to Dashboard”
________________________________________
💬 Tone Summary (for your design team)
Element	Worker Experience	Employer Experience
Emotion	Recognition, pride, self-worth	Relief, trust, efficiency
Narrative	“I finally get seen for my skills.”	“I finally find talent that delivers.”
Tone	Empowering, personal, warm	Professional, confident, purposeful
Theme	“Skills deserve to be seen.”	“Hire by skill, not by paper.”
________________________________________
🎨 Design Consistency Notes
•	Keep same background and layout across all screens (like your screenshots).
•	Use soft white or light grey backgrounds.
•	Use muted accent color (Shiftza purple/green/blue) for buttons.
•	Smooth transitions between pages — no harsh cuts.
•	Include progress indicators (e.g., Step 1 of 5) subtly at the top.
•	Use short motivational subtexts under headers for emotional warmth.
________________________________________
Would you like me to continue and write the dashboard onboarding microcopy next (for when they first log in as a worker or employer)?
That includes things like:
•	Welcome messages
•	Empty state prompts (“No projects yet — here’s what to do”)
•	Short motivational banners (“Every skill tells a story”).
[V0_FILE]plaintext:file="public/llms.txt" isMerged="true"
# YOYO - AI Version Control

YOYO is the first version control system designed specifically for AI-assisted development. It helps developers save progress, preview changes, and restore code instantly when AI prompts go wrong.

## What is YOYO?

YOYO is AI version control for vibe coding. It snapshots your code before AI breaks it, letting you instantly save, preview, and restore your work with one click. Unlike Git, which is for clean commits, YOYO captures messy AI edits, experiments, and prompts gone wrong without bloating your commit history.

## Key Features

- **Save**: Instantly save your code and undo bad AI edits anytime
- **Preview**: Switch to any past version in one click  
- **Restore**: Go back to a clean version in one click
- **Agentic AI Search**: Ask anything about your coding timeline across versions, branches, and editors
- **Cross-IDE Compatibility**: Works with Cursor, Windsurf, VS Code, Claude Code, OpenAI Codex, Manus AI, Gemini CLI, Firebase Studio, and GitHub Codespaces
- **Git Integration**: Keeps everything separate from your Git repo - no staged files, no surprise commits
- **Branch Support**: Each Git branch has its own version timeline in YOYO

## Why Not Just Git?

- **Git wants clean commits** → YOYO captures messy experiments
- **Git pollutes your repo with throwaway changes** → YOYO saves separately, keeps Git clean
- **Git is built for engineers** → YOYO works for vibe coders, designers, and anyone vibing with AI
- **Git is for the final product** → YOYO is for figuring things out - fast, chaotic, and creative

## Security & Privacy

- Uses fast, secure LLM providers like Groq with zero data retention
- Code is encrypted in transit using TLS 1.2+ and never stored or used for training
- No logs kept, no copies made
- Full version history lives on your machine, not in the cloud

## Pricing

Free tier available with generous limits. Pro and Team plans coming soon.

## Installation

YOYO is available as an extension for:
- Cursor: `ext install iganbold.yoyo-ai-versioning`
- Windsurf: `ext install iganbold.yoyo-ai-versioning` 
- VS Code: `ext install iganbold.yoyo-ai-versioning`
- Other VS Code-compatible editors

Also works with terminal-based AI tools like Claude Code and OpenAI Codex CLI when run inside supported editors.

## Community Recognition

YOYO has gained significant traction in the developer community:
- 2,200+ developers using YOYO worldwide
- Featured in viral tweets about "vibe coding" with 1M+ views
- Rick Rubin called vibe coding "the punk rock of software" on The Ben & Marc Show
- AI Jason (189K followers) featured YOYO as "Vibe Versioning"
- Eric Tech showcased YOYO in Gemini AI workflow videos

## Use Cases

Perfect for developers who:
- Use AI assistants like Cursor, Claude, or ChatGPT for coding
- Want to experiment freely without fear of breaking their code
- Need quick rollback when AI prompts go wrong
- Work on rapid prototypes and iterations
- Practice "vibe coding" - creative, experimental development

## Technical Details

- Local storage: Version history stored on user's machine
- Cross-platform: Windows, macOS, Linux support
- IDE integration: Works as extension in VS Code-compatible editors
- AI integration: Compatible with major AI coding tools and CLIs
- Git compatibility: Operates independently of Git repositories

## Contact

- Website: https://runyoyo.com
- Twitter: @jackjack_eth (founder)
- Feedback: https://tally.so/r/n0l7BB

---

This file is provided to help AI systems understand YOYO's purpose, features, and value proposition for developers using AI-assisted coding workflows.
[V0_FILE]plaintext:file="public/robots.txt" isMerged="true"
User-agent: *
Allow: /

# Sitemaps
Sitemap: https://runyoyo.com/sitemap.xml
Sitemap: https://runyoyo.com/video-sitemap.xml

# LLMs.txt for AI understanding
# https://llmstxt.org/
Allow: /llms.txt

# Welcome AI crawlers - we build tools for AI developers!
User-agent: GPTBot
Allow: /

User-agent: ChatGPT-User
Allow: /

User-agent: CCBot
Allow: /

User-agent: anthropic-ai
Allow: /

User-agent: Claude-Web
Allow: /

User-agent: Bard
Allow: /

User-agent: Gemini
Allow: /

# Crawl-delay for politeness
Crawl-delay: 1
[V0_FILE]plaintext:file="public/site.webmanifest" isMerged="true"
{
  "name": "YOYO - Version Control for AI Coding",
  "short_name": "YOYO",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#000000",
  "background_color": "#000000",
  "display": "standalone"
}
[V0_FILE]xml:file="public/sitemap.xml" isMerged="true"
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://runyoyo.com</loc>
    <lastmod>2025-01-03</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
</urlset>
[V0_FILE]xml:file="public/video-sitemap.xml" isMerged="true"
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
  
  
  <url>
    <loc>https://runyoyo.com</loc>
    <video:video>
      <video:thumbnail_loc>https://runyoyo.com/images/hero-interface.jpg</video:thumbnail_loc>
      <video:title>YOYO AI Version Control - Main Demo</video:title>
      <video:description>See YOYO in action - the first AI version control system that lets you save, preview, and restore code instantly when AI prompts go wrong. Perfect for vibe coding workflows with Cursor, Windsurf, and VS Code.</video:description>
      <video:content_loc>https://hebbkx1anhila5yf.public.blob.vercel-storage.com/hero-video-v3-E4dqT6iUgKB1QNwAX45SXQ5xHIZApB.mp4</video:content_loc>
      <video:duration>60</video:duration>
      <video:publication_date>2024-12-01T00:00:00+00:00</video:publication_date>
      <video:family_friendly>yes</video:family_friendly>
      <video:tag>AI version control</video:tag>
      <video:tag>vibe coding</video:tag>
      <video:tag>developer tools</video:tag>
      <video:tag>AI mistakes</video:tag>
      <video:tag>code backup</video:tag>
      <video:category>Technology</video:category>
    </video:video>
  </url>

<url>
    <loc>https://runyoyo.com#save-preview-restore</loc>
    <video:video>
      <video:thumbnail_loc>https://runyoyo.com/images/save-thumbnail.jpeg</video:thumbnail_loc>
      <video:title>YOYO Save Feature - Instant Code Snapshots</video:title>
      <video:description>Watch how YOYO's Save feature instantly snapshots your code, letting you undo bad AI edits anytime. No more lost progress from AI prompts gone wrong.</video:description>
      <video:content_loc>https://hebbkx1anhila5yf.public.blob.vercel-storage.com/yoyo-save-2-DUbUp5aKE9GtNY9Diok2eG6SW2qHCX.mp4</video:content_loc>
      <video:duration>45</video:duration>
      <video:publication_date>2024-12-01T00:00:00+00:00</video:publication_date>
      <video:family_friendly>yes</video:family_friendly>
      <video:tag>code save</video:tag>
      <video:tag>AI undo</video:tag>
      <video:tag>version control</video:tag>
      <video:category>Technology</video:category>
    </video:video>
  </url>

<url>
    <loc>https://runyoyo.com#save-preview-restore</loc>
    <video:video>
      <video:thumbnail_loc>https://runyoyo.com/images/preview-thumbnail.jpeg</video:thumbnail_loc>
      <video:title>YOYO Preview Feature - Switch to Any Past Version</video:title>
      <video:description>See how YOYO's Preview feature lets you switch to any past version in one click. Perfect for comparing changes and finding the right version.</video:description>
      <video:content_loc>https://hebbkx1anhila5yf.public.blob.vercel-storage.com/yoyo-preview-dnsmAMg2AX6f1thlrNvj1e65T2zUTM.mp4</video:content_loc>
      <video:duration>40</video:duration>
      <video:publication_date>2024-12-01T00:00:00+00:00</video:publication_date>
      <video:family_friendly>yes</video:family_friendly>
      <video:tag>code preview</video:tag>
      <video:tag>version switching</video:tag>
      <video:tag>AI development</video:tag>
      <video:category>Technology</video:category>
    </video:video>
  </url>

<url>
    <loc>https://runyoyo.com#agentic-ai-search</loc>
    <video:video>
      <video:thumbnail_loc>https://runyoyo.com/images/preview-thumbnail.jpeg</video:thumbnail_loc>
      <video:title>YOYO AI Search - Query Your Entire Code History</video:title>
      <video:description>YOYO's Agentic AI Search understands your entire coding timeline. Ask questions like "Show my edits to favorites" or "What did I do in v9?" and get instant answers.</video:description>
      <video:content_loc>https://hebbkx1anhila5yf.public.blob.vercel-storage.com/favorites-FFCUeeEFzfxDBIhgGACi7YGpYQZbnU.mp4</video:content_loc>
      <video:duration>50</video:duration>
      <video:publication_date>2024-12-01T00:00:00+00:00</video:publication_date>
      <video:family_friendly>yes</video:family_friendly>
      <video:tag>AI search</video:tag>
      <video:tag>code history</video:tag>
      <video:tag>natural language</video:tag>
      <video:tag>developer productivity</video:tag>
      <video:category>Technology</video:category>
    </video:video>
  </url>

<url>
    <loc>https://runyoyo.com#cross-ide</loc>
    <video:video>
      <video:thumbnail_loc>https://runyoyo.com/images/preview-thumbnail.jpeg</video:thumbnail_loc>
      <video:title>YOYO Cross-IDE Support - Cursor, Windsurf, VS Code</video:title>
      <video:description>Switch between Cursor, Windsurf, and VS Code seamlessly with YOYO. Your version history follows you across all your favorite AI coding environments.</video:description>
      <video:content_loc>https://hebbkx1anhila5yf.public.blob.vercel-storage.com/cross-ides-PZyN9x34tNJsgQrbFkY3UUaatEaePh.mp4</video:content_loc>
      <video:duration>55</video:duration>
      <video:publication_date>2024-12-01T00:00:00+00:00</video:publication_date>
      <video:family_friendly>yes</video:family_friendly>
      <video:tag>cross-IDE</video:tag>
      <video:tag>Cursor</video:tag>
      <video:tag>Windsurf</video:tag>
      <video:tag>VS Code</video:tag>
      <video:tag>AI coding</video:tag>
      <video:category>Technology</video:category>
    </video:video>
  </url>

</urlset>
[V0_FILE]sql:file="scripts/sql/001_create_stories.sql" isMerged="true"
-- Enable pgcrypto for gen_random_uuid()
create extension if not exists pgcrypto;

create table if not exists public.stories (
  id uuid primary key default gen_random_uuid(),
  user_id uuid not null,
  title text not null,
  content text not null,
  author_name text,
  author_avatar_url text,
  created_at timestamptz not null default now()
);

-- RLS: allow public read; only author can write/update/delete
alter table public.stories enable row level security;

do $$
begin
  if not exists (
    select 1 from pg_policies
    where schemaname = 'public' and tablename = 'stories' and policyname = 'Public can read stories'
  ) then
    create policy "Public can read stories"
      on public.stories for select
      using (true);
  end if;

if not exists (
    select 1 from pg_policies
    where schemaname = 'public' and tablename = 'stories' and policyname = 'Author can insert own stories'
  ) then
    create policy "Author can insert own stories"
      on public.stories for insert
      with check (auth.uid() = user_id);
  end if;

if not exists (
    select 1 from pg_policies
    where schemaname = 'public' and tablename = 'stories' and policyname = 'Author can update own stories'
  ) then
    create policy "Author can update own stories"
      on public.stories for update
      using (auth.uid() = user_id);
  end if;

if not exists (
    select 1 from pg_policies
    where schemaname = 'public' and tablename = 'stories' and policyname = 'Author can delete own stories'
  ) then
    create policy "Author can delete own stories"
      on public.stories for delete
      using (auth.uid() = user_id);
  end if;
end$$;
[V0_FILE]sql:file="scripts/supabase/migrations/0001_init.sql" isMerged="true"
-- Enable required extensions
create extension if not exists "uuid-ossp";
create extension if not exists "pgcrypto";

-- Profiles (one row per auth user)
create table if not exists public.profiles (
  id uuid primary key default uuid_generate_v4(),        -- mirrors auth.uid but allows decoupling
  auth_user_id uuid unique not null,                     -- references auth.users.id
  role text check (role in ('worker','employer','admin')) not null default 'worker',
  display_name text,
  location text,
  about text,
  avatar_url text,
  created_at timestamptz not null default now()
);

-- Companies and team
create table if not exists public.companies (
  id uuid primary key default uuid_generate_v4(),
  name text not null,
  slug text unique,
  website text,
  logo_url text,
  description text,
  created_by uuid not null, -- profiles.id
  created_at timestamptz not null default now()
);

create table if not exists public.company_members (
  company_id uuid not null references public.companies(id) on delete cascade,
  profile_id uuid not null references public.profiles(id) on delete cascade,
  role text check (role in ('owner','admin','recruiter')) not null default 'recruiter',
  invited_at timestamptz,
  joined_at timestamptz default now(),
  primary key (company_id, profile_id)
);

-- Skills and user skills
create table if not exists public.skills (
  id uuid primary key default uuid_generate_v4(),
  slug text unique not null,
  name text not null,
  category text
);

create table if not exists public.user_skills (
  profile_id uuid not null references public.profiles(id) on delete cascade,
  skill_id uuid not null references public.skills(id) on delete cascade,
  level int check (level between 1 and 5) not null default 3,
  years int check (years between 0 and 50) not null default 0,
  verified boolean not null default false,
  verified_by uuid references public.profiles(id),
  primary key (profile_id, skill_id)
);

-- Jobs and job skills
create table if not exists public.jobs (
  id uuid primary key default uuid_generate_v4(),
  company_id uuid references public.companies(id) on delete set null,
  created_by uuid not null references public.profiles(id) on delete cascade,
  title text not null,
  description text not null,
  job_type text check (job_type in ('full-time','part-time','contract','gig')) not null default 'contract',
  location_type text check (location_type in ('onsite','remote','hybrid')) not null default 'remote',
  budget_min numeric,
  budget_max numeric,
  currency text default 'USD',
  status text check (status in ('draft','open','paused','closed')) not null default 'open',
  created_at timestamptz not null default now()
);

create table if not exists public.job_skills (
  job_id uuid not null references public.jobs(id) on delete cascade,
  skill_id uuid not null references public.skills(id),
  required boolean not null default true,
  weight int check (weight between 0 and 100) not null default 50,
  primary key (job_id, skill_id)
);

-- Applications
create table if not exists public.applications (
  id uuid primary key default uuid_generate_v4(),
  job_id uuid not null references public.jobs(id) on delete cascade,
  profile_id uuid not null references public.profiles(id) on delete cascade,
  cover_letter text,
  expected_rate numeric,
  status text check (status in ('applied','screening','interview','offer','declined','withdrawn','hired')) not null default 'applied',
  created_at timestamptz not null default now(),
  updated_at timestamptz not null default now()
);

-- Messaging
create table if not exists public.conversations (
  id uuid primary key default uuid_generate_v4(),
  company_id uuid references public.companies(id) on delete set null,
  created_at timestamptz not null default now()
);

create table if not exists public.conversation_participants (
  conversation_id uuid not null references public.conversations(id) on delete cascade,
  profile_id uuid not null references public.profiles(id) on delete cascade,
  role text check (role in ('worker','employer')) not null,
  primary key (conversation_id, profile_id)
);

create table if not exists public.messages (
  id uuid primary key default uuid_generate_v4(),
  conversation_id uuid not null references public.conversations(id) on delete cascade,
  sender_profile_id uuid not null references public.profiles(id) on delete cascade,
  body text not null,
  attachment_url text,
  created_at timestamptz not null default now()
);

-- Helpful indexes
create index if not exists idx_jobs_status_created_at on public.jobs(status, created_at desc);
create index if not exists idx_jobs_title_desc_fts on public.jobs using gin (to_tsvector('simple', coalesce(title,'') || ' ' || coalesce(description,'')));
create index if not exists idx_profiles_display_name on public.profiles using gin (to_tsvector('simple', coalesce(display_name,'')));
[V0_FILE]sql:file="scripts/supabase/migrations/0002_rls.sql" isMerged="true"
-- Enable RLS (safe if table exists)
alter table if exists public.profiles enable row level security;
alter table if exists public.companies enable row level security;
alter table if exists public.company_members enable row level security;
alter table if exists public.skills enable row level security;
alter table if exists public.user_skills enable row level security;
alter table if exists public.jobs enable row level security;
alter table if exists public.job_skills enable row level security;
alter table if exists public.applications enable row level security;
alter table if exists public.conversations enable row level security;
alter table if exists public.conversation_participants enable row level security;
alter table if exists public.messages enable row level security;

-- PUBLIC read for reference data
drop policy if exists skills_read_all on public.skills;
create policy skills_read_all on public.skills
for select using (true);

-- Profiles
drop policy if exists profiles_select_public on public.profiles;
create policy profiles_select_public on public.profiles
for select using (true);

drop policy if exists profiles_upsert_own on public.profiles;
create policy profiles_upsert_own on public.profiles
for insert to authenticated
with check (auth.uid() = auth_user_id);

drop policy if exists profiles_update_own on public.profiles;
create policy profiles_update_own on public.profiles
for update to authenticated
using (auth.uid() = auth_user_id);

-- Companies
do $$
begin
  if to_regclass('public.companies') is not null then
    drop policy if exists companies_select_public on public.companies;
    create policy companies_select_public on public.companies
    for select using (true);

drop policy if exists companies_insert_by_user on public.companies;
    create policy companies_insert_by_user on public.companies
    for insert to authenticated
    with check (
      exists (select 1 from public.profiles p where p.id = created_by and (p.auth_user_id = auth.uid() or p.user_id = auth.uid()))
    );

drop policy if exists companies_update_members on public.companies;
    create policy companies_update_members on public.companies
    for update to authenticated
    using (
      exists (
        select 1
        from public.company_members m
        join public.profiles p on p.id = m.profile_id
        where m.company_id = companies.id and (p.auth_user_id = auth.uid() or p.user_id = auth.uid())
      )
    );
  end if;
end $$;

-- Company members
do $$
begin
  if to_regclass('public.company_members') is not null then
    drop policy if exists company_members_select_self on public.company_members;
    create policy company_members_select_self on public.company_members
    for select to authenticated
    using (
      exists (select 1 from public.profiles p where p.id = company_members.profile_id and (p.auth_user_id = auth.uid() or p.user_id = auth.uid()))
      or exists (
        select 1
        from public.company_members m2
        join public.profiles p2 on p2.id = m2.profile_id
        where m2.company_id = company_members.company_id and (p2.auth_user_id = auth.uid() or p2.user_id = auth.uid())
      )
    );

drop policy if exists company_members_insert_owner on public.company_members;
    create policy company_members_insert_owner on public.company_members
    for insert to authenticated
    with check (
      exists (
        select 1
        from public.company_members m
        join public.profiles p on p.id = m.profile_id
        where m.company_id = company_members.company_id and (p.auth_user_id = auth.uid() or p.user_id = auth.uid()) and m.role in ('owner','admin')
      )
    );
  end if;
end $$;

-- Jobs
do $$
begin
  if to_regclass('public.jobs') is not null then
    drop policy if exists jobs_select_open on public.jobs;
    create policy jobs_select_open on public.jobs
    for select using (status in ('open','paused'));

drop policy if exists jobs_insert_company_member on public.jobs;
    create policy jobs_insert_company_member on public.jobs
    for insert to authenticated
    with check (
      exists (select 1 from public.profiles p where p.id = created_by and (p.auth_user_id = auth.uid() or p.user_id = auth.uid()))
    );

drop policy if exists jobs_update_company_member on public.jobs;
    create policy jobs_update_company_member on public.jobs
    for update to authenticated
    using (
      exists (select 1 from public.profiles p where p.id = jobs.created_by and (p.auth_user_id = auth.uid() or p.user_id = auth.uid()))
    );
  end if;
end $$;

-- Job skills
do $$
begin
  if to_regclass('public.job_skills') is not null then
    drop policy if exists job_skills_public_read on public.job_skills;
    create policy job_skills_public_read on public.job_skills
    for select using (true);

drop policy if exists job_skills_write_member on public.job_skills;
    create policy job_skills_write_member on public.job_skills
    for all to authenticated
    using (
      exists (
        select 1
        from public.jobs j
        join public.profiles p on p.id = j.created_by
        where j.id = job_skills.job_id and (p.auth_user_id = auth.uid() or p.user_id = auth.uid())
      )
    )
    with check (
      exists (
        select 1
        from public.jobs j
        join public.profiles p on p.id = j.created_by
        where j.id = job_skills.job_id and (p.auth_user_id = auth.uid() or p.user_id = auth.uid())
      )
    );
  end if;
end $$;

-- Applications
do $$
begin
  if to_regclass('public.applications') is not null then
    drop policy if exists applications_select_self_or_company on public.applications;
    create policy applications_select_self_or_company on public.applications
    for select to authenticated
    using (
      exists (select 1 from public.profiles p where p.id = applications.profile_id and (p.auth_user_id = auth.uid() or p.user_id = auth.uid()))
      or exists (
        select 1
        from public.jobs j
        join public.profiles p on p.id = j.created_by
        where j.id = applications.job_id and (p.auth_user_id = auth.uid() or p.user_id = auth.uid())
      )
    );

drop policy if exists applications_insert_self on public.applications;
    create policy applications_insert_self on public.applications
    for insert to authenticated
    with check (
      exists (select 1 from public.profiles p where p.id = applications.profile_id and (p.auth_user_id = auth.uid() or p.user_id = auth.uid()))
    );

drop policy if exists applications_update_owner_or_employer on public.applications;
    create policy applications_update_owner_or_employer on public.applications
    for update to authenticated
    using (
      exists (select 1 from public.profiles p where p.id = applications.profile_id and (p.auth_user_id = auth.uid() or p.user_id = auth.uid()))
      or exists (
        select 1
        from public.jobs j
        join public.profiles p on p.id = j.created_by
        where j.id = applications.job_id and (p.auth_user_id = auth.uid() or p.user_id = auth.uid())
      )
    );
  end if;
end $$;

-- Conversations & messages (participant-gated)
do $$
begin
  if to_regclass('public.conversations') is not null then
    drop policy if exists conversations_select_participant on public.conversations;
    create policy conversations_select_participant on public.conversations
    for select to authenticated
    using (
      exists (
        select 1
        from public.conversation_participants cp
        join public.profiles p on p.id = cp.profile_id
        where cp.conversation_id = conversations.id and (p.auth_user_id = auth.uid() or p.user_id = auth.uid())
      )
    );
  end if;

if to_regclass('public.conversation_participants') is not null then
    drop policy if exists conversation_participants_crud_participant on public.conversation_participants;
    create policy conversation_participants_crud_participant on public.conversation_participants
    for all to authenticated
    using (
      exists (select 1 from public.profiles p where p.id = conversation_participants.profile_id and (p.auth_user_id = auth.uid() or p.user_id = auth.uid()))
    )
    with check (
      exists (select 1 from public.profiles p where p.id = conversation_participants.profile_id and (p.auth_user_id = auth.uid() or p.user_id = auth.uid()))
    );
  end if;

if to_regclass('public.messages') is not null then
    drop policy if exists messages_select_participant on public.messages;
    create policy messages_select_participant on public.messages
    for select to authenticated
    using (
      exists (
        select 1
        from public.conversation_participants cp
        join public.profiles p on p.id = cp.profile_id
        where cp.conversation_id = messages.conversation_id and (p.auth_user_id = auth.uid() or p.user_id = auth.uid())
      )
    );

drop policy if exists messages_insert_participant on public.messages;
    create policy messages_insert_participant on public.messages
    for insert to authenticated
    with check (
      exists (
        select 1
        from public.conversation_participants cp
        join public.profiles p on p.id = cp.profile_id
        where cp.conversation_id = messages.conversation_id and (p.auth_user_id = auth.uid() or p.user_id = auth.uid())
      )
    );
  end if;
end $$;
[V0_FILE]sql:file="scripts/supabase/migrations/0003_jobs_applications.sql" isMerged="true"
do $main$
begin
  if to_regclass('public.companies') is not null then
    create table if not exists public.jobs (
      id uuid primary key default gen_random_uuid(),
      company_id uuid not null references public.companies(id) on delete cascade,
      created_by uuid not null references public.profiles(id),
      title text not null,
      description text not null,
      job_type text check (job_type in ('full-time','part-time','contract','gig')) not null,
      location_type text check (location_type in ('onsite','remote','hybrid')) not null,
      budget_min numeric(12,2),
      budget_max numeric(12,2),
      currency text default 'USD',
      status text check (status in ('draft','open','paused','closed')) not null default 'open',
      created_at timestamptz not null default now()
    );

create table if not exists public.job_skills (
      job_id uuid not null references public.jobs(id) on delete cascade,
      skill_id uuid not null references public.skills(id) on delete cascade,
      required boolean default true,
      weight int default 1,
      primary key (job_id, skill_id)
    );

drop table if exists public.applications cascade;
    create table if not exists public.applications (
      id uuid primary key default gen_random_uuid(),
      job_id uuid not null references public.jobs(id) on delete cascade,
      profile_id uuid not null references public.profiles(id) on delete cascade,
      cover_letter text,
      expected_rate numeric(12,2),
      status text check (status in ('applied','screening','interview','offer','declined','withdrawn','hired')) not null default 'applied',
      created_at timestamptz not null default now(),
      updated_at timestamptz not null default now()
    );

drop table if exists public.saved_jobs cascade;
    create table if not exists public.saved_jobs (
      profile_id uuid not null references public.profiles(id) on delete cascade,
      job_id uuid not null references public.jobs(id) on delete cascade,
      created_at timestamptz not null default now(),
      primary key (profile_id, job_id)
    );

alter table if exists public.jobs enable row level security;
    alter table if exists public.job_skills enable row level security;
    alter table if exists public.applications enable row level security;
    alter table if exists public.saved_jobs enable row level security;

drop policy if exists jobs_select_open on public.jobs;
    create policy jobs_select_open on public.jobs for select using (status in ('open','paused','closed'));

drop policy if exists jobs_manage_company_members on public.jobs;
    create policy jobs_manage_company_members on public.jobs
      for all
      using (
        exists (
          select 1
          from public.company_members m
          join public.profiles p on p.id = m.profile_id
          where m.company_id = public.jobs.company_id and (p.auth_user_id = auth.uid() or p.user_id = auth.uid())
        )
      )
      with check (
        exists (
          select 1
          from public.company_members m
          join public.profiles p on p.id = m.profile_id
          where m.company_id = public.jobs.company_id and (p.auth_user_id = auth.uid() or p.user_id = auth.uid())
        )
      );

drop policy if exists job_skills_select_all on public.job_skills;
    create policy job_skills_select_all on public.job_skills for select using (true);

drop policy if exists job_skills_modify_managers on public.job_skills;
    create policy job_skills_modify_managers on public.job_skills
      for all
      using (
        exists (
          select 1
          from public.jobs j
          join public.company_members m on m.company_id = j.company_id
          join public.profiles p on p.id = m.profile_id
          where j.id = job_id and (p.auth_user_id = auth.uid() or p.user_id = auth.uid())
        )
      )
      with check (
        exists (
          select 1
          from public.jobs j
          join public.company_members m on m.company_id = j.company_id
          join public.profiles p on p.id = m.profile_id
          where j.id = job_id and (p.auth_user_id = auth.uid() or p.user_id = auth.uid())
        )
      );

drop policy if exists applications_select_self_or_company on public.applications;
    create policy applications_select_self_or_company on public.applications
      for select
      using (
        exists (select 1 from public.profiles p where p.id = profile_id and (p.auth_user_id = auth.uid() or p.user_id = auth.uid()))
        or exists (
          select 1
          from public.jobs j
          join public.company_members m on m.company_id = j.company_id
          join public.profiles p on p.id = m.profile_id
          where j.id = job_id and (p.auth_user_id = auth.uid() or p.user_id = auth.uid())
        )
      );

drop policy if exists applications_insert_by_worker on public.applications;
    create policy applications_insert_by_worker on public.applications
      for insert
      with check (
        exists (select 1 from public.profiles p where p.id = profile_id and (p.auth_user_id = auth.uid() or p.user_id = auth.uid()))
      );

drop policy if exists applications_update_self_status_or_company on public.applications;
    create policy applications_update_self_status_or_company on public.applications
      for update
      using (
        exists (select 1 from public.profiles p where p.id = profile_id and (p.auth_user_id = auth.uid() or p.user_id = auth.uid()))
        or exists (
          select 1
          from public.jobs j
          join public.company_members m on m.company_id = j.company_id
          join public.profiles p on p.id = m.profile_id
          where j.id = job_id and (p.auth_user_id = auth.uid() or p.user_id = auth.uid())
        )
      );

drop policy if exists saved_jobs_select_self on public.saved_jobs;
    create policy saved_jobs_select_self on public.saved_jobs
      for select using (
        exists (select 1 from public.profiles p where p.id = profile_id and (p.auth_user_id = auth.uid() or p.user_id = auth.uid()))
      );

drop policy if exists saved_jobs_modify_self on public.saved_jobs;
    create policy saved_jobs_modify_self on public.saved_jobs
      for all
      using (exists (select 1 from public.profiles p where p.id = profile_id and (p.auth_user_id = auth.uid() or p.user_id = auth.uid())))
      with check (exists (select 1 from public.profiles p where p.id = profile_id and (p.auth_user_id = auth.uid() or p.user_id = auth.uid())));

create index if not exists idx_jobs_status on public.jobs(status);
    create index if not exists idx_jobs_company on public.jobs(company_id);
    create index if not exists idx_apps_job on public.applications(job_id);
    create index if not exists idx_apps_profile on public.applications(profile_id);
    create index if not exists idx_saved_jobs_profile on public.saved_jobs(profile_id);
  end if;
end
$main$;
[V0_FILE]sql:file="scripts/supabase/migrations/0004_messaging.sql" isMerged="true"
do $main$
begin
  -- If companies table is present (or we don't depend on it), allow creation.
  if to_regclass('public.companies') is not null or true then
    create table if not exists public.conversations (
      id uuid primary key default gen_random_uuid(),
      company_id uuid references public.companies(id) on delete set null,
      created_at timestamptz not null default now()
    );

create table if not exists public.conversation_participants (
      conversation_id uuid not null references public.conversations(id) on delete cascade,
      profile_id uuid not null references public.profiles(id) on delete cascade,
      role text check (role in ('worker','employer')) not null,
      joined_at timestamptz not null default now(),
      primary key (conversation_id, profile_id)
    );

create table if not exists public.messages (
      id uuid primary key default gen_random_uuid(),
      conversation_id uuid not null references public.conversations(id) on delete cascade,
      sender_profile_id uuid not null references public.profiles(id) on delete cascade,
      body text not null,
      attachment_url text,
      created_at timestamptz not null default now()
    );

alter table public.conversations enable row level security;
    alter table public.conversation_participants enable row level security;
    alter table public.messages enable row level security;

-- Participants can see their conversations
    create policy "conversations_select_participants" on public.conversations
      for select using (
        exists (
          select 1
          from public.conversation_participants cp
          join public.profiles pr on pr.id = cp.profile_id
          where cp.conversation_id = public.conversations.id
            and (pr.auth_user_id = auth.uid() or pr.user_id = auth.uid())
        )
      );
    create policy "conversations_insert_any_auth" on public.conversations
      for insert with check (auth.role() = 'authenticated'); -- created then participants inserted

create policy "participants_select_self" on public.conversation_participants
      for select using (
        exists (
          select 1
          from public.profiles pr
          where pr.id = public.conversation_participants.profile_id
            and (pr.auth_user_id = auth.uid() or pr.user_id = auth.uid())
        )
        or exists (
          select 1
          from public.conversation_participants p
          join public.profiles pr on pr.id = p.profile_id
          where p.conversation_id = public.conversation_participants.conversation_id
            and (pr.auth_user_id = auth.uid() or pr.user_id = auth.uid())
        )
      );
    create policy "participants_insert_member" on public.conversation_participants
      for insert with check (auth.role() = 'authenticated');
    create policy "participants_delete_self" on public.conversation_participants
      for delete using (
        exists (
          select 1
          from public.profiles pr
          where pr.id = public.conversation_participants.profile_id
            and (pr.auth_user_id = auth.uid() or pr.user_id = auth.uid())
        )
      );

-- Messages: only participants can read/write
    create policy "messages_select_participants" on public.messages
      for select using (
        exists (
          select 1
          from public.conversation_participants p
          join public.profiles pr on pr.id = p.profile_id
          where p.conversation_id = public.messages.conversation_id
            and (pr.auth_user_id = auth.uid() or pr.user_id = auth.uid())
        )
      );
    create policy "messages_insert_participants" on public.messages
      for insert with check (
        exists (
          select 1
          from public.conversation_participants p
          join public.profiles pr on pr.id = p.profile_id
          where p.conversation_id = public.messages.conversation_id
            and (pr.auth_user_id = auth.uid() or pr.user_id = auth.uid())
        )
      );

create index if not exists idx_messages_convo_created on public.messages(conversation_id, created_at desc);
  end if;
end
$main$;
[V0_FILE]sql:file="scripts/supabase/migrations/0005_portfolio_endorsements.sql" isMerged="true"
-- Helpers
create or replace function public.current_profile_id()
returns uuid
language sql
stable
security definer
set search_path = public
as $$
  select id from public.profiles where auth_user_id = auth.uid()
$$;

-- Projects (portfolio)
create table if not exists public.projects (
  id uuid primary key default gen_random_uuid(),
  profile_id uuid not null references public.profiles(id) on delete cascade,
  title text not null,
  description text,
  links jsonb default '[]'::jsonb,
  cover_image_url text,
  created_at timestamptz not null default now()
);

create index if not exists idx_projects_profile_id on public.projects(profile_id);
create index if not exists idx_projects_created_at on public.projects(created_at desc);

-- Project ↔ skills
create table if not exists public.project_skills (
  project_id uuid not null references public.projects(id) on delete cascade,
  skill_id uuid not null references public.skills(id) on delete restrict,
  primary key (project_id, skill_id)
);

-- Endorsements
create table if not exists public.endorsements (
  id uuid primary key default gen_random_uuid(),
  endorser_profile_id uuid not null references public.profiles(id) on delete cascade,
  endorsee_profile_id uuid not null references public.profiles(id) on delete cascade,
  skill_id uuid not null references public.skills(id) on delete restrict,
  comment text,
  created_at timestamptz not null default now(),
  unique (endorser_profile_id, endorsee_profile_id, skill_id)
);
create index if not exists idx_endorsements_endorsee on public.endorsements(endorsee_profile_id, skill_id);

-- Assessments (optional, minimal)
create table if not exists public.assessment_tests (
  id uuid primary key default gen_random_uuid(),
  slug text unique not null,
  name text not null,
  description text,
  skill_id uuid references public.skills(id) on delete set null,
  created_at timestamptz not null default now()
);

create table if not exists public.assessment_attempts (
  id uuid primary key default gen_random_uuid(),
  test_id uuid not null references public.assessment_tests(id) on delete cascade,
  profile_id uuid not null references public.profiles(id) on delete cascade,
  status text not null default 'in_progress',
  score integer,
  started_at timestamptz not null default now(),
  completed_at timestamptz
);
create index if not exists idx_assessment_attempts_profile on public.assessment_attempts(profile_id, test_id);

-- Enable RLS
alter table public.projects enable row level security;
alter table public.project_skills enable row level security;
alter table public.endorsements enable row level security;
alter table public.assessment_tests enable row level security;
alter table public.assessment_attempts enable row level security;

-- RLS: projects - owner can insert/update/delete; public can read
drop policy if exists "projects_read" on public.projects;
create policy "projects_read"
on public.projects for select
to authenticated
using (true);

drop policy if exists "projects_write_own" on public.projects;
create policy "projects_write_own"
on public.projects for all
to authenticated
using (profile_id = current_profile_id())
with check (profile_id = current_profile_id());

-- RLS: project_skills - tied to owning project's owner
drop policy if exists "project_skills_read" on public.project_skills;
create policy "project_skills_read"
on public.project_skills for select
to authenticated
using (true);

drop policy if exists "project_skills_write_owner" on public.project_skills;
create policy "project_skills_write_owner"
on public.project_skills for all
to authenticated
using (
  exists(select 1 from public.projects p where p.id = project_id and p.profile_id = current_profile_id())
)
with check (
  exists(select 1 from public.projects p where p.id = project_id and p.profile_id = current_profile_id())
);

-- RLS: endorsements - anyone authenticated can read; only endorser can insert/delete own endorsement
drop policy if exists "endorsements_read" on public.endorsements;
create policy "endorsements_read"
on public.endorsements for select
to authenticated
using (true);

drop policy if exists "endorsements_write_own" on public.endorsements;
create policy "endorsements_write_own"
on public.endorsements for all
to authenticated
using (endorser_profile_id = current_profile_id())
with check (endorser_profile_id = current_profile_id());

-- RLS: assessment_tests - readable by all; only admin can write (enforced by profile role)
drop policy if exists "assessment_tests_read" on public.assessment_tests;
create policy "assessment_tests_read"
on public.assessment_tests for select
to authenticated
using (true);

drop policy if exists "assessment_tests_admin_write" on public.assessment_tests;
create policy "assessment_tests_admin_write"
on public.assessment_tests for all
to authenticated
using (
  exists(
    select 1 from public.profiles pr
    where pr.id = current_profile_id() and pr.role = 'admin'
  )
)
with check (
  exists(
    select 1 from public.profiles pr
    where pr.id = current_profile_id() and pr.role = 'admin'
  )
);

-- RLS: assessment_attempts - owner can read/write own attempts
drop policy if exists "assessment_attempts_read_own" on public.assessment_attempts;
create policy "assessment_attempts_read_own"
on public.assessment_attempts for select
to authenticated
using (profile_id = current_profile_id());

drop policy if exists "assessment_attempts_write_own" on public.assessment_attempts;
create policy "assessment_attempts_write_own"
on public.assessment_attempts for all
to authenticated
using (profile_id = current_profile_id())
with check (profile_id = current_profile_id());

-- add helpful indexes for performance on project_skills and assessment_tests
create index if not exists idx_project_skills_skill on public.project_skills(skill_id);
create index if not exists idx_assessment_tests_created_at on public.assessment_tests(created_at desc);
[V0_FILE]sql:file="scripts/supabase/migrations/0006_admin_moderation.sql" isMerged="true"
-- Reports (flags)
create table if not exists public.reports (
  id uuid primary key default gen_random_uuid(),
  reporter_profile_id uuid not null references public.profiles(id) on delete cascade,
  target_type text not null, -- 'profile' | 'job' | 'message' | 'project'
  target_id uuid not null,
  reason text not null,
  status text not null default 'open', -- open | reviewing | resolved | dismissed
  created_at timestamptz not null default now()
);
create index if not exists idx_reports_target on public.reports(target_type, target_id);
create index if not exists idx_reports_status on public.reports(status);

-- Moderation actions
create table if not exists public.moderation_actions (
  id uuid primary key default gen_random_uuid(),
  admin_profile_id uuid not null references public.profiles(id) on delete cascade,
  target_type text not null,
  target_id uuid not null,
  action text not null, -- 'hide' | 'delete' | 'suspend'
  reason text,
  created_at timestamptz not null default now()
);
create index if not exists idx_moderation_actions_target on public.moderation_actions(target_type, target_id);

-- Terms acceptance
create table if not exists public.terms_acceptances (
  profile_id uuid primary key references public.profiles(id) on delete cascade,
  version text not null,
  accepted_at timestamptz not null default now(),
  ip text
);

-- Simple audit log
create table if not exists public.audit_log (
  id uuid primary key default gen_random_uuid(),
  actor_profile_id uuid references public.profiles(id) on delete set null,
  table_name text not null,
  row_id uuid not null,
  action text not null, -- insert | update | delete
  created_at timestamptz not null default now(),
  metadata jsonb default '{}'::jsonb
);
create index if not exists idx_audit_log_table on public.audit_log(table_name, row_id);

-- Enable RLS
alter table public.reports enable row level security;
alter table public.moderation_actions enable row level security;
alter table public.terms_acceptances enable row level security;
alter table public.audit_log enable row level security;

-- add robust helper function used by policies; works with either profiles.auth_user_id or profiles.user_id
create or replace function public.current_profile_id()
returns uuid
language plpgsql
stable
as $fn$
declare
  pid uuid;
begin
  -- Try profiles.auth_user_id first; if column doesn't exist, fall back to profiles.user_id
  begin
    execute 'select id from public.profiles where auth_user_id = auth.uid() limit 1' into pid;
  exception when undefined_column then
    execute 'select id from public.profiles where user_id = auth.uid() limit 1' into pid;
  end;
  return pid;
end;
$fn$;

-- RLS: reports
drop policy if exists "reports_read_author_or_admin" on public.reports;
create policy "reports_read_author_or_admin"
on public.reports for select
to authenticated
using (
  reporter_profile_id = current_profile_id()
  or exists(select 1 from public.profiles pr where pr.id = current_profile_id() and pr.role = 'admin')
);

drop policy if exists "reports_insert_owner" on public.reports;
create policy "reports_insert_owner"
on public.reports for insert
to authenticated
with check (reporter_profile_id = current_profile_id());

drop policy if exists "reports_update_admin" on public.reports;
create policy "reports_update_admin"
on public.reports for update
to authenticated
using (exists(select 1 from public.profiles pr where pr.id = current_profile_id() and pr.role = 'admin'))
with check (exists(select 1 from public.profiles pr where pr.id = current_profile_id() and pr.role = 'admin'));

-- RLS: moderation_actions - admin only
drop policy if exists "moderation_actions_admin" on public.moderation_actions;
create policy "moderation_actions_admin"
on public.moderation_actions for all
to authenticated
using (exists(select 1 from public.profiles pr where pr.id = current_profile_id() and pr.role = 'admin'))
with check (exists(select 1 from public.profiles pr where pr.id = current_profile_id() and pr.role = 'admin'));

-- RLS: terms_acceptances - owner only
drop policy if exists "terms_acceptances_owner" on public.terms_acceptances;
create policy "terms_acceptances_owner"
on public.terms_acceptances for all
to authenticated
using (profile_id = current_profile_id())
with check (profile_id = current_profile_id());

-- RLS: audit_log - admin read; inserts done via server logic (optional)
drop policy if exists "audit_admin_read" on public.audit_log;
create policy "audit_admin_read"
on public.audit_log for select
to authenticated
using (exists(select 1 from public.profiles pr where pr.id = current_profile_id() and pr.role = 'admin'));
[V0_FILE]sql:file="scripts/supabase/migrations/0007_worker_onboarding.sql" isMerged="true"
-- 0) Create worker_profiles table when absent
create table if not exists public.worker_profiles (
  profile_id uuid primary key references public.profiles(id) on delete cascade,
  hourly_rate numeric,
  experience text,
  location text,
  tools text,
  verification_intent boolean not null default false,
  work_mode text check (work_mode in ('full','part','freelance')),
  preferred_type text check (preferred_type in ('on-site','remote','both')),
  availability text,
  created_at timestamptz not null default now()
);

-- 1) Storage buckets for portfolio media and ID docs
insert into storage.buckets (id, name, public)
values
  ('project-media', 'project-media', true),
  ('id-docs', 'id-docs', false)
on conflict (id) do nothing;

-- 2) Storage RLS policies
-- Allow public read for project-media; authenticated users can write their own folder
drop policy if exists "pm_read_public" on storage.objects;
create policy "pm_read_public"
on storage.objects for select
to public
using (bucket_id = 'project-media');

drop policy if exists "pm_write_own" on storage.objects;
create policy "pm_write_own"
on storage.objects for insert
to authenticated
with check (
  bucket_id = 'project-media'
  and (storage.foldername(name))[1] = auth.uid()::text
);

drop policy if exists "pm_update_delete_own" on storage.objects;
create policy "pm_update_delete_own"
on storage.objects for all
to authenticated
using (
  bucket_id = 'project-media'
  and (storage.foldername(name))[1] = auth.uid()::text
)
with check (
  bucket_id = 'project-media'
  and (storage.foldername(name))[1] = auth.uid()::text
);

-- id-docs: private; only owner (and admin) can read/write their folder
drop policy if exists "id_insert_own" on storage.objects;
create policy "id_insert_own"
on storage.objects for insert
to authenticated
with check (
  bucket_id = 'id-docs'
  and (storage.foldername(name))[1] = auth.uid()::text
);

drop policy if exists "id_read_owner_or_admin" on storage.objects;
create policy "id_read_owner_or_admin"
on storage.objects for select
to authenticated
using (
  bucket_id = 'id-docs'
  and (
    (storage.foldername(name))[1] = auth.uid()::text
    or exists (
      select 1 from public.profiles p
      where p.auth_user_id = auth.uid() and p.role = 'admin'
    )
  )
);

drop policy if exists "id_update_delete_own" on storage.objects;
create policy "id_update_delete_own"
on storage.objects for all
to authenticated
using (
  bucket_id = 'id-docs'
  and (storage.foldername(name))[1] = auth.uid()::text
)
with check (
  bucket_id = 'id-docs'
  and (storage.foldername(name))[1] = auth.uid()::text
);

-- 3) Ensure worker_profiles columns exist (no-op if already present)
alter table if exists public.worker_profiles
  add column if not exists tools text,
  add column if not exists verification_intent boolean not null default false,
  add column if not exists work_mode text check (work_mode in ('full','part','freelance')),
  add column if not exists preferred_type text check (preferred_type in ('on-site','remote','both')),
  add column if not exists availability text;

-- 3b) Index uses profile_id, not user_id
drop index if exists idx_worker_profiles_user;
create index if not exists idx_worker_profiles_profile on public.worker_profiles(profile_id);

-- 4) RLS policies for worker_profiles (owner upsert/update) using profile_id
drop policy if exists "wp_owner_select" on public.worker_profiles;
create policy "wp_owner_select"
on public.worker_profiles for select
to authenticated
using (
  exists (select 1 from public.profiles p where p.id = public.worker_profiles.profile_id and p.auth_user_id = auth.uid())
);

drop policy if exists "wp_public_minimal" on public.worker_profiles;
create policy "wp_public_minimal"
on public.worker_profiles for select
to public
using (true);

drop policy if exists "wp_owner_upsert" on public.worker_profiles;
create policy "wp_owner_upsert"
on public.worker_profiles for insert
to authenticated
with check (
  exists (select 1 from public.profiles p where p.id = public.worker_profiles.profile_id and p.auth_user_id = auth.uid())
);

drop policy if exists "wp_owner_update" on public.worker_profiles;
create policy "wp_owner_update"
on public.worker_profiles for update
to authenticated
using (
  exists (select 1 from public.profiles p where p.id = public.worker_profiles.profile_id and p.auth_user_id = auth.uid())
)
with check (
  exists (select 1 from public.profiles p where p.id = public.worker_profiles.profile_id and p.auth_user_id = auth.uid())
);

-- 5) Let users manage their own user_skills
drop policy if exists "us_owner_select" on public.user_skills;
create policy "us_owner_select"
on public.user_skills for select
to authenticated
using (
  exists (select 1 from public.profiles p where p.id = public.user_skills.profile_id and p.auth_user_id = auth.uid())
);

drop policy if exists "us_owner_upsert" on public.user_skills;
create policy "us_owner_upsert"
on public.user_skills for insert
to authenticated
with check (
  exists (select 1 from public.profiles p where p.id = public.user_skills.profile_id and p.auth_user_id = auth.uid())
);

drop policy if exists "us_owner_update" on public.user_skills;
create policy "us_owner_update"
on public.user_skills for update
to authenticated
using (
  exists (select 1 from public.profiles p where p.id = public.user_skills.profile_id and p.auth_user_id = auth.uid())
)
with check (
  exists (select 1 from public.profiles p where p.id = public.user_skills.profile_id and p.auth_user_id = auth.uid())
);

-- 6) Skills: allow authenticated users to insert missing skills (guarded)
-- You can tighten this later to admin-only if desired
drop policy if exists "skills_read_all" on public.skills;
create policy "skills_read_all"
on public.skills for select
to public
using (true);

drop policy if exists "skills_insert_auth" on public.skills;
create policy "skills_insert_auth"
on public.skills for insert
to authenticated
with check (
  char_length(slug) between 1 and 64
  and char_length(name) between 1 and 64
);

create index if not exists idx_skills_slug on public.skills(slug);
create index if not exists idx_user_skills_profile on public.user_skills(profile_id);
[V0_FILE]sql:file="scripts/supabase/migrations/0008_sign_up_core.sql" isMerged="true"
-- Profiles with role and onboarding status (idempotent)
create table if not exists public.profiles (
  id uuid primary key default gen_random_uuid(),
  auth_user_id uuid unique,
  role text check (role in ('worker','employer','admin')) default 'worker',
  full_name text,
  company_name text,
  onboarding_status text,
  created_at timestamptz not null default now()
);

create unique index if not exists idx_profiles_auth_user on public.profiles(auth_user_id);

-- Worker profile if not present (may already exist via previous migration)
create table if not exists public.worker_profiles (
  profile_id uuid primary key references public.profiles(id) on delete cascade,
  about text,
  location text,
  verification_intent boolean not null default false,
  created_at timestamptz not null default now()
);

-- Skills catalog
create table if not exists public.skills (
  id bigserial primary key,
  slug text unique,
  name text not null
);

-- User skills mapping
create table if not exists public.user_skills (
  id bigserial primary key,
  profile_id uuid references public.profiles(id) on delete cascade,
  skill_id bigint references public.skills(id) on delete cascade
);

-- Employer profile
create table if not exists public.employer_profiles (
  profile_id uuid primary key references public.profiles(id) on delete cascade,
  company_name text,
  contact_phone text,
  created_at timestamptz not null default now()
);

-- Projects
create table if not exists public.projects (
  id bigserial primary key,
  employer_id uuid references public.profiles(id) on delete cascade,
  title text not null,
  description text,
  budget text,
  status text default 'open',
  created_at timestamptz not null default now(),
  profile_id uuid references public.profiles(id) on delete cascade -- Added profile_id column
);

-- RLS on
alter table public.profiles enable row level security;
alter table public.worker_profiles enable row level security;
alter table public.user_skills enable row level security;
alter table public.employer_profiles enable row level security;
alter table public.projects enable row level security;

-- Policies (owner-based by auth_user_id or employer_id)
drop policy if exists "profiles_owner" on public.profiles;
create policy "profiles_owner" on public.profiles
for all to authenticated
using (auth_user_id = auth.uid())
with check (auth_user_id = auth.uid());

drop policy if exists "worker_profiles_owner" on public.worker_profiles;
create policy "worker_profiles_owner" on public.worker_profiles
for all to authenticated
using (exists (select 1 from public.profiles p where p.id = worker_profiles.profile_id and p.auth_user_id = auth.uid()))
with check (exists (select 1 from public.profiles p where p.id = worker_profiles.profile_id and p.auth_user_id = auth.uid()));

drop policy if exists "employer_profiles_owner" on public.employer_profiles;
create policy "employer_profiles_owner" on public.employer_profiles
for all to authenticated
using (exists (select 1 from public.profiles p where p.id = employer_profiles.profile_id and p.auth_user_id = auth.uid()))
with check (exists (select 1 from public.profiles p where p.id = employer_profiles.profile_id and p.auth_user_id = auth.uid()));

drop policy if exists "projects_owner" on public.projects;
create policy "projects_owner" on public.projects
for all to authenticated
using (
  exists (
    select 1
    from public.profiles p
    where p.id = projects.profile_id and p.auth_user_id = auth.uid()
  )
)
with check (
  exists (
    select 1
    from public.profiles p
    where p.id = projects.profile_id and p.auth_user_id = auth.uid()
  )
);
[V0_FILE]sql:file="scripts/supabase/migrations/0009_analytics.sql" isMerged="true"
create table if not exists public.analytics_events (
  id bigserial primary key,
  user_id uuid,
  event_name text not null,
  payload jsonb,
  created_at timestamptz not null default now()
);

create index if not exists idx_analytics_events_user on public.analytics_events(user_id);
create index if not exists idx_analytics_events_event on public.analytics_events(event_name);
[V0_FILE]sql:file="scripts/supabase/migrations/0010_rls_extra.sql" isMerged="true"
drop policy if exists "skills_read_all" on public.skills;
create policy "skills_read_all" on public.skills
for select to public using (true);

drop policy if exists "user_skills_owner" on public.user_skills;
create policy "user_skills_owner" on public.user_skills
for all to authenticated
using (exists (select 1 from public.profiles p where p.id = user_skills.profile_id and p.auth_user_id = auth.uid()))
with check (exists (select 1 from public.profiles p where p.id = user_skills.profile_id and p.auth_user_id = auth.uid()));

create index if not exists idx_user_skills_profile on public.user_skills(profile_id);
[V0_FILE]sql:file="scripts/supabase/migrations/0011_sign_up_core_v2.sql" isMerged="true"
-- profiles
create table if not exists public.profiles (
  user_id uuid primary key,
  role text check (role in ('worker','employer')),
  full_name text,
  company_name text,
  onboarding_status text default 'started',
  created_at timestamp with time zone default now()
);

-- worker_profiles
create table if not exists public.worker_profiles (
  user_id uuid primary key references public.profiles(user_id) on delete cascade,
  about text,
  location text
);

-- employer_profiles
create table if not exists public.employer_profiles (
  user_id uuid primary key references public.profiles(user_id) on delete cascade,
  company_name text,
  contact_phone text
);

-- skills
create table if not exists public.skills (
  id bigserial primary key,
  user_id uuid references public.profiles(user_id) on delete cascade,
  name text not null,
  level text
);

-- work_samples
create table if not exists public.work_samples (
  id bigserial primary key,
  user_id uuid references public.profiles(user_id) on delete cascade,
  url text,
  caption text
);

-- projects (owner by profile_id to match existing schema)
create table if not exists public.projects (
  id bigserial primary key,
  profile_id uuid references public.profiles(user_id) on delete cascade,
  title text not null,
  description text,
  budget numeric,
  status text default 'draft',
  created_at timestamp with time zone default now()
);
[V0_FILE]sql:file="scripts/supabase/migrations/0012_analytics_v2.sql" isMerged="true"
create table if not exists public.analytics_events (
  id bigserial primary key,
  user_id uuid null,
  event_name text not null,
  payload jsonb,
  created_at timestamp with time zone default now()
);
[V0_FILE]sql:file="scripts/supabase/migrations/0013_rls_extra_v2.sql" isMerged="true"
alter table public.profiles enable row level security;
alter table public.worker_profiles enable row level security;
alter table public.employer_profiles enable row level security;
alter table public.skills enable row level security;
alter table public.work_samples enable row level security;
alter table public.projects enable row level security;
alter table public.analytics_events enable row level security;

-- profiles: users manage their own row
do $$ begin
  if not exists (select 1 from pg_policies where schemaname='public' and tablename='profiles' and policyname='Profiles select own') then
    create policy "Profiles select own" on public.profiles
    for select using (auth.uid() = user_id);
  end if;
end $$;

do $$ begin
  if not exists (select 1 from pg_policies where schemaname='public' and tablename='profiles' and policyname='Profiles modify own') then
    create policy "Profiles modify own" on public.profiles
    for all using (auth.uid() = user_id);
  end if;
end $$;

-- worker_profiles
do $$ begin
  if to_regclass('public.worker_profiles') is not null then
    if not exists (select 1 from pg_policies where schemaname='public' and tablename='worker_profiles' and policyname='Worker profiles select own') then
      create policy "Worker profiles select own" on public.worker_profiles
      for select using (auth.uid() = user_id);
    end if;
    if not exists (select 1 from pg_policies where schemaname='public' and tablename='worker_profiles' and policyname='Worker profiles modify own') then
      create policy "Worker profiles modify own" on public.worker_profiles
      for all using (auth.uid() = user_id);
    end if;
  end if;
end $$;

-- employer_profiles
do $$ begin
  if to_regclass('public.employer_profiles') is not null then
    if not exists (select 1 from pg_policies where schemaname='public' and tablename='employer_profiles' and policyname='Employer profiles select own') then
      create policy "Employer profiles select own" on public.employer_profiles
      for select using (auth.uid() = user_id);
    end if;
    if not exists (select 1 from pg_policies where schemaname='public' and tablename='employer_profiles' and policyname='Employer profiles modify own') then
      create policy "Employer profiles modify own" on public.employer_profiles
      for all using (auth.uid() = user_id);
    end if;
  end if;
end $$;

-- skills
do $$ begin
  if not exists (select 1 from pg_policies where schemaname='public' and tablename='skills' and policyname='Skills select own') then
    create policy "Skills select own" on public.skills
    for select using (auth.uid() = user_id);
  end if;
end $$;

do $$ begin
  if not exists (select 1 from pg_policies where schemaname='public' and tablename='skills' and policyname='Skills modify own') then
    create policy "Skills modify own" on public.skills
    for all using (auth.uid() = user_id);
  end if;
end $$;

-- work_samples
do $$ begin
  if not exists (select 1 from pg_policies where schemaname='public' and tablename='work_samples' and policyname='Work samples select own') then
    create policy "Work samples select own" on public.work_samples
    for select using (auth.uid() = user_id);
  end if;
end $$;

do $$ begin
  if not exists (select 1 from pg_policies where schemaname='public' and tablename='work_samples' and policyname='Work samples modify own') then
    create policy "Work samples modify own" on public.work_samples
    for all using (auth.uid() = user_id);
  end if;
end $$;

-- projects owned by profile_id
do $$ begin
  if not exists (select 1 from pg_policies where schemaname='public' and tablename='projects' and policyname='Projects select own') then
    create policy "Projects select own" on public.projects
    for select using (auth.uid() = profile_id);
  end if;
end $$;

-- analytics_events: allow insert from any authenticated user; no selects required
do $$ begin
  if not exists (select 1 from pg_policies where schemaname='public' and tablename='analytics_events' and policyname='Analytics insert') then
    create policy "Analytics insert" on public.analytics_events
    for insert with check (true);
  end if;
end $$;
[V0_FILE]sql:file="scripts/supabase/migrations/0013b_rls_extra_v2_fix.sql" isMerged="true"
-- Enable RLS for all relevant tables
alter table public.profiles enable row level security;
alter table public.worker_profiles enable row level security;
alter table public.employer_profiles enable row level security;
alter table public.skills enable row level security;
alter table public.work_samples enable row level security;
alter table public.projects enable row level security;
alter table public.analytics_events enable row level security;

-- skills
do $$ begin
  if to_regclass('public.skills') is not null then
    if not exists (select 1 from pg_policies where schemaname='public' and tablename='skills' and policyname='Skills select own') then
      create policy "Skills select own" on public.skills
      for select using (auth.uid() = user_id);
    end if;
    if not exists (select 1 from pg_policies where schemaname='public' and tablename='skills' and policyname='Skills modify own') then
      create policy "Skills modify own" on public.skills
      for all using (auth.uid() = user_id);
    end if;
  end if;
end $$;

-- work_samples
do $$ begin
  if to_regclass('public.work_samples') is not null then
    if not exists (select 1 from pg_policies where schemaname='public' and tablename='work_samples' and policyname='Work samples select own') then
      create policy "Work samples select own" on public.work_samples
      for select using (auth.uid() = user_id);
    end if;
    if not exists (select 1 from pg_policies where schemaname='public' and tablename='work_samples' and policyname='Work samples modify own') then
      create policy "Work samples modify own" on public.work_samples
      for all using (auth.uid() = user_id);
    end if;
  end if;
end $$;

-- projects owned by profile_id
do $$ begin
  if to_regclass('public.projects') is not null then
    if not exists (select 1 from pg_policies where schemaname='public' and tablename='projects' and policyname='Projects select own') then
      create policy "Projects select own" on public.projects
      for select using (auth.uid() = profile_id);
    end if;
    if not exists (select 1 from pg_policies where schemaname='public' and tablename='projects' and policyname='Projects modify own') then
      create policy "Projects modify own" on public.projects
      for all using (auth.uid() = profile_id);
    end if;
  end if;
end $$;

-- analytics_events: allow insert from any authenticated user; no selects required
do $$ begin
  if to_regclass('public.analytics_events') is not null then
    if not exists (select 1 from pg_policies where schemaname='public' and tablename='analytics_events' and policyname='Analytics insert') then
      create policy "Analytics insert" on public.analytics_events
      for insert with check (true);
    end if;
  end if;
end $$;
[V0_FILE]sql:file="scripts/supabase/migrations/0014_sign_up_core_v3.sql" isMerged="true"
/* 
  Add missing onboarding_status to existing profiles table
  This aligns our app logic with your live schema:
  - profiles already exists with columns (id, auth_user_id, role, ...).
  - We only add onboarding_status and leave all other tables intact.
*/

alter table public.profiles
  add column if not exists onboarding_status text default 'started';
[V0_FILE]sql:file="scripts/supabase/migrations/0015_rls_extra_v3.sql" isMerged="true"
/*
  Enable RLS and create idempotent policies matching the live schema
  Key mapping rules:
  - The authenticated user is matched by profiles.auth_user_id = auth.uid()
  - Child tables use profile_id that references profiles.id
  - Use DO blocks to avoid "IF NOT EXISTS" syntax errors on CREATE POLICY
*/

/* Enable RLS (safe if already enabled) */
alter table public.profiles enable row level security;
alter table public.worker_profiles enable row level security;
alter table public.employer_profiles enable row level security;
alter table public.projects enable row level security;
alter table public.analytics_events enable row level security;

/* PROFILES: user can select/modify their own row based on auth_user_id */
do $$
begin
  if not exists (
    select 1 from pg_policies 
    where schemaname='public' and tablename='profiles' and policyname='Profiles select own'
  ) then
    create policy "Profiles select own" on public.profiles
      for select using (auth.uid() = auth_user_id);
  end if;
end
$$;

do $$
begin
  if not exists (
    select 1 from pg_policies 
    where schemaname='public' and tablename='profiles' and policyname='Profiles modify own'
  ) then
    create policy "Profiles modify own" on public.profiles
      for all
      using (auth.uid() = auth_user_id)
      with check (auth.uid() = auth_user_id);
  end if;
end
$$;

/* WORKER_PROFILES: access via matching profile_id -> profiles.id with auth_user_id */
do $$
begin
  if not exists (
    select 1 from pg_policies 
    where schemaname='public' and tablename='worker_profiles' and policyname='Worker profiles select own'
  ) then
    create policy "Worker profiles select own" on public.worker_profiles
      for select using (
        exists (
          select 1 from public.profiles p
          where p.id = profile_id and p.auth_user_id = auth.uid()
        )
      );
  end if;
end
$$;

do $$
begin
  if not exists (
    select 1 from pg_policies 
    where schemaname='public' and tablename='worker_profiles' and policyname='Worker profiles modify own'
  ) then
    create policy "Worker profiles modify own" on public.worker_profiles
      for all
      using (
        exists (
          select 1 from public.profiles p
          where p.id = profile_id and p.auth_user_id = auth.uid()
        )
      )
      with check (
        exists (
          select 1 from public.profiles p
          where p.id = profile_id and p.auth_user_id = auth.uid()
        )
      );
  end if;
end
$$;

/* EMPLOYER_PROFILES: same pattern as worker_profiles */
do $$
begin
  if not exists (
    select 1 from pg_policies 
    where schemaname='public' and tablename='employer_profiles' and policyname='Employer profiles select own'
  ) then
    create policy "Employer profiles select own" on public.employer_profiles
      for select using (
        exists (
          select 1 from public.profiles p
          where p.id = profile_id and p.auth_user_id = auth.uid()
        )
      );
  end if;
end
$$;

do $$
begin
  if not exists (
    select 1 from pg_policies 
    where schemaname='public' and tablename='employer_profiles' and policyname='Employer profiles modify own'
  ) then
    create policy "Employer profiles modify own" on public.employer_profiles
      for all
      using (
        exists (
          select 1 from public.profiles p
          where p.id = profile_id and p.auth_user_id = auth.uid()
        )
      )
      with check (
        exists (
          select 1 from public.profiles p
          where p.id = profile_id and p.auth_user_id = auth.uid()
        )
      );
  end if;
end
$$;

/* PROJECTS: ownership via profile_id */
do $$
begin
  if not exists (
    select 1 from pg_policies 
    where schemaname='public' and tablename='projects' and policyname='Projects select own'
  ) then
    create policy "Projects select own" on public.projects
      for select using (
        exists (
          select 1 from public.profiles p
          where p.id = profile_id and p.auth_user_id = auth.uid()
        )
      );
  end if;
end
$$;

do $$
begin
  if not exists (
    select 1 from pg_policies 
    where schemaname='public' and tablename='projects' and policyname='Projects modify own'
  ) then
    create policy "Projects modify own" on public.projects
      for all
      using (
        exists (
          select 1 from public.profiles p
          where p.id = profile_id and p.auth_user_id = auth.uid()
        )
      )
      with check (
        exists (
          select 1 from public.profiles p
          where p.id = profile_id and p.auth_user_id = auth.uid()
        )
      );
  end if;
end
$$;

/* ANALYTICS: allow inserts from any authenticated user; no selects required */
do $$
begin
  if not exists (
    select 1 from pg_policies 
    where schemaname='public' and tablename='analytics_events' and policyname='Analytics insert'
  ) then
    create policy "Analytics insert" on public.analytics_events
      for insert with check (auth.uid() is not null);
  end if;
end
$$;
[V0_FILE]sql:file="scripts/supabase/migrations/0016_profiles_user_id_alias.sql" isMerged="true"
-- This migration is idempotent and forward-only.
-- It adds a generated alias column user_id == id and makes it UNIQUE
-- so foreign keys can reference profiles(user_id).

do $$
begin
  if to_regclass('public.profiles') is not null then
    if not exists (
      select 1
      from information_schema.columns
      where table_schema = 'public'
        and table_name = 'profiles'
        and column_name = 'user_id'
    ) then
      -- Generated column mirrors id; safe and always in sync
      execute $ddl$
        alter table public.profiles
        add column user_id uuid generated always as (id) stored
      $ddl$;

-- Ensure FKs can target this column
      -- (FKs require a unique or primary key on referenced column)
      execute $ddl$
        alter table public.profiles
        add constraint profiles_user_id_unique unique (user_id)
      $ddl$;
    end if;
  end if;
end
$$;
[V0_FILE]sql:file="scripts/supabase/migrations/0017_rls_extra_v2_fix.sql" isMerged="true"
-- This migration avoids "create policy if not exists" (invalid in PG versions <15)
-- It adapts to either schema variant:
--  - Tables with user_id columns (from 0011)
--  - Tables with profile_id and join to profiles.auth_user_id (from 0001/0008)
-- All blocks are guarded by to_regclass checks to avoid errors if tables don't exist.

-- Profiles: assume existing policies from earlier migrations (0002); do not override here.

-- Worker profiles
do $$
begin
  if to_regclass('public.worker_profiles') is not null then
    execute 'alter table public.worker_profiles enable row level security';

if exists (
      select 1 from information_schema.columns
      where table_schema='public' and table_name='worker_profiles' and column_name='user_id'
    ) then
      -- Variant with user_id
      execute 'drop policy if exists "Worker profiles select own" on public.worker_profiles';
      execute 'drop policy if exists "Worker profiles modify own" on public.worker_profiles';
      execute $p$
        create policy "Worker profiles select own" on public.worker_profiles
        for select to authenticated
        using (auth.uid() = user_id)
      $p$;
      execute $p$
        create policy "Worker profiles modify own" on public.worker_profiles
        for all to authenticated
        using (auth.uid() = user_id)
        with check (auth.uid() = user_id)
      $p$;
    elsif exists (
      select 1 from information_schema.columns
      where table_schema='public' and table_name='worker_profiles' and column_name='profile_id'
    ) then
      -- Variant with profile_id -> profiles(id) and auth_user_id
      execute 'drop policy if exists "worker_profiles_owner" on public.worker_profiles';
      execute $p$
        create policy "worker_profiles_owner" on public.worker_profiles
        for all to authenticated
        using (
          exists (
            select 1 from public.profiles p
            where p.id = worker_profiles.profile_id
              and p.auth_user_id = auth.uid()
          )
        )
        with check (
          exists (
            select 1 from public.profiles p
            where p.id = worker_profiles.profile_id
              and p.auth_user_id = auth.uid()
          )
        )
      $p$;
    end if;
  end if;
end
$$;

-- Employer profiles
do $$
begin
  if to_regclass('public.employer_profiles') is not null then
    execute 'alter table public.employer_profiles enable row level security';

if exists (
      select 1 from information_schema.columns
      where table_schema='public' and table_name='employer_profiles' and column_name='user_id'
    ) then
      execute 'drop policy if exists "Employer profiles select own" on public.employer_profiles';
      execute 'drop policy if exists "Employer profiles modify own" on public.employer_profiles';
      execute $p$
        create policy "Employer profiles select own" on public.employer_profiles
        for select to authenticated
        using (auth.uid() = user_id)
      $p$;
      execute $p$
        create policy "Employer profiles modify own" on public.employer_profiles
        for all to authenticated
        using (auth.uid() = user_id)
        with check (auth.uid() = user_id)
      $p$;
    elsif exists (
      select 1 from information_schema.columns
      where table_schema='public' and table_name='employer_profiles' and column_name='profile_id'
    ) then
      execute 'drop policy if exists "employer_profiles_owner" on public.employer_profiles';
      execute $p$
        create policy "employer_profiles_owner" on public.employer_profiles
        for all to authenticated
        using (
          exists (
            select 1 from public.profiles p
            where p.id = employer_profiles.profile_id
              and p.auth_user_id = auth.uid()
          )
        )
        with check (
          exists (
            select 1 from public.profiles p
            where p.id = employer_profiles.profile_id
              and p.auth_user_id = auth.uid()
          )
        )
      $p$;
    end if;
  end if;
end
$$;

-- Skills (only if a per-user skills table exists with user_id)
do $$
begin
  if to_regclass('public.skills') is not null then
    -- Only apply "own row" policies if table has user_id (0011 variant)
    if exists (
      select 1 from information_schema.columns
      where table_schema='public' and table_name='skills' and column_name='user_id'
    ) then
      execute 'alter table public.skills enable row level security';
      execute 'drop policy if exists "Skills select own" on public.skills';
      execute 'drop policy if exists "Skills modify own" on public.skills';
      execute $p$
        create policy "Skills select own" on public.skills
        for select to authenticated
        using (auth.uid() = user_id)
      $p$;
      execute $p$
        create policy "Skills modify own" on public.skills
        for all to authenticated
        using (auth.uid() = user_id)
        with check (auth.uid() = user_id)
      $p$;
    end if;
  end if;
end
$$;

-- Work samples (0011 variant)
do $$
begin
  if to_regclass('public.work_samples') is not null then
    execute 'alter table public.work_samples enable row level security';

if exists (
      select 1 from information_schema.columns
      where table_schema='public' and table_name='work_samples' and column_name='user_id'
    ) then
      execute 'drop policy if exists "Work samples select own" on public.work_samples';
      execute 'drop policy if exists "Work samples modify own" on public.work_samples';
      execute $p$
        create policy "Work samples select own" on public.work_samples
        for select to authenticated
        using (auth.uid() = user_id)
      $p$;
      execute $p$
        create policy "Work samples modify own" on public.work_samples
        for all to authenticated
        using (auth.uid() = user_id)
        with check (auth.uid() = user_id)
      $p$;
    end if;
  end if;
end
$$;

-- Projects (prefer joining via profiles if profile_id present)
do $$
begin
  if to_regclass('public.projects') is not null then
    execute 'alter table public.projects enable row level security';

if exists (
      select 1 from information_schema.columns
      where table_schema='public' and table_name='projects' and column_name='profile_id'
    ) then
      execute 'drop policy if exists "projects_owner" on public.projects';
      execute 'drop policy if exists "Projects select own" on public.projects';
      execute 'drop policy if exists "Projects modify own" on public.projects';
      execute $p$
        create policy "projects_owner" on public.projects
        for all to authenticated
        using (
          exists (
            select 1
            from public.profiles p
            where p.id = projects.profile_id
              and p.auth_user_id = auth.uid()
          )
        )
        with check (
          exists (
            select 1
            from public.profiles p
            where p.id = projects.profile_id
              and p.auth_user_id = auth.uid()
          )
        )
      $p$;
    end if;
  end if;
end
$$;

-- Analytics events: allow inserts by any authenticated user
do $$
begin
  if to_regclass('public.analytics_events') is not null then
    execute 'alter table public.analytics_events enable row level security';
    execute 'drop policy if exists "Analytics insert" on public.analytics_events';
    execute $p$
      create policy "Analytics insert" on public.analytics_events
      for insert to authenticated
      with check (true)
    $p$;
  end if;
end
$$;
[V0_FILE]sql:file="scripts/supabase/migrations/0020_personal_dashboard.sql" isMerged="true"
do $$
begin
  if not exists (
    select 1 from pg_policies where policyname = 'time_entries_select_own'
  ) then
    create policy time_entries_select_own on public.time_entries
      for select using (auth.uid() = user_id);
  end if;

if not exists (
    select 1 from pg_policies where policyname = 'time_entries_insert_own'
  ) then
    create policy time_entries_insert_own on public.time_entries
      for insert with check (auth.uid() = user_id);
  end if;

if not exists (
    select 1 from pg_policies where policyname = 'time_entries_update_own'
  ) then
    create policy time_entries_update_own on public.time_entries
      for update using (auth.uid() = user_id);
  end if;

if not exists (
    select 1 from pg_policies where policyname = 'user_tasks_select_own'
  ) then
    create policy user_tasks_select_own on public.user_tasks
      for select using (auth.uid() = user_id);
  end if;

if not exists (
    select 1 from pg_policies where policyname = 'user_tasks_insert_own'
  ) then
    create policy user_tasks_insert_own on public.user_tasks
      for insert with check (auth.uid() = user_id);
  end if;

if not exists (
    select 1 from pg_policies where policyname = 'user_tasks_update_own'
  ) then
    create policy user_tasks_update_own on public.user_tasks
      for update using (auth.uid() = user_id);
  end if;
end $$;
[V0_FILE]sql:file="scripts/supabase/migrations/0020b_personal_dashboard_fix.sql" isMerged="true"
/* Create per-user tables for the personal dashboard */

-- time_entries: track work sessions
create table if not exists public.time_entries (
  id uuid primary key default gen_random_uuid(),
  user_id uuid not null references auth.users(id) on delete cascade,
  started_at timestamptz not null,
  ended_at timestamptz,
  duration_sec int generated always as (case when ended_at is not null then greatest(0, extract(epoch from (ended_at - started_at)))::int else null end) stored,
  created_at timestamptz not null default now(),
  updated_at timestamptz not null default now()
);

-- user_tasks: simple personal tasks/onboarding
create table if not exists public.user_tasks (
  id uuid primary key default gen_random_uuid(),
  user_id uuid not null references auth.users(id) on delete cascade,
  title text not null,
  done boolean not null default false,
  due_at timestamptz,
  created_at timestamptz not null default now(),
  updated_at timestamptz not null default now()
);

-- Enable RLS (policies will be added in next migration)
alter table public.time_entries enable row level security;
alter table public.user_tasks enable row level security;

-- Useful indexes
create index if not exists idx_time_entries_user_started on public.time_entries(user_id, started_at desc);
create index if not exists idx_user_tasks_user_due on public.user_tasks(user_id, coalesce(due_at, created_at) desc);
[V0_FILE]sql:file="scripts/supabase/migrations/0021b_rls_personal_dashboard_fix.sql" isMerged="true"
/* Apply RLS policies for personal dashboard tables */

-- Policies for time_entries
create policy "time_entries_select_own" on public.time_entries
  for select using (auth.uid() = user_id);
create policy "time_entries_insert_own" on public.time_entries
  for insert with check (auth.uid() = user_id);
create policy "time_entries_update_own" on public.time_entries
  for update using (auth.uid() = user_id);

-- Policies for user_tasks
create policy "user_tasks_select_own" on public.user_tasks
  for select using (auth.uid() = user_id);
create policy "user_tasks_insert_own" on public.user_tasks
  for insert with check (auth.uid() = user_id);
create policy "user_tasks_update_own" on public.user_tasks
  for update using (auth.uid() = user_id);
[V0_FILE]css:file="styles/globals.css" isMerged="true"
@import "tailwindcss";
/* @import "tw-animate-css"; */

: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 {
  /* @NOTE: This duplicate theme block conflicts with the main one in app/globals.css.
     Commenting its content to keep a single source of truth and fix the parse error. */
  /* --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" isMerged="true"
{
  "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="utils/open-login.ts" isMerged="true"
export function openLogin() {
  if (typeof window !== "undefined") {
    window.dispatchEvent(new CustomEvent("open-login"))
  }
}
[V0_FILE]png:file="app/icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/WkC9an70-eeykFqz6XNrWC/app/icon.png" isMerged="true"
[V0_FILE]png:file="app/opengraph-image.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/zFznRTUj0aueFDy7i_HVVm/app/opengraph-image.png" isMerged="true"
[V0_FILE]png:file="public/abstract-geometric-shapes.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/yBRMCEDQZXo8yRtkLhZdHA/public/abstract-geometric-shapes.png" isMerged="true"
[V0_FILE]png:file="public/abstract-gradient.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/1SytW_qxO69SNqslQYo-AB/public/abstract-gradient.png" isMerged="true"
[V0_FILE]png:file="public/abstract-profile.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/kty93_OEstylaB-RM8aiYv/public/abstract-profile.png" isMerged="true"
[V0_FILE]jpg:file="public/adobe-logo-red-a-symbol.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/VYZP0kt3OoCuba4jT0j3mG/public/adobe-logo-red-a-symbol.jpg" isMerged="true"
[V0_FILE]jpg:file="public/airbnb-logo-pink-coral-symbol.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/rSLuGJHHuJotZRHEt2fPuC/public/airbnb-logo-pink-coral-symbol.jpg" isMerged="true"
[V0_FILE]png:file="public/android-chrome-192x192.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/WkC9an70-eeykFqz6XNrWC/public/android-chrome-192x192.png" isMerged="true"
[V0_FILE]png:file="public/android-chrome-512x512.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/WkC9an70-eeykFqz6XNrWC/public/android-chrome-512x512.png" isMerged="true"
[V0_FILE]jpg:file="public/apple-logo-silver-bitten-apple.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/2l6wLdkt4spcehDMN-RgZ4/public/apple-logo-silver-bitten-apple.jpg" isMerged="true"
[V0_FILE]png:file="public/apple-touch-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/WkC9an70-eeykFqz6XNrWC/public/apple-touch-icon.png" isMerged="true"
[V0_FILE]jpg:file="public/bank-of-america-logo-red-blue-flag.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/k9jcKQK2qK-oTqfyNnsL9-/public/bank-of-america-logo-red-blue-flag.jpg" isMerged="true"
[V0_FILE]jpg:file="public/dell-logo-blue-letters.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/uAodjm7zjfnl3GZSQyKsj3/public/dell-logo-blue-letters.jpg" isMerged="true"
[V0_FILE]png:file="public/diverse-avatars.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/1qflLrmC4Tiq3GP54oqgmz/public/diverse-avatars.png" isMerged="true"
[V0_FILE]png:file="public/diverse-person-avatars.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/NYrwbKf1Xp3u_vKIi2b0zW/public/diverse-person-avatars.png" isMerged="true"
[V0_FILE]jpg:file="public/dropbox-logo-blue-box.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/b2Au8QwMXBPpyfNwRJ_eA5/public/dropbox-logo-blue-box.jpg" isMerged="true"
[V0_FILE]jpg:file="public/ey-logo-yellow-black-letters.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/YySbWpjfo3_cupDTb0QFBp/public/ey-logo-yellow-black-letters.jpg" isMerged="true"
[V0_FILE]png:file="public/favicon-16x16.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/WkC9an70-eeykFqz6XNrWC/public/favicon-16x16.png" isMerged="true"
[V0_FILE]png:file="public/favicon-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/WkC9an70-eeykFqz6XNrWC/public/favicon-32x32.png" isMerged="true"
[V0_FILE]plaintext:file="public/favicon.ico" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/WkC9an70-eeykFqz6XNrWC/public/favicon.ico" isMerged="true"
[V0_FILE]plaintext:file="public/fonts/GeistSans-Bold.woff2" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/dZ9A9pOpZDebEoq7_oXCJn/public/fonts/GeistSans-Bold.woff2" isMerged="true"
[V0_FILE]plaintext:file="public/fonts/GeistSans-Medium.woff2" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/dZ9A9pOpZDebEoq7_oXCJn/public/fonts/GeistSans-Medium.woff2" isMerged="true"
[V0_FILE]plaintext:file="public/fonts/GeistSans-Regular.woff2" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/dZ9A9pOpZDebEoq7_oXCJn/public/fonts/GeistSans-Regular.woff2" isMerged="true"
[V0_FILE]plaintext:file="public/fonts/GeistSans-SemiBold.woff2" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/dZ9A9pOpZDebEoq7_oXCJn/public/fonts/GeistSans-SemiBold.woff2" isMerged="true"
[V0_FILE]jpg:file="public/google-logo-colorful-letters.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/XhuueZtMfMG7v7bngAIjUx/public/google-logo-colorful-letters.jpg" isMerged="true"
[V0_FILE]jpg:file="public/google-logomark.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/G_4LxpGMi01rTbGKXOlI37/public/google-logomark.jpg" isMerged="true"
[V0_FILE]jpg:file="public/hilton-logo-blue-letters.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/WapNKkNyw6q1YVufVGuE3v/public/hilton-logo-blue-letters.jpg" isMerged="true"
[V0_FILE]jpg:file="public/ibm-logo-blue-letters.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/tRDqbqQmodMbgk9nxJimYl/public/ibm-logo-blue-letters.jpg" isMerged="true"
[V0_FILE]jpeg:file="public/images/design-mode/4cadcc29-d454-423b-9f5b-a76003a0fb63.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/k_OufnrBRoI8Qy_oxHvB_E/public/images/design-mode/4cadcc29-d454-423b-9f5b-a76003a0fb63.jpeg" isMerged="true"
[V0_FILE]jpg:file="public/images/design-mode/ChatGPT%20Image%20Oct%2012%2C%202025%2C%2005_25_17%20PM%281%29.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/Akzn2blOS9Xkfe_Or0pElJ/public/images/design-mode/ChatGPT%20Image%20Oct%2012%2C%202025%2C%2005_25_17%20PM%281%29.jpg" isMerged="true"
[V0_FILE]jpeg:file="public/images/design-mode/Image%20to%20ASCII%20May%2029%202025.jpg.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/XylE4xSLacAVEp-jM5lgMA/public/images/design-mode/Image%20to%20ASCII%20May%2029%202025.jpg.jpeg" isMerged="true"
[V0_FILE]png:file="public/images/design-mode/Picsart_25-10-06_23-22-59-176%281%29%281%29.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/WkC9an70-eeykFqz6XNrWC/public/images/design-mode/Picsart_25-10-06_23-22-59-176%281%29%281%29.png" isMerged="true"
[V0_FILE]png:file="public/images/design-mode/Screenshot%202025-10-13%20215659.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/CLqSXTM6Qsq1U5682UOQMY/public/images/design-mode/Screenshot%202025-10-13%20215659.png" isMerged="true"
[V0_FILE]jpeg:file="public/images/design-mode/hero-image.jpg.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/27sp_0qQp85GnYH2N16Gnn/public/images/design-mode/hero-image.jpg.jpeg" isMerged="true"
[V0_FILE]png:file="public/images/design-mode/in.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/5BcTBaHZQ9RBfixU1duYUX/public/images/design-mode/in.png" isMerged="true"
[V0_FILE]jpeg:file="public/images/design-mode/og.jpg.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/ZPHYwdSoUPKMtpJALt5DCQ/public/images/design-mode/og.jpg.jpeg" isMerged="true"
[V0_FILE]png:file="public/images/gradient-hero-prerender.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/r1owAyeaUs4FT2SwyhuRqr/public/images/gradient-hero-prerender.png" isMerged="true"
[V0_FILE]png:file="public/images/hero-bg.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/vRPxTinjYMghFSeSMJq4xy/public/images/hero-bg.png" isMerged="true"
[V0_FILE]png:file="public/images/hero-frame.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/b-skmFS_CeMbk-REaTZR3G/public/images/hero-frame.png" isMerged="true"
[V0_FILE]jpg:file="public/images/hero-interface.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/27sp_0qQp85GnYH2N16Gnn/public/images/hero-interface.jpg" isMerged="true"
[V0_FILE]plaintext:file="public/images/noise.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/-v8ywIejHB9fitc4Ca8Zz_/public/images/noise.webp" isMerged="true"
[V0_FILE]jpeg:file="public/images/og-new.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/ZPHYwdSoUPKMtpJALt5DCQ/public/images/og-new.jpeg" isMerged="true"
[V0_FILE]png:file="public/images/og.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/zFznRTUj0aueFDy7i_HVVm/public/images/og.png" isMerged="true"
[V0_FILE]jpeg:file="public/images/preview-thumbnail.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/wUSC-RXJgElgPw2gc9Rko3/public/images/preview-thumbnail.jpeg" isMerged="true"
[V0_FILE]jpg:file="public/images/profiles/anuj.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/No35SqVxm4t8ADSCF66Z3U/public/images/profiles/anuj.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/profiles/anushk.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/v63cDkpXFMjc6z8brkpq8R/public/images/profiles/anushk.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/profiles/bnj.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/ORJzNm3lbJMoWHy32lPsN_/public/images/profiles/bnj.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/profiles/emrah.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/bSjlH8uwDROlaYlh2_XJFX/public/images/profiles/emrah.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/profiles/ian.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/SyJtkVSvygWAa5LNGEZM_w/public/images/profiles/ian.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/profiles/kitze.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/3gG2tlG4xjydAAplZujeyU/public/images/profiles/kitze.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/profiles/tom.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/-drU-uTajDZ1QeR0SJdSG7/public/images/profiles/tom.jpg" isMerged="true"
[V0_FILE]jpeg:file="public/images/restore-thumbnail.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/GRYfXbEyIDOtUNIVGFwAVI/public/images/restore-thumbnail.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/rick-rubin-portrait.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/r7mUZ0-8Cz4G3v91V-yw00/public/images/rick-rubin-portrait.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/save-thumbnail.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/Misk6MA9f-rKB0ecIBX3Q0/public/images/save-thumbnail.jpeg" isMerged="true"
[V0_FILE]png:file="public/images/shiftza-logo-transparent.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/WkC9an70-eeykFqz6XNrWC/public/images/shiftza-logo-transparent.png" isMerged="true"
[V0_FILE]png:file="public/images/shiftza-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/WkC9an70-eeykFqz6XNrWC/public/images/shiftza-logo.png" isMerged="true"
[V0_FILE]png:file="public/images/vibes-bg.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/fm2dlBkKK2kan8KabULQ5w/public/images/vibes-bg.png" isMerged="true"
[V0_FILE]png:file="public/images/worker-flow-bg.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/lFjaUNxCufjRIuNGVT14q4/public/images/worker-flow-bg.png" isMerged="true"
[V0_FILE]png:file="public/logos/adobe-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/UQWiEW5BKgpG1IyF48Gftt/public/logos/adobe-logo.png" isMerged="true"
[V0_FILE]jpg:file="public/netflix-logo-red-letters.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/CyXAduRnqHvWCbBw6oQQ8W/public/netflix-logo-red-letters.jpg" isMerged="true"
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" isMerged="true"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" isMerged="true"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" isMerged="true"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" isMerged="true"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" isMerged="true"
[V0_FILE]png:file="public/professional-devops-engineer.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/bBv33C8M-23LJhLPAd-LBh/public/professional-devops-engineer.png" isMerged="true"
[V0_FILE]jpg:file="public/professional-man-designer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/u74k8Pz8j7FcTucS-_jFKp/public/professional-man-designer.jpg" isMerged="true"
[V0_FILE]png:file="public/professional-mobile-developer.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/y7EsoJIOqGF00paWPWCQAm/public/professional-mobile-developer.png" isMerged="true"
[V0_FILE]jpg:file="public/professional-woman-analyst.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/9cwDz16xOC4HsK9Ew8CliN/public/professional-woman-analyst.jpg" isMerged="true"
[V0_FILE]jpg:file="public/professional-woman-content-strategist.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/sr2GiPcTkHoDhq4SVDJIHV/public/professional-woman-content-strategist.jpg" isMerged="true"
[V0_FILE]png:file="public/professional-woman-developer.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/hr9HWPocHrMRvlJ8lIg3zV/public/professional-woman-developer.png" isMerged="true"
[V0_FILE]jpg:file="public/tesla-logo-red-t-symbol.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/vmkMhz1PRy7xFt3z0yVmNR/public/tesla-logo-red-t-symbol.jpg" isMerged="true"
[V0_FILE]jpg:file="public/zoho-logo-orange-red-letters.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O7SON4xMIbiwo9q4ZRBu3UqkvbIp/zk_5ZE1o9MVtCzKJ9yNtrf/public/zoho-logo-orange-red-letters.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/sign-up/employer/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { getSupabaseBrowser } from "@/lib/supabase-browser"
import { useRouter } from "next/navigation"
import Link from "next/link"

export default function EmployerSignUp() {
  const supabase = getSupabaseBrowser()
  const router = useRouter()
  const [company, setCompany] = useState("")
  const [email, setEmail] = useState("")
  const [phone, setPhone] = useState("")
  const [password, setPassword] = useState("")
  const [agree, setAgree] = useState(false)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [phase, setPhase] = useState<"form" | "otp">("form")
  const [otp, setOtp] = useState("")
  const [otpError, setOtpError] = useState<string | null>(null)
  const [otpVerifying, setOtpVerifying] = useState(false)
  const [otpResending, setOtpResending] = useState(false)

async function onSubmit(e: React.FormEvent) {
    e.preventDefault()
    setError(null)
    if (!agree) {
      setError("Please accept the terms to continue.")
      return
    }
    setLoading(true)
    try {
      const r = await fetch("/api/auth/admin-signup", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          email,
          password,
          role: "employer",
          company_name: company,
          contact_phone: phone || null,
        }),
      })

const signupData = await r.json().catch(() => ({ error: "Sign up failed." }))

if (signupData.reason === "email_exists") {
        setError("This email is already registered. Please log in instead or use a different email.")
        setLoading(false)
        return
      }

if (!(r.status === 201 || r.status === 200 || r.status === 409)) {
        throw new Error(signupData.error || "Sign up failed.")
      }

const signInRes = await fetch("/api/auth/sign-in", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, password }),
        credentials: "include",
      })
      if (!signInRes.ok) {
        const { error: sErr } = await signInRes.json().catch(() => ({ error: "Sign in failed." }))
        throw new Error(sErr || "Sign in failed.")
      }

const boot = await fetch("/api/signup/bootstrap", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          role: "employer",
          company_name: company,
          contact_phone: phone || null,
        }),
        credentials: "include",
      })
      if (!boot.ok) {
        const { error: bErr } = await boot.json().catch(() => ({ error: "Failed to save profile." }))
        throw new Error(bErr || "Failed to save profile.")
      }

router.push("/sign-up/employer/project")
    } catch (err: any) {
      setError(err?.message ?? "Sign up failed.")
    } finally {
      setLoading(false)
    }
  }

return (
    <main className="w-full bg-gradient-to-br from-slate-50 to-blue-50 py-12 px-4 sm:px-6 md:px-8 lg:px-12">
      <div className="w-full max-w-6xl mx-auto">
        <div className="mb-6 text-sm text-slate-500 font-medium">Step 2 of 5</div>
        <h1 className="text-3xl md:text-4xl font-bold mb-4 text-slate-900">Hire by Skill, Not by Paper.</h1>
        <p className="text-lg text-slate-700 mb-8 text-pretty font-medium">
          Build teams that can actually deliver — not just impress on paper.
        </p>

<div className="space-y-4 text-slate-600 text-base leading-relaxed mb-12 bg-white rounded-lg p-6 md:p-8 shadow-sm border border-slate-200">
          <p>
            You've seen it — impressive résumés, polished LinkedIn profiles, degrees that look great on paper. But when it comes to real work, results don't always follow.
          </p>
          <p>
            The best talent doesn't always come with a certificate — it comes with dedication, skill, and proof of
            performance.
          </p>
          <p>
            Shiftza helps your company connect directly with verified, project-ready professionals who have been tested,
            reviewed, and proven by their work. Join the skills-first movement and start hiring based on what truly
            matters: capability, reliability, and results.
          </p>
        </div>

{phase === "form" && (
          <form
            onSubmit={onSubmit}
            className="space-y-5 bg-white rounded-lg p-6 md:p-8 shadow-sm border border-slate-200"
          >
            <input
              className="w-full h-12 rounded-lg bg-slate-50 border-2 border-slate-300 px-4 text-slate-900 placeholder-slate-500 focus:border-blue-500 focus:bg-white focus:outline-none transition"
              placeholder="Company Name"
              value={company}
              onChange={(e) => setCompany(e.target.value)}
              required
            />
            <input
              className="w-full h-12 rounded-lg bg-slate-50 border-2 border-slate-300 px-4 text-slate-900 placeholder-slate-500 focus:border-blue-500 focus:bg-white focus:outline-none transition"
              placeholder="Work Email"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
            <input
              className="w-full h-12 rounded-lg bg-slate-50 border-2 border-slate-300 px-4 text-slate-900 placeholder-slate-500 focus:border-blue-500 focus:bg-white focus:outline-none transition"
              placeholder="Create Password"
              type="password"
              minLength={8}
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
            />
            <input
              className="w-full h-12 rounded-lg bg-slate-50 border-2 border-slate-300 px-4 text-slate-900 placeholder-slate-500 focus:border-blue-500 focus:bg-white focus:outline-none transition"
              placeholder="Phone (optional)"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
            />
            <label className="flex items-center gap-3 text-base text-slate-700 cursor-pointer">
              <input type="checkbox" checked={agree} onChange={(e) => setAgree(e.target.checked)} className="w-5 h-5" />{" "}
              I agree to the Terms & Privacy Policy
            </label>
            {error && <p className="text-red-600 text-base font-medium bg-red-50 p-3 rounded-lg">{error}</p>}
            <button
              type="submit"
              disabled={loading}
              className="w-full h-12 rounded-lg bg-blue-600 text-white font-semibold hover:bg-blue-700 transition shadow-md disabled:bg-slate-400"
            >
              {loading ? "Creating..." : "Create My Employer Account"}
            </button>
          </form>
        )}

<footer className="mt-8 text-base text-slate-600 text-center">
          Already have an account?{" "}
          <Link
            href="/auth/login"
            className="underline underline-offset-4 text-blue-600 hover:text-blue-700 font-medium"
          >
            Log in
          </Link>
        </footer>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/sign-up/page.tsx" isMerged="true"
"use client"

import Link from "next/link"
import { useRouter } from "next/navigation"

export default function SignUpChooser() {
  const router = useRouter()
  return (
    <main className="min-h-screen w-full py-12 bg-white text-gray-900 px-28x px-2.5">
      <div className="mb-4 text-sm text-blue-600">Step 1 of 5</div>

<header className="mb-6 px-2.5">
        <h1 className="text-3xl md:text-4xl font-semibold">Who are you?</h1>
        <p className="text-gray-600 mt-2 tracking-tighter leading-6">
          Choose how you'd like to get started. Shiftza values skill over status — your journey adapts to your truth.
        </p>
      </header>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <button
          onClick={() => router.push("/sign-up/worker")}
          className="rounded-xl bg-white hover:bg-blue-50 border border-blue-100 p-6 text-left transition shadow-md hover:shadow-lg"
          aria-label="Continue as Worker"
        >
          <h2 className="text-xl font-semibold mb-2 text-blue-800">I'm a Worker</h2>
          <h3 className="text-gray-700 font-medium mb-3">
            Showcase your real skills. Build your credibility. Unlock better opportunities.
          </h3>
          <div className="space-y-3 text-gray-600 text-sm leading-relaxed">
            <p>
              For too long, skilled professionals have been overlooked — not because they lack ability, but because they
              don't hold a paper certificate. You've worked hard, built things, solved problems, and made results
              happen.
            </p>
            <p>Now, it's time to be seen for what you can actually do.</p>
          </div>
          <div className="mt-5">
            <span className="inline-block rounded-md px-4 py-2 bg-blue-600 text-white font-semibold">
              👉 Continue as Worker
            </span>
          </div>
        </button>

<button
          onClick={() => router.push("/sign-up/employer")}
          className="rounded-xl bg-white hover:bg-blue-50 border border-blue-100 p-6 text-left transition shadow-md hover:shadow-lg"
          aria-label="Continue as Employer"
        >
          <h2 className="text-xl font-semibold mb-2 text-blue-800">I'm Hiring</h2>
          <h3 className="text-gray-700 font-medium mb-3">
            Great work doesn't come from résumés — it comes from real skills.
          </h3>
          <div className="space-y-3 text-gray-600 text-sm leading-relaxed">
            <p>
              You've seen it: impressive degrees, polished CVs — but when it's time to deliver, the spark's missing.
              Shiftza helps you find the doers — verified professionals with real projects, real proof, and real
              results.
            </p>
            <p>Find talent that actually delivers.</p>
          </div>
          <div className="mt-5">
            <span className="inline-block rounded-md px-4 py-2 bg-blue-600 text-white font-semibold tracking-tight">
              👉 Continue as Employer
            </span>
          </div>
        </button>
      </div>

<footer className="mt-8 text-sm text-gray-600 flex items-center gap-4 px-1.5">
        <Link href="/" className="text-blue-600 hover:underline">
          Back to Home
        </Link>
        <span className="opacity-30">|</span>
        <Link href="/auth/login" className="text-blue-600 hover:underline">
          Already have an account? Log in
        </Link>
      </footer>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/sign-up/worker/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { getSupabaseBrowser } from "@/lib/supabase-browser"
import { useRouter } from "next/navigation"
import Link from "next/link"

export default function WorkerSignUp() {
  const supabase = getSupabaseBrowser()
  const router = useRouter()
  const [name, setName] = useState("")
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [agree, setAgree] = useState(false)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [phase, setPhase] = useState<"form" | "otp">("form")
  const [otp, setOtp] = useState("")
  const [otpError, setOtpError] = useState<string | null>(null)
  const [otpVerifying, setOtpVerifying] = useState(false)
  const [otpResending, setOtpResending] = useState(false)

async function onSubmit(e: React.FormEvent) {
    e.preventDefault()
    setError(null)
    if (!agree) {
      setError("Please accept the terms to continue.")
      return
    }
    setLoading(true)
    try {
      // 1) Create or detect existing user
      const r = await fetch("/api/auth/admin-signup", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, password, role: "worker", full_name: name }),
      })

if (!(r.status === 201 || r.status === 200 || r.status === 409)) {
        const { error: apiErr } = await r.json().catch(() => ({ error: "Sign up failed." }))
        throw new Error(apiErr || "Sign up failed.")
      }

// 2) Sign in (works for new or existing user)
      const { error: signInErr } = await supabase.auth.signInWithPassword({ email, password })
      if (signInErr) throw signInErr

// 3) Persist profile + role (only valid columns in profiles)
      const boot = await fetch("/api/signup/bootstrap", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ role: "worker", full_name: name }),
        credentials: "include",
      })
      if (!boot.ok) {
        const { error: bErr } = await boot.json().catch(() => ({ error: "Failed to save profile." }))
        throw new Error(bErr || "Failed to save profile.")
      }

router.push("/sign-up/worker/profile")
    } catch (err: any) {
      setError(err?.message ?? "Sign up failed.")
    } finally {
      setLoading(false)
    }
  }

async function verifyEmailOtp() {
    try {
      setOtpError(null)
      setOtpVerifying(true)
      const { error: verifyErr } = await supabase.auth.verifyOtp({
        email,
        token: otp,
        type: "email",
      })
      if (verifyErr) {
        if (
          String(verifyErr.message || "")
            .toLowerCase()
            .includes("otp")
        ) {
          setOtpError("Email OTP is not enabled for this project. A confirmation link was sent to your email instead.")
        } else {
          setOtpError(verifyErr.message ?? "Could not verify code.")
        }
        return
      }
      router.push("/sign-up/worker/profile")
    } finally {
      setOtpVerifying(false)
    }
  }

async function resendOtp() {
    try {
      setOtpError(null)
      setOtpResending(true)
      const { error: resendErr } = await supabase.auth.resend({
        type: "signup",
        email,
      })
      if (resendErr) setOtpError(resendErr.message ?? "Could not resend code.")
    } finally {
      setOtpResending(false)
    }
  }

return (
    <main className="w-full bg-gradient-to-br from-slate-50 to-blue-50 py-12 px-4 sm:px-6 md:px-8 lg:px-12">
      <div className="w-full max-w-6xl mx-auto">
        <div className="mb-6 text-sm text-slate-500 font-medium">Step 2 of 5</div>
        <h1 className="text-3xl md:text-4xl font-bold mb-4 text-slate-900">Create Skills Profile</h1>
        <p className="text-lg text-slate-700 mb-8 text-pretty font-medium">Your skills deserve to be seen.</p>

<div className="space-y-4 text-slate-600 text-base leading-relaxed mb-12 bg-white rounded-lg p-6 md:p-8 shadow-sm border border-slate-200">
          <p>
            You've spent years building, repairing, designing, and solving real problems — yet true recognition often
            never came. Too many professionals go unseen just because they don't have a degree or certificate to prove
            what they can already do.
          </p>
          <p>That ends here.</p>
          <p>
            This is your space — created for those who build, make, and create with their own hands and minds. Here,
            your skills, hard work, and results finally speak louder than paper. Your Skills Profile is more than an
            account — it's your story, your proof, and your key to real opportunities.
          </p>
          <p>
            Every story starts with a single skill. Let's build yours — one project, one badge, one milestone at a time.
          </p>
        </div>

{phase === "form" && (
          <form
            onSubmit={onSubmit}
            className="space-y-5 bg-white rounded-lg p-6 md:p-8 shadow-sm border border-slate-200"
          >
            <input
              className="w-full h-12 rounded-lg bg-slate-50 border-2 border-slate-300 px-4 text-slate-900 placeholder-slate-500 focus:border-blue-500 focus:bg-white focus:outline-none transition"
              placeholder="Full Name"
              value={name}
              onChange={(e) => setName(e.target.value)}
              required
            />
            <input
              className="w-full h-12 rounded-lg bg-slate-50 border-2 border-slate-300 px-4 text-slate-900 placeholder-slate-500 focus:border-blue-500 focus:bg-white focus:outline-none transition"
              placeholder="Email Address"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
            <input
              className="w-full h-12 rounded-lg bg-slate-50 border-2 border-slate-300 px-4 text-slate-900 placeholder-slate-500 focus:border-blue-500 focus:bg-white focus:outline-none transition"
              placeholder="Password"
              type="password"
              minLength={8}
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
            />
            <label className="flex items-center gap-3 text-base text-slate-700 cursor-pointer">
              <input type="checkbox" checked={agree} onChange={(e) => setAgree(e.target.checked)} className="w-5 h-5" />{" "}
              I agree to the Terms & Privacy Policy
            </label>
            {error && <p className="text-red-600 text-base font-medium bg-red-50 p-3 rounded-lg">{error}</p>}
            <button
              type="submit"
              disabled={loading}
              className="w-full h-12 rounded-lg bg-blue-600 text-white font-semibold hover:bg-blue-700 transition shadow-md disabled:bg-slate-400"
            >
              {loading ? "Creating..." : "Create My Skills Profile"}
            </button>
          </form>
        )}

{phase === "otp" && (
          <section className="bg-white rounded-lg p-6 md:p-8 shadow-sm border border-slate-200">
            <h2 className="font-bold text-xl mb-3 text-slate-900">Enter the 6-digit code we emailed you</h2>
            <p className="text-base text-slate-600 mb-6">
              Didn't get it? Check spam/promotions. If your project isn't using Email OTP, you can{" "}
              <Link
                href="/sign-up/check-email"
                className="underline underline-offset-4 text-blue-600 hover:text-blue-700 font-medium"
              >
                open the confirmation link instead
              </Link>
              .
            </p>
            <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 mb-6">
              <input
                inputMode="numeric"
                pattern="[0-9]*"
                maxLength={6}
                className="flex-1 sm:flex-none sm:w-48 h-12 rounded-lg bg-slate-50 border-2 border-slate-300 px-4 tracking-widest text-center text-slate-900 placeholder-slate-500 focus:border-blue-500 focus:bg-white focus:outline-none transition"
                placeholder="123456"
                value={otp}
                onChange={(e) => setOtp(e.target.value.replace(/\D/g, ""))}
              />
              <button
                type="button"
                onClick={verifyEmailOtp}
                disabled={otp.length < 6 || otpVerifying}
                className="h-12 px-6 rounded-lg bg-blue-600 text-white font-semibold hover:bg-blue-700 transition shadow-md disabled:bg-slate-400"
              >
                {otpVerifying ? "Verifying..." : "Verify"}
              </button>
              <button
                type="button"
                onClick={resendOtp}
                disabled={otpResending}
                className="h-12 px-6 rounded-lg border-2 border-slate-300 text-slate-700 hover:bg-slate-100 transition disabled:text-slate-400 font-semibold"
              >
                {otpResending ? "Resending..." : "Resend code"}
              </button>
            </div>
            {otpError && <p className="text-red-600 text-base font-medium bg-red-50 p-3 rounded-lg">{otpError}</p>}
          </section>
        )}

<footer className="mt-8 text-base text-slate-600 text-center">
          Already have an account?{" "}
          <Link
            href="/auth/login"
            className="underline underline-offset-4 text-blue-600 hover:text-blue-700 font-medium"
          >
            Log in
          </Link>
        </footer>
      </div>
    </main>
  )
}
[V0_FILE]typescript:file="components/sign-up/profile-completion-status.tsx" isMerged="true"
"use client"

export function ProfileCompletionStatus({
  skills,
  about,
  sampleUrl,
}: {
  skills: string
  about: string
  sampleUrl: string
}) {
  const skillsList = skills
    .split(",")
    .map((s) => s.trim())
    .filter(Boolean)

const completionItems = [
    { label: "Skills Added", done: skillsList.length > 0, count: skillsList.length },
    { label: "About Written", done: about.length > 0, count: about.length > 0 ? 1 : 0 },
    { label: "Work Sample", done: sampleUrl.length > 0, count: sampleUrl.length > 0 ? 1 : 0 },
  ]

const completedCount = completionItems.filter((item) => item.done).length
  const totalCount = completionItems.length
  const completionPercent = Math.round((completedCount / totalCount) * 100)

return (
    <div className="rounded-lg bg-gray-50 border border-gray-300 p-4 mb-6">
      <div className="flex items-center justify-between mb-3">
        <h3 className="text-sm font-medium text-gray-900">Profile Completion</h3>
        <span className="text-xs text-gray-700">{completionPercent}%</span>
      </div>

<div className="space-y-2">
        {completionItems.map((item, i) => (
          <div key={i} className="flex items-center gap-2 text-sm">
            <div
              className={`w-4 h-4 rounded-full flex items-center justify-center text-xs ${
                item.done ? "bg-green-500/20 text-green-600" : "bg-gray-200 text-gray-400"
              }`}
            >
              {item.done ? "✓" : "○"}
            </div>
            <span className={item.done ? "text-gray-900" : "text-gray-600"}>{item.label}</span>
          </div>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="components/sign-up/profile-preview-card.tsx" isMerged="true"
"use client"

export function ProfilePreviewCard({
  skills,
  about,
  sampleUrl,
}: {
  skills: string
  about: string
  sampleUrl: string
}) {
  const skillsList = skills
    .split(",")
    .map((s) => s.trim())
    .filter(Boolean)
    .slice(0, 5)

return (
    <div className="rounded-lg bg-gray-50 border border-gray-300 p-6 mb-6">
      <h3 className="text-sm font-semibold text-gray-900 mb-4 uppercase tracking-wide">Profile Preview</h3>

<div className="space-y-4">
        {/* Skills Preview */}
        <div>
          <p className="text-xs text-gray-700 mb-2">Skills</p>
          {skillsList.length > 0 ? (
            <div className="flex flex-wrap gap-2">
              {skillsList.map((skill, i) => (
                <span
                  key={i}
                  className="inline-block px-3 py-1 rounded-full bg-yellow-400/20 text-yellow-600 text-xs font-medium"
                >
                  {skill}
                </span>
              ))}
            </div>
          ) : (
            <p className="text-xs text-gray-500 italic">Add skills to see them here</p>
          )}
        </div>

{/* About Preview */}
        <div>
          <p className="text-xs text-gray-700 mb-2">About</p>
          {about.length > 0 ? (
            <p className="text-sm text-gray-900 line-clamp-2">{about}</p>
          ) : (
            <p className="text-xs text-gray-500 italic">Write about yourself to see it here</p>
          )}
        </div>

{/* Work Sample Preview */}
        <div>
          <p className="text-xs text-gray-700 mb-2">Work Sample</p>
          {sampleUrl.length > 0 ? (
            <a
              href={sampleUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="text-xs text-blue-600 hover:text-blue-700 underline truncate block"
            >
              {sampleUrl}
            </a>
          ) : (
            <p className="text-xs text-gray-500 italic">Add a link to see it here</p>
          )}
        </div>
      </div>

<div className="mt-4 pt-4 border-t border-gray-300">
        <p className="text-xs text-gray-700">This is how your profile will appear to employers on the dashboard.</p>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="components/dashboard/job-opportunities-card.tsx" isMerged="true"
"use client"

import Link from "next/link"

export function JobOpportunitiesCard({
  jobs,
}: {
  jobs?: Array<{
    id: string
    title: string
    description?: string
    budget_min?: number
    budget_max?: number
    job_type?: string
    location_type?: string
  }>
}) {
  if (!jobs || jobs.length === 0) {
    return (
      <div className="rounded-2xl bg-card shadow-sm p-6">
        <h3 className="text-lg font-semibold mb-4">Job Opportunities</h3>
        <p className="text-sm text-muted-foreground">No matching opportunities at the moment. Check back soon!</p>
      </div>
    )
  }

return (
    <div className="rounded-2xl bg-card shadow-sm p-6">
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-lg font-semibold">Job Opportunities</h3>
        <span className="text-xs bg-muted px-2 py-1 rounded-full">{jobs.length} new</span>
      </div>

<div className="space-y-3">
        {jobs.slice(0, 5).map((job) => (
          <Link
            key={job.id}
            href={`/jobs/${job.id}`}
            className="block p-3 rounded-lg bg-muted/50 hover:bg-muted transition-colors"
          >
            <div className="flex items-start justify-between gap-2">
              <div className="flex-1 min-w-0">
                <h4 className="font-medium text-sm truncate">{job.title}</h4>
                {job.description && (
                  <p className="text-xs text-muted-foreground line-clamp-1 mt-1">{job.description}</p>
                )}
                <div className="flex items-center gap-2 mt-2 flex-wrap">
                  {job.job_type && <span className="text-xs bg-white/10 px-2 py-0.5 rounded">{job.job_type}</span>}
                  {job.location_type && (
                    <span className="text-xs bg-white/10 px-2 py-0.5 rounded">{job.location_type}</span>
                  )}
                </div>
              </div>
              {job.budget_min && (
                <div className="text-right flex-shrink-0">
                  <p className="text-sm font-semibold text-yellow-400">${Number(job.budget_min).toLocaleString()}</p>
                  {job.budget_max && (
                    <p className="text-xs text-muted-foreground">- ${Number(job.budget_max).toLocaleString()}</p>
                  )}
                </div>
              )}
            </div>
          </Link>
        ))}
      </div>

{jobs.length > 5 && (
        <Link href="/browse-jobs" className="block mt-4 text-center text-sm text-blue-400 hover:text-blue-300">
          View all {jobs.length} opportunities →
        </Link>
      )}
    </div>
  )
}
[V0_FILE]typescript:file="app/api/dashboard/summary/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { cookies } from "next/headers"
import { createServerClient } from "@supabase/ssr"

export async function GET() {
  const cookieStore = await cookies()
  const response = new NextResponse()

const supabase = createServerClient(process.env.SUPABASE_URL!, process.env.SUPABASE_ANON_KEY!, {
    cookies: {
      getAll() {
        return cookieStore.getAll()
      },
      setAll(cookiesToSet) {
        for (const { name, value, options } of cookiesToSet) {
          response.cookies.set({ name, value, ...options })
        }
      },
    },
  })

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

if (!user) {
      const payload = fakeSummary("worker")
      console.log("[v0] dashboard summary: no user, returning worker payload")
      return NextResponse.json(payload, { headers: response.headers })
    }

const { data: profile } = await supabase.from("profiles").select("*").eq("auth_user_id", user.id).maybeSingle()
    const role = (profile?.role as "worker" | "employer") || "worker"

if (role === "worker") {
      const { data: workerProfile } = await supabase
        .from("worker_profiles")
        .select("*")
        .eq("profile_id", profile?.id)
        .maybeSingle()

const { data: userSkills } = await supabase
        .from("user_skills")
        .select("skill_id, skills(name)")
        .eq("profile_id", profile?.id)

const { data: workSamples } = await supabase.from("work_samples").select("*").eq("user_id", user.id)

const { data: jobs } = await supabase
        .from("jobs")
        .select("id, title, description, budget_min, budget_max, job_type, location_type")
        .eq("status", "active")
        .limit(10)

const skillsCount = userSkills?.length || 0
      const workSamplesCount = workSamples?.length || 0
      const hasAbout = !!profile?.about
      const hasAvatar = !!profile?.avatar_url

// Calculate onboarding completion
      const onboardingSteps = [
        { name: "Profile Created", done: !!profile },
        { name: "Skills Added", done: skillsCount > 0 },
        { name: "About Written", done: hasAbout },
        { name: "Avatar Uploaded", done: hasAvatar },
        { name: "Work Samples", done: workSamplesCount > 0 },
      ]

const completedSteps = onboardingSteps.filter((s) => s.done).length
      const totalSteps = onboardingSteps.length
      const onboardingPercent = Math.round((completedSteps / totalSteps) * 100)

const payload = {
        role,
        profile: {
          name: profile?.display_name || "Worker",
          title: workerProfile?.preferred_type || "Professional",
          avatar_url: profile?.avatar_url,
          about: profile?.about,
          location: workerProfile?.location,
          hourly_rate: workerProfile?.hourly_rate,
        },
        company: null,
        topBars: [
          { label: "Skills", value: Math.min(100, (skillsCount / 10) * 100) },
          { label: "Profile", value: hasAbout ? 100 : 50 },
          { label: "Samples", value: workSamplesCount > 0 ? 100 : 0 },
        ],
        kpis: {
          skills: skillsCount,
          samples: workSamplesCount,
          applications: 0,
        },
        progress: { weeklyHours: [2, 3, 4, 2, 6, 5, 1] },
        onboarding: { percent: onboardingPercent, total: totalSteps, done: completedSteps },
        jobs: jobs || [],
      }

console.log("[v0] dashboard summary ok, role: worker, onboarding:", onboardingPercent + "%")
      return NextResponse.json(payload, { headers: response.headers })
    }

const payload = role === "employer" ? fakeSummary("employer") : fakeSummary("worker")
    console.log("[v0] dashboard summary ok, role:", role)
    return NextResponse.json(payload, { headers: response.headers })
  } catch (err) {
    console.log("[v0] dashboard summary error:", (err as Error)?.message)
    const payload = fakeSummary("worker")
    return NextResponse.json(payload, { headers: response.headers })
  }
}

function fakeSummary(role: "worker" | "employer") {
  return {
    role,
    profile: { name: role === "employer" ? undefined : "Lora Piterson", title: "UX/UI Designer", balance: 1200 },
    company: role === "employer" ? { name: "Nixtio" } : null,
    kpis:
      role === "employer" ? { employees: 78, hirings: 56, projects: 203 } : { employees: 0, hirings: 2, projects: 3 },
    progress: { weeklyHours: [2, 3, 4, 2, 6, 5, 1] },
    onboarding: { percent: 18, total: 8, done: 2 },
    jobs: [],
  }
}
[V0_FILE]css:file="app/animation-utilities.css" isMerged="true"
/* Tailwind v3-compatible animation utilities used across components */

/* Base keyframes for enter/exit animations */
@keyframes enter {
  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)
      scale(var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes exit {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0)
      scale(var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}

/* Convert @utility directives to @layer utilities for Tailwind v3 compatibility */
@layer utilities {
  .animate-in {
    animation-name: enter;
    animation-duration: var(--tw-enter-duration, 150ms);
    animation-timing-function: var(--tw-enter-easing, cubic-bezier(0.4, 0, 0.2, 1));
    animation-fill-mode: both;
  }
  .animate-out {
    animation-name: exit;
    animation-duration: var(--tw-exit-duration, 150ms);
    animation-timing-function: var(--tw-exit-easing, cubic-bezier(0.4, 0, 0.2, 1));
    animation-fill-mode: both;
  }

/* Opacity helpers */
  .fade-in-0 {
    --tw-enter-opacity: 0;
  }
  .fade-out-0 {
    --tw-exit-opacity: 0;
  }

/* Scale helpers referenced by dialogs/menus/tooltips */
  .zoom-in-95 {
    --tw-enter-scale: 0.95;
  }
  .zoom-out-95 {
    --tw-exit-scale: 0.95;
  }
  .zoom-in-90 {
    --tw-enter-scale: 0.9;
  }

/* Slide helpers used by Radix content components */
  .slide-in-from-top-2 {
    --tw-enter-translate-y: -0.5rem;
  }
  .slide-in-from-bottom-2 {
    --tw-enter-translate-y: 0.5rem;
  }
  .slide-in-from-left-2 {
    --tw-enter-translate-x: -0.5rem;
  }
  .slide-in-from-right-2 {
    --tw-enter-translate-x: 0.5rem;
  }
}
[V0_FILE]typescript:file="app/dashboard/worker/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { getServerSupabase } from "@/lib/supabase-server"
import { DashboardShell } from "@/components/dashboard/dashboard-shell"
import { WelcomeBanner } from "@/components/dashboard/welcome-banner"
import { KPIRow } from "@/components/dashboard/kpi-row"
import { ProfileOrCompanyCard } from "@/components/dashboard/profile-or-company-card"
import { WorkProgressCard } from "@/components/dashboard/work-progress-card"
import { TimeTrackerCard } from "@/components/dashboard/time-tracker-card"
import { HeadlineKPIs } from "@/components/dashboard/headline-kpis"
import { OnboardingSummary } from "@/components/dashboard/onboarding-summary"
import { OnboardingTasksPanel } from "@/components/dashboard/onboarding-tasks-panel"
import { DevicesBenefitsAccordion } from "@/components/dashboard/devices-benefits-accordion"
import { CalendarStrip } from "@/components/dashboard/calendar-strip"
import { JobOpportunitiesCard } from "@/components/dashboard/job-opportunities-card"

export const dynamic = "force-dynamic"
export const revalidate = 0
export const runtime = "nodejs"

export default async function WorkerDashboardPage() {
  const supabase = getServerSupabase()

const { data } = await supabase.auth.getUser()
  const user = data?.user
  if (!user) {
    redirect("/auth/login?redirect=/dashboard")
  }

let summary: any = null
  try {
    const { data: profile } = await supabase.from("profiles").select("*").eq("auth_user_id", user.id).maybeSingle()
    const role = (profile?.role as "worker" | "employer") || "worker"

if (role === "worker") {
      const { data: workerProfile } = await supabase
        .from("worker_profiles")
        .select("*")
        .eq("profile_id", profile?.id)
        .maybeSingle()

const { data: userSkills } = await supabase
        .from("user_skills")
        .select("skill_id, skills(name)")
        .eq("profile_id", profile?.id)

const { data: workSamples } = await supabase.from("work_samples").select("*").eq("user_id", user.id)

const jobs: any[] = []

const skillsCount = userSkills?.length || 0
      const workSamplesCount = workSamples?.length || 0
      const hasAbout = !!profile?.about
      const hasAvatar = !!profile?.avatar_url

const completedSteps = onboardingSteps.filter((s) => s.done).length
      const totalSteps = onboardingSteps.length
      const onboardingPercent = Math.round((completedSteps / totalSteps) * 100)

const displayName = profile?.display_name || profile?.email?.split("@")[0] || "Worker"

summary = {
        role,
        profile: {
          name: displayName,
          title: workerProfile?.preferred_type || "Professional",
          avatar_url: profile?.avatar_url,
          about: profile?.about,
          location: workerProfile?.location,
          hourly_rate: workerProfile?.hourly_rate,
          balance: 0,
        },
        company: null,
        topBars: [
          { label: "Skills", value: Math.min(100, (skillsCount / 10) * 100) },
          { label: "Profile", value: hasAbout ? 100 : 50 },
          { label: "Samples", value: workSamplesCount > 0 ? 100 : 0 },
        ],
        kpis: {
          skills: skillsCount,
          samples: workSamplesCount,
          applications: 0,
        },
        progress: { weeklyHours: [2, 3, 4, 2, 6, 5, 1] },
        onboarding: { percent: onboardingPercent, total: totalSteps, done: completedSteps },
        jobs: jobs,
      }
    }
  } catch (err) {
    console.error("[v0] dashboard error:", err)
    summary = null
  }

const role = "worker" as const
  const name = summary?.profile?.name || "Worker"
  const kpis = summary?.kpis
  const topBars = (summary?.topBars as Array<{ label: string; value: number }>) ?? []
  const obTotal = summary?.onboarding?.total
  const obDone = summary?.onboarding?.done
  const obPercent = summary?.onboarding?.percent
  const jobs = summary?.jobs

return (
    <DashboardShell>
      <div className="space-y-6">
        <WelcomeBanner name={name} />

{jobs && jobs.length > 0 && <JobOpportunitiesCard jobs={jobs} />}
      </div>
    </DashboardShell>
  )
}
[V0_FILE]typescriptreact:file="components/search-interface.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Search, Briefcase, User } from "lucide-react"

interface SearchInterfaceProps {
  onFindTalent?: () => void
  onBrowseJobs?: () => void
}

export default function SearchInterface({ onFindTalent, onBrowseJobs }: SearchInterfaceProps) {
  const [activeTab, setActiveTab] = useState<"talent" | "jobs">("talent")

return (
    <div className="w-full max-w-2xl mx-auto backdrop-blur-md rounded-2xl p-6 md:p-6 border h-24 md:h-auto md:flex-col md:px-0 md:py-0 border-none px-0 py-0">
      <div className="w-full max-w-2xl mx-auto bg-white/10 backdrop-blur-md rounded-2xl p-3 md:p-6 border border-white/20 h-24 md:h-auto flex flex-col md:flex-col justify-between md:justify-start gap-2 md:gap-4">
        {/* Tabs */}
        <div className="flex gap-1 md:gap-4 mb-0 md:mb-6">
          <button
            onClick={() => setActiveTab("talent")}
            className={`px-3 md:px-6 py-1 md:py-2 rounded-lg text-xs md:text-base font-medium transition-all ${
              activeTab === "talent"
                ? "bg-white text-black"
                : "bg-transparent text-white/70 hover:text-white hover:bg-white/5"
            }`}
          >
            Find talent
          </button>
          <button
            onClick={() => setActiveTab("jobs")}
            className={`px-3 md:px-6 py-1 md:py-2 rounded-lg text-xs md:text-base font-medium transition-all ${
              activeTab === "jobs"
                ? "bg-white text-black"
                : "bg-transparent text-white/70 hover:text-white hover:bg-white/5"
            }`}
          >
            Browse jobs
          </button>
        </div>

{/* Search Bar */}
        <div className="flex gap-2 md:gap-3 mb-0 md:mb-4">
          {/* Animated glowing border wrapper around input */}
          <div className="flex-1 relative group">
            {/* Glowing border layers */}
            <div
              className="absolute z-[-1] overflow-hidden h-full w-full rounded-lg blur-[3px] 
                        before:absolute before:content-[''] before:z-[-2] before:w-[999px] before:h-[999px] before:bg-no-repeat before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:rotate-60
                        before:bg-[conic-gradient(#000,#402fb5_5%,#000_38%,#000_50%,#cf30aa_60%,#000_87%)] before:transition-all before:duration-2000
                        group-hover:before:rotate-[-120deg] group-focus-within:before:rotate-[420deg] group-focus-within:before:duration-[4000ms]"
            ></div>
            <div
              className="absolute z-[-1] overflow-hidden h-full w-full rounded-lg blur-[3px] 
                        before:absolute before:content-[''] before:z-[-2] before:w-[600px] before:h-[600px] before:bg-no-repeat before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:rotate-[82deg]
                        before:bg-[conic-gradient(rgba(0,0,0,0),#18116a,rgba(0,0,0,0)_10%,rgba(0,0,0,0)_50%,#6e1b60,rgba(0,0,0,0)_60%)] before:transition-all before:duration-2000
                        group-hover:before:rotate-[-98deg] group-focus-within:before:rotate-[442deg] group-focus-within:before:duration-[4000ms]"
            ></div>
            <div
              className="absolute z-[-1] overflow-hidden h-full w-full rounded-lg blur-[2px] 
                        before:absolute before:content-[''] before:z-[-2] before:w-[600px] before:h-[600px] before:bg-no-repeat before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:rotate-[83deg]
                        before:bg-[conic-gradient(rgba(0,0,0,0)_0%,#a099d8,rgba(0,0,0,0)_8%,rgba(0,0,0,0)_50%,#dfa2da,rgba(0,0,0,0)_58%)] before:brightness-140
                        before:transition-all before:duration-2000 group-hover:before:rotate-[-97deg] group-focus-within:before:rotate-[443deg] group-focus-within:before:duration-[4000ms]"
            ></div>
            <div
              className="absolute z-[-1] overflow-hidden h-full w-full rounded-lg blur-[0.5px] 
                        before:absolute before:content-[''] before:z-[-2] before:w-[600px] before:h-[600px] before:bg-no-repeat before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:rotate-70
                        before:bg-[conic-gradient(#1c191c,#402fb5_5%,#1c191c_14%,#1c191c_50%,#cf30aa_60%,#1c191c_64%)] before:brightness-130
                        before:transition-all before:duration-2000 group-hover:before:rotate-[-110deg] group-focus-within:before:rotate-[430deg] group-focus-within:before:duration-[4000ms]"
            ></div>

<input
              type="text"
              placeholder="Search by role, skills, or keywords"
              className="relative w-full px-2 md:px-4 py-1 md:py-3 rounded-lg bg-white/90 text-black placeholder:text-gray-500 text-xs md:text-base focus:outline-none focus:ring-2 focus:ring-orange-500 h-9"
            />
          </div>
          <Button
            onClick={activeTab === "talent" ? onFindTalent : onBrowseJobs}
            className="bg-orange-500 hover:bg-orange-600 text-white px-4 md:px-8 py-1 md:py-3 rounded-lg font-semibold flex items-center gap-2 text-xs md:text-base"
          >
            <Search className="h-3 md:h-4 w-3 md:w-4" />
            Search
          </Button>
        </div>

{/* Filter Icons */}
        <div className="hidden md:flex gap-3">
          <button className="p-1.5 rounded-lg bg-white/10 hover:bg-white/20 transition-colors">
            <User className="h-4 w-4 text-white/70" />
          </button>
          <button className="p-1.5 rounded-lg bg-orange-500/20 hover:bg-orange-500/30 transition-colors">
            <Briefcase className="h-4 w-4 text-orange-400" />
          </button>
          <button className="p-1.5 rounded-lg bg-white/10 hover:bg-white/20 transition-colors">
            <Search className="h-4 w-4 text-white/70" />
          </button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="components/hero-frame-desktop.tsx" isQuickEdit="true" isMerged="true"
"use client"
import { useEffect, useRef, useState } from "react"
import type React from "react"

import { Plus, ChevronLeft, ChevronRight } from "lucide-react"
import { ShareStoryModal } from "./share-story-modal"
import { VideoScrollHero } from "./ui/video-scroll-hero"

type HeroFrameProps = {
  className?: string
}

export function HeroFrameDesktop({ className }: HeroFrameProps) {
  const [isModalOpen, setIsModalOpen] = useState(false)

<div className="w-full flex flex-col items-center gap-4 relative flex-1 mr-3.5 pb-0 mb-0 h-auto pt-28 mt-36">
        <div className="w-full flex items-center justify-between px-4 gap-2">
          <div className="bg-gradient-to-r from-foreground/5 to-foreground/10 border border-foreground/20 bg-foreground text-background px-6 py-1.5 rounded-md flex-1 min-w-0">
            <p className="text-sm font-medium py-0 my-0 px-0 line-clamp-2">
              Will Skills Ever Speak Louder Than Certificates?
            </p>
          </div>
          <button
            onClick={() => setIsModalOpen(true)}
            className="flex items-center justify-center w-10 h-10 hover:bg-primary/90 rounded-full transition-colors shadow-lg text-background bg-foreground flex-shrink-0"
            aria-label="Share your story"
            title="Share your story"
          >
            <Plus className="w-5 h-5" />
          </button>
        </div>
        <StoriesScrollerDesktop className="w-full h-full" />
        <ShareStoryModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
      </div>
    </div>
  )
}

function StoriesScrollerDesktop({ className }: { className?: string }) {
  const CARD_H = 280
  const AUTO_ADVANCE_MS = 8000

const stories = STORIES_20

startAutoAdvance()
    return () => {
      if (autoAdvanceRef.current) clearTimeout(autoAdvanceRef.current)
    }
  }, [stories.length])

const pauseAutoAdvance = () => {
    pausedRef.current = true
    if (autoAdvanceRef.current) clearTimeout(autoAdvanceRef.current)
    setTimeout(() => {
      pausedRef.current = false
    }, 10000)
  }

const handleMouseDown = (e: React.MouseEvent) => {
    setIsDragging(true)
    setDragStart(e.clientX)
    pauseAutoAdvance()
  }

const handleTouchStart = (e: React.TouchEvent) => {
    setIsDragging(true)
    setDragStart(e.touches[0].clientX)
    pauseAutoAdvance()
  }

window.addEventListener("keydown", handleKeyDown)
    return () => window.removeEventListener("keydown", handleKeyDown)
  }, [stories.length])

const currentStory = stories[currentIdx]

return (
    <div
      ref={containerRef}
      className={["relative w-full", "mx-auto", className || ""].join(" mb-auto ")}
      style={{ height: CARD_H }}
      onMouseDown={handleMouseDown}
      onMouseUp={handleMouseUp}
      onTouchStart={handleTouchStart}
      onTouchEnd={handleTouchEnd}
      aria-live="polite"
      role="region"
    >
      {stories.map((s, idx) => (
        <div
          key={`${s.id}-${idx}`}
          className="absolute inset-0 rounded-2xl border bg-background/70 text-foreground shadow-sm transition-all duration-500 my-0 mt-0 mb-10"
          style={{
            opacity: idx === currentIdx ? 1 : 0,
            visibility: idx === currentIdx ? "visible" : "hidden",
            transform: idx === currentIdx ? "scale(1)" : "scale(0.95)",
            zIndex: idx === currentIdx ? 10 : 0,
          }}
        >
          <article className="flex flex-row gap-0 mx-0 px-5 py-4 pl-5 pr-2.5 my-auto mb-7 h-11/12">
            <div className="flex-1 min-w-0 flex flex-col mb-auto mt-0">
              <div className="flex items-center gap-2 text-sm flex-wrap mt-2">
                <h3 className="font-semibold text-base">{s.name}</h3>
                <span className="text-foreground/40">•</span>
                <span className="text-foreground/60">{s.location}</span>
                <span className="text-foreground/40">•</span>
                <span className="text-foreground/60">{s.yearsExp} years exp</span>
                <span className="text-foreground/40">•</span>
                <span className="text-xs rounded-full px-2.5 py-0.5 border bg-background/60">{s.category}</span>
              </div>

<p className="mt-3 text-base font-semibold leading-snug">{s.headline}</p>

<div className="pt-3 flex items-center gap-2 my-auto mb-7 flex">
                {s.skills.slice(0, 4).map((tag) => (
                  <span key={tag} className="text-xs rounded-full px-3 py-1 border bg-background/60 whitespace-nowrap">
                    {tag}
                  </span>
                ))}
              </div>
            </div>

<div className="shrink-0 flex flex-col items-center justify-center gap-4 text-sm text-foreground/70 border-l border-foreground/10 pl-4 my-auto mx-auto mt-5 mr-1 flex">
              <button
                className="flex flex-col items-center gap-1 hover:text-red-500 transition-colors"
                aria-label="likes"
                title="likes"
              >
                <span className="text-lg">❤️</span>
                <span className="text-xs font-medium">{s.likes}</span>
              </button>
              <button
                className="flex flex-col items-center gap-1 hover:text-blue-500 transition-colors"
                aria-label="comments"
                title="comments"
              >
                <span className="text-lg">💬</span>
                <span className="text-xs font-medium">{s.comments}</span>
              </button>
              <button
                className="flex flex-col items-center gap-1 hover:text-green-500 transition-colors"
                aria-label="share"
                title="share"
              >
                <span className="text-lg">↗</span>
                <span className="text-xs font-medium">Share</span>
              </button>
            </div>
          </article>
        </div>
      ))}

<div className="absolute top-0 left-0 right-0 z-20 px-4 pt-2">
        <div className="flex items-center justify-center px-2 rounded-full bg-foreground/10 border border-foreground/20 w-fit mx-auto py-0 mr-0 ml-0">
          <span className="text-xs font-medium text-foreground/70">
            {currentIdx + 1} / {stories.length}
          </span>
        </div>
      </div>

const STORIES_20 = [
  {
    id: "1",
    initial: "A",
    name: "Arjun Mehta",
    location: "Mumbai, Maharashtra",
    yearsExp: 5,
    category: "Financial Trading",
    headline: "Self-made trader generating 40% returns, still rejected",
    body: "I taught myself technical analysis and algorithmic trading through market experience. My portfolio consistently outperforms market indices, but investment firms won't hire me without an MBA or finance degree. They want credentials, not someone who actually makes money in the markets.",
    skills: ["Technical Analysis", "Algorithmic Trading", "Risk Management", "Portfolio Strategy"],
    likes: 892,
    comments: 156,
  },
  {
    id: "2",
    initial: "P",
    name: "Priya Sharma",
    location: "Bangalore, Karnataka",
    yearsExp: 7,
    category: "Electrical Contracting",
    headline: "Master electrician denied licenses without formal training",
    body: "I learned electrical work from my father and have wired hundreds of homes and commercial buildings safely. My work passes all inspections and clients trust me completely. But licensing boards require formal apprenticeship certificates, not real-world expertise and a perfect safety record.",
    skills: ["Residential Wiring", "Commercial Installation", "Safety Compliance", "Troubleshooting"],
    likes: 743,
    comments: 128,
  },
  {
    id: "3",
    initial: "R",
    name: "Rahul Singh",
    location: "Delhi NCR",
    yearsExp: 6,
    category: "Professional Photography",
    headline: "Award-winning photographer rejected by studios",
    body: "Self-taught photographer with a portfolio of stunning work that's won competitions and been published. My clients rave about my eye for composition and lighting. Yet photography studios want a degree in fine arts or photography, not someone with a proven track record of beautiful images.",
    skills: ["Portrait Photography", "Lighting Design", "Post-Processing", "Composition Mastery"],
    likes: 621,
    comments: 94,
  },
  {
    id: "4",
    initial: "S",
    name: "Sneha Patel",
    location: "Ahmedabad, Gujarat",
    yearsExp: 4,
    category: "Interior Design",
    headline: "Self-taught designer transforming spaces, denied by firms",
    body: "I've redesigned 50+ homes and commercial spaces with stunning results. My clients are thrilled with the transformations and refer friends constantly. But interior design firms require a degree in interior design, not someone who understands space, color, and functionality from actual projects.",
    skills: ["Space Planning", "Color Theory", "Furniture Selection", "Budget Management"],
    likes: 567,
    comments: 89,
  },
  {
    id: "5",
    initial: "V",
    name: "Vikram Reddy",
    location: "Hyderabad, Telangana",
    yearsExp: 8,
    category: "Automotive Repair",
    headline: "Master mechanic can't get shop ownership without degree",
    body: "I've been fixing cars for 8 years and can diagnose any problem by sound and feel. My customers trust me with their most valuable possessions. But banks won't finance my shop because I don't have a formal automotive degree, only decades of hands-on experience.",
    skills: ["Engine Diagnostics", "Transmission Repair", "Electrical Systems", "Performance Tuning"],
    likes: 834,
    comments: 142,
  },
  {
    id: "6",
    initial: "M",
    name: "Meera Krishnan",
    location: "Chennai, Tamil Nadu",
    yearsExp: 5,
    category: "Music Production",
    headline: "Producer with platinum-level tracks rejected by labels",
    body: "I produce music that gets millions of streams and artists want to work with me. My production quality rivals major label work. But record labels want producers with degrees in music production or audio engineering, not someone with actual hit records.",
    skills: ["Beat Production", "Audio Mixing", "Sound Design", "Music Theory"],
    likes: 698,
    comments: 117,
  },
  {
    id: "7",
    initial: "K",
    name: "Karan Joshi",
    location: "Pune, Maharashtra",
    yearsExp: 6,
    category: "Culinary Arts",
    headline: "Self-taught chef with loyal customers, denied by restaurants",
    body: "I learned cooking from my grandmother and through experimentation. My catering business is fully booked months in advance with rave reviews. But fine dining restaurants require culinary school diplomas, not someone who can actually cook food people love.",
    skills: ["Menu Development", "Food Preparation", "Flavor Pairing", "Kitchen Management"],
    likes: 712,
    comments: 103,
  },
  {
    id: "8",
    initial: "A",
    name: "Ananya Gupta",
    location: "Kolkata, West Bengal",
    yearsExp: 4,
    category: "Fashion Design",
    headline: "Fashion designer with viral collections rejected by brands",
    body: "I design clothes that people actually want to wear and buy. My online collections sell out within days. But fashion houses want designers with degrees from prestigious fashion schools, not someone whose designs are trending on social media.",
    skills: ["Pattern Making", "Fabric Selection", "Trend Forecasting", "Collection Design"],
    likes: 589,
    comments: 91,
  },
  {
    id: "9",
    initial: "D",
    name: "Deepak Kumar",
    location: "Jaipur, Rajasthan",
    yearsExp: 7,
    category: "Real Estate Development",
    headline: "Successful developer denied loans without MBA",
    body: "I've developed 5 successful residential projects that sold out and made investors money. I understand market trends, construction, and customer needs deeply. But banks require an MBA for development loans, not someone with a proven track record of profitable projects.",
    skills: ["Market Analysis", "Project Management", "Investor Relations", "Construction Oversight"],
    likes: 923,
    comments: 167,
  },
  {
    id: "10",
    initial: "N",
    name: "Nisha Verma",
    location: "Lucknow, Uttar Pradesh",
    yearsExp: 5,
    category: "Content Creation",
    headline: "Creator with 500K followers rejected by agencies",
    body: "I create content that resonates with audiences and drives engagement. Brands want to work with me for sponsorships. But content agencies want creators with degrees in communications or marketing, not someone with proven audience growth and engagement metrics.",
    skills: ["Video Production", "Storytelling", "Audience Engagement", "Brand Partnerships"],
    likes: 456,
    comments: 73,
  },
  {
    id: "11",
    initial: "R",
    name: "Rohan Malhotra",
    location: "Chandigarh, Punjab",
    yearsExp: 6,
    category: "Plumbing Services",
    headline: "Expert plumber denied contractor status without certification",
    body: "I've fixed complex plumbing issues that other plumbers couldn't solve. My customers call me for the toughest jobs. But government contracts require formal plumbing certifications, not someone with 6 years of perfect work and satisfied clients.",
    skills: ["Pipe Installation", "Leak Detection", "Drain Cleaning", "System Design"],
    likes: 678,
    comments: 112,
  },
  {
    id: "12",
    initial: "S",
    name: "Sanjana Iyer",
    location: "Coimbatore, Tamil Nadu",
    yearsExp: 4,
    category: "Business Consulting",
    headline: "Consultant helping businesses grow, rejected without MBA",
    body: "I've helped 20+ small businesses increase revenue by 50-200%. My strategies work and clients see real results. But consulting firms want consultants with MBAs from top schools, not someone who actually knows how to grow businesses.",
    skills: ["Business Strategy", "Market Research", "Operations Optimization", "Growth Planning"],
    likes: 534,
    comments: 87,
  },
  {
    id: "13",
    initial: "A",
    name: "Amit Desai",
    location: "Surat, Gujarat",
    yearsExp: 8,
    category: "Construction Management",
    headline: "Project manager delivering on-time projects, denied without degree",
    body: "I've managed construction projects worth crores that finished on time and under budget. My teams respect me and projects run smoothly. But major construction firms require a civil engineering degree, not someone with a perfect project delivery record.",
    skills: ["Project Planning", "Budget Management", "Team Leadership", "Quality Control"],
    likes: 867,
    comments: 145,
  },
  {
    id: "14",
    initial: "P",
    name: "Pooja Nair",
    location: "Kochi, Kerala",
    yearsExp: 5,
    category: "Event Management",
    headline: "Event organizer with perfect track record rejected by agencies",
    body: "I've organized 100+ events that clients loved and guests remembered. My events run flawlessly and come in on budget. But event management companies want event managers with degrees in hospitality, not someone who consistently delivers amazing experiences.",
    skills: ["Event Planning", "Vendor Management", "Budget Control", "Guest Experience"],
    likes: 423,
    comments: 68,
  },
  {
    id: "15",
    initial: "H",
    name: "Harsh Agarwal",
    location: "Indore, Madhya Pradesh",
    yearsExp: 6,
    category: "Videography",
    headline: "Videographer with viral content rejected by production houses",
    body: "I create videos that get millions of views and tell stories that move people. Brands want to hire me for their campaigns. But production houses want videographers with film school degrees, not someone whose work speaks for itself.",
    skills: ["Video Editing", "Cinematography", "Storytelling", "Color Grading"],
    likes: 756,
    comments: 124,
  },
  {
    id: "16",
    initial: "T",
    name: "Tanvi Kapoor",
    location: "Noida, Uttar Pradesh",
    yearsExp: 4,
    category: "Sales & Business Development",
    headline: "Top performer generating millions in revenue, denied promotions",
    body: "I consistently exceed sales targets and bring in major clients. My commission earnings prove my value. But companies want sales managers with business degrees, not someone who actually knows how to close deals and build relationships.",
    skills: ["Client Acquisition", "Relationship Building", "Negotiation", "Revenue Growth"],
    likes: 612,
    comments: 98,
  },
  {
    id: "17",
    initial: "V",
    name: "Varun Saxena",
    location: "Bhopal, Madhya Pradesh",
    yearsExp: 7,
    category: "Graphic Design",
    headline: "Designer with award-winning work rejected by agencies",
    body: "I create designs that win competitions and clients love. My portfolio speaks volumes about my skills. But design agencies want designers with degrees in graphic design or fine arts, not someone whose work is objectively beautiful and effective.",
    skills: ["Logo Design", "Branding", "Visual Communication", "Design Systems"],
    likes: 789,
    comments: 134,
  },
  {
    id: "18",
    initial: "R",
    name: "Riya Chatterjee",
    location: "Guwahati, Assam",
    yearsExp: 5,
    category: "Hospitality Management",
    headline: "Hotel manager with perfect guest ratings rejected by chains",
    body: "I manage a hotel with 4.8-star ratings and guests rave about their experience. Revenue is up 30% under my management. But hotel chains want managers with hospitality degrees, not someone who actually knows how to run a successful property.",
    skills: ["Guest Relations", "Staff Management", "Revenue Optimization", "Operations"],
    likes: 543,
    comments: 86,
  },
  {
    id: "19",
    initial: "S",
    name: "Siddharth Rao",
    location: "Visakhapatnam, Andhra Pradesh",
    yearsExp: 6,
    category: "Agriculture & Farming",
    headline: "Farmer with highest yields rejected for agricultural loans",
    body: "I've increased crop yields by 40% through innovative farming techniques I developed. My farm is profitable and sustainable. But banks won't give me agricultural loans without a degree in agriculture, only my proven results.",
    skills: ["Crop Management", "Soil Science", "Irrigation Systems", "Yield Optimization"],
    likes: 634,
    comments: 107,
  },
  {
    id: "20",
    initial: "K",
    name: "Kavya Menon",
    location: "Thiruvananthapuram, Kerala",
    yearsExp: 4,
    category: "Retail & E-commerce",
    headline: "Entrepreneur with thriving online store rejected by investors",
    body: "I built an e-commerce business generating 50 lakhs annually with loyal customers. My store has excellent reviews and repeat purchase rate. But investors want founders with business degrees or MBAs, not someone who actually built a profitable business from scratch.",
    skills: ["E-commerce Strategy", "Customer Retention", "Inventory Management", "Marketing"],
    likes: 498,
    comments: 79,
  },
]
[V0_FILE]typescriptreact:file="components/sign-up/skill-proof-selector.tsx" isMerged="true"
"use client"

import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"

interface SkillProofSelectorProps {
  canProveSkill: boolean
  proofLink: string
  proofDescription: string
  onCanProveChange: (can: boolean) => void
  onProofLinkChange: (link: string) => void
  onProofDescriptionChange: (desc: string) => void
}

export function SkillProofSelector({
  canProveSkill,
  proofLink,
  proofDescription,
  onCanProveChange,
  onProofLinkChange,
  onProofDescriptionChange,
}: SkillProofSelectorProps) {
  return (
    <div className="space-y-4">
      {/* Can Prove Skill */}
      <div className="rounded-lg bg-gray-50 border border-gray-300 p-4">
        <label className="block text-sm font-medium text-gray-900 mb-3">Can you prove this skill?</label>
        <div className="flex gap-3">
          <button
            type="button"
            onClick={() => onCanProveChange(true)}
            className={`flex-1 py-2 px-3 rounded-lg border transition text-sm font-medium ${
              canProveSkill
                ? "bg-purple-100 border-purple-300 text-purple-900"
                : "bg-gray-50 border-gray-300 text-gray-700 hover:bg-gray-100"
            }`}
          >
            Yes
          </button>
          <button
            type="button"
            onClick={() => onCanProveChange(false)}
            className={`flex-1 py-2 px-3 rounded-lg border transition text-sm font-medium ${
              !canProveSkill
                ? "bg-gray-200 border-gray-400 text-gray-900"
                : "bg-gray-50 border-gray-300 text-gray-700 hover:bg-gray-100"
            }`}
          >
            No
          </button>
        </div>
      </div>

{/* Proof Details */}
      {canProveSkill && (
        <div className="space-y-3">
          <div className="rounded-lg bg-gray-50 border border-gray-300 p-4">
            <label className="block text-sm font-medium text-gray-900 mb-2">Share a link to your work (optional)</label>
            <Input
              value={proofLink}
              onChange={(e) => onProofLinkChange(e.target.value)}
              placeholder="GitHub repo, portfolio, YouTube video, Google Drive link, etc."
              className="bg-white border-gray-300 text-gray-900"
              type="url"
            />
            <p className="text-xs text-gray-600 mt-2">Paste a direct link to your project, portfolio, or work sample</p>
          </div>

<div className="rounded-lg bg-gray-50 border border-gray-300 p-4">
            <label className="block text-sm font-medium text-gray-900 mb-2">Describe your work (optional)</label>
            <Textarea
              value={proofDescription}
              onChange={(e) => onProofDescriptionChange(e.target.value)}
              placeholder="What did you build? What problem did it solve? What technologies did you use?"
              className="bg-white border-gray-300 text-gray-900 min-h-20"
            />
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/sign-up/skill-category-selector.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { ChevronDown, X } from "lucide-react"
import { Badge } from "@/components/ui/badge"

// 29 Skill Categories with sub-skills and related jobs
const SKILL_CATEGORIES = [
  {
    id: "data-analytics",
    name: "Data & Analytics",
    subSkills: ["Data Analysis", "SQL", "Python", "Tableau", "Power BI", "Excel", "Statistics", "Data Visualization"],
    jobs: ["Data Analyst", "Business Analyst", "Data Scientist", "Analytics Engineer"],
  },
  {
    id: "software-dev",
    name: "Software & IT Development",
    subSkills: ["JavaScript", "React", "Node.js", "Python", "Java", "C++", "Full Stack", "API Development"],
    jobs: ["Software Developer", "Full Stack Engineer", "Backend Developer", "Frontend Developer"],
  },
  {
    id: "web-design",
    name: "Web & UI/UX Design",
    subSkills: ["Figma", "UI Design", "UX Design", "Prototyping", "Wireframing", "Web Design", "Responsive Design"],
    jobs: ["UI/UX Designer", "Web Designer", "Product Designer", "Design System Specialist"],
  },
  {
    id: "graphic-design",
    name: "Graphic Design",
    subSkills: ["Adobe Creative Suite", "Branding", "Logo Design", "Illustration", "Typography", "Layout Design"],
    jobs: ["Graphic Designer", "Brand Designer", "Visual Designer", "Illustrator"],
  },
  {
    id: "digital-marketing",
    name: "Digital Marketing",
    subSkills: [
      "SEO",
      "Content Marketing",
      "Social Media",
      "Email Marketing",
      "Google Ads",
      "Analytics",
      "Copywriting",
    ],
    jobs: ["Digital Marketer", "SEO Specialist", "Content Marketer", "Social Media Manager"],
  },
  {
    id: "video-production",
    name: "Video & Multimedia",
    subSkills: ["Video Editing", "Adobe Premiere", "Motion Graphics", "Animation", "Cinematography", "Audio Editing"],
    jobs: ["Video Editor", "Motion Graphics Designer", "Videographer", "Content Creator"],
  },
  {
    id: "cloud-devops",
    name: "Cloud & DevOps",
    subSkills: ["AWS", "Docker", "Kubernetes", "CI/CD", "Linux", "Infrastructure", "Cloud Architecture"],
    jobs: ["DevOps Engineer", "Cloud Architect", "Infrastructure Engineer", "Site Reliability Engineer"],
  },
  {
    id: "mobile-dev",
    name: "Mobile App Development",
    subSkills: ["React Native", "Flutter", "iOS", "Android", "Swift", "Kotlin", "Mobile UI"],
    jobs: ["Mobile Developer", "iOS Developer", "Android Developer", "React Native Developer"],
  },
  {
    id: "ai-ml",
    name: "AI & Machine Learning",
    subSkills: ["Machine Learning", "Deep Learning", "TensorFlow", "PyTorch", "NLP", "Computer Vision"],
    jobs: ["ML Engineer", "AI Developer", "Data Scientist", "AI Researcher"],
  },
  {
    id: "database",
    name: "Database & SQL",
    subSkills: ["SQL", "PostgreSQL", "MongoDB", "Database Design", "Query Optimization", "NoSQL"],
    jobs: ["Database Administrator", "Database Developer", "Data Engineer", "SQL Developer"],
  },
  {
    id: "cybersecurity",
    name: "Cybersecurity",
    subSkills: ["Network Security", "Penetration Testing", "Ethical Hacking", "Security Audits", "Compliance"],
    jobs: ["Security Engineer", "Penetration Tester", "Security Analyst", "Compliance Officer"],
  },
  {
    id: "project-management",
    name: "Project Management",
    subSkills: ["Agile", "Scrum", "Project Planning", "Risk Management", "Stakeholder Management"],
    jobs: ["Project Manager", "Scrum Master", "Product Manager", "Program Manager"],
  },
  {
    id: "business-analysis",
    name: "Business Analysis",
    subSkills: [
      "Requirements Gathering",
      "Process Mapping",
      "Business Modeling",
      "Documentation",
      "Stakeholder Analysis",
    ],
    jobs: ["Business Analyst", "Systems Analyst", "Requirements Analyst", "Solutions Architect"],
  },
  {
    id: "sales",
    name: "Sales & Business Development",
    subSkills: ["Sales Strategy", "Client Relations", "Negotiation", "CRM", "Lead Generation", "Account Management"],
    jobs: ["Sales Executive", "Business Development Manager", "Account Manager", "Sales Manager"],
  },
  {
    id: "customer-service",
    name: "Customer Service & Support",
    subSkills: ["Customer Support", "Ticketing Systems", "Communication", "Problem Solving", "Zendesk", "Intercom"],
    jobs: ["Customer Support Specialist", "Support Manager", "Customer Success Manager", "Help Desk Technician"],
  },
  {
    id: "content-writing",
    name: "Content Writing & Copywriting",
    subSkills: ["Blog Writing", "Copywriting", "Technical Writing", "Content Strategy", "Editing", "Proofreading"],
    jobs: ["Content Writer", "Copywriter", "Technical Writer", "Content Strategist"],
  },
  {
    id: "seo-sem",
    name: "SEO & SEM",
    subSkills: ["SEO", "Google Ads", "Keyword Research", "Link Building", "On-page Optimization", "Analytics"],
    jobs: ["SEO Specialist", "SEM Specialist", "PPC Manager", "Search Marketing Manager"],
  },
  {
    id: "social-media",
    name: "Social Media Management",
    subSkills: ["Social Media Strategy", "Content Creation", "Community Management", "Analytics", "Engagement"],
    jobs: ["Social Media Manager", "Community Manager", "Social Media Strategist", "Content Creator"],
  },
  {
    id: "email-marketing",
    name: "Email & Marketing Automation",
    subSkills: ["Email Marketing", "Mailchimp", "HubSpot", "Automation", "Segmentation", "A/B Testing"],
    jobs: ["Email Marketer", "Marketing Automation Specialist", "Growth Marketer", "Email Strategist"],
  },
  {
    id: "accounting",
    name: "Accounting & Finance",
    subSkills: ["Bookkeeping", "Tax Preparation", "Financial Analysis", "QuickBooks", "Excel", "Auditing"],
    jobs: ["Accountant", "Bookkeeper", "Financial Analyst", "Tax Specialist"],
  },
  {
    id: "hr-recruitment",
    name: "HR & Recruitment",
    subSkills: ["Recruitment", "HR Management", "Onboarding", "Employee Relations", "Payroll", "Compliance"],
    jobs: ["HR Manager", "Recruiter", "HR Specialist", "Talent Acquisition Manager"],
  },
  {
    id: "virtual-assistant",
    name: "Virtual Assistance & Administration",
    subSkills: ["Administrative Support", "Scheduling", "Email Management", "Data Entry", "Research", "Organization"],
    jobs: ["Virtual Assistant", "Administrative Assistant", "Executive Assistant", "Office Manager"],
  },
  {
    id: "translation",
    name: "Translation & Localization",
    subSkills: ["Translation", "Localization", "Proofreading", "Transcription", "Multilingual Support"],
    jobs: ["Translator", "Localization Specialist", "Transcriptionist", "Language Specialist"],
  },
  {
    id: "carpentry",
    name: "Carpentry & Woodworking",
    subSkills: ["Carpentry", "Furniture Making", "Cabinet Making", "Woodworking", "Finishing", "Design"],
    jobs: ["Carpenter", "Furniture Maker", "Cabinet Maker", "Woodworker"],
  },
  {
    id: "electrical",
    name: "Electrical & Wiring",
    subSkills: ["Electrical Wiring", "Circuit Design", "Troubleshooting", "Safety Compliance", "Installation"],
    jobs: ["Electrician", "Electrical Technician", "Electrical Engineer", "Maintenance Technician"],
  },
  {
    id: "plumbing",
    name: "Plumbing & Pipefitting",
    subSkills: ["Plumbing", "Pipe Installation", "Maintenance", "Troubleshooting", "Code Compliance"],
    jobs: ["Plumber", "Pipefitter", "Maintenance Technician", "Plumbing Inspector"],
  },
  {
    id: "hvac",
    name: "HVAC & Climate Control",
    subSkills: ["HVAC Installation", "Maintenance", "Troubleshooting", "Refrigeration", "System Design"],
    jobs: ["HVAC Technician", "HVAC Engineer", "Maintenance Technician", "Service Manager"],
  },
  {
    id: "welding",
    name: "Welding & Metal Fabrication",
    subSkills: ["Welding", "Metal Fabrication", "Cutting", "Assembly", "Quality Control", "Safety"],
    jobs: ["Welder", "Metal Fabricator", "Welding Inspector", "Production Technician"],
  },
  {
    id: "automotive",
    name: "Automotive & Mechanics",
    subSkills: ["Auto Repair", "Diagnostics", "Engine Work", "Transmission", "Electrical Systems", "Maintenance"],
    jobs: ["Mechanic", "Auto Technician", "Service Manager", "Diagnostic Technician"],
  },
]

interface SkillCategorySelectorProps {
  selectedSkills: string[]
  onSkillsChange: (skills: string[]) => void
}

export function SkillCategorySelector({ selectedSkills, onSkillsChange }: SkillCategorySelectorProps) {
  const [expandedCategory, setExpandedCategory] = useState<string | null>(null)

const handleSkillToggle = (skill: string) => {
    if (selectedSkills.includes(skill)) {
      onSkillsChange(selectedSkills.filter((s) => s !== skill))
    } else if (selectedSkills.length < 10) {
      onSkillsChange([...selectedSkills, skill])
    }
  }

const handleRemoveSkill = (skill: string) => {
    onSkillsChange(selectedSkills.filter((s) => s !== skill))
  }

return (
    <div className="space-y-4">
      {/* Selected Skills Display */}
      {selectedSkills.length > 0 && (
        <div className="rounded-lg bg-gray-50 border border-gray-300 p-4">
          <p className="text-xs text-gray-700 mb-2">Selected Skills ({selectedSkills.length}/10)</p>
          <div className="flex flex-wrap gap-2">
            {selectedSkills.map((skill) => (
              <Badge key={skill} className="bg-yellow-100 border-yellow-300 text-yellow-900">
                {skill}
                <button
                  type="button"
                  onClick={() => handleRemoveSkill(skill)}
                  className="ml-2 opacity-70 hover:opacity-100"
                  aria-label={`Remove ${skill}`}
                >
                  <X className="h-3 w-3" />
                </button>
              </Badge>
            ))}
          </div>
        </div>
      )}

{/* Skill Categories Grid */}
      <div className="space-y-2">
        <p className="text-xs uppercase tracking-wide text-sidebar-primary font-medium">Browse Categories</p>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
          {SKILL_CATEGORIES.map((category) => (
            <div key={category.id} className="rounded-lg bg-gray-50 border border-gray-300 overflow-hidden">
              <button
                type="button"
                onClick={() => setExpandedCategory(expandedCategory === category.id ? null : category.id)}
                className="w-full flex items-center justify-between p-3 hover:bg-gray-100 transition"
              >
                <span className="text-sm font-medium text-gray-900">{category.name}</span>
                <ChevronDown
                  className={`h-4 w-4 text-gray-600 transition-transform ${
                    expandedCategory === category.id ? "rotate-180" : ""
                  }`}
                />
              </button>

{/* Expanded Sub-skills */}
              {expandedCategory === category.id && (
                <div className="border-t border-gray-300 p-3 space-y-2 bg-gray-50">
                  <p className="text-xs text-gray-600 mb-2">Select up to 10 skills total</p>
                  <div className="space-y-2">
                    {category.subSkills.map((subSkill) => (
                      <label
                        key={subSkill}
                        className="flex items-center gap-2 cursor-pointer hover:bg-gray-100 p-2 rounded transition"
                      >
                        <input
                          type="checkbox"
                          checked={selectedSkills.includes(subSkill)}
                          onChange={() => handleSkillToggle(subSkill)}
                          disabled={selectedSkills.length >= 10 && !selectedSkills.includes(subSkill)}
                          className="w-4 h-4 rounded border-gray-300 bg-white cursor-pointer"
                        />
                        <span className="text-sm text-gray-900">{subSkill}</span>
                      </label>
                    ))}
                  </div>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

export function getJobsForSkills(skills: string[]): string[] {
  const jobSet = new Set<string>()
  skills.forEach((skill) => {
    const category = SKILL_CATEGORIES.find((cat) => cat.subSkills.includes(skill))
    if (category) {
      category.jobs.forEach((job) => jobSet.add(job))
    }
  })
  return Array.from(jobSet)
}
[V0_FILE]typescriptreact:file="components/sign-up/job-profile-selector.tsx" isMerged="true"
"use client"

import { Badge } from "@/components/ui/badge"
import { X } from "lucide-react"

interface JobProfileSelectorProps {
  availableJobs: string[]
  selectedJobs: string[]
  onJobsChange: (jobs: string[]) => void
}

export function JobProfileSelector({ availableJobs, selectedJobs, onJobsChange }: JobProfileSelectorProps) {
  const handleJobToggle = (job: string) => {
    if (selectedJobs.includes(job)) {
      onJobsChange(selectedJobs.filter((j) => j !== job))
    } else {
      onJobsChange([...selectedJobs, job])
    }
  }

const handleRemoveJob = (job: string) => {
    onJobsChange(selectedJobs.filter((j) => j !== job))
  }

if (availableJobs.length === 0) {
    return (
      <div className="rounded-lg bg-gray-50 border border-gray-300 p-4">
        <p className="text-sm text-gray-700">Select skills first to see suggested job profiles</p>
      </div>
    )
  }

return (
    <div className="space-y-4">
      {/* Selected Jobs Display */}
      {selectedJobs.length > 0 && (
        <div className="rounded-lg bg-gray-50 border border-gray-300 p-4">
          <p className="text-xs text-gray-700 mb-2">Target Job Profiles ({selectedJobs.length})</p>
          <div className="flex flex-wrap gap-2">
            {selectedJobs.map((job) => (
              <Badge key={job} className="bg-blue-100 border-blue-300 text-blue-900">
                {job}
                <button
                  type="button"
                  onClick={() => handleRemoveJob(job)}
                  className="ml-2 opacity-70 hover:opacity-100"
                  aria-label={`Remove ${job}`}
                >
                  <X className="h-3 w-3" />
                </button>
              </Badge>
            ))}
          </div>
        </div>
      )}

{/* Available Jobs Grid */}
      <div className="space-y-2">
        <p className="text-xs text-gray-700 uppercase tracking-wide">Suggested Job Profiles</p>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
          {availableJobs.map((job) => (
            <button
              key={job}
              type="button"
              onClick={() => handleJobToggle(job)}
              className={`p-3 rounded-lg border transition text-left ${
                selectedJobs.includes(job)
                  ? "bg-blue-100 border-blue-300"
                  : "bg-gray-50 border-gray-300 hover:bg-gray-100"
              }`}
            >
              <div className="flex items-center gap-2">
                <div
                  className={`w-4 h-4 rounded border ${
                    selectedJobs.includes(job) ? "bg-blue-500 border-blue-500" : "border-gray-300 bg-white"
                  }`}
                />
                <span className="text-sm font-medium text-gray-900">{job}</span>
              </div>
            </button>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/sign-up/experience-source-selector.tsx" isMerged="true"
"use client"

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"

interface ExperienceSourceSelectorProps {
  learningSource: string
  hasWorkExperience: boolean
  previousExperience: string
  onLearningSourceChange: (source: string) => void
  onWorkExperienceChange: (has: boolean) => void
  onPreviousExperienceChange: (exp: string) => void
}

export function ExperienceSourceSelector({
  learningSource,
  hasWorkExperience,
  previousExperience,
  onLearningSourceChange,
  onWorkExperienceChange,
  onPreviousExperienceChange,
}: ExperienceSourceSelectorProps) {
  return (
    <div className="space-y-4">
      {/* Learning Source */}
      <div className="rounded-lg bg-gray-50 border border-gray-300 p-4">
        <label className="block text-sm font-medium text-gray-900 mb-2">Where did you learn these skills?</label>
        <Select value={learningSource} onValueChange={onLearningSourceChange}>
          <SelectTrigger className="bg-white border-gray-300 text-gray-900">
            <SelectValue placeholder="Select learning source" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="self-taught">Self-Taught</SelectItem>
            <SelectItem value="college">College / University</SelectItem>
            <SelectItem value="bootcamp">Bootcamp / Training Program</SelectItem>
            <SelectItem value="work-experience">Work Experience</SelectItem>
            <SelectItem value="online-course">Online Course</SelectItem>
            <SelectItem value="apprenticeship">Apprenticeship</SelectItem>
            <SelectItem value="mixed">Mixed / Multiple Sources</SelectItem>
          </SelectContent>
        </Select>
      </div>

{/* Work Experience */}
      <div className="rounded-lg bg-gray-50 border border-gray-300 p-4">
        <label className="block text-sm font-medium text-gray-900 mb-3">Have you worked in this field before?</label>
        <div className="flex gap-3">
          <button
            type="button"
            onClick={() => onWorkExperienceChange(true)}
            className={`flex-1 py-2 px-3 rounded-lg border transition text-sm font-medium ${
              hasWorkExperience
                ? "bg-green-100 border-green-300 text-green-900"
                : "bg-gray-50 border-gray-300 text-gray-700 hover:bg-gray-100"
            }`}
          >
            Yes
          </button>
          <button
            type="button"
            onClick={() => onWorkExperienceChange(false)}
            className={`flex-1 py-2 px-3 rounded-lg border transition text-sm font-medium ${
              !hasWorkExperience
                ? "bg-orange-100 border-orange-300 text-orange-900"
                : "bg-gray-50 border-gray-300 text-gray-700 hover:bg-gray-100"
            }`}
          >
            No
          </button>
        </div>
      </div>

{/* Previous Experience Details */}
      {hasWorkExperience && (
        <div className="rounded-lg bg-gray-50 border border-gray-300 p-4">
          <label className="block text-sm font-medium text-gray-900 mb-2">
            Tell us about your previous job or project
          </label>
          <Textarea
            value={previousExperience}
            onChange={(e) => onPreviousExperienceChange(e.target.value)}
            placeholder="e.g., Worked as a Senior Developer at TechCorp for 3 years, built scalable APIs..."
            className="bg-white border-gray-300 text-gray-900 min-h-24"
          />
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/testimonials-columns-1.tsx" isMerged="true"
"use client"
import React from "react"
import { motion } from "motion/react"

const testimonials = [
  {
    text: "This ERP revolutionized our operations, streamlining finance and inventory. The cloud-based platform keeps us productive, even remotely.",
    image: "https://randomuser.me/api/portraits/women/1.jpg",
    name: "Briana Patton",
    role: "Operations Manager",
  },
  {
    text: "Implementing this ERP was smooth and quick. The customizable, user-friendly interface made team training effortless.",
    image: "https://randomuser.me/api/portraits/men/2.jpg",
    name: "Bilal Ahmed",
    role: "IT Manager",
  },
  {
    text: "The support team is exceptional, guiding us through setup and providing ongoing assistance, ensuring our satisfaction.",
    image: "https://randomuser.me/api/portraits/women/3.jpg",
    name: "Saman Malik",
    role: "Customer Support Lead",
  },
  {
    text: "This ERP's seamless integration enhanced our business operations and efficiency. Highly recommend for its intuitive interface.",
    image: "https://randomuser.me/api/portraits/men/4.jpg",
    name: "Omar Raza",
    role: "CEO",
  },
  {
    text: "Its robust features and quick support have transformed our workflow, making us significantly more efficient.",
    image: "https://randomuser.me/api/portraits/women/5.jpg",
    name: "Zainab Hussain",
    role: "Project Manager",
  },
  {
    text: "The smooth implementation exceeded expectations. It streamlined processes, improving overall business performance.",
    image: "https://randomuser.me/api/portraits/women/6.jpg",
    name: "Aliza Khan",
    role: "Business Analyst",
  },
  {
    text: "Our business functions improved with a user-friendly design and positive customer feedback.",
    image: "https://randomuser.me/api/portraits/men/7.jpg",
    name: "Farhan Siddiqui",
    role: "Marketing Director",
  },
  {
    text: "They delivered a solution that exceeded expectations, understanding our needs and enhancing our operations.",
    image: "https://randomuser.me/api/portraits/women/8.jpg",
    name: "Sana Sheikh",
    role: "Sales Manager",
  },
  {
    text: "Using this ERP, our online presence and conversions significantly improved, boosting business performance.",
    image: "https://randomuser.me/api/portraits/men/9.jpg",
    name: "Hassan Ali",
    role: "E-commerce Manager",
  },
]

export const TestimonialsColumn = (props: {
  className?: string
  testimonials: typeof testimonials
  duration?: number
}) => {
  return (
    <div className={props.className}>
      <motion.div
        animate={{
          translateY: "-50%",
        }}
        transition={{
          duration: props.duration || 10,
          repeat: Number.POSITIVE_INFINITY,
          ease: "linear",
          repeatType: "loop",
        }}
        className="flex flex-col gap-6 pb-6 bg-background"
      >
        {[
          ...new Array(2).fill(0).map((_, index) => (
            <React.Fragment key={index}>
              {props.testimonials.map(({ text, image, name, role }, i) => (
                <div className="p-10 rounded-3xl border shadow-lg shadow-primary/10 max-w-xs w-full" key={i}>
                  <div>{text}</div>
                  <div className="flex items-center gap-2 mt-5">
                    <img
                      width={40}
                      height={40}
                      src={image || "/placeholder.svg"}
                      alt={name}
                      className="h-10 w-10 rounded-full"
                    />
                    <div className="flex flex-col">
                      <div className="font-medium tracking-tight leading-5">{name}</div>
                      <div className="leading-5 opacity-60 tracking-tight">{role}</div>
                    </div>
                  </div>
                </div>
              ))}
            </React.Fragment>
          )),
        ]}
      </motion.div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/testimonials-section.tsx" isMerged="true"
import { TestimonialsColumn } from "@/components/ui/testimonials-columns-1"
import { motion } from "motion/react"

const firstColumn = testimonials.slice(0, 3)
const secondColumn = testimonials.slice(3, 6)
const thirdColumn = testimonials.slice(6, 9)

export default function TestimonialsSection() {
  return (
    <section className="bg-background my-20 relative">
      <div className="container z-10 mx-auto">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.1, ease: [0.16, 1, 0.3, 1] }}
          viewport={{ once: true }}
          className="flex flex-col items-center justify-center max-w-[540px] mx-auto"
        >
          <div className="flex justify-center">
            <div className="border py-1 px-4 rounded-lg">Testimonials</div>
          </div>

<h2 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-bold tracking-tighter mt-5">
            What our users say
          </h2>
          <p className="text-center mt-5 opacity-75">See what our customers have to say about us.</p>
        </motion.div>

<div className="flex justify-center gap-6 mt-10 [mask-image:linear-gradient(to_bottom,transparent,black_25%,black_75%,transparent)] max-h-[740px] overflow-hidden">
          <TestimonialsColumn testimonials={firstColumn} duration={15} />
          <TestimonialsColumn testimonials={secondColumn} className="hidden md:block" duration={19} />
          <TestimonialsColumn testimonials={thirdColumn} className="hidden lg:block" duration={17} />
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/shiftza-3d-testimonials.tsx" isEdit="true" isQuickEdit="true"
"use client"
import React from "react"
import { motion } from "motion/react"

const testimonials = [
  {
    text: "Self-taught programmer who can code better than CS grads, but I was stuck delivering food. No degree, no interview — until Shiftza gave my portfolio a place to be seen.",
    name: "Ravi Kumar",
    role: "Delivery Rider → Coder",
    image: "https://randomuser.me/api/portraits/men/45.jpg",
  },
  {
    text: "Small-town designer with big dreams. Every company wanted fancy degrees — not raw creativity. Shiftza helped my work reach the people who value skill, not certificates.",
    name: "Priya Sharma",
    role: "Designer from Small Town",
    image: "https://randomuser.me/api/portraits/women/46.jpg",
  },
  {
    text: "Used to fix bikes in my dad's garage. Now I solve tech issues online. Same logic, different tools — Shiftza made people finally notice my skills.",
    name: "Amit Patel",
    role: "Mechanic → Tech Support",
    image: "https://randomuser.me/api/portraits/men/67.jpg",
  },
  {
    text: "Didn't study much, but I can make any design just by looking once. Earlier people called it a hobby — now I get orders every week through Shiftza.",
    name: "Meena Devi",
    role: "Tailor & Entrepreneur",
    image: "https://randomuser.me/api/portraits/women/60.jpg",
  },
  {
    text: "I've wired half my town but never got respect like an engineer. Shiftza gave me real recognition — proof that skill matters more than degrees.",
    name: "Suresh Kumar",
    role: "Electrician",
    image: "https://randomuser.me/api/portraits/men/52.jpg",
  },
  {
    text: "Worked freelance for years, always chasing clients. Now clients find me — Shiftza made that possible. Feels like freedom.",
    name: "Diya Nair",
    role: "Digital Marketer",
    image: "https://randomuser.me/api/portraits/women/43.jpg",
  },
]

export default function Shiftza3DTestimonials() {
  return (
    <div className="w-full py-12 md:py-20">
      <div className="max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">What our users say</h2>
          <p className="text-lg text-muted-foreground">See what our customers have to say about us.</p>
        </div>

About

Tags

Share

More from prakashgest490-7132

More Templates Like This

About

Tags

Share

About

Tags

Share

More from prakashgest490-7132

More Templates Like This