Legal 1

import { cn } from "@/lib/utils";

import type { Surface } from "../_types/common";
import type { LegalContent } from "../_types/legal";
import { defaultLegal1Content } from "./data";
import { SectionHeader, surfaceClass, toneFor } from "./section-header";

/** Legal documents stacked one after another: title in a narrow column,
 *  plain paragraphs beside it. Each document carries its `id` as an anchor. */
export default function Legal1({
  content = defaultLegal1Content,
  surface = "default",
}: {
  content?: LegalContent;
  surface?: Surface;
}) {
  return (
    <section className={cn("py-20 sm:py-28", surfaceClass[surface])}>
      <div className="mx-auto grid max-w-7xl gap-16 px-5 sm:px-8 lg:px-12">
        {content.documents.map((document) => (
          <div
            // scroll-mt clears a fixed navbar when an anchor link lands here.
            className="grid scroll-mt-24 gap-8 lg:grid-cols-12 lg:gap-16"
            id={document.id}
            key={document.id}
          >
            <div className="lg:col-span-4">
              <SectionHeader
                eyebrow={content.eyebrow}
                size="sm"
                title={document.title}
                tone={toneFor(surface)}
              />
            </div>

            <div className="space-y-5 text-muted-foreground leading-relaxed lg:col-span-8">
              {document.paragraphs.map((paragraph) => (
                <p key={paragraph.slice(0, 40)}>{paragraph}</p>
              ))}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}