import AuthLayout from "@/layouts/auth-layout" import { Head, useForm, Link } from "@inertiajs/react" import { ReactNode, useState, useEffect } from "react" import { Eye, EyeOff, Mail, Lock, Check, User, ArrowRight, Sparkles } from "lucide-react" import { motion, Variants, AnimatePresence } from "framer-motion" export default function Register() { const [showPassword, setShowPassword] = useState(false) const [confirmError, setConfirmError] = useState("") const { data, setData, post, errors, processing } = useForm({ name: '', email: '', password: '', password_confirmation: '', remember: false }) useEffect(() => { if (data.password && data.password_confirmation) { setConfirmError(data.password !== data.password_confirmation ? 'Password tidak cocok!' : ''); } else { setConfirmError(''); } }, [data.password, data.password_confirmation]); const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (!confirmError) post('/register') } const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.07, delayChildren: 0.2 } } } const itemVariants: Variants = { hidden: { opacity: 0, y: 15 }, visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: [0.23, 1, 0.32, 1] } } } return ( <>
{/* ── Heading Section ── */}

{Array.from("Buat Akun.").map((char, index) => ( {char} ))}

"Mulai perjalanan literasimu hari ini."

{/* ── Form Section ── */} {/* Name Input */}
setData('name', e.target.value)} placeholder="Siapa nama Anda?" className="flex-1 bg-transparent outline-none text-white placeholder:text-white/20 text-sm font-medium" required />
{errors.name &&

{errors.name}

} {/* Email Input */}
setData('email', e.target.value)} placeholder="nama@email.com" className="flex-1 bg-transparent outline-none text-white placeholder:text-white/20 text-sm font-medium" required />
{errors.email &&

{errors.email}

} {/* Passwords Wrapper (Side by Side on Desktop if needed, but stacked is safer for Auth) */}
{/* Password */}
setData('password', e.target.value)} placeholder="••••••••" className="flex-1 bg-transparent outline-none text-white placeholder:text-white/20 text-sm font-medium" required />
{errors.password &&

{errors.password}

} {/* Confirm Password */}
setData('password_confirmation', e.target.value)} placeholder="••••••••" className="flex-1 bg-transparent outline-none text-white placeholder:text-white/20 text-sm font-medium" required />
{confirmError && ( {confirmError} )}
{/* Remember Me */}
setData('remember', e.target.checked)} className="sr-only" />
{data.remember && }
Ingat Sesi Saya {/* Submit Button */} {processing ? (
) : ( <> Daftar Akun )}

Sudah punya akun?{" "} Masuk Disini

) } Register.layout = (page: ReactNode) => {page}