import { Container } from "@/components/Container";
import ContactClient from "./ContactClient";
import Link from "next/link";
import { formatPhoneNumber } from "@/utils";

export const metadata = {
	title: "Contact Us",
	description: "Request a consultation for estate settlement support.",
};

export const CONTACT_DATA: Record<string, string> = {
	email: "support@trustmarkservices.org",
	phone: "3233810502",
};

export default function ContactUs() {
	return (
		<main className="py-16">
			<section className="mb-10">
				<Container>
					<h1 className="text-4xl font-bold tracking-tight text-accent dark:text-white sm:text-5xl">
						Contact Us
					</h1>
					<p className="mt-4 max-w-3xl text-lg text-black dark:text-slate-300">
						Tell us a little about your situation and we’ll reach out with next
						steps.
					</p>
				</Container>
			</section>

			<section>
				<Container>
					<div className="grid gap-10 lg:grid-cols-2">
						{/* Left info */}
						<div className="rounded-2xl border border-slate-200 bg-secondary p-6 dark:border-slate-800 dark:bg-slate-950">
							<h2 className="text-xl font-semibold text-accent dark:text-white">
								What happens after you submit?
							</h2>
							<ul className="mt-4 space-y-3 text-black dark:text-slate-300">
								<li>
									We review your answers and contact you as soon as possible.
								</li>
								<li>We clarify your goals and available settlement options.</li>
								<li>
									If legal or tax advice is needed, we’ll recommend speaking
									with a professional.
								</li>
							</ul>

							<div className="mt-8 rounded-2xl bg-primary p-5 dark:bg-slate-900">
								<h3 className="text-sm font-semibold text-accent dark:text-white">
									Please note
								</h3>
								<p className="mt-2 text-sm text-black dark:text-slate-300">
									We are not a law firm and do not provide legal or tax advice.
								</p>
							</div>

							{/* Optional contact details placeholders */}
							<div className="mt-8 space-y-2 text-sm text-black dark:text-slate-300">
								<p>
									<span className="font-semibold text-black dark:text-white">
										Email:
									</span>{" "}
									<Link
										href={`mailto:${CONTACT_DATA.email}`}
										target="_blank"
										rel="noreferrer noopener"
										className="hover:text-accent focus:text-accent hover:font-semibold focus:font-semibold"
									>
										{CONTACT_DATA.email}
									</Link>
								</p>
								<p>
									<span className="font-semibold text-black dark:text-white">
										Phone:
									</span>{" "}
									<Link
										href={`tel:+1${CONTACT_DATA.phone}`}
										target="_blank"
										rel="noreferrer noopener"
										className="hover:text-accent focus:text-accent hover:font-semibold focus:font-semibold"
									>
										{formatPhoneNumber(CONTACT_DATA.phone)}
									</Link>
								</p>
								<p>
									<span className="font-semibold text-black dark:text-white">
										Hours:
									</span>{" "}
									Mon-Fri, 9am-5pm
								</p>
							</div>
						</div>

						{/* Right form */}
						<div className="rounded-2xl bg-secondary p-6 dark:border-slate-800 dark:bg-slate-950">
							<h2 className="text-xl font-semibold text-accent dark:text-white">
								Request a Consultation
							</h2>
							<p className="mt-2 text-sm text-black dark:text-slate-300">
								Complete the form below — it takes about a minute.
							</p>

							<div className="mt-6">
								<ContactClient />
							</div>
						</div>
					</div>
				</Container>
			</section>
		</main>
	);
}