import { Link } from "@tanstack/react-router";

export type PolicySection = {
  title: string;
  body?: string[];
  items?: string[];
};

const OTHER_POLICIES = [
  { to: "/privacy-policy", label: "Privacy Policy" },
  { to: "/returns-policy", label: "Returns & Refunds" },
  { to: "/shipping-policy", label: "Shipping Policy" },
  { to: "/terms", label: "Terms of Service" },
] as const;

export function PolicyPage({
  title,
  updated,
  intro,
  sections,
}: {
  title: string;
  updated: string;
  intro: string;
  sections: PolicySection[];
}) {
  return (
    <div className="mx-auto max-w-3xl px-5 py-12">
      <nav className="mb-6 flex flex-wrap gap-4 text-sm">
        {OTHER_POLICIES.map((p) => (
          <Link
            key={p.to}
            to={p.to}
            className={
              p.label === title
                ? "font-semibold text-primary"
                : "text-muted-foreground hover:text-primary"
            }
          >
            {p.label}
          </Link>
        ))}
      </nav>

      <h1 className="text-4xl font-semibold sm:text-5xl">{title}</h1>
      <p className="mt-2 text-sm text-muted-foreground">Last updated: {updated}</p>
      <p className="mt-5 text-muted-foreground">{intro}</p>

      {sections.map((s) => (
        <section key={s.title} className="mt-9">
          <h2 className="text-xl font-semibold text-primary">{s.title}</h2>
          {s.body?.map((p) => (
            <p key={p} className="mt-3 text-muted-foreground">
              {p}
            </p>
          ))}
          {s.items && (
            <ul className="mt-3 list-disc space-y-2 pl-5 text-muted-foreground">
              {s.items.map((i) => (
                <li key={i}>{i}</li>
              ))}
            </ul>
          )}
        </section>
      ))}

      <div className="mt-12 rounded-2xl bg-card p-6">
        <h2 className="text-lg font-semibold">Questions about this policy?</h2>
        <p className="mt-2 text-sm text-muted-foreground">
          Email{" "}
          <a href="mailto:hello@rightongloss.com" className="font-medium text-primary hover:underline">
            hello@rightongloss.com
          </a>{" "}
          and we'll reply within one business day.
        </p>
        <Link to="/contact" className="mt-4 inline-block text-sm font-medium text-primary hover:underline">
          Use the contact form →
        </Link>
      </div>
    </div>
  );
}