import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { CheckCircle, ArrowRight } from "lucide-react"
export default function ResultsPage() {
const router = useRouter()
const [selectedPlan, setSelectedPlan] = useState<string | null>(null)
const handleSelectPlan = (plan: string) => {
setSelectedPlan(plan)
}
const handleContinue = () => {
router.push("/thank-you")
}
return (
<div className="min-h-screen bg-blue-50">
<div className="container mx-auto px-4 py-8 md:px-6">
<div className="mx-auto max-w-4xl">
<div className="mb-8 text-center">
<h1 className="text-3xl font-bold text-navy-800 md:text-4xl">
Based on your answers, here are your personalized life insurance options
</h1>
<p className="mt-4 text-lg text-navy-600">
Select the plan that best fits your needs to speak with a licensed advisor.
</p>
<div className="mt-4 rounded-lg bg-blue-50 p-4 text-sm text-navy-600">
<p>
<strong>Note:</strong> Plan prices shown are starting rates. Actual premiums may vary by up to $60 more
depending on age, health status, coverage amount, and other individual factors. A JRD Insurance Life
Coverage licensed advisor will provide your personalized quote.
</p>
</div>
</div>
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
{/* Term Life */}
<Card
className={`border-2 transition-all ${selectedPlan === "term" ? "border-amber-500 shadow-lg" : "border-transparent"}`}
>
<CardHeader className="pb-4">
<CardTitle className="text-xl">Term Life</CardTitle>
<CardDescription>Affordable coverage for 10-30 years</CardDescription>
</CardHeader>
<CardContent className="pb-4">
<div className="mb-4">
<span className="text-3xl font-bold text-navy-800">$15-75</span>
<span className="text-navy-600">/mo</span>
</div>
<ul className="space-y-2">
<li className="flex items-start gap-2">
<CheckCircle className="mt-0.5 h-4 w-4 text-green-500" />
<span className="text-sm">Income protection</span>
</li>
<li className="flex items-start gap-2">
<CheckCircle className="mt-0.5 h-4 w-4 text-green-500" />
<span className="text-sm">Lower premiums</span>
</li>
<li className="flex items-start gap-2">
<CheckCircle className="mt-0.5 h-4 w-4 text-green-500" />
<span className="text-sm">Fixed term length</span>
</li>
</ul>
</CardContent>
<CardFooter>
<Button
className={`w-full ${selectedPlan === "term" ? "bg-amber-500 hover:bg-amber-600" : "bg-navy-700 hover:bg-navy-800"}`}
onClick={() => handleSelectPlan("term")}
>
Select Plan
</Button>
</CardFooter>
</Card>
{/* Final Expense */}
<Card
className={`border-2 transition-all ${selectedPlan === "final_expense" ? "border-amber-500 shadow-lg" : "border-transparent"}`}
>
<CardHeader className="pb-4">
<CardTitle className="text-xl">Final Expense</CardTitle>
<CardDescription>Covers funeral & burial costs</CardDescription>
</CardHeader>
<CardContent className="pb-4">
<div className="mb-4">
<span className="text-3xl font-bold text-navy-800">$10-70</span>
<span className="text-navy-600">/mo</span>
</div>
<ul className="space-y-2">
<li className="flex items-start gap-2">
<CheckCircle className="mt-0.5 h-4 w-4 text-green-500" />
<span className="text-sm">Peace of mind for loved ones</span>
</li>
<li className="flex items-start gap-2">
<CheckCircle className="mt-0.5 h-4 w-4 text-green-500" />
<span className="text-sm">Simplified underwriting</span>
</li>
<li className="flex items-start gap-2">
<CheckCircle className="mt-0.5 h-4 w-4 text-green-500" />
<span className="text-sm">Guaranteed acceptance options</span>
</li>
</ul>
</CardContent>
<CardFooter>
<Button
className={`w-full ${selectedPlan === "final_expense" ? "bg-amber-500 hover:bg-amber-600" : "bg-navy-700 hover:bg-navy-800"}`}
onClick={() => handleSelectPlan("final_expense")}
>
Select Plan
</Button>
</CardFooter>
</Card>
{/* Whole Life */}
<Card
className={`border-2 transition-all ${selectedPlan === "whole_life" ? "border-amber-500 shadow-lg" : "border-transparent"}`}
>
<CardHeader className="pb-4">
<CardTitle className="text-xl">Whole Life</CardTitle>
<CardDescription>Lifetime coverage + cash value</CardDescription>
</CardHeader>
<CardContent className="pb-4">
<div className="mb-4">
<span className="text-3xl font-bold text-navy-800">$25-85</span>
<span className="text-navy-600">/mo</span>
</div>
<ul className="space-y-2">
<li className="flex items-start gap-2">
<CheckCircle className="mt-0.5 h-4 w-4 text-green-500" />
<span className="text-sm">Build lasting legacy</span>
</li>
<li className="flex items-start gap-2">
<CheckCircle className="mt-0.5 h-4 w-4 text-green-500" />
<span className="text-sm">Cash value growth</span>
</li>
<li className="flex items-start gap-2">
<CheckCircle className="mt-0.5 h-4 w-4 text-green-500" />
<span className="text-sm">Permanent protection</span>
</li>
</ul>
</CardContent>
<CardFooter>
<Button
className={`w-full ${selectedPlan === "whole_life" ? "bg-amber-500 hover:bg-amber-600" : "bg-navy-700 hover:bg-navy-800"}`}
onClick={() => handleSelectPlan("whole_life")}
>
Select Plan
</Button>
</CardFooter>
</Card>
{/* IUL */}
<Card
className={`border-2 transition-all ${selectedPlan === "iul" ? "border-amber-500 shadow-lg" : "border-transparent"}`}
>
<CardHeader className="pb-4">
<CardTitle className="text-xl">IUL</CardTitle>
<CardDescription>Cash growth + flexible coverage</CardDescription>
</CardHeader>
<CardContent className="pb-4">
<div className="mb-4">
<span className="text-3xl font-bold text-navy-800">$40-100</span>
<span className="text-navy-600">/mo</span>
</div>
<ul className="space-y-2">
<li className="flex items-start gap-2">
<CheckCircle className="mt-0.5 h-4 w-4 text-green-500" />
<span className="text-sm">Tax-advantaged savings</span>
</li>
<li className="flex items-start gap-2">
<CheckCircle className="mt-0.5 h-4 w-4 text-green-500" />
<span className="text-sm">Market-linked growth potential</span>
</li>
<li className="flex items-start gap-2">
<CheckCircle className="mt-0.5 h-4 w-4 text-green-500" />
<span className="text-sm">Downside protection</span>
</li>
</ul>
</CardContent>
<CardFooter>
<Button
className={`w-full ${selectedPlan === "iul" ? "bg-amber-500 hover:bg-amber-600" : "bg-navy-700 hover:bg-navy-800"}`}
onClick={() => handleSelectPlan("iul")}
>
Select Plan
</Button>
</CardFooter>
</Card>
</div>
<div className="mt-8 text-center">
<Button
onClick={handleContinue}
disabled={!selectedPlan}
className="bg-amber-500 px-8 py-6 text-lg font-semibold text-white hover:bg-amber-600"
>
Speak to a Licensed Advisor About These Plans <ArrowRight className="ml-2 h-4 w-4" />
</Button>
</div>
</div>
</div>
</div>
)
}