gitfor/platform

import { MarketingHero } from "~/components/marketing/MarketingHero";
import { LEGAL_LAST_UPDATED, LEGAL_PAGES } from "~/lib/legal";
import type { LegalInfo } from "~/lib/legal";
import { Callout } from "~/ui/Callout";
import { PageContainer } from "~/ui/PageContainer";
import { ExternalLink, TextLink } from "~/ui/TextLink";

type Props = {
  title: string;
  lede: string;
  info: LegalInfo;
  children: React.ReactNode;
};

/** Shared frame for /terms, /privacy and the other policy pages: hero, draft banner, date, sibling nav. */
export function LegalPage({ title, lede, info, children }: Props) {
  return (
    <>
      <MarketingHero title={title} lede={lede} />
      <PageContainer className="grid gap-12 pb-24 lg:grid-cols-[14rem_1fr]">
        <nav aria-label="Legal" className="lg:sticky lg:top-20 lg:self-start">
          <ul className="space-y-2 text-sm">
            {LEGAL_PAGES.map((page) => (
              <li key={page.to}>
                <TextLink
                  to={page.to}
                  tone="subtle"
                  className="text-kumo-subtle"
                  activeProps={{ className: "text-white" }}
                >
                  {page.label}
                </TextLink>
              </li>
            ))}
          </ul>
        </nav>
        <article className="max-w-3xl min-w-0 space-y-10">
          {info.draft && (
            <Callout tone="warning">
              Draft — have counsel review before launch. The operator has not yet set every legal detail (entity,