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

/** Shared layout for long-form legal documents (Privacy, Terms). */
export function LegalDoc({
  title,
  updated,
  intro,
  sections,
}: {
  title: string;
  updated: string;
  intro: string;
  sections: LegalSection[];
}) {
  return (
    <div className="container max-w-3xl py-20 md:py-24">
      <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 PodcastYes 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>
  );
}