"use client" import { useState } from "react" import { motion } 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { GradientMesh } from "@/components/backgrounds/gradient-mesh" import { scaleIn, fadeIn, stagger, staggerItem, buttonTapTarget } from "@/lib/animations" import { Phone, ArrowRight, CheckCircle, RefreshCw } from "lucide-react" const countryCodes = [ { code: "+1", country: "US" }, { code: "+44", country: "UK" }, { code: "+91", country: "IN" }, { code: "+61", country: "AU" }, { code: "+86", country: "CN" }, { code: "+49", country: "DE" }, { code: "+81", country: "JP" }, { code: "+55", country: "BR" }, ] export default function PhoneLogin() { const [step, setStep] = useState<"phone" | "otp">("phone") const [otp, setOtp] = useState(["", "", "", ""]) const handleOtpChange = (i: number, value: string) => { if (value.length > 1) return const next = [...otp] next[i] = value setOtp(next) if (value && i < 3) { document.getElementById(`otp-${i + 1}`)?.focus() } } return (

{step === "phone" ? "Phone Login" : "Verify OTP"} {step === "phone" ? "Enter your phone number to sign in." : "Enter the 4-digit code sent to your phone."} {step === "phone" ? (

Country

Phone number

) : ( {otp.map((digit, i) => ( handleOtpChange(i, e.target.value)} className="size-12 text-center text-lg font-bold focus-visible:ring-2 focus-visible:ring-primary/50 transition-shadow duration-200" /> ))}

)}

) }