import { JsonLd } from "@/components/seo/json-ld";
import { breadcrumbSchema, graph, webPageSchema } from "@/lib/schema";
import { toIsoDate } from "@/lib/seo";

export interface LegalSection {
  heading: string;
  paragraphs: string[];
  bullets?: string[];
}

/**
 * Shared layout for long-form legal documents (Privacy, Terms, …).
 *
 * Also emits the page's structured data: every legal page has the same shape, so
 * the WebPage + BreadcrumbList nodes are built here from `path`/`description`
 * rather than repeated in each of the six route files.
 */
export function LegalDoc({
  title,
  updated,
  intro,
  sections,
  path,
  description,
}: {
  title: string;
  updated: string;
  intro: string;
  sections: LegalSection[];
  /** Root-relative URL of this document, e.g. "/terms". */
  path: string;
  /** Same one-line summary used for the page's meta description. */
  description: string;
}) {
  const dateModified = toIsoDate(updated);

  return (
    <div className="container max-w-3xl py-20 md:py-24">
      <JsonLd
        data={graph(
          {
            ...webPageSchema({ path, name: title, description }),
            ...(dateModified ? { dateModified } : {}),
          },
          breadcrumbSchema([{ name: title, path }])
        )}
      />
      <p className="text-[13px] font-semibold uppercase tracking-[0.04em] text-brand">Legal</p>
      <h1 className="mt-3 font-display text-4xl font-extrabold tracking-tight md:text-5xl">
        {title}
      </h1>
      <p className="mt-3 text-sm text-muted-foreground">Last updated: {updated}</p>
      <p className="mt-6 text-lg leading-relaxed text-muted-foreground">{intro}</p>

      <div className="mt-12 space-y-10">
        {sections.map((s, i) => (
          <section key={s.heading} className="space-y-3">
            <h2 className="font-display text-xl font-bold tracking-tight">
              <span className="text-muted-foreground/50">{i + 1}.</span> {s.heading}
            </h2>
            {s.paragraphs.map((p, j) => (
              <p key={j} className="leading-relaxed text-muted-foreground">
                {p}
              </p>
            ))}
            {s.bullets && (
              <ul className="ml-1 space-y-2">
                {s.bullets.map((b) => (
                  <li key={b} className="flex gap-2.5 text-muted-foreground">
                    <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-brand" />
                    <span className="leading-relaxed">{b}</span>
                  </li>
                ))}
              </ul>
            )}
          </section>
        ))}
      </div>

      <p className="mt-12 border-t border-border pt-6 text-sm italic text-muted-foreground">
        This document is provided for transparency about how Podcast Distribution AI operates. It is a general
        template and is not legal advice; have it reviewed by qualified counsel for your
        jurisdiction before relying on it.
      </p>
    </div>
  );
}