import Link from "next/link";
import type { ReactNode } from "react";
import { LEGAL_EFFECTIVE_DATE, SITE_NAME } from "@/lib/site";

export function LegalPage({
  title,
  children,
}: {
  title: string;
  children: ReactNode;
}) {
  return (
    <article className="mx-auto max-w-3xl px-4 py-12 sm:px-6">
      <Link
        href="/"
        className="font-display text-[0.55rem] tracking-[0.2em] text-muted uppercase hover:text-amber"
      >
        ← {SITE_NAME}
      </Link>
      <h1 className="mt-4 font-display text-3xl tracking-wide text-foreground sm:text-4xl">
        {title}
      </h1>
      <p className="mt-2 text-sm text-muted">
        Effective {LEGAL_EFFECTIVE_DATE}. Placeholders for contact details can
        be filled via environment variables later.
      </p>
      <div className="legal-prose mt-10 space-y-6 text-[0.95rem] leading-relaxed text-foreground/90">
        {children}
      </div>
      <nav className="mt-12 flex flex-wrap gap-x-4 gap-y-2 border-t border-line pt-6 text-sm text-muted">
        <Link href="/privacy" className="hover:text-amber">
          Privacy
        </Link>
        <Link href="/terms" className="hover:text-amber">
          Terms
        </Link>
        <Link href="/cookies" className="hover:text-amber">
          Cookies
        </Link>
        <Link href="/dmca" className="hover:text-amber">
          DMCA
        </Link>
        <Link href="/about" className="hover:text-amber">
          About
        </Link>
        <Link href="/contact" className="hover:text-amber">
          Contact
        </Link>
      </nav>
    </article>
  );
}

export function LegalSection({
  title,
  children,
}: {
  title: string;
  children: ReactNode;
}) {
  return (
    <section>
      <h2 className="font-display text-sm tracking-wider text-amber uppercase">
        {title}
      </h2>
      <div className="mt-3 space-y-3 text-muted [&_a]:text-amber [&_a]:underline-offset-2 hover:[&_a]:underline [&_strong]:text-foreground">
        {children}
      </div>
    </section>
  );
}