"use client";
import { Container } from "@/components/Container";
import { useContactForm } from "@/components/contact-form-context";
import Link from "next/link";

export default function HowItWorks() {
	const { openForm } = useContactForm();
	return (
		<main className="py-16">
			{/* Hero */}
			<section className="mb-16">
				<Container>
					<h1 className="text-4xl font-bold tracking-tight text-accent dark:text-white sm:text-5xl">
						How It Works
					</h1>
					<p className="mt-4 max-w-3xl text-lg text-black dark:text-slate-300">
						A clear, step-by-step process designed to help families understand
						options, reduce confusion, and move toward a fair resolution.
					</p>

					<div className="mt-8 flex flex-col gap-3 sm:flex-row">
						<button
							onClick={() => openForm("Navbar")}
							className="inline-flex items-center justify-center rounded-xl bg-accent px-5 py-3 text-sm font-semibold text-white shadow-sm hover:bg-secondary hover:text-slate-900"
						>
							Request a Consultation
						</button>
						<Link
							href="/resources"
							className="inline-flex items-center justify-center rounded-xl border border-slate-200 bg-secondary px-5 py-3 text-sm font-semibold text-slate-900 hover:bg-accent hover:text-white dark:border-slate-800 dark:bg-slate-950 dark:text-white dark:hover:bg-slate-900"
						>
							View Resources
						</Link>
					</div>
				</Container>
			</section>

			{/* Steps */}
			<section className="mb-16">
				<Container>
					<div className="grid gap-8 lg:grid-cols-3">
						<StepCard
							step="01"
							title="Share Your Situation"
							text="Answer a few short questions so we can understand what you’re facing and what you want to accomplish."
						/>
						<StepCard
							step="02"
							title="Review & Clarify Options"
							text="We review the details, explain practical paths forward, and clarify what information may be needed next."
						/>
						<StepCard
							step="03"
							title="Move Toward Resolution"
							text="We help you take the next steps toward a clear outcome—while minimizing delays and unnecessary stress."
						/>
					</div>
				</Container>
			</section>

			{/* What we typically evaluate */}
			<section className="mb-16 bg-secondary py-16 dark:bg-slate-900">
				<Container>
					<div className="grid gap-10 lg:grid-cols-2">
						<div>
							<h2 className="text-2xl font-semibold text-accent dark:text-white">
								What We Typically Evaluate
							</h2>
							<p className="mt-4 text-black dark:text-slate-300">
								Every estate is different, but these are common areas we help
								families organize and understand.
							</p>

							<ul className="mt-6 space-y-3 text-black dark:text-slate-300">
								<li>• Estate complexity and timeline expectations</li>
								<li>• Ownership and equitable interest considerations</li>
								<li>
									• Property-related obligations (taxes, liens, violations)
								</li>
								<li>• Family coordination and decision-making needs</li>
								<li>
									• When professional legal or tax guidance may be necessary
								</li>
							</ul>
						</div>

						<div className="rounded-2xl border border-slate-200 bg-primary p-6 dark:border-slate-800 dark:bg-slate-950">
							<h3 className="text-lg font-semibold text-accent dark:text-white">
								Common Outcomes
							</h3>
							<p className="mt-3 text-black dark:text-slate-300">
								Depending on your situation, outcomes often include one or more
								of the following:
							</p>

							<div className="mt-5 grid gap-3 sm:grid-cols-2">
								<Pill text="Clear next-step plan" />
								<Pill text="Organized documentation" />
								<Pill text="Improved family alignment" />
								<Pill text="Fewer delays & confusion" />
							</div>

							<div className="mt-6 rounded-2xl bg-secondary p-5 text-sm text-black dark:bg-slate-900 dark:text-slate-300">
								<p>
									<strong>Note:</strong> We are not a law firm and do not
									provide legal or tax advice. If your case requires
									professional guidance, we’ll recommend consulting qualified
									experts.
								</p>
							</div>
						</div>
					</div>
				</Container>
			</section>

			{/* FAQ teaser */}
			<section className="mb-16">
				<Container>
					<div className="rounded-2xl border border-slate-200 bg-secondary p-8 dark:border-slate-800 dark:bg-slate-950">
						<h2 className="text-2xl font-semibold text-accent dark:text-white">
							Questions Before You Start?
						</h2>
						<p className="mt-3 text-black dark:text-slate-300">
							Visit our Resources page for educational guides and common topics.
						</p>

						<div className="mt-6 flex flex-col gap-3 sm:flex-row">
							<Link
								href="/resources"
								className="inline-flex items-center justify-center border-2 border-accent hover:bg-transparent focus:bg-transparent hover:text-accent focus:text-accent rounded-xl bg-accent px-5 py-3 text-sm font-semibold text-white shadow-sm"
							>
								Explore Resources
							</Link>
							<Link
								href="/contact-us"
								className="inline-flex items-center justify-center border-2 border-accent hover:bg-transparent focus:bg-transparent hover:text-accent focus:text-accent rounded-xl bg-accent px-5 py-3 text-sm font-semibold text-white dark:border-slate-800 dark:bg-slate-950 dark:text-white dark:hover:bg-slate-900"
							>
								Contact Us
							</Link>
						</div>
					</div>
				</Container>
			</section>

			{/* Disclaimer */}
			<section>
				<Container>
					<div className="rounded-2xl border border-accent bg-primary p-6 text-sm text-black dark:border-slate-800 dark:bg-slate-950 dark:text-slate-400">
						<p>
							<strong>Disclaimer:</strong> This page is for informational
							purposes only and does not constitute legal or tax advice. For
							advice specific to your situation, consult qualified
							professionals.
						</p>
					</div>
				</Container>
			</section>
		</main>
	);
}

function StepCard({
	step,
	title,
	text,
}: {
	step: string;
	title: string;
	text: string;
}) {
	return (
		<div className="rounded-2xl border border-slate-200 bg-secondary p-6 dark:border-slate-800 dark:bg-slate-950">
			<div className="text-sm font-semibold text-accent">{step}</div>
			<h3 className="mt-2 text-xl font-semibold text-accent dark:text-white">
				{title}
			</h3>
			<p className="mt-3 text-black dark:text-slate-300">{text}</p>
		</div>
	);
}

function Pill({ text }: { text: string }) {
	return (
		<div className="rounded-xl border border-slate-200 bg-secondary px-3 py-2 text-sm text-black dark:border-slate-800 dark:bg-slate-950 dark:text-slate-300">
			{text}
		</div>
	);
}