“use client”
import type React from “react”
import { useState } from “react”
import { useRouter } from “next/navigation”
import { Button } from “@/components/ui/button”
import { Input } from “@/components/ui/input”
import { Label } from “@/components/ui/label”
import { RadioGroup, RadioGroupItem } from “@/components/ui/radio-group”
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from “@/components/ui/select”
import { ArrowLeft, ArrowRight } from “lucide-react”
import { Progress } from “@/components/ui/progress”
export default function QuestionnairePage() {
const router = useRouter()
const [step, setStep] = useState(1)
const [formData, setFormData] = useState({
fullName: “”,
dateOfBirth: “”,
phoneNumber: “”,
email: “”,
bestTimeToContact: “”,
reasonForInsurance: “”,
urgency: “”,
})
const totalSteps = 7
const progress = (step / totalSteps) * 100
const handleInputChange = (e: React.ChangeEvent
) => {
const { name, value } = e.target
setFormData((prev) => ({ …prev, [name]: value }))
}
const handleSelectChange = (name: string, value: string) => {
setFormData((prev) => ({ …prev, [name]: value }))
}
const handleRadioChange = (name: string, value: string) => {
setFormData((prev) => ({ …prev, [name]: value }))
}
const handleNext = () => {
if (step < totalSteps) {
setStep(step + 1)
} else {
// Submit form and navigate to results
router.push("/results")
}
}
const handleBack = () => {
if (step > 1) {
setStep(step – 1)
}
}
return (
JRD Insurance Life Coverage
Step {step} of {totalSteps}
{step === 1 && (
)}
{step === 2 && (
)}
{step === 3 && (
)}
{step === 4 && (
)}
{step === 5 && (
When is the best time to contact you?
)}
{step === 6 && (
Why are you looking for life insurance?
handleRadioChange(“reasonForInsurance”, value)}
value={formData.reasonForInsurance}
>
)}
{step === 7 && (
How soon do you need coverage?
handleRadioChange(“urgency”, value)} value={formData.urgency}>
)}
)
}