import { Container } from "@/components/Container";

export const metadata = {
	title: "Resources",
	description: "Helpful estate settlement resources and educational guides.",
};

export default function Resources() {
	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">
						Resources
					</h1>
					<p className="mt-4 max-w-3xl text-lg text-black dark:text-slate-300">
						Educational resources to help you better understand estate
						settlement, inheritance, and planning considerations.
					</p>
				</Container>
			</section>

			{/* Guides */}
			<section className="mb-16">
				<Container>
					<h2 className="text-2xl font-semibold text-accent dark:text-white">
						Estate Settlement Guides
					</h2>

					<div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
						<ResourceCard
							title="What Is Estate Settlement?"
							description="An overview of the estate settlement process and what heirs should expect."
						/>
						<ResourceCard
							title="Understanding Equitable Interest"
							description="Learn what equitable interest means and how it applies to inherited property."
						/>
						<ResourceCard
							title="Common Estate Settlement Challenges"
							description="A breakdown of typical issues families encounter during settlement."
						/>
						<ResourceCard
							title="Probate vs. Non-Probate Assets"
							description="Understand the difference and how it may affect your situation."
						/>
						<ResourceCard
							title="Family Disputes in Estate Settlement"
							description="How disagreements arise and common paths toward resolution."
						/>
						<ResourceCard
							title="Planning Ahead for the Future"
							description="Why early planning can reduce confusion and stress later on."
						/>
					</div>
				</Container>
			</section>

			{/* Helpful Information */}
			<section className="mb-16 bg-secondary py-16 dark:bg-slate-900">
				<Container>
					<h2 className="text-2xl font-semibold text-accent dark:text-white">
						Helpful Information
					</h2>

					<div className="mt-8 grid gap-8 md:grid-cols-2">
						<InfoBlock
							title="When to Seek Professional Help"
							text="Some situations require legal or tax guidance. Knowing when to consult a qualified professional can save time and prevent complications."
						/>
						<InfoBlock
							title="Documents Often Involved in Estate Settlement"
							text="Wills, trusts, deeds, financial records, and other documents may be relevant during the settlement process."
						/>
					</div>
				</Container>
			</section>

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

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

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