"use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { DotPattern } from "@/components/backgrounds/dot-pattern" import { scaleIn, fadeIn, buttonTapTarget } from "@/lib/animations" import { Shield, ArrowRight, CheckCircle, ChevronLeft, ChevronRight } from "lucide-react" const steps = [ { id: 1, label: "Verify Identity" }, { id: 2, label: "Select Account" }, { id: 3, label: "Reset Password" }, ] export default function AccountRecovery() { const [step, setStep] = useState(1) return (

{steps.map((s, i) => (

= s.id ? "bg-primary text-primary-foreground" : "border border-muted-foreground/30 bg-muted text-muted-foreground" }`} > {s.id}

{i < steps.length - 1 && (

s.id ? "bg-primary" : "bg-border"}`} /> )}

))}

Account Recovery {step === 1 && "Enter your email to verify your identity."} {step === 2 && "Select the account you want to recover."} {step === 3 && "Create a new password for your account."} {step === 1 && (

)} {step === 2 && ( {[ { email: "john@work.com", role: "Work Account" }, { email: "john@gmail.com", role: "Personal Account" }, ].map((acc) => ( ))} )} {step === 3 && (

New password

Confirm password

)} {step > 1 && (

)}

) }