import Link from "next/link";
import { GuideHeader } from "@/components/sections/GuideHeader";
import { GuideFooter } from "@/components/sections/GuideFooter";
import { siteConfig } from "@/lib/site-config";

interface LegalLayoutProps {
  title: string;
  /** Omit on pages that aren't dated, such as Contact. */
  lastUpdated?: string;
  intro?: React.ReactNode;
  children: React.ReactNode;
}

/** Shared shell for the Privacy, Terms, Disclaimer and Contact pages. */
export function LegalLayout({ title, lastUpdated, intro, children }: LegalLayoutProps) {
  return (
    <>
      <GuideHeader variant="page" />

      <main className="mx-auto w-full max-w-[800px] px-5 py-14 md:px-7 md:py-20">
        <h1 className="mb-2 text-[2rem] font-extrabold md:text-[2.4rem]">{title}</h1>

        {lastUpdated && (
          <p className="text-[0.88rem] text-muted">Last updated: {lastUpdated}</p>
        )}

        {intro && (
          <div className="mt-6 text-[0.95rem] leading-relaxed text-secondary">{intro}</div>
        )}

        <div className="mt-9 space-y-8 leading-relaxed text-ink/90">{children}</div>

        <div className="mt-12 flex items-center justify-between gap-4 border-t border-border/60 pt-6">
          <Link href="/" className="text-[0.88rem] font-bold text-brand hover:underline">
            &larr; Back to the guide
          </Link>
          <a
            href={`mailto:${siteConfig.supportEmail}`}
            className="text-[0.88rem] font-bold text-brand hover:underline"
          >
            {siteConfig.supportEmail}
          </a>
        </div>
      </main>

      <GuideFooter />
    </>
  );
}

/** One titled block of legal copy. */
export function LegalSection({
  heading,
  children,
}: {
  heading: string;
  children: React.ReactNode;
}) {
  return (
    <section>
      <h2 className="mb-3 text-[1.2rem] font-extrabold">{heading}</h2>
      <div className="space-y-3 text-[0.95rem] text-secondary">{children}</div>
    </section>
  );
}

/** Bulleted list styled to match the legal copy. */
export function LegalList({ children }: { children: React.ReactNode }) {
  return <ul className="list-disc space-y-2 pl-5">{children}</ul>;
}