import * as React from "react";
import Link from "next/link";
import { Container, Eyebrow } from "./section";

/** Shared layout for the legal pages: sticky in-page nav on wide screens, readable prose. */
export function LegalPage({
  eyebrow,
  title,
  updated,
  intro,
  sections,
}: {
  eyebrow: string;
  title: string;
  updated: string;
  intro: React.ReactNode;
  sections: { id: string; title: string; body: React.ReactNode }[];
}) {
  return (
    <Container className="py-14 sm:py-20">
      <div className="grid gap-10 lg:grid-cols-12">
        <header className="lg:col-span-12">
          <Eyebrow>{eyebrow}</Eyebrow>
          <h1 className="mt-3 text-balance text-3xl font-semibold tracking-tight sm:text-5xl">{title}</h1>
          <p className="mt-3 text-sm text-fg-subtle">Last updated {updated}</p>
          <div className="mt-6 max-w-2xl text-[15px] leading-7 text-fg-muted">{intro}</div>
        </header>
        <nav className="hidden lg:col-span-3 lg:block" aria-label="On this page">
          <ol className="sticky top-20 space-y-1.5 border-l border-border pl-4 text-[13px]">
            {sections.map((s, i) => (
              <li key={s.id}>
                <a href={`#${s.id}`} className="block py-0.5 text-fg-muted transition-colors hover:text-fg">
                  <span className="mr-2 font-mono text-[11px] text-fg-subtle">{String(i + 1).padStart(2, "0")}</span>
                  {s.title}
                </a>
              </li>
            ))}
          </ol>
        </nav>
        <div className="legal-prose max-w-2xl lg:col-span-9">
          {sections.map((s, i) => (
            <section key={s.id} id={s.id} className="scroll-mt-20 border-t border-border py-8 first:border-t-0 first:pt-0">
              <h2 className="text-lg font-semibold tracking-tight sm:text-xl">
                <span className="mr-2 font-mono text-[12px] font-medium text-fg-subtle">{String(i + 1).padStart(2, "0")}</span>
                {s.title}
              </h2>
              <div className="mt-3 space-y-3 text-[15px] leading-7 text-fg-muted [&_li]:pl-1 [&_strong]:font-medium [&_strong]:text-fg [&_ul]:list-disc [&_ul]:space-y-1.5 [&_ul]:pl-5">{s.body}</div>
            </section>
          ))}
          <p className="mt-6 text-sm text-fg-subtle">
            Questions? Write to{" "}
            <a href="mailto:contact@spboucher.ai" className="text-accent underline-offset-4 hover:underline">
              contact@spboucher.ai
            </a>
            . See also our <Link href="/privacy" className="text-accent underline-offset-4 hover:underline">Privacy Policy</Link> and{" "}
            <Link href="/terms" className="text-accent underline-offset-4 hover:underline">
              Terms of Service
            </Link>
            .
          </p>
        </div>
      </div>
    </Container>
  );
}