import type { ReactNode } from "react";
import { Badge } from "@/components/ui/badge";
import { Reveal } from "@/components/ui/reveal";

export function LegalShell({
  title,
  lastUpdate,
  intro,
  children,
}: {
  title: string;
  lastUpdate: string;
  intro?: ReactNode;
  children: ReactNode;
}) {
  return (
    <div className="relative overflow-hidden">

      <section className="relative z-10 mx-auto max-w-3xl px-4 sm:px-6 md:px-10 pt-16 pb-8 sm:pt-20 sm:pb-10">
        <Reveal>
          <Badge tone="muted">Légal</Badge>
        </Reveal>
        <Reveal delay={120}>
          <h1 className="font-editorial mt-5 text-3xl sm:text-4xl md:text-5xl font-medium text-text leading-[1.05]">
            {title}
          </h1>
        </Reveal>
        <Reveal delay={240}>
          <p className="mt-5 text-sm text-text-faint">
            Dernière mise à jour : {lastUpdate}
          </p>
        </Reveal>
        {intro ? (
          <Reveal delay={340}>
            <div className="mt-7 text-sm text-text-muted leading-[1.75]">
              {intro}
            </div>
          </Reveal>
        ) : null}
      </section>

      <section className="relative z-10 mx-auto max-w-3xl px-4 sm:px-6 md:px-10 pb-24">
        <div className="space-y-14">{children}</div>
      </section>
    </div>
  );
}

export function LegalSection({
  number,
  title,
  children,
}: {
  number: number;
  title: string;
  children: ReactNode;
}) {
  return (
    <section id={`s-${number}`} className="scroll-mt-24">
      <div className="flex items-baseline gap-3 mb-5">
        <span className="font-editorial text-accent text-base tabular-nums">
          {String(number).padStart(2, "0")}
        </span>
        <h2 className="font-editorial text-xl md:text-2xl font-medium text-text leading-tight">
          {title}
        </h2>
      </div>
      <div className="legal-prose space-y-4 text-sm text-text-muted leading-[1.75]">
        {children}
      </div>
    </section>
  );
}

export function LegalSub({ children }: { children: ReactNode }) {
  return (
    <h3 className="text-text font-medium text-sm mt-5 mb-1">{children}</h3>
  );
}